domma-cms 1.8.32 → 1.8.34

package/plugins/messages/admin/views/messages.js

@@ -0,0 +1,1219 @@
+/**
+ * Messages - admin screen. Route: #/plugins/messages
+ *
+ * Conversations on the left (Inbox / Unread / Archived, search), the open one
+ * on the right with its composer. Click a conversation to open it; right-click
+ * it (or ⋮, or Shift+F10) to mark it read or unread, archive it, rename a
+ * group, set how long its messages are kept or leave it. Right-click a message
+ * (or its ⋮) to copy, edit or delete it. New conversation (and, for admins,
+ * Managed groups) are banner actions opening slideovers.
+ *
+ * Built on the Tool upgrade path: domma-reactive state bound with
+ * M.applyBindings, context menus, help popovers, banner actions, a sidebar
+ * badge (countUrl: unread), viewLifetime teardown (which also closes the live
+ * event stream), and drafts - what you type is kept per conversation, so
+ * switching away or leaving the screen loses nothing; the forms ask before
+ * throwing typed work away. Pure logic: ../lib/messages.js.
+ *
+ * Calls (1.4): Call in a conversation's header starts its video call (or
+ * joins the one running) in a new tab - the tab is opened ON the click, before
+ * anything is awaited, or the pop-up blocker takes it. Everyone else in the
+ * conversation gets a "Sam is calling - Join" notice at the bottom right.
+ *
+ * Call… (1.5): a banner action (and a button on the empty screen) opens the
+ * people picker the new-conversation form uses; pick 1 to 5 and Call reuses
+ * your DM with that person, or the ad-hoc group of exactly those people, or
+ * makes one (callTarget), opens it here and starts its call - the tab again
+ * opened on the click, before anything is awaited.
+ *
+ * Admin helpers are imported at run time (loadKit) - a plugin must not import
+ * admin/ statically, since the updater replaces it wholesale.
+ */
+import {
+    CALL_MAX, CALL_PICK_MAX, FILTERS, KIND_LABEL, arrangeThreads, buildBubbles, callButton, callGroupName, callTarget,
+    callTargetText, cleanDrafts, cleanNewDraft, draftKey, filterCounts, NEW_DRAFT_QUESTION, RESTORE_ANSWERS, ago, afterSend, initials, isArchived, messageRights, plural, ringingCalls, threadTitle
+} from '../lib/messages.js';
+
+const BASE = '/plugins/messages';
+const ROUTE = /^#\/plugins\/messages\b/;
+const SIDEBAR_URL = '#/plugins/messages';
+// Drafts are kept per signed-in person (draftKey): `messages.drafts.<user id>`, `messages.newDraft.<user id>`.
+const DRAFTS_BASE = 'messages.drafts';
+const NEW_DRAFT_BASE = 'messages.newDraft';
+const FILTER_KEY = 'messages.filter';
+
+const ROW = `
+<div class="msx-row" data-id="{{id}}" tabindex="0" data-bind-class="rowCls">
+    <span class="msx-avatar" aria-hidden="true" data-bind-class="avatarCls" data-bind-text="initials"></span>
+    <span class="msx-row-main">
+        <span class="msx-row-top"><span class="msx-row-title" data-bind-text="title"></span><span class="msx-row-when" data-bind-text="when"></span></span>
+        <span class="msx-row-preview"><span class="msx-draft" data-bind-hidden="!hasDraft">Draft: </span><span data-bind-text="preview"></span></span>
+    </span>
+    <span class="msx-chip is-unread" data-bind-hidden="!unread" data-bind-text="unread"></span>
+    <button type="button" class="msx-kebab" aria-label="Actions for {{title}}" title="Actions">⋮</button>
+</div>`;
+
+const BUBBLE = `
+<div class="msx-item">
+    <div class="msx-day" data-bind-hidden="!isDay" data-bind-text="dayLabel"></div>
+    <div class="msx-callline" data-bind-hidden="!isCall"><span data-bind-text="callText"></span>
+        <button type="button" class="btn btn-xs btn-primary msx-call-join" data-bind-hidden="!canJoin">Join</button></div>
+    <div class="msx-msg" data-id="{{id}}" tabindex="0" data-bind-class="msgCls" data-bind-hidden="isDay || isCall">
+        <div class="msx-bubble">
+            <span class="msx-sender" data-bind-hidden="!showSender" data-bind-text="sender"></span>
+            <div class="msx-body" data-bind-text="bodyText"></div>
+            <div class="msx-atts" data-bind-hidden="!attachments.length">{{#each attachments key=k}}<div class="msx-att">
+                <a class="msx-att-img" href="{{url}}" target="_blank" rel="noopener noreferrer" data-bind-hidden="!isImage"><img data-bind-src="imgSrc" alt="{{name}}" loading="lazy"></a>
+                <a class="msx-att-file" href="{{url}}" target="_blank" rel="noopener noreferrer" data-bind-hidden="isImage">📎 {{name}} <small>{{size}}</small></a>
+            </div>{{/each}}</div>
+            <span class="msx-meta" data-bind-text="meta"></span>
+        </div>
+        <button type="button" class="msx-kebab" aria-label="Message actions" title="Actions" data-bind-hidden="deleted">⋮</button>
+    </div>
+</div>`;
+
+/** A call someone else started - "Sam is calling - Join". */
+const RING = `
+<div class="msx-ring" role="status">
+    <span class="msx-ring-dot" aria-hidden="true"></span>
+    <span class="msx-ring-main"><strong data-bind-text="text"></strong>
+        <small data-bind-hidden="!where" data-bind-text="where"></small>
+        <small data-bind-hidden="!count" data-bind-text="count"></small></span>
+    <button type="button" class="btn btn-sm btn-primary msx-ring-join" data-join="{{id}}">Join</button>
+    <button type="button" class="btn btn-sm btn-ghost msx-ring-close" data-dismiss="{{key}}" aria-label="Not now" title="Not now">×</button>
+</div>`;
+
+const PENDING = `<span class="msx-att-chip">{{filename}} <button type="button" data-remove="{{mediaId}}" aria-label="Remove {{filename}}">×</button></span>`;
+
+/** Filled by loadKit() on first mount. */
+let apiRequest, api, addBannerAction, helpPopovers, onceClosed, openMenuAt, viewLifetime, loadingLib;
+let lifetime;
+
+async function loadKit() {
+    if (lifetime) return;
+    const [apiMod, chrome, help, kit] = await Promise.all([
+        import('/admin/js/api.js'),
+        import('/admin/js/lib/plugin-chrome.js').catch(() => ({})),
+        import('/admin/js/lib/help-popover.js').catch(() => ({})),
+        import('/admin/js/lib/tool-kit.js')
+    ]);
+    ({apiRequest, api} = apiMod);
+    addBannerAction = chrome.addBannerAction || (() => null);
+    helpPopovers = help.helpPopovers || (() => () => {});
+    ({onceClosed, openMenuAt, viewLifetime} = kit);
+    // Skeletons while lists load (core 1.x; older cores show the slot's text).
+    loadingLib = await import('/admin/js/lib/loading.js').catch(() => null);
+    lifetime = viewLifetime(ROUTE);
+}
+
+/** E.confirm / E.prompt / slideover titles render HTML: user text goes in escaped. */
+const esc = (s) => String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+
+function fragment(html) {
+    const t = document.createElement('template');
+    t.innerHTML = html.trim();
+    return t.content.firstElementChild;
+}
+
+function refreshBadge() {
+    try { window.dispatchEvent(new CustomEvent('dm:sidebar-count', {detail: {url: SIDEBAR_URL}})); } catch { /* no sidebar */ }
+}
+
+// An empty key (no one signed in) reads nothing and keeps nothing.
+const readStore = (key, fallback) => { if (!key) return fallback; try { return S.get(key) ?? fallback; } catch { return fallback; } };
+const writeStore = (key, value) => { if (!key) return; try { value == null ? (S.remove ? S.remove(key) : S.set(key, null)) : S.set(key, value); } catch { /* a convenience */ } };
+const userId = () => { try { return S.get('auth_user')?.id; } catch { return ''; } };
+
+/**
+ * Work that finishes after its screen has gone (a send, an upload): it changes
+ * ONE conversation's draft - in storage, read fresh (never a stale copy of the
+ * whole map written back), and in a screen opened since, which hears it as
+ * `messages:settle` and applies the same change to what it holds.
+ * @param {string} key - the drafts key of the person who started the work (draftKey)
+ * @param {string} id - the conversation
+ * @param {(d: {body: string, attachments: object[]}) => {body: string, attachments: object[]}} change
+ */
+function settleElsewhere(key, id, change) {
+    if (!key) return;
+    const stored = cleanDrafts(readStore(key, {}));
+    const d = stored[id];
+    const next = change({body: d?.text || '', attachments: d?.attachments || []});
+    if (next.body.trim() || next.attachments.length) stored[id] = {text: next.body, attachments: next.attachments};
+    else delete stored[id];
+    writeStore(key, Object.keys(stored).length ? stored : null);
+    try { window.dispatchEvent(new CustomEvent('messages:settle', {detail: {key, id, change}})); } catch { /* none */ }
+}
+
+export const messagesView = {
+    templateUrl: '/plugins/messages/admin/templates/messages.html',
+
+    async onMount($container) {
+        await loadKit();
+        if (!ROUTE.test(location.hash)) return;
+        lifetime.reset();
+        const root = $container.get(0).querySelector('.msx') || $container.get(0);
+        const here = () => ROUTE.test(location.hash) && root.isConnected;
+        const scope = (fn) => { lifetime.add(fn); return fn; };
+
+        // ---- State ----
+        const me = M.observable({id: null, name: '', isAdmin: false, editWindowMinutes: 15, defaultRetentionDays: 90, globalRetentionCeilingDays: 365});
+        const threads = M.observable([]);
+        const loading = M.observable(true);
+        const loadError = M.observable('');
+        const savedFilter = readStore(FILTER_KEY, 'inbox');
+        const filter = M.observable(FILTERS.includes(savedFilter) ? savedFilter : 'inbox');
+        const query = M.observable('');
+        const activeId = M.observable('');
+        const messages = M.observable([]);
+        const threadLoading = M.observable(false);
+        const compose = M.observable('');
+        const pending = M.observable([]);          // attachments uploaded, not yet sent
+        const uploading = M.observable(false);
+        const sending = M.observable(false);
+        const now = M.observable(Date.now());
+        const draftsV = M.observable(0);           // bumps when the drafts change
+        const dismissed = M.observable([]);        // call notices put aside ("thread|startedAt")
+        const rings = M.observable([]);
+        const callBusy = M.observable(false);
+        const blockedUrl = M.observable('');       // the call's address when the browser blocked its tab
+        // This screen is one person's: their keys are fixed for its life. The unscoped keys of
+        // older builds are never offered to anyone - removed when found.
+        const DRAFTS_KEY = draftKey(DRAFTS_BASE, userId());
+        const NEW_DRAFT_KEY = draftKey(NEW_DRAFT_BASE, userId());
+        writeStore(DRAFTS_BASE, null);
+        writeStore(NEW_DRAFT_BASE, null);
+        let drafts = cleanDrafts(readStore(DRAFTS_KEY, {}));
+
+        scope(M.effect(() => { writeStore(FILTER_KEY, filter.value); }));
+        const tick = setInterval(() => { now.value = Date.now(); }, 60_000);
+        scope(() => clearInterval(tick));
+
+        const myId = () => me.peek().id;
+        const byId = (id) => threads.peek().find(t => t.id === id) || null;
+        const active = M.computed(() => threads.value.find(t => t.id === activeId.value) || null);
+
+        const rows = M.observable([]);
+        scope(M.effect(() => {
+            draftsV.value;
+            const mine = me.value.id;
+            const t0 = now.value;
+            rows.value = arrangeThreads(threads.value, {filter: filter.value, query: query.value, myId: mine}).map((t) => {
+                const title = threadTitle(t, mine);
+                const d = drafts[t.id];
+                return {
+                    id: t.id,
+                    title,
+                    initials: initials(title),
+                    avatarCls: t.kind === 'dm' ? '' : 'is-group',
+                    when: t.lastMessageAt ? ago(t.lastMessageAt, t0) : '',
+                    preview: d ? (d.text.trim() || plural(d.attachments.length, 'attachment')) : (t.lastMessagePreview || (t.kind === 'dm' ? 'No messages yet' : KIND_LABEL[t.kind])),
+                    hasDraft: Boolean(d),
+                    unread: t.unread > 0 ? t.unread : 0,
+                    rowCls: [t.id === activeId.value && 'is-active', t.unread > 0 && 'is-unread'].filter(Boolean).join(' ')
+                };
+            });
+        }));
+
+        const bubbles = M.observable([]);
+        scope(M.effect(() => {
+            const t = active.value;
+            const people = new Map((t?.participants || []).map(p => [p.id, p.name || p.email || p.id]));
+            bubbles.value = buildBubbles(messages.value, {
+                myId: me.value.id, isGroup: Boolean(t && t.kind !== 'dm'), nameOf: (id) => people.get(id) || 'Someone', now: now.value,
+                liveCallMessageId: t?.call?.messageId || ''
+            });
+        }));
+
+        // A plain observable fed by an effect (a data-each over a computed has frozen in the admin before).
+        scope(M.effect(() => { rings.value = ringingCalls(threads.value, me.value.id, dismissed.value); }));
+        // The Call button, from observables (not from `active`: a computed of a computed has frozen too).
+        const activeThread = () => threads.value.find(t => t.id === activeId.value) || null;
+
+        const data = {
+            threads, loading, loadError, filter, query, rows, active, bubbles, threadLoading, compose, pending, uploading,
+            counts: M.computed(() => filterCounts(threads.value, me.value.id)),
+            emptyText: M.computed(() => (threads.value.length
+                ? (filter.value === 'archived' ? 'Nothing archived.' : filter.value === 'unread' ? 'Nothing unread - you are up to date.' : 'No conversations match.')
+                : 'No conversations yet - start one with New conversation in the banner.')),
+            activeTitle: M.computed(() => threadTitle(active.value, me.value.id)),
+            activeInitials: M.computed(() => initials(threadTitle(active.value, me.value.id))),
+            activeMeta: M.computed(() => {
+                const t = active.value;
+                if (!t) return '';
+                const names = (t.participants || []).filter(p => p.id !== me.value.id).map(p => p.name || p.email || p.id);
+                const keep = t.retentionDays ?? me.value.defaultRetentionDays;
+                return [KIND_LABEL[t.kind], t.kind === 'dm' ? '' : plural((t.participants || []).length, 'member'),
+                    t.kind === 'dm' ? '' : names.slice(0, 4).join(', ') + (names.length > 4 ? '…' : ''),
+                    `kept ${keep} days`, isArchived(t, me.value.id) ? 'archived' : ''].filter(Boolean).join(' · ');
+            }),
+            rings, callBusy, blockedUrl,
+            callLabel: M.computed(() => callButton(activeThread()).label),
+            callTitle: M.computed(() => callButton(activeThread()).title),
+            callLive: M.computed(() => Boolean(activeThread()?.call)),
+            canSend: M.computed(() => !sending.value && !uploading.value && (compose.value.trim().length > 0 || pending.value.length > 0)),
+            composeHint: M.computed(() => (uploading.value ? 'Uploading…' : drafts[activeId.value] && (compose.value || pending.value.length) ? 'Draft kept - Ctrl+Enter sends.' : 'Ctrl+Enter sends.'))
+        };
+
+        // ---- Drafts: what you type is kept per conversation ----
+        let saveTimer = null;
+        function stashDraft(id = activeId.peek()) {
+            if (!id) return;
+            const text = compose.peek();
+            const atts = pending.peek();
+            if (text.trim() || atts.length) drafts[id] = {text, attachments: atts};
+            else delete drafts[id];
+            drafts = cleanDrafts(drafts);
+            writeStore(DRAFTS_KEY, Object.keys(drafts).length ? drafts : null);
+            draftsV.value++;
+        }
+        scope(M.effect(() => {
+            compose.value; pending.value;
+            clearTimeout(saveTimer);
+            saveTimer = setTimeout(() => stashDraft(), 500);
+        }));
+        scope(() => { clearTimeout(saveTimer); stashDraft(); });
+        /** One conversation's draft changed by work that outlived its screen (settleElsewhere). */
+        function applyChange(id, change) {
+            if (activeId.peek() === id) {
+                const next = change({body: compose.peek(), attachments: pending.peek()});
+                compose.value = next.body;
+                pending.value = next.attachments;
+                stashDraft(id);
+                return;
+            }
+            const d = drafts[id];
+            const next = change({body: d?.text || '', attachments: d?.attachments || []});
+            if (next.body.trim() || next.attachments.length) drafts[id] = {text: next.body, attachments: next.attachments};
+            else delete drafts[id];
+            drafts = cleanDrafts(drafts);
+            writeStore(DRAFTS_KEY, Object.keys(drafts).length ? drafts : null);
+            draftsV.value++;
+        }
+        const onSettle = (e) => { if (here() && e.detail?.id && e.detail.key === DRAFTS_KEY) applyChange(e.detail.id, e.detail.change); };
+        window.addEventListener('messages:settle', onSettle);
+        scope(() => window.removeEventListener('messages:settle', onSettle));
+
+        // ---- Server ----
+        /** A skeleton in `sel` while `promise` runs - the first load only (the slot is hidden afterwards). */
+        // Not keyed on slot.hidden: the bindings flush on a microtask, so a flag set just before still reads
+        // the old state. One skeleton per slot at a time - overlapping ones would restore each other's styles.
+        const skeletonOn = new Set();
+        const withSkeleton = (sel, promise) => {
+            const slot = root.querySelector(sel);
+            if (!slot || !loadingLib?.whileLoading || skeletonOn.has(slot)) return promise;
+            skeletonOn.add(slot);
+            return loadingLib.whileLoading(slot, promise, loadingLib.SHAPES?.iconRows ?? loadingLib.SHAPES?.rows)
+                .finally(() => skeletonOn.delete(slot));
+        };
+        async function loadThreads() {
+            try {
+                const list = await withSkeleton('.msx-loading', apiRequest(`${BASE}/threads`));
+                if (!here()) return;
+                threads.value = Array.isArray(list) ? list : [];
+                loadError.value = '';
+            } catch (err) {
+                loadError.value = `Could not load conversations: ${err.message}`;
+            } finally {
+                loading.value = false;
+            }
+        }
+        let reloadTimer = null;
+        const reloadSoon = () => { clearTimeout(reloadTimer); reloadTimer = setTimeout(() => { if (here()) loadThreads(); }, 300); };
+        scope(() => clearTimeout(reloadTimer));
+
+        const patchThread = (id, patch) => { threads.value = threads.peek().map(t => (t.id === id ? {...t, ...patch} : t)); };
+
+        async function markRead(id) {
+            const t = byId(id);
+            if (!t || !(t.unread > 0)) return;
+            patchThread(id, {unread: 0});
+            try { await apiRequest(`${BASE}/threads/${encodeURIComponent(id)}/read`, {method: 'POST'}); } catch { /* the next load corrects it */ }
+            refreshBadge();
+        }
+
+        async function markUnread(id) {
+            try {
+                await apiRequest(`${BASE}/threads/${encodeURIComponent(id)}/unread`, {method: 'POST'});
+                patchThread(id, {unread: Math.max(1, byId(id)?.unread || 0)});
+                if (activeId.peek() === id) closeThread();
+                refreshBadge();
+            } catch (err) {
+                E.toast(err.message || 'Could not mark it unread', {type: 'warning'});
+            }
+        }
+
+        async function setArchived(id, archived) {
+            const mine = myId();
+            const t = byId(id);
+            if (!t) return;
+            try {
+                await apiRequest(`${BASE}/threads/${encodeURIComponent(id)}/archive`, {method: 'POST', body: JSON.stringify({archived})});
+                const others = (t.archivedBy || []).filter(x => x !== mine);
+                patchThread(id, {archivedBy: archived ? [...others, mine] : others});
+                E.toast(archived ? `Archived "${threadTitle(t, mine)}" - a new message brings it back.` : 'Back in your inbox.', {type: 'success'});
+                if (archived && activeId.peek() === id && filter.peek() !== 'archived') closeThread();
+                refreshBadge();
+            } catch (err) {
+                E.toast(`Not changed: ${err.message}`, {type: 'error'});
+            }
+        }
+
+        async function leave(id) {
+            const t = byId(id);
+            if (!t) return;
+            const title = threadTitle(t, myId());
+            const last = (t.participants || []).length <= 1;
+            if (!await E.confirm(`Leave "${esc(title)}"?${last ? ' You are the last one in it, so the conversation and its messages are deleted.' : ' You stop receiving its messages; the others keep it.'}`)) return;
+            try {
+                await apiRequest(`${BASE}/threads/${encodeURIComponent(id)}`, {method: 'DELETE'});
+                delete drafts[id];
+                writeStore(DRAFTS_KEY, Object.keys(drafts).length ? drafts : null);
+                draftsV.value++;
+                threads.value = threads.peek().filter(x => x.id !== id);
+                if (activeId.peek() === id) closeThread();
+                E.toast(`Left "${title}".`, {type: 'success'});
+                refreshBadge();
+            } catch (err) {
+                E.toast(`Could not leave: ${err.message}`, {type: 'error'});
+            }
+        }
+
+        // ---- Opening a conversation ----
+        let openSeq = 0;
+        async function openThread(id) {
+            if (!byId(id)) return;
+            if (activeId.peek() && activeId.peek() !== id) stashDraft();
+            const mine = ++openSeq;
+            activeId.value = id;
+            const d = drafts[id];
+            compose.value = d?.text || '';
+            pending.value = d?.attachments || [];
+            messages.value = [];
+            threadLoading.value = true;
+            try {
+                const list = await withSkeleton('.msx-thread-loading', apiRequest(`${BASE}/threads/${encodeURIComponent(id)}/messages?limit=200`));
+                if (!here() || mine !== openSeq) return;
+                messages.value = Array.isArray(list) ? list : [];
+            } catch (err) {
+                E.toast(`Could not load the messages: ${err.message}`, {type: 'error'});
+            } finally {
+                if (mine === openSeq) threadLoading.value = false;
+            }
+            markRead(id);
+            requestAnimationFrame(() => root.querySelector('.msx-input')?.focus());
+        }
+
+        function closeThread() {
+            stashDraft();
+            activeId.value = '';
+            messages.value = [];
+            compose.value = '';
+            pending.value = [];
+        }
+
+        // Newest at the bottom, in view - after each render of the bubbles.
+        const scroller = root.querySelector('.msx-scroll');
+        let stick = true;
+        const onScroll = () => { stick = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight < 80; };
+        scroller.addEventListener('scroll', onScroll);
+        scope(() => scroller.removeEventListener('scroll', onScroll));
+        scope(M.effect(() => {
+            bubbles.value;
+            requestAnimationFrame(() => { if (stick && scroller.isConnected) scroller.scrollTop = scroller.scrollHeight; });
+        }));
+
+        // ---- Sending ----
+        async function send() {
+            const t = active.peek();
+            const body = compose.peek();
+            const atts = pending.peek();
+            if (!t || sending.peek() || (!body.trim() && !atts.length)) return;
+            sending.value = true;
+            try {
+                const msg = await apiRequest(`${BASE}/threads/${encodeURIComponent(t.id)}/messages`, {
+                    method: 'POST', body: JSON.stringify({body, attachments: atts})
+                });
+                // Whatever happens next, the sent text must not come back as a draft (and be sent twice).
+                const sentPart = {body, attachments: atts};
+                const clear = (d) => afterSend(sentPart, d);
+                if (!here()) {
+                    // Left meanwhile: the teardown kept the box as a draft - take the sent part out of it,
+                    // in storage and in any screen opened since.
+                    settleElsewhere(DRAFTS_KEY, t.id, clear);
+                    return;
+                }
+                const stillOn = activeId.peek() === t.id;
+                // Still on it: keep anything typed or attached while it was sending. Moved to another
+                // conversation: only this one's draft changes - the box and bubbles on screen are not its.
+                applyChange(t.id, clear);
+                if (stillOn) { stick = true; messages.value = [...messages.peek(), msg]; }
+                patchThread(t.id, {
+                    lastMessageAt: msg.createdAt,
+                    lastMessagePreview: body.trim().slice(0, 120) || (atts.length ? `Attachment: ${atts[0].filename}` : ''),
+                    archivedBy: []
+                });
+            } catch (err) {
+                E.toast(`Not sent: ${err.message || 'unknown error'} - your text is kept.`, {type: 'error'});
+            } finally {
+                sending.value = false;
+            }
+        }
+
+        // ---- Calls (1.4) ----
+        /**
+         * Start this conversation's call, or join the one running: the server
+         * answers with this person's own two-hour link to the call page.
+         */
+        async function joinCall(id, opened) {
+            // Opened on the click itself, before any await - after one, the pop-up blocker takes it.
+            // Call… opens it on its own click and hands it over (undefined = not opened yet).
+            const tab = opened === undefined ? window.open('', '_blank') : opened;
+            callBusy.value = true;
+            try {
+                const res = await apiRequest(`${BASE}/threads/${encodeURIComponent(id)}/call`, {method: 'POST'});
+                const url = new URL(res.url, location.origin).href;
+                if (res.call) patchThread(id, {call: res.call});
+                if (res.call) dismissed.value = [...dismissed.peek(), `${id}|${res.call.startedAt}`];
+                if (tab) { tab.opener = null; tab.location.href = url; } else blockedUrl.value = url;
+            } catch (err) {
+                tab?.close();
+                E.toast(`No call: ${err.message || 'unknown error'}`, {type: 'error'});
+            } finally {
+                callBusy.value = false;
+            }
+        }
+
+        function attach() {
+            const input = document.createElement('input');
+            input.type = 'file';
+            input.multiple = true;
+            input.addEventListener('change', async () => {
+                const files = [...(input.files || [])];
+                if (!files.length) return;
+                uploading.value = true;
+                const tid = activeId.peek();   // attachments belong to the conversation they were added on
+                for (const file of files) {
+                    const fd = new FormData();
+                    fd.append('file', file);
+                    try {
+                        const res = await api.media.upload(fd);
+                        const saved = Array.isArray(res) ? res[0] : res;
+                        if (!saved?.name) throw new Error('no file name came back');
+                        const att = {mediaId: saved.name, filename: file.name, mime: file.type, size: file.size, url: saved.url};
+                        const add = (d) => ({body: d.body, attachments: [...d.attachments, att]});
+                        if (!tid) continue;
+                        if (here()) applyChange(tid, add);
+                        else settleElsewhere(DRAFTS_KEY, tid, add);   // left mid-upload: it still reaches the draft
+                    } catch (err) {
+                        E.toast(`${file.name} was not attached: ${err.message}`, {type: 'error'});
+                    }
+                }
+                if (here()) uploading.value = false;
+            });
+            input.click();
+        }
+
+        // ---- Slideover forms ----
+        const forms = [];
+        const panels = new Set();
+        const dirtyForm = () => [...forms].reverse().find(f => f.dirty()) || null;
+
+        /** A slideover form: asks once before discarding; leaving the screen closes it (the caller keeps any draft). */
+        function openPanel({title, size = 'md', html, model, methods, dirty = () => false, onLeave = () => {}, cleanup = () => {}}) {
+            const so = E.slideover({title, size, position: 'right'});
+            const panel = fragment(html);
+            so.element.appendChild(panel);
+            const disposeHelp = helpPopovers(panel);
+            const handle = M.applyBindings(model, panel, {methods});
+            const form = {dirty, onLeave};
+            forms.push(form);
+            panels.add(so);
+            onceClosed(so, () => {
+                cleanup();
+                handle.dispose();
+                disposeHelp();
+                panels.delete(so);
+                const at = forms.indexOf(form);
+                if (at >= 0) forms.splice(at, 1);
+            });
+            const close = so.close.bind(so);
+            let closed = false;
+            let asking = false;
+            so.close = async (force) => {
+                if (!closed && force !== true && dirty()) {
+                    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();
+            };
+            I.scan(panel);
+            so.open();
+            return {so, panel};
+        }
+
+        let people = null;
+        async function loadPeople() {
+            if (people) return people;
+            try {
+                const list = await apiRequest(`${BASE}/people`);
+                people = (Array.isArray(list) ? list : []).filter(p => p.id !== myId());
+            } catch { people = []; }
+            return people;
+        }
+
+        /** The people picker both forms share - a search box and a tick list. */
+        const PEOPLE_LIST = `
+            <input type="search" class="form-input" placeholder="Find someone…" aria-label="Find someone" data-model="find.value">
+            <div class="msx-people" data-each="peopleRows.value key=id">
+                <label class="msx-person"><input type="checkbox" data-id="{{id}}" data-bind-checked="on"> <span>{{name}}</span></label>
+            </div>
+            <p class="msx-hint-block" data-bind-hidden="!noOne">There is no one else on this site to message yet. Add people in
+                <a href="#/users">Users</a> - they can message once their role has the Messages permission.</p>
+            <p class="msx-hint-block" data-bind-hidden="!noMatch.value">No one matches that.</p>`;
+        function peopleModel(all, picked) {
+            const find = M.observable('');
+            // Not an empty list with no explanation: a site with nobody else on it says so (it looked broken).
+            const noOne = all.length === 0;
+            return {
+                find,
+                noOne,
+                noMatch: M.computed(() => !noOne && Boolean(find.value.trim()) && !all.some(p => String(p.name).toLowerCase().includes(find.value.trim().toLowerCase()))),
+                peopleRows: M.computed(() => {
+                    const q = find.value.trim().toLowerCase();
+                    const on = new Set(picked.value);
+                    return all.filter(p => !q || String(p.name).toLowerCase().includes(q)).map(p => ({id: p.id, name: p.name, on: on.has(p.id)}));
+                })
+            };
+        }
+        function wirePeople(panel, picked, single) {
+            panel.querySelector('.msx-people').addEventListener('change', (e) => {
+                const id = e.target?.dataset?.id;
+                if (!id) return;
+                const cur = picked.peek();
+                picked.value = e.target.checked ? (single() ? [id] : [...new Set([...cur, id])]) : cur.filter(x => x !== id);
+            });
+        }
+
+        /** `onOpen`: called once the panel is on screen (a kept draft is removed only then). */
+        async function newConversation(draft = null, onOpen = null) {
+            const all = await loadPeople();
+            if (!here()) return;
+            const kind = M.observable(draft?.kind === 'group-adhoc' ? 'group-adhoc' : 'dm');
+            const name = M.observable(draft?.name || '');
+            const picked = M.observable((draft?.participants || []).filter(id => all.some(p => p.id === id)));
+            const saving = M.observable(false);
+            const opened = JSON.stringify({k: kind.peek(), n: name.peek(), p: picked.peek()});
+            const dirty = () => Boolean(draft) || JSON.stringify({k: kind.peek(), n: name.peek(), p: picked.peek()}) !== opened;
+            const model = {
+                kind, name, saving, ...peopleModel(all, picked),
+                isGroup: M.computed(() => kind.value !== 'dm'),
+                problem: M.computed(() => {
+                    if (kind.value === 'dm' && picked.value.length !== 1) return picked.value.length ? 'A direct message is with one person - untick the others, or make it a group.' : 'Choose who to message.';
+                    if (kind.value !== 'dm' && !picked.value.length) return 'Choose at least one person.';
+                    if (kind.value !== 'dm' && !name.value.trim()) return 'A group needs a name.';
+                    return '';
+                }),
+                pickedText: M.computed(() => plural(picked.value.length, 'person', 'people') + ' chosen')
+            };
+            model.cannot = M.computed(() => Boolean(model.problem.value) || saving.value);
+            const {so, panel} = openPanel({
+                title: 'New conversation', size: 'md', dirty,
+                onLeave: () => writeStore(NEW_DRAFT_KEY, {kind: kind.peek(), name: name.peek(), participants: picked.peek()}),
+                html: `
+                <div class="msx-form">
+                    <div>
+                        <label class="form-label" for="msx-nc-kind">Kind
+                            <span data-help="A direct message is between you and one other person, and there is only ever one per pair - starting it again opens the one you have. A group has a name and any number of people; whoever starts it can rename it."></span></label>
+                        <select id="msx-nc-kind" class="form-input" data-model="kind.value">
+                            <option value="dm">Direct message</option>
+                            <option value="group-adhoc">Group</option>
+                        </select>
+                    </div>
+                    <div data-bind-hidden="!isGroup.value">
+                        <label class="form-label" for="msx-nc-name">Group name</label>
+                        <input id="msx-nc-name" type="text" class="form-input" maxlength="80" placeholder="e.g. Editorial team" data-model="name.value">
+                    </div>
+                    <div>
+                        <label class="form-label">People <small class="msx-hint-block" data-bind-text="pickedText.value"></small></label>
+                        ${PEOPLE_LIST}
+                    </div>
+                    <small class="msx-err" data-bind-hidden="!problem.value" data-bind-text="problem.value"></small>
+                    <div class="msx-actions">
+                        <small class="msx-hint-block">Ctrl+Enter starts it.</small>
+                        <span class="msx-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="start" data-bind-disabled="cannot.value">
+                            <span data-icon="message-circle" data-icon-size="13"></span> Start</button>
+                    </div>
+                </div>`,
+                model,
+                methods: {
+                    cancel: () => so.close(),
+                    async start() {
+                        if (model.cannot.peek()) return;
+                        saving.value = true;
+                        try {
+                            const thread = await apiRequest(`${BASE}/threads`, {method: 'POST', body: JSON.stringify({
+                                kind: kind.peek(), name: name.peek().trim(), participants: picked.peek()})});
+                            so.close(true);
+                            await loadThreads();
+                            if (here()) { filter.value = 'inbox'; openThread(thread.id); }
+                        } catch (err) {
+                            E.toast(`Not started: ${err.message}`, {type: 'error'});
+                        } finally {
+                            saving.value = false;
+                        }
+                    }
+                }
+            });
+            onOpen?.();
+            wirePeople(panel, picked, () => kind.peek() === 'dm');
+            panel.addEventListener('keydown', (e) => {
+                if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); panel.querySelector('[data-on-click="start"]').click(); }
+            });
+        }
+
+        /**
+         * Call… - pick 1 to 5 people and call them: in your conversation with
+         * them if there is one (callTarget), else in a new one.
+         */
+        async function callPeople() {
+            const all = await loadPeople();
+            if (!here()) return;
+            const picked = M.observable([]);
+            const name = M.observable('');
+            const saving = M.observable(false);
+            const mine = myId();
+            const target = () => callTarget(threads.value, mine, picked.value);
+            const model = {
+                name, saving, ...peopleModel(all, picked),
+                problem: M.computed(() => {
+                    const n = picked.value.length;
+                    if (!n) return 'Choose who to call.';
+                    if (n > CALL_PICK_MAX) return `A call holds ${CALL_MAX} people, you included - choose up to ${CALL_PICK_MAX}.`;
+                    return '';
+                }),
+                where: M.computed(() => callTargetText(target(), mine)),
+                newGroup: M.computed(() => target()?.create?.kind === 'group-adhoc'),
+                namePlaceholder: M.computed(() => callGroupName([{name: me.value.name || 'You'},
+                    ...picked.value.map(id => all.find(p => p.id === id) || {name: 'Someone'})])),
+                pickedText: M.computed(() => `${plural(picked.value.length, 'person', 'people')} chosen - up to ${CALL_PICK_MAX}`)
+            };
+            model.cannot = M.computed(() => Boolean(model.problem.value) || saving.value);
+            const {so, panel} = openPanel({
+                title: 'Call…', size: 'md', dirty: () => Boolean(picked.peek().length || name.peek().trim()),
+                html: `
+                <div class="msx-form">
+                    <div>
+                        <label class="form-label">Who to call <small class="msx-hint-block" data-bind-text="pickedText.value"></small>
+                            <span data-help="Pick the people to call - one to ${CALL_PICK_MAX}, since a call holds ${CALL_MAX} people, you included. One person: the call is in your conversation with them. Several: in your group with exactly those people, or a new group if there is none. The call opens in a new tab and they see a notice to join."></span></label>
+                        ${PEOPLE_LIST}
+                    </div>
+                    <div data-bind-hidden="!newGroup.value">
+                        <label class="form-label" for="msx-cp-name">Group name <small class="msx-hint-block">optional</small></label>
+                        <input id="msx-cp-name" type="text" class="form-input" maxlength="80" data-bind-placeholder="namePlaceholder.value" data-model="name.value">
+                    </div>
+                    <small class="msx-hint-block" data-bind-hidden="problem.value" data-bind-text="where.value"></small>
+                    <small class="msx-err" data-bind-hidden="!problem.value" data-bind-text="problem.value"></small>
+                    <div class="msx-actions">
+                        <small class="msx-hint-block">Ctrl+Enter calls.</small>
+                        <span class="msx-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="call" data-bind-disabled="cannot.value">
+                            <span data-icon="video" data-icon-size="13"></span> Call</button>
+                    </div>
+                </div>`,
+                model,
+                methods: {
+                    cancel: () => so.close(),
+                    call() {
+                        if (model.cannot.peek()) return;
+                        const tgt = callTarget(threads.peek(), mine, picked.peek());
+                        if (!tgt) return;
+                        // On this click, before any await - after one, the pop-up blocker takes it.
+                        const tab = window.open('', '_blank');
+                        saving.value = true;
+                        (async () => {
+                            let id = tgt.id;
+                            try {
+                                if (!id) {
+                                    const body = tgt.create.kind === 'dm' ? tgt.create
+                                        : {...tgt.create, name: name.peek().trim() || model.namePlaceholder.peek()};
+                                    id = (await apiRequest(`${BASE}/threads`, {method: 'POST', body: JSON.stringify(body)})).id;
+                                }
+                            } catch (err) {
+                                tab?.close();
+                                saving.value = false;
+                                E.toast(`No call: ${err.message || 'unknown error'}`, {type: 'error'});
+                                return;
+                            }
+                            so.close(true);
+                            if (!byId(id)) await loadThreads();
+                            if (!here()) { tab?.close(); return; }
+                            // The call's "started" line brings it back to everyone's inbox.
+                            filter.value = 'inbox';
+                            query.value = '';
+                            await joinCall(id, tab);
+                            if (here()) openThread(id);
+                        })();
+                    }
+                }
+            });
+            wirePeople(panel, picked, () => false);
+            panel.addEventListener('keydown', (e) => {
+                if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); panel.querySelector('[data-on-click="call"]').click(); }
+            });
+            requestAnimationFrame(() => panel.querySelector('input[type="search"]')?.focus());
+        }
+
+        function editMessage(m) {
+            const r = messageRights(m, {myId: myId(), editWindowMinutes: me.peek().editWindowMinutes});
+            if (!r.canEdit) { E.toast('The time to edit this message has passed.', {type: 'warning'}); return; }
+            const text = M.observable(String(m.body ?? ''));
+            const saving = M.observable(false);
+            const model = {text, saving, left: `You can edit it for about ${plural(r.editLeftMinutes, 'more minute')}.`};
+            model.cannot = M.computed(() => saving.value || !text.value.trim() || text.value === m.body);
+            // No draft kept for this one: the edit window is minutes long, so an edit
+            // offered back on a later visit would almost always be refused.
+            const {so, panel} = openPanel({
+                title: 'Edit message', size: 'md', dirty: () => text.peek() !== String(m.body ?? ''),
+                html: `
+                <div class="msx-form">
+                    <textarea class="form-input" rows="6" aria-label="Message" data-model="text.value"></textarea>
+                    <small class="msx-hint-block" data-bind-text="left"></small>
+                    <div class="msx-actions">
+                        <small class="msx-hint-block">Ctrl+Enter saves.</small>
+                        <span class="msx-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">
+                            <span data-icon="check" data-icon-size="13"></span> Save</button>
+                    </div>
+                </div>`,
+                model,
+                methods: {
+                    cancel: () => so.close(),
+                    async save() {
+                        if (model.cannot.peek()) return;
+                        saving.value = true;
+                        try {
+                            const updated = await apiRequest(`${BASE}/threads/${encodeURIComponent(m.threadId)}/messages/${encodeURIComponent(m.id)}`, {
+                                method: 'PUT', body: JSON.stringify({body: text.peek()})});
+                            messages.value = messages.peek().map(x => (x.id === m.id ? updated : x));
+                            so.close(true);
+                        } catch (err) {
+                            E.toast(`Not saved: ${err.message}`, {type: 'error'});
+                        } finally {
+                            saving.value = false;
+                        }
+                    }
+                }
+            });
+            const area = panel.querySelector('textarea');
+            area.addEventListener('keydown', (e) => {
+                if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); model.cannot.peek() || panel.querySelector('[data-on-click="save"]').click(); }
+            });
+            requestAnimationFrame(() => area.focus());
+        }
+
+        async function deleteMessage(m) {
+            if (!await E.confirm('Delete this message? The others see "message deleted" in its place.')) return;
+            try {
+                const updated = await apiRequest(`${BASE}/threads/${encodeURIComponent(m.threadId)}/messages/${encodeURIComponent(m.id)}`, {method: 'DELETE'});
+                messages.value = messages.peek().map(x => (x.id === m.id ? updated : x));
+            } catch (err) {
+                E.toast(`Not deleted: ${err.message}`, {type: 'error'});
+            }
+        }
+
+        function renameGroup(t) {
+            const name = M.observable(t.name || '');
+            const saving = M.observable(false);
+            const model = {name, saving};
+            model.cannot = M.computed(() => saving.value || !name.value.trim() || name.value.trim() === t.name);
+            const {so, panel} = openPanel({
+                title: `Rename ${esc(t.name || 'group')}`, size: 'sm', dirty: () => name.peek() !== (t.name || ''),
+                html: `
+                <div class="msx-form">
+                    <div><label class="form-label" for="msx-rn">Name</label>
+                        <input id="msx-rn" type="text" class="form-input" maxlength="80" data-model="name.value"></div>
+                    <div class="msx-actions"><span class="msx-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">Rename</button></div>
+                </div>`,
+                model,
+                methods: {
+                    cancel: () => so.close(),
+                    async save() {
+                        if (model.cannot.peek()) return;
+                        saving.value = true;
+                        try {
+                            await apiRequest(`${BASE}/threads/${encodeURIComponent(t.id)}`, {method: 'PUT', body: JSON.stringify({name: name.peek().trim()})});
+                            patchThread(t.id, {name: name.peek().trim()});
+                            so.close(true);
+                        } catch (err) {
+                            E.toast(`Not renamed: ${err.message}`, {type: 'error'});
+                        } finally {
+                            saving.value = false;
+                        }
+                    }
+                }
+            });
+            panel.querySelector('input').addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); panel.querySelector('[data-on-click="save"]').click(); } });
+        }
+
+        function retention(t) {
+            const cfg = me.peek();
+            const start = t.retentionDays == null ? '' : String(t.retentionDays);
+            const days = M.observable(start);
+            const saving = M.observable(false);
+            const model = {
+                days, saving,
+                hint: M.computed(() => {
+                    const n = Number(days.value);
+                    if (days.value === '') return `Using the site's default: ${cfg.defaultRetentionDays} days.`;
+                    if (!Number.isInteger(n) || n < 1) return 'A whole number of days, 1 or more.';
+                    return n > cfg.globalRetentionCeilingDays ? `The site keeps nothing longer than ${cfg.globalRetentionCeilingDays} days - that is what it will be.` : `Messages older than ${plural(n, 'day')} are removed.`;
+                })
+            };
+            model.cannot = M.computed(() => {
+                const n = Number(days.value);
+                return saving.value || days.value === start || (days.value !== '' && (!Number.isInteger(n) || n < 1));
+            });
+            const {so} = openPanel({
+                title: 'Keep messages for…', size: 'sm', dirty: () => days.peek() !== start,
+                html: `
+                <div class="msx-form">
+                    <div><label class="form-label" for="msx-rt">Days
+                        <span data-help="How long this conversation's messages are kept, for everyone in it. Older ones are removed the next time it is opened. Leave it empty for the site's default. The site sets a limit nobody can go past."></span></label>
+                        <input id="msx-rt" type="number" min="1" step="1" class="form-input" placeholder="Site default" data-model="days.value">
+                        <small class="msx-hint-block" data-bind-text="hint.value"></small></div>
+                    <div class="msx-actions"><span class="msx-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>`,
+                model,
+                methods: {
+                    cancel: () => so.close(),
+                    async save() {
+                        if (model.cannot.peek()) return;
+                        saving.value = true;
+                        try {
+                            const saved = await apiRequest(`${BASE}/threads/${encodeURIComponent(t.id)}`, {method: 'PUT',
+                                body: JSON.stringify({retentionDays: days.peek() === '' ? null : Number(days.peek())})});
+                            patchThread(t.id, {retentionDays: saved?.retentionDays ?? null});
+                            so.close(true);
+                        } catch (err) {
+                            E.toast(`Not saved: ${err.message}`, {type: 'error'});
+                        } finally {
+                            saving.value = false;
+                        }
+                    }
+                }
+            });
+        }
+
+        async function managedGroups() {
+            const all = await loadPeople();
+            if (!here()) return;
+            const groups = M.observable([]);
+            const name = M.observable('');
+            const picked = M.observable([]);
+            const saving = M.observable(false);
+            const model = {groups, name, saving, ...peopleModel(all, picked), noGroups: M.computed(() => !groups.value.length)};
+            model.cannot = M.computed(() => saving.value || !name.value.trim());
+            const load = async () => {
+                try {
+                    const list = await apiRequest(`${BASE}/managed-groups`);
+                    groups.value = (Array.isArray(list) ? list : []).map(g => ({id: g.id, name: g.name || 'Unnamed', meta: plural((g.participants || []).length, 'member')}));
+                } catch (err) { E.toast(`Could not load the groups: ${err.message}`, {type: 'error'}); }
+            };
+            const {so, panel} = openPanel({
+                title: 'Managed groups', size: 'md', dirty: () => Boolean(name.peek().trim() || picked.peek().length),
+                html: `
+                <div class="msx-form">
+                    <div>
+                        <strong>Groups <span data-help="Managed groups are made by an admin for a standing team - Editors, Support. Unlike a group anyone starts, only an admin can create them."></span></strong>
+                        <p class="msx-hint-block" data-bind-hidden="!noGroups.value">None yet.</p>
+                        <div data-each="groups.value key=id"><div class="msx-group-row"><span class="msx-avatar is-group" aria-hidden="true">#</span><strong style="flex:1">{{name}}</strong><small class="msx-hint-block">{{meta}}</small></div></div>
+                    </div>
+                    <div>
+                        <strong>New managed group</strong>
+                        <label class="form-label" for="msx-mg-name">Name</label>
+                        <input id="msx-mg-name" type="text" class="form-input" maxlength="80" placeholder="e.g. Editors" data-model="name.value">
+                        <label class="form-label">People</label>
+                        ${PEOPLE_LIST}
+                    </div>
+                    <div class="msx-actions"><span class="msx-spacer"></span>
+                        <button type="button" class="btn btn-sm btn-ghost" data-on-click="cancel">Close</button>
+                        <button type="button" class="btn btn-sm btn-primary" data-on-click="create" data-bind-disabled="cannot.value">
+                            <span data-icon="users" data-icon-size="13"></span> Create group</button></div>
+                </div>`,
+                model,
+                methods: {
+                    cancel: () => so.close(),
+                    async create() {
+                        if (model.cannot.peek()) return;
+                        saving.value = true;
+                        try {
+                            await apiRequest(`${BASE}/managed-groups`, {method: 'POST', body: JSON.stringify({name: name.peek().trim(), participants: picked.peek()})});
+                            E.toast(`Created "${name.peek().trim()}".`, {type: 'success'});
+                            name.value = '';
+                            picked.value = [];
+                            await load();
+                            loadThreads();
+                        } catch (err) {
+                            E.toast(`Not created: ${err.message}`, {type: 'error'});
+                        } finally {
+                            saving.value = false;
+                        }
+                    }
+                }
+            });
+            wirePeople(panel, picked, () => false);
+            load();
+        }
+
+        // ---- Context menus ----
+        function threadItems(id) {
+            const t = byId(id);
+            if (!t) return [];
+            const mine = myId();
+            const arch = isArchived(t, mine);
+            const canRename = t.kind !== 'dm' && (t.createdBy === mine || me.peek().isAdmin);
+            return [
+                {header: threadTitle(t, mine)},
+                {label: 'Open', icon: 'message-circle', action: () => openThread(id)},
+                {label: t.call ? 'Join call' : 'Call', icon: 'video', action: () => { joinCall(id); if (activeId.peek() !== id) openThread(id); }},
+                t.unread > 0
+                    ? {label: 'Mark as read', icon: 'check', action: () => markRead(id)}
+                    : {label: 'Mark as unread', icon: 'mail', action: () => markUnread(id)},
+                arch
+                    ? {label: 'Move to inbox', icon: 'inbox', action: () => setArchived(id, false)}
+                    : {label: 'Archive', icon: 'archive', action: () => setArchived(id, true)},
+                {type: 'divider'},
+                ...(canRename ? [{label: 'Rename…', icon: 'edit', action: () => renameGroup(t)}] : []),
+                // The server lets only whoever started it (or an admin) change this.
+                ...((t.createdBy === mine || me.peek().isAdmin) ? [{label: 'Keep messages for…', icon: 'clock', action: () => retention(t)}] : []),
+                {type: 'divider'},
+                {label: 'Leave conversation…', icon: 'log-out', danger: true, action: later(() => leave(id))}
+            ];
+        }
+
+        function messageItems(id) {
+            const m = messages.peek().find(x => x.id === id);
+            if (!m || m.deletedAt) return [];
+            const r = messageRights(m, {myId: myId(), isAdmin: me.peek().isAdmin, threadCreator: active.peek()?.kind !== 'dm' ? active.peek()?.createdBy : null, editWindowMinutes: me.peek().editWindowMinutes});
+            return [
+                {label: 'Copy text', icon: 'copy', disabled: !m.body, action: () => copyText(m.body)},
+                ...(r.mine ? [{label: r.canEdit ? `Edit… (${plural(r.editLeftMinutes, 'min')} left)` : 'Edit - time has passed', icon: 'edit', disabled: !r.canEdit, action: () => editMessage(m)}] : []),
+                ...(r.canDelete ? [{type: 'divider'}, {label: 'Delete…', icon: 'trash', danger: true, action: later(() => deleteMessage(m))}] : [])
+            ];
+        }
+
+        async function copyText(text) {
+            try { await navigator.clipboard.writeText(String(text || '')); E.toast('Copied.', {type: 'success', duration: 1500}); }
+            catch { E.toast('Copying is not allowed here - select the text instead.', {type: 'warning'}); }
+        }
+
+        /**
+         * A menu item that asks a question: run a task later, so the Enter that chose the
+         * item has finished before the confirm opens - it answered OK otherwise (Leave left
+         * the conversation on Enter, unasked).
+         */
+        const later = (fn) => () => { setTimeout(fn, 0); };
+
+        /** Click = main action, ⋮ / right-click / Shift+F10 = the menu, Enter = main action. */
+        function wireList(list, match, items, main) {
+            const menu = E.contextMenu(list, {cursor: 'glyph', match, inherit: false, density: 'compact', items: (row) => items(row.dataset.id)});
+            scope(() => menu?.destroy?.());
+            const onClick = (e) => {
+                const row = e.target.closest(match);
+                if (!row) return;
+                const kebab = e.target.closest('.msx-kebab');
+                if (kebab) { openMenuAt(kebab); return; }
+                if (e.target.closest('a')) return;
+                main?.(row.dataset.id);
+            };
+            const onKey = (e) => {
+                const row = e.target.closest(match);
+                if (!row) return;
+                if (e.key === 'F10' && e.shiftKey) { e.preventDefault(); openMenuAt(row); }
+                else if (e.key === 'Enter' && e.target === row) main?.(row.dataset.id);
+            };
+            list.addEventListener('click', onClick);
+            list.addEventListener('keydown', onKey);
+            scope(() => { list.removeEventListener('click', onClick); list.removeEventListener('keydown', onKey); });
+        }
+
+        // ---- Bindings ----
+        root.querySelector('.msx-threads').innerHTML = ROW;
+        root.querySelector('.msx-bubbles').innerHTML = BUBBLE;
+        root.querySelector('.msx-attach-list').innerHTML = PENDING;
+        root.querySelector('.msx-rings').innerHTML = RING;
+        const bindings = M.applyBindings(data, root, {
+            methods: {
+                showInbox: () => { filter.value = 'inbox'; },
+                showUnread: () => { filter.value = 'unread'; },
+                showArchived: () => { filter.value = 'archived'; },
+                send: () => send(),
+                attach: () => attach(),
+                call: () => { const id = activeId.peek(); if (id && !callBusy.peek()) joinCall(id); },
+                newConversation: () => newConversation(),
+                callPeople: () => callPeople(),
+                clearBlocked: () => { blockedUrl.value = ''; },
+                // After the click has followed the link: cleared at once, the link would be empty when it is followed.
+                openedBlocked: () => { setTimeout(() => { blockedUrl.value = ''; }, 0); }
+            }
+        });
+        scope(() => bindings.dispose());
+        scope(helpPopovers(root, {position: 'bottom'}));
+
+        wireList(root.querySelector('.msx-threads'), '.msx-row', threadItems, (id) => openThread(id));
+        wireList(root.querySelector('.msx-bubbles'), '.msx-msg', messageItems, null);
+
+        // The ⋮ beside the open conversation's name: the same menu as its row.
+        const head = root.querySelector('.msx-main-head');
+        const headMenu = E.contextMenu(head, {cursor: 'glyph', match: '.msx-thread-more', inherit: false, density: 'compact',
+            items: () => threadItems(activeId.peek())});
+        scope(() => headMenu?.destroy?.());
+        const onHead = (e) => { const b = e.target.closest('.msx-thread-more'); if (b) openMenuAt(b); };
+        head.addEventListener('click', onHead);
+        scope(() => head.removeEventListener('click', onHead));
+
+        const input = root.querySelector('.msx-input');
+        const onInputKey = (e) => { if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); send(); } };
+        input.addEventListener('keydown', onInputKey);
+        scope(() => input.removeEventListener('keydown', onInputKey));
+
+        // Call notices: Join (the tab opens on this click) or put it aside; Join on a "started" line.
+        const ringList = root.querySelector('.msx-rings');
+        const onRing = (e) => {
+            const join = e.target.closest('[data-join]')?.dataset.join;
+            if (join) { joinCall(join); if (activeId.peek() !== join) openThread(join); return; }
+            const off = e.target.closest('[data-dismiss]')?.dataset.dismiss;
+            if (off) dismissed.value = [...dismissed.peek(), off];
+        };
+        ringList.addEventListener('click', onRing);
+        scope(() => ringList.removeEventListener('click', onRing));
+        const bubbleList = root.querySelector('.msx-bubbles');
+        const onLineJoin = (e) => { if (e.target.closest('.msx-call-join') && activeId.peek()) joinCall(activeId.peek()); };
+        bubbleList.addEventListener('click', onLineJoin);
+        scope(() => bubbleList.removeEventListener('click', onLineJoin));
+
+        const attList = root.querySelector('.msx-attach-list');
+        const onRemove = (e) => {
+            const id = e.target.closest('[data-remove]')?.dataset.remove;
+            if (id) pending.value = pending.peek().filter(a => a.mediaId !== id);
+        };
+        attList.addEventListener('click', onRemove);
+        scope(() => attList.removeEventListener('click', onRemove));
+
+        addBannerAction($container, {id: 'messages-new', icon: 'edit', title: 'New conversation', onClick: () => newConversation()});
+        addBannerAction($container, {id: 'messages-call', icon: 'video', title: 'Call… - pick people to call', label: 'Call…', onClick: () => callPeople()});
+
+        // ---- Live: the event stream (closed when the screen goes) ----
+        let sse = null;
+        function connect() {
+            const token = readStore('auth_token', '');
+            if (!token || typeof EventSource !== 'function') return;
+            sse = new EventSource(`/api${BASE}/stream?token=${encodeURIComponent(token)}`);
+            sse.addEventListener('message:new', (e) => {
+                let payload;
+                try { payload = JSON.parse(e.data); } catch { return; }
+                const {threadId, message} = payload || {};
+                if (!threadId || !message) return;
+                const t = byId(threadId);
+                if (!t) { reloadSoon(); refreshBadge(); return; }
+                const open = activeId.peek() === threadId && !document.hidden;
+                // A call line arrives already read (the notice did the telling), and "ended" leaves an archive alone.
+                const isCall = message.kind === 'call';
+                // Already read by me: my own (typed in a call - 1.6) or said in a call I was in.
+                const seen = isCall || (Array.isArray(message.readBy) && message.readBy.includes(myId()));
+                patchThread(threadId, {
+                    lastMessageAt: message.createdAt,
+                    lastMessagePreview: String(message.body ?? '').slice(0, 120) || (message.attachments?.length ? `Attachment: ${message.attachments[0].filename}` : ''),
+                    ...(isCall && message.call?.event === 'ended' ? {} : {archivedBy: []}),
+                    unread: open || seen ? (open ? 0 : t.unread || 0) : (t.unread || 0) + 1
+                });
+                if (activeId.peek() === threadId) {
+                    if (messages.peek().some(x => x.id === message.id)) return;
+                    messages.value = [...messages.peek(), message];
+                    if (open) apiRequest(`${BASE}/threads/${encodeURIComponent(threadId)}/read`, {method: 'POST'}).catch(() => {});
+                }
+                refreshBadge();
+            });
+            const replace = (e) => {
+                let payload;
+                try { payload = JSON.parse(e.data); } catch { return; }
+                const {threadId, message} = payload || {};
+                if (activeId.peek() === threadId && message) messages.value = messages.peek().map(x => (x.id === message.id ? message : x));
+            };
+            sse.addEventListener('message:edited', replace);
+            sse.addEventListener('message:deleted', replace);
+            sse.addEventListener('thread:created', () => { reloadSoon(); refreshBadge(); });
+            sse.addEventListener('thread:updated', () => reloadSoon());
+            const onCall = (e) => {
+                let payload;
+                try { payload = JSON.parse(e.data); } catch { return; }
+                const {threadId, call} = payload || {};
+                if (!threadId) return;
+                if (!byId(threadId)) { reloadSoon(); return; }
+                patchThread(threadId, {call: e.type === 'call:ended' ? null : call || null});
+            };
+            sse.addEventListener('call:started', onCall);
+            sse.addEventListener('call:updated', onCall);
+            sse.addEventListener('call:ended', onCall);
+        }
+        scope(() => { try { sse?.close(); } catch { /* gone */ } sse = null; });
+
+        // ---- Leaving ----
+        const onUnload = (e) => {
+            stashDraft();
+            if (dirtyForm() || sending.peek() || uploading.peek()) { e.preventDefault(); e.returnValue = ''; }
+        };
+        window.addEventListener('beforeunload', onUnload);
+        scope(() => window.removeEventListener('beforeunload', onUnload));
+        scope(() => {
+            [...forms].forEach(f => { if (f.dirty()) f.onLeave(); });
+            [...panels].forEach(so => { try { so.close(true); } catch { /* gone */ } });
+        });
+
+        I.scan(root);
+        try {
+            me.value = {...me.peek(), ...(await apiRequest(`${BASE}/me`))};
+        } catch { /* keep the defaults - the server still decides every right */ }
+        if (!here()) return;
+        if (me.peek().isAdmin) {
+            addBannerAction($container, {id: 'messages-groups', icon: 'users', title: 'Managed groups', onClick: () => managedGroups()});
+        }
+        await loadThreads();
+        if (!here()) return;
+        connect();
+        I.scan(root);
+        refreshBadge();
+
+        // A new conversation left half-made: offer it back.
+        // OK throws it away, Cancel / Escape keeps it (opened again). Removed only once answered.
+        const nd = cleanNewDraft(readStore(NEW_DRAFT_KEY, null));
+        if (nd) {
+            const asked = E.confirm(NEW_DRAFT_QUESTION, {...RESTORE_ANSWERS});
+            // Leaving while asked takes the question away too (as core's protectToolEditor does) - Cancel, so the draft stays.
+            let question = null;
+            try { question = [...document.querySelectorAll('.dm-dialog-overlay')].at(-1) ?? null; } catch { /* none */ }
+            scope(() => { const q = question; question = null; try { q?.querySelector('.dm-dialog-cancel')?.click(); q?.remove(); } catch { /* gone */ } });
+            const throwAway = Boolean(await asked);
+            question = null;
+            if (!here()) return;          // left while asked: it stays for next time
+            // Kept: removed only once the panel is open (newConversation may still wait for the people list, and be left).
+            if (!throwAway) { newConversation(nd, () => writeStore(NEW_DRAFT_KEY, null)); return; }
+            writeStore(NEW_DRAFT_KEY, null);
+        } else writeStore(NEW_DRAFT_KEY, null);
+        // Otherwise open the newest conversation with something unread, if any.
+        const first = arrangeThreads(threads.peek(), {filter: 'unread', myId: myId()})[0];
+        if (first) openThread(first.id);
+    }
+};