List participants in session summary

public/app.js

@@ -155,7 +155,11 @@ function setSessionSummary() {
     return;
   }
   const suffix = remoteParticipantCount === 1 ? "participant" : "participants";
-  setStatus(`You are ${displayName}. ${remoteParticipantCount} other ${suffix}.`);
+  const participantNames = [...peers.entries()]
+    .map(([id, peer]) => participantDisplayName(peer.name, `Participant ${id.slice(0, 4)}`))
+    .sort((first, second) => first.localeCompare(second));
+  const names = participantNames.length > 0 ? `: ${participantNames.join(", ")}` : "";
+  setStatus(`You are ${displayName}. ${remoteParticipantCount} other ${suffix}${names}.`);
 }
 
 function setActivity(name, action) {
@@ -1103,8 +1107,15 @@ function rebuildRemoteAudio(peerId) {
 }
 
 function updateRemoteLabel(id, name) {
+  if (name && !name.endsWith("'s screen")) {
+    const peer = peers.get(id);
+    if (peer) {
+      peer.name = name;
+    }
+  }
   const label = document.querySelector(`[data-peer-id="${id}"] .tile-name`);
   if (label) label.textContent = name || `Participant ${id.slice(0, 4)}`;
+  setSessionSummary();
 }
 
 function createRemoteTile(peer) {
@@ -1254,6 +1265,7 @@ function createPeerConnection(remotePeer) {
     audio,
     volumeInput
   });
+  setSessionSummary();
   return connection;
 }
 
@@ -1301,10 +1313,9 @@ async function handleSignal(message) {
   }
 
   if (message.type === "peer-joined") {
-    updateRemoteLabel(message.peerId, message.name);
     announceParticipantJoined(message.name);
     remoteParticipantCount += 1;
-    setSessionSummary();
+    updateRemoteLabel(message.peerId, message.name);
     setActivity(message.name, "joined.");
     return;
   }