[bgf] Integrate hardening and smoke proof

README.md

@@ -342,6 +342,33 @@ Operational visibility is a first-class concern:
 - ticket, certificate, and reload lifecycle management
 - autoscaling and cluster integration hooks
 
+For KingRT production call investigations, use:
+
+```bash
+demo/video-chat/scripts/prod-debug.sh
+```
+
+The prod-debug process is read-only. It inspects public runtime health, domains,
+asset/version endpoints, API/WS/SFU reachability, marketplace and call-app
+reachability, Whiteboard Call App CSP/`Allow-CSP-From` frame headers, container
+status, and recent redacted remote logs. Its Call App proof checks both
+`/public/index.html` and `/call-app/whiteboard/public/index.html` on the
+configured Whiteboard host for `https://app.kingrt.com` compatibility, absence
+of `X-Frame-Options`, and absence of nested `*.app.kingrt.com` service origins.
+Remote log sections are labeled for media reconnect, screen-share reconnect
+exhaustion, stale local media capture discard, audio/video track loss, SFU
+reconnect, and Call App frame/CSP errors. It uses existing
+`demo/video-chat/.env.local` values only for production domains and the SSH
+target. `prod-debug.sh` does not deploy, restart, write DB data, change DNS, or
+use admin actions. Set `VIDEOCHAT_PROD_DEBUG_SKIP_REMOTE=1` to run only public
+HTTP/WebSocket/header probes, or `VIDEOCHAT_PROD_DEBUG_DRY_RUN=1` to prove the
+local read-only flow without network or SSH.
+
+Read-only media reconnect, screen-share reconnect exhaustion, stale local media
+capture discard, audio/video track loss, SFU reconnect, and Call App frame/CSP
+checks in prod-debug.sh are non-mutating: prod-debug.sh does not deploy,
+restart, write DB data, change DNS, or use admin actions.
+
 ## Public Programming Model
 
 The core programming model is:

demo/call-app/whiteboard/public/index.html

@@ -47,6 +47,7 @@
 
       <section class="canvas-shell">
         <canvas id="board" width="1600" height="900"></canvas>
+        <div id="cursorOverlay" class="cursor-overlay" aria-live="polite" aria-label="Remote cursors"></div>
         <form id="inlineEditor" class="inline-editor">
           <textarea id="inlineText" maxlength="500" placeholder="Text"></textarea>
           <button id="inlineSubmit" type="submit" aria-label="Insert">Send</button>

demo/call-app/whiteboard/public/whiteboard.css

@@ -113,6 +113,29 @@ canvas {
   background: var(--text-primary);
 }
 
+.cursor-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  pointer-events: none;
+}
+
+.remote-cursor-label {
+  position: absolute;
+  max-width: 220px;
+  transform: translate(20px, 8px);
+  padding: 5px 9px;
+  border-left: 4px solid var(--accent);
+  background: rgba(0, 0, 16, 0.82);
+  color: var(--text-primary);
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .inline-editor {
   position: absolute;
   z-index: 4;

demo/call-app/whiteboard/public/whiteboard.js

@@ -13,6 +13,7 @@
   const status = document.getElementById('status');
   const clock = document.getElementById('clock');
   const modeBadge = document.getElementById('modeBadge');
+  const cursorOverlay = document.getElementById('cursorOverlay');
   const widthInput = document.getElementById('width');
   const inlineEditor = document.getElementById('inlineEditor');
   const inlineText = document.getElementById('inlineText');
@@ -78,6 +79,9 @@
     }
     if (!canRead()) {
       clearInterval(pollTimer);
+      state.cursors.clear();
+      state.selections.clear();
+      render();
     }
   }
 
@@ -146,6 +150,7 @@
   }
 
   function applyPresence(payloadType, payload = {}, sourceActorId = actorId) {
+    if (!canRead()) return;
     const normalizedActorId = String(sourceActorId || payload.actor_id || '').trim();
     if (!normalizedActorId) return;
     const withActor = {
@@ -158,6 +163,14 @@
     render();
   }
 
+  function removePresenceForActor(sourceActorId = '') {
+    const normalizedActorId = String(sourceActorId || '').trim();
+    if (!normalizedActorId) return;
+    state.cursors.delete(normalizedActorId);
+    state.selections.delete(normalizedActorId);
+    render();
+  }
+
   function publishPresence(payloadType, payload) {
     if (!canPublishPresence()) return false;
     const now = Date.now();
@@ -224,6 +237,25 @@
 
   function render() {
     renderScene(ctx, true);
+    syncCursorOverlay();
+  }
+
+  function syncCursorOverlay() {
+    if (!cursorOverlay) return;
+    const labels = [];
+    for (const cursor of state.cursors.values()) {
+      if (cursor.actor_id === actorId) continue;
+      const x = Math.max(0, Math.min(boardWidth, Number(cursor.x || 0)));
+      const y = Math.max(0, Math.min(boardHeight, Number(cursor.y || 0)));
+      const label = document.createElement('span');
+      label.className = 'remote-cursor-label';
+      label.textContent = displayNameLabel(cursor.label || cursor.display_name);
+      label.style.left = `${(x / boardWidth) * 100}%`;
+      label.style.top = `${(y / boardHeight) * 100}%`;
+      label.style.borderLeftColor = cursor.color || '#1582bf';
+      labels.push(label);
+    }
+    cursorOverlay.replaceChildren(...labels);
   }
 
   function drawStroke(targetCtx, stroke) {
@@ -742,6 +774,8 @@
       if (message.result?.operation) applyEnvelope(message.result.operation);
     } else if (message.type === 'call_app.presence.update') {
       applyPresence(String(message.payload_type || ''), message.payload || {}, String(message.actor_id || ''));
+    } else if (message.type === 'call_app.presence.leave') {
+      removePresenceForActor(message.actor_id || message.payload?.actor_id || '');
     } else if (message.type === 'call_app.crdt.error') {
       applyAccessState(message);
       const reason = String(message.reason || '').trim();