fix: browser smoke tests — add #spatial-search div, WebGL graceful degradation (closes #1510)

app.js

@@ -697,12 +697,17 @@ async function init() {
   playerRot = new THREE.Euler(0, 0, 0, 'YXZ');
 
   const canvas = document.getElementById('nexus-canvas');
-  renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
-  renderer.setSize(window.innerWidth, window.innerHeight);
-  renderer.toneMapping = THREE.ACESFilmicToneMapping;
-  renderer.toneMappingExposure = 1.2;
-  renderer.shadowMap.enabled = true;
-  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+  try {
+    renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.toneMapping = THREE.ACESFilmicToneMapping;
+    renderer.toneMappingExposure = 1.2;
+    renderer.shadowMap.enabled = true;
+    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+  } catch (e) {
+    console.warn('WebGL not available — running in UI-only mode:', e.message);
+    renderer = null;
+  }
 
   performanceTier = detectPerformanceTier();
   updateLoad(10);
@@ -714,29 +719,38 @@ async function init() {
   camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 1000);
   camera.position.copy(playerPos);
 
-  // Initialize avatar and LOD systems
-  if (window.AvatarCustomization) window.AvatarCustomization.init(scene, camera);
-  if (window.LODSystem) window.LODSystem.init(scene, camera);
-
+  // Initialize avatar, LOD, and spatial search systems (graceful if no WebGL)
+  if (window.AvatarCustomization && renderer) window.AvatarCustomization.init(scene, camera);
+  if (window.LODSystem && renderer) window.LODSystem.init(scene, camera);
+  if (window.SpatialSearch) window.SpatialSearch.init(scene, camera, playerPos);
   updateLoad(20);
 
-  createSkybox();
-  updateLoad(30);
-  createLighting();
-  updateLoad(40);
-  createFloor();
-  updateLoad(50);
-  createBatcaveTerminal();
-  updateLoad(60);
-  
-  // Load Portals from Registry
   try {
-    const response = await fetch('./portals.json');
-    const portalData = await response.json();
-    createPortals(portalData);
+    if (renderer) {
+      createSkybox();
+      updateLoad(30);
+      createLighting();
+      updateLoad(40);
+      createFloor();
+      updateLoad(50);
+      createBatcaveTerminal();
+      updateLoad(60);
+
+      // Load Portals from Registry
+      try {
+        const response = await fetch('./portals.json');
+        const portalData = await response.json();
+        createPortals(portalData);
+      } catch (e) {
+        console.error('Failed to load portals.json:', e);
+        addChatMessage('error', 'Portal registry offline. Check logs.');
+      }
+    } else {
+      // No WebGL — skip 3D scene creation, still show loading flow
+      updateLoad(60);
+    }
   } catch (e) {
-    console.error('Failed to load portals.json:', e);
-    addChatMessage('error', 'Portal registry offline. Check logs.');
+    console.warn('3D scene creation failed:', e.message);
   }
 
   // Load Vision Points

index.html

@@ -393,6 +393,7 @@
 <div id="memory-filter" class="memory-filter" style="display:none;"><div class="filter-header"><span class="filter-title">⬡ Memory Filter</span><button class="filter-close" onclick="closeMemoryFilter()">✕</button></div><div class="filter-controls"><button class="filter-btn" onclick="setAllFilters(true)">Show All</button><button class="filter-btn" onclick="setAllFilters(false)">Hide All</button></div><div class="filter-list" id="filter-list"></div></div>
 <div id="memory-inspect-panel" class="memory-inspect-panel" style="display:none;" aria-label="Memory Inspect Panel"></div>
 <div id="memory-connections-panel" class="memory-connections-panel" style="display:none;" aria-label="Memory Connections Panel"></div>
+<div id="spatial-search"></div>
 
 <script src="./boot.js"></script>
 <script src="./avatar-customization.js"></script>