diff --git a/FileUploader/braincloud-fileuploadtest.html b/FileUploader/braincloud-fileuploadtest.html
index 764bf66..e6e51a1 100755
--- a/FileUploader/braincloud-fileuploadtest.html
+++ b/FileUploader/braincloud-fileuploadtest.html
@@ -19,6 +19,12 @@
      defined" in the browser. Refresh it with: node bccm syncsdk js_fileuploader -->
 <script src="client/brainCloudClient.browser.js"></script>
 
+<!-- appId/appSecret/url — generated by `node bccm generate js_fileuploader` from
+     data/fileuploader_ids_<env>.js and gitignored, so real credentials never land
+     in this tracked HTML file or the public repo. Missing until you've run
+     build/run/generate at least once. -->
+<script src="ids.js"></script>
+
 	<style>
 		/* brainCloud dark theme — palette mirrors the bcchat example (src/Theme.js). */
 		:root {
@@ -219,9 +225,11 @@
 
 
 	function bcInit() {
-		document.getElementById("appId").value = "20001";
-		document.getElementById("appSecret").value = "1cecb2f3-5a60-4b00-8c7e-7867c12eea49";
-		document.getElementById("serverUrl").value = "https://api.internal.braincloudservers.com";
+		if (typeof FILEUPLOADER_IDS === "undefined") {
+			document.getElementById("clientState").innerHTML =
+				"⚠ ids.js not found — run `node bccm build js_fileuploader` (or `generate`) to inject app credentials before opening this page.";
+			return;
+		}
 
 		document.getElementById("userName").value = "TEST_USER";
 		document.getElementById("password").value = "TEST_PASSWORD";
@@ -241,6 +249,8 @@
 
 		brainCloud.brainCloudClient.setDebugEnabled(true);
 
+		initialize(); // auto-initialize from ids.js — no manual Initialize step
+
 		showStep(0); // start the wizard on the first step
 	}
 
@@ -256,9 +266,9 @@
 	var downloadPath = "downloader/bc/g/";
 
 	function getFullPath() {
-		return document.getElementById("serverUrl").value +
+		return FILEUPLOADER_IDS.url +
 			"/downloader/bc/g/" +
-			document.getElementById("appId").value +
+			FILEUPLOADER_IDS.appId +
 			"/u/" +
 			document.getElementById("profileId").value +
 			"/f/" +
@@ -269,8 +279,8 @@
 
 
 	function initialize() {
-		brainCloud.brainCloudClient.initialize(document.getElementById("appId").value, document.getElementById("appSecret").value, APP_VERSION);
-		brainCloud.brainCloudClient.setServerUrl(document.getElementById("serverUrl").value);
+		brainCloud.brainCloudClient.initialize(FILEUPLOADER_IDS.appId, FILEUPLOADER_IDS.appSecret, APP_VERSION);
+		brainCloud.brainCloudClient.setServerUrl(FILEUPLOADER_IDS.url);
 		//brainCloud.brainCloudClient.useJQuery(true);
 		document.getElementById('clientState').innerHTML = "✓ Client Initialized";
 		bcInitialized = true;
@@ -365,13 +375,13 @@
 		xhr.addEventListener("abort", uploadCanceled, false);
 
 
-		brainCloud.file.prepareFileUpload(
+		brainCloud.file.prepareUserUpload(
 			document.getElementById("cloudPath").value, document.getElementById("cloudFileName").value, document.getElementById("isShareable").checked, document.getElementById("replaceIfExists").checked, fileSize,
 			function(result) {
 				if (result.status == 200) {
 					var uploadId = result.data.fileDetails.uploadId;
 
-					document.getElementById("incomingResponse").innerHTML = "prepareFileUpload: " + JSON.stringify(result, null, 2);
+					document.getElementById("incomingResponse").innerHTML = "prepareUserUpload: " + JSON.stringify(result, null, 2);
 
 
 
@@ -485,21 +495,14 @@ <h1>File Tester</h1>
 		<button type="button" class="bc-step-tab" data-step="2" onclick="showStep(2)">3 &middot; Actions &amp; Response</button>
 	</div>
 
-	<!-- Step 1: Connect (initialize + authenticate) -->
+	<!-- Step 1: Connect (client auto-initializes from ids.js on load — see bcInit() — so
+	     this step is just the authentication display, no appId/appSecret entry here). -->
 	<section class="bc-step" data-step="0">
-		<div class="bc-grid">
-			<div class="bc-panel">
-				<h2>Initialize</h2>
-				<p class="bc-hint">Set up your app information and initialize the client.</p>
-				<label class="bc-field">App ID <input type="text" id="appId" /></label>
-				<label class="bc-field">App Secret <input type="text" id="appSecret" /></label>
-				<label class="bc-field">Server URL <input type="text" id="serverUrl" /></label>
-				<input type="button" class="bc-primary" onclick="initialize()" value="Initialize" />
-				<div id="clientState"></div>
-			</div>
+		<div class="bc-grid" style="grid-template-columns: 1fr; max-width: 460px;">
 			<div class="bc-panel">
 				<h2>Authenticate</h2>
 				<p class="bc-hint">Set up your user details and authenticate.</p>
+				<div id="clientState" style="margin-bottom: 10px;"></div>
 				<label class="bc-field">Username <input type="text" id="userName" /></label>
 				<label class="bc-field">Password <input type="text" id="password" /></label>
 				<input type="button" class="bc-primary" onclick="authenticate()" value="Authenticate" />
diff --git a/FileUploader/client/brainCloudClient.browser.js b/FileUploader/client/brainCloudClient.browser.js
index 726cafd..7da8437 100644
--- a/FileUploader/client/brainCloudClient.browser.js
+++ b/FileUploader/client/brainCloudClient.browser.js
@@ -8882,7 +8882,10 @@ var brainCloud = (() => {
           for (var c = 0; c < bcm._inProgressQueue.length && c < messages.length; ++c) {
             var callback = bcm._inProgressQueue[c].callback;
             if (bcm._inProgressQueue[c] != null && bcm._errorCallback && messages[c].status != 200) {
-              bcm._errorCallback(messages[c]);
+              bcm._errorCallback(Object.assign({}, messages[c], {
+                service: bcm._inProgressQueue[c].service,
+                operation: bcm._inProgressQueue[c].operation
+              }));
             }
             if (bcm._inProgressQueue[c] == null) return;
             if (messages[c].status == 200) {
@@ -9024,9 +9027,6 @@ var brainCloud = (() => {
             }
           } else {
             bcm.debugLog("Failed after " + bcm._retry + " retries.", true);
-            if (bcm._errorCallback != void 0 && typeof bcm._errorCallback == "function") {
-              bcm._errorCallback(errorThrown);
-            }
             bcm.fakeErrorResponse(bcm.statusCodes.CLIENT_NETWORK_ERROR, bcm.reasonCodes.CLIENT_NETWORK_ERROR_TIMEOUT, "Request timed out");
             bcm._requestInProgress = false;
             bcm.processQueue();
@@ -9062,9 +9062,6 @@ var brainCloud = (() => {
             }
             var errorMessage = response;
             bcm.debugLog("Failed", true);
-            if (bcm._errorCallback != void 0 && typeof bcm._errorCallback == "function") {
-              bcm._errorCallback(errorMessage);
-            }
             if (!errorMessage || errorMessage == "") errorMessage = "Unknown error. Did you lose internet connection?";
             bcm.fakeErrorResponse(
               bcm.statusCodes.CLIENT_NETWORK_ERROR,
@@ -9084,63 +9081,74 @@ var brainCloud = (() => {
             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
           }
           xmlhttp.requestId = ++bcm._requestId;
-          xmlhttp.ontimeout_bc = function() {
-            if (xmlhttp.readyState < 4) {
-              xmlhttp.hasTimedOut = true;
-              xmlhttp.abort();
-              xmlhttp.hasTimedOut = null;
+          var requestId = bcm._requestId;
+          var controller = new AbortController();
+          var hasTimedOut = false;
+          bcm.xml_timeoutId = setTimeout(function() {
+            hasTimedOut = true;
+            controller.abort();
+            bcm.xml_timeoutId = null;
+            bcm.debugLog("timeout", false);
+            bcm.retry();
+          }, bcm._packetTimeouts[0] * 1e3);
+          var sig = CryptoJS.MD5(bcm._jsonedQueue + bcm._secret);
+          var baseHeaders = {
+            "Content-Type": "application/json",
+            "X-SIG": sig,
+            "X-APPID": bcm._appId
+          };
+          function dispatch(body, extraHeaders) {
+            var headers = extraHeaders ? Object.assign({}, baseHeaders, extraHeaders) : baseHeaders;
+            fetch(bcm._dispatcherUrl, {
+              method: "POST",
+              headers,
+              body,
+              signal: controller.signal
+            }).then(function(response) {
+              var status = response.status;
+              return response.arrayBuffer().then(function(buffer) {
+                return { status, buffer };
+              });
+            }).then(function(result2) {
+              if (requestId != bcm._requestId) return;
+              var jsonString = new TextDecoder().decode(result2.buffer);
+              var responseJSON;
+              try {
+                responseJSON = JSON.parse(jsonString);
+              } catch (e) {
+                bcm.debugLog("Failed to parse response: " + jsonString, true);
+                clearTimeout(bcm.xml_timeoutId);
+                bcm.xml_timeoutId = null;
+                bcm._requestInProgress = false;
+                bcm.fakeErrorResponse(
+                  bcm.statusCodes.CLIENT_NETWORK_ERROR,
+                  0,
+                  "Invalid (non-JSON) response from server"
+                );
+                return;
+              }
+              bcm.handleResponse(result2.status, responseJSON);
+            }).catch(function(error) {
+              if (requestId != bcm._requestId) return;
+              if (hasTimedOut) return;
+              clearTimeout(bcm.xml_timeoutId);
               bcm.xml_timeoutId = null;
-              bcm.debugLog("timeout", false);
+              bcm.debugLog("Network error: " + error, true);
               bcm.retry();
-            }
-          };
-          xmlhttp.onreadystatechange = function() {
-            if (xmlhttp.hasTimedOut || xmlhttp.requestId != bcm._requestId) {
-              return;
-            }
-            if (xmlhttp.readyState == XMLHttpRequest.DONE) {
-              bcm.handleResponse(xmlhttp.status, JSON.parse(xmlhttp.responseText));
-            }
-          };
-          bcm.xml_timeoutId = setTimeout(xmlhttp.ontimeout_bc, bcm._packetTimeouts[0] * 1e3);
-          xmlhttp.open("POST", bcm._dispatcherUrl, true);
-          xmlhttp.setRequestHeader("Content-type", "application/json");
-          var sig = CryptoJS.MD5(bcm._jsonedQueue + bcm._secret);
-          xmlhttp.setRequestHeader("X-SIG", sig);
-          xmlhttp.setRequestHeader("X-APPID", bcm._appId);
+            });
+          }
           var encodedRequest = new TextEncoder().encode(bcm._jsonedQueue);
           var requestSize = encodedRequest.length;
           if (bcm._compressionEnabled && bcm._compressionThreshold >= 0 && requestSize >= bcm._compressionThreshold) {
             bcm.compressRequest(encodedRequest).then(function(compressedData) {
-              fetch(bcm._dispatcherUrl, {
-                method: "POST",
-                headers: {
-                  "Content-Type": "application/json",
-                  "X-SIG": sig,
-                  "X-APPID": bcm._appId,
-                  "Content-Encoding": "gzip"
-                },
-                body: compressedData
-              }).then(function(response) {
-                var status = response.status;
-                return response.arrayBuffer().then(function(buffer) {
-                  return { status, buffer };
-                });
-              }).then(function(result2) {
-                var responseStatus = result2.status;
-                var jsonString = new TextDecoder().decode(result2.buffer);
-                var responseJSON = JSON.parse(jsonString);
-                bcm.handleResponse(responseStatus, responseJSON);
-              }).catch(function(error) {
-                console.error(error);
-              });
+              dispatch(compressedData, { "Content-Encoding": "gzip" });
             }).catch(function(err) {
               console.error("Compression failed:", err);
               console.log("Sending request without compression...");
-              xmlhttp.send(bcm._jsonedQueue);
+              dispatch(bcm._jsonedQueue);
             });
           } else {
-            xmlhttp.send(bcm._jsonedQueue);
+            dispatch(bcm._jsonedQueue);
           }
         };
         bcm.processQueue = function() {
@@ -9219,9 +9227,9 @@ var brainCloud = (() => {
             if (callback) {
               callback();
             }
-          }).fail(function(jqXhr, textStatus, errorThrown2) {
+          }).fail(function(jqXhr, textStatus, errorThrown) {
             console.log(
-              "loadABTestData() - FAILED: " + jqXhr + " " + textStatus + " " + errorThrown2
+              "loadABTestData() - FAILED: " + jqXhr + " " + textStatus + " " + errorThrown
             );
           });
         };
@@ -10024,9 +10032,9 @@ var brainCloud = (() => {
             callback
           );
         };
-        bc2.authentication.authenticate = function(externalId, authenticationToken2, authenticationType, externalAuthName, forceCreate, extraJson, responseHandler) {
+        bc2.authentication.authenticate = function(externalId, authenticationToken, authenticationType, externalAuthName, forceCreate, extraJson, responseHandler) {
           bc2.authentication.previousAuthParams.externalId = externalId;
-          bc2.authentication.previousAuthParams.authenticationToken = authenticationToken2;
+          bc2.authentication.previousAuthParams.authenticationToken = authenticationToken;
           bc2.authentication.previousAuthParams.authenticationType = authenticationType;
           bc2.authentication.previousAuthParams.externalAuthName = externalAuthName;
           bc2.authentication.previousAuthParams.forceCreate = forceCreate;
@@ -10053,7 +10061,7 @@ var brainCloud = (() => {
             releasePlatform: "WEB",
             gameVersion: appVersion,
             clientLibVersion: bc2.version || bc2.brainCloudClient.version,
-            authenticationToken: authenticationToken2,
+            authenticationToken,
             authenticationType,
             forceCreate,
             compressResponses: bc2.authentication.compressResponses,
@@ -10520,6 +10528,9 @@ var brainCloud = (() => {
             acl,
             timeToLive
           };
+          if (acl) {
+            message["acl"] = acl;
+          }
           bc2.brainCloudManager.sendRequest({
             service: bc2.SERVICE_CUSTOM_ENTITY,
             operation: bc2.customEntity.OPERATION_UPDATE_SINGLETON,
@@ -12817,18 +12828,18 @@ var brainCloud = (() => {
           external: "External",
           unknown: "UNKNOWN"
         });
-        bc2.identity.attachFacebookIdentity = function(facebookId, authenticationToken2, callback) {
+        bc2.identity.attachFacebookIdentity = function(facebookId, authenticationToken, callback) {
           bc2.identity.attachIdentity(
             facebookId,
-            authenticationToken2,
+            authenticationToken,
             bc2.authentication.AUTHENTICATION_TYPE_FACEBOOK,
             callback
           );
         };
-        bc2.identity.mergeFacebookIdentity = function(facebookId, authenticationToken2, callback) {
+        bc2.identity.mergeFacebookIdentity = function(facebookId, authenticationToken, callback) {
           bc2.identity.mergeIdentity(
             facebookId,
-            authenticationToken2,
+            authenticationToken,
             bc2.authentication.AUTHENTICATION_TYPE_FACEBOOK,
             callback
           );
@@ -12919,18 +12930,18 @@ var brainCloud = (() => {
             callback
           });
         };
-        bc2.identity.attachFacebookLimitedIdentity = function(facebookLimitedId2, authenticationToken2, callback) {
+        bc2.identity.attachFacebookLimitedIdentity = function(facebookLimitedId2, authenticationToken, callback) {
           bc2.identity.attachIdentity(
             facebookLimitedId2,
-            authenticationToken2,
+            authenticationToken,
             bc2.authentication.AUTHENTICATION_TYPE_FACEBOOK_LIMITED,
             callback
           );
         };
-        bc2.identity.mergeFacebookLimitedIdentity = function(facebookLimitedId2, authenticationToken2, callback) {
+        bc2.identity.mergeFacebookLimitedIdentity = function(facebookLimitedId2, authenticationToken, callback) {
           bc2.identity.mergeIdentity(
             facebookLimitedId2,
-            authenticationToken2,
+            authenticationToken,
             bc2.authentication.AUTHENTICATION_TYPE_FACEBOOK_LIMITED,
             callback
           );
@@ -12944,19 +12955,17 @@ var brainCloud = (() => {
           );
         };
         bc2.identity.attachGameCenterIdentity = function(gameCenterId, callback) {
-          bc2.identity.detachIdentity(
+          bc2.identity.attachIdentity(
             gameCenterId,
-            "",
-            authenticationToken,
+            null,
             bc2.authentication.AUTHENTICATION_TYPE_GAME_CENTER,
             callback
           );
         };
         bc2.identity.mergeGameCenterIdentity = function(gameCenterId, callback) {
-          bc2.identity.detachIdentity(
+          bc2.identity.mergeIdentity(
             gameCenterId,
-            "",
-            authenticationToken,
+            null,
             bc2.authentication.AUTHENTICATION_TYPE_GAME_CENTER,
             callback
           );
@@ -13041,18 +13050,18 @@ var brainCloud = (() => {
             callback
           );
         };
-        bc2.identity.attachGoogleIdentity = function(googleId, authenticationToken2, callback) {
+        bc2.identity.attachGoogleIdentity = function(googleId, authenticationToken, callback) {
           bc2.identity.attachIdentity(
             googleId,
-            authenticationToken2,
+            authenticationToken,
             bc2.authentication.AUTHENTICATION_TYPE_GOOGLE,
             callback
           );
         };
-        bc2.identity.mergeGoogleIdentity = function(googleId, authenticationToken2, callback) {
+        bc2.identity.mergeGoogleIdentity = function(googleId, authenticationToken, callback) {
           bc2.identity.mergeIdentity(
             googleId,
-            authenticationToken2,
+            authenticationToken,
             bc2.authentication.AUTHENTICATION_TYPE_GOOGLE,
             callback
           );
@@ -13065,18 +13074,18 @@ var brainCloud = (() => {
             callback
           );
         };
-        bc2.identity.attachGoogleOpenIdIdentity = function(googleOpenId, authenticationToken2, callback) {
+        bc2.identity.attachGoogleOpenIdIdentity = function(googleOpenId, authenticationToken, callback) {
           bc2.identity.attachIdentity(
             googleOpenId,
-            authenticationToken2,
+            authenticationToken,
             bc2.authentication.AUTHENTICATION_TYPE_GOOGLE_OPEN_ID,
             callback
           );
         };
-        bc2.identity.mergeGoogleOpenIdIdentity = function(googleOpenId, authenticationToken2, callback) {
+        bc2.identity.mergeGoogleOpenIdIdentity = function(googleOpenId, authenticationToken, callback) {
           bc2.identity.mergeIdentity(
             googleOpenId,
-            authenticationToken2,
+            authenticationToken,
             bc2.authentication.AUTHENTICATION_TYPE_GOOGLE_OPEN_ID,
             callback
           );
@@ -13089,18 +13098,18 @@ var brainCloud = (() => {
             callback
           );
         };
-        bc2.identity.attachAppleIdentity = function(appleId, authenticationToken2, callback) {
+        bc2.identity.attachAppleIdentity = function(appleId, authenticationToken, callback) {
           bc2.identity.attachIdentity(
             appleId,
-            authenticationToken2,
+            authenticationToken,
             bc2.authentication.AUTHENTICATION_TYPE_APPLE,
             callback
           );
         };
-        bc2.identity.mergeAppleIdentity = function(appleId, authenticationToken2, callback) {
+        bc2.identity.mergeAppleIdentity = function(appleId, authenticationToken, callback) {
           bc2.identity.mergeIdentity(
             appleId,
-            authenticationToken2,
+            authenticationToken,
             bc2.authentication.AUTHENTICATION_TYPE_APPLE,
             callback
           );
@@ -13113,18 +13122,18 @@ var brainCloud = (() => {
             callback
           );
         };
-        bc2.identity.attachTwitterIdentity = function(twitterId, authenticationToken2, secret, callback) {
+        bc2.identity.attachTwitterIdentity = function(twitterId, authenticationToken, secret, callback) {
           bc2.identity.attachIdentity(
             twitterId,
-            authenticationToken2 + ":" + secret,
+            authenticationToken + ":" + secret,
             bc2.authentication.AUTHENTICATION_TYPE_TWITTER,
             callback
           );
         };
-        bc2.identity.mergeTwitterIdentity = function(twitterId, authenticationToken2, secret, callback) {
+        bc2.identity.mergeTwitterIdentity = function(twitterId, authenticationToken, secret, callback) {
           bc2.identity.mergeIdentity(
             twitterId,
-            authenticationToken2 + ":" + secret,
+            authenticationToken + ":" + secret,
             bc2.authentication.AUTHENTICATION_TYPE_TWITTER,
             callback
           );
@@ -13137,18 +13146,18 @@ var brainCloud = (() => {
             callback
           );
         };
-        bc2.identity.attachParseIdentity = function(parseId, authenticationToken2, callback) {
+        bc2.identity.attachParseIdentity = function(parseId, authenticationToken, callback) {
           bc2.identity.attachIdentity(
             parseId,
-            authenticationToken2,
+            authenticationToken,
             bc2.authentication.AUTHENTICATION_TYPE_PARSE,
             callback
           );
         };
-        bc2.identity.mergeParseIdentity = function(parseId, authenticationToken2, callback) {
+        bc2.identity.mergeParseIdentity = function(parseId, authenticationToken, callback) {
           bc2.identity.mergeIdentity(
             parseId,
-            authenticationToken2,
+            authenticationToken,
             bc2.authentication.AUTHENTICATION_TYPE_PARSE,
             callback
           );
@@ -13267,14 +13276,14 @@ var brainCloud = (() => {
             callback
           });
         };
-        bc2.identity.refreshIdentity = function(externalId, authenticationToken2, authenticationType, callback) {
+        bc2.identity.refreshIdentity = function(externalId, authenticationToken, authenticationType, callback) {
           bc2.brainCloudManager.sendRequest({
             service: bc2.SERVICE_IDENTITY,
             operation: bc2.identity.OPERATION_REFRESH_IDENTITY,
             data: {
               externalId,
               authenticationType,
-              authenticationToken: authenticationToken2
+              authenticationToken
             },
             callback
           });
@@ -13292,10 +13301,10 @@ var brainCloud = (() => {
             callback
           });
         };
-        bc2.identity.attachParentWithIdentity = function(externalId, authenticationToken2, authenticationType, externalAuthName, forceCreate, callback) {
+        bc2.identity.attachParentWithIdentity = function(externalId, authenticationToken, authenticationType, externalAuthName, forceCreate, callback) {
           var data = {
             externalId,
-            authenticationToken: authenticationToken2,
+            authenticationToken,
             authenticationType,
             forceCreate
           };
@@ -13315,11 +13324,11 @@ var brainCloud = (() => {
             callback
           });
         };
-        bc2.identity.attachPeerProfile = function(peer, externalId, authenticationToken2, authenticationType, externalAuthName, forceCreate, callback) {
+        bc2.identity.attachPeerProfile = function(peer, externalId, authenticationToken, authenticationType, externalAuthName, forceCreate, callback) {
           var data = {
             peer,
             externalId,
-            authenticationToken: authenticationToken2,
+            authenticationToken,
             authenticationType,
             forceCreate
           };
@@ -13350,26 +13359,26 @@ var brainCloud = (() => {
             callback
           });
         };
-        bc2.identity.attachIdentity = function(externalId, authenticationToken2, authenticationType, callback) {
+        bc2.identity.attachIdentity = function(externalId, authenticationToken, authenticationType, callback) {
           bc2.brainCloudManager.sendRequest({
             service: bc2.SERVICE_IDENTITY,
             operation: bc2.identity.OPERATION_ATTACH,
             data: {
               externalId,
               authenticationType,
-              authenticationToken: authenticationToken2
+              authenticationToken
             },
             callback
           });
         };
-        bc2.identity.mergeIdentity = function(externalId, authenticationToken2, authenticationType, callback) {
+        bc2.identity.mergeIdentity = function(externalId, authenticationToken, authenticationType, callback) {
           bc2.brainCloudManager.sendRequest({
             service: bc2.SERVICE_IDENTITY,
             operation: bc2.identity.OPERATION_MERGE,
             data: {
               externalId,
               authenticationType,
-              authenticationToken: authenticationToken2
+              authenticationToken
             },
             callback
           });
diff --git a/FileUploader/ids.js b/FileUploader/ids.js
new file mode 100644
index 0000000..2bfdffa
--- /dev/null
+++ b/FileUploader/ids.js
@@ -0,0 +1,6 @@
+// Update the fields instead.
+var FILEUPLOADER_IDS = {
+  appId: "",
+  appSecret: "",
+  url: "https://api.braincloudservers.com"
+};
diff --git a/RelayTestApp/src/App.css b/RelayTestApp/src/App.css
index c034faf..70cc178 100644
--- a/RelayTestApp/src/App.css
+++ b/RelayTestApp/src/App.css
@@ -62,19 +62,36 @@ small {
 }
 
 .teamBtn {
-    margin: 16px;
-    padding: 8px 16px;
-    font-size: 14pt;
-    background-color: #abc;
-    border-radius: 8px;
+    margin: 8px 0;
+    padding: 6px 14px;
+    font-size: 10pt;
+    font-weight: bold;
+    background-color: rgba(255, 255, 255, 0.08);
+    color: white;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 6px;
 }
 
 .teamBtn:hover {
-    background-color: #def;
+    background-color: rgba(255, 255, 255, 0.16);
 }
 
 .teamBtn:active {
-    background-color: #789;
+    background-color: rgba(255, 255, 255, 0.24);
+}
+
+.memberBadge {
+    font-size: 8pt;
+    font-weight: bold;
+    padding: 1px 6px;
+    border-radius: 4px;
+    background-color: rgba(255, 255, 255, 0.15);
+    color: white;
+}
+
+.memberBadgeHost {
+    background-color: rgba(255, 215, 0, 0.25);
+    color: #ffd700;
 }
 
 .GamePlayArea {
@@ -82,6 +99,7 @@ small {
     height: 600px;
     background-color: #333;
     position: relative;
+    overflow: hidden;
 }
 
 .Entity {
@@ -94,19 +112,44 @@ small {
 }
 
 .Button {
-    margin: 16px;
-    padding: 8px 16px;
-    font-size: 18pt;
-    background-color: #abc;
-    border-radius: 8px;
+    margin: 10px 6px;
+    padding: 10px 22px;
+    font-size: 12pt;
+    font-weight: bold;
+    letter-spacing: 0.3px;
+    background-color: rgba(255, 255, 255, 0.08);
+    color: white;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 6px;
+    transition: background-color 0.15s ease;
 }
 
 .Button:hover {
-    background-color: #def;
+    background-color: rgba(255, 255, 255, 0.16);
 }
 
 .Button:active {
-    background-color: #789;
+    background-color: rgba(255, 255, 255, 0.24);
+}
+
+.Button:disabled {
+    opacity: 0.5;
+}
+
+/* Primary CTA — matches the reference mockup's blue "Find / Create Lobby" button
+   (PLAY on the main menu; Start/Join Match in the lobby, the equivalent
+   progression actions there). */
+.ButtonPrimary {
+    background-color: #4c73e6;
+    border-color: #4c73e6;
+}
+
+.ButtonPrimary:hover {
+    background-color: #5c81ea;
+}
+
+.ButtonPrimary:active {
+    background-color: #3d5fc4;
 }
 
 .Splotch {
@@ -125,6 +168,158 @@ small {
     mask-position: center;
 }
 
+/* Shared two-card layout — a fixed-size left setup/member-list card beside a
+   same-height right card whose content switches via a tab strip (LEADERBOARD/CHAT
+   on the main menu; CHAT/LEADERBOARDS/INFO in the lobby). Mirrors the cpp reference
+   mockup's side-by-side card layout. */
+.CardsRow {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 32px;
+    margin: 12px auto 0;
+}
+
+.Card {
+    width: 360px;
+    max-width: 90vw;
+    min-height: 420px;
+    display: flex;
+    flex-direction: column;
+    background-color: rgba(0, 0, 0, 0.25);
+    border-radius: 8px;
+    padding: 12px 16px;
+    text-align: left;
+}
+
+.CardRight {
+    justify-content: flex-start;
+}
+
+.CardTabRow {
+    display: flex;
+    margin: -4px -4px 8px;
+}
+
+.CardTabBtn {
+    flex: 1;
+    padding: 8px 4px;
+    margin: 4px;
+    font-size: 10pt;
+    font-weight: bold;
+    letter-spacing: 0.5px;
+    background-color: rgba(255, 255, 255, 0.08);
+    border-radius: 6px;
+    color: rgba(255, 255, 255, 0.75);
+}
+
+.CardTabBtn.active {
+    background-color: #4c73e6;
+    color: white;
+}
+
+.GlobalChatPanel, .LeaderboardPanel {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+}
+
+.chatScroll {
+    flex: 1;
+    min-height: 80px;
+    overflow-y: auto;
+    font-size: 10pt;
+    padding-right: 4px;
+}
+
+.chatLine {
+    margin: 2px 0;
+    word-break: break-word;
+}
+
+.chatFrom {
+    color: #99bbff;
+    font-weight: bold;
+}
+
+.chatInputRow {
+    display: flex;
+    margin-top: 6px;
+}
+
+.chatInputRow input {
+    flex: 1;
+    font-size: 10pt;
+    padding: 4px 6px;
+}
+
+.chatSendBtn {
+    margin: 0 0 0 6px;
+    padding: 4px 10px;
+    font-size: 10pt;
+}
+
+.lbToggleRow {
+    display: flex;
+    gap: 6px;
+    margin-bottom: 6px;
+}
+
+.lbToggleBtn {
+    flex: 1;
+    padding: 6px 4px;
+    font-size: 9pt;
+    background-color: rgba(255, 255, 255, 0.08);
+    border-radius: 6px;
+    color: rgba(255, 255, 255, 0.75);
+}
+
+.lbToggleBtn.active {
+    background-color: #2e8b57;
+    color: white;
+}
+
+.lbDivider {
+    border-color: rgba(255, 255, 255, 0.15);
+    margin: 6px 0;
+    width: 100%;
+}
+
+.lbRow {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    padding: 3px 0;
+    font-size: 10pt;
+}
+
+.lbRank {
+    width: 30px;
+    flex-shrink: 0;
+    font-weight: bold;
+}
+
+.lbName {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.lbScore {
+    flex-shrink: 0;
+}
+
+.lbSelfRow .lbName, .lbSelfRow .lbScore {
+    color: #59ff73;
+}
+
+.lbEllipsis {
+    margin: 2px 0;
+    text-align: center;
+}
+
 .Shockwave {
     position: relative;
     border-radius: 50%;
@@ -149,3 +344,228 @@ small {
         opacity: 0;
     }
 }
+
+/* Live in-game scoreboard sidebar (GameScreen) — driven by state.coverage. */
+.Scoreboard {
+    margin-bottom: 12px;
+}
+
+.ScoreboardHeader {
+    display: flex;
+    justify-content: space-between;
+    font-size: 8pt;
+    opacity: 0.6;
+    margin-bottom: 4px;
+}
+
+.ScoreboardRow {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 3px 0;
+    font-size: 10pt;
+}
+
+.ScoreboardRowMe {
+    background-color: rgba(255, 255, 255, 0.06);
+    border-radius: 4px;
+}
+
+.ScoreboardRank {
+    width: 26px;
+    flex-shrink: 0;
+    font-weight: bold;
+}
+
+.ScoreboardDot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+.ScoreboardName {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.ScoreboardCoverage {
+    flex-shrink: 0;
+    font-weight: bold;
+}
+
+/* Match Summary screen (post-match results + rematch queue, BCLOUD-14489). */
+.MatchSummaryScreen {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+}
+
+.SummaryPanel {
+    width: 720px;
+    max-width: 92vw;
+    min-height: 0;
+}
+
+.SummaryWinnerBanner {
+    background-color: rgba(77, 61, 20, 1);
+    border: 1.5px solid #ffd54f;
+    color: #ffd54f;
+    border-radius: 6px;
+    padding: 10px 14px;
+    margin: 8px 0;
+    font-weight: bold;
+    text-align: left;
+}
+
+.SummaryHeaderRow {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 6px;
+}
+
+.SummaryScroll {
+    max-height: 320px;
+    overflow-y: auto;
+    padding-right: 4px;
+}
+
+.SummaryCard {
+    background-color: rgba(255, 255, 255, 0.05);
+    border-radius: 6px;
+    padding: 10px 12px;
+    margin: 8px 0;
+    text-align: left;
+}
+
+.SummaryCardMe {
+    border: 1.5px solid #59ff73;
+}
+
+.SummaryCardHeader {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.SummaryColorDot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+.SummaryName {
+    flex: 1;
+}
+
+.SummaryCoverageBlock {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    font-size: 9pt;
+    line-height: 1.3;
+}
+
+.SummaryBadgeRow {
+    display: flex;
+    align-items: center;
+    margin-top: 6px;
+    flex-wrap: wrap;
+    gap: 4px;
+}
+
+.SummaryPill {
+    display: inline-block;
+    background-color: rgba(255, 255, 255, 0.1);
+    color: #bfd0ff;
+    border-radius: 5px;
+    padding: 3px 10px;
+    font-size: 9pt;
+    margin: 3px 0;
+}
+
+.SummaryPillGood {
+    background-color: rgba(45, 110, 60, 0.6);
+    color: #72f28a;
+}
+
+.SummaryPillBest {
+    background-color: rgba(120, 95, 25, 0.6);
+    color: #ffd54f;
+}
+
+/* Non-blocking "starting the next round" banner, shown over the Lobby screen. */
+.ProvisioningBanner {
+    position: fixed;
+    top: 12px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: rgba(0, 0, 0, 0.75);
+    color: #ffd966;
+    padding: 8px 16px;
+    border-radius: 6px;
+    font-size: 10pt;
+    z-index: 900;
+}
+
+/* Lobby member list (LobbyScreen) — scrollable so a full 40-player lobby doesn't grow
+   the (fixed-height) card. */
+.memberListScroll {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+}
+
+.memberRow {
+    padding: 6px 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    text-align: left;
+}
+
+.memberSwatch {
+    width: 18px;
+    height: 18px;
+    border-radius: 4px;
+    flex-shrink: 0;
+}
+
+.memberStatus {
+    margin: 2px 0 0 26px;
+    font-size: 9pt;
+    opacity: 0.5;
+}
+
+.ColorPickerPopup {
+    display: flex;
+    flex-wrap: wrap;
+    max-width: 320px;
+    margin: 6px 0 6px 26px;
+    padding: 8px;
+    background-color: rgba(0, 0, 0, 0.35);
+    border-radius: 6px;
+}
+
+.ColorPickerPopup .colorBtn {
+    width: 20px;
+    height: 18px;
+}
+
+/* Floating settings/debug panel (GameScreen) — bottom-right, matches the cpp
+   reference's Debug window position. */
+.DebugPanel {
+    position: fixed;
+    right: 16px;
+    bottom: 16px;
+    width: 220px;
+    max-height: 60vh;
+    overflow-y: auto;
+    background-color: rgba(0, 0, 0, 0.55);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    padding: 10px 14px;
+    text-align: left;
+    z-index: 800;
+}
diff --git a/RelayTestApp/src/App.js b/RelayTestApp/src/App.js
index 18705ad..93bdd68 100644
--- a/RelayTestApp/src/App.js
+++ b/RelayTestApp/src/App.js
@@ -8,6 +8,9 @@ import LoadingScreen from './LoadingScreen'
 import MainMenuScreen from './MainMenuScreen'
 import LobbyScreen from './LobbyScreen'
 import GameScreen from './GameScreen'
+import MatchSummaryScreen from './MatchSummaryScreen'
+import { computeCoverage } from './coverage'
+import { LEADERBOARD_IDS } from './LeaderboardPanel'
 
 var Buffer = require('buffer/').Buffer // note: the trailing slash is important!
 
@@ -16,14 +19,35 @@ let colors = require('./Colors').colors
 
 const MATCH_DURATION_SEC = 90
 const NUM_ARROW_IMAGES = 8
+const RESULT_GRACE_MS = 3000 // delay between match_result broadcast and onEndMatch()
+const COVERAGE_RECOMPUTE_MS = 250 // live-scoreboard recompute throttle
+const MATCH_SUMMARY_REMATCH_MS = 45000 // how long the Match Summary screen waits before the host auto-starts the next round
+const LEADERBOARD_RESULT_TIMEOUT_MS = 8000 // how long a non-host client polls for leaderboard results before giving up (mirrors MatchSummaryScreen.js)
+
+// Test-time overrides read from the URL query string, e.g. ?lobbyType=CursorPartyGameLift
+// or ?protocol=wss. Both take priority over their localStorage'd/hardcoded defaults so a
+// link can be shared that pre-selects a specific lobby type or relay protocol.
+function getUrlParam (name) {
+  return new URLSearchParams(window.location.search).get(name)
+}
 
 let presentWhileStarted = false
 let server = null
 let showJoinButton = false
-let autoEndTimer = null
 let pingInterval = null
+let matchTickInterval = null // live coverage recompute + host auto-end sequence (see tickMatch)
+let rematchGateInterval = null // host-only: ticks tickRematchGate while awaitingRematch
+let resultsPollInterval = null // non-host: polls for leaderboard results — see pollMatchResults
 let loadingTimerStart = null // When the user first clicked Play (drives the elapsed timer)
 
+// Match-end bookkeeping — internal, doesn't drive rendering (mirrors cpp's app.cpp file-
+// static equivalents). Reset every fresh round in connectRelay()'s success callback.
+let matchPhase = 'running' // 'running' | 'resultsBroadcast' | 'ended'
+let resultsSentAtMs = 0
+let coverageComputedAtMs = 0
+let pendingMatchResult = [] // match_result chunk-reassembly buffer
+let leaderboardPostedRound = -1 // guards against double-posting the cumulative points board
+
 export function getShowJoinButton () {
   return showJoinButton
 }
@@ -58,7 +82,13 @@ class App extends Component {
         reliable: false,
         ordered: true
       },
-      relayProtocol: 'ws'
+      relayProtocol: 'ws',
+      coverage: [],
+      matchResult: { valid: false, round: 0, entries: [] },
+      awaitingRematch: false,
+      matchSummaryArrivalTime: null,
+      isProvisioning: false,
+      provisioningStatus: ''
     }
 
     this.state = state
@@ -99,6 +129,7 @@ class App extends Component {
 
   // Initialize brainCloud library
   initBC () {
+    this.rttEnableWaiters = null // drop any pending ensureRTTEnabled callers from the old bc instance
     this.bc = new brainCloud.BrainCloudWrapper('relayservertest')
     this.bc.initialize(ids.appId, ids.appSecret, '6.0.0')
     if (ids.url) this.bc.brainCloudClient.setServerUrl(ids.url)
@@ -128,7 +159,13 @@ class App extends Component {
       relayOptions: {
         reliable: false,
         ordered: true
-      }
+      },
+      coverage: [],
+      matchResult: { valid: false, round: 0, entries: [] },
+      awaitingRematch: false,
+      matchSummaryArrivalTime: null,
+      isProvisioning: false,
+      provisioningStatus: ''
     }
   }
 
@@ -154,10 +191,10 @@ class App extends Component {
 
   // Reset the app to the login page with an error popup
   dieWithMessage (message) {
-    if (autoEndTimer) {
-      clearTimeout(autoEndTimer)
-      autoEndTimer = null
-    }
+    if (pingInterval) { clearInterval(pingInterval); pingInterval = null }
+    if (matchTickInterval) { clearInterval(matchTickInterval); matchTickInterval = null }
+    if (rematchGateInterval) { clearInterval(rematchGateInterval); rematchGateInterval = null }
+    if (resultsPollInterval) { clearInterval(resultsPollInterval); resultsPollInterval = null }
     this.bc.logoutOnApplicationClose(false)
     this.bc.relay.disconnect()
     this.bc.relay.deregisterSystemCallback()
@@ -219,6 +256,18 @@ class App extends Component {
             } catch (e) {}
           }
 
+          // Leaderboard ids — optional global properties so boards can be renamed in the
+          // portal with no client rebuild (matches cpp's readLeaderboardId); falls back to
+          // LEADERBOARD_IDS' compiled-in defaults when absent.
+          const readLeaderboardId = (propName, fallback) => {
+            const prop = readPropertiesResponse.data[propName]
+            return (prop && prop.value) ? prop.value : fallback
+          }
+          LEADERBOARD_IDS.points.lifetime = readLeaderboardId('PointsLeaderboardId', LEADERBOARD_IDS.points.lifetime)
+          LEADERBOARD_IDS.points.quarterly = readLeaderboardId('PointsLeaderboardIdQuarterly', LEADERBOARD_IDS.points.quarterly)
+          LEADERBOARD_IDS.coverage.lifetime = readLeaderboardId('CoverageLeaderboardId', LEADERBOARD_IDS.coverage.lifetime)
+          LEADERBOARD_IDS.coverage.quarterly = readLeaderboardId('CoverageLeaderboardIdQuarterly', LEADERBOARD_IDS.coverage.quarterly)
+
           this.setState({
             screen: 'mainMenu',
             user: {
@@ -232,6 +281,13 @@ class App extends Component {
             appLobbies: allLobbyTypes,
             splotchDurationSec: splotchDurationSec
           })
+
+          // Keep RTT connected from the main menu onward so Global Chat works there.
+          this.ensureRTTEnabled(() => {
+            let state = this.state
+            if (state.user) state.user.cxId = this.bc.rttService.getRTTConnectionId()
+            this.setState(state)
+          }, () => {})
         } else {
           console.log('globalApp.readProperties failed')
         }
@@ -241,6 +297,36 @@ class App extends Component {
     }
   }
 
+  // Wraps RTT's enableRTT(), which silently no-ops with no callback when RTT is already
+  // enabled or connecting. Also queues concurrent callers instead of firing a second
+  // enableRTT while one's in flight, so a Play click racing the main menu's chat-enable
+  // call doesn't get its callback silently dropped.
+  ensureRTTEnabled (onReady, onFail) {
+    if (this.bc.rttService.isRTTEnabled()) {
+      // Deferred so this fast path is async like the "not yet enabled" path below —
+      // callers (e.g. onPlayClicked) rely on onReady seeing a flushed this.state.
+      setTimeout(onReady, 0)
+      return
+    }
+    if (this.rttEnableWaiters) {
+      this.rttEnableWaiters.push({ onReady, onFail })
+      return
+    }
+    this.rttEnableWaiters = [{ onReady, onFail }]
+    this.bc.rttService.enableRTT(
+      (...args) => {
+        let waiters = this.rttEnableWaiters
+        this.rttEnableWaiters = null
+        waiters.forEach(w => w.onReady(...args))
+      },
+      (...args) => {
+        let waiters = this.rttEnableWaiters
+        this.rttEnableWaiters = null
+        waiters.forEach(w => w.onFail(...args))
+      }
+    )
+  }
+
   onLogout () {
     this.bc.logout(true, () => {
       // Close Relay/RTT/BC connections
@@ -258,6 +344,7 @@ class App extends Component {
 
   // Clicked play from the main menu
   onPlayClicked (lobbyType, usePingData, protocol) {
+    console.log('[DEBUG] App.onPlayClicked fired', lobbyType, usePingData, protocol) // TEMP diagnostic — remove once Play navigation is confirmed working
     loadingTimerStart = Date.now()
     // Remember the last selected lobby type so the main menu defaults to it next time
     localStorage.setItem('lobbyType', lobbyType)
@@ -271,8 +358,8 @@ class App extends Component {
 
     const algo = { strategy: 'ranged-absolute', alignment: 'center', ranges: [1000] }
 
-    // Enable RTT service
-    this.bc.rttService.enableRTT(
+    // Enable RTT service (no-op if the main menu already enabled it for chat)
+    this.ensureRTTEnabled(
       () => {
         let state = this.state
         state.user.cxId = this.bc.rttService.getRTTConnectionId()
@@ -285,38 +372,49 @@ class App extends Component {
             this.state.user.colorIndex,
             this.state.user.presentSinceStart
           )
+          const onFindResult = result => {
+            if (result.status !== 200) {
+              console.error('[DEBUG] findOrCreateLobby failed', result)
+              this.dieWithMessage('Failed to find lobby: ' + (result.status_message || result.reason_code || JSON.stringify(result)))
+            }
+          }
           if (withPingData) {
             this.bc.lobby.findOrCreateLobbyWithPingData(
               lobbyType, 0, 1, algo, {}, null, {}, false, extraJson, '',
-              result => {
-                if (result.status !== 200) this.dieWithMessage('Failed to find lobby')
-              }
+              onFindResult
             )
           } else {
             this.bc.lobby.findOrCreateLobby(
               lobbyType, 0, 1, algo, {}, null, {}, false, extraJson, '',
-              result => {
-                if (result.status !== 200) this.dieWithMessage('Failed to find lobby')
-              }
+              onFindResult
             )
           }
         }
 
-        // Ping regions when explicitly requested or for GameLift lobbies
-        const needsPing = usePingData || lobbyType.toLowerCase().includes('gamelift')
-        if (needsPing) {
+        // Ping regions only when the user explicitly checked "Use Ping Data" — matches
+        // cpp/GDScript, which never infer this from the lobby-type name either.
+        if (usePingData) {
           this.setState({ loadingStatus: 'Getting regions...' })
           this.bc.lobby.getRegionsForLobbies([lobbyType], result => {
             if (result.status !== 200) {
+              console.error('[DEBUG] getRegionsForLobbies failed, falling back to no ping data', result)
               doFindLobby(false)
               return
             }
             this.bc.lobby.pingRegions(result => {
               if (result.status !== 200) {
+                console.error('[DEBUG] pingRegions failed, falling back to no ping data', result)
                 doFindLobby(false)
                 return
               }
               let pingData = result.data || {}
+              // Some lobby types have no discrete regions to ping, so pingRegions succeeds
+              // with an empty result — fall back to the plain find/create in that case, since
+              // *WithPingData rejects locally on an empty ping cache.
+              if (Object.keys(pingData).length === 0) {
+                doFindLobby(false)
+                return
+              }
               this.setState({ pingData, loadingStatus: 'Searching...' }, () => {
                 doFindLobby(true)
               })
@@ -340,27 +438,21 @@ class App extends Component {
   onLobbyEvent (result) {
     if (result.data.lobby) {
       let state = this.state
-      state.lobby = { ...result.data.lobby, lobbyId: result.data.lobbyId }
-
-      // The lobby RTT event already carries the latest member data (incl. each
-      // member's selected colour in extra.colorIndex), so we derive lobby state
-      // directly from it instead of issuing a redundant getLobbyData call on
-      // every event. This matches the C++/Java/Godot RTAs, which never re-fetch.
-      //
-      // lobbyTypeDef (teams + rules) is only present on the fuller events
-      // (e.g. MEMBER_JOIN); the server strips it from MEMBER_UPDATE events
-      // (which fire on every colour/ready change). So cache the team names and
-      // disbandOnStart when they arrive, and always rebuild the team member
-      // grouping from the current members — otherwise team rows would keep
-      // pointing at stale member objects and miss colour changes.
+      // This-lobby chat lives on state.lobby.chatMessages; every lobby event here rebuilds
+      // state.lobby fresh from server data, so carry the existing history forward.
+      let prevChatMessages = (state.lobby && state.lobby.chatMessages) || []
+      state.lobby = { ...result.data.lobby, lobbyId: result.data.lobbyId, chatMessages: prevChatMessages }
+
+      // lobbyTypeDef (teams + rules) only shows up on fuller events like MEMBER_JOIN — the
+      // server strips it from MEMBER_UPDATE — so cache it when seen, but always rebuild the
+      // team groupings from current members so colour changes aren't missed.
       let lobbyTypeDef = result.data.lobby.lobbyTypeDef
       if (lobbyTypeDef) {
         state.disbandOnStart = lobbyTypeDef.rules.disbandOnStart
         state.lobbyTeamNames = Object.keys(lobbyTypeDef.teams)
       }
 
-      // Fall back to the team names present on the members if we haven't seen a
-      // lobbyTypeDef yet (e.g. first event is a MEMBER_UPDATE).
+      // Fall back to the team names present on the members if we haven't seen a lobbyTypeDef yet.
       let teamNames = state.lobbyTeamNames
       if (teamNames.length === 0) {
         let seen = new Set()
@@ -407,33 +499,59 @@ class App extends Component {
     } else if (result.operation === 'MEMBER_LEFT') {
       this.setState({ loadingStatus: 'A player left the lobby.' })
     } else if (result.operation === 'STARTING') {
+      // Stay on whatever screen we're already on (Lobby, normally) — chat and the rest
+      // of the lobby UI keep working through the whole provisioning sequence instead of
+      // being replaced by a blocking loading screen. isProvisioning just drives a small
+      // inline status line (see LobbyScreen); the actual screen change to Game only
+      // happens once relay truly connects (connectRelay's success callback).
       loadingTimerStart = Date.now()
       presentWhileStarted = true
       this.updatePresentSinceStart()
       this.setState({
-        screen: 'connecting',
-        loadingStatus: 'Provisioning server...'
+        isProvisioning: true,
+        provisioningStatus: 'Provisioning server...'
       })
     } else if (result.operation === 'ROOM_ASSIGNED') {
-      this.setState({ loadingStatus: 'Server assigned...' })
+      this.setState({ provisioningStatus: 'Server assigned...' })
     } else if (result.operation === 'ROOM_PROGRESS') {
       let step = result.data && result.data.step ? result.data.step : ''
       let msg = result.data && result.data.msg ? result.data.msg : ''
       this.setState({
-        loadingStatus: step ? `${step}: ${msg}` : msg || 'Starting server...'
+        provisioningStatus: step ? `${step}: ${msg}` : msg || 'Starting server...'
       })
     } else if (result.operation === 'ROOM_READY') {
       server = result.data
-      this.setState({ loadingStatus: 'Connecting...' })
+      this.setState({ provisioningStatus: 'Connecting...' })
       if (presentWhileStarted) {
         this.connectRelay()
       } else {
         showJoinButton = true
-        this.setState({ screen: 'lobby' })
+      }
+    } else if (result.operation === 'SIGNAL') {
+      // This-lobby chat via the Lobby service's SendSignal. Skip echoes of our own
+      // signal (compared by cxId, not name) since onSendLobbySignal already appended it.
+      let fromCxId = result.data.from && result.data.from.cxId
+      let text = result.data.signalData && result.data.signalData.text
+      if (text && this.state.lobby && fromCxId !== this.state.user.cxId) {
+        let fromName = (result.data.from && result.data.from.name) || 'Player'
+        let state = this.state
+        state.lobby.chatMessages = (state.lobby.chatMessages || []).concat([{ fromName, text }])
+        this.setState(state)
       }
     }
   }
 
+  // Sends a this-lobby chat message via the Lobby service's SendSignal. Appends
+  // locally right away — the receive handler (onLobbyEvent's SIGNAL case) skips the
+  // echo of our own signal, which the server does send back to us too.
+  onSendLobbySignal (text) {
+    if (!text || !this.state.lobby) return
+    this.bc.lobby.sendSignal(this.state.lobby.lobbyId, { text }, () => {})
+    let state = this.state
+    state.lobby.chatMessages = (state.lobby.chatMessages || []).concat([{ fromName: state.user.name, text }])
+    this.setState(state)
+  }
+
   // Gameplay option toggles
   onToggleReliable () {
     let state = this.state
@@ -456,14 +574,28 @@ class App extends Component {
 
   // Called to terminate the current session and go back to the main menu
   onGameScreenClose () {
-    if (autoEndTimer) {
-      clearTimeout(autoEndTimer)
-      autoEndTimer = null
+    // Otherwise this player stays a ghost lobby member, blocking the all-ready rematch
+    // fast path for everyone else until the server times them out.
+    if (this.state.lobby && this.state.lobby.lobbyId) {
+      this.bc.lobby.leaveLobby(this.state.lobby.lobbyId, () => {})
     }
+
     if (pingInterval) {
       clearInterval(pingInterval)
       pingInterval = null
     }
+    if (matchTickInterval) {
+      clearInterval(matchTickInterval)
+      matchTickInterval = null
+    }
+    if (rematchGateInterval) {
+      clearInterval(rematchGateInterval)
+      rematchGateInterval = null
+    }
+    if (resultsPollInterval) {
+      clearInterval(resultsPollInterval)
+      resultsPollInterval = null
+    }
     this.bc.relay.deregisterRelayCallback()
     this.bc.relay.deregisterSystemCallback()
     this.bc.relay.disconnect()
@@ -481,6 +613,11 @@ class App extends Component {
     state.gameStartTime = null
     state.round = 0
     state.loadingStatus = ''
+    state.coverage = []
+    state.matchResult = { valid: false, round: 0, entries: [] }
+    state.awaitingRematch = false
+    state.isProvisioning = false
+    state.provisioningStatus = ''
     showJoinButton = false
     loadingTimerStart = null
     this.setState(state)
@@ -520,10 +657,28 @@ class App extends Component {
     })
   }
 
-  // Owner of the lobby clicked the "Start" button
+  // Owner of the lobby clicked the "Start" button (also reused by tickRematchGate to
+  // auto-start the next round).
   onStart () {
     let state = this.state
     state.user.isReady = true
+    state.awaitingRematch = false // in case this was triggered by the rematch gate
+    let extraJson = this.makeExtraJson(state.user.colorIndex, state.user.presentSinceStart)
+    this.setState(state)
+    this.bc.lobby.updateReady(
+      this.state.lobby.lobbyId,
+      this.state.user.isReady,
+      extraJson
+    )
+  }
+
+  // Non-host lobby members have no "Start" button (only the host can start the round),
+  // but they still need a way to signal they're ready before the host starts — this is
+  // that toggle, reused for both the initial pre-match lobby and un-readying if a guest
+  // changes their mind. (Rematch queuing uses the separate onSetRematchReady below.)
+  onToggleReady () {
+    let state = this.state
+    state.user.isReady = !state.user.isReady
     let extraJson = this.makeExtraJson(state.user.colorIndex, state.user.presentSinceStart)
     this.setState(state)
     this.bc.lobby.updateReady(
@@ -533,6 +688,35 @@ class App extends Component {
     )
   }
 
+  // Marks this player queued for a rematch and takes them back to the Lobby screen, where
+  // they wait for tickRematchGate() to start the next round.
+  onSetRematchReady (ready) {
+    let state = this.state
+    state.user.isReady = ready
+    if (ready) state.screen = 'lobby'
+    this.setState(state)
+    this.bc.lobby.updateReady(
+      state.lobby.lobbyId, ready,
+      this.makeExtraJson(state.user.colorIndex, state.user.presentSinceStart)
+    )
+  }
+
+  // Host-only gate on starting the next round: fires onStart() once every member has
+  // queued for a rematch, or once MATCH_SUMMARY_REMATCH_MS elapses regardless.
+  tickRematchGate () {
+    if (!this.state.awaitingRematch || !this.state.lobby) return
+    const isHost = this.state.lobby.ownerCxId === this.state.user.cxId
+    if (!isHost) return
+
+    const members = this.state.lobby.members
+    const allReady = members.length > 0 && members.every(m => m.isReady)
+    const elapsedMs = Date.now() - (this.state.matchSummaryArrivalTime || Date.now())
+
+    if (allReady || elapsedMs >= MATCH_SUMMARY_REMATCH_MS) {
+      this.onStart()
+    }
+  }
+
   // Player clicked the "Join Match" button to join an in-progress game
   onJoin () {
     let state = this.state
@@ -547,12 +731,8 @@ class App extends Component {
     this.connectRelay()
   }
 
-  // Return to the lobby with the same players (host-only)
+  // Ends the current match (host-only, called by tickMatch()'s auto-end sequence).
   onEndMatch () {
-    if (autoEndTimer) {
-      clearTimeout(autoEndTimer)
-      autoEndTimer = null
-    }
     let extraJson = {
       cxId: this.bc.brainCloudClient.getRTTConnectionId(),
       lobbyId: this.state.lobby.lobbyId,
@@ -561,17 +741,6 @@ class App extends Component {
     this.bc.relay.endMatch(extraJson)
   }
 
-  // Host clears all splotches from the canvas
-  onClearSplotches () {
-    this.setState({ splotches: [] })
-    this.bc.relay.sendToAll(
-      Buffer.from(JSON.stringify({ op: 'clear_splotches' }), 'ascii'),
-      true,
-      false,
-      this.bc.relay.CHANNEL_HIGH_PRIORITY_2
-    )
-  }
-
   // A relay message coming from another player
   onRelayMessage (netId, data) {
     let state = this.state
@@ -594,6 +763,8 @@ class App extends Component {
           x: json.data.x,
           y: json.data.y,
           colorIndex: colorIndex,
+          // For per-player coverage attribution so two players sharing a colour don't merge.
+          cxId: memberCxId,
           // Use the sender's synced rotation (default random if an older client omits it)
           angle: json.data.angle === undefined ? Math.random() * Math.PI * 2 : json.data.angle,
           startTimeMs: Date.now()
@@ -612,10 +783,19 @@ class App extends Component {
       case 'splotch_sync':
         if (json.data.first) state.splotches = []
         json.data.splotches.forEach(s => {
+          // "o" is a compact netId, resolved to a cxId now — the map that resolves it is
+          // torn down at END_MATCH, so this must happen at receive time, never deferred.
+          // Missing/unresolvable -> unattributed (coverage falls back to a colorIndex match).
+          let ownerCxId
+          if (s.o !== undefined) {
+            let resolved = this.bc.relay.getCxIdForNetId(s.o)
+            if (resolved) ownerCxId = resolved
+          }
           state.splotches.push({
             x: s.x,
             y: s.y,
             colorIndex: s.c,
+            cxId: ownerCxId,
             // "a" = synced rotation (default random if absent); "t" = original timestamp
             angle: s.a === undefined ? Math.random() * Math.PI * 2 : s.a,
             startTimeMs: s.t
@@ -623,16 +803,33 @@ class App extends Component {
         })
         break
 
-      // Host cleared all splotches
-      case 'clear_splotches':
-        state.splotches = []
-        break
-
       // Live relay RTT broadcast from another player
       case 'relay_ping':
         if (member) member.activePing = json.data.ping
         break
 
+      // Host-broadcast authoritative match result (chunked — see sendMatchResult).
+      case 'match_result': {
+        const round = json.data.round
+        if (!(state.matchResult.valid && state.matchResult.round === round)) {
+          if (json.data.first) pendingMatchResult = []
+          json.data.e.forEach(entry => {
+            pendingMatchResult.push({
+              cxId: entry.cx,
+              rank: entry.r,
+              coveragePct: entry.c / 100,
+              beaten: entry.b,
+              lbDelta: { ready: false }
+            })
+          })
+          if (json.data.last) {
+            this.applyMatchResult(round, pendingMatchResult)
+            pendingMatchResult = []
+          }
+        }
+        break
+      }
+
       default:
         break
     }
@@ -652,6 +849,17 @@ class App extends Component {
       state.lobby.members.forEach(
         member => (member.allowSendTo = member.cxId !== state.user.cxId)
       )
+
+      // The relay's CONNECT can beat the Lobby service's own MEMBER_JOIN/UPDATE event to
+      // us, so state.lobby.members may not have this peer yet. Seed a placeholder so the
+      // coverage board doesn't just omit them — the next lobby event's rebuild overwrites
+      // it with real data. Without this, a JIP joiner's own coverage board can render empty
+      // for the whole match, and a player who disconnects right after connecting can be
+      // dropped from the round's leaderboard entries entirely.
+      if (json.cxId && !state.lobby.members.find(m => m.cxId === json.cxId)) {
+        state.lobby.members.push({ cxId: json.cxId, allowSendTo: true, extra: {} })
+      }
+
       this.setState(state)
 
       // If we are the host and in-game, send current state to the newly joined player
@@ -664,29 +872,60 @@ class App extends Component {
         this.sendGameStartToMask(mask)
         this.sendSplotchSyncToMask(mask)
       }
+    } else if (json.op === 'MIGRATE_OWNER') {
+      // Relay reassigned the host role — reconcile into state.lobby.ownerCxId (the field
+      // every isHost check reads) faster than waiting for the next lobby-update event.
+      if (json.cxId) {
+        let state = this.state
+        state.lobby.ownerCxId = json.cxId
+        this.setState(state)
+      }
     } else if (json.op === 'END_MATCH') {
-      if (autoEndTimer) {
-        clearTimeout(autoEndTimer)
-        autoEndTimer = null
+      // Fallback if match_result never arrived (dropped/incomplete chunk) — recompute
+      // locally so the summary screen isn't stuck on "Waiting for results...".
+      if (!(this.state.matchResult.valid && this.state.matchResult.round === this.state.round)) {
+        const finalCoverage = computeCoverage(this.state.splotches, this.state.lobby.members)
+        this.applyMatchResult(this.state.round, this.toMatchResultEntries(finalCoverage))
       }
       if (pingInterval) {
         clearInterval(pingInterval)
         pingInterval = null
       }
+      if (matchTickInterval) {
+        clearInterval(matchTickInterval)
+        matchTickInterval = null
+      }
       this.bc.relay.deregisterRelayCallback()
       this.bc.relay.deregisterSystemCallback()
       this.bc.relay.disconnect()
       loadingTimerStart = null
       let state = this.state
-      state.screen = 'lobby'
+      state.screen = 'matchSummary'
+      state.matchSummaryArrivalTime = Date.now()
+      state.awaitingRematch = true
       state.lobbyResetting = true
       state.user.isReady = false
       state.user.presentSinceStart = false
       state.splotches = []
       state.shockwaves = []
       state.gameStartTime = null
+      state.isProvisioning = false
       showJoinButton = false
       this.setState(state)
+
+      // Clear readiness server-side too, or "Queue for Rematch N/M" starts from stale state.
+      this.bc.lobby.updateReady(
+        state.lobby.lobbyId, false,
+        this.makeExtraJson(state.user.colorIndex, false)
+      )
+
+      // Host-only: keeps evaluating whether to auto-start the next round.
+      if (rematchGateInterval) clearInterval(rematchGateInterval)
+      rematchGateInterval = setInterval(() => this.tickRematchGate(), 500)
+
+      // Non-host: keeps polling for the host's leaderboard results (see pollMatchResults).
+      if (resultsPollInterval) clearInterval(resultsPollInterval)
+      resultsPollInterval = setInterval(() => this.pollMatchResults(), 1000)
     }
   }
 
@@ -712,7 +951,7 @@ class App extends Component {
     let playerMask = this.state.lobby.members.reduce((playerMask, member) => {
       if (!member.allowSendTo) return playerMask
       let netId = this.bc.relay.getNetIdForCxId(member.cxId)
-      // Note: we avoid bitwise ops here to support up to 40 players (JS bitwise is 32-bit)
+      // Avoiding bitwise ops here — need up to 40 players and JS bitwise ops are 32-bit only
       return playerMask + Math.pow(2, netId)
     }, 0)
 
@@ -827,7 +1066,7 @@ class App extends Component {
 
   connectRelay () {
     const ports = server.connectData.ports
-    const host = server.connectData.address
+    let host = server.connectData.address
     let port = 0
     let ssl = false
 
@@ -841,10 +1080,16 @@ class App extends Component {
       port = ports.i3d
       ssl = false
       console.log('[DEBUG] relay connect: i3d port=' + port)
+    } else if (this.state.relayProtocol === 'wss' && ports.wss) {
+      // Use the secure hostname and WSS port when the server advertises them.
+      ssl = true
+      port = ports.wss
+      host = server.connectData.secureAddress || server.connectData.address
+      console.log('[DEBUG] relay connect: wss host=' + host + ' port=' + port)
     } else {
-      ssl = this.state.relayProtocol === 'wss'
+      ssl = false
       port = ports.ws
-      console.log('[DEBUG] relay connect: protocol=' + this.state.relayProtocol + ' ws=' + ports.ws + ' tcp=' + (ports.tcp || -1) + ' udp=' + (ports.udp || -1))
+      console.log('[DEBUG] relay connect: ws port=' + port)
     }
 
     presentWhileStarted = false
@@ -862,6 +1107,26 @@ class App extends Component {
       result => {
         let state = this.state
         state.screen = 'game'
+        state.isProvisioning = false
+
+        // Fresh round — reset per-round match/coverage state so nothing carries over
+        // from the previous round.
+        state.coverage = []
+        state.matchResult = { valid: false, round: 0, entries: [] }
+        state.awaitingRematch = false
+        matchPhase = 'running'
+        resultsSentAtMs = 0
+        coverageComputedAtMs = 0
+        pendingMatchResult = []
+        leaderboardPostedRound = -1
+        if (rematchGateInterval) {
+          clearInterval(rematchGateInterval)
+          rematchGateInterval = null
+        }
+        if (resultsPollInterval) {
+          clearInterval(resultsPollInterval)
+          resultsPollInterval = null
+        }
 
         // Host sets the authoritative game start time and broadcasts it to all players
         if (state.lobby.ownerCxId === state.user.cxId) {
@@ -869,7 +1134,6 @@ class App extends Component {
           state.round = (state.round || 0) + 1
           this.setState(state)
           this.sendGameStartToMask(this.bc.relay.TO_ALL_PLAYERS)
-          this.scheduleAutoEnd()
         } else {
           this.setState(state)
         }
@@ -877,6 +1141,10 @@ class App extends Component {
         // Broadcast relay RTT to all players every 2 seconds
         if (pingInterval) clearInterval(pingInterval)
         pingInterval = setInterval(() => this.broadcastRelayPing(), 2000)
+
+        // Live coverage recompute + host auto-end sequence (see tickMatch)
+        if (matchTickInterval) clearInterval(matchTickInterval)
+        matchTickInterval = setInterval(() => this.tickMatch(), COVERAGE_RECOMPUTE_MS)
       },
       error => this.dieWithMessage('Failed to connect to server, msg: ' + error)
     )
@@ -925,6 +1193,12 @@ class App extends Component {
     for (let i = 0; i < splotches.length; i++) {
       let s = splotches[i]
       let entry = { x: s.x, y: s.y, c: s.colorIndex, a: s.angle, t: s.startTimeMs }
+      if (s.cxId) {
+        // Compact netId, not the ~80-char cxId, to stay inside the chunk byte budget —
+        // resolved back to a cxId at receive time (onRelayMessage's splotch_sync case).
+        let ownerNetId = this.bc.relay.getNetIdForCxId(s.cxId)
+        if (ownerNetId >= 0 && ownerNetId < this.bc.relay.MAX_PLAYERS) entry.o = ownerNetId
+      }
       let entrySize = JSON.stringify(entry).length + 1 // +1 for comma separator
 
       if (currentSize + entrySize > MAX_BYTES && batch.length > 0) {
@@ -942,21 +1216,229 @@ class App extends Component {
     sendBatch(isFirst, batch)
   }
 
-  // Schedule auto-end of match at MATCH_DURATION_SEC seconds (host only)
-  scheduleAutoEnd () {
-    if (autoEndTimer) clearTimeout(autoEndTimer)
-    autoEndTimer = setTimeout(() => {
-      autoEndTimer = null
+  // Mask of every OTHER lobby member (excludes self) — used to broadcast match_result to
+  // the rest of the match.
+  buildAllOthersMask () {
+    let mask = 0
+    this.state.lobby.members.forEach(member => {
+      if (member.cxId === this.state.user.cxId) return
+      let netId = this.bc.relay.getNetIdForCxId(member.cxId)
+      if (netId === undefined || netId < 0) return
+      mask += Math.pow(2, netId)
+    })
+    return mask
+  }
+
+  toMatchResultEntries (coverage) {
+    return coverage.map(c => ({
+      cxId: c.cxId,
+      rank: c.rank,
+      coveragePct: c.coveragePct,
+      beaten: c.beaten,
+      lbDelta: { ready: false }
+    }))
+  }
+
+  // Broadcasts the host-authoritative match result to the rest of the match, chunked to
+  // stay under a relay packet's byte budget (mirrors sendSplotchSyncToMask's pattern).
+  sendMatchResult (mask, round, coverage) {
+    if (!coverage.length || mask === 0) return
+    const MAX_BYTES = 900
+    const ENVELOPE = 80
+    let batches = []
+    let batch = []
+    let currentSize = ENVELOPE
+
+    coverage.forEach(c => {
+      let entry = { cx: c.cxId, r: c.rank, c: Math.round(c.coveragePct * 100), b: c.beaten }
+      let entrySize = JSON.stringify(entry).length + 1
+      if (currentSize + entrySize > MAX_BYTES && batch.length > 0) {
+        batches.push(batch)
+        batch = []
+        currentSize = ENVELOPE
+      }
+      batch.push(entry)
+      currentSize += entrySize
+    })
+    batches.push(batch)
+
+    batches.forEach((entries, i) => {
+      let msg = { op: 'match_result', data: { round, first: i === 0, last: i === batches.length - 1, e: entries } }
+      this.bc.relay.sendToPlayers(
+        Buffer.from(JSON.stringify(msg), 'ascii'),
+        mask, true, true, this.bc.relay.CHANNEL_HIGH_PRIORITY_1
+      )
+    })
+  }
+
+  // Applies an authoritative coverage snapshot for a round (idempotent per round). Only
+  // the host posts to the cloud (hostPostMatchResultsToCloud) — everyone else picks the
+  // result up on their own via pollMatchResults instead of waiting on the host to relay it.
+  applyMatchResult (round, entries) {
+    if (this.state.matchResult.valid && this.state.matchResult.round === round) return
+    let state = this.state
+    state.matchResult = { valid: true, round, entries }
+    this.setState(state)
+
+    if (leaderboardPostedRound === round) return
+    leaderboardPostedRound = round
+
+    const isHost = this.state.lobby.ownerCxId === this.state.user.cxId
+    if (isHost) this.hostPostMatchResultsToCloud(round, entries)
+  }
+
+  // Host-only: posts the whole round's results to the four leaderboards in one trusted
+  // server-side call (PostMatchResults cloud script).
+  hostPostMatchResultsToCloud (round, entries) {
+    const scriptData = {
+      round,
+      lobbyId: this.state.lobby.lobbyId, // so the script can persist a "<lobbyId>:<round>"-indexed GlobalEntity for non-host clients to poll (see pollMatchResults)
+      pointsLeaderboardId: LEADERBOARD_IDS.points.lifetime,
+      pointsLeaderboardIdQuarterly: LEADERBOARD_IDS.points.quarterly,
+      coverageLeaderboardId: LEADERBOARD_IDS.coverage.lifetime,
+      coverageLeaderboardIdQuarterly: LEADERBOARD_IDS.coverage.quarterly,
+      entries: entries
+        .map(e => {
+          const member = this.state.lobby.members.find(m => m.cxId === e.cxId)
+          if (!member || !member.profileId) return null // can't post server-side without a profileId
+          return {
+            profileId: member.profileId,
+            name: member.name,
+            points: e.beaten + 1,
+            coverageBasisPoints: Math.round(e.coveragePct * 100)
+          }
+        })
+        .filter(Boolean)
+    }
+
+    this.bc.script.runScript('PostMatchResults', scriptData, result => {
+      if (result.status === 200) {
+        // The script's own return value is nested under data.response (a sibling of
+        // runTimeData/success), not data itself — data.results is always empty/missing.
+        this.applyLeaderboardResultsFromCloud(round, result.data.response.results)
+      } else {
+        console.log('[DEBUG] PostMatchResults script call failed for round ' + round, result)
+      }
+    })
+  }
+
+  // Applies a PostMatchResults response (keyed by profileId) onto state.matchResult.entries
+  // (keyed by cxId). Called on the host directly from hostPostMatchResultsToCloud's own
+  // script response, and on every other client from pollMatchResults once the GlobalEntity
+  // that call writes shows up — both feed it the exact same "results" array shape, so
+  // there's only one place that parses it.
+  applyLeaderboardResultsFromCloud (round, resultsArr) {
+    if (!(this.state.matchResult.valid && this.state.matchResult.round === round)) return // a newer round has already started
+
+    const profileIdToCxId = {}
+    this.state.lobby.members.forEach(m => { if (m.profileId) profileIdToCxId[m.profileId] = m.cxId })
+
+    const readPeriod = j => ({ rankBefore: j.before, rankAfter: j.after, improved: j.improved })
+
+    let state = this.state
+    resultsArr.forEach(r => {
+      const cxId = profileIdToCxId[r.profileId]
+      if (!cxId) return
+      const delta = {
+        ready: true,
+        pointsLifetime: readPeriod(r.pointsLifetime),
+        pointsQuarterly: readPeriod(r.pointsQuarterly),
+        coverageLifetime: readPeriod(r.coverageLifetime),
+        coverageQuarterly: readPeriod(r.coverageQuarterly)
+      }
+      const entry = state.matchResult.entries.find(e => e.cxId === cxId)
+      if (entry) entry.lbDelta = delta
+    })
+    this.setState(state)
+  }
+
+  // Non-host: polls the GlobalEntity PostMatchResults.js writes (indexed by
+  // "<lobbyId>:<round>") until it shows up, instead of waiting on the host to relay its own
+  // script response over the relay connection — which is usually already disconnected by
+  // the time this screen shows (END_MATCH tears the relay down before showing Match
+  // Summary), so the old "lb_result" broadcast could only ever land in a narrow window.
+  pollMatchResults () {
+    const state = this.state
+    const isHost = state.lobby.ownerCxId === state.user.cxId
+    if (isHost || !state.matchResult.valid || state.matchResult.entries.some(e => e.lbDelta && e.lbDelta.ready)) {
+      clearInterval(resultsPollInterval)
+      resultsPollInterval = null
+      return
+    }
+    if (Date.now() - (state.matchSummaryArrivalTime || Date.now()) >= LEADERBOARD_RESULT_TIMEOUT_MS) {
+      clearInterval(resultsPollInterval)
+      resultsPollInterval = null
+      return // give up — the UI already falls back to "Leaderboard unavailable" past this point
+    }
+
+    const round = state.matchResult.round
+    const indexedId = state.lobby.lobbyId + ':' + round
+    this.bc.globalEntity.getListByIndexedId(indexedId, 1, result => {
+      if (result.status !== 200) return // next tick retries
+      const list = result.data.entityList
+      if (!list || !list.length) return // not written yet — next tick retries
+      this.applyLeaderboardResultsFromCloud(round, list[0].data.results)
+    })
+  }
+
+  // Live coverage recompute (scoreboard sidebar) + the host's auto-end sequence: at
+  // MATCH_DURATION_SEC, broadcast match_result, wait RESULT_GRACE_MS, then onEndMatch().
+  tickMatch () {
+    if (!this.state.gameStartTime) return
+    const nowMs = Date.now()
+
+    if (nowMs - coverageComputedAtMs >= COVERAGE_RECOMPUTE_MS) {
+      const fresh = computeCoverage(this.state.splotches, this.state.lobby.members)
+      const prevCoverage = this.state.coverage
+      fresh.forEach(e => {
+        const old = prevCoverage.find(o => o.cxId === e.cxId)
+        const prevRank = old ? old.rank : e.rank
+        const prevChangedAt = old ? (old.rankChangedAtMs || 0) : 0
+        e.prevRank = prevRank
+        e.rankChangedAtMs = (prevRank !== e.rank) ? nowMs : prevChangedAt
+      })
+      this.setState({ coverage: fresh })
+      coverageComputedAtMs = nowMs
+    }
+
+    const isHost = this.state.lobby.ownerCxId === this.state.user.cxId
+    const elapsedMs = nowMs - this.state.gameStartTime
+
+    if (matchPhase === 'running' && elapsedMs >= MATCH_DURATION_SEC * 1000 && isHost) {
+      if (!(this.state.matchResult.valid && this.state.matchResult.round === this.state.round)) {
+        const finalCoverage = computeCoverage(this.state.splotches, this.state.lobby.members)
+        this.applyMatchResult(this.state.round, this.toMatchResultEntries(finalCoverage))
+        this.sendMatchResult(this.buildAllOthersMask(), this.state.round, finalCoverage)
+      }
+      matchPhase = 'resultsBroadcast'
+      resultsSentAtMs = nowMs
+    } else if (matchPhase === 'resultsBroadcast' && isHost && nowMs - resultsSentAtMs >= RESULT_GRACE_MS) {
       this.onEndMatch()
-    }, MATCH_DURATION_SEC * 1000)
+      matchPhase = 'ended'
+    }
+
+    // Watchdog: no authoritative result well past the deadline — compute locally so the
+    // round can't hang forever.
+    if (!this.state.matchResult.valid && elapsedMs >= MATCH_DURATION_SEC * 1000 + RESULT_GRACE_MS + 3000) {
+      const finalCoverage = computeCoverage(this.state.splotches, this.state.lobby.members)
+      this.applyMatchResult(this.state.round, this.toMatchResultEntries(finalCoverage))
+      if (isHost && matchPhase !== 'ended') {
+        this.sendMatchResult(this.buildAllOthersMask(), this.state.round, finalCoverage)
+        matchPhase = 'resultsBroadcast'
+        resultsSentAtMs = nowMs
+      }
+    }
   }
 
-  // Add a persistent colour splotch at pos (normalized 0-1 coords)
+  // Add a persistent colour splotch at pos (normalized 0-1 coords) — always a self-paint,
+  // so cxId is always our own (coverage attribution needs the real player, not just colour —
+  // two players can share a colourIndex).
   createSplotch (pos, colorIndex, angle) {
     let splotch = {
       x: pos.x,
       y: pos.y,
       colorIndex: colorIndex % colors.length,
+      cxId: this.state.user.cxId,
       angle: angle === undefined ? Math.random() * Math.PI * 2 : angle,
       startTimeMs: Date.now()
     }
@@ -1051,7 +1533,9 @@ class App extends Component {
               user={this.state.user}
               appLobbies={this.state.appLobbies}
               usePingData={this.state.usePingData}
-              lastLobbyType={localStorage.getItem('lobbyType')}
+              lastLobbyType={getUrlParam('lobbyType') || localStorage.getItem('lobbyType')}
+              defaultProtocol={getUrlParam('protocol')}
+              bcWrapper={this.bc}
               onLogout={this.onLogout.bind(this)}
               onPlay={this.onPlayClicked.bind(this)}
             />
@@ -1080,25 +1564,22 @@ class App extends Component {
               lobbyResetting={this.state.lobbyResetting}
               usePingData={this.state.usePingData}
               pingData={this.state.pingData}
+              bcWrapper={this.bc}
+              isProvisioning={this.state.isProvisioning}
+              provisioningStatus={this.state.provisioningStatus}
+              awaitingRematch={this.state.awaitingRematch}
+              matchResult={this.state.matchResult}
               onBack={this.onGameScreenClose.bind(this)}
               onColorChanged={this.onColorChanged.bind(this)}
               onTeamChanged={this.onTeamChanged.bind(this)}
               onStart={this.onStart.bind(this)}
+              onToggleReady={this.onToggleReady.bind(this)}
               onJoin={this.onJoin.bind(this)}
+              onSendLobbySignal={this.onSendLobbySignal.bind(this)}
             />
           </>
         )
 
-      case 'connecting':
-        return (
-          <LoadingScreen
-            text='Joining match...'
-            statusText={this.state.loadingStatus}
-            lobbyId={this.state.lobby ? this.state.lobby.lobbyId : null}
-            startTime={loadingTimerStart}
-          />
-        )
-
       case 'game':
         return (
           <>
@@ -1110,16 +1591,14 @@ class App extends Component {
               user={this.state.user}
               lobby={this.state.lobby}
               lobbyType={this.state.lobbyType}
-              disbandOnStart={this.state.disbandOnStart}
               teams={this.state.teams}
               shockwaves={this.state.shockwaves}
               splotches={this.state.splotches}
               splotchDurationSec={this.state.splotchDurationSec}
               gameStartTime={this.state.gameStartTime}
               relayOptions={this.state.relayOptions}
+              coverage={this.state.coverage}
               onBack={this.onGameScreenClose.bind(this)}
-              onEndMatch={this.onEndMatch.bind(this)}
-              onClearSplotches={this.onClearSplotches.bind(this)}
               onPlayerMove={this.onPlayerMove.bind(this)}
               onPlayerClicked={this.onPlayerClicked.bind(this)}
               onToggleReliable={this.onToggleReliable.bind(this)}
@@ -1130,6 +1609,18 @@ class App extends Component {
           </>
         )
 
+      case 'matchSummary':
+        return (
+          <MatchSummaryScreen
+            user={this.state.user}
+            lobby={this.state.lobby}
+            matchResult={this.state.matchResult}
+            matchSummaryArrivalTime={this.state.matchSummaryArrivalTime}
+            onSetRematchReady={this.onSetRematchReady.bind(this)}
+            onMainMenu={this.onGameScreenClose.bind(this)}
+          />
+        )
+
       default:
         return <p>Invalid state</p>
     }
diff --git a/RelayTestApp/src/GameScreen.js b/RelayTestApp/src/GameScreen.js
index d30db23..481b483 100644
--- a/RelayTestApp/src/GameScreen.js
+++ b/RelayTestApp/src/GameScreen.js
@@ -1,23 +1,30 @@
 import React, { Component } from 'react'
+import { rankColor } from './LeaderboardPanel'
 
 let colors = require('./Colors').colors
 
 const MATCH_DURATION_SEC = 90
-const COUNTDOWN_FROM_SEC = 80
+const TIMER_WARN_SEC = 30
+const TIMER_URGENT_SEC = 10
+const SIDEBAR_WIDTH = 220
+
+// Hold-to-paint: holding the left mouse button down auto-repeats a splotch at this fixed
+// interval (the initial click still paints immediately) — same value across cpp/js/both
+// Godot ports so holding paints at the same rate for everyone in a shared match.
+const AUTO_PAINT_INTERVAL_MS = 150
 
 // Props:
 // user
 // lobby
 // lobbyType
-// disbandOnStart
 // teams
 // splotches
 // splotchDurationSec
 // gameStartTime
 // relayOptions { reliable, ordered }
+// coverage — live RANK/PLAYER/COVERAGE standings (App.tickMatch, ~every 250ms)
 // numArrowImages
-// onBack / onEndMatch / onClearSplotches
-// onPlayerMove / onPlayerClicked
+// onBack / onPlayerMove / onPlayerClicked
 // onToggleReliable / onToggleOrdered / onTogglePlayerMask
 class GameScreen extends Component {
   constructor () {
@@ -33,17 +40,15 @@ class GameScreen extends Component {
 
   componentWillUnmount () {
     clearInterval(this.timerInterval)
+    this.stopAutoPaint()
   }
 
+  // "Exit Match" — leaves the match for yourself only. There's no manual host "End
+  // Match" override anymore (matches the cpp reference): a round always ends via the
+  // host's auto-end sequence (App.tickMatch, MATCH_DURATION_SEC after it starts).
   onBack () {
     this.props.onBack()
   }
-  onEndMatch () {
-    this.props.onEndMatch()
-  }
-  onClearSplotches () {
-    this.props.onClearSplotches()
-  }
 
   onMouseMove (e) {
     let elem = document.querySelector('.GamePlayArea')
@@ -58,6 +63,33 @@ class GameScreen extends Component {
   onMouseClick (e) {
     this.props.onPlayerClicked(this.mousePos, e.button)
   }
+
+  // Left-button hold starts auto-paint (in addition to the immediate click above); any
+  // other button is just a single click, same as before.
+  onMouseDown (e) {
+    this.onMouseClick(e)
+    if (e.button === 0) this.startAutoPaint()
+  }
+
+  onMouseUp () {
+    this.stopAutoPaint()
+  }
+
+  startAutoPaint () {
+    this.stopAutoPaint()
+    this.autoPaintInterval = setInterval(() => {
+      this.props.onPlayerClicked(this.mousePos, 0)
+    }, AUTO_PAINT_INTERVAL_MS)
+  }
+
+  // Also called when the cursor leaves the play area — the DOM only reports mouse position
+  // while inside it, so once outside there's no live position to keep painting at.
+  stopAutoPaint () {
+    if (this.autoPaintInterval) {
+      clearInterval(this.autoPaintInterval)
+      this.autoPaintInterval = null
+    }
+  }
   onToggleReliable () {
     this.props.onToggleReliable()
   }
@@ -68,17 +100,6 @@ class GameScreen extends Component {
     this.props.onTogglePlayerMask(cxId)
   }
 
-  showEndMatchButton () {
-    return (
-      this.props.lobby.ownerCxId === this.props.user.cxId &&
-      !this.props.disbandOnStart
-    )
-  }
-
-  showClearSplotchesButton () {
-    return this.props.lobby.ownerCxId === this.props.user.cxId
-  }
-
   // Render a colored SVG cursor arrow matching the C++/Java vector arrow shape
   renderArrow (color) {
     return (
@@ -94,25 +115,46 @@ class GameScreen extends Component {
     )
   }
 
-  // Render the game timer. Shows countdown in the final 10 seconds.
+  // Render the game timer, colored by urgency in the closing seconds (matches the
+  // cpp reference's red/orange countdown thresholds). Sits above the canvas, left of
+  // the Exit Match button.
   renderTimer () {
     if (!this.props.gameStartTime) return null
     let elapsedMs = Date.now() - this.props.gameStartTime
     let elapsedSec = Math.max(0, Math.floor(elapsedMs / 1000))
-    let minutes = Math.floor(elapsedSec / 60)
-    let seconds = elapsedSec % 60
+    let remaining = Math.max(0, MATCH_DURATION_SEC - elapsedSec)
+    let minutes = Math.floor(remaining / 60)
+    let seconds = remaining % 60
     let timeStr = `${minutes}:${seconds.toString().padStart(2, '0')}`
 
-    if (elapsedSec >= COUNTDOWN_FROM_SEC && elapsedSec < MATCH_DURATION_SEC) {
-      let remaining = MATCH_DURATION_SEC - elapsedSec
-      return (
-        <p style={{ color: 'red', fontWeight: 'bold' }}>
-          Ending in {remaining}...
-        </p>
-      )
+    // Counts DOWN the whole match (matches cpp/Godot) — only the colour escalates as it
+    // gets low, the format never swaps to a different "Ending in..." string.
+    if (remaining <= TIMER_WARN_SEC) {
+      let color = remaining <= TIMER_URGENT_SEC ? '#ff4d4d' : '#ffbf33'
+      return <span style={{ color, fontWeight: 'bold' }}>Game Time: {timeStr}</span>
     }
 
-    return <p>Game Time: {timeStr}</p>
+    return <span>Game Time: {timeStr}</span>
+  }
+
+  // Single self-relay-RTT readout — ping lives outside the scoreboard sidebar entirely,
+  // just below the timer/Exit Match row (matches the cpp reference).
+  renderSelfPing () {
+    const me = this.props.lobby.members.find(m => m.cxId === this.props.user.cxId)
+    const ping = me ? me.activePing : undefined
+    let text, color
+    if (ping === undefined || ping === null || ping < 0) { text = '...'; color = '#888888' } else if (ping >= 999) {
+      text = 'T/O'; color = '#ff4d4d'
+    } else {
+      text = `${ping} ms`
+      color = ping < 100 ? '#66e585' : ping < 200 ? '#f2cc52' : '#ff4d4d'
+    }
+    return (
+      <p style={{ margin: '4px 0 0' }}>
+        <span style={{ color }}>{'●'}</span>{' '}
+        <span className='text-small' style={{ opacity: 0.7 }}>Ping: {text}</span>
+      </p>
+    )
   }
 
   // Render persistent colour splotches, applying fade-out during the final 3 seconds of their life
@@ -161,91 +203,63 @@ class GameScreen extends Component {
       })
   }
 
-  render () {
-    let numColors = colors.length
+  // Live RANK/PLAYER/COVERAGE standings — see coverage.js (App.tickMatch recomputes
+  // this.props.coverage roughly every 250ms from the current splotches).
+  renderScoreboard () {
+    const coverage = this.props.coverage || []
+    if (coverage.length === 0) return null
+    const numColors = colors.length
 
     return (
-      <div className='GameScreen' style={{ display: 'flex' }}>
-        {/** Info Area */}
-        <div>
-          {this.renderTimer()}
-
-          {/** Current lobby id */}
-          {this.props.lobby && this.props.lobby.lobbyId ? (
-            <p style={{ opacity: 0.45, fontSize: '9pt' }}>
-              Lobby: {this.props.lobby.lobbyId}
-            </p>
-          ) : null}
-
-          {/** Players List / Mask */}
-          <div
-            className='OptionPanel'
-            style={{ paddingRight: 32, textAlign: 'left' }}
-          >
-            <p>Player Mask (For splotches)</p>
-            {this.props.lobby.members.map(member => {
-              const ping = member.activePing
-              let pingText = ''
-              if (ping === undefined || ping === null || ping < 0) pingText = '...'
-              else if (ping >= 999) pingText = 'T/O'
-              else pingText = `${ping} ms`
-              return (
-                <div key={`${member.cxId}_mask`} style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
-                  <input
-                    type='checkbox'
-                    name={`${member.cxId}_mask`}
-                    onChange={() => this.onTogglePlayerMask(member.cxId)}
-                    defaultChecked={member.allowSendTo}
-                  />
-                  <label
-                    htmlFor={`${member.cxId}_mask`}
-                    style={{ color: colors[member.extra.colorIndex % numColors] }}
-                  >
-                    {member.isReady ? member.name : member.name + ' (in lobby)'}
-                  </label>
-                  <span style={{ color: '#888888', fontSize: '11px' }}>{pingText}</span>
-                </div>
-              )
-            })}
-          </div>
+      <div className='Scoreboard'>
+        <div className='ScoreboardHeader'>
+          <span>RANK / PLAYER</span>
+          <span>COVERAGE</span>
+        </div>
+        {coverage.map(entry => {
+          const member = this.props.lobby.members.find(m => m.cxId === entry.cxId)
+          if (!member) return null
+          const isMe = entry.cxId === this.props.user.cxId
+          const colorIndex = member.extra ? member.extra.colorIndex : 0
+          return (
+            <div key={entry.cxId} className={`ScoreboardRow${isMe ? ' ScoreboardRowMe' : ''}`}>
+              <span className='ScoreboardRank' style={{ color: rankColor(entry.rank) }}>#{entry.rank}</span>
+              <span className='ScoreboardDot' style={{ backgroundColor: colors[colorIndex % numColors] }} />
+              <span className='ScoreboardName' style={{ color: isMe ? '#59ff73' : 'white' }}>
+                {member.name}{isMe ? ' (YOU)' : ''}
+              </span>
+              <span className='ScoreboardCoverage' style={{ color: isMe ? '#59ff73' : 'white' }}>
+                {entry.coveragePct.toFixed(0)}%
+              </span>
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
 
-          {/** Reliable/Ordered Options */}
-          <div>
-            <p>Reliable options (For mouse position)</p>
-            <input
-              type='checkbox'
-              key='chkReliable'
-              name='chkReliable'
-              onChange={this.onToggleReliable.bind(this)}
-              defaultChecked={this.props.relayOptions.reliable}
-            />
-            <label htmlFor='chkReliable'>Reliable</label>
-            <br />
-            <input
-              type='checkbox'
-              key='chkOrdered'
-              name='chkOrdered'
-              onChange={this.onToggleOrdered.bind(this)}
-              defaultChecked={this.props.relayOptions.ordered}
-            />
-            <label htmlFor='chkOrdered'>Ordered</label>
-          </div>
+  render () {
+    let numColors = colors.length
 
-          {/** Team Instructions */}
-          {this.props.teams.length > 1 ? (
-            <div>
-              <p>Instructions</p>
-              <p>Left Click = Splotch everybody</p>
-              <p>Right Click = Splotch team mates</p>
-              <p>Middle Click = Splotch opponents</p>
-            </div>
-          ) : (
-            ''
-          )}
+    return (
+      <div className='GameScreen' style={{ display: 'flex', alignItems: 'flex-start', gap: '24px', position: 'relative' }}>
+        {/** Docked full-height scoreboard sidebar — RANK/PLAYER/COVERAGE only, matching the cpp reference */}
+        <div className='Card' style={{ width: `${SIDEBAR_WIDTH}px`, minHeight: 0 }}>
+          {this.renderScoreboard()}
         </div>
 
-        {/** Game Canvas */}
+        {/** Game area: timer/ping/Exit Match header above the canvas */}
         <div>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+            <div style={{ textAlign: 'left' }}>
+              {this.renderTimer()}
+              {this.renderSelfPing()}
+            </div>
+            <button className='Button' onClick={this.onBack.bind(this)}>
+              {'↩'} Exit Match
+            </button>
+          </div>
+
           <div
             className='GamePlayArea'
             style={{
@@ -253,7 +267,9 @@ class GameScreen extends Component {
               float: 'left'
             }}
             onMouseMove={this.onMouseMove.bind(this)}
-            onMouseDown={this.onMouseClick.bind(this)}
+            onMouseDown={this.onMouseDown.bind(this)}
+            onMouseUp={this.onMouseUp.bind(this)}
+            onMouseLeave={this.onMouseUp.bind(this)}
             onContextMenu={e => e.preventDefault()}
           >
             {/** Transient shockwave rings */}
@@ -294,29 +310,74 @@ class GameScreen extends Component {
               })}
           </div>
 
-          {/** Buttons */}
-          <div>
-            <button className='Button' onClick={this.onBack.bind(this)}>
-              Leave Game
-            </button>
-            {this.showEndMatchButton() ? (
-              <button className='Button' onClick={this.onEndMatch.bind(this)}>
-                End Match
-              </button>
-            ) : (
-              ''
-            )}
-            {this.showClearSplotchesButton() ? (
-              <button
-                className='Button'
-                onClick={this.onClearSplotches.bind(this)}
-              >
-                Clear Splotches
-              </button>
-            ) : (
-              ''
-            )}
-          </div>
+          {/** Team Instructions */}
+          {this.props.teams.length > 1 ? (
+            <div style={{ textAlign: 'left', marginTop: '8px' }}>
+              <p className='text-small' style={{ opacity: 0.6, margin: '2px 0' }}>Left Click = Splotch everybody</p>
+              <p className='text-small' style={{ opacity: 0.6, margin: '2px 0' }}>Right Click = Splotch team mates</p>
+              <p className='text-small' style={{ opacity: 0.6, margin: '2px 0' }}>Middle Click = Splotch opponents</p>
+            </div>
+          ) : (
+            ''
+          )}
+        </div>
+
+        {/** Debug/settings panel — floating bottom-right, matches the cpp reference's
+            Debug window (region/round/lobby + Reliable/Ordered/Channel controls; the
+            per-player send-mask list lives here too since this app needs a place for it). */}
+        <div className='DebugPanel'>
+          {this.props.lobby && this.props.lobby.lobbyId ? (
+            <p className='text-small' style={{ opacity: 0.5, margin: '0 0 6px' }}>Lobby: {this.props.lobby.lobbyId}</p>
+          ) : null}
+
+          <p className='text-small' style={{ opacity: 0.6, margin: '0 0 4px' }}>Player Mask (for splotches)</p>
+          {this.props.lobby.members.map(member => {
+            const ping = member.activePing
+            let pingText = ''
+            let pingColor = '#888888'
+            if (ping === undefined || ping === null || ping < 0) pingText = '...'
+            else if (ping >= 999) { pingText = 'T/O'; pingColor = '#ff4d4d' } else {
+              pingText = `${ping} ms`
+              pingColor = ping < 100 ? '#66e585' : ping < 200 ? '#f2cc52' : '#ff4d4d'
+            }
+            return (
+              <div key={`${member.cxId}_mask`} style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                <input
+                  type='checkbox'
+                  name={`${member.cxId}_mask`}
+                  onChange={() => this.onTogglePlayerMask(member.cxId)}
+                  defaultChecked={member.allowSendTo}
+                />
+                <label
+                  htmlFor={`${member.cxId}_mask`}
+                  style={{ color: colors[member.extra.colorIndex % numColors] }}
+                >
+                  {member.isReady ? member.name : member.name + ' (in lobby)'}
+                </label>
+                <span style={{ color: pingColor, fontSize: '11px' }}>{pingText}</span>
+              </div>
+            )
+          })}
+
+          <hr className='lbDivider' />
+          <p className='text-small' style={{ opacity: 0.6, margin: '0 0 4px' }}>Reliable options (for mouse position)</p>
+          <input
+            type='checkbox'
+            key='chkReliable'
+            name='chkReliable'
+            onChange={this.onToggleReliable.bind(this)}
+            defaultChecked={this.props.relayOptions.reliable}
+          />
+          <label htmlFor='chkReliable'>Reliable</label>
+          <br />
+          <input
+            type='checkbox'
+            key='chkOrdered'
+            name='chkOrdered'
+            onChange={this.onToggleOrdered.bind(this)}
+            defaultChecked={this.props.relayOptions.ordered}
+          />
+          <label htmlFor='chkOrdered'>Ordered</label>
         </div>
       </div>
     )
diff --git a/RelayTestApp/src/GlobalChatPanel.js b/RelayTestApp/src/GlobalChatPanel.js
new file mode 100644
index 0000000..f071695
--- /dev/null
+++ b/RelayTestApp/src/GlobalChatPanel.js
@@ -0,0 +1,170 @@
+import React, { Component } from 'react'
+
+// Must match a channel Code pre-registered in the portal (App > Design > Messaging >
+// Chat Channels) — global ("gl") chat channels aren't created ad hoc by getChannelId,
+// they resolve an existing registration or fail with CHAT_UNRECOGNIZED_CHANNEL (40603).
+const CHAT_CHANNEL_TYPE = 'gl'
+const CHAT_CHANNEL_SUB_ID = 'gl'
+const MAX_HISTORY = 30
+const RETRY_BACKOFF_MS = 5000
+
+function parseWireMessage (m) {
+  return {
+    msgId: m.msgId || '',
+    fromName: (m.from && m.from.name) || 'Player',
+    text: (m.content && m.content.text) || ''
+  }
+}
+
+// Shared app-wide "Global" chat channel, used from both the main menu and the lobby.
+// Needs RTT enabled (App.js does this right after login). channelConnect registers the
+// listener and returns initial history in one call; everything after that (including our
+// own sends/edits/deletes) arrives via registerRTTChatCallback — see
+// knowledge-articles/04-chat.md.
+//
+// Props:
+//   bcWrapper — the app's BrainCloudWrapper instance
+class GlobalChatPanel extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      channelId: null,
+      resolving: false,
+      messages: [],
+      input: '',
+      sending: false
+    }
+    this.retryAtMs = 0
+    this.scrollRef = React.createRef()
+    this.onRTTChatEvent = this.onRTTChatEvent.bind(this)
+  }
+
+  componentDidMount () {
+    this.ensureChannel()
+  }
+
+  componentDidUpdate (prevProps, prevState) {
+    this.ensureChannel()
+    if (this.state.messages.length !== prevState.messages.length) {
+      const el = this.scrollRef.current
+      if (el) el.scrollTop = el.scrollHeight
+    }
+  }
+
+  componentWillUnmount () {
+    if (this.state.channelId) {
+      this.props.bcWrapper.rttService.deregisterRTTChatCallback()
+    }
+  }
+
+  // Resolves the shared global channel once RTT is up, connects (which also returns
+  // initial history in the same response), and registers for live push. Safe to call
+  // on every update — no-ops once resolved, in flight, or backing off after a recent
+  // failure (so a persistent failure can't turn into a same-call-every-render loop —
+  // brainCloud's abuse detection disables the client after enough repeated failures
+  // on one API call).
+  ensureChannel () {
+    const { bcWrapper } = this.props
+    if (!bcWrapper || this.state.channelId || this.state.resolving) return
+    if (!bcWrapper.rttService.isRTTEnabled()) return
+    if (Date.now() < this.retryAtMs) return
+
+    this.setState({ resolving: true })
+    bcWrapper.chat.getChannelId(CHAT_CHANNEL_TYPE, CHAT_CHANNEL_SUB_ID, result => {
+      if (result.status === 200 && result.data.channelId) {
+        this.connectChannel(result.data.channelId)
+      } else {
+        this.retryAtMs = Date.now() + RETRY_BACKOFF_MS
+        this.setState({ resolving: false })
+      }
+    })
+  }
+
+  connectChannel (channelId) {
+    this.props.bcWrapper.chat.channelConnect(channelId, MAX_HISTORY, result => {
+      if (result.status !== 200) {
+        this.retryAtMs = Date.now() + RETRY_BACKOFF_MS
+        this.setState({ resolving: false })
+        return
+      }
+      // Server already returns these ascending/oldest-first (it re-sorts from its
+      // native descending storage order before responding) — no reverse needed. Same
+      // order as the RTT push appends, so history and live messages never conflict.
+      const messages = result.data.messages.map(parseWireMessage)
+      this.props.bcWrapper.rttService.registerRTTChatCallback(this.onRTTChatEvent)
+      this.setState({ channelId, resolving: false, messages })
+    })
+  }
+
+  // New messages, edits, and deletes all arrive on the same RTT event, keyed by msgId —
+  // a message updated or deleted after it's scrolled out of the fetched window is simply
+  // not found below and the event is a no-op, which is correct (nothing on screen to change).
+  onRTTChatEvent (result) {
+    const data = result.data || {}
+    if (result.operation === 'INCOMING') {
+      this.setState({ messages: this.state.messages.concat([parseWireMessage(data)]) })
+    } else if (result.operation === 'UPDATE') {
+      // Same shape as INCOMING (full message, edited content) — replace in place so it
+      // doesn't jump to the bottom of the scroll.
+      const updated = parseWireMessage(data)
+      this.setState({
+        messages: this.state.messages.map(m => (m.msgId === updated.msgId ? updated : m))
+      })
+    } else if (result.operation === 'DELETE') {
+      // DELETE's payload is just {chId, msgId} -- no content/from -- so only msgId is usable here.
+      this.setState({
+        messages: this.state.messages.filter(m => m.msgId !== data.msgId)
+      })
+    }
+  }
+
+  onInputChange (e) {
+    this.setState({ input: e.target.value })
+  }
+
+  onKeyDown (e) {
+    if (e.key === 'Enter') this.send()
+  }
+
+  send () {
+    const { channelId, input, sending } = this.state
+    if (!channelId || !input.trim() || sending) return
+    this.setState({ input: '', sending: true })
+    this.props.bcWrapper.chat.postChatMessageSimple(channelId, input, true, () => {
+      this.setState({ sending: false })
+    })
+  }
+
+  render () {
+    const { channelId, resolving, messages, input } = this.state
+    return (
+      <div className='GlobalChatPanel'>
+        {!channelId ? (
+          <p className='text-small'>{resolving ? 'Connecting...' : 'Chat unavailable.'}</p>
+        ) : (
+          <>
+            <div className='chatScroll' ref={this.scrollRef}>
+              {messages.map((m, i) => (
+                <p key={m.msgId || i} className='chatLine'>
+                  <span className='chatFrom'>{m.fromName}:</span> {m.text}
+                </p>
+              ))}
+            </div>
+            <div className='chatInputRow'>
+              <input
+                type='text'
+                value={input}
+                onChange={this.onInputChange.bind(this)}
+                onKeyDown={this.onKeyDown.bind(this)}
+                placeholder='Say something...'
+              />
+              <button className='Button chatSendBtn' onClick={this.send.bind(this)}>Send</button>
+            </div>
+          </>
+        )}
+      </div>
+    )
+  }
+}
+
+export default GlobalChatPanel
diff --git a/RelayTestApp/src/LeaderboardPanel.js b/RelayTestApp/src/LeaderboardPanel.js
new file mode 100644
index 0000000..baeb30f
--- /dev/null
+++ b/RelayTestApp/src/LeaderboardPanel.js
@@ -0,0 +1,154 @@
+import React, { Component } from 'react'
+
+// Must match leaderboards configured on the app (Design > Leaderboards) — these are
+// the same default ids leaderboardPanel.cpp posts to and reads from.
+export const LEADERBOARD_IDS = {
+  points: { lifetime: 'CursorParty_Points', quarterly: 'CursorParty_Points_Quarterly' },
+  coverage: { lifetime: 'CursorParty_HighestCoverage', quarterly: 'CursorParty_HighestCoverage_Quarterly' }
+}
+
+// Gold/silver/bronze/white — shared with the lobby member list's rank display.
+export function rankColor (rank) {
+  if (rank === 1) return '#ffd700'
+  if (rank === 2) return '#c0c0c0'
+  if (rank === 3) return '#cc8833'
+  return '#ffffff'
+}
+
+// The coverage board's raw score is basis points (coveragePct*100, since brainCloud
+// leaderboard scores are integers) — divide back down for display. The points board's
+// raw score is already the real value.
+function formatScore (score, boardType) {
+  if (boardType === 'coverage') return `${(score / 100).toFixed(1)}%`
+  return String(score).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+}
+
+// Shared leaderboard viewer — top 5 + "you" row, toggleable between the two boards this
+// app posts to (points / coverage) and Lifetime vs Quarterly. Mirrors leaderboardPanel.cpp.
+// Scores only appear once a match's coverage/win-ranking has been posted (BCLOUD-14472/14490).
+//
+// Props:
+//   bcWrapper
+class LeaderboardPanel extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      boardType: 'points', // 'points' | 'coverage'
+      period: 'lifetime', // 'lifetime' | 'quarterly'
+      resultsByKey: {} // "<boardType>:<period>" -> { top: [...], self: {...}|null }
+    }
+    this.pendingKeys = new Set()
+  }
+
+  componentDidMount () {
+    this.fetchIfNeeded()
+  }
+
+  componentDidUpdate () {
+    this.fetchIfNeeded()
+  }
+
+  currentKey () {
+    return `${this.state.boardType}:${this.state.period}`
+  }
+
+  parseEntry (entry) {
+    return {
+      name: (entry.data && entry.data.name) || 'Player',
+      score: entry.score,
+      rank: entry.rank
+    }
+  }
+
+  fetchIfNeeded () {
+    const { bcWrapper } = this.props
+    const key = this.currentKey()
+    if (!bcWrapper || this.state.resultsByKey[key] || this.pendingKeys.has(key)) return
+    this.pendingKeys.add(key)
+
+    const leaderboardId = LEADERBOARD_IDS[this.state.boardType][this.state.period]
+    const HIGH_TO_LOW = bcWrapper.socialLeaderboard.sortOrder.HIGH_TO_LOW
+
+    const mergeResult = (partial) => {
+      this.setState(prev => ({
+        resultsByKey: {
+          ...prev.resultsByKey,
+          [key]: { top: [], self: null, ...prev.resultsByKey[key], ...partial }
+        }
+      }))
+    }
+
+    bcWrapper.socialLeaderboard.getGlobalLeaderboardPage(leaderboardId, HIGH_TO_LOW, 0, 4, result => {
+      mergeResult({ top: result.status === 200 ? (result.data.leaderboard || []).map(this.parseEntry) : [] })
+    })
+
+    // beforeCount=0/afterCount=0 returns just the current player's own entry.
+    bcWrapper.socialLeaderboard.getGlobalLeaderboardView(leaderboardId, HIGH_TO_LOW, 0, 0, result => {
+      const entries = result.status === 200 ? result.data.leaderboard : []
+      mergeResult({ self: entries && entries.length > 0 ? this.parseEntry(entries[0]) : null })
+    })
+  }
+
+  setBoardType (boardType) {
+    this.setState({ boardType })
+  }
+
+  setPeriod (period) {
+    this.setState({ period })
+  }
+
+  render () {
+    const { boardType, period } = this.state
+    const { top, self } = this.state.resultsByKey[this.currentKey()] || { top: [], self: null }
+    const alreadyShown = self && top.some(row => row.rank === self.rank)
+
+    return (
+      <div className='LeaderboardPanel'>
+        <div className='lbToggleRow'>
+          <button
+            className={`lbToggleBtn${boardType === 'points' ? ' active' : ''}`}
+            onClick={this.setBoardType.bind(this, 'points')}
+          >Most Opponents Beaten</button>
+          <button
+            className={`lbToggleBtn${boardType === 'coverage' ? ' active' : ''}`}
+            onClick={this.setBoardType.bind(this, 'coverage')}
+          >Highest Coverage %</button>
+        </div>
+        <div className='lbToggleRow'>
+          <button
+            className={`lbToggleBtn lbPeriodBtn${period === 'lifetime' ? ' active' : ''}`}
+            onClick={this.setPeriod.bind(this, 'lifetime')}
+          >Lifetime</button>
+          <button
+            className={`lbToggleBtn lbPeriodBtn${period === 'quarterly' ? ' active' : ''}`}
+            onClick={this.setPeriod.bind(this, 'quarterly')}
+          >Quarterly</button>
+        </div>
+        <hr className='lbDivider' />
+        {top.length === 0 ? (
+          <p className='text-small'>No scores yet — be the first!</p>
+        ) : (
+          top.map((row, i) => (
+            <div key={i} className='lbRow'>
+              <span className='lbRank' style={{ color: rankColor(row.rank) }}>#{row.rank}</span>
+              <span className='lbName'>{row.name}</span>
+              <span className='lbScore'>{formatScore(row.score, boardType)}</span>
+            </div>
+          ))
+        )}
+        {self && !alreadyShown ? (
+          <>
+            {top.length > 0 ? <p className='text-small lbEllipsis'>...</p> : null}
+            <div className='lbRow lbSelfRow'>
+              <span className='lbRank' style={{ color: rankColor(self.rank) }}>#{self.rank}</span>
+              <span className='lbName'>{self.name} (You)</span>
+              <span className='lbScore'>{formatScore(self.score, boardType)}</span>
+            </div>
+          </>
+        ) : null}
+      </div>
+    )
+  }
+}
+
+export default LeaderboardPanel
diff --git a/RelayTestApp/src/LobbyScreen.js b/RelayTestApp/src/LobbyScreen.js
index 6fe00b3..3eda576 100644
--- a/RelayTestApp/src/LobbyScreen.js
+++ b/RelayTestApp/src/LobbyScreen.js
@@ -1,6 +1,8 @@
 import React, { Component } from 'react'
 
 import { getShowJoinButton } from './App'
+import GlobalChatPanel from './GlobalChatPanel'
+import LeaderboardPanel, { rankColor } from './LeaderboardPanel'
 
 let colors = require('./Colors').colors
 
@@ -18,9 +20,49 @@ function regionFromLobbyId (lobbyId) {
 // Props:
 // user
 // lobby
+// teams
+// lobbyResetting
 // usePingData
 // pingData
+// bcWrapper
+// isProvisioning / provisioningStatus — non-blocking "starting the next round" banner
+// matchResult — last finished round's standings (valid/round/entries), for the INFO tab
+// onBack / onColorChanged / onTeamChanged / onStart / onToggleReady / onJoin / onSendLobbySignal
 class LobbyScreen extends Component {
+  constructor (props) {
+    super(props)
+    this.state = { rightTab: 'chat', chatSubTab: 'lobby', signalInput: '', colorPickerOpen: false }
+    this.arrivalTime = Date.now()
+    this.lobbyChatScrollRef = React.createRef()
+  }
+
+  componentDidMount () {
+    // Live-updates the INFO tab's "time in lobby" clock.
+    this.tickInterval = setInterval(() => this.forceUpdate(), 1000)
+
+    // Start scrolled to the newest message if there's already history (e.g. returning
+    // to the lobby with chat carried over from before the match) — componentDidUpdate
+    // only catches messages arriving after mount, not what's already there.
+    const el = this.lobbyChatScrollRef.current
+    if (el) el.scrollTop = el.scrollHeight
+  }
+
+  componentDidUpdate (prevProps) {
+    // Keep the This-Lobby chat scrolled to the newest message (mirrors GlobalChatPanel's
+    // own auto-scroll) — chatMessages only grows via App.onSendLobbySignal/the SIGNAL
+    // case in onLobbyEvent, so a length change always means new messages arrived.
+    const prevCount = (prevProps.lobby && prevProps.lobby.chatMessages && prevProps.lobby.chatMessages.length) || 0
+    const count = (this.props.lobby && this.props.lobby.chatMessages && this.props.lobby.chatMessages.length) || 0
+    if (count !== prevCount) {
+      const el = this.lobbyChatScrollRef.current
+      if (el) el.scrollTop = el.scrollHeight
+    }
+  }
+
+  componentWillUnmount () {
+    clearInterval(this.tickInterval)
+  }
+
   onBack () {
     this.props.onBack()
   }
@@ -29,6 +71,10 @@ class LobbyScreen extends Component {
     this.props.onStart()
   }
 
+  onToggleReady () {
+    this.props.onToggleReady()
+  }
+
   onJoin () {
     this.props.onJoin()
   }
@@ -43,6 +89,11 @@ class LobbyScreen extends Component {
     }
     localStorage.setItem('color', '' + index)
     this.props.onColorChanged(index)
+    this.setState({ colorPickerOpen: false })
+  }
+
+  toggleColorPicker () {
+    this.setState(s => ({ colorPickerOpen: !s.colorPickerOpen }))
   }
 
   onTeamSelected (teamName) {
@@ -50,6 +101,125 @@ class LobbyScreen extends Component {
     this.props.onTeamChanged(teamName)
   }
 
+  setRightTab (tab) {
+    this.setState({ rightTab: tab })
+  }
+
+  setChatSubTab (tab) {
+    this.setState({ chatSubTab: tab })
+  }
+
+  onSignalInputChange (e) {
+    this.setState({ signalInput: e.target.value })
+  }
+
+  onSignalKeyDown (e) {
+    if (e.key === 'Enter') this.sendSignal()
+  }
+
+  sendSignal () {
+    const text = this.state.signalInput
+    if (!text.trim()) return
+    this.props.onSendLobbySignal(text)
+    this.setState({ signalInput: '' })
+  }
+
+  // This-lobby chat (Lobby service SendSignal — state.lobby.chatMessages, appended to
+  // by App.onSendLobbySignal on send and the SIGNAL case in onLobbyEvent on receive).
+  renderLobbySignalChat () {
+    const messages = this.props.lobby.chatMessages || []
+    return (
+      <div className='GlobalChatPanel'>
+        <div className='chatScroll' ref={this.lobbyChatScrollRef}>
+          {messages.map((m, i) => (
+            <p key={i} className='chatLine'>
+              <span className='chatFrom'>{m.fromName}:</span> {m.text}
+            </p>
+          ))}
+        </div>
+        <div className='chatInputRow'>
+          <input
+            type='text'
+            value={this.state.signalInput}
+            onChange={this.onSignalInputChange.bind(this)}
+            onKeyDown={this.onSignalKeyDown.bind(this)}
+            placeholder='Say something...'
+          />
+          <button className='Button chatSendBtn' onClick={this.sendSignal.bind(this)}>Send</button>
+        </div>
+      </div>
+    )
+  }
+
+  renderChatTab () {
+    return (
+      <>
+        <div className='lbToggleRow'>
+          <button
+            className={`lbToggleBtn${this.state.chatSubTab === 'lobby' ? ' active' : ''}`}
+            onClick={this.setChatSubTab.bind(this, 'lobby')}
+          >THIS LOBBY</button>
+          <button
+            className={`lbToggleBtn${this.state.chatSubTab === 'global' ? ' active' : ''}`}
+            onClick={this.setChatSubTab.bind(this, 'global')}
+          >GLOBAL</button>
+        </div>
+        <hr className='lbDivider' />
+        {this.state.chatSubTab === 'lobby' ? (
+          this.renderLobbySignalChat()
+        ) : (
+          <GlobalChatPanel bcWrapper={this.props.bcWrapper} />
+        )}
+      </>
+    )
+  }
+
+  // INFO tab — lobby id/region/player count/time-in-lobby + ping data (when enabled).
+  renderInfoTab () {
+    const lobbyRegionId = regionFromLobbyId(this.props.lobby.lobbyId)
+    const secondsInLobby = Math.floor((Date.now() - this.arrivalTime) / 1000)
+    const mm = Math.floor(secondsInLobby / 60)
+    const ss = String(secondsInLobby % 60).padStart(2, '0')
+
+    return (
+      <div className='text-small' style={{ textAlign: 'left' }}>
+        <p>Lobby: {this.props.lobby.lobbyId}</p>
+        {lobbyRegionId ? <p>Region: {lobbyRegionId}</p> : null}
+        <p>Players: {this.props.lobby.members.length}</p>
+        <p>Time in lobby: {mm}:{ss}</p>
+        {this.renderLastMatchResults()}
+        {this.renderPingTable()}
+      </div>
+    )
+  }
+
+  // Last match results — shown once a round finishes (App.state.matchResult) until the
+  // next round starts. Entries are already in rank order (see coverage.js).
+  renderLastMatchResults () {
+    const matchResult = this.props.matchResult
+    if (!matchResult || !matchResult.valid) return null
+
+    return (
+      <div style={{ marginTop: '12px' }}>
+        <hr className='lbDivider' />
+        <p style={{ margin: '4px 0', fontWeight: 'bold', opacity: 0.6 }}>Last Match Results</p>
+        {matchResult.entries.map(entry => {
+          const member = this.props.lobby.members.find(m => m.cxId === entry.cxId)
+          const name = member ? member.name : '?'
+          const isMe = entry.cxId === this.props.user.cxId
+          return (
+            <p key={entry.cxId} style={{ margin: '2px 0' }}>
+              <span style={{ color: rankColor(entry.rank), fontWeight: 'bold' }}>#{entry.rank}</span>{' '}
+              <span style={isMe ? { color: '#59ff73' } : {}}>
+                {name}  {entry.coveragePct.toFixed(1)}%  (+{entry.beaten + 1} pts)
+              </span>
+            </p>
+          )
+        })}
+      </div>
+    )
+  }
+
   // Render the ping data table — only shown when usePingData is true and there is data
   renderPingTable () {
     if (!this.props.usePingData) return null
@@ -131,103 +301,152 @@ class LobbyScreen extends Component {
     )
   }
 
+  // Colour picker — a small popup under your own swatch, not an always-visible 40-swatch
+  // grid (only shown in FFA; team colour is auto-assigned by team).
+  renderColorPicker () {
+    if (!this.state.colorPickerOpen) return null
+    return (
+      <div className='ColorPickerPopup'>
+        {colors.map((color, i) => (
+          <div
+            key={color + i}
+            className='colorBtn'
+            style={{ backgroundColor: color }}
+            onClick={this.onColorSelected.bind(this, i)}
+            title={i}
+          />
+        ))}
+      </div>
+    )
+  }
+
+  // A member's row — colour swatch (clickable, opens the picker, on your own row in FFA
+  // lobbies), name, YOU/HOST badges, ready-state line. Used by both FFA and team member
+  // lists.
+  renderMemberRow (member) {
+    const isMe = member.cxId === this.props.user.cxId
+    const isHost = member.cxId === this.props.lobby.ownerCxId
+    const color = colors[member.extra.colorIndex % colors.length]
+    const canPickColor = isMe && this.props.teams.length === 1
+
+    return (
+      <li key={member.cxId} className='memberRow'>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <div
+            className='memberSwatch'
+            style={{ backgroundColor: color, cursor: canPickColor ? 'pointer' : 'default' }}
+            onClick={canPickColor ? this.toggleColorPicker.bind(this) : undefined}
+          />
+          <span style={{ color: isMe ? '#59ff73' : 'white' }}>{member.name}</span>
+          {isMe ? <span className='memberBadge'>YOU</span> : null}
+          {isHost ? <span className='memberBadge memberBadgeHost'>HOST</span> : null}
+        </div>
+        {canPickColor ? this.renderColorPicker() : null}
+        <p className='memberStatus'>{member.isReady ? 'Ready' : 'Not ready'}</p>
+      </li>
+    )
+  }
+
+  // Small non-blocking status line shown while a round is being provisioned (STARTING ->
+  // ROOM_READY) — the rest of the Lobby screen (chat, member list, etc.) stays fully
+  // usable underneath it instead of being replaced by a blocking loading screen.
+  renderProvisioningBanner () {
+    if (!this.props.isProvisioning) return null
+    return (
+      <div className='ProvisioningBanner'>
+        Starting round... {this.props.provisioningStatus}
+      </div>
+    )
+  }
+
   render () {
     return (
       <div className='LobbyScreen'>
-        <div>
-          {
-            /** If there are no teams, users can select their own colour. Otherwise, colour will initially be assigned automatically by team. */
-            this.props.teams.length === 1 ? (
-              <div
-                style={{
-                  display: 'flex',
-                  flexWrap: 'wrap',
-                  maxWidth: '320px',
-                  justifyContent: 'flex-start'
-                }}
-              >
-                {colors.map((color, i) => (
-                  <div
-                    key={color + i}
-                    className='colorBtn'
-                    style={{
-                      backgroundColor: color,
-                      display: 'inline-block',
-                      width: '28px',
-                      height: '24px'
-                    }}
-                    onClick={this.onColorSelected.bind(this, i)}
-                    title={i}
-                  />
-                ))}
-              </div>
-            ) : (
-              ''
-            )
-          }
-        </div>
-        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-          {this.props.teams.map((team, index) => (
-            <div key={team.name}>
-              {this.props.teams.length > 1 ? (
+        {this.renderProvisioningBanner()}
+        <div className='CardsRow'>
+          <div className='Card'>
+            <p style={{ margin: '0 0 4px', fontWeight: 'bold' }}>Lobby</p>
+            <hr className='lbDivider' />
+            <p className='text-small' style={{ opacity: 0.6, margin: '0 0 6px' }}>Members</p>
+            <div className='memberListScroll'>
+              {this.props.teams.map((team, index) => (
+                <div key={team.name}>
+                  {this.props.teams.length > 1 ? (
+                    <button
+                      key={index}
+                      className='teamBtn'
+                      onClick={this.onTeamSelected.bind(this, team.name)}
+                    >
+                      Join Team {team.name}
+                    </button>
+                  ) : (
+                    ''
+                  )}
+                  <ul style={{ listStyle: 'none', paddingLeft: 0, margin: 0 }}>
+                    {team.members.map(member => this.renderMemberRow(member))}
+                  </ul>
+                </div>
+              ))}
+            </div>
+            <div style={{ display: 'flex', justifyContent: 'center', marginTop: 'auto' }}>
+              <button className='Button' onClick={this.onBack.bind(this)}>
+                Leave
+              </button>
+              {this.props.lobby.ownerCxId === this.props.user.cxId &&
+              !this.props.user.isReady ? (
+                // Host can always start manually, round 2+ included — App.tickRematchGate()
+                // still auto-starts in the background once everyone's queued up or the wait
+                // times out, so this button is just an early-start option, not the only way in.
                 <button
-                  key={index}
-                  className='teamBtn'
-                  onClick={this.onTeamSelected.bind(this, team.name)}
+                  className='Button ButtonPrimary'
+                  onClick={this.onStart.bind(this)}
+                  disabled={this.props.lobbyResetting}
                 >
-                  Join Team {team.name}
+                  Start
+                </button>
+              ) : this.props.lobby.ownerCxId !== this.props.user.cxId ? (
+                // Only the host has a "Start" button (starting the round is host-only),
+                // but every other member still needs a way to signal they're ready —
+                // this toggle stays available in every round, not just the first.
+                <button
+                  className='Button ButtonPrimary'
+                  onClick={this.onToggleReady.bind(this)}
+                >
+                  {this.props.user.isReady ? 'Not Ready' : 'Ready Up'}
+                </button>
+              ) : (
+                ''
+              )}
+              {getShowJoinButton() ? (
+                <button className='Button ButtonPrimary' onClick={this.onJoin.bind(this)}>
+                  Join Match
                 </button>
               ) : (
                 ''
               )}
-              <ul>
-                {team.members.map(member =>
-                  member.cxId === this.props.lobby.ownerCxId ? (
-                    <li
-                      key={member.cxId}
-                      style={{ color: colors[member.extra.colorIndex] }}
-                    >
-                      {member.name + ' (host)'}
-                    </li>
-                  ) : (
-                    <li
-                      key={member.cxId}
-                      style={{ color: colors[member.extra.colorIndex] }}
-                    >
-                      {member.name}
-                    </li>
-                  )
-                )}
-              </ul>
             </div>
-          ))}
-        </div>
-        <div style={{ display: 'flex', justifyContent: 'center' }}>
-          <button className='Button' onClick={this.onBack.bind(this)}>
-            Leave
-          </button>
-          {this.props.lobby.ownerCxId === this.props.user.cxId &&
-          !this.props.user.isReady ? (
-            <button
-              className='Button'
-              onClick={this.onStart.bind(this)}
-              disabled={this.props.lobbyResetting}
-            >
-              Start
-            </button>
-          ) : (
-            ''
-          )}
-          {getShowJoinButton() ? (
-            <button className='Button' onClick={this.onJoin.bind(this)}>
-              Join Match
-            </button>
-          ) : (
-            ''
-          )}
+          </div>
+
+          <div className='Card CardRight'>
+            <div className='CardTabRow'>
+              <button
+                className={`CardTabBtn${this.state.rightTab === 'chat' ? ' active' : ''}`}
+                onClick={this.setRightTab.bind(this, 'chat')}
+              >CHAT</button>
+              <button
+                className={`CardTabBtn${this.state.rightTab === 'leaderboards' ? ' active' : ''}`}
+                onClick={this.setRightTab.bind(this, 'leaderboards')}
+              >LEADERBOARDS</button>
+              <button
+                className={`CardTabBtn${this.state.rightTab === 'info' ? ' active' : ''}`}
+                onClick={this.setRightTab.bind(this, 'info')}
+              >INFO</button>
+            </div>
+            {this.state.rightTab === 'chat' ? this.renderChatTab() : null}
+            {this.state.rightTab === 'leaderboards' ? <LeaderboardPanel bcWrapper={this.props.bcWrapper} /> : null}
+            {this.state.rightTab === 'info' ? this.renderInfoTab() : null}
+          </div>
         </div>
-        <p>Lobby ID: {this.props.lobby.lobbyId}</p>
-        {this.renderPingTable()}
       </div>
     )
   }
diff --git a/RelayTestApp/src/MainMenuScreen.js b/RelayTestApp/src/MainMenuScreen.js
index e893bb2..c58e38f 100644
--- a/RelayTestApp/src/MainMenuScreen.js
+++ b/RelayTestApp/src/MainMenuScreen.js
@@ -1,19 +1,23 @@
 import React, { Component } from 'react'
 import packageJson from '../package.json'
 import ids from './ids'
+import GlobalChatPanel from './GlobalChatPanel'
+import LeaderboardPanel from './LeaderboardPanel'
 
 // Props:
 //  user
 //  appLobbies
 //  usePingData
 //  lastLobbyType  — previously selected lobby type, used to default the dropdown
+//  defaultProtocol — ?protocol= URL override for the relay protocol dropdown (e.g. "wss")
+//  bcWrapper
 //  onPlay
 //  onLogout
 class MainMenuScreen extends Component
 {
     constructor(props) {
         super(props)
-        this.state = { usePingData: !!props.usePingData }
+        this.state = { usePingData: !!props.usePingData, rightTab: 'leaderboard' }
     }
 
     onLogout()
@@ -22,13 +26,19 @@ class MainMenuScreen extends Component
     }
 
     onPlay(e) {
+        console.log('[DEBUG] MainMenuScreen.onPlay fired') // TEMP diagnostic — remove once Play navigation is confirmed working
         e.preventDefault();
         const form = e.target
         const formData = new FormData(form)
         const formJson = Object.fromEntries(formData.entries());
+        console.log('[DEBUG] onPlay form values', formJson) // TEMP diagnostic
         this.props.onPlay(formJson.lobbyTypes, formJson.usePingData === 'on', formJson.relayProtocol)
     }
 
+    setRightTab(tab) {
+        this.setState({ rightTab: tab })
+    }
+
     render()
     {
         let versionSuffix = ""
@@ -47,49 +57,79 @@ class MainMenuScreen extends Component
                 break
         }
 
-        // Default the dropdown to the last selected lobby type, but only if it is
-        // still a valid option; otherwise fall back to the first available lobby.
+        // Default the dropdown to the last selected lobby type (or a ?lobbyType= URL
+        // override, matched case-insensitively so links don't need exact casing), but
+        // only if it is still a valid option; otherwise fall back to the first lobby.
         let defaultLobbyType = this.props.lastLobbyType
-        if (!this.props.appLobbies.some(lobby => lobby.lobby === defaultLobbyType)) {
-            defaultLobbyType = this.props.appLobbies.length > 0 ? this.props.appLobbies[0].lobby : ''
-        }
+        const matchedLobby = this.props.appLobbies.find(lobby =>
+            lobby.lobby.toLowerCase() === (defaultLobbyType || '').toLowerCase())
+        defaultLobbyType = matchedLobby
+            ? matchedLobby.lobby
+            : (this.props.appLobbies.length > 0 ? this.props.appLobbies[0].lobby : '')
+
+        // Default the protocol dropdown to a ?protocol= URL override (e.g. "wss" for
+        // testing), matched case-insensitively; falls back to "ws" if absent/invalid.
+        const validProtocols = ['ws', 'wss']
+        const urlProtocol = (this.props.defaultProtocol || '').toLowerCase()
+        const defaultProtocol = validProtocols.includes(urlProtocol) ? urlProtocol : 'ws'
 
         return (
             <div id="main-wrapper">
-                <form onSubmit={this.onPlay.bind(this)}>
-                    <p className="text-small">Logged in as {this.props.user.name}</p>
-                    <label>Choose lobby type:</label>
-                    <select name="lobbyTypes" defaultValue={defaultLobbyType}>
-                        {
-                            this.props.appLobbies.map((lobby, index) =>
-                                <option key={index} value={lobby.lobby}>{lobby.lobby}</option>
-                            )
-                        }
-                    </select>
-                    <div style={{ margin: '8px 0' }}>
-                        <label>Protocol:</label>
-                        <select name="relayProtocol" style={{ marginLeft: '6px' }}>
-                            <option value="ws">WS (WebSocket)</option>
-                            <option value="wss">WSS (WebSocket Secure)</option>
-                        </select>
+                <div className="CardsRow">
+                    <div className="Card">
+                        <form onSubmit={this.onPlay.bind(this)}>
+                            <p className="text-small">Logged in as {this.props.user.name}</p>
+                            <label>Choose lobby type:</label>
+                            <select name="lobbyTypes" defaultValue={defaultLobbyType}>
+                                {
+                                    this.props.appLobbies.map((lobby, index) =>
+                                        <option key={index} value={lobby.lobby}>{lobby.lobby}</option>
+                                    )
+                                }
+                            </select>
+                            <div style={{ margin: '8px 0' }}>
+                                <label>Protocol:</label>
+                                <select name="relayProtocol" style={{ marginLeft: '6px' }} defaultValue={defaultProtocol}>
+                                    <option value="ws">WS (WebSocket)</option>
+                                    <option value="wss">WSS (WebSocket Secure)</option>
+                                </select>
+                            </div>
+                            <div style={{ margin: '8px 0' }}>
+                                <input
+                                    type="checkbox"
+                                    id="usePingData"
+                                    name="usePingData"
+                                    defaultChecked={this.state.usePingData}
+                                />
+                                <label htmlFor="usePingData" style={{ marginLeft: '6px' }}>
+                                    With Ping Region Data
+                                </label>
+                            </div>
+                            <div className="btn-frame">
+                                <button className="Button" type="button" onClick={this.onLogout.bind(this)}>LOG OUT</button>
+                                <button className="Button ButtonPrimary" type="submit">PLAY</button>
+                            </div>
+                        </form>
                     </div>
-                    <div style={{ margin: '8px 0' }}>
-                        <input
-                            type="checkbox"
-                            id="usePingData"
-                            name="usePingData"
-                            defaultChecked={this.state.usePingData}
-                        />
-                        <label htmlFor="usePingData" style={{ marginLeft: '6px' }}>
-                            With Ping Region Data
-                        </label>
-                    </div>
-                    <div className="btn-frame">
-                        <button className="Button" onClick={this.onLogout.bind(this)}>LOG OUT</button>
-                        <button className="Button" type="submit">PLAY</button>
-                    </div>
-                </form>
 
+                    <div className="Card CardRight">
+                        <div className="CardTabRow">
+                            <button
+                                className={`CardTabBtn${this.state.rightTab === 'leaderboard' ? ' active' : ''}`}
+                                onClick={this.setRightTab.bind(this, 'leaderboard')}
+                            >LEADERBOARD</button>
+                            <button
+                                className={`CardTabBtn${this.state.rightTab === 'chat' ? ' active' : ''}`}
+                                onClick={this.setRightTab.bind(this, 'chat')}
+                            >CHAT</button>
+                        </div>
+                        {this.state.rightTab === 'leaderboard' ? (
+                            <LeaderboardPanel bcWrapper={this.props.bcWrapper} />
+                        ) : (
+                            <GlobalChatPanel bcWrapper={this.props.bcWrapper} />
+                        )}
+                    </div>
+                </div>
 
                 <div className="bottomText">
                     <small className="ver-text">Version: {packageJson.version}{versionSuffix}</small>
diff --git a/RelayTestApp/src/MatchSummaryScreen.js b/RelayTestApp/src/MatchSummaryScreen.js
new file mode 100644
index 0000000..b53c050
--- /dev/null
+++ b/RelayTestApp/src/MatchSummaryScreen.js
@@ -0,0 +1,170 @@
+import React, { Component } from 'react'
+import { rankColor } from './LeaderboardPanel'
+
+let colors = require('./Colors').colors
+
+const MATCH_SUMMARY_REMATCH_MS = 45000
+
+// How long a player card waits for its leaderboard delta (polled from the GlobalEntity
+// PostMatchResults writes — see App.js's pollMatchResults) before giving up and showing
+// "Leaderboard unavailable" instead of spinning forever — the cloud script call is
+// best-effort, so this is the backstop for when it never shows up.
+const LEADERBOARD_RESULT_TIMEOUT_MS = 8000
+
+// Builds the "Lifetime #before->#after | Quarterly #before->#after" tail, omitting any
+// period that didn't improve.
+function periodsText (lifetime, quarterly) {
+  const parts = []
+  if (lifetime.improved) parts.push(`Lifetime #${lifetime.rankBefore < 0 ? '-' : lifetime.rankBefore} -> #${lifetime.rankAfter}`)
+  if (quarterly.improved) parts.push(`Quarterly #${quarterly.rankBefore < 0 ? '-' : quarterly.rankBefore} -> #${quarterly.rankAfter}`)
+  return parts.join('   |   ')
+}
+
+const EMPTY_DELTA = { ready: false, pointsLifetime: {}, pointsQuarterly: {}, coverageLifetime: {}, coverageQuarterly: {} }
+
+// Post-match results + rematch-queue screen (BCLOUD-14489). Shows placements and rank
+// deltas, then auto-rematches after MATCH_SUMMARY_REMATCH_MS or once everyone queues up
+// (see App.tickRematchGate).
+//
+// Props:
+//   user, lobby, matchResult ({valid, round, entries}), matchSummaryArrivalTime
+//   onSetRematchReady(ready) / onMainMenu()
+class MatchSummaryScreen extends Component {
+  componentDidMount () {
+    // Live-updates the countdown and drives this player's own auto-queue timeout.
+    this.tickInterval = setInterval(() => this.tick(), 1000)
+  }
+
+  componentWillUnmount () {
+    clearInterval(this.tickInterval)
+  }
+
+  tick () {
+    // Per-player auto-queue: if this player hasn't clicked "Queue for Rematch" themselves
+    // by MATCH_SUMMARY_REMATCH_MS, queue them automatically — matches the "if players do
+    // nothing, auto rematch" requirement without waiting on anyone else.
+    if (!this.props.user.isReady) {
+      const elapsedMs = Date.now() - (this.props.matchSummaryArrivalTime || Date.now())
+      if (elapsedMs >= MATCH_SUMMARY_REMATCH_MS) {
+        this.props.onSetRematchReady(true)
+        return
+      }
+    }
+    this.forceUpdate()
+  }
+
+  renderPlayerCard (entry) {
+    const member = this.props.lobby.members.find(m => m.cxId === entry.cxId)
+    const name = member ? member.name : '?'
+    const colorIndex = (member && member.extra) ? member.extra.colorIndex : 0
+    const isMe = entry.cxId === this.props.user.cxId
+    const delta = entry.lbDelta || EMPTY_DELTA
+
+    const anyPointsUp = delta.ready && (delta.pointsLifetime.improved || delta.pointsQuarterly.improved)
+    const anyCoverageBest = delta.ready && (delta.coverageLifetime.improved || delta.coverageQuarterly.improved)
+
+    return (
+      <div key={entry.cxId} className={`SummaryCard${isMe ? ' SummaryCardMe' : ''}`}>
+        <div className='SummaryCardHeader'>
+          <span style={{ color: rankColor(entry.rank) }}>#{entry.rank}</span>
+          <span className='SummaryColorDot' style={{ backgroundColor: colors[colorIndex % colors.length] }} />
+          <span className='SummaryName' style={{ color: isMe ? '#59ff73' : 'white' }}>{name}</span>
+          {isMe ? <span className='text-small' style={{ opacity: 0.6 }}>(YOU)</span> : null}
+          <span className='SummaryCoverageBlock'>
+            <span style={{ color: isMe ? '#59ff73' : 'white', fontWeight: 'bold' }}>{entry.coveragePct.toFixed(0)}%</span>
+            <span className='text-small' style={{ opacity: 0.6 }}>COVERAGE</span>
+          </span>
+        </div>
+
+        <div className='SummaryBadgeRow'>
+          <span className='SummaryPill'>+{entry.beaten + 1} pts</span>
+          <span className='text-small' style={{ opacity: 0.6, marginLeft: '8px' }}>{entry.beaten} beaten + 1 for playing</span>
+        </div>
+
+        {!delta.ready ? (
+          <p className='text-small' style={{ opacity: 0.6 }}>
+            {Date.now() - (this.props.matchSummaryArrivalTime || Date.now()) >= LEADERBOARD_RESULT_TIMEOUT_MS
+              ? 'Leaderboard unavailable'
+              : 'Updating leaderboards...'}
+          </p>
+        ) : (
+          <>
+            {anyPointsUp ? (
+              <div className='SummaryPill SummaryPillGood'>^ Rank up - Opponents Beaten   {periodsText(delta.pointsLifetime, delta.pointsQuarterly)}</div>
+            ) : null}
+            {anyCoverageBest ? (
+              <div className='SummaryPill SummaryPillBest'>* Personal best - Coverage %   {periodsText(delta.coverageLifetime, delta.coverageQuarterly)}</div>
+            ) : null}
+            {!anyPointsUp && !anyCoverageBest ? (
+              <p className='text-small' style={{ opacity: 0.5 }}>No leaderboard rank change this round</p>
+            ) : null}
+          </>
+        )}
+      </div>
+    )
+  }
+
+  render () {
+    const entries = this.props.matchResult.entries || []
+    const winner = entries.length > 0 ? entries[0] : null
+    const winnerMember = winner ? this.props.lobby.members.find(m => m.cxId === winner.cxId) : null
+
+    const elapsedMs = Date.now() - (this.props.matchSummaryArrivalTime || Date.now())
+    const remainingSec = Math.max(0, Math.ceil((MATCH_SUMMARY_REMATCH_MS - elapsedMs) / 1000))
+    const mm = Math.floor(remainingSec / 60)
+    const ss = String(remainingSec % 60).padStart(2, '0')
+
+    // Your own row uses the immediate local isReady, not the lobby snapshot — the snapshot
+    // for your own entry is briefly stale right after arriving here (App.js clears it
+    // optimistically the moment END_MATCH lands, but the server echo confirming that on
+    // lobby.members can take a few seconds), which used to show e.g. "1/1" for a few
+    // seconds before dropping to the correct "0/1".
+    const readyCount = this.props.lobby.members.filter(m =>
+      m.cxId === this.props.user.cxId ? this.props.user.isReady : m.isReady
+    ).length
+    const iAmReady = this.props.user.isReady
+
+    return (
+      <div className='MatchSummaryScreen'>
+        <div className='Card SummaryPanel'>
+          <h2 style={{ margin: '0 0 2px' }}>Match Summary</h2>
+          <p className='text-small' style={{ opacity: 0.6, margin: '0 0 8px' }}>
+            Lobby {this.props.lobby.lobbyId} - {this.props.lobby.members.length} Players
+          </p>
+
+          {winner ? (
+            <div className='SummaryWinnerBanner'>
+              {(winnerMember ? winnerMember.name : '?')} wins the round, covering {winner.coveragePct.toFixed(0)}% of the board.
+            </div>
+          ) : (
+            <p className='text-small' style={{ opacity: 0.7 }}>Waiting for results...</p>
+          )}
+
+          <div className='SummaryHeaderRow'>
+            <span className='text-small' style={{ opacity: 0.6 }}>RANK / PLAYER</span>
+            <span className='text-small' style={{ opacity: 0.6 }}>LEADERBOARD RESULT</span>
+          </div>
+          <hr className='lbDivider' />
+
+          <div className='SummaryScroll'>
+            {entries.map(entry => this.renderPlayerCard(entry))}
+          </div>
+
+          <hr className='lbDivider' />
+          <p className='text-small' style={{ opacity: 0.6, margin: '4px 0' }}>Next Round: {mm}:{ss}</p>
+          <div style={{ display: 'flex', justifyContent: 'center' }}>
+            <button
+              className={`Button${iAmReady ? ' ButtonPrimary' : ''}`}
+              onClick={() => this.props.onSetRematchReady(!iAmReady)}
+            >
+              {iAmReady ? 'Queued for Rematch' : 'Queue for Rematch'} {readyCount}/{this.props.lobby.members.length}
+            </button>
+            <button className='Button' onClick={this.props.onMainMenu}>Main Menu</button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default MatchSummaryScreen
diff --git a/RelayTestApp/src/coverage.js b/RelayTestApp/src/coverage.js
new file mode 100644
index 0000000..1b865b8
--- /dev/null
+++ b/RelayTestApp/src/coverage.js
@@ -0,0 +1,113 @@
+// Canvas coverage % + win-ranking (BCLOUD-14472/14490) — port of cpp's coverage.cpp.
+//
+// Rasterizes a COVERAGE_GRID_CELL_SIZE grid, stamping each splotch as a filled circle
+// in paint order so later splotches overwrite earlier ones (matches what's on screen).
+// coveragePct = owned cells * cell-area / canvas-area — absolute coverage, not a share
+// of painted area.
+//
+// Attribution: by sender cxId first, falling back to a colorIndex match only when
+// unattributed. Unmatched splotches still overwrite the grid but credit no one.
+//
+// Constants (CANVAS_W/H, SPLOTCH_RADIUS, COVERAGE_GRID_CELL_SIZE) must match other ports.
+const CANVAS_W = 800
+const CANVAS_H = 600
+const SPLOTCH_RADIUS = 32 // SPLOTCH_DISPLAY_SIZE (64) * 0.5
+const COVERAGE_GRID_CELL_SIZE = 2
+
+const GRID_W = Math.floor(CANVAS_W / COVERAGE_GRID_CELL_SIZE)
+const GRID_H = Math.floor(CANVAS_H / COVERAGE_GRID_CELL_SIZE)
+const CELL_RADIUS = Math.ceil(SPLOTCH_RADIUS / COVERAGE_GRID_CELL_SIZE)
+const R2 = SPLOTCH_RADIUS * SPLOTCH_RADIUS
+
+// Reused across calls (this runs every ~250ms mid-match).
+let ownerGrid = new Int16Array(GRID_W * GRID_H)
+
+// splotches: [{x, y (normalized 0-1), colorIndex, ...}]
+// members: [{cxId, extra: {colorIndex}}]
+// Returns entries sorted best-first: [{cxId, colorIndex, visibleCount, coveragePct, rank, beaten}]
+export function computeCoverage (splotches, members) {
+  const result = members.map(m => ({
+    cxId: m.cxId,
+    colorIndex: (m.extra && m.extra.colorIndex !== undefined) ? m.extra.colorIndex : 0,
+    visibleCount: 0,
+    coveragePct: 0,
+    rank: 1,
+    beaten: 0
+  }))
+
+  const indexByCxId = {}
+  result.forEach((e, k) => { indexByCxId[e.cxId] = k })
+
+  const N = splotches.length
+  if (N > 0) {
+    ownerGrid.fill(-1)
+
+    for (let i = 0; i < N; i++) {
+      const s = splotches[i]
+      const px = s.x * CANVAS_W
+      const py = s.y * CANVAS_H
+
+      // Attribute by the sender's actual cxId first — required so two players who picked
+      // the same colour don't get merged into a single coverage total. Falls back to a
+      // colorIndex match only for unattributed splotches (a JIP sync entry whose owning
+      // netId couldn't be resolved, or a legacy sender).
+      let idx = -1
+      if (s.cxId !== undefined && s.cxId !== '' && Object.prototype.hasOwnProperty.call(indexByCxId, s.cxId)) {
+        idx = indexByCxId[s.cxId]
+      } else {
+        for (let k = 0; k < result.length; k++) {
+          if (result[k].colorIndex === s.colorIndex) { idx = k; break }
+        }
+      }
+
+      const cx = Math.floor(px / COVERAGE_GRID_CELL_SIZE)
+      const cy = Math.floor(py / COVERAGE_GRID_CELL_SIZE)
+      for (let dy = -CELL_RADIUS; dy <= CELL_RADIUS; dy++) {
+        const gy = cy + dy
+        if (gy < 0 || gy >= GRID_H) continue
+        const cellPy = (gy + 0.5) * COVERAGE_GRID_CELL_SIZE
+        const ddy = cellPy - py
+        const rowBase = gy * GRID_W
+        for (let dx = -CELL_RADIUS; dx <= CELL_RADIUS; dx++) {
+          const gx = cx + dx
+          if (gx < 0 || gx >= GRID_W) continue
+          const cellPx = (gx + 0.5) * COVERAGE_GRID_CELL_SIZE
+          const ddx = cellPx - px
+          if (ddx * ddx + ddy * ddy <= R2) {
+            ownerGrid[rowBase + gx] = idx // may be -1 — still overwrites, credits no one
+          }
+        }
+      }
+    }
+
+    for (let c = 0, count = GRID_W * GRID_H; c < count; c++) {
+      const idx = ownerGrid[c]
+      if (idx >= 0) result[idx].visibleCount++
+    }
+  }
+
+  const cellArea = COVERAGE_GRID_CELL_SIZE * COVERAGE_GRID_CELL_SIZE
+  const canvasArea = CANVAS_W * CANVAS_H
+  result.forEach(e => {
+    e.coveragePct = Math.min(100, (e.visibleCount * cellArea / canvasArea) * 100)
+  })
+
+  result.sort((a, b) => {
+    if (a.coveragePct !== b.coveragePct) return b.coveragePct - a.coveragePct
+    if (a.visibleCount !== b.visibleCount) return b.visibleCount - a.visibleCount
+    return a.cxId < b.cxId ? -1 : (a.cxId > b.cxId ? 1 : 0)
+  })
+
+  for (let i = 0; i < result.length; i++) {
+    result[i].rank = (i > 0 &&
+      result[i].coveragePct === result[i - 1].coveragePct &&
+      result[i].visibleCount === result[i - 1].visibleCount)
+      ? result[i - 1].rank // tie shares rank
+      : i + 1
+  }
+  result.forEach(e => {
+    e.beaten = result.filter(other => other.rank > e.rank).length
+  })
+
+  return result
+}