From f43b02d7c5daba6ea87b67f56a1bffa453a96eed Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Tue, 14 Apr 2026 17:11:57 -0400
Subject: [PATCH] fix(canvas): eliminate triple reload + toolbar flash on
 /rspace

Guard SW controllerchange to only reload on updates (not first install),
remove duplicate SW registration from canvas.html, skip async module
fetch when shell already provided data, hide module-gated toolbar items
by default via CSS. Also collapse toolbar on click-off.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 server/shell.ts     |   3 +-
 website/canvas.html | 158 +++++++++++++++++---------------------------
 2 files changed, 64 insertions(+), 97 deletions(-)

diff --git a/server/shell.ts b/server/shell.ts
index 0cfd0ace..a9cc79fe 100644
--- a/server/shell.ts
+++ b/server/shell.ts
@@ -388,8 +388,9 @@ export function renderShell(opts: ShellOptions): string {
         });
       }).catch(() => {});
       let refreshing = false;
+      const hadController = !!navigator.serviceWorker.controller;
       navigator.serviceWorker.addEventListener('controllerchange', () => {
-        if (refreshing) return;
+        if (!hadController || refreshing) return;
         refreshing = true;
         location.reload();
       });
diff --git a/website/canvas.html b/website/canvas.html
index c956617f..70177603 100644
--- a/website/canvas.html
+++ b/website/canvas.html
@@ -23,6 +23,9 @@
 			html.rspace-embedded .rstack-tab-row { display: none !important; }
 			html.rspace-embedded #toolbar { bottom: 16px !important; }
 			html.rspace-embedded #community-info { display: none !important; }
+			/* Hide module-gated toolbar items until JS confirms they're enabled */
+			[data-requires-module] { display: none !important; }
+			[data-requires-module].mod-enabled { display: revert !important; }
 			</style>
 		<script>if (window.self !== window.parent) document.documentElement.classList.add('rspace-embedded');</script>
 		<style>
@@ -2573,44 +2576,49 @@
 			});
 
 			// Load module list for app switcher and tab bar + menu
