domma-cms 1.6.56 → 1.6.57

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

@@ -14,9 +14,10 @@
  */
 
 import {
-    FILE_TYPES, THREAD, TONE, api, copyText, esc, fileKeys, filePicker, fileSize, findFile, listOf, openPanel, refreshBadge, rowKeys, stamp, telHref,
-    threadFiles, threadRows, when
+    FILE_TYPES, THREAD, TONE, api, copyText, esc, fileKeys, filePicker, fileSize, findFile, guardPanel, listOf, msgKeys, offerDraft, openPanel, panelSet,
+    refreshBadge, rowKeys, stamp, store, telHref, threadFiles, threadRows, when
 } from '../lib/kit.js';
+import {DRAFT_KEYS, afterSend, draftQuestion, draftText, draftValues, newDraftQuestion, ticketPrint} from '../lib/drafts.js';
 
 const ROW = `
 <div class="sp-row" data-id="{{key}}" tabindex="0" role="button" aria-haspopup="menu">
@@ -62,6 +63,8 @@ export async function mount(root, ctx) {
     const connected = M.observable(Boolean(ctx.mode.connected));
     const contact = M.observable(ctx.mode.contact || {});
     const tickets = M.observable([]);
+    const panels = panelSet();
+    scope(() => panels.leave());
     const loading = M.observable(Boolean(ctx.mode.connected));
     const reachable = M.observable(true);
     const error = M.observable('');
@@ -155,21 +158,24 @@ export async function mount(root, ctx) {
         if (c.phone) tel.setAttribute('href', telHref(c.phone));
     }));
 
+    // The first load shows a skeleton in the slot; a reload keeps the list on screen.
+    let loaded = false;
     async function load() {
-        loading.value = true;
+        const first = !loaded;
         try {
-            const res = await api.tickets();
+            const asked = api.tickets();
+            const res = first ? await kit.whileLoading(view.querySelector('.sp-loading'), asked, kit.SHAPES.iconRows) : await asked;
             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 = '';
+            loaded = true;
         } catch (err) {
-            error.value = `Could not load your requests: ${err.message || err}`;
+            if (here()) error.value = `Could not load your requests: ${err.message || err}`;
         } finally {
-            loading.value = false;
-            I.scan(view);
+            if (here()) { loading.value = false; I.scan(view); }
         }
     }
 
@@ -190,13 +196,14 @@ export async function mount(root, ctx) {
         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();
+            refreshBadge();
+            if (here()) 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'});
+            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';
@@ -205,6 +212,11 @@ export async function mount(root, ctx) {
                 : `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));
+            // Removed on purpose: its panel goes without asking, and so does a message half-written on it.
+            const showing = panels.get('detail');
+            if (showing?.key === t.ref) showing.close?.(true);
+            store.remove(DRAFT_KEYS.reply(t.ref));
+            if (!here()) return true;
             tickets.value = tickets.peek().filter(x => x.ref !== t.ref);
             refreshBadge();
             E.toast(r.state === 'discarded' ? 'Removed - it will not be sent.'
@@ -229,12 +241,25 @@ export async function mount(root, ctx) {
         ];
     }
 
