From cefc1aa5b7a88c4488d97e9a8b8a671ae7d7a7f4 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Tue, 24 Mar 2026 17:45:55 -0700
Subject: [PATCH] fix(collab): rename Solo/Share to Online/Offline, use
 EncryptID usernames

Swap toggle labels to Online/Offline (more intuitive). Resolve canvas
peer usernames from encryptid_session instead of rspace-username fallback.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 shared/components/rstack-collab-overlay.ts | 12 ++++++------
 website/canvas.html                        |  9 ++++++++-
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/shared/components/rstack-collab-overlay.ts b/shared/components/rstack-collab-overlay.ts
index 38e138a..171eec8 100644
--- a/shared/components/rstack-collab-overlay.ts
+++ b/shared/components/rstack-collab-overlay.ts
@@ -4,7 +4,7 @@
  * Features:
  *   - "N online" badge (top-right pill with colored dots)
  *   - People panel dropdown (click badge to open)
- *   - Solo/Share mode toggle in panel
+ *   - Online/Offline mode toggle in panel
  *   - Remote cursors (SVG arrows with username labels, viewport-relative)
  *   - Focus highlighting (colored outline rings on data-collab-id elements)
  *   - Auto-discovery via rspace-doc-subscribe events from runtime
@@ -438,7 +438,7 @@ export class RStackCollabOverlay extends HTMLElement {
 			fragments.push(`<div class="conn-notice">${this.#escHtml(msg)}</div>`);
 		}
 
-		// Self row with Solo/Share toggle
+		// Self row with Online/Offline toggle
 		const isSolo = this.#soloMode;
 		const selfModule = this.#moduleId || '';
 		fragments.push(`
@@ -448,9 +448,9 @@ export class RStackCollabOverlay extends HTMLElement {
 					<span class="name">${this.#escHtml(this.#localUsername)} <span class="you-tag">(you)</span></span>
 					${selfModule ? `<span class="peer-context">${this.#escHtml(selfModule)}</span>` : ''}
 				</div>
-				<span class="mode-toggle" title="Toggle cursor sharing with other users">
-					<button class="mode-solo ${isSolo ? 'active' : ''}" data-action="solo">Solo</button>
-					<button class="mode-multi ${isSolo ? '' : 'active'}" data-action="share">Share</button>
+				<span class="mode-toggle" title="Toggle your online presence">
+					<button class="mode-solo ${isSolo ? '' : 'active'}" data-action="share">Online</button>
+					<button class="mode-multi ${isSolo ? 'active' : ''}" data-action="solo">Offline</button>
 				</span>
 			</div>
 		`);
@@ -845,7 +845,7 @@ const OVERLAY_CSS = `
 		font-weight: normal;
 	}
 
-	/* ── Mode toggle (Solo/Share) ── */
+	/* ── Mode toggle (Online/Offline) ── */
 
 	.mode-toggle {
 		display: flex;
diff --git a/website/canvas.html b/website/canvas.html
index a8de718..27b229c 100644
--- a/website/canvas.html
+++ b/website/canvas.html
@@ -3030,7 +3030,14 @@
 
 			// Initialize Presence for real-time cursors
 			const peerId = generatePeerId();
-			const storedUsername = localStorage.getItem("rspace-username") || `User ${peerId.slice(0, 4)}`;
+			const storedUsername = (() => {
+				try {
+					const s = JSON.parse(localStorage.getItem("encryptid_session") || "{}");
+					if (s?.username) return s.username;
+					if (s?.displayName) return s.displayName;
+				} catch {}
+				return localStorage.getItem("rspace-username") || `User ${peerId.slice(0, 4)}`;
+			})();
 			const presence = new PresenceManager(canvas, peerId, storedUsername);
 
 			// Initialize Comment Pin Manager