feat(hud): Cyber HUD theme with GPU contact sonar (#706)

Add the opt-in Cyber HUD layout with coordinated map and cockpit panel
styling, GPU-only contact sonar (rings, range, power, opacity, sector) with
native-rendering fallback, and set_cyber_sonar voice controls. Sonar visual
style inspired by kk376's tactical naval sonar (#214).

Co-authored-by: Sameh Khamis <[email protected]>
Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>

src/ui/panelChrome.js

@@ -1,4 +1,5 @@
 import { UiLifetime } from './uiLifetime.js';
+import { displayPanelScroller } from './displayPanelScroll.js';
 import { PanelPositionControls } from './panelPositionControls.js';
 import { PanelLayoutController } from './panelLayoutController.js';
 import {
@@ -71,7 +72,7 @@ export class PanelChrome {
       readDisplayScrollTop: () =>
         this._displayPortalScrollRestoreOwner === 'standard'
           ? this._standardDisplayScrollTop
-          : this._ppToggles?.scrollTop || 0,
+          : displayPanelScroller(this._ppToggles)?.scrollTop || 0,
     });
   }
   get hud() {
@@ -345,9 +346,11 @@ export class PanelChrome {
       if (!panelEl) continue;
       // Responsive auto-collapse is presentation only; the recipient should
       // restore the user's explicit expanded preference at its own viewport.
-      const collapsed = panelEl.classList.contains('layout-auto-collapsed')
-        ? false
-        : panelEl.classList.contains('collapsed');
+      const collapsed =
+        panelEl.classList.contains('layout-auto-collapsed') ||
+        panelEl.classList.contains('cyber-accordion-collapsed')
+          ? false
+          : panelEl.classList.contains('collapsed');
       const entry = { id: spec.id, collapsed };
       if (spec.pinnable)
         entry.pinned = panelEl.classList.contains('dock-pinned');
@@ -397,9 +400,32 @@ export class PanelChrome {
     if (explicit && !restore)
       this.shareLinkManager?.claimRestoreLane?.('panel', panelId);
     const nextCollapsed = Boolean(collapsed);
-    const wasAutoCollapsed = panelEl.classList.contains(
-      'layout-auto-collapsed',
-    );
+    const wasAutoCollapsed =
+      panelEl.classList.contains('layout-auto-collapsed') ||
+      panelEl.classList.contains('cyber-accordion-collapsed');
+    // A user opening a Cyber rail panel owns the whole accordion, including
+    // peers that were only presentation-collapsed during a saved-state restore.
+    if (
+      explicit &&
+      !restore &&
+      !nextCollapsed &&
+      document.documentElement?.dataset.uiTheme === 'cyber' &&
+      panelEl.parentElement === this._rightPanelStack
+    ) {
+      for (const peer of this._rightPanelStack.children) {
+        if (
+          peer !== panelEl &&
+          peer.matches('[data-panel-id]') &&
+          !peer.hidden
+        ) {
+          this.setPanelCollapsed(peer.id, true, {
+            explicit,
+            persist,
+            syncShare: false,
+          });
+        }
+      }
+    }
     const leftOwnerPanel = this._leftPanelStack?.contains(panelEl)
       ? panelEl
       : null;
@@ -431,6 +457,23 @@ export class PanelChrome {
     ) {
       this._panelLayout._rightStackPreferredPanelId = null;
     }
+    // Reveal Radio's owner before the no-op check: the nested section may
+    // already be expanded while its Context parent is closed.
+    if (
+      document.documentElement?.dataset.uiTheme === 'cyber' &&
+      !nextCollapsed &&
+      panelId === 'radio-panel' &&
+      document
+        .getElementById('global-context-panel')
+        ?.classList.contains('collapsed')
+    ) {
+      this.setPanelCollapsed('global-context-panel', false, {
+        explicit,
+        restore,
+        persist,
+        syncShare,
+      });
+    }
     if (
       panelEl.classList.contains('collapsed') === nextCollapsed &&
       !wasAutoCollapsed
@@ -444,7 +487,10 @@ export class PanelChrome {
       }
       return;
     }
-    panelEl.classList.remove('layout-auto-collapsed');
+    panelEl.classList.remove(
+      'layout-auto-collapsed',
+      'cyber-accordion-collapsed',
+    );
     if (
       !nextCollapsed &&
       this.cockpitView?.active &&
@@ -466,6 +512,7 @@ export class PanelChrome {
     if (
       !nextCollapsed &&
       panelId === 'radio-panel' &&
+      document.documentElement?.dataset.uiTheme !== 'cyber' &&
       document
         .getElementById('global-context-panel')
         ?.classList.contains('collapsed')