domma-cms 1.8.32 → 1.8.34

package/plugins/messages/admin/lib/messages.js

@@ -0,0 +1,452 @@
+/**
+ * Messages - the pure part, shared by the server (plugin.js: the badge and
+ * thread titles) and the admin screen. No I/O, no DOM, no globals; tested in
+ * tests/messages.test.js.
+ */
+
+import {fmtDate} from '../../../_lib/admin/ui/dates.js';
+
+export const FILTERS = ['inbox', 'unread', 'archived'];
+export const KIND_LABEL = {dm: 'Direct', 'group-adhoc': 'Group', 'group-managed': 'Managed group'};
+
+export const plural = (n, one, many = `${one}s`) => `${n} ${n === 1 ? one : many}`;
+
+const idOf = (p) => (p && typeof p === 'object' ? p.id : p);
+const nameOf = (p) => (p && typeof p === 'object' ? (p.name || p.email || p.id) : p) || 'Unknown';
+
+/** What a conversation is called: a group's name, or the other person in a DM. */
+export function threadTitle(t, myId) {
+    if (!t) return '';
+    if (t.kind === 'dm') {
+        const other = (t.participants || []).find(p => idOf(p) !== myId);
+        return other ? nameOf(other) : 'Just you';
+    }
+    return t.name || 'Unnamed group';
+}
+
+/** Two letters for the avatar. */
+export function initials(text) {
+    const words = String(text || '?').trim().split(/\s+/).filter(Boolean);
+    return ((words[0]?.[0] || '?') + (words.length > 1 ? words[words.length - 1][0] : '')).toUpperCase();
+}
+
+/** "just now", "5 min", "3 h", "Tue", then "12/09/2026". */
+export function ago(iso, now = Date.now()) {
+    const t = new Date(iso).getTime();
+    if (!Number.isFinite(t)) return '';
+    const s = Math.max(0, Math.round((now - t) / 1000));
+    if (s < 60) return 'just now';
+    if (s < 3600) return `${Math.round(s / 60)} min`;
+    if (s < 86400) return `${Math.round(s / 3600)} h`;
+    const d = new Date(t);
+    if (s < 6 * 86400) return d.toLocaleDateString('en-GB', {weekday: 'short'});
+    return fmtDate(d);
+}
+
+/**
+ * Collection entries keyed by `data.threadId` (a Map; entries with no thread are left out). The server builds it
+ * once per cache fill so a conversation's reads do not scan the whole site's messages (1.7.3).
+ */
+export function indexByThread(entries) {
+    const map = new Map();
+    for (const e of entries || []) {
+        const id = e?.data?.threadId;
+        if (!id) continue;
+        const list = map.get(id);
+        if (list) list.push(e); else map.set(id, [e]);
+    }
+    return map;
+}
+
+/** Whether this user has archived the thread (a per-user flag - the others still see it). */
+export const isArchived = (t, myId) => Array.isArray(t?.archivedBy) && t.archivedBy.includes(myId);
+
+/**
+ * The list as shown: newest conversation first, narrowed by the filter
+ * (Inbox hides archived ones; Unread and Archived as named) and the search box
+ * (title, participants, last message).
+ */
+export function arrangeThreads(threads, {filter = 'inbox', query = '', myId} = {}) {
+    const q = String(query).trim().toLowerCase();
+    return [...(threads || [])]
+        .filter(t => filter === 'archived' ? isArchived(t, myId)
+            : filter === 'unread' ? (t.unread > 0 && !isArchived(t, myId))
+                : !isArchived(t, myId))
+        .filter(t => !q || [threadTitle(t, myId), t.lastMessagePreview, ...(t.participants || []).map(nameOf)]
+            .some(v => String(v || '').toLowerCase().includes(q)))
+        .sort((a, b) => String(b.lastMessageAt || '').localeCompare(String(a.lastMessageAt || '')));
+}
+
+/** Counts for the filter buttons. */
+export function filterCounts(threads, myId) {
+    const list = threads || [];
+    const archived = list.filter(t => isArchived(t, myId));
+    return {
+        inbox: list.length - archived.length,
+        unread: list.filter(t => t.unread > 0 && !isArchived(t, myId)).length,
+        archived: archived.length
+    };
+}
+
+/**
+ * What the user may do to one message. The server re-checks both; this only
+ * decides what the menu offers.
+ */
+export function messageRights(m, {myId, isAdmin = false, threadCreator = null, editWindowMinutes = 15, now = Date.now()} = {}) {
+    const mine = m?.senderId === myId;
+    const deleted = Boolean(m?.deletedAt);
+    const age = now - new Date(m?.createdAt).getTime();
+    const editLeft = editWindowMinutes * 60_000 - age;
+    return {
+        mine,
+        deleted,
+        canEdit: mine && !deleted && editLeft > 0,
+        editLeftMinutes: editLeft > 0 ? Math.ceil(editLeft / 60_000) : 0,
+        canDelete: !deleted && (mine || Boolean(isAdmin) || (Boolean(threadCreator) && threadCreator === myId))
+    };
+}
+
+/** An attachment's address: its stored url, else the media file of that name. */
+export function attachmentUrl(a) {
+    if (a?.url && /^\/media\//.test(a.url)) return a.url;
+    const name = a?.mediaId || a?.filename;
+    return name ? `/media/${encodeURIComponent(name)}` : '';
+}
+
+/** Human file size. */
+export function fileSize(bytes) {
+    const n = Number(bytes) || 0;
+    if (n < 1024) return `${n} B`;
+    if (n < 1024 * 1024) return `${(n / 1024).toFixed(n < 10 * 1024 ? 1 : 0)} KB`;
+    return `${(n / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+/**
+ * Where one signed-in person's drafts are kept: `<base>.<user id>`, so a shared
+ * browser never offers one person's typing to another. No user, no key - and
+ * no draft is kept. The old unscoped keys (`messages.drafts`,
+ * `messages.newDraft`) are never read; the screen removes them.
+ * @param {string} base - 'messages.drafts' or 'messages.newDraft'
+ * @param {unknown} userId - S.get('auth_user')?.id
+ */
+export function draftKey(base, userId) {
+    const id = typeof userId === 'string' || typeof userId === 'number' ? String(userId).trim() : '';
+    return id && /^[\w.@-]{1,128}$/.test(id) ? `${base}.${id}` : '';
+}
+
+/** The question offered for a half-made new conversation: OK throws it away, Cancel (and Escape) keeps it. */
+export const NEW_DRAFT_QUESTION = 'Throw away the changes you left unsaved to a new conversation?';
+export const RESTORE_ANSWERS = Object.freeze({confirmText: 'Throw away', cancelText: 'Keep them'});
+
+/** A kept new-conversation draft, whitelisted: {kind, name, participants} - or null when there is nothing in it. */
+export function cleanNewDraft(raw) {
+    if (!raw || typeof raw !== 'object' || Array.isArray(raw)) return null;
+    const kind = raw.kind === 'group-adhoc' ? 'group-adhoc' : 'dm';
+    const name = typeof raw.name === 'string' ? raw.name.slice(0, 80) : '';
+    const participants = Array.isArray(raw.participants) ? raw.participants.filter(x => typeof x === 'string').slice(0, 200) : [];
+    return name.trim() || participants.length ? {kind, name, participants} : null;
+}
+
+/**
+ * Per-thread composer drafts, as stored (whitelisted - whatever an older
+ * build left is not trusted): {threadId: {text, attachments}}. Empty ones go.
+ */
+export function cleanDrafts(raw) {
+    const out = {};
+    if (!raw || typeof raw !== 'object') return out;
+    for (const [id, d] of Object.entries(raw)) {
+        if (typeof id !== 'string' || !d || typeof d !== 'object') continue;
+        const text = typeof d.text === 'string' ? d.text.slice(0, 20000) : '';
+        const attachments = Array.isArray(d.attachments)
+            ? d.attachments.filter(a => a && typeof a.mediaId === 'string').slice(0, 20)
+                .map(a => ({mediaId: a.mediaId, filename: String(a.filename || a.mediaId), mime: String(a.mime || ''), size: Number(a.size) || 0, url: attachmentUrl(a)}))
+            : [];
+        if (text.trim() || attachments.length) out[id] = {text, attachments};
+    }
+    return out;
+}
+
+/**
+ * The sidebar badge (countUrl): unread messages in conversations not
+ * archived - a signal, not an inventory. Plain text throughout; the popover
+ * sets it with textContent.
+ *
+ * @param {object[]} threads - this user's, each with `unread`, participants as {id, name}
+ */
+export function unreadBadge(threads, myId, now = Date.now()) {
+    const live = (threads || []).filter(t => !isArchived(t, myId));
+    const waiting = live.filter(t => t.unread > 0)
+        .sort((a, b) => String(b.lastMessageAt || '').localeCompare(String(a.lastMessageAt || '')));
+    const unread = waiting.reduce((n, t) => n + t.unread, 0);
+    return {
+        count: unread,
+        showZero: true,
+        label: unread ? `${plural(unread, 'unread message')} in ${plural(waiting.length, 'conversation')}` : 'No unread messages',
+        tone: 'info',
+        details: {
+            title: 'Messages',
+            rows: [
+                {label: 'Unread', value: String(unread)},
+                {label: 'Conversations', value: String(live.length)},
+                {label: 'Archived', value: String((threads || []).length - live.length)}
+            ],
+            items: waiting.slice(0, 6).map(t => ({
+                text: threadTitle(t, myId),
+                meta: [`${t.unread} unread`, ago(t.lastMessageAt, now), String(t.lastMessagePreview || '').replace(/\s+/g, ' ').slice(0, 60)].filter(Boolean).join(' · ')
+            })),
+            empty: 'Nothing waiting - you are up to date.'
+        }
+    };
+}
+
+/** "Today", "Yesterday", then "Tue 23/09/2026" - for the day separators. */
+export function dayLabel(iso, now = Date.now()) {
+    const d = new Date(iso);
+    if (!Number.isFinite(d.getTime())) return '';
+    const start = (x) => { const c = new Date(x); c.setHours(0, 0, 0, 0); return c.getTime(); };
+    const days = Math.round((start(now) - start(d)) / 86_400_000);
+    if (days === 0) return 'Today';
+    if (days === 1) return 'Yesterday';
+    return `${d.toLocaleDateString('en-GB', {weekday: 'short'})} ${fmtDate(d)}`;
+}
+
+/**
+ * The open conversation as the screen shows it: a day separator whenever the
+ * day changes, then each message with what it needs - who sent it (only in a
+ * group, only when the sender changes), its text or "message deleted", its
+ * attachments (addresses always rebuilt - a stored url is never trusted),
+ * and its time. A call line (1.4, `kind: 'call'`) is a line across the
+ * conversation, with Join on the "started" line of the call still running.
+ *
+ * @param {object[]} messages - oldest first
+ * @param {{myId, isGroup, nameOf: (id) => string, now?: number, liveCallMessageId?: string}} ctx
+ */
+export function buildBubbles(messages, {myId, isGroup = false, nameOf = (id) => id, now = Date.now(), liveCallMessageId = ''} = {}) {
+    const out = [];
+    let lastDay = '';
+    let lastSender = null;
+    for (const m of messages || []) {
+        const day = dayLabel(m.createdAt, now);
+        if (day && day !== lastDay) {
+            out.push({key: `day:${day}:${m.id}`, id: '', isDay: true, dayLabel: day, isCall: false, callText: '', canJoin: false});
+            lastDay = day;
+            lastSender = null;
+        }
+        const mine = m.senderId === myId;
+        const deleted = Boolean(m.deletedAt);
+        const time = new Date(m.createdAt);
+        const hhmm = Number.isFinite(time.getTime()) ? time.toLocaleTimeString('en-GB', {hour: '2-digit', minute: '2-digit'}) : '';
+        const isCall = m.kind === 'call' && !deleted;
+        if (isCall) {
+            out.push({
+                key: m.id, id: m.id, isDay: false, dayLabel: '', isCall: true, mine: false, deleted: false, showSender: false, sender: '',
+                bodyText: '', meta: '', msgCls: '', attachments: [],
+                callText: [String(m.body ?? ''), hhmm].filter(Boolean).join(' · '),
+                canJoin: Boolean(liveCallMessageId) && m.id === liveCallMessageId
+            });
+            lastSender = null;
+            continue;
+        }
+        out.push({
+            key: m.id,
+            id: m.id,
+            isDay: false,
+            dayLabel: '',
+            isCall: false,
+            callText: '',
+            canJoin: false,
+            mine,
+            deleted,
+            showSender: isGroup && !mine && m.senderId !== lastSender,
+            sender: nameOf(m.senderId),
+            bodyText: deleted ? 'message deleted' : String(m.body ?? ''),
+            // Typed in the conversation's call (1.6) - said so, quietly, beside the time.
+            meta: [hhmm, m.callChat && !deleted ? 'in the call' : '', m.editedAt && !deleted ? 'edited' : ''].filter(Boolean).join(' · '),
+            msgCls: [mine && 'is-mine', deleted && 'is-deleted'].filter(Boolean).join(' '),
+            attachments: deleted ? [] : (m.attachments || []).map((a, i) => {
+                const url = attachmentUrl(a);
+                const isImage = typeof a.mime === 'string' && a.mime.startsWith('image/');
+                return {k: `${i}:${url}`, url, isImage, imgSrc: isImage ? url : '', name: String(a.filename || a.mediaId || 'attachment'), size: fileSize(a.size)};
+            }).filter(a => a.url)
+        });
+        lastSender = m.senderId;
+    }
+    return out;
+}
+
+/**
+ * Attachments as the server stores them - never the client's word for the
+ * address: a media name and the file's facts, the url rebuilt from the name.
+ */
+export function cleanAttachments(list) {
+    return (Array.isArray(list) ? list : []).slice(0, 20)
+        .filter(a => a && typeof a.mediaId === 'string' && a.mediaId && !/[\/\\]|\.\./.test(a.mediaId))
+        .map(a => ({
+            mediaId: a.mediaId,
+            filename: String(a.filename || a.mediaId).slice(0, 200),
+            mime: String(a.mime || '').slice(0, 100),
+            size: Math.max(0, Number(a.size) || 0),
+            url: `/media/${encodeURIComponent(a.mediaId)}`
+        }));
+}
+
+// ---- Notifications (1.3, Notifications Phase 4) -------------------------------
+
+/** How long a message waits unread before its recipient is told; older than MAX_AGE is left alone. */
+export const UNREAD_AFTER_MS = 10 * 60_000;
+export const UNREAD_MAX_AGE_MS = 2 * 86_400_000;
+
+export const unreadKey = (threadId, userId) => `unread:${threadId}:${userId}`;
+
+/**
+ * Who has a message waiting unread for 10 minutes or more - one notice per
+ * conversation per person, to that person. Their own messages, deleted ones,
+ * archived conversations and anything older than two days are left out.
+ *
+ * @param {object[]} threads - {id, kind, name, participants, archivedBy}
+ * @param {object[]} messages - {threadId, senderId, body, createdAt, readBy, deletedAt}
+ * @param {Object<string, string>} names - user id -> display name
+ * @param {number} [now]
+ * @returns {object[]} notify() payloads
+ */
+export function unreadNotices(threads, messages, names = {}, now = Date.now()) {
+    const byThread = new Map();
+    for (const m of messages || []) {
+        if (!m?.threadId || m.deletedAt) continue;
+        const at = Date.parse(m.createdAt);
+        if (Number.isNaN(at) || now - at < UNREAD_AFTER_MS || now - at > UNREAD_MAX_AGE_MS) continue;
+        if (!byThread.has(m.threadId)) byThread.set(m.threadId, []);
+        byThread.get(m.threadId).push(m);
+    }
+    const out = [];
+    for (const t of threads || []) {
+        const waiting = byThread.get(t.id);
+        if (!waiting) continue;
+        for (const uid of t.participants || []) {
+            if (isArchived(t, uid)) continue;
+            const mine = waiting.filter(m => m.senderId !== uid && !(m.readBy || []).includes(uid));
+            if (!mine.length) continue;
+            const senders = [...new Set(mine.map(m => names[m.senderId] || 'Someone'))];
+            const where = t.kind === 'dm' ? '' : ` in ${t.name || 'a group'}`;
+            const last = mine.at(-1);
+            out.push({
+                title: mine.length === 1 ? `${senders[0]} sent you a message${where}` : `${plural(mine.length, 'unread message')} from ${senders.join(', ')}${where}`,
+                body: String(last.body || (last.attachments?.length ? 'An attachment' : '')).replace(/\s+/g, ' ').trim().slice(0, 200),
+                severity: 'info',
+                link: '#/plugins/messages',
+                dedupeKey: unreadKey(t.id, uid),
+                audience: {userIds: [String(uid)]}
+            });
+        }
+    }
+    return out;
+}
+
+// ---- Calls (1.4) ----------------------------------------------------------------
+
+/** How many a call holds (the engine's browser mesh). */
+export const CALL_MAX = 6;
+
+/**
+ * The Call button in a conversation's header: its words and its tooltip.
+ *
+ * @param {object|null} t - the thread, with `call` ({byName, in}) while one is running
+ */
+export function callButton(t) {
+    if (!t) return {label: 'Call', title: ''};
+    const size = (t.participants || []).length;
+    const over = size > CALL_MAX ? ` A call holds ${CALL_MAX} people - the first ${CALL_MAX} to join get in.` : '';
+    if (t.call) {
+        const n = Number(t.call.in) || 0;
+        return {label: n ? `Join call (${n})` : 'Join call', title: `${t.call.byName || 'Someone'} started a call - join it.${over}`};
+    }
+    return {label: 'Call', title: `Start a video call - everyone in this conversation is told and can join.${over}`};
+}
+
+/**
+ * The "X is calling - Join" notices: every running call someone ELSE started,
+ * in a conversation that is not archived, less the ones put aside.
+ */
+export function ringingCalls(threads, myId, dismissed = []) {
+    const off = new Set(dismissed);
+    return (threads || [])
+        .filter(t => t.call && t.call.by !== myId && !isArchived(t, myId) && !off.has(`${t.id}|${t.call.startedAt}`))
+        .map(t => ({
+            id: t.id,
+            key: `${t.id}|${t.call.startedAt}`,
+            text: `${t.call.byName || 'Someone'} is calling`,
+            where: t.kind === 'dm' ? '' : (t.name || 'a group'),
+            count: Number(t.call.in) ? `${plural(Number(t.call.in), 'person', 'people')} in` : ''
+        }));
+}
+
+// ---- Call… (1.5) - a call started by picking people ------------------------------
+
+/** How many others a call started from the picker may take: the call holds CALL_MAX, you included. */
+export const CALL_PICK_MAX = CALL_MAX - 1;
+
+const firstName = (p) => String(nameOf(p)).trim().split(/\s+/)[0] || 'Someone';
+
+/** "Alex, Priya and Sam" - the default name of a group made for a call (80 characters at most). */
+export function callGroupName(people) {
+    const names = (people || []).map(firstName);
+    const text = names.length > 1 ? `${names.slice(0, -1).join(', ')} and ${names.at(-1)}` : (names[0] || 'Call');
+    return text.slice(0, 80);
+}
+
+/**
+ * Where a call with the people picked goes. One person: your direct
+ * conversation with them (the server also finds it - DMs are one per pair).
+ * Several: an ad-hoc group with EXACTLY those people and you, not archived by
+ * you - the one used most recently if there are several; else a new group.
+ *
+ * @param {object[]} threads - this user's (participants as ids or {id, name})
+ * @param {string} myId
+ * @param {string[]} picked - the others' ids
+ * @returns {{id: string, thread: object}|{create: {kind: string, participants: string[]}}|null}
+ *          null when nobody (or more than CALL_PICK_MAX) is picked
+ */
+export function callTarget(threads, myId, picked) {
+    const others = [...new Set((picked || []).filter(id => typeof id === 'string' && id && id !== myId))];
+    if (!others.length || others.length > CALL_PICK_MAX) return null;
+    const want = [myId, ...others].sort().join('|');
+    const kind = others.length === 1 ? 'dm' : 'group-adhoc';
+    const match = [...(threads || [])]
+        .filter(t => t && t.kind === kind && (kind === 'dm' || !isArchived(t, myId))
+            && [...new Set((t.participants || []).map(idOf))].sort().join('|') === want)
+        .sort((a, b) => String(b.lastMessageAt || '').localeCompare(String(a.lastMessageAt || '')))[0];
+    if (match) return {id: match.id, thread: match};
+    return {create: {kind, participants: others}};
+}
+
+/** What the Call… form says it will do. */
+export function callTargetText(target, myId) {
+    if (!target) return '';
+    if (target.id) {
+        return target.thread.kind === 'dm'
+            ? `Calls in your conversation with ${threadTitle(target.thread, myId)}.`
+            : `Calls in your group "${threadTitle(target.thread, myId)}".`;
+    }
+    return target.create.kind === 'dm' ? 'Starts your conversation with them and calls.' : 'Starts a new group for these people and calls.';
+}
+
+/**
+ * What is left in the compose box once a message has been sent (1.8): the box
+ * may have changed while the request ran. Unchanged - empty. Typed on after the
+ * sent text - just the new part. Edited some other way - all of it, so nothing
+ * typed is lost. Attachments: the ones that were not sent stay.
+ *
+ * @param {{body: string, attachments: object[]}} sent
+ * @param {{body: string, attachments: object[]}} now
+ * @returns {{body: string, attachments: object[]}}
+ */
+export function afterSend(sent, now) {
+    const s = String(sent?.body ?? '');
+    const n = String(now?.body ?? '');
+    let body = n;
+    if (n === s) body = '';
+    else if (s && n.startsWith(s)) body = n.slice(s.length).replace(/^\s+/, '');
+    const gone = new Set((sent?.attachments || []).map(a => a?.mediaId));
+    const attachments = (now?.attachments || []).filter(a => !gone.has(a?.mediaId));
+    return {body, attachments};
+}

package/plugins/messages/admin/templates/messages.html

@@ -0,0 +1,76 @@
+<!-- Messages. Bound with M.applyBindings - see admin/views/messages.js, which also inserts the row
+     templates (the router renders a templateUrl through _.render, eating any {{…}}). No page heading:
+     the plugin banner is the heading; New conversation and Call… are banner actions. -->
+<div class="msx">
+    <!-- Conversations -->
+    <section class="msx-card msx-side">
+        <div class="msx-side-head">
+            <div class="msx-seg" role="group" aria-label="Show">
+                <button type="button" data-on-click="showInbox" data-bind-class="filter.value === 'inbox' && 'is-on'">Inbox <b data-bind-text="counts.value.inbox"></b></button>
+                <button type="button" data-on-click="showUnread" data-bind-class="filter.value === 'unread' && 'is-on'">Unread <b data-bind-text="counts.value.unread"></b></button>
+                <button type="button" data-on-click="showArchived" data-bind-class="filter.value === 'archived' && 'is-on'">Archived <b data-bind-text="counts.value.archived"></b></button>
+            </div>
+            <span data-help-title="Conversations" data-help="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. Archiving is yours alone - the others still see it - and a new message brings it back to your inbox. A conversation with a draft you have not sent says so."></span>
+        </div>
+        <input type="search" class="form-input msx-search" placeholder="Search conversations…" aria-label="Search conversations" data-model="query.value">
+        <div class="msx-note msx-loading dm-loading-slot" data-bind-hidden="!loading.value">Loading…</div>
+        <p class="msx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+        <p class="msx-note" data-bind-hidden="loading.value || loadError.value || rows.value.length" data-bind-text="emptyText.value"></p>
+        <div class="msx-threads" data-each="rows.value key=id"></div>
+    </section>
+
+    <!-- The open conversation -->
+    <section class="msx-card msx-main">
+        <div class="msx-main-head" data-bind-hidden="!active.value">
+            <span class="msx-avatar is-lg" aria-hidden="true" data-bind-text="activeInitials.value"></span>
+            <span class="msx-main-title">
+                <strong data-bind-text="activeTitle.value"></strong>
+                <small data-bind-text="activeMeta.value"></small>
+            </span>
+            <button type="button" class="btn btn-sm msx-call-btn" data-on-click="call" data-bind-disabled="callBusy.value"
+                data-bind-title="callTitle.value" data-bind-class="callLive.value ? 'btn-primary' : 'btn-ghost'">
+                <span data-icon="video" data-icon-size="15"></span> <span data-bind-text="callLabel.value"></span></button>
+            <span data-help-title="Calls" data-help="Call starts a video call with everyone in this conversation. It opens in a new tab; the others see a notice and join straight in - no waiting room. A call holds 6 people: in a bigger group the first 6 to join get in and the next is told it is full. A line in the conversation shows when a call started and ended. Nothing is recorded."></span>
+            <button type="button" class="msx-kebab msx-thread-more" aria-label="More for this conversation" title="More">⋮</button>
+        </div>
+        <div class="msx-empty-main" data-bind-hidden="active.value">
+            <span data-icon="message-circle" data-icon-size="32"></span>
+            <p>Choose a conversation, or start a new one.</p>
+            <div class="msx-empty-actions">
+                <button type="button" class="btn btn-sm btn-ghost" data-on-click="newConversation"><span data-icon="edit" data-icon-size="14"></span> New conversation</button>
+                <button type="button" class="btn btn-sm btn-primary" data-on-click="callPeople"><span data-icon="video" data-icon-size="14"></span> Call…</button>
+            </div>
+        </div>
+
+        <div class="msx-scroll" data-bind-hidden="!active.value">
+            <div class="msx-note msx-thread-loading dm-loading-slot" data-bind-hidden="!threadLoading.value">Loading messages…</div>
+            <p class="msx-note" data-bind-hidden="threadLoading.value || bubbles.value.length">No messages yet - say hello.</p>
+            <div class="msx-bubbles" data-each="bubbles.value key=key"></div>
+        </div>
+
+        <div class="msx-composer" data-bind-hidden="!active.value">
+            <div class="msx-attach-list" data-bind-hidden="!pending.value.length" data-each="pending.value key=mediaId"></div>
+            <div class="msx-compose-row">
+                <textarea class="form-input msx-input" rows="2" placeholder="Write a message…" aria-label="Message" data-model="compose.value"></textarea>
+                <div class="msx-compose-actions">
+                    <button type="button" class="btn btn-sm btn-ghost" data-on-click="attach" data-bind-disabled="uploading.value" title="Attach files" aria-label="Attach files">
+                        <span data-icon="paperclip" data-icon-size="15"></span></button>
+                    <button type="button" class="btn btn-sm btn-primary" data-on-click="send" data-bind-disabled="!canSend.value" title="Send (Ctrl+Enter)">
+                        <span data-icon="send" data-icon-size="15"></span> Send</button>
+                </div>
+            </div>
+            <small class="msx-hint"><span data-bind-text="composeHint.value"></span>
+                <span data-help-title="Writing" data-help="Ctrl+Enter sends. What you type is kept as a draft for each conversation, so switching away or leaving the screen loses nothing. Your own messages can be edited for a short while after sending, and deleted any time - right-click a message (or its ⋮)."></span></small>
+        </div>
+    </section>
+
+    <!-- Calls someone else started: "Sam is calling - Join" -->
+    <div class="msx-rings-dock" aria-live="polite">
+        <div class="msx-ring" data-bind-hidden="!blockedUrl.value" role="alert">
+            <span class="msx-ring-main"><strong>Your browser blocked the call tab</strong><small>Open it from here.</small></span>
+            <a class="btn btn-sm btn-primary" target="_blank" rel="noopener" data-bind-href="blockedUrl.value" data-on-click="openedBlocked">Open the call</a>
+            <button type="button" class="btn btn-sm btn-ghost msx-ring-close" data-on-click="clearBlocked" aria-label="Close" title="Close">×</button>
+        </div>
+        <div class="msx-rings" data-each="rings.value key=key"></div>
+    </div>
+</div>