Refine section spacing and restore simple debug clear action

README.md

@@ -38,7 +38,7 @@ Three.js renders:
 - scene bounds and box/cylinder/sphere zones, with live presence labels shown below occupied zones and slider-volume fill on round zones;
 - a Pleiades-style orbit camera, 1 × 1 m floor grid and axes.
 
-Mouse navigation follows the Pleiades viewer philosophy: left-drag orbits, right-drag pans parallel to the floor, middle-drag/wheel zooms, and the orbit is constrained above the floor plane. The camera view is persisted after navigation and restored on refresh; setup updates do not overwrite a restored/user-controlled view. **Reset camera** explicitly returns the viewer to automatic framing, so a later full setup can frame its new bounds normally. Without a saved/user-controlled view, a successful connection setup initializes the same centered framing used by **Reset camera**. **Simulate data**, **Reset camera**, or a left-button double-click reframes the displayed setup. The sidebar uses two lightweight levels of disclosure: each main section can be folded to a compact status row, and each section can expose a denser **Advanced** subsection for less-used controls. In **Connection**, the server address, Connect/Simulate controls, and live connection log stay primary while Port, Protocol and Point downsample live under Advanced. **Display** keeps the Scene plus common visibility toggles primary, with Velocity vectors and Reset camera under Advanced. **Live debug data** stays readable as the main content while Clear moves under Advanced. The Display panel exposes **All scenes** plus every Scene received in the current World, with independent **Scenes** and **Zones** visibility toggles. On desktop, the translucent panel overlays the 3D view: use the edge arrow to hide/show it, or drag its left edge to resize it. **Escape** folds the panel. **H** toggles the viewer title/subtitle as a transient display shortcut; unlike the other UI/display preferences, this title visibility is intentionally not persisted. After 3 seconds without mouse movement or keyboard input, the handle fades whether the panel is unfolded or folded; activity brings it back quickly. Folded sidebar/QR content is removed from keyboard navigation while hidden. The camera projection follows the panel width so the orbit target remains centered in the unobscured part of the view.
+Mouse navigation follows the Pleiades viewer philosophy: left-drag orbits, right-drag pans parallel to the floor, middle-drag/wheel zooms, and the orbit is constrained above the floor plane. The camera view is persisted after navigation and restored on refresh; setup updates do not overwrite a restored/user-controlled view. **Reset camera** explicitly returns the viewer to automatic framing, so a later full setup can frame its new bounds normally. Without a saved/user-controlled view, a successful connection setup initializes the same centered framing used by **Reset camera**. **Simulate data**, **Reset camera**, or a left-button double-click reframes the displayed setup. The sidebar uses two lightweight levels of disclosure: each main section can be folded to a compact status row, and each section can expose a denser **Advanced** subsection for less-used controls. In **Connection**, the server address, Connect/Simulate controls, and live connection log stay primary while Port, Protocol and Point downsample live under Advanced. **Display** keeps the Scene plus common visibility toggles primary, with Velocity vectors and Reset camera under Advanced. **Live debug data** stays readable as the main content with a lightweight **Clear data** action above the inspector. The Display panel exposes **All scenes** plus every Scene received in the current World, with independent **Scenes** and **Zones** visibility toggles. On desktop, the translucent panel overlays the 3D view: use the edge arrow to hide/show it, or drag its left edge to resize it. **Escape** folds the panel. **H** toggles the viewer title/subtitle as a transient display shortcut; unlike the other UI/display preferences, this title visibility is intentionally not persisted. After 3 seconds without mouse movement or keyboard input, the handle fades whether the panel is unfolded or folded; activity brings it back quickly. Folded sidebar/QR content is removed from keyboard navigation while hidden. The camera projection follows the panel width so the orbit target remains centered in the unobscured part of the view.
 
 Partial setup updates are merged into the cached hierarchy before rendering, so a Scene update that omits its Zone children does not erase them. Updates that race ahead of the initial full setup are ignored rather than promoted to an incomplete root. When a specific Scene is selected, live setup updates still render from the World root so ancestor transforms remain intact. Zone-event caches are pruned against the latest setup hierarchy so renamed/removed addresses do not accumulate stale visual state. Scene selection and scene-size debug information therefore always use the latest valid merged setup.
 

