Increase section spacing and pause folded debug rendering

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 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.
+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 a lightweight **Reset camera** action above them and Velocity vectors under Advanced. **Live debug data** stays readable as the main content with a lightweight **Clear data** action above the inspector. While the Live debug data section is folded, only its compact summary is refreshed; the detailed debug HTML is not rebuilt until the section is opened again. 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

@@ -137,6 +137,10 @@ <h1>Augmenta × Three.js</h1>
         </summary>
 
         <div class="panel-content">
+          <div class="panel-actions">
+            <button id="reset-camera" class="text-action" type="button">Reset camera</button>
+          </div>
+
           <div class="display-scenes">
             <label for="scenes">Scenes</label>
             <select id="scenes" disabled>
@@ -161,7 +165,6 @@ <h1>Augmenta × Three.js</h1>
             </summary>
             <div class="advanced-content">
               <label class="advanced-toggle"><input id="show-vectors" type="checkbox" checked> Velocity vectors</label>
-              <button id="reset-camera" class="compact-action" type="button">Reset camera</button>
             </div>
           </details>
         </div>
@@ -177,7 +180,7 @@ <h1>Augmenta × Three.js</h1>
         </summary>
 
         <div class="panel-content">
-          <div class="debug-actions">
+          <div class="panel-actions">
             <button id="clear" class="text-action" type="button">Clear data</button>
           </div>
 

src/debug.js

@@ -11,7 +11,16 @@ export function createDebugPanel(summary, content) {
   let pendingOpenSections;
   let pendingScrollTop;
 
-  function render(frame, control, fps, sceneSize, zoneNameForAddress, zoneShapeForAddress, force = false) {
+  function render(
+    frame,
+    control,
+    fps,
+    sceneSize,
+    zoneNameForAddress,
+    zoneShapeForAddress,
+    force = false,
+    renderContent = true
+  ) {
     const now = performance.now();
     if (!force && now - lastRender < DEBUG_RENDER_INTERVAL_MS) return;
     lastRender = now;
@@ -21,6 +30,8 @@ export function createDebugPanel(summary, content) {
       ? `${frame.getObjectCount()} objects · ${frame.getZoneEventCount()} zones · ${fps} fps`
       : 'Waiting for tracking data';
 
+    if (!renderContent) return;
+
     const blocks = [];
     if (frame) {
       blocks.push(

src/main.js

@@ -349,7 +349,8 @@ function renderDebug(force = false) {
     sceneSizeForFrame(lastFrame),
     zoneNameForAddress,
     zoneShapeForAddress,
-    force
+    force,
+    ui.debugSection.open
   );
 }
 
@@ -525,12 +526,16 @@ for (const section of [
   ui.connectionSection,
   ui.connectionAdvanced,
   ui.displaySection,
-  ui.displayAdvanced,
-  ui.debugSection
+  ui.displayAdvanced
 ]) {
   section.addEventListener('toggle', savePreferences);
 }
 
+ui.debugSection.addEventListener('toggle', () => {
+  savePreferences();
+  if (ui.debugSection.open) renderDebug(true);
+});
+
 // The panel overlays the renderer. Shift the camera projection by the visible
 // panel width so the orbit target stays centered in the unobscured viewport.
 function syncPanelCamera(animate = false) {

src/styles.css

@@ -476,7 +476,7 @@ button.subtle-button.active:hover {
 }
 
 .panel-content {
-  padding: 8px 18px 10px;
+  padding: 14px 18px 6px;
 }
 
 .advanced-panel {
@@ -618,21 +618,6 @@ button.subtle-button.active:hover {
   accent-color: var(--accent);
 }
 
-.compact-action {
-  justify-self: start;
-  min-height: 30px;
-  padding: 5px 10px;
-  border-color: #303744;
-  color: #aab3c2;
-  background: #171b23;
-  font-size: 10.5px;
-}
-
-.compact-action:hover {
-  color: #d6dce6;
-  background: #1d222c;
-}
-
 .panel-section.debug-panel {
   padding-bottom: 0;
 }
@@ -643,10 +628,10 @@ button.subtle-button.active:hover {
   z-index: 3;
 }
 
-.debug-actions {
+.panel-actions {
   display: flex;
   justify-content: flex-end;
-  margin: 0 0 7px;
+  margin: 0 0 9px;
 }
 
 .text-action {