domma-cms 0.105.2 → 0.107.0

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,43 @@ 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. The whole of it is a full-bleed layer below the site's header (layout()). In the call: a slate
+ * stage (a slim top bar, tiles that fill it, a docked control bar - icon + label, icons only on a phone) beside a
+ * 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 +71,157 @@ 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">
+        <div class="dmc-bar-side" aria-hidden="true"></div>
+        <div class="dmc-bar-mid">
+        <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 share' : 'Share'"></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">Chat</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-tool--invite" data-slot="invite" data-on-click="toggleInvite" data-bind-hidden="!canInvite.value" data-bind-class="inviteOpen.value && 'is-on'" data-bind-aria-pressed="inviteOpen.value" aria-label="Add people">${ico('user-plus')}<span class="dmc-lbl">Add people</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>
+        </div>
+        <div class="dmc-bar-side dmc-bar-end">
+        <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>
+        </div>
+      </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-meta" data-bind-hidden="!showMeta"><span class="dmc-from" data-bind-hidden="!showName" data-bind-text="name"></span><span class="dmc-time" data-bind-text="time"></span></div>
+            <div class="dmc-bubble" data-bind-hidden="sys" data-bind-title="time"><span class="dmc-text" data-bind-text="text"></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>
+    <aside class="dmc-invite" aria-label="Add people" data-bind-class="inviteOpen.value && 'is-open'" data-bind-aria-hidden="!inviteOpen.value" data-bind-inert="!inviteOpen.value">
+      <header class="dmc-chat-head">
+        <button type="button" class="dmc-chat-back" data-on-click="toggleInvite" aria-label="Back to the call">${ico('arrow-left')}</button>
+        <div class="dmc-chat-titles"><h3>Add people</h3><span data-bind-text="inviteSub.value"></span></div>
+        <button type="button" class="dmc-chat-close" data-on-click="toggleInvite" aria-label="Close Add people">${ico('x')}</button>
+      </header>
+      <div class="dmc-inv-body">
+        <p class="dmc-inv-only" data-bind-hidden="inviteSearch.value || inviteTyped.value">Make a link for each person you want to add and pass it on yourself - by email, text or chat. Each link is theirs alone: they type their name and knock, and you let them in.</p>
+        <div class="dmc-inv-find" data-bind-hidden="!inviteSearch.value">
+        <label class="dmc-inv-search"><span class="dmc-inv-sico" aria-hidden="true">${ico('search')}</span>
+          <input class="dmc-inv-input dmc-inv-q" type="search" data-model="query.value" data-on-input="searchSoon" maxlength="100" autocomplete="off" data-bind-placeholder="searchHint.value" data-bind-aria-label="searchHint.value"></label>
+        <div class="dmc-inv-chips" data-bind-hidden="!picked.value.length" aria-label="Adding">
+          <ul data-each="picked key=key">
+            <li class="dmc-inv-chip"><span class="dmc-inv-chipname" data-bind-text="name"></span><span class="dmc-inv-chipkind" data-bind-text="badge"></span>
+              <button type="button" class="dmc-inv-chipx" data-on-click="$parent.unpick($data)" data-bind-aria-label="removeLabel"><span class="dmc-i">${ico('x')}</span></button></li>
+          </ul>
+        </div>
+        <p class="dmc-inv-label" data-bind-text="foundTitle.value"></p>
+        <ul class="dmc-inv-list" data-each="found key=key">
+          <li><button type="button" class="dmc-inv-row" data-on-click="$parent.pick($data)" data-bind-class="picked.value && 'is-picked'" data-bind-aria-pressed="picked.value">
+            <span class="dmc-inv-av" aria-hidden="true" data-bind-text="initial"></span>
+            <span class="dmc-inv-who"><span class="dmc-inv-name" data-bind-text="name"></span><span class="dmc-inv-mail" data-bind-hidden="!email" data-bind-text="email"></span></span>
+            <span class="dmc-inv-kind" data-bind-data-kind="kind" data-bind-text="badge"></span>
+            <span class="dmc-inv-tick" aria-hidden="true"><span class="dmc-i">${ico('check')}</span></span>
+          </button></li>
+        </ul>
+        <p class="dmc-inv-empty" data-bind-hidden="!emptyText.value" data-bind-text="emptyText.value"></p>
+        </div>
+        <div class="dmc-inv-typed" data-bind-hidden="!inviteTyped.value">
+          <p class="dmc-inv-label">Or type a name and email</p>
+          <div class="dmc-inv-pair">
+            <input class="dmc-inv-input" data-model="typedName.value" maxlength="120" autocomplete="off" placeholder="Name" aria-label="Their name">
+            <input class="dmc-inv-input" type="email" data-model="typedEmail.value" maxlength="200" autocomplete="off" placeholder="name@example.com" aria-label="Their email" data-on-keydown="typedKey">
+            <button type="button" class="dmc-btn dmc-inv-add" data-on-click="addTyped" aria-label="Add this person">${ico('plus')}</button>
+          </div>
+        </div>
+      </div>
+      <div class="dmc-inv-foot">
+        <fieldset class="dmc-inv-via" data-bind-hidden="!inviteSearch.value && !inviteTyped.value"><legend>Send them</legend>
+          <label><input type="checkbox" data-model="viaNotify.value"><span>Notification</span></label>
+          <label data-bind-hidden="!canMessage.value"><input type="checkbox" data-model="viaMessage.value"><span>Message</span></label>
+          <label><input type="checkbox" data-model="viaEmail.value"><span>Email</span></label>
+        </fieldset>
+        <p class="dmc-inv-hint" data-bind-hidden="!inviteSearch.value && !inviteTyped.value" data-bind-text="viaHint.value"></p>
+        <p class="dmc-inv-status" role="status" data-bind-hidden="!inviteNote.value" data-bind-class="inviteBad.value && 'is-err'" data-bind-text="inviteNote.value"></p>
+        <ul class="dmc-inv-results" data-each="sent key=id">
+          <li data-bind-class="cls"><span class="dmc-inv-rname" data-bind-text="name"></span><span class="dmc-inv-rtext" data-bind-text="text"></span></li>
+        </ul>
+        <input class="dmc-inv-input dmc-inv-link" readonly data-bind-hidden="!copiedLink.value" data-bind-value="copiedLink.value" aria-label="The Join link" data-on-focus="selectLink">
+        <div class="dmc-inv-btns">
+          <button type="button" class="dmc-btn dmc-btn--ghost dmc-inv-copy" data-bind-hidden="!inviteCopy.value" data-on-click="copyLink" data-bind-disabled="inviteBusy.value">${ico('copy')}<span>Copy link</span></button>
+          <button type="button" class="dmc-btn dmc-btn--go dmc-inv-send" data-bind-hidden="!inviteSearch.value && !inviteTyped.value" data-on-click="sendInvites" data-bind-disabled="!canSendInvites.value">${ico('send')}<span data-bind-text="sendLabel.value"></span></button>
+        </div>
+      </div>
+    </aside>
   </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;
