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/layers/launches/overlays.js

@@ -1,4 +1,8 @@
 import * as Cesium from 'cesium';
+import {
+  createCyberSonarSampler,
+  isCyberContactSonarActive as isCyberSonarActive,
+} from '../../cyberSonar.js';
 import {
   ROCKET_MISSION_AMBIENT_OVERLAY_COHORT_LIMIT,
   ROCKET_MISSION_AMBIENT_OVERLAY_SOURCE_ID,
@@ -303,6 +307,15 @@ export function createOverlays({ state: layerState, services, parts, source }) {
       <span data-replay-overlay-detail></span>
     </div>`;
     host.appendChild(layerState._replayVehicleOverlay);
+    layerState._replayVehicleOverlay._sonarIcons = [
+      ...layerState._replayVehicleOverlay.querySelectorAll(
+        '.mission-replay-flight-symbol, .mission-replay-orbit-dot',
+      ),
+    ];
+    layerState._replayVehicleOverlay._sonarLabel =
+      layerState._replayVehicleOverlay.querySelector(
+        '.mission-replay-overlay-callout',
+      );
   }
 
   function hideReplayVehicleOverlay() {
@@ -502,6 +515,17 @@ export function createOverlays({ state: layerState, services, parts, source }) {
         : windowPosition;
     track.lastOverlayWindowPosition = renderedWindowPosition;
     track.lastOverlayMode = mode;
+    const sonar = isCyberSonarActive()
+      ? createCyberSonarSampler(canvas.clientWidth, canvas.clientHeight)
+      : null;
+    const factor =
+      sonar?.at(renderedWindowPosition.x, renderedWindowPosition.y) ?? 1;
+    for (const icon of layerState._replayVehicleOverlay._sonarIcons || [])
+      icon.style.opacity = String(factor);
+    if (layerState._replayVehicleOverlay._sonarLabel)
+      layerState._replayVehicleOverlay._sonarLabel.style.opacity = String(
+        sonar ? sonar.label(factor) : 1,
+      );
     layerState._replayVehicleOverlay.hidden = false;
     layerState._replayVehicleOverlay.dataset.mode = mode;
     layerState._replayVehicleOverlay.classList.toggle(

src/layers/launches/panel.js

@@ -268,7 +268,7 @@ export function createPanel({ state: layerState, services, parts, source }) {
       index < 0 || index >= layerState._launches.length - 1;
     parts.replay.syncReplayButton();
     const panelScroller = layerState._missionPanel.closest(
-      '.global-context-panel-inner',
+      ":root[data-ui-theme='cyber'] .cyber-panel-body, .global-context-panel-inner",
     );
     if (panelScroller) panelScroller.scrollTop = 0;
   }

src/layers/launches/panelScroll.test.mjs

@@ -0,0 +1,34 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { createPanel } from './panel.js';
+
+test('rendering a selected mission resets the nearest theme-appropriate Context scroller', () => {
+  for (const cyber of [true, false]) {
+    const body = { scrollTop: 180 };
+    const inner = { scrollTop: 90 };
+    const output = { closest: () => null, removeAttribute() {} };
+    const state = {
+      _missionPanel: {
+        querySelector: () => output,
+        closest(selector) {
+          assert.equal(selector, ":root[data-ui-theme='cyber'] .cyber-panel-body, .global-context-panel-inner");
+          return cyber ? body : inner;
+        },
+      },
+      _selectedLaunchId: 'mission-1',
+      _launches: [{ id: 'mission-1', name: 'Example', payloads: [], recoveryStages: [] }],
+      _replayTracks: new Map(),
+    };
+    const panel = createPanel({
+      state,
+      parts: {
+        overlays: { shortMissionLabel: (name) => name },
+        policyHelpers: { missionPathPresentation: () => ({}) },
+        replay: { syncReplayButton() {} },
+      },
+    });
+    panel.renderMissionPanel();
+    assert.equal(body.scrollTop, cyber ? 0 : 180);
+    assert.equal(inner.scrollTop, cyber ? 90 : 0);
+  }
+});