domma-cms 0.105.1 → 0.106.0

package/plugins/_lib/call/routes.js

@@ -15,6 +15,10 @@
  * After joining, every request carries `X-Call-Id` and `X-Call-Secret`
  * (headers, so the secret never lands in an access log).
  *
+ * Chat history: each room keeps its own (see rooms.js). A Tool that passes
+ * `chat: {load, save}` makes it outlive the room - `load(room)` seeds a room
+ * as it is created, `save(room, item)` gets every new item. See CLAUDE.md.
+ *
  * @module _lib/call/routes
  */
 
@@ -34,11 +38,45 @@ const BUSY = {config: {rateLimit: {max: 1200, timeWindow: '1 minute'}}};
  *   who the caller is in this room, or null when they may not join. Throw nothing: null answers 404.
  * @param {ReturnType<typeof createRooms>} [opts.rooms] - for tests
  * @param {() => {stun: string[], turn: object|null}} [opts.config]
+ * @param {{load?: (room: string) => Promise<object[]>, save?: (room: string, item: object, meta: {identity: string}) => Promise<void>}} [opts.chat]
+ *   optional storage for the chat: `load(room)` gives the earlier items of a room being created (oldest first),
+ *   `save(room, item, {identity})` is handed every new item, user and system. `room` is the Tool's own room id (no
+ *   namespace); `identity` is what the Tool's resolve() gave the person concerned ('' for none) - server side only.
+ *   Failures (and a load slower than 5 s) are logged and otherwise ignored: a chat never breaks a call.
  * @returns {ReturnType<typeof createRooms>} the rooms, so the Tool can close() one or count() it
  */