+const INVITE_MAX = 10;                                   // people in one invite (the engine's MAX_TARGETS)
+const EMAIL_RE = /^[^\s@<>"]+@[^\s@<>"]+\.[^\s@<>"]+$/;
+
 function mount(el) {
     let cfg;
     try { cfg = JSON.parse(el.getAttribute('data-dm-call') || '{}'); } catch { cfg = {}; }
@@ -133,20 +252,65 @@ 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');
 
+    // ---- Add people (the host, when the Tool allows it: join answers canInvite) ----------------
+    const canInvite = M.observable(false);
+    // What the Tool offers this host (join's inviteOptions): search the team (+ contacts when typed), contacts and
+    // "type a name and email", Copy link. Messages: search only. Booking's host with no account on the site: Copy link only.
+    const inviteSearch = M.observable(true);
+    const inviteTyped = M.observable(true);
+    const inviteCopy = M.observable(true);
+    const inviteOpen = M.observable(false);
+    const query = M.observable('');
+    const found = M.observableArray([]);                 // search rows {key, kind, id, name, email, badge, initial, picked: observable}
+    const picked = M.observableArray([]);                // chips {key, kind, id, name, email?, badge, removeLabel}
+    const typedName = M.observable('');
+    const typedEmail = M.observable('');
+    const viaNotify = M.observable(true);
+    const viaMessage = M.observable(true);
+    const viaEmail = M.observable(true);
+    const canMessage = M.observable(false);              // a search said a direct message can reach the team
+    const inviteBusy = M.observable(false);
+    const inviteNote = M.observable('');
+    const inviteBad = M.observable(false);
+    const sent = M.observableArray([]);                  // {id, name, text, cls}
+    const copiedLink = M.observable('');
+    const searched = M.observable(false);
+    const inviteSub = M.computed(() => (!inviteSearch.value ? 'Copy a link to pass on' : inviteTyped.value ? 'Contacts, the team or any email' : 'Ring another team member'));
+    const searchHint = M.computed(() => (inviteTyped.value ? 'Search your contacts and team' : 'Search the team'));
+    const foundTitle = M.computed(() => ((query.value || '').trim() ? 'Results' : 'Your team'));
+    const emptyText = M.computed(() => (!searched.value || found.value.length ? ''
+        : (query.value || '').trim() ? `Nobody found.${inviteTyped.value ? ' Type their name and email below.' : ''}` : 'Nobody else to add.'));
+    const viaHint = M.computed(() => (inviteTyped.value
+        ? 'Notification and Message reach team members only; contacts and typed addresses get the email. Everyone knocks and you let them in.'
+        : 'They get a notification and a message in Messages with their own link; tick Email to send one too.'));
+    const canSendInvites = M.computed(() => picked.value.length > 0 && !inviteBusy.value
+        && (viaEmail.value || viaNotify.value || (viaMessage.value && canMessage.value)));
+    const sendLabel = M.computed(() => (picked.value.length > 1 ? `Invite ${picked.value.length}` : 'Invite'));
+
     // ---- 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 +322,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 +429,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 against the row before it (a name + time line opens each group); 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, showMeta: first && !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 +486,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();
+                layout();
                 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 +525,85 @@ 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 screen is a full-bleed layer (fixed) over the page below the site's header - measured, not guessed: the
+     * navbar's bottom edge (or its side, for a vertical one); without a recognisable header, where the mount point
+     * was. The page behind does not scroll.
+     */
+    let flowTop = null;
+    function layoutChrome() {
+        const root = el.firstElementChild;
+        if (!root) return;
+        if (flowTop === null) {
+            try { window.scrollTo(0, 0); } catch { /* never mind */ }
+            flowTop = el.getBoundingClientRect().top;
+            root.classList.add('dmc--app');
+            document.documentElement.classList.add('dmc-page');
+        }
+        const vw = window.innerWidth; const vh = window.innerHeight;
+        let top = flowTop; let left = 0; let right = 0;
+        const nav = [document.getElementById('site-navbar'), document.querySelector('body > header, body > nav, header[role="banner"], .site-header')]
+            .find(n => n && !el.contains(n) && n.getBoundingClientRect().height > 0);
+        if (nav) {
+            const r = nav.getBoundingClientRect();
+            const vertical = r.height > vh * 0.6 && r.width < vw * 0.5;
+            if (vertical && r.left < vw / 2) { top = 0; left = r.right; } else if (vertical) { top = 0; right = vw - r.left; } else top = r.bottom;
+        }
+        const clamp = (v, most) => `${Math.round(Math.max(0, Math.min(v, most)))}px`;
+        root.style.setProperty('--dmc-offset', clamp(top, vh * 0.35));
+        root.style.setProperty('--dmc-left', clamp(left, vw * 0.4));
+        root.style.setProperty('--dmc-right', clamp(right, vw * 0.4));
+    }
+    /**
+     * Tiles fill the stage: for this stage's size, the columns x rows (and the tile size) that show the most of
+     * everyone. A tile stretches to its cell and the video covers it (no letterbox bands); a tile may be tall
+     * (the sides of the picture are cropped - faces are central) but never wider than 2.4:1, which would crop heads.
+     * Score: tile area x sqrt(share of the 16:9 picture still visible).
+     */
+    function layoutTiles() {
+        const box = el.querySelector('.dmc-remote');
+        const n = Math.min(6, peers.value.length);
+        if (!box || !n || !box.clientWidth) return;
+        const gap = parseFloat(getComputedStyle(box).columnGap) || 8;
+        const W = box.clientWidth; const H = box.clientHeight;
+        const WIDEST = 2.4; const TALLEST = 0.5; const VIDEO = 16 / 9;
+        let best = null;
+        for (let cols = 1; cols <= n; cols++) {
+            const rows = Math.ceil(n / cols);
+            let w = (W - (cols - 1) * gap) / cols; let h = (H - (rows - 1) * gap) / rows;
+            if (w <= 0 || h <= 0) continue;
+            if (w / h > WIDEST) w = h * WIDEST;
+            if (w / h < TALLEST) h = w / TALLEST;
+            const aspect = w / h;
+            const score = w * h * Math.sqrt(Math.min(aspect / VIDEO, VIDEO / aspect));
+            if (!best || score > best.score) best = {cols, rows, w, h, score};
+        }
+        if (!best) return;
+        box.style.setProperty('--cols', String(best.cols));
+        box.style.setProperty('--rows', String(best.rows));
+        box.style.setProperty('--tile-w', `${Math.floor(best.w)}px`);
+        box.style.setProperty('--tile-h', `${Math.floor(best.h)}px`);
+    }
+    function layout() { requestAnimationFrame(() => { layoutChrome(); layoutTiles(); }); }
+    window.addEventListener('resize', layout);
+
     function finish(kind, title, text) {
         ended.value = {title, text};
+        inviteOpen.value = false;
+        clearInterval(clockTimer); clockTimer = null;
         stage.value = kind;
         stopRecording();
         for (const id of [...pcs.keys()]) dropPeer(id);
@@ -380,16 +669,100 @@ 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,
+        canInvite, inviteSearch, inviteTyped, inviteCopy, inviteOpen, query, found, picked, typedName, typedEmail, viaNotify, viaMessage, viaEmail, canMessage,
+        inviteBusy, inviteNote, inviteBad, sent, copiedLink, inviteSub, searchHint, foundTitle, emptyText, viaHint, canSendInvites, sendLabel,
+
+        toggleInvite() {
+            inviteOpen.value = !inviteOpen.value;
+            if (!inviteOpen.value) return;
+            sideOpen.value = false;
+            if (!searched.value && inviteSearch.value) runSearch();
+            if (window.matchMedia('(min-width: 761px)').matches) setTimeout(() => el.querySelector('.dmc-inv-q')?.focus({preventScroll: true}), 250);
+        },
+        searchSoon() {
+            clearTimeout(searchTimer);
+            searchTimer = setTimeout(runSearch, 250);
+        },
+        pick(row) {
+            const at = picked.value.find(p => p.key === row.key);
+            if (at) { model.unpick(at); return; }
+            if (picked.value.length >= INVITE_MAX) { note(`Add at most ${INVITE_MAX} people at a time.`, true); return; }
+            picked.push({key: row.key, kind: row.kind, id: row.id, name: row.name, badge: row.badge, removeLabel: `Remove ${row.name}`});
+            row.picked.value = true;
+        },
+        unpick(chip) {
+            picked.remove(chip);
+            const row = found.value.find(r => r.key === chip.key);
+            if (row) row.picked.value = false;
+        },
+        addTyped() {
+            const email = String(typedEmail.value || '').trim().toLowerCase();
+            if (!EMAIL_RE.test(email)) { note('That email address does not look right.', true); return; }
+            const name = String(typedName.value || '').trim().slice(0, 120) || email.split('@')[0];
+            const key = `email:${email}`;
+            if (!picked.value.some(p => p.key === key)) {
+                if (picked.value.length >= INVITE_MAX) { note(`Add at most ${INVITE_MAX} people at a time.`, true); return; }
+                picked.push({key, kind: 'email', name, email, badge: 'Email', removeLabel: `Remove ${name}`});
+            }
+            typedName.value = ''; typedEmail.value = ''; note('');
+        },
+        typedKey(e) { if (e.key === 'Enter' && !e.isComposing) { e.preventDefault(); model.addTyped(); } },
+        selectLink(e) { try { e.target.select(); } catch { /* never mind */ } },
+
+        async sendInvites() {
+            if (!canSendInvites.value || !me) return;
+            inviteBusy.value = true; note('');
+            const people = picked.value.map(p => (p.kind === 'email' ? {name: p.name, email: p.email} : {kind: p.kind, id: p.id}));
+            try {
+                const r = await post('invite', {people, via: {email: viaEmail.value, notify: viaNotify.value, message: viaMessage.value && canMessage.value}});
+                const body = await r.json().catch(() => ({}));
+                if (!r.ok) { note(body.error || 'The invitations could not be sent.', true); return; }
+                const results = Array.isArray(body.results) ? body.results : [];
+                sent.value = results.map((x, i) => ({id: `${Date.now()}-${i}`, name: x.name, text: resultText(x),
+                    cls: `dmc-inv-res ${x.emailed || x.notified || x.messaged ? 'is-ok' : 'is-err'}`}));
+                for (const p of [...picked.value]) model.unpick(p);
+                const reached = results.filter(x => x.emailed || x.notified || x.messaged).length;
+                note(reached ? (inviteTyped.value ? 'Sent. They will knock - let them in from the waiting list.' : 'Sent. They join as soon as they open their link.')
+                    : 'Nobody could be reached - see below.', !reached);
+            } catch {
+                note('Could not reach the site. Check your connection and try again.', true);
+            } finally { inviteBusy.value = false; }
+        },
+        async copyLink() {
+            if (!me) return;
+            inviteBusy.value = true; note('');
+            try {
+                const r = await post('invite', {people: [], via: {}});
+                const body = await r.json().catch(() => ({}));
+                if (!r.ok || !body.link) { note(body.error || 'No link could be made.', true); return; }
+                copiedLink.value = body.link;
+                let copied = false;
+                try { await navigator.clipboard.writeText(body.link); copied = true; } catch { copied = false; }
+                note(copied ? 'Link copied. Whoever opens it knocks, and you let them in.' : 'Copy the link below. Whoever opens it knocks, and you let them in.');
+            } catch {
+                note('Could not reach the site. Check your connection and try again.', true);
+            } finally { inviteBusy.value = false; }
+        },
 
         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;
+            inviteOpen.value = false;
+            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,13 +773,19 @@ 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;
                 max.value = body.max || 6;
                 recordingAllowed.value = body.recordingAllowed === true;
                 if (body.title) title.value = body.title;
+                canInvite.value = body.canInvite === true;
+                const offer = body.inviteOptions || {};
+                inviteSearch.value = offer.search !== false;
+                inviteTyped.value = typeof offer.typed === 'boolean' ? offer.typed : offer.external !== false;
+                inviteCopy.value = typeof offer.copyLink === 'boolean' ? offer.copyLink : offer.external !== false;
+                if (!inviteTyped.value) viaEmail.value = false;
                 stage.value = body.state === 'in' ? 'in' : 'waiting';
                 since = 0;
                 pollLoop();
@@ -424,11 +803,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
@@ -471,14 +866,50 @@ function mount(el) {
     };
 
     el.innerHTML = TEMPLATE;
+    let searchTimer = null;
+    let searchSeq = 0;
+    function note(text, bad = false) { inviteNote.value = text; inviteBad.value = Boolean(bad && text); }
+    /** The people the Tool offers for this search (the team for an empty one). Late answers are dropped. */
+    async function runSearch() {
+        if (!me || !canInvite.value || !inviteSearch.value) return;
+        const mine = ++searchSeq;
+        const q = String(query.value || '').trim();
+        try {
+            const r = await fetch(`${url('people')}?q=${encodeURIComponent(q)}`, {headers: headers(), cache: 'no-store'});
+            const body = await r.json().catch(() => ({}));
+            if (mine !== searchSeq) return;
+            if (!r.ok) { note(body.error || 'Could not search just now.', true); return; }
+            const chosen = new Set(picked.value.map(p => p.key));
+            const rows = (Array.isArray(body.people) ? body.people : []).map(p => ({key: `${p.kind}:${p.id}`, kind: p.kind, id: p.id, name: p.name,
+                email: p.email || '', badge: p.kind === 'user' ? 'Team' : 'Contact', initial: initialOf(p.name), canMessage: p.canMessage === true,
+                picked: M.observable(chosen.has(`${p.kind}:${p.id}`))}));
+            if (rows.some(x => x.kind === 'user' && x.canMessage)) canMessage.value = true;
+            found.value = rows;
+            searched.value = true;
+        } catch {
+            if (mine === searchSeq) note('Could not reach the site. Check your connection and try again.', true);
+        }
+    }
+    const resultText = (x) => {
+        const did = [x.notified && 'notified', x.messaged && 'messaged', x.emailed && 'emailed'].filter(Boolean);
+        const said = did.length ? `${did.slice(0, -1).join(', ')}${did.length > 1 ? ' and ' : ''}${did.at(-1)}` : '';
+        const text = said ? said[0].toUpperCase() + said.slice(1) : '';
+        return [text, x.error || ''].filter(Boolean).join(' - ') || 'Invited';
+    };
+
     const handleBindings = M.applyBindings(model, el.firstElementChild);
     // Icons after binding (I.scan swaps each span for an SVG); new waiting rows get theirs as they arrive.
     const scan = () => { try { window.I?.scan?.(el); } catch { /* no icons: the labels still read */ } };
+    layout();
+    const stopLayout = M.effect(() => { peers.value; requestAnimationFrame(layoutTiles); });
+    if (typeof ResizeObserver === 'function') { const box = el.querySelector('.dmc-remote'); if (box) new ResizeObserver(() => layoutTiles()).observe(box); }
     scan();
-    const stopScan = M.effect(() => { waiting.value; requestAnimationFrame(scan); });
+    const stopScan = M.effect(() => { waiting.value; found.value; picked.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 () => { stopLayout?.(); stopAttach?.(); stopScan?.(); stopTiles?.(); clearInterval(clockTimer); handleBindings?.dispose?.(); };
 }
 
 document.querySelectorAll('[data-dm-call]').forEach(mount);