v2.0.9 — sync toast split, relay group chat UI, find/replace flaky fix

- sync: the post-sync toast lumped relay pulls into the CalDAV stats
  and always labelled the banner "CalDAV". Split into two separate
  toasts (CalDAV cloud-arrow + Relay broadcast icon), each only shown
  when its numbers are non-zero. Banners now stack vertically so both
  can appear together on a sync that pulled on both sides.
- relay UI: the session chat view was 1:1-only. Group rooms (which
  the client API already supports) now surface as first-class threads
  in the sidebar — sorted chronologically with 1:1 peers, tagged
  "ROOM", with a users-three icon. Sending posts to `room_uid`
  instead of `recipient`; history shows the sender name above each
  incoming message so it's clear who's talking in the room.
  Relay backend: `/api/chat/threads` returns rooms alongside 1:1
  threads; `/api/chat/history` accepts `?room_uid=`; `/api/chat/send`
  accepts `room_uid` in the body.
- tests: bump "replace all updates card bodies" poll budget from 4s
  to 10s and poll both updated cards. Flaky on cold runs because a
  fresh PHP worker + SQLite WAL warm-up plus two sequential PATCH
  calls can just barely exceed 4 seconds.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

relay/ui/app.js

@@ -857,61 +857,88 @@ document.addEventListener('visibilitychange', () => {
 });
 
 // ── Chat ──
+//
+// Two thread kinds live side by side: 1:1 (identified by peer username)
+// and group rooms (identified by room_uid). The UI keeps a single
+// "active thread" descriptor and switches the fetch / send shape based
+// on which field is populated.
 
-let chatActivePeer = null;
+let chatActive = null;   // { kind: 'peer' | 'room', peer?, roomUid?, label }
 let chatPollHandle = null;
 
 function startChatPoll() {
     stopChatPoll();
     chatPollHandle = setInterval(() => {
         loadChatThreads(true);
-        if (chatActivePeer) loadChatHistory(chatActivePeer, true);
+        if (chatActive) loadChatHistory(chatActive, true);
     }, 5000);
 }
 function stopChatPoll() {
     if (chatPollHandle) { clearInterval(chatPollHandle); chatPollHandle = null; }
 }
 
+function isSameActive(a, b) {
+    if (!a || !b) return false;
+    return a.kind === b.kind && (a.peer === b.peer) && (a.roomUid === b.roomUid);
+}
+
 async function loadChatThreads(quiet = false) {
     const list = $('chat-thread-list');
     if (!list) return;
     const threads = await api('api/chat/threads') || [];
     if (!Array.isArray(threads)) return;
 
-    // If no threads and not quiet, show empty state
     if (!threads.length && !quiet) {
         list.innerHTML = `<div class="chat-empty"><i class="ph ph-chat-circle-dots" style="font-size:24px;"></i><div>no conversations yet</div></div>`;
         return;
     }
     if (!threads.length) return;
 
-    list.innerHTML = threads.map(t => `
-        <div class="chat-thread ${chatActivePeer === t.peer ? 'active' : ''}" data-peer="${escapeHtml(t.peer)}">
-            <i class="ph ph-user-circle" style="font-size:16px;color:var(--accent2);flex-shrink:0;"></i>
-            <div style="flex:1;min-width:0;">
-                <div class="peer-name">${escapeHtml(t.peer)}</div>
-                <div class="thread-time">${formatRelTime(t.last_at)}</div>
-            </div>
-            ${t.unread ? `<span class="unread-badge">${t.unread}</span>` : ''}
-        </div>
-    `).join('');
+    list.innerHTML = threads.map(t => {
+        const isRoom = !!t.room_uid;
+        const desc = isRoom
+            ? { kind: 'room', roomUid: t.room_uid, label: t.name || t.room_uid }
+            : { kind: 'peer', peer: t.peer, label: t.peer };
+        const active = isSameActive(chatActive, desc);
+        const icon = isRoom ? 'ph-users-three' : 'ph-user-circle';
+        const tag  = isRoom ? 'room' : null;
+        const attrs = isRoom
+            ? `data-kind="room" data-room-uid="${escapeHtml(t.room_uid)}" data-label="${escapeHtml(desc.label)}"`
+            : `data-kind="peer" data-peer="${escapeHtml(t.peer)}"`;
+        return `
+            <div class="chat-thread ${active ? 'active' : ''}" ${attrs}>
+                <i class="ph ${icon}" style="font-size:16px;color:var(--accent2);flex-shrink:0;"></i>
+                <div style="flex:1;min-width:0;">
+                    <div class="peer-name">${escapeHtml(desc.label)}${tag ? ` <span style="font-family:var(--pixel);font-size:8px;color:var(--dim);text-transform:uppercase;letter-spacing:0.5px;margin-left:4px;">${tag}</span>` : ''}</div>
+                    <div class="thread-time">${escapeHtml(formatRelTime(t.last_at))}</div>
+                </div>
+                ${t.unread ? `<span class="unread-badge">${t.unread}</span>` : ''}
+            </div>`;
+    }).join('');
 
     list.querySelectorAll('.chat-thread').forEach(el => {
         el.addEventListener('click', () => {
-            chatActivePeer = el.dataset.peer;
+            if (el.dataset.kind === 'room') {
+                chatActive = { kind: 'room', roomUid: el.dataset.roomUid, label: el.dataset.label };
+            } else {
+                chatActive = { kind: 'peer', peer: el.dataset.peer, label: el.dataset.peer };
+            }
             loadChatThreads(true);
-            loadChatHistory(chatActivePeer);
+            loadChatHistory(chatActive);
             $('chat-input-bar')?.classList.remove('hidden');
-            $('chat-peer-name').textContent = chatActivePeer;
+            $('chat-peer-name').textContent = chatActive.label;
             $('chat-input')?.focus();
         });
     });
 }
 