-export function mountCallRoutes(fastify, {prefix = '/call', ns, resolve, rooms = createRooms(), config = () => readCallConfig()}) {
+export function mountCallRoutes(fastify, {prefix = '/call', ns, resolve, rooms = createRooms(), config = () => readCallConfig(), chat = null}) {
     if (!ns) throw new Error('mountCallRoutes needs a namespace');
     const keyOf = (room) => `${ns}:${String(room || '').slice(0, 120)}`;
+    const roomOf = (key) => key.slice(ns.length + 1);
+    const log = fastify.log || console;
+
+    // ---- Chat storage (optional) --------------------------------------------------------
+    // Saves for one room run one after another, so the store sees items in order.
+    const saving = new Map();   // key -> promise of the last save
+    const save = (key, item, meta) => {
+        const next = (saving.get(key) || Promise.resolve())
+            .then(() => chat.save(roomOf(key), item, {identity: String(meta?.identity || '')}))
+            .catch(err => log.warn?.({err: err?.message || String(err), room: roomOf(key)}, '[call] chat save failed'));
+        saving.set(key, next);
+        next.then(() => { if (saving.get(key) === next) saving.delete(key); });
+        return next;
+    };
+    const stopListening = typeof chat?.save === 'function'
+        ? rooms.onItem((key, item, meta) => { if (key.startsWith(`${ns}:`)) save(key, item, meta); })
+        : null;
+    const load = async (room) => {
+        if (typeof chat?.load !== 'function') return undefined;
+        let timer;
+        try {
+            const items = await Promise.race([chat.load(room),
+                new Promise((_, no) => { timer = setTimeout(() => no(new Error('timed out after 5 s')), 5000); })]);
+            return Array.isArray(items) ? items : [];
+        } catch (err) {
+            log.warn?.({err: err?.message || String(err), room}, '[call] chat load failed');
+            return [];
+        } finally { clearTimeout(timer); }
+    };
     const who = (request) => [request.headers['x-call-id'], request.headers['x-call-secret']];
     const fail = (reply, err) => {
         if (err instanceof CallError) return reply.code(STATUS[err.code] || 400).send({error: err.message, code: err.code});
@@ -47,7 +85,7 @@ export function mountCallRoutes(fastify, {prefix = '/call', ns, resolve, rooms =
 
     const sweeper = setInterval(() => rooms.sweep(), 5000);
     sweeper.unref?.();
-    fastify.addHook('onClose', async () => clearInterval(sweeper));
+    fastify.addHook('onClose', async () => { clearInterval(sweeper); stopListening?.(); });
 
     fastify.post(`${prefix}/:room/join`, {config: {rateLimit: {max: 30, timeWindow: '1 minute'}}}, async (request, reply) => {
         const body = request.body || {};
@@ -56,9 +94,12 @@ export function mountCallRoutes(fastify, {prefix = '/call', ns, resolve, rooms =
         const t = Date.now();
         if (r.opensAt && t < Date.parse(r.opensAt)) return reply.code(425).send({error: 'This call has not opened yet.', code: 'early', opensAt: r.opensAt});
         if (r.closesAt && t > Date.parse(r.closesAt)) return reply.code(410).send({error: 'This call has ended.', code: 'closed'});
+        const key = keyOf(request.params.room);
+        // A room being created starts from its stored chat (a room reopened later, or after a restart).
+        const history = rooms.has(key) ? undefined : await load(roomOf(key));
         try {
-            const joined = rooms.join(keyOf(request.params.room), {name: r.name || body.name, host: r.host, title: r.title, max: r.max,
-                recordingAllowed: r.recordingAllowed === true, autoAdmit: r.autoAdmit === true, identity: r.identity || ''});
+            const joined = rooms.join(key, {name: r.name || body.name, host: r.host, title: r.title, max: r.max,
+                recordingAllowed: r.recordingAllowed === true, autoAdmit: r.autoAdmit === true, identity: r.identity || '', history});
             return reply.send({...joined, iceServers: iceServers(config(), request.hostname), closesAt: r.closesAt || null});
         } catch (err) { return fail(reply, err); }
     });
@@ -79,11 +120,20 @@ export function mountCallRoutes(fastify, {prefix = '/call', ns, resolve, rooms =
         } catch (err) { return fail(reply, err); }
     });
     action('signal', (k, id, s, b) => rooms.signal(k, id, s, b.to, b.data));
-    action('chat', (k, id, s, b) => rooms.chat(k, id, s, b.text));
+    fastify.post(`${prefix}/:room/chat`, BUSY, async (request, reply) => {
+        const [id, secret] = who(request);
+        const key = keyOf(request.params.room);
+        let item;
+        try { item = rooms.chat(key, id, secret, (request.body || {}).text); } catch (err) { return fail(reply, err); }
+        // Answered once the store has had it (a failed save is only logged).
+        if (item && saving.has(key)) await saving.get(key);
+        return reply.send({ok: true, result: item || false});
+    });
     action('answer', (k, id, s, b) => rooms.answer(k, id, s, b.who, b.yes === true));
     action('recording', (k, id, s, b) => rooms.recording(k, id, s, b.on === true));
     action('leave', (k, id, s) => rooms.leave(k, id, s));
 
     return {...rooms, closeRoom: (room) => rooms.close(keyOf(room)), countRoom: (room) => rooms.count(keyOf(room)),
+        historyOfRoom: (room) => rooms.history(keyOf(room)),
         kickFromRoom: (room, identity) => rooms.kick(keyOf(room), identity)};
 }

package/plugins/_lib/public/call/call.css

@@ -1 +1 @@
-.dmc{--dmc-gap: .75rem;display:flex;flex-direction:column;gap:1rem;min-height:70vh;color:var(--dm-text, inherit)}.dmc [hidden]{display:none!important}.dmc-head{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.dmc-title{font-size:1.35rem;margin:0;flex:1 1 auto}.dmc-rec{color:#fff;background:var(--dm-danger, #c62828);border-radius:999px;padding:.2rem .7rem;font-size:.85rem;font-weight:600}.dmc-count{color:var(--dm-text-muted, #666);font-size:.9rem}.dmc-panel{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:1.5rem;align-items:start}.dmc-panel--msg{display:block;text-align:center;padding:3rem 1rem}.dmc-preview{position:relative;aspect-ratio:16 / 9;background:#111;border-radius:.75rem;overflow:hidden}.dmc-preview video,.dmc-tile video{width:100%;height:100%;object-fit:cover;display:block}.dmc-self,.dmc-self-preview{transform:scaleX(-1)}.dmc-nocam{position:absolute;inset:0;display:grid;place-items:center;color:#ddd;margin:0}.dmc-check h2{margin-top:0}.dmc-label{display:grid;gap:.35rem;margin:1rem 0;font-weight:600}.dmc-input{font:inherit;padding:.55rem .7rem;border:1px solid var(--dm-border, #ccc);border-radius:.5rem;background:var(--dm-surface, #fff);color:inherit;min-width:0}.dmc-row{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}.dmc-note{color:var(--dm-text-muted, #666)}.dmc-error{color:var(--dm-danger, #c62828);font-weight:600}.dmc-btn{font:inherit;cursor:pointer;padding:.55rem 1rem;border-radius:.5rem;border:1px solid var(--dm-border, #ccc);background:var(--dm-surface, #fff);color:inherit;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;position:relative}.dmc-i{display:inline-flex}.dmc-btn svg,.dmc-rec svg,.dmc-count svg{width:18px;height:18px;flex:none}.dmc-rec svg{width:10px;height:10px;fill:currentColor}.dmc-count{display:inline-flex;align-items:center;gap:.35rem}.dmc-tool{flex-direction:column;gap:.2rem;min-width:5.5rem;padding:.5rem .75rem;font-size:.85rem}.dmc-btn.is-on{border-color:var(--dm-primary, #1f6feb);color:var(--dm-primary, #1f6feb)}.dmc-btn--rec.is-on{border-color:var(--dm-danger, #c62828);color:var(--dm-danger, #c62828)}.dmc-btn--rec.is-on svg{fill:currentColor}.dmc-badge{position:absolute;top:.2rem;right:.35rem;min-width:1.1rem;height:1.1rem;padding:0 .25rem;border-radius:999px;background:var(--dm-danger, #c62828);color:#fff;font-size:.7rem;line-height:1.1rem;text-align:center}.dmc-btn:hover{border-color:var(--dm-primary, #555)}.dmc-btn:disabled{opacity:.6;cursor:default}.dmc-btn.is-off{background:var(--dm-danger, #c62828);border-color:transparent;color:#fff}.dmc-btn--go{background:var(--dm-primary, #1f6feb);border-color:transparent;color:#fff}.dmc-btn--leave{background:var(--dm-danger, #c62828);border-color:transparent;color:#fff}.dmc-btn--rec{border-color:var(--dm-danger, #c62828)}.dmc-btn--small{padding:.3rem .65rem;font-size:.9rem}.dmc-call{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto;gap:var(--dmc-gap)}.dmc-main{display:grid;gap:var(--dmc-gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));align-content:start}.dmc-main[data-people="1"]{grid-template-columns:minmax(0,1fr)}.dmc-main[data-people="2"]{grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))}.dmc-grid,.dmc-remote{display:contents}.dmc-tile{position:relative;margin:0;aspect-ratio:16 / 9;background:#111;border-radius:.75rem;overflow:hidden}.dmc-tile figcaption{position:absolute;left:.5rem;bottom:.5rem;padding:.15rem .5rem;border-radius:.35rem;background:#0009;color:#fff;font-size:.85rem}.dmc-side{width:300px;display:flex;flex-direction:column;gap:1rem;grid-row:1 / span 1;grid-column:2}.dmc-side h3{margin:0 0 .5rem;font-size:1rem}.dmc-waiting ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}.dmc-waiting li{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}.dmc-waiting li span{flex:1 1 100%;font-weight:600}.dmc-chat{display:flex;flex-direction:column;min-height:0;flex:1}.dmc-messages{list-style:none;margin:0 0 .5rem;padding:0;overflow-y:auto;max-height:50vh;display:grid;gap:.4rem}.dmc-messages li.is-mine strong{color:var(--dm-primary, #1f6feb)}.dmc-send{display:flex;gap:.4rem}.dmc-send .dmc-input{flex:1}.dmc-bar{grid-column:1 / -1;display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}@media(max-width:760px){.dmc-panel,.dmc-call{grid-template-columns:1fr}.dmc-side{width:auto;grid-column:1;grid-row:auto}.dmc-bar{position:sticky;bottom:0;background:var(--dm-background, #fff);padding:.5rem 0}.dmc-bar .dmc-btn{flex:1 1 auto;min-width:3rem}.dmc-lbl{display:none}.dmc-tool{padding:.6rem}}
+.dmc{--dmc-gap: .75rem;--dmc-stage-bg: #0f1114;--dmc-glass: rgba(32, 34, 38, .72);--dmc-glass-strong: rgba(28, 30, 34, .94);--dmc-ctl: rgba(255, 255, 255, .12);--dmc-ctl-hover: rgba(255, 255, 255, .2);--dmc-on-dark: #f1f3f4;--dmc-muted-dark: #9aa0a6;--dmc-red: #e5484d;--dmc-red-hover: #d13b40;--dmc-blue: #8ab4f8;--dmc-chat-bg: #0b141a;--dmc-chat-head: #202c33;--dmc-bubble-in: #202c33;--dmc-bubble-out: #005c4b;--dmc-chat-text: #e9edef;--dmc-chat-meta: rgba(233, 237, 239, .6);--dmc-chat-sys: #182229;--dmc-chat-sys-text: #8696a0;--dmc-green: #00a884;--dmc-offset: 5rem;display:flex;flex-direction:column;gap:1rem;color:var(--dm-text, inherit)}.dmc [hidden]{display:none!important}.dmc-head{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.dmc-title{font-size:1.5rem;margin:0;flex:1 1 auto;letter-spacing:-.01em}.dmc-btn{font:inherit;cursor:pointer;padding:.55rem 1rem;border-radius:.6rem;border:1px solid var(--dm-border, #ccc);background:var(--dm-surface, #fff);color:inherit;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;position:relative;transition:background-color .15s,border-color .15s,color .15s,transform .1s}.dmc-btn:hover{border-color:var(--dm-primary, #555)}.dmc-btn:active{transform:scale(.97)}.dmc-btn:disabled{opacity:.55;cursor:default;transform:none}.dmc-btn:focus-visible,.dmc-compose:focus-visible{outline:2px solid var(--dmc-blue);outline-offset:2px}.dmc-i{display:inline-flex}.dmc-btn svg,.dmc-count svg,.dmc-note svg,.dmc-chip svg{width:18px;height:18px;flex:none}.dmc-btn.is-off{background:var(--dm-danger, #c62828);border-color:transparent;color:#fff}.dmc-btn--go{background:var(--dm-primary, #1f6feb);border-color:transparent;color:#fff;font-weight:600}.dmc-btn--go:hover{filter:brightness(1.08);border-color:transparent}.dmc-btn--small{padding:.35rem .7rem;font-size:.88rem}.dmc-panel{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:2rem;align-items:center}.dmc-panel--msg{display:flex;flex-direction:column;align-items:center;text-align:center;padding:4rem 1rem;gap:.25rem}.dmc-panel--msg h2{margin:.5rem 0 .25rem}.dmc-panel--msg p{color:var(--dm-text-muted, #666);margin:0 0 1rem}.dmc-pulse{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--dm-primary, #1f6feb);box-shadow:0 0 color-mix(in srgb,var(--dm-primary, #1f6feb) 45%,transparent);animation:dmc-pulse 2s infinite}.dmc-pulse svg{width:30px;height:30px}@keyframes dmc-pulse{70%{box-shadow:0 0 0 18px transparent}to{box-shadow:0 0 0 0 transparent}}.dmc-preview{position:relative;aspect-ratio:16 / 9;background:#16181c;border-radius:1rem;overflow:hidden;box-shadow:0 10px 30px #0000002e}.dmc-preview video,.dmc-tile video{width:100%;height:100%;object-fit:cover;display:block}.dmc-self,.dmc-self-preview{transform:scaleX(-1)}.dmc-nocam{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;color:#cfd3d8;margin:0}.dmc-avatar-dot{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:#3c4043;color:#fff;font-size:2rem;font-weight:600}.dmc-preview-tools{position:absolute;left:0;right:0;bottom:1rem;display:flex;justify-content:center;gap:.75rem}.dmc-round{width:3rem;height:3rem;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:#00000059;color:#fff;backdrop-filter:blur(6px)}.dmc-round:hover{background:#00000080;border-color:#fff}.dmc-round.is-off{background:var(--dmc-red);border-color:transparent}.dmc-check h2{margin:0 0 .25rem;font-size:1.6rem}.dmc-label{display:grid;gap:.35rem;margin:1rem 0 .5rem;font-weight:600}.dmc-input{font:inherit;padding:.6rem .8rem;border:1px solid var(--dm-border, #ccc);border-radius:.6rem;background:var(--dm-surface, #fff);color:inherit;min-width:0}.dmc-row{display:flex;gap:.5rem;flex-wrap:wrap;margin:.75rem 0}.dmc-chipbtn{border-radius:999px;padding:.4rem .9rem;font-size:.9rem}.dmc-note{color:var(--dm-text-muted, #666)}.dmc-note--rec{display:flex;gap:.5rem;align-items:flex-start;font-size:.92rem}.dmc-note--rec svg{color:var(--dm-danger, #c62828);fill:currentColor;width:12px;height:12px;margin-top:.3rem}.dmc-error{color:var(--dm-danger, #c62828);font-weight:600}.dmc-check .dmc-btn--go{width:100%;padding:.8rem 1rem;border-radius:999px;font-size:1.05rem;margin-top:.5rem}.dmc-call{display:flex;gap:0;color:var(--dmc-on-dark);background:var(--dmc-stage-bg);border-radius:1rem;overflow:hidden;height:calc(100vh - var(--dmc-offset) - 1rem);height:calc(100dvh - var(--dmc-offset) - 1rem);min-height:26rem;box-shadow:0 12px 40px #00000040;color-scheme:dark}.dmc-stage{position:relative;flex:1 1 auto;min-width:0;container:dmc-stage / size;overflow:hidden}.dmc-top{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1.1rem 1.6rem;background:linear-gradient(rgba(0,0,0,.6),transparent);pointer-events:none}.dmc-top>*{pointer-events:auto}.dmc-top-l{display:flex;align-items:baseline;gap:.75rem;min-width:0}.dmc-top-title{margin:0;font-size:1rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dmc-timer{font-size:.88rem;color:var(--dmc-muted-dark);font-variant-numeric:tabular-nums}.dmc-top-r{display:flex;align-items:center;gap:.5rem;flex:none}.dmc-rec{display:inline-flex;align-items:center;gap:.4rem;color:#fff;background:var(--dmc-red);border-radius:999px;padding:.22rem .7rem;font-size:.8rem;font-weight:600}.dmc-rec-dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:dmc-blink 1.4s infinite}@keyframes dmc-blink{50%{opacity:.25}}.dmc-count{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;color:#fff;background:#ffffff24;border-radius:999px;padding:.22rem .65rem}.dmc-count svg{width:15px;height:15px}.dmc-main{position:absolute;inset:0}.dmc-remote{position:absolute;inset:3.6rem 1rem 5.6rem;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:var(--dmc-gap);--cols: 1;--rows: 1}.dmc-cell{container-type:size;display:grid;place-items:center;min-width:0;width:calc((100% - (var(--cols) - 1) * var(--dmc-gap)) / var(--cols));height:calc((100% - (var(--rows) - 1) * var(--dmc-gap)) / var(--rows))}.dmc-main[data-tiles="2"] .dmc-remote{--cols: 2}.dmc-main[data-tiles="3"] .dmc-remote,.dmc-main[data-tiles="4"] .dmc-remote{--cols: 2;--rows: 2}.dmc-main[data-tiles="5"] .dmc-remote,.dmc-main[data-tiles="6"] .dmc-remote{--cols: 3;--rows: 2}.dmc-tile{position:relative;margin:0;background:#202124;border-radius:.9rem;overflow:hidden}.dmc-cell .dmc-tile{width:min(100cqw,100cqh * 16 / 9);aspect-ratio:16 / 9;box-shadow:0 4px 18px #00000059}.dmc-tile video{position:relative;z-index:1}.dmc-avatar{position:absolute;inset:0;display:grid;place-items:center;z-index:0}.dmc-avatar span{width:clamp(3rem,22%,6.5rem);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:#3c4043;color:#fff;font-size:clamp(1.2rem,4cqw,2.6rem);font-weight:600}.dmc-tile--me .dmc-avatar{z-index:2;background:#202124}.dmc-chip{position:absolute;left:.6rem;bottom:.6rem;z-index:3;display:inline-flex;align-items:center;gap:.3rem;max-width:calc(100% - 1.2rem);padding:.2rem .55rem;border-radius:.45rem;background:#0000008c;backdrop-filter:blur(6px);color:#fff;font-size:.8rem;line-height:1.3}.dmc-chip>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dmc-chip-mute{display:inline-flex;color:#fff;background:var(--dmc-red);border-radius:50%;padding:2px}.dmc-chip-mute svg{width:12px;height:12px}.dmc-tile--me{position:absolute;z-index:2;right:1rem;bottom:5.6rem;width:clamp(9.5rem,20%,16rem);aspect-ratio:16 / 9;box-shadow:0 6px 24px #00000080;outline:1px solid rgba(255,255,255,.14);transition:all .25s ease}.dmc-tile--me .dmc-chip{left:.4rem;bottom:.4rem;font-size:.72rem;padding:.12rem .45rem}.dmc-main:not([data-tiles="0"]):not([data-tiles="1"]) .dmc-tile--me{width:clamp(8.5rem,15%,13rem)}.dmc-main[data-tiles="0"] .dmc-tile--me{inset:0;width:auto;aspect-ratio:auto;border-radius:0;outline:0;box-shadow:none}.dmc-main[data-tiles="0"] .dmc-tile--me .dmc-chip{left:1rem;bottom:5.6rem;font-size:.8rem;padding:.2rem .55rem}.dmc-main[data-tiles="0"] .dmc-tile--me:after{content:"";position:absolute;inset:0;z-index:2;background:radial-gradient(ellipse at center,#00000040,#0009);pointer-events:none}.dmc-alone{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;pointer-events:none}.dmc-alone-title{margin:0;font-size:clamp(1.1rem,2.4vw,1.5rem);font-weight:600;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}.dmc-alone-sub{margin:.35rem 0 0;color:#dadce0;font-size:.92rem;text-shadow:0 1px 6px rgba(0,0,0,.6)}.dmc-waiting{position:absolute;z-index:4;top:3.4rem;right:1rem;width:min(21rem,calc(100% - 2rem));padding:.85rem;border-radius:.9rem;background:var(--dmc-glass-strong);backdrop-filter:blur(14px);box-shadow:0 10px 30px #00000073;border:1px solid rgba(255,255,255,.08);animation:dmc-drop .25s ease}@keyframes dmc-drop{0%{opacity:0;transform:translateY(-6px)}}.dmc-waiting h3{display:flex;align-items:center;gap:.5rem;margin:0 0 .6rem;font-size:.9rem;font-weight:600;color:#fff}.dmc-waiting-dot{width:8px;height:8px;border-radius:50%;background:#fbbc04;box-shadow:0 0 0 3px #fbbc0440}.dmc-waiting ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;max-height:14rem;overflow-y:auto}.dmc-waiting li{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.35rem .6rem}.dmc-winitial{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;background:#5f6368;color:#fff;font-weight:600;font-size:.9rem}.dmc-wname{font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dmc-wbtns{grid-column:2;display:flex;gap:.4rem}.dmc-waiting .dmc-btn{border-radius:999px}.dmc-waiting .dmc-btn svg{width:15px;height:15px}.dmc-waiting .dmc-btn--go{background:var(--dmc-blue);color:#202124}.dmc-btn--ghost{background:transparent;color:#e8eaed;border-color:#ffffff40}.dmc-btn--ghost:hover{background:#ffffff14;border-color:#fff6}.dmc-bar{position:absolute;z-index:4;left:50%;bottom:1rem;transform:translate(-50%);display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:999px;background:var(--dmc-glass);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 8px 28px #0006;border:1px solid rgba(255,255,255,.08)}.dmc-tool{width:3rem;height:3rem;padding:0;border-radius:50%;border:0;background:var(--dmc-ctl);color:#fff;flex:none}.dmc-tool:hover{background:var(--dmc-ctl-hover)}.dmc-tool svg{width:20px;height:20px}.dmc-tool.is-off{background:var(--dmc-red)}.dmc-tool.is-off:hover{background:var(--dmc-red-hover)}.dmc-tool.is-on{background:var(--dmc-blue);color:#202124}.dmc-btn--rec svg{color:var(--dmc-red);fill:currentColor;width:16px;height:16px}.dmc-btn--rec.is-on{background:var(--dmc-red);color:#fff;animation:dmc-recglow 1.6s infinite}.dmc-btn--rec.is-on svg{color:#fff}@keyframes dmc-recglow{0%,to{box-shadow:0 0 #e5484d99}50%{box-shadow:0 0 0 6px #e5484d00}}.dmc-btn--leave{background:var(--dmc-red);width:4rem;border-radius:999px}.dmc-btn--leave:hover{background:var(--dmc-red-hover)}.dmc-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.dmc-tool:after{content:attr(aria-label);position:absolute;bottom:calc(100% + .7rem);left:50%;transform:translate(-50%,4px);padding:.3rem .55rem;border-radius:.4rem;background:#3c4043;color:#fff;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}.dmc-tool:hover:after,.dmc-tool:focus-visible:after{opacity:1;transform:translate(-50%)}.dmc-badge{position:absolute;top:-.2rem;right:-.2rem;min-width:1.2rem;height:1.2rem;padding:0 .3rem;border-radius:999px;background:var(--dmc-green);color:#fff;font-size:.7rem;font-weight:700;line-height:1.2rem;text-align:center;box-shadow:0 0 0 2px #2a2c30}@container dmc-stage (max-aspect-ratio: 1 / 1){.dmc-main[data-tiles="2"] .dmc-remote{--cols: 1;--rows: 2}.dmc-main[data-tiles="5"] .dmc-remote,.dmc-main[data-tiles="6"] .dmc-remote{--cols: 2;--rows: 3}.dmc-cell .dmc-tile{width:100%;height:100%;aspect-ratio:auto}.dmc-tile--me{width:clamp(6.5rem,28%,9rem);aspect-ratio:3 / 4}.dmc-main:not([data-tiles="0"]):not([data-tiles="1"]) .dmc-tile--me{width:clamp(5.5rem,22%,7rem)}}.dmc-chat{flex:none;width:0;display:flex;flex-direction:column;background:var(--dmc-chat-bg);color:var(--dmc-chat-text);overflow:hidden;transition:width .25s ease;border-left:1px solid rgba(255,255,255,.06)}.dmc-call.is-chat .dmc-chat{width:21.25rem}.dmc-chat>*{min-width:21.25rem}.dmc-chat-head{display:flex;align-items:center;gap:.5rem;padding:.7rem .75rem .7rem 1rem;background:var(--dmc-chat-head)}.dmc-chat-titles{flex:1;min-width:0;display:flex;flex-direction:column}.dmc-chat-titles h3{margin:0;font-size:1rem;font-weight:600;color:var(--dmc-chat-text)}.dmc-chat-titles span{font-size:.76rem;color:var(--dmc-chat-sys-text)}.dmc-chat-back,.dmc-chat-close{width:2.25rem;height:2.25rem;border:0;border-radius:50%;background:transparent;color:#aebac1;cursor:pointer;display:grid;place-items:center}.dmc-chat-back:hover,.dmc-chat-close:hover{background:#ffffff14;color:#fff}.dmc-chat-back svg,.dmc-chat-close svg{width:20px;height:20px}.dmc-chat-back{display:none}.dmc-chat-body{position:relative;flex:1;min-height:0;display:flex}.dmc-messages{list-style:none;margin:0;padding:.6rem .9rem 1rem;flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#374045 transparent}.dmc-chat-empty{position:absolute;inset:auto 1.5rem 45%;margin:0;text-align:center;color:var(--dmc-chat-sys-text);font-size:.85rem}.dmc-msg{display:flex;flex-direction:column;margin-top:2px}.dmc-msg.is-first{margin-top:.6rem}.dmc-msg.is-mine{align-items:flex-end}.dmc-msg.is-other{align-items:flex-start}.dmc-msg.is-sys{align-items:center;margin-top:.6rem}.dmc-msg.is-sys+.dmc-msg.is-sys:not(.has-day){margin-top:.3rem}.dmc-day{align-self:center;margin:.5rem 0 .35rem}.dmc-day span,.dmc-sys span{display:inline-block;padding:.28rem .65rem;border-radius:.5rem;background:var(--dmc-chat-sys);color:var(--dmc-chat-sys-text);font-size:.74rem;box-shadow:0 1px .5px #00000021}.dmc-day span{text-transform:uppercase;letter-spacing:.03em;font-size:.7rem}.dmc-msg.has-day.is-first{margin-top:.2rem}.dmc-bubble{position:relative;max-width:85%;padding:.38rem .55rem .3rem .6rem;border-radius:.55rem;background:var(--dmc-bubble-in);color:var(--dmc-chat-text);font-size:.9rem;line-height:1.32;box-shadow:0 1px .5px #00000021;overflow-wrap:anywhere}.is-mine .dmc-bubble{background:var(--dmc-bubble-out)}.is-first.is-mine .dmc-bubble{border-top-right-radius:0}.is-first.is-other .dmc-bubble{border-top-left-radius:0}.is-first.is-mine .dmc-bubble:after{content:"";position:absolute;top:0;right:-8px;border-top:10px solid var(--dmc-bubble-out);border-right:8px solid transparent}.is-first.is-other .dmc-bubble:after{content:"";position:absolute;top:0;left:-8px;border-top:10px solid var(--dmc-bubble-in);border-left:8px solid transparent}.dmc-from{display:block;font-size:.8rem;font-weight:600;margin-bottom:.1rem;color:#53bdeb}.dmc-text{white-space:pre-wrap}.dmc-time{float:right;position:relative;top:.3rem;margin-left:.6rem;font-size:.68rem;line-height:1;color:var(--dmc-chat-meta);font-variant-numeric:tabular-nums}.dmc-msg[data-hue="1"] .dmc-from{color:#ffd279}.dmc-msg[data-hue="2"] .dmc-from{color:#ff72a1}.dmc-msg[data-hue="3"] .dmc-from{color:#a5b337}.dmc-msg[data-hue="4"] .dmc-from{color:#06cf9c}.dmc-msg[data-hue="5"] .dmc-from{color:#f79877}.dmc-msg[data-hue="6"] .dmc-from{color:#a791ff}.dmc-msg[data-hue="7"] .dmc-from{color:#7ee2ff}.dmc-newchip{position:absolute;left:50%;bottom:.75rem;transform:translate(-50%);display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;border:0;border-radius:999px;padding:.4rem .8rem;background:#2a3942;color:var(--dmc-chat-text);font:inherit;font-size:.8rem;box-shadow:0 2px 10px #0006}.dmc-newchip svg{width:15px;height:15px;color:var(--dmc-green)}.dmc-send{display:flex;align-items:flex-end;gap:.5rem;padding:.6rem .75rem;background:var(--dmc-chat-head)}.dmc-compose{flex:1;resize:none;border:0;border-radius:1.3rem;padding:.6rem 1rem;background:#2a3942;color:var(--dmc-chat-text);line-height:1.35rem;font-size:.92rem;overflow-y:hidden;max-height:calc(1.35rem * 4 + 1.2rem);display:block}.dmc-compose::placeholder{color:var(--dmc-chat-sys-text)}.dmc-compose:focus{outline:0;box-shadow:inset 0 0 0 1px #00a88499}.dmc-sendbtn{width:2.55rem;height:2.55rem;padding:0;border:0;border-radius:50%;background:var(--dmc-green);color:#fff;flex:none}.dmc-sendbtn:hover{background:#06cf9c}.dmc-sendbtn:disabled{opacity:1;background:#2a3942;color:var(--dmc-chat-sys-text)}.dmc-sendbtn svg{width:19px;height:19px;margin-left:-2px}@media(max-width:760px){.dmc-panel{grid-template-columns:1fr;gap:1.25rem}.dmc-title{font-size:1.25rem}.dmc-call{border-radius:.75rem;min-height:30rem}.dmc-top{padding:.7rem .8rem 1.4rem}.dmc-remote{inset:3.2rem .6rem 5.4rem}.dmc-tile--me{right:.75rem;bottom:5.4rem}.dmc-main[data-tiles="0"] .dmc-tile--me .dmc-chip{bottom:5.4rem}.dmc-waiting{top:3.1rem;left:.6rem;right:.6rem;width:auto}.dmc-bar{left:.5rem;right:.5rem;bottom:.5rem;transform:none;justify-content:space-around;gap:.25rem;border-radius:1.4rem;padding:.5rem .4rem calc(.5rem + env(safe-area-inset-bottom,0px))}.dmc-tool{width:3.1rem;height:3.1rem}.dmc-btn--leave{width:3.1rem}.dmc-tool:after{display:none}.dmc-chat{position:fixed;inset:0;z-index:1000;width:auto;border:0;transform:translateY(100%);transition:transform .25s ease,visibility 0s .25s;visibility:hidden}.dmc-call.is-chat .dmc-chat{width:auto;transform:none;visibility:visible;transition:transform .25s ease}.dmc-chat>*{min-width:0}.dmc-chat-back{display:grid}.dmc-chat-close{display:none}.dmc-send{padding-bottom:calc(.6rem + env(safe-area-inset-bottom,0px))}.dmc-bubble{max-width:88%}}@media(prefers-reduced-motion:reduce){.dmc *,.dmc *:after{animation:none!important;transition:none!important}}

package/plugins/_lib/public/call/call.js

@@ -3,7 +3,7 @@
  *
  * Mounts on every `[data-dm-call]` element. Its JSON config:
  *
- *   {api, room, cred: {t|key|h: '…'}, title, name?, askName?}
+ *   {api, room, cred: {t|key|h: '…'}, title, name?, askName?, recordingAllowed?, closesAt?}
  *
  *   api   the Tool's call API (e.g. /api/plugins/booking-pro/call)
  *   room  the room id the Tool gave the link
@@ -15,6 +15,8 @@
  * Browsers connect to each other directly (a mesh - up to 6 people); the
  * site only passes the messages that set that up (see _lib/call/routes.js).
  * Every piece of text goes in through bindings (textContent), never as HTML.
+ * The chat shows the room's history (`admitted.chat`) then live items, de-duplicated by id
+ * (item shape: plugins/_lib/call/CLAUDE.md, "Chat history").
  */
 
 const M = window.M;
@@ -24,33 +26,42 @@ const ico = (name) => `<span class="dmc-ico" data-icon="${name}" data-icon-size=
 /** Two icons, one shown by a condition: the bindings are on the wrappers, never on the icons. */
 const pair = (cond, on, off) => `<span class="dmc-i" data-bind-hidden="!(${cond})">${ico(on)}</span><span class="dmc-i" data-bind-hidden="${cond}">${ico(off)}</span>`;
 
+/**
+ * The screen. In the call it is a dark stage (tiles, a top bar, a floating control bar whose labels are for
+ * screen readers and the hover tooltip - CSS reads aria-label) beside a WhatsApp-style chat panel.
+ * Chat rows are plain objects built in JS (see addItem) - every string reaches the page as textContent.
+ */
 const TEMPLATE = `
-<div class="dmc">
-  <header class="dmc-head">
+<div class="dmc" data-bind-data-stage="stage.value">
+  <header class="dmc-head" data-bind-hidden="stage.value === 'in'">
     <h1 class="dmc-title" data-bind-text="title.value"></h1>
-    <span class="dmc-rec" data-bind-hidden="!recording.value" role="status">${ico('circle')} Recording</span>
-    <span class="dmc-count" data-bind-hidden="!countText.value">${ico('users')} <span data-bind-text="countText.value"></span></span>
   </header>
 
   <section class="dmc-panel" data-bind-hidden="stage.value !== 'check'">
     <div class="dmc-preview"><video class="dmc-self-preview" muted playsinline autoplay></video>
-      <p class="dmc-nocam" data-bind-hidden="camOn.value">Camera off</p></div>
+      <div class="dmc-nocam" data-bind-hidden="camOn.value"><span class="dmc-avatar-dot" data-bind-text="initial.value"></span><span>Camera off</span></div>
+      <div class="dmc-preview-tools">
+        <button type="button" class="dmc-btn dmc-round" data-on-click="toggleMic" data-bind-class="!micOn.value && 'is-off'" data-bind-aria-pressed="!micOn.value" data-bind-aria-label="micOn.value ? 'Turn the microphone off' : 'Turn the microphone on'">${pair('micOn.value', 'mic', 'mic-off')}</button>
+        <button type="button" class="dmc-btn dmc-round" data-on-click="toggleCam" data-bind-class="!camOn.value && 'is-off'" data-bind-aria-pressed="!camOn.value" data-bind-aria-label="camOn.value ? 'Turn the camera off' : 'Turn the camera on'">${pair('camOn.value', 'video', 'video-off')}</button>
+      </div>
+    </div>
     <div class="dmc-check">
       <h2>Ready to join?</h2>
       <p class="dmc-note" data-bind-text="deviceNote.value"></p>
       <label class="dmc-label" data-bind-hidden="!askName">Your name
-        <input class="dmc-input" data-model="name.value" maxlength="60" autocomplete="name"></label>
+        <input class="dmc-input" data-model="name.value" maxlength="60" autocomplete="name" placeholder="How the others will see you"></label>
       <div class="dmc-row">
-        <button type="button" class="dmc-btn" data-on-click="toggleMic" data-bind-class="!micOn.value && 'is-off'" data-bind-aria-pressed="!micOn.value">${pair('micOn.value', 'mic', 'mic-off')}<span data-bind-text="micOn.value ? 'Mic on' : 'Mic off'"></span></button>
-        <button type="button" class="dmc-btn" data-on-click="toggleCam" data-bind-class="!camOn.value && 'is-off'" data-bind-aria-pressed="!camOn.value">${pair('camOn.value', 'video', 'video-off')}<span data-bind-text="camOn.value ? 'Camera on' : 'Camera off'"></span></button>
+        <button type="button" class="dmc-btn dmc-chipbtn" data-on-click="toggleMic" data-bind-class="!micOn.value && 'is-off'" data-bind-aria-pressed="!micOn.value">${pair('micOn.value', 'mic', 'mic-off')}<span data-bind-text="micOn.value ? 'Mic on' : 'Mic off'"></span></button>
+        <button type="button" class="dmc-btn dmc-chipbtn" data-on-click="toggleCam" data-bind-class="!camOn.value && 'is-off'" data-bind-aria-pressed="!camOn.value">${pair('camOn.value', 'video', 'video-off')}<span data-bind-text="camOn.value ? 'Camera on' : 'Camera off'"></span></button>
       </div>
-      <p class="dmc-note" data-bind-hidden="!recordingAllowed.value">The host may record this call. You will see a red Recording notice while they do.</p>
+      <p class="dmc-note dmc-note--rec" data-bind-hidden="!recordingAllowed.value">${ico('circle')}<span>The host may record this call. You will see a red Recording notice while they do.</span></p>
       <p class="dmc-error" data-bind-hidden="!error.value" data-bind-text="error.value" role="alert"></p>
       <button type="button" class="dmc-btn dmc-btn--go" data-on-click="join" data-bind-disabled="busy.value">${ico('phone')}<span>Join the call</span></button>
     </div>
   </section>
 
   <section class="dmc-panel dmc-panel--msg" data-bind-hidden="stage.value !== 'waiting'">
+    <div class="dmc-pulse" aria-hidden="true">${ico('users')}</div>
     <h2>Waiting for the host</h2><p>They know you are here and will let you in shortly.</p>
     <button type="button" class="dmc-btn" data-on-click="leave">${ico('log-out')}<span>Leave</span></button>
   </section>
@@ -59,50 +70,92 @@ const TEMPLATE = `
     <h2 data-bind-text="endTitle.value"></h2><p data-bind-text="endText.value"></p>
   </section>
 
-  <section class="dmc-call" data-bind-hidden="stage.value !== 'in'">
-    <div class="dmc-main" data-bind-data-people="people.value">
-      <div class="dmc-grid">
-        <figure class="dmc-tile dmc-tile--me"><video class="dmc-self" muted playsinline autoplay></video>
-          <figcaption data-bind-text="meCaption.value"></figcaption></figure>
+  <section class="dmc-call" data-bind-hidden="stage.value !== 'in'" data-bind-class="sideOpen.value && 'is-chat'">
+    <div class="dmc-stage">
+      <div class="dmc-main" data-bind-data-people="people.value" data-bind-data-tiles="tiles.value">
+        <div class="dmc-remote" data-each="peers key=id">
+          <div class="dmc-cell"><figure class="dmc-tile" data-bind-data-peer="id">
+            <div class="dmc-avatar" aria-hidden="true"><span data-bind-text="initial"></span></div>
+            <video class="dmc-video" playsinline autoplay></video>
+            <figcaption class="dmc-chip"><span data-bind-text="caption.value"></span></figcaption></figure></div>
+        </div>
+        <figure class="dmc-tile dmc-tile--me">
+          <div class="dmc-avatar" data-bind-hidden="camOn.value" aria-hidden="true"><span data-bind-text="initial.value"></span></div>
+          <video class="dmc-self" muted playsinline autoplay data-bind-hidden="!camOn.value && !sharing.value"></video>
+          <figcaption class="dmc-chip"><span class="dmc-chip-mute" data-bind-hidden="micOn.value" title="Your microphone is off">${ico('mic-off')}</span><span data-bind-text="meCaption.value"></span></figcaption>
+        </figure>
+        <div class="dmc-alone" data-bind-hidden="tiles.value !== '0'">
+          <p class="dmc-alone-title">Waiting for others to join</p>
+          <p class="dmc-alone-sub" data-bind-text="aloneText.value"></p>
+        </div>
       </div>
-      <div class="dmc-remote" data-each="peers key=id">
-        <figure class="dmc-tile" data-bind-data-peer="id"><video class="dmc-video" playsinline autoplay></video>
-          <figcaption data-bind-text="caption.value"></figcaption></figure>
-      </div>
-    </div>
 
-    <aside class="dmc-side" data-bind-hidden="!(sideOpen.value || waiting.value.length)">
-      <div class="dmc-waiting" data-bind-hidden="!waiting.value.length">
-        <h3>Waiting to join</h3>
+      <header class="dmc-top">
+        <div class="dmc-top-l">
+          <h2 class="dmc-top-title" data-bind-text="title.value"></h2>
+          <span class="dmc-timer" aria-label="Time in the call" data-bind-text="clock.value"></span>
+        </div>
+        <div class="dmc-top-r">
+          <span class="dmc-rec" data-bind-hidden="!recording.value" role="status"><span class="dmc-rec-dot" aria-hidden="true"></span>Recording</span>
+          <span class="dmc-count" data-bind-hidden="!countText.value" data-bind-title="countTitle.value" data-bind-aria-label="countTitle.value">${ico('users')}<span data-bind-text="countText.value"></span></span>
+        </div>
+      </header>
+
+      <div class="dmc-waiting" data-bind-hidden="!waiting.value.length" role="region" aria-label="Waiting to join">
+        <h3><span class="dmc-waiting-dot" aria-hidden="true"></span><span data-bind-text="waitingTitle.value"></span></h3>
         <ul data-each="waiting key=id">
-          <li><span data-bind-text="name"></span>
-            <button type="button" class="dmc-btn dmc-btn--small dmc-btn--go" data-on-click="$parent.admit($data)">${ico('check')}<span>Let in</span></button>
-            <button type="button" class="dmc-btn dmc-btn--small" data-on-click="$parent.turnAway($data)">${ico('x')}<span>Turn away</span></button></li>
+          <li><span class="dmc-winitial" aria-hidden="true" data-bind-text="initial"></span><span class="dmc-wname" data-bind-text="name"></span>
+            <span class="dmc-wbtns">
+              <button type="button" class="dmc-btn dmc-btn--small dmc-btn--go" data-on-click="$parent.admit($data)">${ico('check')}<span>Let in</span></button>
+              <button type="button" class="dmc-btn dmc-btn--small dmc-btn--ghost" data-on-click="$parent.turnAway($data)">${ico('x')}<span>Turn away</span></button>
+            </span></li>
         </ul>
       </div>
-      <div class="dmc-chat" data-bind-hidden="!sideOpen.value">
-        <h3>Chat</h3>
-        <ol class="dmc-messages" data-each="messages key=id">
-          <li data-bind-class="mine && 'is-mine'"><strong data-bind-text="name"></strong> <span data-bind-text="text"></span></li>
+
+      <nav class="dmc-bar" aria-label="Call controls">
+        <button type="button" class="dmc-btn dmc-tool" data-on-click="toggleMic" data-bind-class="!micOn.value && 'is-off'" data-bind-aria-pressed="!micOn.value" data-bind-aria-label="micOn.value ? 'Mute' : 'Unmute'">${pair('micOn.value', 'mic', 'mic-off')}<span class="dmc-lbl" data-bind-text="micOn.value ? 'Mute' : 'Unmute'"></span></button>
+        <button type="button" class="dmc-btn dmc-tool" data-on-click="toggleCam" data-bind-class="!camOn.value && 'is-off'" data-bind-aria-pressed="!camOn.value" data-bind-aria-label="camOn.value ? 'Stop video' : 'Start video'">${pair('camOn.value', 'video', 'video-off')}<span class="dmc-lbl" data-bind-text="camOn.value ? 'Stop video' : 'Start video'"></span></button>
+        <button type="button" class="dmc-btn dmc-tool dmc-tool--share" data-on-click="toggleShare" data-bind-hidden="!canShare" data-bind-class="sharing.value && 'is-on'" data-bind-aria-pressed="sharing.value" data-bind-aria-label="sharing.value ? 'Stop sharing' : 'Share your screen'">${ico('monitor')}<span class="dmc-lbl" data-bind-text="sharing.value ? 'Stop sharing' : 'Share screen'"></span></button>
+        <button type="button" class="dmc-btn dmc-tool dmc-tool--chat" data-on-click="toggleSide" data-bind-class="sideOpen.value && 'is-on'" data-bind-aria-pressed="sideOpen.value" data-bind-aria-label="chatLabel.value">${ico('message-circle')}<span class="dmc-lbl" data-bind-text="chatLabel.value"></span><span class="dmc-badge" data-bind-hidden="!unread.value || sideOpen.value" data-bind-text="unreadText.value"></span></button>
+        <button type="button" class="dmc-btn dmc-tool dmc-btn--rec" data-on-click="toggleRecord" data-bind-hidden="!(host.value && recordingAllowed.value && canRecord)" data-bind-class="iRecord.value && 'is-on'" data-bind-aria-pressed="iRecord.value" data-bind-aria-label="iRecord.value ? 'Stop recording' : 'Record the call'">${ico('circle')}<span class="dmc-lbl" data-bind-text="iRecord.value ? 'Stop recording' : 'Record'"></span></button>
+        <button type="button" class="dmc-btn dmc-tool dmc-btn--leave" data-on-click="leave" aria-label="Leave the call">${ico('phone-off')}<span class="dmc-lbl">Leave</span></button>
+      </nav>
+    </div>
+
+    <aside class="dmc-chat" aria-label="Chat" data-bind-aria-hidden="!sideOpen.value" data-bind-inert="!sideOpen.value">
+      <header class="dmc-chat-head">
+        <button type="button" class="dmc-chat-back" data-on-click="toggleSide" aria-label="Back to the call">${ico('arrow-left')}</button>
+        <div class="dmc-chat-titles"><h3>Chat</h3><span data-bind-text="chatSub.value"></span></div>
+        <button type="button" class="dmc-chat-close" data-on-click="toggleSide" aria-label="Close the chat">${ico('x')}</button>
+      </header>
+      <div class="dmc-chat-body">
+        <ol class="dmc-messages" data-each="messages key=id" aria-live="polite">
+          <li data-bind-class="cls" data-bind-data-hue="hue">
+            <div class="dmc-day" data-bind-hidden="!day"><span data-bind-text="day"></span></div>
+            <div class="dmc-sys" data-bind-hidden="!sys"><span data-bind-text="text"></span></div>
+            <div class="dmc-bubble" data-bind-hidden="sys"><span class="dmc-from" data-bind-hidden="!showName" data-bind-text="name"></span><span class="dmc-text" data-bind-text="text"></span><span class="dmc-time" data-bind-text="time"></span></div>
+          </li>
         </ol>
-        <form class="dmc-send" data-on-submit="sendChat">
-          <input class="dmc-input" data-model="draft.value" maxlength="1000" placeholder="Message everyone" aria-label="Message everyone">
-          <button type="submit" class="dmc-btn dmc-btn--small" aria-label="Send">${ico('message-circle')}<span>Send</span></button>
-        </form>
+        <p class="dmc-chat-empty" data-bind-hidden="messages.value.length">No messages yet. Messages are seen by everyone in the call.</p>
+        <button type="button" class="dmc-newchip" data-bind-hidden="!newBelow.value" data-on-click="toBottom">${ico('arrow-down')}<span>New messages</span></button>
       </div>
+      <form class="dmc-send" data-on-submit="sendChat">
+        <textarea class="dmc-input dmc-compose" rows="1" data-model="draft.value" maxlength="1000" placeholder="Type a message" aria-label="Message everyone" data-on-keydown="chatKey" data-on-input="grow"></textarea>
+        <button type="submit" class="dmc-btn dmc-sendbtn" aria-label="Send" data-bind-disabled="!canSend.value">${ico('send')}</button>
+      </form>
     </aside>
-
-    <nav class="dmc-bar" aria-label="Call controls">
-      <button type="button" class="dmc-btn dmc-tool" data-on-click="toggleMic" data-bind-class="!micOn.value && 'is-off'" data-bind-aria-pressed="!micOn.value" data-bind-title="micOn.value ? 'Mute' : 'Unmute'">${pair('micOn.value', 'mic', 'mic-off')}<span class="dmc-lbl" data-bind-text="micOn.value ? 'Mute' : 'Unmute'"></span></button>
-      <button type="button" class="dmc-btn dmc-tool" data-on-click="toggleCam" data-bind-class="!camOn.value && 'is-off'" data-bind-aria-pressed="!camOn.value" data-bind-title="camOn.value ? 'Stop video' : 'Start video'">${pair('camOn.value', 'video', 'video-off')}<span class="dmc-lbl" data-bind-text="camOn.value ? 'Stop video' : 'Start video'"></span></button>
-      <button type="button" class="dmc-btn dmc-tool" data-on-click="toggleShare" data-bind-hidden="!canShare" data-bind-class="sharing.value && 'is-on'" data-bind-aria-pressed="sharing.value" data-bind-title="sharing.value ? 'Stop sharing' : 'Share your screen'">${ico('monitor')}<span class="dmc-lbl" data-bind-text="sharing.value ? 'Stop sharing' : 'Share screen'"></span></button>
-      <button type="button" class="dmc-btn dmc-tool" data-on-click="toggleSide" data-bind-class="sideOpen.value && 'is-on'" data-bind-aria-pressed="sideOpen.value" data-bind-title="chatLabel.value">${ico('message-circle')}<span class="dmc-lbl" data-bind-text="chatLabel.value"></span><span class="dmc-badge" data-bind-hidden="!unread.value || sideOpen.value" data-bind-text="unread.value"></span></button>
-      <button type="button" class="dmc-btn dmc-tool dmc-btn--rec" data-on-click="toggleRecord" data-bind-hidden="!(host.value && recordingAllowed.value && canRecord)" data-bind-class="iRecord.value && 'is-on'" data-bind-aria-pressed="iRecord.value" data-bind-title="iRecord.value ? 'Stop recording' : 'Record the call'">${ico('circle')}<span class="dmc-lbl" data-bind-text="iRecord.value ? 'Stop recording' : 'Record'"></span></button>
-      <button type="button" class="dmc-btn dmc-tool dmc-btn--leave" data-on-click="leave" title="Leave the call">${ico('phone-off')}<span class="dmc-lbl">Leave</span></button>
-    </nav>
   </section>
 </div>`;
 
+/** A stable colour for a sender (8 hues, picked by a hash of their tag). */
+const hueOf = (key) => {
+    let h = 0;
+    for (const ch of String(key || '')) h = (h * 31 + ch.codePointAt(0)) >>> 0;
+    return String(h % 8);
+};
+const initialOf = (n) => (String(n || '').trim()[0] || '?').toUpperCase();
+const GROUP_MS = 5 * 60e3;
+
 function mount(el) {
     let cfg;
     try { cfg = JSON.parse(el.getAttribute('data-dm-call') || '{}'); } catch { cfg = {}; }
@@ -133,20 +186,30 @@ function mount(el) {
     const draft = M.observable('');
     const peers = M.observableArray([]);                 // {id, name, host, caption: observable}
     const waiting = M.observableArray([]);               // {id, name}
-    const messages = M.observableArray([]);              // {id, name, text, mine}
+    const messages = M.observableArray([]);              // chat rows, built by addItem()
+    const newBelow = M.observable(false);                // the reader scrolled up and something new arrived
+    const clock = M.observable('0:00');
+    const tiles = M.observable('0');                     // remote tiles on the stage (self is the picture-in-picture)
     const ended = M.observable({title: 'You have left the call', text: 'You can close this page.'});
     const max = M.observable(6);
 
     const endTitle = M.computed(() => ended.value.title);
     const endText = M.computed(() => ended.value.text);
-    const meCaption = M.computed(() => `${name.value || 'You'} (you)${micOn.value ? '' : ' · muted'}`);
-    const countText = M.computed(() => (stage.value === 'in' ? `${peers.value.length + 1} of ${max.value}` : ''));
+    const meCaption = M.computed(() => `${name.value || 'You'} (you)`);
+    const initial = M.computed(() => initialOf(name.value || 'You'));
+    const countText = M.computed(() => (stage.value === 'in' ? `${peers.value.length + 1}` : ''));
+    const countTitle = M.computed(() => `${peers.value.length + 1} of ${max.value} people in the call`);
     const people = M.computed(() => String(Math.min(6, peers.value.length + 1)));
     const chatLabel = M.computed(() => (sideOpen.value ? 'Hide chat' : 'Chat'));
+    const unreadText = M.computed(() => (unread.value > 99 ? '99+' : String(unread.value)));
+    const chatSub = M.computed(() => `Everyone in the call · ${peers.value.length + 1}`);
+    const waitingTitle = M.computed(() => (waiting.value.length === 1 ? '1 person waiting to join' : `${waiting.value.length} people waiting to join`));
+    const aloneText = M.computed(() => (host.value ? 'Share the link - you will be asked to let each guest in.' : 'The others will appear here as they join.'));
+    const canSend = M.computed(() => /\S/.test(draft.value || ''));
     const title = M.observable(cfg.title || 'Call');
 
     // ---- The connection to the site ---------------------------------------------------
-    let me = null;                                       // {id, secret}
+    let me = null;                                       // {id, secret, who}
     let since = 0;
     let polling = false;
     const headers = () => ({'Content-Type': 'application/json', 'X-Call-Id': me?.id || '', 'X-Call-Secret': me?.secret || ''});
@@ -158,6 +221,8 @@ function mount(el) {
     let screen = null;
     let iceServers = [];
     const pcs = new Map();                               // peer id -> {pc, polite, makingOffer, ignore, stream}
+    // peers is kept in step with tiles (a plain observable, not a computed over a computed).
+    const stopTiles = M.effect(() => { tiles.value = String(Math.min(6, peers.value.length)); });
 
     const selfVideos = () => el.querySelectorAll('.dmc-self, .dmc-self-preview');
     const showSelf = () => selfVideos().forEach(v => { v.srcObject = screen || local; });
@@ -263,12 +328,56 @@ function mount(el) {
     // ---- Events from the site ----------------------------------------------------------
     function addPeer(p) {
         if (p.id === me.id || peers.value.some(x => x.id === p.id)) return;
-        const row = {id: p.id, name: p.name, host: p.host, caption: M.observable('')};
+        const row = {id: p.id, name: p.name, host: p.host, initial: initialOf(p.name), caption: M.observable('')};
         row.caption.value = captionFor(row, 'new');
         peers.push(row);
         connect(row);
     }
 
+    // ---- Chat -------------------------------------------------------------------------------
+    // Items come from the site as {id, seq, at, kind: 'chat'|'system', from, who, name, text, event?}: the history
+    // in `admitted.chat`, then one per `chat` event (and on joined/left/recording events as `item`). Each becomes a
+    // display row here, grouped the WhatsApp way against the row before it; the same id never shows twice.
+    const seenIds = new Set();
+    let lastRow = null;
+    const scroller = () => el.querySelector('.dmc-messages');
+    const nearBottom = () => { const l = scroller(); return !l || l.scrollHeight - l.scrollTop - l.clientHeight < 80; };
+    const toBottom = (smooth) => requestAnimationFrame(() => {
+        const l = scroller();
+        if (l) l.scrollTo({top: l.scrollHeight, behavior: smooth ? 'smooth' : 'auto'});
+        newBelow.value = false;
+    });
+    const dayKey = (d) => `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+    function dayLabel(d) {
+        const today = new Date();
+        const yesterday = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1);
+        if (dayKey(d) === dayKey(today)) return 'Today';
+        if (dayKey(d) === dayKey(yesterday)) return 'Yesterday';
+        return d.toLocaleDateString([], {weekday: 'short', day: 'numeric', month: 'short', ...(d.getFullYear() !== today.getFullYear() && {year: 'numeric'})});
+    }
+
+    function addItem(raw, {live = true} = {}) {
+        if (!raw || typeof raw.text !== 'string' || !raw.id || seenIds.has(raw.id)) return;
+        seenIds.add(raw.id);
+        const at = new Date(raw.at || Date.now());
+        const when = Number.isNaN(at.getTime()) ? new Date() : at;
+        const sys = raw.kind === 'system';
+        const sender = raw.who || raw.from || raw.name;
+        const mine = !sys && Boolean(me) && ((raw.who && raw.who === me.who) || raw.from === me.id);
+        const day = !lastRow || dayKey(lastRow.when) !== dayKey(when) ? dayLabel(when) : '';
+        const first = sys || Boolean(day) || !lastRow || lastRow.sys || lastRow.sender !== sender || when - lastRow.when > GROUP_MS;
+        const row = {id: raw.id, sys, mine, text: raw.text, name: raw.name || 'Someone', day, sender, when,
+            showName: first && !mine && !sys, hue: hueOf(sender),
+            time: when.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit', hourCycle: 'h23'}),
+            cls: ['dmc-msg', sys ? 'is-sys' : mine ? 'is-mine' : 'is-other', first ? 'is-first' : 'is-cont', day ? 'has-day' : ''].join(' ').trim()};
+        const stick = nearBottom() || mine || !live;
+        messages.push(row);
+        lastRow = row;
+        if (live && !sys && !mine && !sideOpen.value) unread.value += 1;
+        if (stick) toBottom(live);
+        else if (live) newBelow.value = true;
+    }
+
     function handle(e) {
         if (!me) return;   // the call ended part-way through a batch of events
         switch (e.type) {
@@ -276,19 +385,21 @@ function mount(el) {
             case 'admitted':
                 stage.value = 'in';
                 recording.value = e.recording === true;
+                (e.chat || []).forEach(item => addItem(item, {live: false}));
                 (e.peers || []).forEach(addPeer);
                 showSelf();
+                startClock();
+                fit();
                 break;
-            case 'joined': addPeer(e.peer); break;
-            case 'left': dropPeer(e.id); break;
+            case 'joined': addPeer(e.peer); addItem(e.item); break;
+            case 'left': dropPeer(e.id); addItem(e.item); break;
             case 'signal': onSignal(e.from, e.data || {}); break;
-            case 'waiting': waiting.value = (e.waiting || []).map(w => ({id: w.id, name: w.name})); break;
+            case 'waiting': waiting.value = (e.waiting || []).map(w => ({id: w.id, name: w.name, initial: initialOf(w.name)})); break;
             case 'chat':
-                messages.push({id: `${e.seq}`, name: e.name, text: e.text, mine: e.from === me.id});
-                if (!sideOpen.value && e.from !== me.id) unread.value += 1;
-                requestAnimationFrame(() => { const list = el.querySelector('.dmc-messages'); if (list) list.scrollTop = list.scrollHeight; });
+                // An older site sends from/name/text only: make an item of it (its queue seq is unique per person).
+                addItem(e.item || {id: `q${e.seq}`, kind: 'chat', at: new Date(e.at || Date.now()).toISOString(), from: e.from, name: e.name, text: e.text});
                 break;
-            case 'recording': recording.value = e.on === true; break;
+            case 'recording': recording.value = e.on === true; addItem(e.item); break;
             case 'turned-away': finish('away', 'The host did not let you in', 'You can close this page.'); break;
             case 'ended': finish('ended', 'The call has ended', 'You can close this page.'); break;
             default: break;
@@ -313,8 +424,37 @@ function mount(el) {
     }
     const pause = (ms) => new Promise(r => setTimeout(r, ms));
 
+    // ---- The stage: its height and the call timer ---------------------------------------------
+    let clockTimer = null;
+    function startClock() {
+        if (clockTimer) return;
+        const from = Date.now();
+        const tick = () => {
+            const s = Math.floor((Date.now() - from) / 1000);
+            const hh = Math.floor(s / 3600); const mm = Math.floor(s / 60) % 60; const ss = String(s % 60).padStart(2, '0');
+            clock.value = hh ? `${hh}:${String(mm).padStart(2, '0')}:${ss}` : `${mm}:${ss}`;
+        };
+        tick();
+        clockTimer = setInterval(tick, 1000);
+    }
+    /** The stage fills the window below whatever the site puts above it (its header): measured, not guessed. */
+    function fit() {
+        requestAnimationFrame(() => {
+            const call = el.querySelector('.dmc-call');
+            if (!call || call.hidden) return;
+            const top = call.getBoundingClientRect().top + window.scrollY;
+            el.style.setProperty('--dmc-offset', `${Math.round(Math.max(0, Math.min(top, window.innerHeight * 0.35)))}px`);
+            requestAnimationFrame(() => {
+                const r = call.getBoundingClientRect();
+                if (r.bottom > window.innerHeight + 2 || r.top < 0) call.scrollIntoView({block: 'end', behavior: 'smooth'});
+            });
+        });
+    }
+    window.addEventListener('resize', () => { if (stage.value === 'in') fit(); });
+
     function finish(kind, title, text) {
         ended.value = {title, text};
+        clearInterval(clockTimer); clockTimer = null;
         stage.value = kind;
         stopRecording();
         for (const id of [...pcs.keys()]) dropPeer(id);
@@ -380,16 +520,25 @@ function mount(el) {
 
     // ---- What the buttons do -------------------------------------------------------------
     const model = {
-        title, people, chatLabel, askName: cfg.askName !== false, canShare: Boolean(navigator.mediaDevices?.getDisplayMedia), canRecord,
-        stage, name, micOn, camOn, sharing, recording, iRecord, recordingAllowed, host, busy, error, deviceNote, sideOpen, unread,
-        draft, peers, waiting, messages, endTitle, endText, meCaption, countText,
+        title, people, tiles, chatLabel, askName: cfg.askName !== false, canShare: Boolean(navigator.mediaDevices?.getDisplayMedia), canRecord,
+        stage, name, initial, micOn, camOn, sharing, recording, iRecord, recordingAllowed, host, busy, error, deviceNote, sideOpen, unread,
+        unreadText, draft, canSend, peers, waiting, waitingTitle, messages, newBelow, endTitle, endText, meCaption, countText, countTitle,
+        clock, chatSub, aloneText,
 
         toggleMic() { micOn.value = !micOn.value; setTracks(); },
         toggleCam() {
             if (!local?.getVideoTracks().length) { error.value = 'No camera is available.'; return; }
             camOn.value = !camOn.value; setTracks();
         },
-        toggleSide() { sideOpen.value = !sideOpen.value; if (sideOpen.value) unread.value = 0; },
+        toggleSide() {
+            sideOpen.value = !sideOpen.value;
+            if (!sideOpen.value) return;
+            unread.value = 0;
+            toBottom(false);
+            // Not on a phone: the keyboard would cover the messages the moment the sheet opens.
+            if (window.matchMedia('(min-width: 761px)').matches) setTimeout(() => el.querySelector('.dmc-compose')?.focus({preventScroll: true}), 250);
+        },
+        toBottom() { toBottom(true); },
 
         async join() {
             error.value = '';
@@ -400,7 +549,7 @@ function mount(el) {
                 const body = await r.json().catch(() => ({}));
                 if (r.status === 425 && body.opensAt) { error.value = `This call opens at ${new Date(body.opensAt).toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'})}. Come back then.`; return; }
                 if (!r.ok) { error.value = body.error || 'Could not join the call.'; return; }
-                me = {id: body.id, secret: body.secret};
+                me = {id: body.id, secret: body.secret, who: body.who || body.id};
                 iceServers = body.iceServers || [];
                 host.value = body.host === true;
                 if (body.name) name.value = body.name;
@@ -424,11 +573,27 @@ function mount(el) {
         turnAway(w) { post('answer', {who: w.id, yes: false}); },
 
         sendChat() {
-            const text = draft.value.trim();
+            const text = String(draft.value || '').trim();
             if (text && me) post('chat', {text});
             draft.value = '';
+            requestAnimationFrame(() => model.grow());
             return false;
         },
+        /** Enter sends, Shift+Enter is a new line (and nothing is sent mid-composition, e.g. an IME). */
+        chatKey(e) {
+            if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) { e.preventDefault(); model.sendChat(); }
+        },
+        /** The box grows with what is typed, up to four lines, then scrolls. */
+        grow() {
+            const box = el.querySelector('.dmc-compose');
+            if (!box) return;
+            const cs = getComputedStyle(box);
+            const edges = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);
+            const most = (parseFloat(cs.lineHeight) || 20) * 4 + parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom) + edges;
+            box.style.height = 'auto';
+            box.style.height = `${Math.min(box.scrollHeight + edges, most)}px`;
+            box.style.overflowY = box.scrollHeight + edges > most ? 'auto' : 'hidden';
+        },
 
         async toggleShare() {
             // Each connection's video sender: the camera's, or one added for a screen when there was no camera
@@ -476,9 +641,11 @@ function mount(el) {
     const scan = () => { try { window.I?.scan?.(el); } catch { /* no icons: the labels still read */ } };
     scan();
     const stopScan = M.effect(() => { waiting.value; requestAnimationFrame(scan); });
+    // Reading scrolled back up: the "new messages" chip goes once they are at the bottom again.
+    el.querySelector('.dmc-messages')?.addEventListener('scroll', () => { if (newBelow.value && nearBottom()) newBelow.value = false; }, {passive: true});
     window.addEventListener('pagehide', () => { if (me) post('leave', {}, {keepalive: true}); });
     getDevices().then(setTracks);
-    return () => { stopAttach?.(); stopScan?.(); handleBindings?.dispose?.(); };
+    return () => { stopAttach?.(); stopScan?.(); stopTiles?.(); clearInterval(clockTimer); handleBindings?.dispose?.(); };
 }
 
 document.querySelectorAll('[data-dm-call]').forEach(mount);