feat: live presence, delivery-tick sync, brand rollout, call fixes, desktop 0.1.3

Live presence (fixes stale in-call/status until refresh — impossible in apps):
- server broadcasts a user's status over the chat socket on connect/disconnect, call
  join/leave, and status change (chat.js broadcastPresence; signaling + routes hooks).
- client onPresence() updates the contact dot + open-chat header live.

Chat delivery ticks (#6): chat-list row now mirrors the thread (delivered→double grey,
read→blue) via a new 'with' field on the delivered relay + onChatRead/onChatDelivered.

Call fixes: no bogus 'host handed over' when a 1:1 call ends (leaveMeeting forced);
branded call-connecting + chat-thread loaders; header subtitle tracks live call state.

Notifications: web notify + sw.js use sender/group DP + brand icon (not old wordmark);
desktop shell drops Web Push so only the single native toast fires (#5).

Brand: master icon/splash/loaders wired everywhere (PWA/favicon/apple-touch/.ico),
branded login (blue + gold CTA), branded toasts (BZToast) on all pages, Electron splash.

Desktop: dev auto-targets localhost (packaged→prod); version 0.1.3 with new multi-size
icon; dropped unused node-notifier; removed home-mockup.html.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

server/chat.js

@@ -1,7 +1,8 @@
 // Chat presence + real-time delivery. A logged-in user opens a WebSocket and sends
 // `chat-hello`; signaling.js registers the socket here. Messages are persisted over HTTP
 // (routes.js) and pushed live to the recipient's sockets via pushToUser().
-const { chatClients } = require('./presence');
+const { chatClients, meetingRooms } = require('./presence');
+let _repos = null; const repos = () => (_repos || (_repos = require('./repos'))); // lazy: avoid a require cycle
 
 function register(userId, ws) {
   if (!chatClients.has(userId)) chatClients.set(userId, new Set());
@@ -28,4 +29,27 @@ function pushToUser(userId, obj) {
   for (const ws of s) { if (ws.readyState === 1) { try { ws.send(data); } catch (_) {} } }
 }
 
-module.exports = { register, unregister, isOnline, pushToUser };
+// --- Live presence -------------------------------------------------------------------------
+// A user's effective status (online / in-a-call / away / …) changes with no HTTP round-trip:
+// they connect or disconnect a socket, or join/leave a call. Without pushing that change, OTHER
+// users only see it after a full page reload — impossible in the desktop/mobile apps. So whenever
+// it changes we broadcast the user's fresh status to everyone else's sockets, and the client
+// updates that contact's dot/subtitle in place.
+function isInCall(userId) {
+  for (const [, peers] of meetingRooms) { for (const [, p] of peers) { if (p.ws && p.ws._meetingUserId === userId) return true; } }
+  return false;
+}
+function effectiveStatus(userId) {
+  if (isInCall(userId)) return 'incall';           // derived (overrides the stored status)
+  try { const u = repos().users.byId(userId); return (u && u.status) || 'active'; } catch (_) { return 'active'; }
+}
+function broadcastPresence(userId) {
+  if (!userId) return;
+  const payload = JSON.stringify({ type: 'presence', userId, online: isOnline(userId), status: effectiveStatus(userId) });
+  for (const [uid, set] of chatClients) {
+    if (uid === userId) continue;                  // no need to tell someone about their own status
+    for (const ws of set) { if (ws.readyState === 1) { try { ws.send(payload); } catch (_) {} } }
+  }
+}
+
+module.exports = { register, unregister, isOnline, pushToUser, broadcastPresence };

server/public/bizconnect-toast.css

@@ -0,0 +1,18 @@
+/* Biz Connect — branded notification toast. BZToast.success('…') / .error / .message / .info */
+.bzt-wrap{position:fixed;top:16px;right:16px;z-index:2147483600;display:flex;flex-direction:column;gap:10px;max-width:min(380px,92vw)}
+@supports(top:env(safe-area-inset-top)){.bzt-wrap{top:calc(16px + env(safe-area-inset-top));right:calc(16px + env(safe-area-inset-right))}}
+.bzt{display:flex;align-items:flex-start;gap:12px;background:#fff;color:#1f2430;border-radius:14px;padding:12px 14px;
+  box-shadow:0 12px 30px rgba(16,26,53,.20);border-left:5px solid #1F3B73;
+  transform:translateX(120%);opacity:0;transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .3s}
+.bzt.bzt-in{transform:translateX(0);opacity:1}
+.bzt.success{border-left-color:#16a34a}.bzt.error{border-left-color:#b91c1c}
+.bzt-badge{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#1F3B73}
+.bzt.success .bzt-badge{background:#16a34a}.bzt.error .bzt-badge{background:#b91c1c}
+.bzt-badge svg{width:20px;height:20px}
+.bzt-body{flex:1;min-width:0;padding-top:1px}
+.bzt-title{font:700 13.5px/1.3 'Segoe UI',system-ui,sans-serif;color:#1F3B73;margin:0 0 1px}
+.bzt.success .bzt-title{color:#15803d}.bzt.error .bzt-title{color:#b91c1c}
+.bzt-msg{font:500 13px/1.4 'Segoe UI',system-ui,sans-serif;color:#3a4152;overflow-wrap:anywhere}
+.bzt-x{flex:none;background:none;border:none;color:#9aa3b2;cursor:pointer;font-size:18px;line-height:1;padding:2px 4px}
+.bzt-x:hover{color:#1f2430}
+@media(prefers-reduced-motion:reduce){.bzt{transition:opacity .2s}}

server/public/bizconnect-toast.js

@@ -0,0 +1,29 @@
+/* Biz Connect toast API. Requires bizconnect-toast.css.
+   BZToast.success('Saved'); BZToast.error('Connection lost'); BZToast.message('Hi', {title:'Ravi'}); */
+window.BZToast=(function(){
+  var wrap=null;
+  var ICON={
+    message:'<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>',
+    info:'<svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="2.2"/><path d="M12 11v5M12 8h.01" stroke="#fff" stroke-width="2.4" stroke-linecap="round"/></svg>',
+    success:'<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>',
+    error:'<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.6" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>'
+  };
+  function esc(s){return String(s==null?'':s).replace(/[&<>"]/g,function(c){return{'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c];});}
+  function ensure(){ if(wrap) return wrap; wrap=document.createElement('div'); wrap.className='bzt-wrap'; document.body.appendChild(wrap); return wrap; }
+  function show(message,opts){
+    opts=opts||{}; var type=opts.type||'message'; var w=ensure();
+    var t=document.createElement('div'); t.className='bzt '+type;
+    t.innerHTML='<div class="bzt-badge">'+(ICON[type]||ICON.message)+'</div><div class="bzt-body">'
+      +(opts.title?'<div class="bzt-title">'+esc(opts.title)+'</div>':'')
+      +'<div class="bzt-msg">'+esc(message)+'</div></div><button class="bzt-x" aria-label="Dismiss">&times;</button>';
+    w.appendChild(t); requestAnimationFrame(function(){ t.classList.add('bzt-in'); });
+    var dur=(opts.duration==null?4000:opts.duration), timer;
+    function close(){ t.classList.remove('bzt-in'); setTimeout(function(){ if(t.parentNode) t.parentNode.removeChild(t); },320); clearTimeout(timer); }
+    t.querySelector('.bzt-x').onclick=close; if(dur>0) timer=setTimeout(close,dur); return close;
+  }
+  return { show:show,
+    message:function(m,o){o=o||{};o.type='message';return show(m,o);},
+    success:function(m,o){o=o||{};o.type='success';return show(m,o);},
+    error:function(m,o){o=o||{};o.type='error';return show(m,o);},
+    info:function(m,o){o=o||{};o.type='info';return show(m,o);} };
+})();

server/public/connect.html

@@ -4,6 +4,12 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Biz Connect — Agent Console</title>
+<meta name="theme-color" content="#1F3B73">
+<link rel="icon" href="/favicon.ico?v=3" sizes="any">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png?v=3">
+<link rel="apple-touch-icon" href="/apple-touch-icon-180.png?v=3">
+<link rel="stylesheet" href="/bizconnect-toast.css">
+<script src="/bizconnect-toast.js"></script>
 <style>
   :root{ --brand:#FFC708; --brand-d:#E0AC00; --blue:#1F3B73; --blue-d:#16294f; --ink:#1f2430; --muted:#6b7280; --bg:#f6f8fb; --card:#fff; --line:#e6e9ef; }
   *{box-sizing:border-box;}
@@ -165,7 +171,7 @@ async function startConnect(){
   const ticket=document.getElementById('ticketInput').value.trim();
   const code=document.getElementById('codeInput').value.trim();
   if(!/^\d{6}$/.test(code)){ statusEl.textContent='Please enter the 6-digit code.'; return; }
-  statusEl.textContent='Connecting…';
+  statusEl.innerHTML='<img src="/loaders/loader-orbit.svg" width="20" height="20" style="vertical-align:-5px;margin-right:7px" alt="">Connecting…';
   ws.send(JSON.stringify({type:'code-connect',code,ticket}));
 }
 
@@ -173,7 +179,7 @@ function connectWS(){
   ws=new WebSocket((location.protocol==='https:'?'wss://':'ws://')+location.host+'/ws');
   ws.onmessage=async(e)=>{const m=JSON.parse(e.data);const statusEl=document.getElementById('status');switch(m.type){
     case 'code-pending': sessionId=m.sessionId; renderWaiting(); setupPeer(); break;
-    case 'session-ready': if(statusEl)statusEl.textContent='Allowed — connecting…'; break;
+    case 'session-ready': if(statusEl)statusEl.innerHTML='<img src="/loaders/loader-orbit.svg" width="20" height="20" style="vertical-align:-5px;margin-right:7px" alt="">Allowed — connecting…'; break;
     case 'offer': await pc.setRemoteDescription(new RTCSessionDescription(m.sdp));
       // Acquire the agent mic once; on renegotiation (e.g. customer unmutes) just answer.
       if(!window.__mic){ try{ const mic=await navigator.mediaDevices.getUserMedia({audio:true}); window.__mic=mic; mic.getAudioTracks().forEach(t=>pc.addTrack(t,mic)); }catch(e){} }
@@ -346,8 +352,9 @@ function buildChatPanel(){
 }
 function toggleChat(){const p=document.getElementById('chatPanel');if(!p)return;chatOpen=!chatOpen;p.style.display=chatOpen?'flex':'none';const b=document.getElementById('chatBtn');if(chatOpen){b&&(b.style.background='#475569');const i=document.getElementById('chatInput');if(i)setTimeout(()=>i.focus(),50);}}
 function addChat(msg){const c=document.getElementById('chatMsgs');if(!c)return;const mine=msg.from==='__self';const w=document.createElement('div');w.style.cssText='max-width:85%;padding:.4rem .6rem;border-radius:10px;'+(mine?'align-self:flex-end;background:#EAF0FB;color:#16294f':'align-self:flex-start;background:#f1f5f9;color:#1f2430');w.innerHTML='<div style="font-size:.7rem;opacity:.65;margin-bottom:2px">'+esc(msg.name||'')+'</div>'+esc(msg.text);c.appendChild(w);c.scrollTop=c.scrollHeight;if(!mine)notifyMsg(msg);}
-function notifyMsg(msg){const b=document.getElementById('chatBtn');if(b&&!chatOpen){b.style.background='#FFC708';b.style.color='#1f2430';}toast((msg.name||'Message')+': '+msg.text);try{beep();}catch(_){}if('Notification' in window && Notification.permission==='granted' && (document.hidden||!chatOpen)){try{new Notification('New message from '+(msg.name||'support'),{body:msg.text});}catch(_){}}}
-function toast(text){let t=document.getElementById('msgToast');if(!t){t=document.createElement('div');t.id='msgToast';t.style.cssText='position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:2147483600;background:#16a34a;color:#fff;padding:.7rem 1.1rem;border-radius:12px;box-shadow:0 10px 26px rgba(0,0,0,.35);font-size:.92rem;font-weight:600;border:2px solid #0c7a36;max-width:82vw;transition:opacity .4s';document.body.appendChild(t);}t.innerHTML='\ud83d\udcac '+text;t.style.opacity='1';clearTimeout(window.__toastT);window.__toastT=setTimeout(()=>{t.style.opacity='0';},2800);}
+function notifyMsg(msg){const b=document.getElementById('chatBtn');if(b&&!chatOpen){b.style.background='#FFC708';b.style.color='#1f2430';}if(window.BZToast)BZToast.message(msg.text,{title:(msg.name||'Message')});try{beep();}catch(_){}if('Notification' in window && Notification.permission==='granted' && (document.hidden||!chatOpen)){try{new Notification('New message from '+(msg.name||'support'),{body:msg.text});}catch(_){}}}
+// Branded toast (BZToast, /bizconnect-toast.js). Classify by wording so errors show red.
+function toast(text){var s=String(text==null?'':text);if(!window.BZToast)return;if(/could ?n.t|cannot|failed|invalid|error|denied|expired|not found|please enter/i.test(s))return BZToast.error(s);return BZToast.message(s);}
 let __ac=null;
 function ensureAudio(){try{__ac=__ac||new (window.AudioContext||window.webkitAudioContext)();if(__ac.state==='suspended')__ac.resume();}catch(_){}}
 function beep(){ensureAudio();if(!__ac)return;try{const o=__ac.createOscillator(),g=__ac.createGain();o.type='sine';o.connect(g);g.connect(__ac.destination);const t0=__ac.currentTime;o.frequency.setValueAtTime(880,t0);o.frequency.setValueAtTime(660,t0+0.09);g.gain.setValueAtTime(0.0001,t0);g.gain.exponentialRampToValueAtTime(0.12,t0+0.02);g.gain.exponentialRampToValueAtTime(0.0001,t0+0.22);o.start(t0);o.stop(t0+0.24);}catch(_){}}

server/public/dashboard.html

@@ -4,6 +4,12 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Biz Connect — Dashboard</title>
+<meta name="theme-color" content="#1F3B73">
+<link rel="icon" href="/favicon.ico?v=3" sizes="any">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png?v=3">
+<link rel="apple-touch-icon" href="/apple-touch-icon-180.png?v=3">
+<link rel="stylesheet" href="/bizconnect-toast.css">
+<script src="/bizconnect-toast.js"></script>
 <style>
   :root{ --brand:#FFC708; --brand-d:#E0AC00; --blue:#1F3B73; --blue-d:#16294f; --blue-soft:#EAF0FB; --ink:#1f2430; --muted:#6b7280; --bg:#f6f8fb; --card:#fff; --line:#e6e9ef; --green:#16a34a; --red:#b91c1c; }
   *{box-sizing:border-box;}

server/public/home-mockup.html

@@ -1,277 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>BizGaze Connect — Home</title>
-<style>
-  :root{ --brand:#FFC708; --brand-d:#E0AC00; --blue:#1F3B73; --blue-d:#16294f; --blue-soft:#EAF0FB; --ink:#1f2430; --muted:#6b7280; --bg:#f6f8fb; --card:#fff; --line:#e6e9ef; --green:#16a34a; --red:#b91c1c; }
-  *{box-sizing:border-box;}
-  html,body{height:100%;}
-  body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--ink);margin:0;display:flex;flex-direction:column;height:100vh;overflow:hidden;}
-
-  /* ---- Top bar (matches console.html) ---- */
-  header{background:var(--blue);padding:.75rem 1.5rem;display:flex;justify-content:space-between;align-items:center;flex:0 0 auto;}
-  .brandrow{display:flex;align-items:center;gap:.6rem;cursor:pointer;}
-  .logo{width:30px;height:30px;border-radius:8px;background:var(--brand);display:grid;place-items:center;font-weight:800;color:var(--blue);}
-  .brand{font-weight:700;color:#fff;font-size:1.05rem;} .brand span.y{color:var(--brand);font-weight:700;}
-  .brand span.tag{color:#8ea3cf;font-weight:500;font-size:.85rem;}
-
-  /* ---- Profile dropdown (from console.html) ---- */
-  .profile{position:relative}
-  .profile .pbtn{display:flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.14);color:#fff;border:1px solid #46598c;border-radius:10px;padding:.4rem .85rem .4rem .5rem;font-weight:600;font-size:.88rem;cursor:pointer}
-  .profile .pbtn:hover{background:rgba(255,255,255,.24)}
-  .profile .pbtn .pav{width:28px;height:28px;border-radius:50%;background:var(--brand);color:var(--blue);display:grid;place-items:center;font-weight:800;font-size:.78rem}
-  .profile .pmenu{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid #e6e9ef;border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.18);min-width:210px;overflow:hidden;z-index:5000;display:none}
-  .profile .pmenu.open{display:block}
-  .profile .pmenu .phead{padding:.7rem .9rem;border-bottom:1px solid #eef1f6}
-  .profile .pmenu .phead .n{font-weight:700;font-size:.9rem}
-  .profile .pmenu .phead .e{color:var(--muted);font-size:.78rem}
-  .profile .pmenu a{display:block;padding:.6rem .9rem;color:#1f2430;text-decoration:none;font-size:.9rem;cursor:pointer}
-  .profile .pmenu a:hover{background:#f1f5f9}
-  .profile .pmenu a.danger{color:#b91c1c;border-top:1px solid #eef1f6}
-
-  /* ---- Shell ---- */
-  .shell{flex:1 1 auto;display:flex;min-height:0;}
-
-  /* ---- Sidebar ---- */
-  .sidebar{width:320px;flex:0 0 320px;background:var(--card);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;}
-  .side-head{padding:1rem 1rem .75rem;border-bottom:1px solid var(--line);}
-  .side-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem;}
-  .side-title h2{font-size:.95rem;margin:0;color:var(--blue);}
-  .newchat{width:30px;height:30px;border-radius:9px;border:none;background:var(--blue-soft);color:var(--blue);font-size:1.2rem;line-height:1;cursor:pointer;font-weight:700;display:grid;place-items:center;padding:0;}
-  .newchat:hover{background:#dbe6fb;}
-  .search{position:relative;}
-  .search svg{position:absolute;left:.65rem;top:50%;transform:translateY(-50%);color:var(--muted);}
-  .search input{width:100%;padding:.55rem .7rem .55rem 2.1rem;border-radius:10px;border:2px solid var(--line);background:#fbfcfe;color:var(--ink);font-size:.9rem;}
-  .search input:focus{outline:none;border-color:var(--brand);}
-
-  .chatlist{overflow-y:auto;flex:1 1 auto;padding:.4rem;}
-  .chat-row{display:flex;gap:.7rem;align-items:center;padding:.6rem .65rem;border-radius:12px;cursor:pointer;position:relative;}
-  .chat-row:hover{background:#f3f6fb;}
-  .chat-row.active{background:var(--blue-soft);}
-  .chat-row.active::before{content:"";position:absolute;left:0;top:.7rem;bottom:.7rem;width:3px;border-radius:3px;background:var(--blue);}
-  .avatar{width:42px;height:42px;flex:0 0 42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.92rem;position:relative;}
-  .avatar .dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;border:2px solid #fff;background:#cbd2dd;}
-  .avatar .dot.on{background:var(--green);}
-  .chat-main{flex:1 1 auto;min-width:0;}
-  .chat-top{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;}
-  .chat-name{font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
-  .chat-time{color:var(--muted);font-size:.72rem;flex:0 0 auto;}
-  .chat-bottom{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-top:.15rem;}
-  .chat-prev{color:var(--muted);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;}
-  .chat-row.unread .chat-prev{color:var(--ink);font-weight:500;}
-  .chat-row.unread .chat-name{font-weight:700;}
-  .badge{flex:0 0 auto;background:var(--blue);color:#fff;font-size:.7rem;font-weight:700;min-width:19px;height:19px;border-radius:99px;padding:0 .35rem;display:grid;place-items:center;}
-  .no-results{padding:2rem 1rem;text-align:center;color:var(--muted);font-size:.85rem;}
-
-  /* ---- Main content ---- */
-  .content{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;min-height:0;}
-  .tabs{display:flex;gap:.4rem;padding:1rem 1.5rem 0;border-bottom:1px solid var(--line);background:var(--card);}
-  .tabs button{background:transparent;color:var(--muted);font-weight:600;font-size:.92rem;border:none;border-bottom:3px solid transparent;padding:.6rem .9rem .8rem;cursor:pointer;display:flex;align-items:center;gap:.45rem;border-radius:8px 8px 0 0;}
-  .tabs button:hover{color:var(--blue);background:#f6f8fb;}
-  .tabs button.active{color:var(--blue);border-bottom-color:var(--brand);}
-  .panel-wrap{flex:1 1 auto;overflow-y:auto;padding:2rem 1.5rem;display:flex;}
-  .panel{display:none;margin:auto;width:100%;max-width:560px;}
-  .panel.active{display:block;}
-
-  .card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:2.2rem;box-shadow:0 6px 18px rgba(20,30,60,.05);text-align:center;}
-  .feat-icon{width:72px;height:72px;border-radius:20px;display:grid;place-items:center;margin:0 auto 1.2rem;}
-  .feat-icon.blue{background:var(--blue-soft);color:var(--blue);}
-  .feat-icon.yellow{background:#fff6d8;color:var(--brand-d);}
-  .card h1{font-size:1.45rem;margin:0 0 .5rem;color:var(--blue);}
-  .card p{color:var(--muted);font-size:.95rem;line-height:1.55;margin:0 auto 1.6rem;max-width:400px;}
-  .btn{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;padding:.8rem 1.6rem;background:var(--brand);color:var(--ink);border:none;border-radius:11px;font-weight:700;font-size:.95rem;cursor:pointer;}
-  .btn:hover{background:var(--brand-d);}
-  .pill-soon{display:inline-block;background:#fff6d8;color:var(--brand-d);font-size:.74rem;font-weight:700;padding:.25rem .7rem;border-radius:99px;letter-spacing:.03em;margin-bottom:1.2rem;}
-  .hint{margin-top:1.4rem;font-size:.8rem;color:var(--muted);}
-
-  @media (max-width:760px){
-    .sidebar{width:108px;flex:0 0 108px;}
-    .side-title h2,.search,.chat-main{display:none;}
-    .chat-row{justify-content:center;}
-    .side-head{padding:.8rem .5rem;}
-  }
-</style>
-</head>
-<body>
-<header>
-  <div class="brandrow" id="brandrow">
-    <img src="/logo.png" alt="" style="height:46px;width:auto;max-width:190px;border-radius:8px;object-fit:contain;background:#fff;padding:5px 12px;image-rendering:-webkit-optimize-contrast" onerror="this.replaceWith(Object.assign(document.createElement('div'),{className:'logo',textContent:'B'}))">
-    <div class="brand">BizGaze <span class="y">Connect</span> <span class="tag">· Home</span></div>
-  </div>
-  <div id="hdrRight"></div>
-</header>
-
-<div class="shell">
-  <!-- ---------- Sidebar ---------- -->
-  <aside class="sidebar">
-    <div class="side-head">
-      <div class="side-title">
-        <h2>Chats</h2>
-        <button class="newchat" title="New chat" aria-label="New chat">+</button>
-      </div>
-      <div class="search">
-        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
-        <input id="chatSearch" placeholder="Search chats" autocomplete="off">
-      </div>
-    </div>
-    <div class="chatlist" id="chatlist"></div>
-  </aside>
-
-  <!-- ---------- Main ---------- -->
-  <section class="content">
-    <div class="tabs">
-      <button data-tab="meeting" class="active">
-        <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
-        Meeting
-      </button>
-      <button data-tab="share">
-        <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
-        Share Screen
-      </button>
-      <button data-tab="connect">
-        <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.55a11 11 0 0 1 14.08 0"/><path d="M1.42 9a16 16 0 0 1 21.16 0"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><line x1="12" y1="20" x2="12.01" y2="20"/></svg>
-        Connect Screen
-      </button>
-    </div>
-
-    <div class="panel-wrap">
-      <!-- Meeting -->
-      <div class="panel active" data-panel="meeting">
-        <div class="card">
-          <div class="feat-icon yellow">
-            <svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
-          </div>
-          <span class="pill-soon">COMING SOON</span>
-          <h1>Meetings are on the way</h1>
-          <p>Soon you'll be able to host multi-party video meetings with your BizGaze team and customers — right here, no install needed. We're putting on the finishing touches.</p>
-          <button class="btn" id="notifyBtn">🔔 Notify me when it's ready</button>
-          <div class="hint">In the meantime, use <b>Share Screen</b> or <b>Connect Screen</b> to start a session.</div>
-        </div>
-      </div>
-
-      <!-- Share Screen -->
-      <div class="panel" data-panel="share">
-        <div class="card">
-          <div class="feat-icon blue">
-            <svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
-          </div>
-          <h1>Share your screen</h1>
-          <p>Let a teammate or customer see your screen instantly. You'll get a 6-digit code to share — they enter it to connect. No download, works right in the browser.</p>
-          <a class="btn" href="/share">Start sharing →</a>
-          <div class="hint">Desktop browsers only — phones can't share their screen yet.</div>
-        </div>
-      </div>
-
-      <!-- Connect Screen -->
-      <div class="panel" data-panel="connect">
-        <div class="card">
-          <div class="feat-icon blue">
-            <svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.55a11 11 0 0 1 14.08 0"/><path d="M1.42 9a16 16 0 0 1 21.16 0"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><line x1="12" y1="20" x2="12.01" y2="20"/></svg>
-          </div>
-          <h1>Connect to a screen</h1>
-          <p>Helping someone out? Enter the 6-digit code they give you to view their screen and provide live support — with two-way voice and chat built in.</p>
-          <a class="btn" href="/connect">Open connect page →</a>
-          <div class="hint">The other person taps <b>Allow</b> before you can see anything.</div>
-        </div>
-      </div>
-    </div>
-  </section>
-</div>
-
-<script>
-// ---------- Helpers (reused patterns from console.html) ----------
-function pEsc(s){return String(s==null?'':s).replace(/[&<>"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));}
-function initials(name){return name.trim().split(/\s+/).slice(0,2).map(w=>w[0]).join('').toUpperCase();}
-
-// Stable avatar color from a name
-const AV_COLORS=['#1F3B73','#2563eb','#0e7490','#7c3aed','#be185d','#b45309','#15803d','#9d174d'];
-function avColor(name){let h=0;for(const c of name)h=(h*31+c.charCodeAt(0))>>>0;return AV_COLORS[h%AV_COLORS.length];}
-
-// Profile dropdown (mirrors profileHTML()/wireProfile() from console.html)
-const SAMPLE_USER={name:'Sravan Mareddy',email:'sravanm@bizgaze.com',role:'admin'};
-function profileHTML(u){
-  return '<div class="profile"><button class="pbtn" id="pbtn">'
-    + '<span class="pav">'+pEsc(initials(u.name))+'</span>'
-    + pEsc(u.name)+' <span style="font-size:.65rem">&#9662;</span></button>'
-    + '<div class="pmenu" id="pmenu">'
-    + '<div class="phead"><div class="n">'+pEsc(u.name)+'</div><div class="e">'+pEsc(u.email)+' · '+pEsc(u.role)+'</div></div>'
-    + '<a href="/console">Console / Dashboard</a>'
-    + '<a href="#">Settings</a>'
-    + '<a class="danger" id="plogout">Logout</a>'
-    + '</div></div>';
-}
-function wireProfile(){
-  const btn=document.getElementById('pbtn'),menu=document.getElementById('pmenu');
-  if(!btn)return;
-  btn.onclick=(e)=>{e.stopPropagation();menu.classList.toggle('open');};
-  document.addEventListener('click',()=>menu.classList.remove('open'));
-  const lo=document.getElementById('plogout');
-  if(lo)lo.onclick=(e)=>{e.preventDefault();alert('Mockup — logout would sign you out and return to /.');};
-}
-document.getElementById('hdrRight').innerHTML=profileHTML(SAMPLE_USER);
-wireProfile();
-document.getElementById('brandrow').onclick=()=>{location.href='/';};
-
-// ---------- Mock chat data ----------
-const CHATS=[
-  {name:'Anwi Systems',     msg:"Perfect, the screen share worked great. Thanks!", time:'9:42 AM', unread:0, online:true,  active:true},
-  {name:'Priya Sharma',     msg:"Can you connect to my screen at 3pm?",           time:'9:15 AM', unread:2, online:true},
-  {name:'GAPL Group',       msg:"You: I've shared the 6-digit code with you",     time:'Yesterday', unread:0, online:false},
-  {name:'Battery Doctors',  msg:"The invoice module is throwing an error again",   time:'Yesterday', unread:5, online:true},
-  {name:'Ramesh Marketing', msg:"You: Let me know once you're at your desk",       time:'Mon',     unread:0, online:false},
-  {name:'STC Support',      msg:"Typing…",                                         time:'Mon',     unread:1, online:true},
-  {name:'Samruddhi Traders',msg:"Thanks for the help earlier 👍",                  time:'Sun',     unread:0, online:false},
-  {name:'DMS 3.0 Team',     msg:"You: Closing the ticket, all resolved",           time:'Fri',     unread:0, online:false},
-];
-
-const listEl=document.getElementById('chatlist');
-function chatRowHTML(c,i){
-  const cls=['chat-row'];
-  if(c.active)cls.push('active');
-  if(c.unread>0)cls.push('unread');
-  return '<div class="'+cls.join(' ')+'" data-i="'+i+'">'
-    + '<div class="avatar" style="background:'+avColor(c.name)+'">'+pEsc(initials(c.name))
-    +   '<span class="dot'+(c.online?' on':'')+'"></span></div>'
-    + '<div class="chat-main">'
-    +   '<div class="chat-top"><span class="chat-name">'+pEsc(c.name)+'</span><span class="chat-time">'+pEsc(c.time)+'</span></div>'
-    +   '<div class="chat-bottom"><span class="chat-prev">'+pEsc(c.msg)+'</span>'
-    +     (c.unread>0?'<span class="badge">'+c.unread+'</span>':'')+'</div>'
-    + '</div></div>';
-}
-function renderChats(filter){
-  const q=(filter||'').trim().toLowerCase();
-  const rows=CHATS.map((c,i)=>({c,i})).filter(({c})=>!q||c.name.toLowerCase().includes(q)||c.msg.toLowerCase().includes(q));
-  listEl.innerHTML = rows.length
-    ? rows.map(({c,i})=>chatRowHTML(c,i)).join('')
-    : '<div class="no-results">No chats match “'+pEsc(filter)+'”.</div>';
-  listEl.querySelectorAll('.chat-row').forEach(row=>{
-    row.onclick=()=>{
-      CHATS.forEach(c=>c.active=false);
-      CHATS[+row.dataset.i].active=true;
-      CHATS[+row.dataset.i].unread=0;
-      renderChats(document.getElementById('chatSearch').value);
-    };
-  });
-}
-renderChats('');
-document.getElementById('chatSearch').addEventListener('input',e=>renderChats(e.target.value));
-
-// ---------- Tab switching ----------
-const tabBtns=document.querySelectorAll('.tabs button');
-const panels=document.querySelectorAll('.panel');
-tabBtns.forEach(btn=>{
-  btn.onclick=()=>{
-    const tab=btn.dataset.tab;
-    tabBtns.forEach(b=>b.classList.toggle('active',b===btn));
-    panels.forEach(p=>p.classList.toggle('active',p.dataset.panel===tab));
-  };
-});
-
-// Mockup-only stubs
-document.querySelector('.newchat').onclick=()=>alert('Mockup — “New chat” would open the contact picker.');
-document.getElementById('notifyBtn').onclick=()=>alert("Thanks! We'll let you know when Meetings launches.");
-</script>
-</body>
-</html>

server/public/home.html

@@ -7,9 +7,11 @@
 <!-- PWA: installable on Android & iOS ("Add to Home Screen"); also enables iOS web push -->
 <link rel="manifest" href="/manifest.json">
 <meta name="theme-color" content="#1F3B73">
+<link rel="icon" href="/favicon.ico?v=3" sizes="any">
 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png?v=3">
-<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png?v=3">
-<link rel="apple-touch-icon" href="/apple-touch-icon.png?v=3">
+<link rel="apple-touch-icon" href="/apple-touch-icon-180.png?v=3">
+<link rel="stylesheet" href="/bizconnect-toast.css">
+<script src="/bizconnect-toast.js"></script>
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
@@ -645,10 +647,18 @@
   .modal-actions .gobtn{flex:1;border:none;border-radius:10px;padding:.6rem;font-weight:700;cursor:pointer;}
 
   /* ---- Login (shown on /home when logged out) ---- */
-  .authwrap{flex:1 1 auto;display:none;align-items:center;justify-content:center;padding:1.5rem;min-height:0;}
-  .authcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:2rem;max-width:400px;width:100%;box-shadow:0 10px 30px rgba(20,30,60,.08);}
-  .authcard h1{font-size:1.3rem;color:var(--blue);margin:0 0 .3rem;text-align:center;}
+  .authwrap{flex:1 1 auto;display:none;align-items:center;justify-content:center;padding:1.5rem;min-height:0;
+    background:radial-gradient(1200px 600px at 50% -10%, #24437f 0%, #1F3B73 42%, #16294F 100%);}
+  .authcard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:2rem 2rem 1.7rem;max-width:400px;width:100%;box-shadow:0 24px 60px rgba(9,17,38,.38);}
+  .authcard .auth-brand{display:flex;flex-direction:column;align-items:center;gap:.55rem;margin-bottom:1rem;}
+  .authcard .auth-brand img{width:66px;height:66px;border-radius:17px;box-shadow:0 10px 24px rgba(31,59,115,.30);}
+  .authcard .auth-brand .wm{font-size:1.15rem;font-weight:800;color:var(--blue);letter-spacing:.2px;}
+  .authcard .auth-brand .wm b{color:var(--brand-d);font-weight:800;}
+  .authcard h1{font-size:1.12rem;color:var(--blue);margin:0 0 .3rem;text-align:center;}
   .authcard .sub{color:var(--muted);font-size:.9rem;text-align:center;margin-bottom:1.2rem;}
+  /* Blue card + gold CTA so the sign-in screen carries BOTH brand colours (never mono-blue). */
+  .authcard .gobtn{background:var(--brand);color:var(--blue-d);}
+  .authcard .gobtn:hover{filter:brightness(.95);}
   .authtabs{display:flex;gap:.5rem;margin-bottom:1.1rem;}
   .authtabs button{flex:1;background:#eef1f6;color:var(--muted);font-weight:600;border:none;border-radius:9px;padding:.5rem;cursor:pointer;font-size:.9rem;}
   .authtabs button.active{background:var(--blue);color:#fff;}
@@ -667,11 +677,14 @@
   .hidden{display:none;}
 
   /* ---- Loading / toast ---- */
-  .loading{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:9000;color:var(--muted);font-size:.9rem;}
-  .loading .ld-inner{display:flex;flex-direction:column;align-items:center;gap:.9rem;}
-  .loading .ld-inner img{width:64px;height:64px;}
-  .toast{position:fixed;left:50%;bottom:1.6rem;transform:translateX(-50%) translateY(1rem);background:var(--blue);color:#fff;padding:.7rem 1.2rem;border-radius:10px;font-size:.88rem;box-shadow:0 10px 28px rgba(0,0,0,.22);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:9500;}
-  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
+  .loading{position:fixed;inset:0;display:grid;place-items:center;background:#1F3B73;z-index:9000;color:rgba(255,255,255,.82);font-size:.9rem;}
+  .loading .ld-inner{display:flex;flex-direction:column;align-items:center;gap:1rem;}
+  .loading .ld-inner img{width:72px;height:72px;}
+  /* Chat thread loading (light pane) and call-connecting (dark stage) — branded, centered. */
+  .thread-loading{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;color:var(--muted);font-size:.86rem;}
+  .call-connecting{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:#16294F;color:rgba(255,255,255,.82);font-size:.95rem;}
+  .call-connecting .cc-txt{letter-spacing:.2px;}
+  /* in-app toasts now render via /bizconnect-toast.css (BZToast) */
 
   /* Hamburger menu button (header) */
   .navtoggle{background:transparent;border:none;color:#fff;cursor:pointer;display:grid;place-items:center;width:38px;height:38px;border-radius:9px;}
@@ -740,11 +753,11 @@
 <body>
 <script src="/icons.js?v=4"></script>
 <script src="https://cdn.jsdelivr.net/npm/@twemoji/api@15.1.0/dist/twemoji.min.js" crossorigin="anonymous"></script>
-<script>window.__BUILD='2026-07-02-batch26';console.log('%cBiz Connect','color:#1F3B73;font-weight:bold','build '+window.__BUILD);
+<script>window.__BUILD='2026-07-02-batch32';console.log('%cBiz Connect','color:#1F3B73;font-weight:bold','build '+window.__BUILD);
 // Render modern (Twemoji) emojis in place of the OS's flat ones. No-op if the CDN didn't load
 // (emojis stay as plain Unicode). (#5)
 function twemojify(el){ try{ if(el && window.twemoji) window.twemoji.parse(el, { folder:'svg', ext:'.svg' }); }catch(_){} }</script>
-<div class="loading" id="loading"><div class="ld-inner"><img src="/loader-orbit.svg" alt="" width="64" height="64"><span>Loading…</span></div></div>
+<div class="loading" id="loading"><div class="ld-inner"><img src="/loaders/loader-orbit-dark.svg" alt="" width="72" height="72"><span>Loading…</span></div></div>
 
 <header>
   <div class="brandrow">
@@ -815,7 +828,6 @@ function twemojify(el){ try{ if(el && window.twemoji) window.twemoji.parse(el, {
 
 <div class="authwrap" id="authwrap"></div>
 
-<div class="toast" id="toast"></div>
 
 <script>
 // ---------- Helpers ----------
@@ -832,8 +844,16 @@ function firstName(name){return String(name||'').trim().split(/\s+/)[0]||'there'
 const AV_COLORS=['#dbeafe','#e0e7ff','#dcfce7','#cffafe','#fae8ff','#fce7f3','#fee2e2','#fef3c7','#ecfccb','#fde4cf'];
 function avColor(name){let h=0;for(const c of String(name))h=(h*31+c.charCodeAt(0))>>>0;return AV_COLORS[h%AV_COLORS.length];}
 
-let toastTimer=null;
-function toast(msg){const t=document.getElementById('toast');t.textContent=msg;t.classList.add('show');clearTimeout(toastTimer);toastTimer=setTimeout(()=>t.classList.remove('show'),2600);}
+// All in-app toasts route through the branded BZToast (bizconnect-toast.js). We keep the single
+// toast(msg) entry point so every existing call site is unchanged, and classify by wording so
+// errors/successes get the right colour+icon; everything else shows as a neutral message.
+function toast(msg){
+  var s=String(msg==null?'':msg);
+  if(!window.BZToast) return; // loaded synchronously in <head>
+  if(/could ?n.t|cannot|can.t|failed|too large|invalid|error|denied|lost|blocked|not registered|required|need|no result|already/i.test(s)) return BZToast.error(s);
+  if(/renamed|updated|enabled|added|saved|created|invited|removed|left the|muted|photo updated|now an admin|no longer|success/i.test(s)) return BZToast.success(s);
+  return BZToast.message(s);
+}
 
 // ---------- Profile dropdown (mirrors profileHTML()/wireProfile() from console.html) ----------
 function profileHTML(u){
@@ -1180,9 +1200,12 @@ function welcomeHTML(){
     + '</div></div>';
 }
 function wireWelcome(){ document.querySelectorAll('#chatPanel .wcard').forEach(card=>{ card.onclick=()=>switchTab(card.dataset.go); }); }
+// A DM's subtitle tracks the LIVE call state (pushed on call start AND end) so it can't get stuck
+// on "In a call" after the call ends — unlike it.status, which is only derived at conversation load.
+function dmSubLabel(it){ return (it&&it.callActive)?'In a call':statusLabel(it); }
 function convoShellHTML(it){
   const isG=it.kind==='group';
-  const sub=it.self?'Message yourself':(isG?((it.members||0)+' members'):statusLabel(it));
+  const sub=it.self?'Message yourself':(isG?((it.members||0)+' members'):dmSubLabel(it));
   return '<div class="convo">'
     + '<div class="convo-head">'
     +   '<button class="convo-back" id="convoBack" title="Back (Esc)" aria-label="Back">'+ic('arrowLeft',18)+'</button>'
@@ -1385,7 +1408,11 @@ function onChatReaction(d){ const m=THREAD.find(x=>x.id===d.messageId); if(m &&
   if(d.added && d.owner===ME.id && d.byId && d.byId!==ME.id){ addNotif({icon:'smilePlus', text:pEsc(d.by||'Someone')+' reacted '+(d.emoji||'')+' to your message', link:d.convId?{kind:'group',id:d.convId}:{kind:'dm',id:d.byId}}); }
 }
 // Read receipts (DM): the other party read my messages → mark mine as seen.
-function onChatRead(d){ if(!d||!d.by) return; if(selected && selected.kind==='dm' && selected.id===d.by){ let changed=false; THREAD.forEach(m=>{ if(m.from===ME.id && !m.read_at){ m.read_at=Date.now(); changed=true; } }); if(changed) renderThread(); } }
+function onChatRead(d){ if(!d||!d.by) return;
+  if(selected && selected.kind==='dm' && selected.id===d.by){ let changed=false; THREAD.forEach(m=>{ if(m.from===ME.id && !m.read_at){ m.read_at=Date.now(); changed=true; } }); if(changed) renderThread(); }
+  // #6: keep the chat-list tick in sync with the thread — my last message is now read (blue double).
+  const it=rowFor('dm', d.by); if(it && it.last_from_me && it.last_status!=='read'){ it.last_status='read'; renderChats(searchVal()); }
+}
 // Delete-for-everyone: confirm, tell the server, then blank the message locally (the server also
 // broadcasts chat-deleted to the other side / other tabs).
 async function deleteMessage(id){ if(!confirm('Delete this message for everyone?')) return; try{ await postJSON('/api/messages/delete',{id}); markMsgDeleted(id); }catch(e){ toast(e.message||'Could not delete'); } }
@@ -1397,7 +1424,11 @@ function markMsgDeleted(id){
 }
 function onChatDeleted(d){ if(!d||!d.id) return; markMsgDeleted(d.id); try{ loadSidebar(); }catch(_){} } // refresh last-message previews
 // DM delivered: recipient's client acked → second (grey) tick.
-function onChatDelivered(d){ if(!d||!d.id) return; const m=THREAD.find(x=>x.id===d.id); if(m && !m.delivered_at){ m.delivered_at=Date.now(); updateBubble(m); } }
+function onChatDelivered(d){ if(!d||!d.id) return;
+  const m=THREAD.find(x=>x.id===d.id); if(m && !m.delivered_at){ m.delivered_at=Date.now(); updateBubble(m); }
+  // #6: mirror the delivered state onto the chat-list tick (double grey), unless it's already read.
+  const it=d.with?rowFor('dm', d.with):null; if(it && it.last_from_me && it.last_status==='sent'){ it.last_status='delivered'; renderChats(searchVal()); }
+}
 // Group read: a member opened the group → add them to "Seen by" on my messages up to that time.
 function onGroupRead(d){ if(!d||!d.group) return; if(selected && selected.kind==='group' && selected.id===d.group){ THREAD.forEach(m=>{ if(m.from===ME.id && m.created_at<=d.at){ m.seenBy=m.seenBy||[]; if(d.byName && !m.seenBy.includes(d.byName)){ m.seenBy.push(d.byName); updateBubble(m); } } }); } }
 // Shared group call: start it (or join the live one — the server returns the existing room).
@@ -1419,9 +1450,20 @@ async function startOrJoinDmCall(otherId){
   try{ const r=await postJSON('/api/calls/dm/start',{ to:otherId }); if(r&&r.room){ meetReturn={kind:'dm',id:otherId}; switchTab('meeting'); enterMeeting(r.room); } }
   catch(e){ toast(e.message||'Could not start the call'); }
 }
+// Live presence: a contact came online/offline or entered/left a call — update their dot + the
+// open chat header immediately (no refresh, which the desktop/mobile apps can't do). #6
+function onPresence(d){
+  if(!d||!d.userId) return;
+  const it=rowFor('dm', d.userId);
+  if(it){ it.online=!!d.online; it.status=d.status||'active'; renderChats(searchVal()); }
+  if(selected && selected.kind==='dm' && selected.id===d.userId && it){
+    const sub=document.querySelector('#convoTitle .st'); if(sub) sub.textContent=dmSubLabel(it);
+    const dot=document.querySelector('.convo-head .avatar .dot'); if(dot) dot.className='dot '+statusCls(it);
+  }
+}
 function onDmCall(d){
-  if(!d) return; const it=rowFor('dm', d.with); if(it){ it.callActive=!!d.active; it.callRoom=d.room||null; }
-  if(selected&&selected.kind==='dm'&&selected.id===d.with) updateCallBtn(!!d.active);
+  if(!d) return; const it=rowFor('dm', d.with); if(it){ it.callActive=!!d.active; it.callRoom=d.room||null; if(!d.active && it.status==='incall') it.status='active'; } // #4: drop the stuck "in call" status
+  if(selected&&selected.kind==='dm'&&selected.id===d.with){ updateCallBtn(!!d.active); const s=document.querySelector('#convoTitle .st'); if(s&&it) s.textContent=dmSubLabel(it); } // refresh the header subtitle live
   if(d.active && d.by && d.by!==ME.id) showCallInvite(d.room, d.byName, {kind:'dm',id:d.with}); // incoming 1:1 call
   if(!d.active) dismissCallInvite(d.room); // call ended/declined — stop ringing
   renderChats(searchVal());
@@ -1629,6 +1671,7 @@ async function openConvo(kind,id){
   // when opened from a notification; an async-only render would defer the paint until a click).
   const ckey=kind+':'+id;
   if(THREAD_CACHE.has(ckey)){ THREAD=THREAD_CACHE.get(ckey).slice(); renderThread(); }
+  else if(box){ box.innerHTML='<div class="thread-loading"><img src="/loaders/loader-ring.svg" width="34" height="34" alt=""><span>Loading messages…</span></div>'; } // branded loader instead of a blank pane on slow links
   if(kind==='group'){ try{ convoMembers=await fetch('/api/groups/members?group='+encodeURIComponent(id)).then(r=>r.json())||[]; }catch(_){ convoMembers=[]; } }
   if(!selected||selected.kind!==kind||selected.id!==id) return;
   wireMentions();
@@ -1894,7 +1937,11 @@ async function setupNativePush(){
   return true; // handled the native path (skip Web Push regardless of outcome)
 }
 async function setupPush(){
-  if(await setupNativePush()) return; // native app → FCM/APNs, not Web Push
+  if(await setupNativePush()) return; // mobile native app → FCM/APNs, not Web Push
+  // Desktop shell: the in-page bridge already shows a native toast (notify → replyNotify) while the
+  // app runs, so ALSO subscribing to Web Push made every message pop TWICE (in-app toast + SW push,
+  // with different icons). Drop any Web Push subscription here so only the branded native toast fires.
+  if(nativePlatform()==='desktop'){ try{ await unsubscribePush(); }catch(_){} console.log('[push] desktop shell → native toasts only, skipping Web Push'); return; }
   if(!('serviceWorker' in navigator) || !('PushManager' in window)){ console.warn('[push] not supported by this browser'); return; }
   try{ await navigator.serviceWorker.register('/sw.js'); }catch(e){ console.warn('[push] SW register failed:', e); return; }
   try{ _swReg=await navigator.serviceWorker.ready; }catch(e){ console.warn('[push] SW never became ready:', e); return; } // ensure an ACTIVE worker before subscribe()
@@ -1960,11 +2007,16 @@ function notify(title, body, kind, id){
         }).catch(()=>{});
       return;
     }
-    // Web / PWA: standard Notification.
+    // Web / PWA: standard Notification. Icon = the sender's/group's DP (falling back to their
+    // initials, then the brand app icon) — never the old wordmark. badge = brand mark.
     if(!('Notification' in window) || Notification.permission!=='granted') return;
-    const n=new Notification(title, { body, icon:'/logo.png' });
-    n.onclick=()=>{ n.close(); openFromNotif(kind, id); };
-    setTimeout(()=>{ try{ n.close(); }catch(_){} }, 8000);
+    notifAvatarDataUrl(kind, id, String(title||'').replace(/^[^\p{L}\p{N}]+/u,'')).then(avatar=>{
+      const n=new Notification(title, { body, icon: avatar || '/icon-192.png', badge:'/icon-192.png' });
+      n.onclick=()=>{ n.close(); openFromNotif(kind, id); };
+      setTimeout(()=>{ try{ n.close(); }catch(_){} }, 8000);
+    }).catch(()=>{
+      try{ const n=new Notification(title, { body, icon:'/icon-192.png' }); n.onclick=()=>{ n.close(); openFromNotif(kind, id); }; }catch(_){}
+    });
   }catch(_){}
 }
 let _audioCtx=null;
@@ -2038,7 +2090,7 @@ function onChatMessage(m){
     if(!THREAD.some(x=>x.id===m.id)){ THREAD.push(m); appendBubble(m); }
     if(m.from!==ME.id && !isSys){ if(it) it.unread=0; const body=JSON.stringify(kind==='group'?{group:rid}:{with:rid}); try{ fetch('/api/messages/read',{method:'POST',headers:{'Content-Type':'application/json'},body}); }catch(_){} }
   } else if(m.from!==ME.id && !isSys && notifOn(kind)){
-    toast((m.fromName||'New message')+': '+(m.body?(m.body.length>60?m.body.slice(0,60)+'…':m.body):'📎 Attachment'));
+    if(window.BZToast) BZToast.message(m.body?(m.body.length>60?m.body.slice(0,60)+'…':m.body):'📎 Attachment', {title:(m.fromName||'New message')});
   }
   renderChats(searchVal()); updateRailUnread();
 }
@@ -2047,7 +2099,7 @@ function connectChatWs(){
   try{
     chatWs=new WebSocket((location.protocol==='https:'?'wss://':'ws://')+location.host+'/ws');
     chatWs.onopen=()=>{ try{ chatWs.send(JSON.stringify({type:'chat-hello'})); }catch(_){} };
-    chatWs.onmessage=(e)=>{ let d; try{ d=JSON.parse(e.data); }catch(_){ return; } if(d.type==='chat-message' && d.message) onChatMessage(d.message); else if(d.type==='chat-deleted') onChatDeleted(d); else if(d.type==='chat-reaction') onChatReaction(d); else if(d.type==='poll-update' && d.poll) onPollUpdate(d); else if(d.type==='chat-read') onChatRead(d); else if(d.type==='chat-delivered') onChatDelivered(d); else if(d.type==='group-read') onGroupRead(d); else if(d.type==='group-call') onGroupCall(d); else if(d.type==='dm-call') onDmCall(d); else if(d.type==='group-update') onGroupUpdate(d); else if(d.type==='call-invite') showCallInvite(d.room, d.byName); else if(d.type==='meeting-invite') showMeetingInvite(d.meeting); else if(d.type==='meeting-reminder') showMeetingReminder(d.meeting); else if(d.type==='meeting-cancelled') showMeetingCancelled(d.meeting); else if(d.type==='group-role') onGroupRole(d); };
+    chatWs.onmessage=(e)=>{ let d; try{ d=JSON.parse(e.data); }catch(_){ return; } if(d.type==='chat-message' && d.message) onChatMessage(d.message); else if(d.type==='chat-deleted') onChatDeleted(d); else if(d.type==='chat-reaction') onChatReaction(d); else if(d.type==='poll-update' && d.poll) onPollUpdate(d); else if(d.type==='chat-read') onChatRead(d); else if(d.type==='chat-delivered') onChatDelivered(d); else if(d.type==='group-read') onGroupRead(d); else if(d.type==='group-call') onGroupCall(d); else if(d.type==='dm-call') onDmCall(d); else if(d.type==='presence') onPresence(d); else if(d.type==='group-update') onGroupUpdate(d); else if(d.type==='call-invite') showCallInvite(d.room, d.byName); else if(d.type==='meeting-invite') showMeetingInvite(d.meeting); else if(d.type==='meeting-reminder') showMeetingReminder(d.meeting); else if(d.type==='meeting-cancelled') showMeetingCancelled(d.meeting); else if(d.type==='group-role') onGroupRole(d); };
     chatWs.onclose=()=>{ setTimeout(connectChatWs, 3000); }; // auto-reconnect
   }catch(_){}
 }
@@ -2379,6 +2431,12 @@ function openScheduleModal(gid, editMtg){
     }catch(e){ err.textContent=e.message||'Could not save'; }
   };
 }
+// Branded connecting screen shown from the moment a call is entered until the room is ready —
+// so a slow link shows our loader, not a blank/half meeting window.
+function renderCallConnecting(){
+  const el=document.getElementById('meetingPanel'); if(!el) return;
+  el.innerHTML='<div class="call-connecting"><img src="/loaders/loader-orbit-dark.svg" width="76" height="76" alt=""><div class="cc-txt">Connecting to call…</div></div>';
+}
 function renderCall(){
   const el=document.getElementById('meetingPanel'); if(!el) return;
   el.innerHTML='<div class="meet"><div class="meet-grid" id="meetGrid"></div>'
@@ -2571,6 +2629,7 @@ async function enterMeeting(code, audioOnly){
   meetRec=null; meetTranscribe=false; meetRoomTx=false; meetSR=null; _addPool=null; meetStageId=null;
   try{ const c=await fetch('/api/ice').then(r=>r.json()); if(c&&c.iceServers) MEET_ICE=c; }catch(_){}
   meetState='call'; meetRailLive(true);
+  renderCallConnecting(); // branded "Connecting…" until the room is created/joined (esp. on slow links)
   meetWs=new WebSocket((location.protocol==='https:'?'wss://':'ws://')+location.host+'/ws');
   meetWs.onmessage=onMeetMsg;
   meetWs.onopen=()=>{ if(code){ meetRoom=code; renderCall(); meetSend({type:'meeting-join', room:code, name:(ME.name||ME.email||'Guest')}); } else { meetSend({type:'meeting-create'}); } };
@@ -2590,7 +2649,7 @@ async function onMeetMsg(e){
     refreshMeetPanel(); updateHostControls();
     return;
   }
-  if(m.type==='meeting-ended'){ toast('Call ended'); leaveMeeting(); return; } // 1:1 hangup, or host ended
+  if(m.type==='meeting-ended'){ toast('Call ended'); leaveMeeting(true); return; } // 1:1 hangup, or host ended
   if(m.type==='meeting-peer-joined'){
     meetNames.set(m.peerId,m.name); if(m.avatar) meetAvatars.set(m.peerId,m.avatar); if(m.uid){ meetPeerUids.set(m.peerId,m.uid); meetInviteJoined(m.uid); }
     const pc=meetMakePeer(m.peerId,m.name); // I'm an existing peer → I OFFER to the newcomer (carries my screen)
@@ -2619,7 +2678,7 @@ async function onMeetMsg(e){
     } else if(d.candidate){ const p=meetPeers.get(from); if(p&&p.pc){ try{ await p.pc.addIceCandidate(d.candidate); }catch(_){} } }
     return;
   }
-  if(m.type==='error'){ const msg=m.message; leaveMeeting(); const e2=document.getElementById('meetErr'); if(e2) e2.textContent=msg||'Meeting error'; return; }
+  if(m.type==='error'){ const msg=m.message; leaveMeeting(true); const e2=document.getElementById('meetErr'); if(e2) e2.textContent=msg||'Meeting error'; return; }
 }
 function updateMicBtn(){ const b=document.getElementById('meetMicBtn'); if(b){ b.classList.toggle('off',!meetMic); b.title=meetMic?'Mute':'Unmute'; b.innerHTML=ic(meetMic?'mic':'micOff',20); } }
 function updateCamBtn(){ const b=document.getElementById('meetCamBtn'); if(b){ b.classList.toggle('off',!meetCam); b.title=meetCam?'Turn camera off':'Turn camera on'; b.innerHTML=ic(meetCam?'video':'videoOff',20); } }
@@ -2658,10 +2717,14 @@ async function toggleCam(){
   setTileMute('__local', !meetMic); meetSend({type:'meeting-state', muted:!meetMic, camOff:!meetCam});
 }
 let meetLeaving=false;
-function leaveMeeting(){
+// forced = the call is ending for us (1:1 hangup, host ended, room closed/error) rather than us
+// voluntarily stepping out of a group others are still in. Only a VOLUNTARY exit from a GROUP
+// call hands the host role on; a 1:1 call (or a forced end) has nobody to hand to — handing off
+// there wrongly announced "Host handed to <the person who just left>" (bug).
+function leaveMeeting(forced){
   if(meetLeaving) return; meetLeaving=true;
-  // Host leaving voluntarily must hand off so the meeting isn't left host-less.
-  if(meetIsHost && meetPeers.size>0){
+  const isDm=!!(meetReturn && meetReturn.kind==='dm');
+  if(!forced && !isDm && meetIsHost && meetPeers.size>0){
     const next=meetPeers.keys().next().value; // first remaining participant
     if(next){ meetSend({type:'meeting-host', to:next}); toast('Host handed to '+(meetNames.get(next)||'a participant')); }
   }
@@ -2770,7 +2833,8 @@ async function renderLogin(){
   const aw=document.getElementById('authwrap'); aw.style.display='flex';
   let regOpen=false; try{ regOpen=(await (await fetch('/api/setup-state')).json()).registrationOpen; }catch(_){}
   aw.innerHTML=`<div class="authcard">
-    <h1>Welcome to Biz Connect</h1>
+    <div class="auth-brand"><img src="/icon-192.png" alt="Biz Connect"><div class="wm">Biz <b>Connect</b></div></div>
+    <h1>Welcome back</h1>
     <div class="sub">Sign in to access chats, screen share and connect.</div>
     ${regOpen?`<div class="authtabs">
       <button id="tabLogin" class="active">Sign in</button>

server/public/host.html

@@ -4,6 +4,10 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Browser Host — Remote Access</title>
+<meta name="theme-color" content="#1F3B73">
+<link rel="icon" href="/favicon.ico?v=3" sizes="any">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png?v=3">
+<link rel="apple-touch-icon" href="/apple-touch-icon-180.png?v=3">
 <style>
   body { font-family: system-ui, sans-serif; background:#0f172a; color:#e2e8f0; margin:0; padding:1.5rem; }
   .card { max-width:560px; margin:0 auto; background:#1e293b; border-radius:12px; padding:1.5rem; }

server/public/index.html

@@ -5,9 +5,11 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Biz Connect</title>
 <meta name="theme-color" content="#1F3B73">
+<link rel="icon" href="/favicon.ico?v=3" sizes="any">
 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png?v=3">
-<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png?v=3">
-<link rel="apple-touch-icon" href="/apple-touch-icon.png?v=3">
+<link rel="apple-touch-icon" href="/apple-touch-icon-180.png?v=3">
+<link rel="stylesheet" href="/bizconnect-toast.css">
+<script src="/bizconnect-toast.js"></script>
 <style>
   :root{ --brand:#FFC708; --brand-d:#E0AC00; --blue:#1F3B73; --blue-d:#16294f; --blue-soft:#EAF0FB; --ink:#1f2430; --muted:#6b7280; --bg:#f6f8fb; --line:#e6e9ef; }
   *{box-sizing:border-box;}

server/public/share.html

@@ -4,6 +4,12 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Biz Connect — Share your screen</title>
+<meta name="theme-color" content="#1F3B73">
+<link rel="icon" href="/favicon.ico?v=3" sizes="any">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png?v=3">
+<link rel="apple-touch-icon" href="/apple-touch-icon-180.png?v=3">
+<link rel="stylesheet" href="/bizconnect-toast.css">
+<script src="/bizconnect-toast.js"></script>
 <style>
   :root{ --brand:#FFC708; --brand-d:#E0AC00; --blue:#1F3B73; --blue-d:#16294f; --blue-soft:#EAF0FB; --ink:#1f2430; --muted:#6b7280; --bg:#f6f8fb; --card:#ffffff; --line:#e6e9ef; }
   *{box-sizing:border-box;}
@@ -275,8 +281,9 @@ function buildChatPanel(){
 }
 function toggleChat(){const p=document.getElementById('chatPanel');if(!p)return;chatOpen=!chatOpen;p.style.display=chatOpen?'flex':'none';const b=document.getElementById('chatBtn');if(chatOpen){b&&(b.style.background='#475569');const i=document.getElementById('chatInput');if(i)setTimeout(()=>i.focus(),50);}}
 function addChat(msg){const c=document.getElementById('chatMsgs');if(!c)return;const mine=msg.from==='__self';const w=document.createElement('div');w.style.cssText='max-width:85%;padding:.4rem .6rem;border-radius:10px;'+(mine?'align-self:flex-end;background:#EAF0FB;color:#16294f':'align-self:flex-start;background:#f1f5f9;color:#1f2430');w.innerHTML='<div style="font-size:.7rem;opacity:.65;margin-bottom:2px">'+esc(msg.name||'')+'</div>'+esc(msg.text);c.appendChild(w);c.scrollTop=c.scrollHeight;if(!mine)notifyMsg(msg);}
-function notifyMsg(msg){const b=document.getElementById('chatBtn');if(b&&!chatOpen){b.style.background='#FFC708';b.style.color='#1f2430';}toast((msg.name||'Message')+': '+msg.text);try{beep();}catch(_){}if('Notification' in window && Notification.permission==='granted' && (document.hidden||!chatOpen)){try{new Notification('New message from '+(msg.name||'support'),{body:msg.text});}catch(_){}}}
-function toast(text){let t=document.getElementById('msgToast');if(!t){t=document.createElement('div');t.id='msgToast';t.style.cssText='position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:2147483600;background:#16a34a;color:#fff;padding:.7rem 1.1rem;border-radius:12px;box-shadow:0 10px 26px rgba(0,0,0,.35);font-size:.92rem;font-weight:600;border:2px solid #0c7a36;max-width:82vw;transition:opacity .4s';document.body.appendChild(t);}t.innerHTML='\ud83d\udcac '+text;t.style.opacity='1';clearTimeout(window.__toastT);window.__toastT=setTimeout(()=>{t.style.opacity='0';},2800);}
+function notifyMsg(msg){const b=document.getElementById('chatBtn');if(b&&!chatOpen){b.style.background='#FFC708';b.style.color='#1f2430';}if(window.BZToast)BZToast.message(msg.text,{title:(msg.name||'Message')});try{beep();}catch(_){}if('Notification' in window && Notification.permission==='granted' && (document.hidden||!chatOpen)){try{new Notification('New message from '+(msg.name||'support'),{body:msg.text});}catch(_){}}}
+// Branded toast (BZToast, /bizconnect-toast.js). Classify by wording so errors show red.
+function toast(text){var s=String(text==null?'':text);if(!window.BZToast)return;if(/could ?n.t|cannot|failed|invalid|error|denied|expired|not found|please enter/i.test(s))return BZToast.error(s);return BZToast.message(s);}
 let __ac=null;
 function ensureAudio(){try{__ac=__ac||new (window.AudioContext||window.webkitAudioContext)();if(__ac.state==='suspended')__ac.resume();}catch(_){}}
 function beep(){ensureAudio();if(!__ac)return;try{const o=__ac.createOscillator(),g=__ac.createGain();o.type='sine';o.connect(g);g.connect(__ac.destination);const t0=__ac.currentTime;o.frequency.setValueAtTime(880,t0);o.frequency.setValueAtTime(660,t0+0.09);g.gain.setValueAtTime(0.0001,t0);g.gain.exponentialRampToValueAtTime(0.12,t0+0.02);g.gain.exponentialRampToValueAtTime(0.0001,t0+0.22);o.start(t0);o.stop(t0+0.24);}catch(_){}}

server/public/sw.js

@@ -15,8 +15,8 @@ self.addEventListener('push', (event) => {
   const title = d.title || 'Biz Connect';
   const options = {
     body: d.body || '',
-    icon: '/logo.png',
-    badge: '/logo.png',
+    icon: d.icon || '/icon-192.png',  // sender/group DP when the server provides one, else brand icon (not the old wordmark)
+    badge: '/icon-192.png',
     tag: d.tag || undefined,        // collapse repeats from the same chat
     renotify: !!d.tag,
     data: { kind: d.kind || '', id: d.id || '' },

server/public/viewer.html

@@ -3,6 +3,10 @@
 <head>
 <meta charset="UTF-8">
 <title>Remote Session</title>
+<meta name="theme-color" content="#1F3B73">
+<link rel="icon" href="/favicon.ico?v=3" sizes="any">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png?v=3">
+<link rel="apple-touch-icon" href="/apple-touch-icon-180.png?v=3">
 <style>
   body { font-family: system-ui, sans-serif; background: #0f172a; color: #e2e8f0; margin: 0; }
   header { background: #1e293b; padding: 0.6rem 1rem; display: flex; justify-content: space-between; align-items: center; }
@@ -15,7 +19,7 @@
 </head>
 <body>
 <header>
-  <div id="status">Connecting…</div>
+  <div id="status"><img src="/loaders/loader-orbit-dark.svg" width="18" height="18" style="vertical-align:-4px;margin-right:6px" alt="">Connecting…</div>
   <div>
     <a href="/"><span data-ic="arrowLeft" data-sz="16"></span> Console</a>
     <button id="endBtn">End session</button>

server/routes.js

@@ -300,6 +300,7 @@ route('POST', '/api/me/status', async (req, res) => {
   const { status } = await readBody(req);
   if (!['active', 'away', 'onleave'].includes(status)) return json(res, 400, { error: 'invalid status' });
   try { R.users.setStatus(u.id, status); } catch (_) {}
+  try { CHAT.broadcastPresence(u.id); } catch (_) {} // push the new status to contacts live (no refresh)
   json(res, 200, { ok: true, status });
 });
 

server/signaling.js

@@ -29,6 +29,7 @@ function handle(ws, m, req) {
       ws._chatUserId = u.id; ws._chatTeamId = u.team_id;
       CHAT.register(u.id, ws);
       ws.send(JSON.stringify({ type: 'chat-ready' }));
+      CHAT.broadcastPresence(u.id); // tell contacts this user just came online
       break;
     }
     // Recipient's client acknowledges a DM was delivered → mark it + tell the sender.
@@ -37,7 +38,7 @@ function handle(ws, m, req) {
       const msg = R.messages.byId(m.id);
       if (!msg || msg.conversation_id || msg.team_id !== ws._chatTeamId) break; // DMs only
       if (msg.recipient_id !== ws._chatUserId) break; // only the recipient can ack
-      if (!msg.delivered_at) { R.messages.markDelivered(m.id); try { CHAT.pushToUser(msg.sender_id, { type: 'chat-delivered', id: m.id }); } catch (_) {} }
+      if (!msg.delivered_at) { R.messages.markDelivered(m.id); try { CHAT.pushToUser(msg.sender_id, { type: 'chat-delivered', id: m.id, with: msg.recipient_id }); } catch (_) {} }
       break;
     }
     // --- Meetings (mesh): create a room, join by code, relay SDP/ICE peer-to-peer ---
@@ -72,6 +73,7 @@ function handle(ws, m, req) {
       // …and tell existing peers a newcomer arrived.
       for (const [, p] of peers) { if (p.ws.readyState === 1) p.ws.send(JSON.stringify({ type: 'meeting-peer-joined', peerId, name, avatar, uid: ws._meetingUserId || null })); }
       peers.set(peerId, { ws, name, avatar, uid: ws._meetingUserId || null });
+      if (ws._meetingUserId) CHAT.broadcastPresence(ws._meetingUserId); // now in a call → update contacts live
       const tsubs = transcriptSubs.get(room); if (tsubs && tsubs.size > 0) ws.send(JSON.stringify({ type: 'meeting-transcribe-state', active: true })); // catch up: already transcribing
       break;
     }
@@ -286,16 +288,20 @@ function leaveMeeting(ws) {
   const peers = meetingRooms.get(room);
   ws._meetingRoom = null;
   const pid = ws._peerId;
-  if (!peers) return;
+  const leaverId = ws._meetingUserId;
+  if (!peers) { if (leaverId) CHAT.broadcastPresence(leaverId); return; }
   try { require('./calls').finalizeTranscript(room, ws._meetingUserId); } catch (_) {} // save THIS user's transcript
   peers.delete(pid);
   // 1:1 call: when either party leaves, end it for everyone (a DM call has no "remaining" call).
   if (roomToDmCall.has(room)) {
-    for (const [, p] of peers) { if (p.ws.readyState === 1) { try { p.ws.send(JSON.stringify({ type: 'meeting-ended' })); } catch (_) {} p._meetingRoom = null; } }
+    const others = [...peers.values()].map((p) => p.ws && p.ws._meetingUserId).filter(Boolean);
+    for (const [, p] of peers) { if (p.ws.readyState === 1) { try { p.ws.send(JSON.stringify({ type: 'meeting-ended' })); } catch (_) {} p.ws._meetingRoom = null; } }
     meetingRooms.delete(room);
     try { require('./calls').finalizeTranscript(room); } catch (_) {} // any remaining buffers (safety)
     roomHost.delete(room);
     try { require('./calls').endCallByRoom(room); } catch (_) {}
+    if (leaverId) CHAT.broadcastPresence(leaverId);
+    others.forEach((uid) => CHAT.broadcastPresence(uid)); // both parties are now out of the call → live update
     return;
   }
   for (const [, p] of peers) { if (p.ws.readyState === 1) p.ws.send(JSON.stringify({ type: 'meeting-peer-left', peerId: pid })); }
@@ -305,11 +311,15 @@ function leaveMeeting(ws) {
     roomHost.delete(room);
     try { require('./calls').endCallByRoom(room); } catch (_) {}
   }
+  if (leaverId) CHAT.broadcastPresence(leaverId); // this user left the call → update contacts live
 }
 
 function cleanup(ws) {
+  const goneUserId = ws._chatUserId; // capture before unregister so we can announce the change
   CHAT.unregister(ws);
   leaveMeeting(ws);
+  if (goneUserId) CHAT.broadcastPresence(goneUserId); // now reflects offline / no-longer-in-call
+
   if (ws.kind === 'agent' && ws.machineId) onlineAgents.delete(ws.machineId);
   if (ws.kind === 'sharer' && ws.shareCode) pendingShares.delete(ws.shareCode);
   if (ws.sessionId) {