index.html

@@ -177,15 +177,9 @@ <h1>Augmenta × Three.js</h1>
         </summary>
 
         <div class="panel-content">
-          <details id="debug-advanced" class="advanced-panel debug-advanced">
-            <summary>
-              <span class="advanced-label">Advanced</span>
-              <span class="advanced-summary-value">Inspector actions</span>
-            </summary>
-            <div class="advanced-content">
-              <button id="clear" class="compact-action" type="button">Clear debug data</button>
-            </div>
-          </details>
+          <div class="debug-actions">
+            <button id="clear" class="text-action" type="button">Clear data</button>
+          </div>
 
           <div id="debug-content" class="debug-content">
             <div class="empty-state">Connect to Augmenta or run the demo to inspect the stream.</div>

src/main.js

@@ -37,7 +37,7 @@ const ui = {
   sidebarToggle: $('#sidebar-toggle'), viewerTitle: $('.viewer-title'), connectionQrVisibility: $('.connection-qr-visibility'),
   connectionSection: $('#connection-section'), connectionAdvanced: $('#connection-advanced'), connectionAdvancedSummary: $('#connection-advanced-summary'),
   displaySection: $('#display-section'), displayAdvanced: $('#display-advanced'), displaySectionSummary: $('#display-section-summary'),
-  debugSection: $('#debug-section'), debugAdvanced: $('#debug-advanced'),
+  debugSection: $('#debug-section'),
   showClusters: $('#show-clusters'), showPoints: $('#show-points'), showScene: $('#show-scene'), showZones: $('#show-zones'), showVectors: $('#show-vectors')
 };
 
@@ -142,8 +142,7 @@ function savePreferences() {
         connectionAdvanced: ui.connectionAdvanced.open,
         display: ui.displaySection.open,
         displayAdvanced: ui.displayAdvanced.open,
-        debug: ui.debugSection.open,
-        debugAdvanced: ui.debugAdvanced.open
+        debug: ui.debugSection.open
       }
     }
   };
@@ -205,8 +204,7 @@ function restorePreferences() {
     ['connectionAdvanced', ui.connectionAdvanced],
     ['display', ui.displaySection],
     ['displayAdvanced', ui.displayAdvanced],
-    ['debug', ui.debugSection],
-    ['debugAdvanced', ui.debugAdvanced]
+    ['debug', ui.debugSection]
   ]) {
     if (typeof sectionPreferences[key] === 'boolean') {
       element.open = sectionPreferences[key];
@@ -528,8 +526,7 @@ for (const section of [
   ui.connectionAdvanced,
   ui.displaySection,
   ui.displayAdvanced,
-  ui.debugSection,
-  ui.debugAdvanced
+  ui.debugSection
 ]) {
   section.addEventListener('toggle', savePreferences);
 }

src/styles.css

@@ -476,7 +476,7 @@ button.subtle-button.active:hover {
 }
 
 .panel-content {
-  padding: 0 18px 18px;
+  padding: 8px 18px 10px;
 }
 
 .advanced-panel {
@@ -569,7 +569,7 @@ button.subtle-button.active:hover {
 .advanced-content {
   display: grid;
   gap: 8px;
-  padding: 3px 0 2px 14px;
+  padding: 3px 0 0 14px;
 }
 
 .advanced-grid {
@@ -643,9 +643,31 @@ button.subtle-button.active:hover {
   z-index: 3;
 }
 
-.debug-advanced {
-  margin-top: 0;
-  margin-bottom: 10px;
+.debug-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin: 0 0 7px;
+}
+
+.text-action {
+  min-height: auto;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  color: #8f99aa;
+  background: transparent;
+  font-size: 10.5px;
+  text-decoration: none;
+}
+
+.text-action:hover {
+  color: #c5ccd8;
+  background: transparent;
+}
+
+.text-action:focus-visible {
+  outline: 1px solid #3b4351;
+  outline-offset: 3px;
 }
 
 @media (max-width: 900px), (pointer: coarse) and (max-width: 1100px) {