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/awareness/rendering.js

@@ -1,4 +1,8 @@
 import * as Cesium from 'cesium';
+import {
+  createCyberSonarSampler,
+  isCyberContactSonarActive as isCyberSonarActive,
+} from '../../cyberSonar.js';
 import {
   formatAwarenessLabel,
   formatAwarenessDistance,
@@ -105,6 +109,9 @@ export function createRendering({
     const canvas = layerState.viewer.scene.canvas;
     const width = canvas.clientWidth || canvas.width;
     const height = canvas.clientHeight || canvas.height;
+    const sonar = isCyberSonarActive()
+      ? createCyberSonarSampler(width, height)
+      : null;
     const geometry = getKeyholeGeometry(width, height);
     if (!(geometry.radius > 0)) {
       root.hidden = true;
@@ -182,6 +189,15 @@ export function createRendering({
       marker.style.left = `${geometry.centerX + Math.cos(projection.angle) * markerRadius}px`;
       marker.style.top = `${geometry.centerY + Math.sin(projection.angle) * markerRadius}px`;
       marker.style.opacity = String(projection.opacity);
+      const sonarFactor =
+        sonar?.at(
+          geometry.centerX + Math.cos(projection.angle) * markerRadius,
+          geometry.centerY + Math.sin(projection.angle) * markerRadius,
+        ) ?? 1;
+      marker._arrow.style.opacity = String(sonarFactor);
+      marker._label.style.opacity = String(
+        sonar ? sonar.label(sonarFactor) : 1,
+      );
       marker._arrow.style.transform = `translate(-50%, -50%) rotate(${projection.angle}rad)`;
       marker._label.style.transform = `translate(-50%, -50%) translate(${-Math.cos(projection.angle) * 56}px, ${-Math.sin(projection.angle) * 56}px)`;
       const label = formatAwarenessLabel(item);

src/layers/flights/rendering.js

@@ -1,4 +1,5 @@
 import * as Cesium from 'cesium';
+import { cyberSonarBaseAlpha } from '../../cyberSonar.js';
 import { selectModelEligible } from '../../data/modelEligibility.js';
 import { civilAircraftModelSpec } from './modelSpec.js';
 import { CLASS_SCALE_2D } from '../../data/aircraftClass.js';
@@ -122,7 +123,7 @@ export function createRendering({
     const isCockpitNear =
       isCockpitContact && flightState._cockpitNearContacts.has(icao24);
     if (isCockpitContact && !isCockpitNear) {
-      const freshnessAlpha = bb.color?.alpha ?? 1;
+      const freshnessAlpha = cyberSonarBaseAlpha(bb);
       bb.image = cockpitContactDotImage();
       bb.width = COCKPIT_CONTACT_SIZE_PX;
       bb.height = COCKPIT_CONTACT_SIZE_PX;
@@ -144,7 +145,7 @@ export function createRendering({
     bb.height = icao24 === flightState._trackedIcao ? 24 : 20;
     bb.scale = _fleetBillboardScale(icao24, meta?.klass) * limbScale;
     bb.scaleByDistance = _normalBillboardScaleByDistance();
-    bb.color = _fleetBillboardColor(icao24).withAlpha(bb.color?.alpha ?? 1);
+    bb.color = _fleetBillboardColor(icao24).withAlpha(cyberSonarBaseAlpha(bb));
   }
 
   /**
@@ -1006,12 +1007,13 @@ export function createRendering({
       const isCockpitNear =
         flightState._cockpitContactMode &&
         flightState._cockpitNearContacts.has(icao24);
-      const baseColor =
+      const layerBaseColor =
         flightState._cockpitContactMode && !isCockpitNear
           ? isMilitaryIcao(icao24)
             ? MIL_TINT
             : COCKPIT_CIVILIAN_COLOR
           : _fleetBillboardColor(icao24);
+      const baseColor = layerBaseColor;
       const treatment = applyAircraftBillboardTreatment({
         billboard: bb,
         baseScale:

src/layers/flights/snapshotRenderer.js

@@ -1,4 +1,5 @@
 import * as Cesium from 'cesium';
+import { cyberSonarBaseAlpha } from '../../cyberSonar.js';
 import {
   turnRateFromFixHistory,
   liftRepeatedGroundFix,
@@ -165,7 +166,7 @@ export function createFlightSnapshotRenderer({
           // freshness × focus × horizon alpha composition.
           bb.color = rendering
             ._fleetBillboardColor(icao24)
-            .withAlpha(bb.color?.alpha ?? 1);
+            .withAlpha(cyberSonarBaseAlpha(bb));
         }
         if (
           prevMeta?.klass !== meta.klass ||

src/layers/flights/state.js

@@ -250,6 +250,8 @@ export function createFlightState({ source, services }) {
 
   flightState._scratchFleetPos = new Cesium.Cartesian3();
 
+  flightState._scratchSonarScreen = new Cesium.Cartesian2();
+
   flightState._scratchDrRaw = new Cesium.Cartesian3();
 
   flightState._scratchWarmupTime = new Cesium.JulianDate();

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);
+  }
+});

src/layers/military/rendering.js

@@ -9,6 +9,7 @@ import {
 } from '../../data/modelVisualAnchor.js';
 import * as Cesium from 'cesium';
 import { selectModelEligible } from '../../data/modelEligibility.js';
+import { cyberSonarBaseAlpha } from '../../cyberSonar.js';
 import { cockpitContactDotImage } from '../../data/cockpitContactDot.js';
 import { aircraftIcon, TRACKED_ICON_PX } from '../../data/aircraftIcons.js';
 import {
@@ -152,7 +153,7 @@ export function createRendering({
     const isCockpitNear =
       isCockpitContact && flightState._cockpitNearContacts.has(icao24);
     if (isCockpitContact && !isCockpitNear) {
-      const freshnessAlpha = bb.color?.alpha ?? 1;
+      const freshnessAlpha = cyberSonarBaseAlpha(bb);
       bb.image = cockpitContactDotImage();
       bb.width = COCKPIT_CONTACT_SIZE_PX;
       bb.height = COCKPIT_CONTACT_SIZE_PX;
@@ -172,7 +173,7 @@ export function createRendering({
     bb.height = icao24 === flightState._trackedIcao ? 24 : 20;
     bb.scale = _militaryBillboardScale(icao24) * limbScale;
     bb.scaleByDistance = _normalBillboardScaleByDistance();
-    bb.color = MIL_ICON_COLOR.withAlpha(bb.color?.alpha ?? 1);
+    bb.color = MIL_ICON_COLOR.withAlpha(cyberSonarBaseAlpha(bb));
   }
 
   /** Sprite kind for one contact's billboard. Identity for every aircraft except
@@ -964,6 +965,7 @@ export function createRendering({
       const isCockpitNear =
         flightState._cockpitContactMode &&
         flightState._cockpitNearContacts.has(icao24);
+      const baseColor = MIL_ICON_COLOR;
       const treatment = applyAircraftBillboardTreatment({
         billboard: bb,
         baseScale:
@@ -971,7 +973,7 @@ export function createRendering({
             ? 1
             : _militaryBillboardScale(icao24),
         baseAlpha: flightState.records.missingPolls.get(icao24) ? 0.45 : 1,
-        baseColor: MIL_ICON_COLOR,
+        baseColor,
         focusFactor: focus.factor,
         cameraDistanceM,
         cameraHeightM: camera.positionCartographic?.height,

src/layers/military/state.js

@@ -227,6 +227,8 @@ export function createFlightState({ source, services }) {
 
   flightState._scratchFleetPos = new Cesium.Cartesian3();
 
+  flightState._scratchSonarScreen = new Cesium.Cartesian2();
+
   flightState._scratchDrRaw = new Cesium.Cartesian3();
 
   flightState._scratchWarmupTime = new Cesium.JulianDate();