-    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), room: M.observable(true), uploading: M.observable(false)};
-        let panel = null;
+    const FORM = {category: 'help', priority: 'normal', subject: '', body: '', where: ''};
+
+    async function compose() {
+        if (!panels.claim('compose')) return;
+        let opened = false;
+        try {
+            // A request left unsent last time is offered back first; it goes only on "Throw away".
+            const offer = await offerDraft(DRAFT_KEYS.compose, {here, question: (d) => newDraftQuestion(d, 'the request')});
+            if (offer.state !== 'gone') opened = await openCompose(offer.state === 'keep' ? draftValues(offer.draft, FORM) : {...FORM});
+        } catch (err) { fail(err); }
+        if (!opened) panels.release('compose');
+    }
+
+    async function openCompose(start) {
+        const f = {category: M.observable(start.category), priority: M.observable(start.priority), subject: M.observable(start.subject),
+            body: M.observable(start.body), where: M.observable(start.where), busy: M.observable(false), room: M.observable(true), uploading: M.observable(false)};
+        let guard = null;
         let wired = null;
-        openPanel({
+        const p = await openPanel({
             title: 'Ask Domma for help',
             model: f,
             cleanup: () => wired?.dispose(),
@@ -245,7 +270,7 @@ export async function mount(root, ctx) {
   </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>
+  <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. If you leave before sending, what you typed is kept and offered back next time."></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" role="radiogroup" aria-label="Priority">
@@ -253,7 +278,7 @@ export async function mount(root, ctx) {
   </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">
-  <label class="form-label">Screenshots and files <span data-help="${esc(`Up to ${caps.max} files of ${fileSize(caps.maxBytes)} each: PNG, JPEG, GIF or WebP images, a PDF or a text file. A screenshot of what went wrong helps us most. Only the Domma team sees them.`)}"></span></label>
+  <label class="form-label">Screenshots and files <span data-help="${esc(`Up to ${caps.max} files of ${fileSize(caps.maxBytes)} each: PNG, JPEG, GIF or WebP images, a PDF or a text file. A screenshot of what went wrong helps us most. Only the Domma team sees them. Files are not kept if you leave before sending - attach them again.`)}"></span></label>
   ${attachUi('Or paste a screenshot into the message.')}
   <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>
@@ -263,36 +288,71 @@ export async function mount(root, ctx) {
 </div>`,
             methods: {
                 pick: (group, value) => { if (f[group]) f[group].value = value; },
-                cancel: () => panel?.close(),
-                pickFiles: () => panel?.panel.querySelector('.sp-file-input')?.click(),
+                cancel: () => guard?.close(),
+                pickFiles: () => p?.panel.querySelector('.sp-file-input')?.click(),
                 async send() {
                     if (f.busy.peek() || f.uploading.peek()) return;
                     f.busy.value = true;
+                    // The panel closes once sent: locked meanwhile, so nothing typed during the request is lost.
+                    guard?.lock(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(), attachments: wired?.picker.attachments() || []});
                         E.toast(r.message || 'Sent.', {type: r.state === 'sent' ? 'success' : 'warning'});
-                        panel?.close();
+                        guard?.settle();
+                        guard?.close(true);
                         refreshBadge();
+                        if (!here()) return;
                         filter.value = 'active';
                         await load();
                     } catch (err) {
+                        guard?.lock(false);
                         fail(err);
                     } finally {
                         f.busy.value = false;
                     }
                 }
             }
-        }).then(p => {
-            panel = p;
-            wired = wirePicker(p, '#sp-body', f.room, f.uploading);
-            p.panel.querySelector('#sp-subject')?.focus();
         });
+        wired = wirePicker(p, '#sp-body', f.room, f.uploading);
+        guard = guardPanel(p, {
+            key: DRAFT_KEYS.compose,
+            values: () => ({category: f.category.value, priority: f.priority.value, subject: f.subject.value, body: f.body.value, where: f.where.value}),
+            baseline: {...FORM},
+            extraDirty: () => (wired?.picker.attachments() || []).length > 0 || f.uploading.peek(),
+            onClosed: () => panels.release('compose')
+        });
+        panels.set('compose', {close: (how) => guard.close(how)});
+        p.panel.querySelector('#sp-subject')?.focus();
+        return true;
     }
 
+    /** One request open at a time: opening another closes (and may ask about) the one showing. */
     async function open(ref) {
+        const showing = panels.get('detail');
+        if (showing?.key === ref) return;
+        if (showing) { await showing.close?.(); if (panels.get('detail')) return; }
+        if (!here() || !panels.claim('detail')) return;
+        let opened = false;
+        try { opened = await openTicket(ref); } catch (err) { fail(err); }
+        if (!opened) panels.release('detail');
+    }
+
+    async function openTicket(ref) {
+        const key = DRAFT_KEYS.reply(ref);
         const t0 = byRef(ref);
-        if (!t0) return;
+        if (!t0) {
+            // Gone from Domma (or removed here) with a message half-written on it: offer the words back.
+            const offer = await offerDraft(key, {here, question: (d) => draftQuestion(d, null, {what: 'a request'})});
+            if (offer.state === 'keep' && await copyText(draftText(offer.draft), 'Your unsent message is copied')) store.remove(key);
+            return false;
+        }
+        const canWrite = !['waiting', 'refused'].includes(t0.status);
+        const offer = canWrite
+            ? await offerDraft(key, {here, question: (d) => draftQuestion(d, ticketPrint(t0), {what: `your reply to “${t0.subject}”`,
+                changed: 'Domma has written since', changedAt: lastDomma(t0)})})
+            : {state: 'none'};
+        if (offer.state === 'gone') return false;
         // 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);
         // Every file in this site's requests was attached here, so this site's own copy shows them -
@@ -307,12 +367,12 @@ export async function mount(root, ctx) {
         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('');
+        const draft = M.observable(offer.state === 'keep' ? draftValues(offer.draft, {text: ''}).text : '');
         // 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 canWrite = !['waiting', 'refused'].includes(t0.status);
         let panel = null;
+        let guard = null;
         let stopScroll = () => {};
         let menu = null;
         const run = async (fn) => {
@@ -327,6 +387,7 @@ export async function mount(root, ctx) {
             cleanup: () => {
                 stopScroll(); stopFiles(); menu?.destroy?.(); wired?.dispose(); shown.dispose();
                 [cur, thread, status, statusLabel, tone, archived, hasDraft].forEach(c => c.dispose?.());
+                panels.release('detail');
             },
             html: `<div class="sp-detail">
   <dl class="sp-facts">
@@ -339,7 +400,7 @@ export async function mount(root, ctx) {
   </dl>
   <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>
+    <label class="form-label" for="sp-write"><span data-bind-text="status.value === 'closed' ? 'Write again (this reopens it)' : 'Reply'"></span> <span data-help="Goes to the Domma team with your name. If you leave before sending, what you typed is kept and offered back when you open this request again. Right-click a message (or its ⋮, or Shift+F10) to copy it."></span></label>
     <textarea id="sp-write" class="form-textarea" rows="4" maxlength="8000" data-model="draft.value" placeholder="Write to Domma Support"></textarea>
     ${attachUi('Files go with a message - paste a screenshot into it, or attach one.')}
     <div class="sp-actions">
@@ -353,29 +414,48 @@ export async function mount(root, ctx) {
 </div>`,
             methods: {
                 pickFiles: () => panel?.panel.querySelector('.sp-file-input')?.click(),
+                // The panel stays open: what is typed while it sends stays in the box, unsent and kept.
                 send: () => run(async () => {
                     if (!draft.peek().trim() || uploading.peek()) return;
-                    const r = await api.write(ref, draft.peek(), wired?.picker.attachments() || []);
+                    const sent = draft.peek();
+                    const files = wired?.picker.attachments() || [];
+                    const r = await api.write(ref, sent, files);
                     if (r.state !== 'sent') E.toast(r.message, {type: 'warning'});
-                    draft.value = '';
-                    wired?.picker.clear();
+                    draft.value = afterSend(draft.peek(), sent);
+                    // Only the files that went: any picked while it was sending stay for the next message.
+                    wired?.picker.drop(files.map(a => a.id));
+                    // What is left unsent is kept (or the draft goes) even if the panel was left meanwhile;
+                    // our own message is not "Domma has written since", so `was` moves on.
+                    guard?.rebase({text: ''}, ticketPrint({messages: [...(cur.peek().messages || []), {id: r.ref}]}));
+                    refreshBadge();
+                    if (!here()) return;
                     await load();
+                    guard?.rebase({text: ''}, ticketPrint(cur.peek()));
                 }),
                 resolve: () => run(() => actions.resolve(cur.peek())),
                 archive: () => run(async () => {
                     const on = !archived.peek();
                     await actions.archive(cur.peek(), on);
-                    if (on) panel?.close();
+                    if (on) guard?.close();
                 })
             }
         });
+        if (canWrite) wired = wirePicker(panel, '#sp-write', room, uploading);
+        guard = guardPanel(panel, {
+            key,
+            values: () => ({text: draft.value}),
+            baseline: {text: ''},
+            was: offer.state === 'keep' ? offer.draft.was : ticketPrint(t0),
+            extraDirty: () => (wired?.picker.attachments() || []).length > 0 || uploading.peek()
+        });
+        panels.set('detail', {key: ref, close: (how) => guard.close(how)});
         const box = panel.panel.querySelector('.sp-thread-host');
         stopScroll = M.effect(() => { thread.value; Promise.resolve().then(() => { M.flush?.(); box.scrollTop = box.scrollHeight; }); });
-        if (canWrite) wired = wirePicker(panel, '#sp-write', room, uploading);
         // Thumbnails for the images in the thread, as messages come; click a file to open it.
         const fileStop = M.effect(() => { shown.load(cur.value.messages || []); });
         const keysOff = fileKeys(box, (id) => shown.open(findFile(cur.peek().messages, id)));
-        stopFiles = () => { fileStop(); keysOff(); };
+        const msgOff = msgKeys(box, kit.openMenuAt);
+        stopFiles = () => { fileStop(); keysOff(); msgOff(); };
         menu = E.contextMenu(box, {
             cursor: 'glyph', match: '.sp-msg', inherit: false, density: 'compact',
             items: (li) => {
@@ -384,6 +464,7 @@ export async function mount(root, ctx) {
             }
         });
         await act('seen')(cur.peek());
+        return true;
     }
 
     const bindings = M.applyBindings({connected, contact, loading, reachable, error, filter, rows, counts, hasArchive, emptyText, waitingCount}, view, {

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

@@ -9,8 +9,10 @@
  */
 
 import {
-    THREAD, TONE, api, copyText, esc, fileKeys, findFile, listOf, openPanel, refreshBadge, rowKeys, stamp, store, threadFiles, threadRows, when
+    THREAD, TONE, api, copyText, esc, fileKeys, findFile, guardPanel, listOf, msgKeys, offerDraft, openPanel, panelSet, refreshBadge, rowKeys, stamp, store,
+    threadFiles, threadRows, when
 } from '../lib/kit.js';
+import {DRAFT_KEYS, afterSend, draftQuestion, draftText, draftValues, ticketPrint} from '../lib/drafts.js';
 
 const ROW = `
 <div class="sp-row" data-id="{{key}}" tabindex="0" role="button" aria-haspopup="menu">
@@ -40,6 +42,8 @@ export async function mount(root, ctx) {
     const inboxLabel = (s) => statuses.find(x => x.key === s)?.inboxLabel || s;
 
     const tickets = M.observable([]);
+    const panels = panelSet();
+    scope(() => panels.leave());
     const loading = M.observable(true);
     const error = M.observable('');
     const stored = store.get('support.filter');
@@ -100,21 +104,20 @@ export async function mount(root, ctx) {
     scope(M.effect(() => { rows.value; Promise.resolve().then(() => { M.flush?.(); I.scan(listEl); }); }));
 
     async function load() {
-        loading.value = true;
         try {
-            const res = await api.tickets();
+            const res = await kit.whileLoading(view.querySelector('.sp-loading'), api.tickets(), kit.SHAPES.iconRows);
             if (!here()) return;
             tickets.value = listOf(res, 'tickets');
             error.value = '';
         } catch (err) {
-            error.value = `Could not load requests: ${err.message || err}`;
+            if (here()) error.value = `Could not load requests: ${err.message || err}`;
         } finally {
-            loading.value = false;
+            if (here()) loading.value = false;
         }
     }
 
     const byId = (tid) => tickets.peek().find(t => t.id === tid);
-    const replace = (t) => { tickets.value = tickets.peek().map(x => (x.id === t.id ? {...x, ...t} : x)); refreshBadge(); return t; };
+    const replace = (t) => { if (here()) tickets.value = tickets.peek().map(x => (x.id === t.id ? {...x, ...t} : x)); refreshBadge(); return t; };
     const fail = (err) => E.toast(err.message || String(err), {type: 'error'});
 
     // ---- The moves: one definition each, for the row menu and the panel alike ----
@@ -126,20 +129,22 @@ export async function mount(root, ctx) {
         async urgent(t, on) { replace(await api.update(t.id, {priority: on ? 'urgent' : 'normal'})); },
         async archive(t, on) {
             replace(await api.update(t.id, {archived: on}));
-            E.toast(on ? `Archived "${t.subject}".` : `"${t.subject}" is back in the inbox.`, {type: 'success'});
+            E.toast(on ? `Archived “${t.subject}”.` : `“${t.subject}” is back in the inbox.`, {type: 'success'});
         },
         async remove(t) {
             if (!await E.confirm(`Delete "${esc(t.subject)}" for good? It goes from ${esc(t.siteName)}'s admin too. Archive it instead to keep it.`)) return false;
             await api.remove(t.id);
-            if (openPanel_?.tid === t.id) openPanel_.close();
+            // Deleted on purpose: its panel goes without asking, and so does a reply half-written on it.
+            const showing = panels.get('detail');
+            if (showing?.key === t.id) showing.close?.(true);
+            store.remove(DRAFT_KEYS.answer(t.id));
+            if (!here()) return true;
             tickets.value = tickets.peek().filter(x => x.id !== t.id);
             refreshBadge();
             E.toast('Deleted.', {type: 'success'});
             return true;
         }
     };
-    /** The request open in a panel, so a delete from its row menu closes it. */
-    let openPanel_ = null;
     const act = (name, ...args) => async (t) => { try { return await actions[name](t, ...args); } catch (err) { fail(err); return false; } };
 
     function menuItems(t) {
@@ -164,12 +169,41 @@ export async function mount(root, ctx) {
 
     // ---- A request, in a panel ----
 
+    /** One request open at a time: opening another closes (and may ask about) the one showing. */
     async function open(tid) {
+        const showing = panels.get('detail');
+        if (showing?.key === tid) return;
+        if (showing) { await showing.close?.(); if (panels.get('detail')) return; }
+        if (!here() || !panels.claim('detail')) return;
+        let opened = false;
+        try { opened = await openTicket(tid); } catch (err) { fail(err); }
+        if (!opened) panels.release('detail');
+    }
+
+    async function openTicket(tid) {
+        const key = DRAFT_KEYS.answer(tid);
         // Read fresh: the panel shows where a reply will be emailed, which only the detail route works out.
         let t;
-        try { t = await api.ticket(tid); } catch { t = byId(tid); }
-        if (!t || !here()) { if (!t) E.toast('That request is no longer here.', {type: 'warning'}); return; }
+        let gone = false;
+        try { t = await api.ticket(tid); } catch (err) {
+            gone = err?.status === 404 || /no such/i.test(err?.message || '');
+            if (!here()) return false;
+            // Only a 404 is a deletion. A slow or failing server says so, and any draft stays for next time.
+            if (!gone) { E.toast(`Could not open the request: ${err?.message || err}`, {type: 'error'}); return false; }
+        }
+        if (!here()) return false;
+        if (!t) {
+            // Deleted - with a reply or notes half-written on it: say so, and offer the words back.
+            const offer = await offerDraft(key, {here, question: (d) => draftQuestion(d, null, {what: 'a request'})});
+            if (offer.state === 'keep' && await copyText(draftText(offer.draft), 'Your unsent reply and notes are copied')) store.remove(key);
+            if (offer.state === 'none') E.toast('That request is no longer here.', {type: 'warning'});
+            if (gone && here()) tickets.value = tickets.peek().filter(x => x.id !== tid);
+            return false;
+        }
         if (!byId(tid)) tickets.value = [t, ...tickets.peek()];
+        const offer = await offerDraft(key, {here, question: (d) => draftQuestion(d, ticketPrint(t, {notes: true}), {what: `the request “${t.subject}”`,
+            changed: 'The customer has written, or the notes have changed, since', changedAt: t.lastFrom === 'customer' ? t.lastAt : t.updatedAt})});
+        if (offer.state === 'gone') return false;
         const rt = t.replyTo || {email: t.userEmail || '', source: t.userEmail ? 'profile' : 'none'};
         const replyNote = rt.source === 'registration' ? `Replies are emailed to ${rt.email} - the address the site was bought with.`
             : rt.source === 'profile' ? `Replies are emailed to ${rt.email} - from the requester's profile on their site (this site was not bought through Customers).`
@@ -188,13 +222,17 @@ export async function mount(root, ctx) {
         const tone = M.computed(() => `is-${TONE[cur.value.status] || 'muted'}`);
         const urgent = M.computed(() => cur.value.priority === 'urgent');
         const archived = M.computed(() => Boolean(cur.value.archived));
-        const draft = M.observable('');
+        const saved = {reply: '', notes: String(t.notes || '')};
+        const start = offer.state === 'keep' ? draftValues(offer.draft, saved) : saved;
+        const draft = M.observable(start.reply);
         // Bindings may not call methods (.trim()), so the test is a computed.
         const hasDraft = M.computed(() => Boolean(draft.value.trim()));
         const after = M.observable('answered');
-        const notes = M.observable(t.notes || '');
+        const notes = M.observable(start.notes);
         const busy = M.observable(false);
         let panel = null;
+        let guard = null;
+        let savedNotes = saved.notes;
         let stopScroll = () => {};
         let menu = null;
 
@@ -203,6 +241,8 @@ export async function mount(root, ctx) {
             busy.value = true;
             try { await fn(); } catch (err) { fail(err); } finally { busy.value = false; }
         };
+        /** Our own change is not "changed since": the draft measures from here on. */
+        const ours = (next) => guard?.rebase({reply: '', notes: savedNotes}, ticketPrint(next, {notes: true}));
         const siteUrl = t.siteHost ? `https://${t.siteHost}/admin/` : '';
         panel = await openPanel({
             title: t.subject,
@@ -211,7 +251,7 @@ export async function mount(root, ctx) {
             cleanup: () => {
                 stopScroll(); stopFiles(); shown.dispose(); menu?.destroy?.();
                 [cur, thread, status, statusLabel, tone, urgent, archived, hasDraft].forEach(c => c.dispose?.());
-                if (openPanel_?.tid === tid) openPanel_ = null;
+                panels.release('detail');
             },
             html: `<div class="sp-detail">
   <dl class="sp-facts">
@@ -226,11 +266,12 @@ export async function mount(root, ctx) {
   </dl>
   <div class="sp-thread-host">${THREAD}</div>
   <div class="sp-reply">
-    <label class="form-label" for="sp-answer">Reply <span data-help="The customer sees it in their admin and gets it by email. Right-click a message to copy or quote it."></span></label>
+    <label class="form-label" for="sp-answer">Reply <span data-help="The customer sees it in their admin and gets it by email. Right-click a message (or its ⋮, or Shift+F10) to copy or quote it. A reply you leave unsent is kept, and offered back when you open this request again."></span></label>
     <p class="sp-note sp-small">${esc(replyNote)}</p>
     <textarea id="sp-answer" class="form-textarea" rows="5" maxlength="8000" data-model="draft.value" placeholder="Write to ${esc(t.userName || 'the customer')}"></textarea>
     <div class="sp-actions">
-      <label class="sp-inline">Then <select class="form-select" data-model="after.value"><option value="answered">wait for them</option><option value="closed">mark resolved</option></select></label>
+      <label class="sp-inline">Then <select class="form-select" data-model="after.value"><option value="answered">wait for them</option><option value="closed">mark resolved</option></select>
+        <span data-help="What the request becomes once this reply goes: Answered (the customer's turn - it leaves Waiting on Domma), or Resolved (the customer is told it is done; writing again reopens it)."></span></label>
       <span class="sp-spacer"></span>
       <button type="button" class="btn btn-sm btn-ghost" data-on-click="resolve" data-bind-hidden="status.value === 'closed'" data-bind-disabled="busy.value">Resolve without reply</button>
       <button type="button" class="btn btn-sm btn-ghost" data-on-click="reopen" data-bind-hidden="status.value !== 'closed'" data-bind-disabled="busy.value">Reopen</button>
@@ -251,13 +292,16 @@ export async function mount(root, ctx) {
   </div>
 </div>`,
             methods: {
+                // The panel stays open: what is typed while it sends stays in the box, unsent and kept.
                 send: () => run(async () => {
-                    replace(await api.reply(tid, {body: draft.peek(), status: after.peek()}));
-                    draft.value = '';
+                    const sent = draft.peek();
+                    const next = replace(await api.reply(tid, {body: sent, status: after.peek()}));
+                    draft.value = afterSend(draft.peek(), sent);
+                    ours(next);
                     E.toast(rt.email ? `Sent - emailed to ${rt.email}.` : 'Sent - it shows in their admin.', {type: 'success'});
                 }),
-                resolve: () => run(() => actions.resolve(cur.peek())),
-                reopen: () => run(() => actions.reopen(cur.peek())),
+                resolve: () => run(async () => { await actions.resolve(cur.peek()); ours(cur.peek()); }),
+                reopen: () => run(async () => { await actions.reopen(cur.peek()); ours(cur.peek()); }),
                 toggleUrgent: (e) => run(async () => {
                     // A failed save puts the box back: the binding only re-runs when the value changes.
                     try { await actions.urgent(cur.peek(), Boolean(e.target.checked)); } finally { e.target.checked = urgent.peek(); }
@@ -265,20 +309,34 @@ export async function mount(root, ctx) {
                 archive: () => run(async () => {
                     const on = !archived.peek();
                     await actions.archive(cur.peek(), on);
-                    if (on) panel?.close();
+                    if (on) guard?.close();
+                }),
+                // Notes typed while they save stay unsaved (the baseline is what was sent, not what is there now).
+                saveNotes: () => run(async () => {
+                    const sent = notes.peek();
+                    const next = replace(await api.update(tid, {notes: sent}));
+                    savedNotes = sent;
+                    ours(next);
+                    E.toast('Notes saved.', {type: 'success'});
                 }),
-                saveNotes: () => run(async () => { replace(await api.update(tid, {notes: notes.peek()})); E.toast('Notes saved.', {type: 'success'}); }),
-                remove: () => run(async () => { if (await actions.remove(cur.peek())) panel?.close(); })
+                remove: () => run(async () => { await actions.remove(cur.peek()); })
             }
         });
-        openPanel_ = {tid, close: () => panel?.close()};
+        guard = guardPanel(panel, {
+            key,
+            values: () => ({reply: draft.value, notes: notes.value}),
+            baseline: saved,
+            was: offer.state === 'keep' ? offer.draft.was : ticketPrint(t, {notes: true})
+        });
+        panels.set('detail', {key: tid, close: (how) => guard.close(how)});
         // Keep the newest message in view as the thread grows.
         const box = panel.panel.querySelector('.sp-thread-host');
         stopScroll = M.effect(() => { thread.value; Promise.resolve().then(() => { M.flush?.(); box.scrollTop = box.scrollHeight; }); });
         // Thumbnails for the images that have arrived; click a file to open it in a new tab.
         const fileStop = M.effect(() => { shown.load(cur.value.messages || []); });
         const keysOff = fileKeys(box, (fid) => shown.open(findFile(cur.peek().messages, fid)));
-        stopFiles = () => { fileStop(); keysOff(); };
+        const msgOff = msgKeys(box, kit.openMenuAt);
+        stopFiles = () => { fileStop(); keysOff(); msgOff(); };
         // A message: copy it, or quote it into the reply.
         menu = E.contextMenu(box, {
             cursor: 'glyph', match: '.sp-msg', inherit: false, density: 'compact',
@@ -295,6 +353,7 @@ export async function mount(root, ctx) {
                 ];
             }
         });
+        return true;
     }
 
     const bindings = M.applyBindings({tickets, loading, error, filter, query, rows, counts, emptyText}, view, {methods: {}});

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

@@ -52,7 +52,7 @@ export const supportView = {
         }
         if (!here()) return;
         // The cog (1.1.5) - this side's settings, for those who may change them. Never blocks the screen.
-        addSettingsCog($container, kit).catch(() => {});
+        addSettingsCog($container, kit, {scope, here}).catch(() => {});
         try {
             const screen = mode.mode === 'receiver' ? 'inbox' : 'desk';
             const mod = await import(`/plugins/support/admin/views/${screen}.js?v=${V}`);

package/plugins/support/plugin.json

@@ -1,11 +1,11 @@
 {
   "name": "support",
   "displayName": "Support",
-  "version": "1.1.6",
+  "version": "1.2.0",
   "tier": "free",
   "description": "Get help from Domma straight from your admin: our email, phone and hours always to hand, and a conversation with the Domma team for anything you need - urgent requests first. Right-click a request to archive, resolve or remove it.",
   "author": "Domma CMS",
-  "date": "2026-10-13",
+  "date": "2026-10-15",
   "icon": "headphones",
   "permissions": [
     {
@@ -61,7 +61,7 @@
     ],
     "views": {
       "plugin-support": {
-        "entry": "support/admin/views/support.js?v=1.1.6",
+        "entry": "support/admin/views/support.js?v=1.2.0",
         "exportName": "supportView"
       }
     }