-			// Parallel fetch: modules + space-specific filter — setModules called once
-			let moduleList = [];
-			const spaceSlug = window.location.pathname.split("/").filter(Boolean)[0] || "demo";
-			Promise.all([
-				fetch("/api/modules").then(r => r.json()),
-				fetch(`/api/spaces/${encodeURIComponent(spaceSlug)}/modules`).then(r => r.ok ? r.json() : null),
-			]).then(([data, spaceData]) => {
-				moduleList = data.modules || [];
-				window.__rspaceAllModules = moduleList;
+			// Skip fetch if shell.ts already injected module data (avoids toolbar flash)
+			if (!window.__rspaceEnabledModules) {
+				let moduleList = [];
+				const spaceSlug = window.location.pathname.split("/").filter(Boolean)[0] || "demo";
+				Promise.all([
+					fetch("/api/modules").then(r => r.json()),
+					fetch(`/api/spaces/${encodeURIComponent(spaceSlug)}/modules`).then(r => r.ok ? r.json() : null),
+				]).then(([data, spaceData]) => {
+					moduleList = data.modules || [];
+					window.__rspaceAllModules = moduleList;
 
-				const enabledIds = spaceData?.enabledModules ?? null;
-				window.__rspaceEnabledModules = enabledIds;
+					const enabledIds = spaceData?.enabledModules ?? null;
+					window.__rspaceEnabledModules = enabledIds;
 
-				const visible = enabledIds
-					? moduleList.filter(m => m.id === "rspace" || new Set(enabledIds).has(m.id))
-					: moduleList;
+					const visible = enabledIds
+						? moduleList.filter(m => m.id === "rspace" || new Set(enabledIds).has(m.id))
+						: moduleList;
 
-				document.querySelector("rstack-app-switcher")?.setModules(visible);
-				const tb = document.querySelector("rstack-tab-bar");
-				if (tb) tb.setModules(visible);
+					document.querySelector("rstack-app-switcher")?.setModules(visible);
+					const tb = document.querySelector("rstack-tab-bar");
+					if (tb) tb.setModules(visible);
 
-				// Initialize folk-rapp filtering
-				customElements.whenDefined("folk-rapp").then(() => {
-					const FolkRApp = customElements.get("folk-rapp");
-					if (FolkRApp?.setEnabledModules) FolkRApp.setEnabledModules(enabledIds);
-				});
-				// Initialize rTime shape disabled states
-				customElements.whenDefined("folk-commitment-pool").then(() => {
-					const cls = customElements.get("folk-commitment-pool");
-					if (cls?.setEnabledModules) cls.setEnabledModules(enabledIds);
-				});
-				customElements.whenDefined("folk-task-request").then(() => {
-					const cls = customElements.get("folk-task-request");
-					if (cls?.setEnabledModules) cls.setEnabledModules(enabledIds);
-				});
-				// Overlay disabled-module shapes on canvas
-				syncCanvasShapeModuleStates(enabledIds);
-			}).catch(() => {});
+					// Initialize folk-rapp filtering
+					customElements.whenDefined("folk-rapp").then(() => {
+						const FolkRApp = customElements.get("folk-rapp");
+						if (FolkRApp?.setEnabledModules) FolkRApp.setEnabledModules(enabledIds);
+					});
+					// Initialize rTime shape disabled states
+					customElements.whenDefined("folk-commitment-pool").then(() => {
+						const cls = customElements.get("folk-commitment-pool");
+						if (cls?.setEnabledModules) cls.setEnabledModules(enabledIds);
+					});
+					customElements.whenDefined("folk-task-request").then(() => {
+						const cls = customElements.get("folk-task-request");
+						if (cls?.setEnabledModules) cls.setEnabledModules(enabledIds);
+					});
+					// Overlay disabled-module shapes on canvas
+					syncCanvasShapeModuleStates(enabledIds);
+				}).catch(() => {});
+			} else {
+				// Shell already set module data — just sync shape states
+				syncCanvasShapeModuleStates(window.__rspaceEnabledModules);
+			}
 
 			// React to runtime module toggling from app switcher
 			document.addEventListener("modules-changed", (e) => {
@@ -2636,12 +2644,12 @@
 				syncCanvasShapeModuleStates(enabledModules);
 
 				document.querySelectorAll("[data-requires-module]").forEach(el => {
-					el.style.display = enabledSet.has(el.dataset.requiresModule) ? "" : "none";
+					el.classList.toggle("mod-enabled", enabledSet.has(el.dataset.requiresModule));
 				});
 				document.querySelectorAll(".toolbar-group").forEach(group => {
 					const dropdown = group.querySelector(".toolbar-dropdown");
 					if (!dropdown) return;
-					const vis = dropdown.querySelectorAll('button:not([style*="display: none"]):not(.toolbar-dropdown-header)');
+					const vis = dropdown.querySelectorAll('button.mod-enabled, button:not([data-requires-module]):not(.toolbar-dropdown-header)');
 					group.style.display = vis.length === 0 ? "none" : "";
 				});
 			});
@@ -2670,60 +2678,7 @@
 				window.__rspaceTabBar = tabBar;
 			}
 