-async function loadChatHistory(peer, quiet = false) {
+async function loadChatHistory(active, quiet = false) {
     const container = $('chat-messages');
-    if (!container) return;
-    const messages = await api('api/chat/history?peer=' + encodeURIComponent(peer)) || [];
+    if (!container || !active) return;
+    const qs = active.kind === 'room'
+        ? 'room_uid=' + encodeURIComponent(active.roomUid)
+        : 'peer=' + encodeURIComponent(active.peer);
+    const messages = await api('api/chat/history?' + qs) || [];
     if (!Array.isArray(messages)) return;
 
     const wasAtBottom = container.scrollTop + container.clientHeight >= container.scrollHeight - 20;
@@ -921,8 +948,13 @@ async function loadChatHistory(peer, quiet = false) {
         return;
     }
 
+    // Group rooms need the sender's name visible above each incoming
+    // message (there isn't one single peer — it could be anyone in the
+    // room). 1:1 stays unlabeled for a tighter look.
+    const showSender = active.kind === 'room';
     container.innerHTML = messages.map(m => `
         <div class="chat-msg ${m.mine ? 'mine' : 'theirs'}">
+            ${showSender && !m.mine ? `<div class="msg-from" style="font-family:var(--pixel);font-size:9px;color:var(--accent2);margin-bottom:2px;">${escapeHtml(m.from)}</div>` : ''}
             <div>${escapeHtml(m.body)}</div>
             <div class="msg-time">${formatChatTime(m.created_at)}${m.mine && m.seen ? ' <i class="ph ph-checks"></i>' : ''}</div>
         </div>
@@ -932,18 +964,20 @@ async function loadChatHistory(peer, quiet = false) {
         container.scrollTop = container.scrollHeight;
     }
 
-    // Refresh thread list to clear unread badges
     if (!quiet) loadChatThreads(true);
 }
 
 async function sendChatMessage() {
     const input = $('chat-input');
-    if (!input || !chatActivePeer) return;
+    if (!input || !chatActive) return;
     const body = input.value.trim();
     if (!body) return;
     input.value = '';
-    await api('api/chat/send', { method: 'POST', body: { body, recipient: chatActivePeer } });
-    loadChatHistory(chatActivePeer);
+    const payload = chatActive.kind === 'room'
+        ? { body, room_uid: chatActive.roomUid }
+        : { body, recipient: chatActive.peer };
+    await api('api/chat/send', { method: 'POST', body: payload });
+    loadChatHistory(chatActive);
     loadChatThreads(true);
 }