-			// Register service worker for offline support
-			if ("serviceWorker" in navigator && window.location.hostname !== "localhost") {
-				navigator.serviceWorker.register("/sw.js?v=4").then((reg) => {
-					console.log("[Canvas] Service worker registered, scope:", reg.scope);
-				}).catch((err) => {
-					console.warn("[Canvas] Service worker registration failed:", err);
-				});
-
-				// Update banner: detect new SW activation and prompt reload
-				if (navigator.serviceWorker.controller) {
-					navigator.serviceWorker.addEventListener("controllerchange", () => {
-						if (!document.getElementById("sw-update-banner")) {
-							showSwUpdateBanner();
-						}
-					});
-				}
-				navigator.serviceWorker.getRegistration().then((reg) => {
-					if (!reg) return;
-					if (reg.waiting && navigator.serviceWorker.controller) {
-						showSwUpdateBanner();
-						return;
-					}
-					reg.addEventListener("updatefound", () => {
-						const nw = reg.installing;
-						if (!nw) return;
-						nw.addEventListener("statechange", () => {
-							if (nw.state === "installed" && navigator.serviceWorker.controller) {
-								showSwUpdateBanner();
-							}
-						});
-					});
-				});
-			}
-			function showSwUpdateBanner() {
-				if (document.getElementById("sw-update-banner")) return;
-				const b = document.createElement("div");
-				b.id = "sw-update-banner";
-				b.setAttribute("role", "alert");
-				Object.assign(b.style, {
-					position: "fixed", top: "0", left: "0", right: "0", zIndex: "10000",
-					display: "flex", alignItems: "center", justifyContent: "center", gap: "12px",
-					padding: "10px 16px", background: "linear-gradient(135deg, #6366f1, #8b5cf6)",
-					color: "white", fontSize: "14px", fontWeight: "500",
-					fontFamily: "system-ui, -apple-system, sans-serif",
-					boxShadow: "0 2px 12px rgba(0,0,0,0.3)",
-					animation: "sw-slide-down 0.3s ease-out",
-				});
-				b.innerHTML = '<span>New version available</span>'
-					+ '<button style="padding:5px 14px;border-radius:6px;border:1.5px solid rgba(255,255,255,0.5);background:rgba(255,255,255,0.15);color:white;font-size:13px;font-weight:600;cursor:pointer">Tap to update</button>'
-					+ '<button style="position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:rgba(255,255,255,0.7);font-size:20px;cursor:pointer;padding:4px 8px;line-height:1" aria-label="Dismiss">&times;</button>';
-				document.body.prepend(b);
-				b.querySelector("button")?.addEventListener("click", () => location.reload());
-				b.querySelector("[aria-label=Dismiss]")?.addEventListener("click", () => b.remove());
-			}
+			// Service worker registration handled by shell.ts — no duplicate here
 
 			// Register custom elements
 			FolkShape.define();
@@ -5141,22 +5096,29 @@ Use real coordinates, YYYY-MM-DD dates, ISO currency codes. Ask clarifying quest
 				});
 			});
 
-			// Hide toolbar items for disabled modules
+			// Show/hide toolbar items based on enabled modules
+			// Items start hidden via CSS ([data-requires-module] { display:none }),
+			// enabled ones get .mod-enabled class to become visible
 			const _enabledMods = window.__rspaceEnabledModules;
 			if (_enabledMods) {
 				const _enabledSet = new Set(_enabledMods);
 				document.querySelectorAll('[data-requires-module]').forEach(el => {
-					if (!_enabledSet.has(el.dataset.requiresModule)) {
-						el.style.display = 'none';
+					if (_enabledSet.has(el.dataset.requiresModule)) {
+						el.classList.add('mod-enabled');
 					}
 				});
-				// Hide empty toolbar groups (all visible items hidden)
+				// Hide empty toolbar groups (all items disabled)
 				document.querySelectorAll('.toolbar-group').forEach(group => {
 					const dropdown = group.querySelector('.toolbar-dropdown');
 					if (!dropdown) return;
-					const visibleItems = dropdown.querySelectorAll('button:not([style*="display: none"]):not(.toolbar-dropdown-header)');
+					const visibleItems = dropdown.querySelectorAll('button.mod-enabled, button:not([data-requires-module]):not(.toolbar-dropdown-header)');
 					if (visibleItems.length === 0) group.style.display = 'none';
 				});
+			} else {
+				// No module filter — show all items
+				document.querySelectorAll('[data-requires-module]').forEach(el => {
+					el.classList.add('mod-enabled');
+				});
 			}
 
 			// rApp embed buttons — embed any module as a folk-rapp shape on the canvas
@@ -6969,10 +6931,14 @@ Use real coordinates, YYYY-MM-DD dates, ISO currency codes. Ask clarifying quest
 				});
 			});
 
-			// Close panel when clicking outside toolbar + panel
+			// Close panel + collapse toolbar when clicking outside
 			document.addEventListener("click", (e) => {
 				if (!e.target.closest("#toolbar") && !e.target.closest("#toolbar-panel")) {
 					closeToolbarPanel();
+					// Collapse expanded toolbar back to wrench icon
+					if (!toolbarEl.classList.contains("collapsed")) {
+						document.getElementById("toolbar-collapse")?.click();
+					}
 				}
 			});