Merge branch 'main' into fix/multipart-cable-feature-ownership

src/layers/alpr/index.js

@@ -3,16 +3,12 @@ import * as Cesium from 'cesium';
 import {
   LAYER_ID,
   REQUEST_DEBOUNCE_MS,
-  QUERY_LIMIT,
-  MAX_RENDERED,
-  QUERY_SNAP_DEGREES,
   QUERY_REUSE_MS,
   ALPR_COLOR,
 } from './policy.js';
 import {
   snapAlprBox,
   boxContains,
-  destinationPointDeg,
   alprRetryDelayMs,
   validateAlprSnapshot,
   alprCreditMarkup,
@@ -84,9 +80,7 @@ export function createAlprCamerasLayer({ source, services } = {}) {
     viewportBox,
     clearRendered,
     hideOnMapCredit,
-    presentOnMapCredit,
     renderRecords,
-    selectRecord,
     focusNearest,
     clearSelection,
     updateSelectedAnchor,

src/layers/alpr/overlay.test.mjs

@@ -2,6 +2,7 @@ import test from 'node:test';
 import assert from 'node:assert/strict';
 import * as Cesium from 'cesium';
 import { createAlprOverlay } from './overlay.js';
+import { normalizeAlprNode } from './records.js';
 import {
   directionWedgePositions,
   alprLabelDetails,
@@ -218,6 +219,23 @@ test('adapter labels never claim a custom source is public OSM data', () => {
   );
 });
 
+test('a mapped bearing that rounds up to a whole turn reads 0°, not 360°', () => {
+  const direction = (tag) =>
+    alprLabelDetails(
+      normalizeAlprNode({
+        type: 'node',
+        id: 1,
+        lat: 30,
+        lon: -97,
+        tags: { 'surveillance:type': 'ALPR', 'camera:direction': tag },
+      }),
+      { label: 'Custom directory' },
+    ).find((line) => line.startsWith('DIRECTION'));
+  assert.equal(direction('359.6'), 'DIRECTION 0°');
+  assert.equal(direction('359.4'), 'DIRECTION 359°');
+  assert.equal(direction('0.4'), 'DIRECTION 0°');
+});
+
 test('overlay glyphs and native badges shrink alike with distance', () => {
   assert.equal(markerScale(100), 1.15);
   assert.equal(markerScale(40_000), 0.45);

src/layers/alpr/presentation.js

@@ -13,7 +13,7 @@ import {
   MARKER_SCALE_BY_DISTANCE,
 } from './policy.js';
 import { boxContains } from './model.js';
-import { t } from '../../i18n/index.js';
+import { msg } from '../../i18n/index.js';
 import { createAlprFloorResolver } from './floors.js';
 import { createAlprOverlay } from './overlay.js';
 import {
@@ -452,7 +452,7 @@ export function createAlprPresentation({ state, services, source }) {
         layerName: 'ALPR Cameras',
         source:
           source.attribution?.description || source.label || 'Camera source',
-        label: t('ALPR camera'),
+        label: msg('ALPR camera'),
         latitude: record.latitude,
         longitude: record.longitude,
         properties: {

src/layers/alpr/records.js

@@ -1,11 +1,11 @@
 import { QUERY_LIMIT, QUERY_SNAP_DEGREES } from './policy.js';
 
-export function textTag(value) {
+function textTag(value) {
   const t = String(value ?? '').trim();
   return t || null;
 }
 
-export function numTag(value) {
+function numTag(value) {
   // `Number('')` and `Number('   ')` are 0, not NaN — a blank or whitespace-only
   // tag value must read as missing, never as a due-north bearing.
   if (value == null) return null;
@@ -102,7 +102,7 @@ export function normalizeAlprNode(el) {
   };
 }
 
-export function normalizeDirection(value) {
+function normalizeDirection(value) {
   const degrees = numTag(value);
   return degrees != null && degrees >= 0 && degrees <= 360
     ? degrees % 360

src/layers/alpr/tileRecords.js

@@ -3,7 +3,7 @@ import { VectorTile } from '@mapbox/vector-tile';
 import { normalizeAlprNode } from './records.js';
 
 /** Map extract attributes without treating an OSM edit date as a field verification. */
-export function normalizeAlprTileFeature(feature) {
+function normalizeAlprTileFeature(feature) {
   const p = feature?.properties || {};
   if (feature?.geometry?.type !== 'Point' || p.osmType !== 'node') return null;
   const [lon, lat] = feature.geometry.coordinates;

src/layers/alpr/visuals.js

@@ -5,6 +5,7 @@ import {
   DIRECTION_CONE_HALF_ANGLE_DEG,
   MARKER_SCALE_BY_DISTANCE,
 } from './policy.js';
+import { roundHeadingDegrees } from '../../data/headingDegrees.js';
 
 /**
  * Badge scale at a camera distance, matching Cesium's NearFarScalar for the
@@ -50,7 +51,7 @@ export function alprLabelDetails(record, source) {
     sourceName === 'OpenStreetMap' ? 'OSM MAPPED' : `Source: ${sourceName}`,
   ];
   if (Number.isFinite(record.directionDeg))
-    details.push(`DIRECTION ${Math.round(record.directionDeg)}°`);
+    details.push(`DIRECTION ${roundHeadingDegrees(record.directionDeg)}°`);
   const equipment = [
     ...new Set(
       [record.manufacturer, record.operator, record.cameraType]

src/layers/awareness/directionOverlay.test.mjs

@@ -0,0 +1,185 @@
+// src/layers/awareness/directionOverlay.test.mjs — the Global Context compass
+// and contact bearings are presented to subscribers and rendered from a store
+// inside the viewer's container.
+import '../../testSupport/registerDom.mjs';
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import * as Cesium from 'cesium';
+import { createApp, nextTick } from 'vue';
+import { createPinia } from 'pinia';
+import { useAwarenessDirectionStore } from '../../ui/stores/awarenessDirection.js';
+import AwarenessDirection from '../../ui/views/panels/AwarenessDirection.vue';
+import { createState } from './state.js';
+import { createRendering } from './rendering.js';
+
+/** The rendering part over a subject with one military contact due east. */
+function overlay(screenAngle) {
+  const state = createState({ services: {} });
+  const container = document.body.appendChild(document.createElement('div'));
+  const subject = Cesium.Cartesian3.fromDegrees(0, 0, 1000);
+  Object.assign(state, {
+    viewer: {
+      container,
+      scene: { canvas: { clientWidth: 800, clientHeight: 600 } },
+      camera: {
+        heading: 0,
+        rightWC: new Cesium.Cartesian3(0, 1, 0),
+        upWC: new Cesium.Cartesian3(0, 0, 1),
+      },
+    },
+    enabled: true,
+    subject: { position: subject, layerId: 'military' },
+    results: {
+      cohorts: [
+        {
+          id: 'military',
+          summary: {
+            nearest: [
+              {
+                callsign: 'RCH123',
+                position: Cesium.Cartesian3.fromDegrees(0.05, 0, 1000),
+                distanceM: 5500,
+                track: 90,
+              },
+            ],
+          },
+        },
+      ],
+    },
+    cohortPages: new Map(),
+  });
+  const rendering = createRendering({
+    state,
+    services: {
+      geometry: {
+        getKeyholeGeometry: () => ({ centerX: 400, centerY: 300, radius: 250 }),
+        celestialScreenAngle:
+          screenAngle ||
+          ((x, y) => ({
+            angle: Math.atan2(-y, x),
+            opacity: 1,
+            stable: true,
+          })),
+      },
+      render: { governorRequestRender() {} },
+    },
+    parts: {},
+  });
+  return { state, container, rendering };
+}
+
+test('the overlay publishes the compass and the nearest contact bearings', () => {
+  const { rendering, container } = overlay();
+  const views = [];
+  rendering.subscribeDirectionOverlay((view) => views.push(view));
+  assert.deepEqual(views, [null]);
+  rendering.updateDirectionOverlay();
+  const view = views.at(-1);
+  assert.ok(view.container === container);
+  assert.equal(view.hidden, false);
+  // The compass sits at 66% of the 250px keyhole: 165px.
+  assert.equal(view.ring.width, '330px');
+  assert.equal(view.ring['--compass-rotation'], '0deg');
+  assert.equal(view.heading.text, 'HDG 000°');
+  assert.deepEqual(
+    view.labels.map((label) => label.label),
+    ['N', 'E', 'S', 'W'],
+  );
+  assert.equal(view.labels[0].left, '400px');
+  const [marker, second] = view.markers;
+  assert.equal(marker.hidden, false);
+  assert.match(marker.caption.text, /^RCH123 · .+\nBRG 090° · CRS 090°$/);
+  assert.equal(marker.arrow.opacity, '1');
+  assert.equal(second.hidden, true);
+  // An unchanged frame publishes nothing.
+  const count = views.length;
+  rendering.updateDirectionOverlay();
+  assert.equal(views.length, count);
+  rendering.hideDirectionOverlay();
+  assert.equal(views.at(-1).hidden, true);
+  assert.equal(views.at(-1).heading.text, 'HDG 000°', 'placement is kept');
+  rendering.removeDirectionOverlay();
+  assert.equal(views.at(-1), null);
+});
+
+test('an unstable frame keeps the last stable bearing, until the overlay is removed', () => {
+  const answers = [
+    { angle: 1, opacity: 1, stable: true },
+    { angle: 2, opacity: 0.5, stable: false },
+  ];
+  const previous = [];
+  const { state, rendering } = overlay((x, y, last) => {
+    previous.push(last);
+    return answers.shift() ?? { angle: last ?? 0, opacity: 1, stable: true };
+  });
+  rendering.updateDirectionOverlay();
+  assert.equal(state.directionAngles[0], 1);
+  // The heading turns, so the next frame recomputes the contact.
+  state.viewer.camera.heading = 0.1;
+  rendering.updateDirectionOverlay();
+  assert.equal(previous[1], 1, 'the unstable frame is given the last angle');
+  assert.equal(state.directionAngles[0], 1, 'and does not replace it');
+  rendering.removeDirectionOverlay();
+  rendering.updateDirectionOverlay();
+  assert.equal(previous[2], 0, 'a rebuilt overlay starts afresh');
+});
+
+test('the scene chrome view renders the published overlay in its container', async (t) => {
+  document.body.replaceChildren();
+  const pinia = createPinia();
+  const store = useAwarenessDirectionStore(pinia);
+  const app = createApp(AwarenessDirection).use(pinia);
+  app.mount(document.body.appendChild(document.createElement('div')));
+  t.after(() => app.unmount());
+  const { rendering, container } = overlay();
+  rendering.subscribeDirectionOverlay((view) => store.publish(view));
+  rendering.ensureDirectionOverlay();
+  await nextTick();
+  const root = container.querySelector('#military-awareness-direction-overlay');
+  assert.equal(root.hidden, true);
+  assert.equal(root.getAttribute('aria-hidden'), 'true');
+  assert.deepEqual(
+    [...root.children].map((child) => child.className),
+    [
+      'military-awareness-compass-label cardinal-n',
+      'military-awareness-compass-label cardinal-e',
+      'military-awareness-compass-label cardinal-s',
+      'military-awareness-compass-label cardinal-w',
+      'military-awareness-compass-ring',
+      'military-awareness-compass-heading',
+      'military-awareness-direction-marker',
+      'military-awareness-direction-marker',
+      'military-awareness-direction-marker',
+    ],
+  );
+  assert.equal(root.children[0].dataset.bearing, '0');
+  assert.equal(root.children[0].getAttribute('style'), null);
+  rendering.updateDirectionOverlay();
+  await nextTick();
+  assert.equal(root.hidden, false);
+  const ring = root.querySelector('.military-awareness-compass-ring');
+  assert.equal(ring.style.getPropertyValue('--compass-rotation'), '0deg');
+  assert.equal(
+    root.querySelector('.military-awareness-compass-heading').textContent,
+    'HDG 000°',
+  );
+  const [marker, second] = root.querySelectorAll(
+    '.military-awareness-direction-marker',
+  );
+  assert.equal(marker.hidden, false);
+  assert.equal(
+    marker.querySelector('.military-awareness-direction-arrow').textContent,
+    '➜',
+  );
+  assert.match(
+    marker.querySelector('.military-awareness-direction-label').textContent,
+    /^RCH123 · /,
+  );
+  assert.equal(second.hidden, true);
+  rendering.removeDirectionOverlay();
+  await nextTick();
+  assert.equal(
+    container.querySelector('#military-awareness-direction-overlay'),
+    null,
+  );
+});

src/layers/awareness/index.js

@@ -51,12 +51,13 @@ export function createAwarenessLayer({ services, source }) {
         parts.queries.collectAircraftProximityWindow,
       _getAwarenessNavigationStateForTest:
         parts.testing._getAwarenessNavigationStateForTest,
+      _getAwarenessPanelRendersForTest:
+        parts.testing._getAwarenessPanelRendersForTest,
       canNavigateAwarenessNext: parts.navigation.canNavigateAwarenessNext,
       historySubjectSnapshot: parts.history.historySubjectSnapshot,
       findCompatibleHistoryIndex: parts.history.findCompatibleHistoryIndex,
-      awarenessPanelControlKey: parts.panel.awarenessPanelControlKey,
-      captureAwarenessPanelFocus: parts.panel.captureAwarenessPanelFocus,
-      restoreAwarenessPanelFocus: parts.panel.restoreAwarenessPanelFocus,
+      subscribePanel: parts.panel.subscribePanel,
+      subscribeDirectionOverlay: parts.rendering.subscribeDirectionOverlay,
       awarenessResultsAreLive: parts.panel.awarenessResultsAreLive,
       awarenessNeedsContinuousRender:
         parts.model.awarenessNeedsContinuousRender,

src/layers/awareness/lifecycle.js

@@ -229,22 +229,8 @@ export function createLifecycle({
     destroy() {
       this.disable();
       detachRuntimeListeners();
-      layerState.panel?.removeEventListener(
-        'click',
-        layerState.panelClickListener,
-      );
-      layerState.panelClickListener = null;
-      if (layerState.panelOwned) layerState.panel?.remove();
-      else if (layerState.panel) layerState.panel.replaceChildren();
-      layerState.panel = null;
-      layerState.panelOwned = false;
-      layerState.directionRoot?.remove();
-      layerState.directionRoot = null;
-      layerState.compassRing = null;
-      layerState.compassLabels = [];
-      layerState.compassHeading = null;
-      layerState.directionMarkers = [];
-      layerState.panelMarkup = '';
+      parts.panel.clearPanel();
+      parts.rendering.removeDirectionOverlay();
       layerState.subjectListener = null;
       layerState.contextListener = null;
       layerState.clearListener = null;

src/layers/awareness/panel.js

@@ -2,9 +2,15 @@ import {
   formatAwarenessLabel,
   AWARENESS_RADIUS_M,
 } from '../../data/militaryAwarenessEngine.js';
-import { formatNumber, t, translateKnown } from '../../i18n/index.js';
+import {
+  formatNumber,
+  onLocaleChange,
+  t,
+  translateKnown,
+} from '../../i18n/index.js';
 import { formatQuantity } from '../../ui/unitLabels.js';
 import { AWARENESS_PAGE_SIZE, AWARENESS_PAGE_ROTATE_MS } from './policy.js';
+import { distanceParts } from '../../data/distanceFormat.js';
 
 /** Format a cohort total without presenting a retained cap as exact. */
 export function formatAwarenessCount(summary = {}) {
@@ -25,13 +31,12 @@ function presentAwarenessCount(summary = {}) {
 }
 
 /** A distance as the panel shows it: 850 m, 4.6 km, 120 km, in the UI language. */
-function presentAwarenessDistance(meters) {
-  if (!Number.isFinite(meters) || meters < 0) return '—';
-  if (meters < 1000) return formatQuantity(Math.round(meters), 'm');
-  const digits = meters < 10000 ? 1 : 0;
-  return formatQuantity(meters / 1000, 'km', {
-    minimumFractionDigits: digits,
-    maximumFractionDigits: digits,
+export function presentAwarenessDistance(meters) {
+  const parts = distanceParts(meters);
+  if (!parts) return '—';
+  return formatQuantity(parts.value, parts.unit, {
+    minimumFractionDigits: parts.digits,
+    maximumFractionDigits: parts.digits,
   });
 }
 
@@ -42,76 +47,95 @@ function presentAwarenessReason(summary = {}) {
     : translateKnown(summary.reason || '');
 }
 
-export function createPanel({ state: layerState, services, parts, source }) {
+/**
+ * The Contacts panel as a view renders it. The layer presents a plain view
+ * object (`standby`, `results` or `empty`) and publishes it to subscribers;
+ * Core's AwarenessPanel component renders it and calls the layer's
+ * navigation methods. Text arrives in the UI language.
+ */
+export function createPanel({ state: layerState, parts }) {
+  /** Publish a fresh view unless it is the one already shown. */
+  function publish(view) {
+    const signature = JSON.stringify(view);
+    if (layerState.panelSignature === signature) return;
+    layerState.panelSignature = signature;
+    layerState.panelView = view;
+    for (const listener of [...layerState.panelListeners]) listener(view);
+  }
+
+  /**
+   * Receive every published view, starting with the current one.
+   * @param {(view: object) => void} listener
+   * @returns {() => void} Unsubscribe.
+   */
+  function subscribePanel(listener) {
+    layerState.panelListeners.add(listener);
+    if (layerState.panelView) listener(layerState.panelView);
+    return () => layerState.panelListeners.delete(listener);
+  }
+
+  /** The panel shows layer views from the first enable or result onwards. */
   function ensurePanel() {
-    if (layerState.panel) return layerState.panel;
-    const existing = document.getElementById('military-awareness-panel');
-    const panel = existing || document.createElement('aside');
-    layerState.panelOwned = !existing;
-    if (!existing) {
-      panel.id = 'military-awareness-panel';
-    }
-    layerState.panelClickListener = (event) => {
-      const action = event.target.closest('button[data-awareness-action]');
-      if (action) {
-        event.preventDefault();
-        if (action.dataset.awarenessAction === 'previous')
-          parts.history.navigateHistory(-1, { origin: 'user' });
-        if (action.dataset.awarenessAction === 'next')
-          parts.history.navigateHistory(1, { origin: 'user' });
-        if (action.dataset.awarenessAction === 'focus')
-          parts.focus.focusCurrentSubject({ origin: 'user' });
-        return;
-      }
-      const target = event.target.closest(
-        'button[data-awareness-layer][data-awareness-id]',
-      );
-      if (!target) return;
-      event.preventDefault();
-      parts.focus.requestFocus(
-        target.dataset.awarenessLayer,
-        target.dataset.awarenessId,
-        false,
-        { origin: 'user' },
-      );
-    };
-    panel.addEventListener('click', layerState.panelClickListener);
-    if (!existing) document.body.appendChild(panel);
-    layerState.panel = panel;
-    return panel;
+    layerState.panelShown = true;
+    // A shown view is worded again in a new locale.
+    layerState.offPanelLocale ??= onLocaleChange(() => {
+      const kind = layerState.panelView?.kind;
+      if (kind === 'results') renderResults();
+      else if (kind === 'standby') hidePanel();
+    });
   }
 
   function hidePanel() {
-    if (layerState.panel) {
-      const markup = `<div class="military-awareness-standby">
-      <strong>${layerState.enabled ? t('CONTEXT READY') : t('GLOBAL CONTEXT OFF')}</strong>
-      <span>${layerState.enabled ? t('SELECT A FLIGHT, VESSEL, OR MAPPED INSTALLATION') : t('ENABLE TO LOAD OBSERVED / MAPPED PROXIMITY')}</span>
-    </div>`;
-      layerState.panel.hidden = false;
-      if (layerState.panelMarkup !== markup) {
-        layerState.panel.innerHTML = markup;
-        layerState.panelMarkup = markup;
-      }
-    }
-    if (layerState.directionRoot) layerState.directionRoot.hidden = true;
+    if (layerState.panelShown)
+      publish({
+        kind: 'standby',
+        title: layerState.enabled
+          ? t('CONTEXT READY')
+          : t('GLOBAL CONTEXT OFF'),
+        text: layerState.enabled
+          ? t('SELECT A FLIGHT, VESSEL, OR MAPPED INSTALLATION')
+          : t('ENABLE TO LOAD OBSERVED / MAPPED PROXIMITY'),
+      });
+    parts.rendering.hideDirectionOverlay();
   }
 
-  function rowHtml(cohort) {
+  /** Clear the panel when the layer is destroyed. */
+  function clearPanel() {
+    if (layerState.panelShown) publish({ kind: 'empty' });
+    layerState.offPanelLocale?.();
+    layerState.offPanelLocale = null;
+    layerState.panelShown = false;
+    layerState.panelView = null;
+    layerState.panelSignature = '';
+  }
+
+  function presentRow(cohort) {
     const summary = cohort.summary;
-    const count = presentAwarenessCount(summary);
     const page = layerState.cohortPages.get(cohort.id) || 0;
     const nearest = summary.nearest
       .slice(page, page + AWARENESS_PAGE_SIZE)
-      .map((item) => {
+      .map((item, index) => {
         const label = formatAwarenessLabel(item);
         const targetId = item.icao24 || item.mmsi || item.id;
-        if (!targetId) {
-          return `<li><span class="military-awareness-target unavailable" aria-label="${t('Unavailable')}">${escapeHtml(label)} <span>${presentAwarenessDistance(item.distanceM)}</span></span></li>`;
-        }
+        const distance = presentAwarenessDistance(item.distanceM);
+        if (!targetId)
+          return {
+            key: `unavailable:${page + index}`,
+            label,
+            distance,
+            ariaLabel: t('Unavailable'),
+          };
         const accessibleLabel = label === '—' ? t('Unavailable') : label;
-        return `<li><button type="button" class="military-awareness-target" data-awareness-layer="${escapeHtml(cohort.id)}" data-awareness-id="${escapeHtml(targetId)}" aria-label="${escapeHtml(t('Focus {label}', { label: accessibleLabel }))}">${escapeHtml(label)} <span>${presentAwarenessDistance(item.distanceM)}</span></button>${namedAreasHtml(item.memberNames)}</li>`;
-      })
-      .join('');
+        return {
+          key: `target:${cohort.id}:${targetId}`,
+          layer: cohort.id,
+          targetId: String(targetId),
+          label,
+          distance,
+          ariaLabel: t('Focus {label}', { label: accessibleLabel }),
+          names: presentNames(item.memberNames),
+        };
+      });
     const pageCount = Math.max(
       1,
       Math.ceil(summary.nearest.length / AWARENESS_PAGE_SIZE),
@@ -120,109 +144,58 @@ export function createPanel({ state: layerState, services, parts, source }) {
       pageCount > 1
         ? ` · ${Math.floor(page / AWARENESS_PAGE_SIZE) + 1}/${pageCount}`
         : '';
-    const coverage = cohort.coverage ? ` · ${escapeHtml(cohort.coverage)}` : '';
-    return `<section class="military-awareness-row ${summary.relationship.toLowerCase()}">
-    <div><strong>${escapeHtml(cohort.label)}</strong><b aria-live="polite">${count}${pageLabel}</b></div>
-    <small>${escapeHtml(cohort.source)}${coverage} · ${escapeHtml(presentAwarenessReason(summary))}</small>
-    ${nearest ? `<ul>${nearest}</ul>` : ''}
-  </section>`;
+    const coverage = cohort.coverage ? ` · ${cohort.coverage}` : '';
+    return {
+      id: cohort.id,
+      relationship: summary.relationship.toLowerCase(),
+      label: cohort.label,
+      count: `${presentAwarenessCount(summary)}${pageLabel}`,
+      detail: `${cohort.source}${coverage} · ${presentAwarenessReason(summary)}`,
+      nearest,
+    };
   }
 
-  function navigationControlsHtml() {
-    const canPrevious = layerState.navigationIndex > 0;
-    return `<div class="military-awareness-controls" role="group" aria-label="${t('Global Context navigation')}">
-    <button type="button" data-awareness-action="previous" title="${t('Previous — prior visited contact in the 250 km window')}"${canPrevious ? '' : ' disabled'}>${t('PREVIOUS')}</button>
-    <button type="button" data-awareness-action="focus">${t('FOCUS')}</button>
-    <button type="button" data-awareness-action="next" title="${t('Next — nearest unvisited contact in the 250 km window')}"${parts.navigation.canNavigateNext() ? '' : ' disabled'}>${t('NEXT')}</button>
-  </div>`;
+  function presentNavigation() {
+    return {
+      label: t('Global Context navigation'),
+      previous: {
+        text: t('PREVIOUS'),
+        title: t('Previous — prior visited contact in the 250 km window'),
+        disabled: !(layerState.navigationIndex > 0),
+      },
+      focus: { text: t('FOCUS') },
+      next: {
+        text: t('NEXT'),
+        title: t('Next — nearest unvisited contact in the 250 km window'),
+        disabled: !parts.navigation.canNavigateNext(),
+      },
+    };
   }
 
-  /** Stable identity for a delegated Contacts-panel button across live repaints. */
-
-  function awarenessPanelControlKey(element) {
-    const control = element?.closest?.(
-      'button[data-awareness-action], button[data-awareness-layer][data-awareness-id]',
-    );
-    if (!control) return null;
-    if (control.dataset.awarenessAction)
-      return `action:${control.dataset.awarenessAction}`;
-    return `target:${control.dataset.awarenessLayer}:${control.dataset.awarenessId}`;
-  }
-
-  /** Capture stable identity so a live repaint can restore only the same control. */
-
-  function captureAwarenessPanelFocus(
-    panel,
-    activeElement = document.activeElement,
-  ) {
-    if (!panel?.contains?.(activeElement)) return null;
-    if (activeElement?.matches?.('[data-awareness-focus-continuation]')) {
-      return { key: 'continuation' };
-    }
-    const key = awarenessPanelControlKey(activeElement);
-    if (!key) return null;
-    return { key };
-  }
-
-  /** Restore the same control, or continue beyond the list when it is no longer rendered. */
-
-  function restoreAwarenessPanelFocus(panel, snapshot) {
-    if (!panel || !snapshot) return null;
-    const continuation = panel.querySelector(
-      '[data-awareness-focus-continuation]',
-    );
-    const controls = [
-      ...panel.querySelectorAll(
-        'button[data-awareness-action], button[data-awareness-layer][data-awareness-id]',
-      ),
-    ].filter((control) => !control.disabled);
-    const retained =
-      snapshot.key === 'continuation'
-        ? continuation
-        : controls.find(
-            (control) => awarenessPanelControlKey(control) === snapshot.key,
-          );
-    const target = retained || continuation;
-    target?.focus?.({ preventScroll: true });
-    return target || null;
-  }
-
-  function escapeHtml(value) {
-    return String(value ?? '').replace(
-      /[&<>'"]/g,
-      (char) =>
-        ({
-          '&': '&amp;',
-          '<': '&lt;',
-          '>': '&gt;',
-          "'": '&#39;',
-          '"': '&quot;',
-        })[char],
-    );
-  }
-
-  function namedAreasHtml(names) {
+  function presentNames(names) {
     return names?.length
-      ? `<details class="military-awareness-names"><summary>${escapeHtml(t('Named areas ({n})', { n: formatNumber(names.length) }))}</summary><div>${names.map((name) => escapeHtml(name)).join('<br>')}</div></details>`
-      : '';
+      ? {
+          summary: t('Named areas ({n})', { n: formatNumber(names.length) }),
+          names: [...names].map((name) => String(name ?? '')),
+        }
+      : null;
   }
 
   function renderResults() {
     if (!layerState.enabled || !layerState.results) return hidePanel();
-    const panel = ensurePanel();
+    ensurePanel();
+    layerState.panelRenders += 1;
     const { subject, cohorts } = layerState.results;
-    const markup = `<div class="military-awareness-subject">${escapeHtml(subject.label)} · ${escapeHtml(t('{distance} FLIGHT / VESSEL WINDOW', { distance: presentAwarenessDistance(AWARENESS_RADIUS_M) }))}</div>
-    ${namedAreasHtml(subject.memberNames)}
-    ${navigationControlsHtml()}
-    ${cohorts.map(rowHtml).join('')}
-    <p class="military-awareness-note" tabindex="-1" data-awareness-focus-continuation>${t('Open-source mapped/observed context. Missing broadcasts, unloaded map areas, or unmapped sites are not evidence of absence.')}</p>`;
-    panel.hidden = false;
-    if (layerState.panelMarkup !== markup) {
-      const focusSnapshot = captureAwarenessPanelFocus(panel);
-      panel.innerHTML = markup;
-      layerState.panelMarkup = markup;
-      restoreAwarenessPanelFocus(panel, focusSnapshot);
-    }
+    publish({
+      kind: 'results',
+      subject: `${subject.label} · ${t('{distance} FLIGHT / VESSEL WINDOW', { distance: presentAwarenessDistance(AWARENESS_RADIUS_M) })}`,
+      subjectNames: presentNames(subject.memberNames),
+      navigation: presentNavigation(),
+      rows: cohorts.map(presentRow),
+      note: t(
+        'Open-source mapped/observed context. Missing broadcasts, unloaded map areas, or unmapped sites are not evidence of absence.',
+      ),
+    });
   }
 
   function rotateAwarenessPages() {
@@ -276,14 +249,10 @@ export function createPanel({ state: layerState, services, parts, source }) {
     return cohorts.some((cohort) => Number(cohort?.summary?.count) > 0);
   }
   return {
+    subscribePanel,
     ensurePanel,
     hidePanel,
-    rowHtml,
-    navigationControlsHtml,
-    awarenessPanelControlKey,
-    captureAwarenessPanelFocus,
-    restoreAwarenessPanelFocus,
-    escapeHtml,
+    clearPanel,
     renderResults,
     rotateAwarenessPages,
     startAwarenessPageRotation,

src/layers/awareness/policy.js

@@ -1,9 +1,6 @@
 export const AIRCRAFT_DEPENDENCIES = ['flights', 'military'];
 
-export const DEFERRED_DEPENDENCIES = [
-  'ais-live-vessels',
-  'military-installations',
-];
+const DEFERRED_DEPENDENCIES = ['ais-live-vessels', 'military-installations'];
 
 export const DEPENDENCIES = [
   ...AIRCRAFT_DEPENDENCIES,

src/layers/awareness/presentation.js

@@ -0,0 +1,11 @@
+import { roundHeadingDegrees } from '../../data/headingDegrees.js';
+
+/**
+ * Format a compass direction for the awareness overlay.
+ * @param {number} degrees
+ * @returns {string}
+ */
+export function formatAwarenessDirection(degrees) {
+  if (!Number.isFinite(degrees)) return '—';
+  return String(roundHeadingDegrees(degrees)).padStart(3, '0');
+}

src/layers/awareness/presentation.test.mjs

@@ -0,0 +1,11 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { formatAwarenessDirection } from './presentation.js';
+
+test('awareness bearings that round through north read 000, not 360', () => {
+  assert.equal(formatAwarenessDirection(359.4), '359');
+  assert.equal(formatAwarenessDirection(359.6), '000');
+  assert.equal(formatAwarenessDirection(0), '000');
+  assert.equal(formatAwarenessDirection(-0.4), '000');
+  assert.equal(formatAwarenessDirection(Number.NaN), '—');
+});

src/layers/awareness/rendering.js

@@ -11,6 +11,7 @@ import {
 } from '../../data/militaryAwarenessEngine.js';
 import { bearingBetweenCoordinates } from '../../cockpitMath.js';
 import { AWARENESS_PAGE_SIZE, CONTEXT_RIM_HEIGHT_M } from './policy.js';
+import { formatAwarenessDirection } from './presentation.js';
 
 export function createRendering({
   state: layerState,
@@ -21,55 +22,75 @@ export function createRendering({
   const { getKeyholeGeometry, celestialScreenAngle } = services.geometry;
   const { governorRequestRender } = services.render;
 
+  const CARDINALS = [
+    ['N', 0],
+    ['E', 90],
+    ['S', 180],
+    ['W', 270],
+  ];
+
+  /**
+   * The direction overlay as its view renders it: the compass ring, its
+   * cardinals and heading, and up to three contact markers inside the
+   * viewer's container. Each part keeps its last placement while hidden.
+   */
   function ensureDirectionOverlay() {
-    if (layerState.directionRoot || !layerState.viewer)
-      return layerState.directionRoot;
-    const root = document.createElement('div');
-    root.id = 'military-awareness-direction-overlay';
-    root.hidden = true;
-    root.setAttribute('aria-hidden', 'true');
-
-    const compass = document.createElement('div');
-    compass.className = 'military-awareness-compass-ring';
-    const cardinals = [
-      ['N', 0],
-      ['E', 90],
-      ['S', 180],
-      ['W', 270],
-    ];
-    layerState.compassLabels = cardinals.map(([label, bearing]) => {
-      const element = document.createElement('span');
-      element.className = `military-awareness-compass-label cardinal-${label.toLowerCase()}`;
-      element.textContent = label;
-      element.dataset.bearing = String(bearing);
-      root.appendChild(element);
-      return element;
+    if (layerState.directionView || !layerState.viewer)
+      return layerState.directionView;
+    presentDirection({
+      container: layerState.viewer.container,
+      hidden: true,
+      ring: null,
+      heading: { text: '', left: null, top: null },
+      labels: CARDINALS.map(([label, bearing]) => ({
+        label,
+        bearing,
+        left: null,
+        top: null,
+      })),
+      markers: Array.from({ length: 3 }, () => ({
+        hidden: false,
+        style: null,
+        arrow: null,
+        caption: { text: '', style: null },
+      })),
     });
-    const heading = document.createElement('span');
-    heading.className = 'military-awareness-compass-heading';
-    root.append(compass, heading);
+    return layerState.directionView;
+  }
 
-    layerState.directionMarkers = Array.from({ length: 3 }, () => {
-      const marker = document.createElement('div');
-      marker.className = 'military-awareness-direction-marker';
-      const arrow = document.createElement('span');
-      arrow.className = 'military-awareness-direction-arrow';
-      arrow.textContent = '➜';
-      const label = document.createElement('span');
-      label.className = 'military-awareness-direction-label';
-      marker.append(arrow, label);
-      marker._arrow = arrow;
-      marker._label = label;
-      marker._lastAngle = 0;
-      root.appendChild(marker);
-      return marker;
-    });
+  /** Publish a change to the overlay, skipping one that changes nothing. */
+  function presentDirection(patch) {
+    const next = patch && { ...layerState.directionView, ...patch };
+    const signature = JSON.stringify(next, (name, value) =>
+      name === 'container' ? undefined : value,
+    );
+    if (next && signature === layerState.directionSignature) return;
+    layerState.directionSignature = next ? signature : '';
+    layerState.directionView = next && Object.freeze(next);
+    for (const listener of [...layerState.directionListeners])
+      listener(layerState.directionView);
+  }
 
-    layerState.compassRing = compass;
-    layerState.compassHeading = heading;
-    layerState.viewer.container.appendChild(root);
-    layerState.directionRoot = root;
-    return root;
+  /**
+   * Receive the direction overlay now and after every change.
+   * @param {(view: ?object) => void} listener
+   * @returns {() => void} Unsubscribe.
+   */
+  function subscribeDirectionOverlay(listener) {
+    layerState.directionListeners.add(listener);
+    listener(layerState.directionView);
+    return () => layerState.directionListeners.delete(listener);
+  }
+
+  /** Hide the overlay, keeping its last placement. */
+  function hideDirectionOverlay() {
+    if (layerState.directionView) presentDirection({ hidden: true });
+  }
+
+  /** Withdraw the overlay when the layer is destroyed. */
+  function removeDirectionOverlay() {
+    if (layerState.directionView) presentDirection(null);
+    layerState.directionAngles = [0, 0, 0];
   }
 
   function scheduleDirectionOverlayUpdate(force = false) {
@@ -103,7 +124,7 @@ export function createRendering({
       !layerState.subject?.position ||
       !layerState.results
     ) {
-      if (root) root.hidden = true;
+      if (root) presentDirection({ hidden: true });
       return;
     }
 
@@ -115,41 +136,43 @@ export function createRendering({
       : null;
     const geometry = getKeyholeGeometry(width, height);
     if (!(geometry.radius > 0)) {
-      root.hidden = true;
+      presentDirection({ hidden: true });
       return;
     }
 
-    root.hidden = false;
     // Keep the compass comfortably inside the shader keyhole so its cardinals
     // remain visible around the subject instead of hiding under edge panels.
     const compassRadius = Math.max(
       120,
       Math.min(geometry.radius - 48, geometry.radius * 0.66),
     );
-    layerState.compassRing.style.left = `${geometry.centerX - compassRadius}px`;
-    layerState.compassRing.style.top = `${geometry.centerY - compassRadius}px`;
-    layerState.compassRing.style.width = `${compassRadius * 2}px`;
-    layerState.compassRing.style.height = `${compassRadius * 2}px`;
-
     const cameraHeading = layerState.viewer.camera.heading || 0;
     const headingDeg =
       (Math.round(Cesium.Math.toDegrees(cameraHeading)) + 360) % 360;
-    layerState.compassRing.style.setProperty(
-      '--compass-rotation',
-      `${-headingDeg}deg`,
-    );
-    layerState.compassHeading.textContent = t('HDG {value}°', {
-      value: String(headingDeg).padStart(3, '0'),
-    });
-    layerState.compassHeading.style.left = `${geometry.centerX}px`;
-    layerState.compassHeading.style.top = `${geometry.centerY - compassRadius + 39}px`;
-    for (const label of layerState.compassLabels) {
-      const bearing = Cesium.Math.toRadians(Number(label.dataset.bearing));
+    const ring = {
+      left: `${geometry.centerX - compassRadius}px`,
+      top: `${geometry.centerY - compassRadius}px`,
+      width: `${compassRadius * 2}px`,
+      height: `${compassRadius * 2}px`,
+      '--compass-rotation': `${-headingDeg}deg`,
+    };
+    const heading = {
+      text: t('HDG {value}°', {
+        value: String(headingDeg).padStart(3, '0'),
+      }),
+      left: `${geometry.centerX}px`,
+      top: `${geometry.centerY - compassRadius + 39}px`,
+    };
+    const labels = root.labels.map((label) => {
+      const bearing = Cesium.Math.toRadians(label.bearing);
       const angle = bearing - cameraHeading - Cesium.Math.PI_OVER_TWO;
       const labelRadius = compassRadius - 17;
-      label.style.left = `${geometry.centerX + Math.cos(angle) * labelRadius}px`;
-      label.style.top = `${geometry.centerY + Math.sin(angle) * labelRadius}px`;
-    }
+      return {
+        ...label,
+        left: `${geometry.centerX + Math.cos(angle) * labelRadius}px`,
+        top: `${geometry.centerY + Math.sin(angle) * labelRadius}px`,
+      };
+    });
 
     const directionalCohort =
       layerState.results.cohorts.find(
@@ -162,8 +185,9 @@ export function createRendering({
         page,
         page + AWARENESS_PAGE_SIZE,
       ) || [];
-    for (let index = 0; index < layerState.directionMarkers.length; index++) {
-      const marker = layerState.directionMarkers[index];
+    const markers = root.markers.map((marker) => ({ ...marker }));
+    for (let index = 0; index < markers.length; index++) {
+      const marker = markers[index];
       const item = military[index];
       if (!item?.position) {
         marker.hidden = true;
@@ -182,27 +206,32 @@ export function createRendering({
       const projection = celestialScreenAngle(
         Cesium.Cartesian3.dot(direction, layerState.viewer.camera.rightWC),
         Cesium.Cartesian3.dot(direction, layerState.viewer.camera.upWC),
-        marker._lastAngle,
+        layerState.directionAngles[index],
       );
-      if (projection.stable) marker._lastAngle = projection.angle;
+      if (projection.stable)
+        layerState.directionAngles[index] = projection.angle;
       // Every detected contact shares the compass rim. Keeping the bearing
       // markers on one radius makes them read as compass contacts rather than
       // unconstrained labels floating over the map.
       const markerRadius = compassRadius;
-      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);
+      marker.style = {
+        left: `${geometry.centerX + Math.cos(projection.angle) * markerRadius}px`,
+        top: `${geometry.centerY + Math.sin(projection.angle) * markerRadius}px`,
+        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)`;
+      marker.arrow = {
+        opacity: String(sonarFactor),
+        transform: `translate(-50%, -50%) rotate(${projection.angle}rad)`,
+      };
+      const labelStyle = {
+        opacity: String(sonar ? sonar.label(sonarFactor) : 1),
+        transform: `translate(-50%, -50%) translate(${-Math.cos(projection.angle) * 56}px, ${-Math.sin(projection.angle) * 56}px)`,
+      };
       const label = formatAwarenessLabel(item);
       const subjectCartographic = Cesium.Cartographic.fromCartesian(
         layerState.subject.position,
@@ -225,17 +254,21 @@ export function createRendering({
           : null;
       const bearingText = Number.isFinite(bearing)
         ? t('BRG {value}°', {
-            value: String(Math.round(bearing)).padStart(3, '0'),
+            value: formatAwarenessDirection(bearing),
           })
         : t('BRG —');
       const courseText = Number.isFinite(item.track)
         ? ` · ${t('CRS {value}°', {
-            value: String(Math.round(item.track)).padStart(3, '0'),
+            value: formatAwarenessDirection(item.track),
           })}`
         : '';
-      marker._label.textContent = `${label} · ${formatAwarenessDistance(item.distanceM)}\n${bearingText}${courseText}`;
+      marker.caption = {
+        text: `${label} · ${formatAwarenessDistance(item.distanceM)}\n${bearingText}${courseText}`,
+        style: labelStyle,
+      };
       marker.hidden = false;
     }
+    presentDirection({ hidden: false, ring, heading, labels, markers });
   }
 
   function clearVisual() {
@@ -302,6 +335,9 @@ export function createRendering({
   }
   return {
     ensureDirectionOverlay,
+    subscribeDirectionOverlay,
+    hideDirectionOverlay,
+    removeDirectionOverlay,
     scheduleDirectionOverlayUpdate,
     cancelDirectionOverlayUpdate,
     updateDirectionOverlay,

src/layers/awareness/state.js

@@ -29,20 +29,26 @@ export function createState({ services }) {
     subject: null,
     results: null,
     visual: null,
-    panel: null,
-    panelOwned: false,
+    /** Whether layer views replace the panel's initial markup yet. */
+    panelShown: false,
+    /** The published panel view, its signature and its subscribers. */
+    panelView: null,
+    panelSignature: '',
+    panelListeners: new Set(),
+    /** Result renders, published or not; tests observe repaint storms. */
+    panelRenders: 0,
     subjectListener: null,
     contextListener: null,
     clearListener: null,
     subjectClearListener: null,
     runtimeListenersAttached: false,
     preRenderRemover: null,
-    panelClickListener: null,
-    directionRoot: null,
-    compassRing: null,
-    compassLabels: [],
-    compassHeading: null,
-    directionMarkers: [],
+    /** The published direction overlay, its signature and its subscribers. */
+    directionView: null,
+    directionSignature: '',
+    directionListeners: new Set(),
+    /** Each marker's last stable screen angle. */
+    directionAngles: [0, 0, 0],
     navigationHistory: [],
     navigationVisited: new Set(),
     navigationIndex: -1,
@@ -57,7 +63,6 @@ export function createState({ services }) {
     cameraMoving: false,
     lastEvaluatedPosition: null,
     sourceRevision: '',
-    panelMarkup: '',
     directionFrame: null,
     lastDirectionUpdateMs: 0,
     activationId: 0,

src/layers/awareness/testing.js

@@ -11,5 +11,12 @@ export function createTesting({ state: layerState, services, parts, source }) {
       pendingSelectionKey: layerState.pendingSelectionKey,
     };
   }
-  return { _getAwarenessNavigationStateForTest };
+  /** @returns {number} How many result renders ran, published or not. */
+  function _getAwarenessPanelRendersForTest() {
+    return layerState.panelRenders;
+  }
+  return {
+    _getAwarenessNavigationStateForTest,
+    _getAwarenessPanelRendersForTest,
+  };
 }

src/layers/bikeshare/failureReporting.test.mjs

@@ -60,7 +60,7 @@ test('the layer reports failure when a failed city left it with nothing', () =>
 });
 
 test('a layer with nothing to draw and nothing failed is not an error', () => {
-  const { state, methods } = makeLayer();
+  const { methods } = makeLayer();
 
   // Out of range of every city is empty, not broken.
   assert.equal(methods.getStats().error, undefined);

src/layers/bikeshare/policy.js

@@ -11,7 +11,7 @@ export const BIKESHARE_SELECTED_OVERLAY_SOURCE_OPTIONS = Object.freeze({
 // --- Activation / display thresholds ---
 /** Altitude (m) at which bikeshare layer becomes eligible for display. */
 
-export const ACTIVATION_ALTITUDE_M = 50000;
+const ACTIVATION_ALTITUDE_M = 50000;
 
 /** Hysteresis enter threshold — layer activates when camera drops below this. */
 

src/layers/cctv/cards.js

@@ -99,7 +99,8 @@ export function createCards({ state: layerState, services, parts, source }) {
 
     const candidates = [];
     const screenById = new Map();
-    for (const record of layerState._records) {
+    // Cards go only on the icons the view pass shows (refreshHorizonCulling).
+    for (const record of layerState._viewRecords) {
       const id = record.camera.id;
       if (id === activeId || !record.position) continue;
       let inView = false;
@@ -187,7 +188,14 @@ export function createCards({ state: layerState, services, parts, source }) {
       nowMs: Date.now(),
       cardLimit: budgets.cardLimit,
     });
-    layerState._cardIds = new Set(retention.keepIds);
+    // Grace keeps a card briefly after it loses selection, but never on a
+    // camera whose icon the view pass has hidden.
+    const shownIds = new Set(
+      layerState._viewRecords.map((record) => record.camera.id),
+    );
+    layerState._cardIds = new Set(
+      retention.keepIds.filter((id) => shownIds.has(id)),
+    );
     layerState._cardGraceState = retention.graceState;
 
     // Bounded thumbnail LRU: live cards (grace included) never lose their
@@ -371,7 +379,6 @@ export function createCards({ state: layerState, services, parts, source }) {
     layerState._cctvOverlayHost.clearSource(CCTV_OVERLAY_SOURCE_ID);
     layerState._cctvOverlayHost.setVisible(CCTV_OVERLAY_SOURCE_ID, false);
     parts.hover.clearHoverCard();
-    layerState._cameraMoving = false;
     layerState._cardIds = new Set();
     layerState._cardGraceState = new Map();
     layerState._cardFrameSlots = new Map();

src/layers/cctv/catalog.js

@@ -1,4 +1,4 @@
-import { CAMERA_SEEDS, SOURCE_ENDPOINT } from './policy.js';
+import { CAMERA_SEEDS } from './policy.js';
 import {
   lookupModelSpec,
   horizontalFovRangeDeg,

src/layers/cctv/controls.js

@@ -205,22 +205,21 @@ export function createControls({ state: layerState, services, parts, source }) {
      * @returns {{ position: Cesium.Cartesian3, id: string, type: string }[]}
      */
     getDetectableObjects(options = {}) {
-      if (!layerState._enabled || layerState._records.length === 0) return [];
+      // The cameras the view pass shows, not icons it has hidden.
+      const records = layerState._viewRecords;
+      if (!layerState._enabled || records.length === 0) return [];
       const maxCount = Number.isFinite(options.maxCount)
         ? Math.max(1, Math.floor(options.maxCount))
-        : layerState._records.length;
+        : records.length;
       const seed = Number.isFinite(options.seed) ? Math.floor(options.seed) : 0;
-      const stride = Math.max(
-        1,
-        Math.ceil(layerState._records.length / maxCount),
-      );
+      const stride = Math.max(1, Math.ceil(records.length / maxCount));
       const start = seed % stride;
 
       const objects = [];
-      for (let i = start; i < layerState._records.length; i += stride) {
-        const camera = layerState._records[i].camera;
+      for (let i = start; i < records.length; i += stride) {
+        const camera = records[i].camera;
         objects.push({
-          position: layerState._records[i].position,
+          position: records[i].position,
           sourceId: camera.id,
           // Short semantic code where the id is opaque (see cameraDisplayCode).
           id: `CAM-${camera.code || camera.id}`,

src/layers/cctv/frames.js

@@ -5,9 +5,6 @@ import {
   PROJECTION_CANVAS_HEIGHT,
   PROJECTION_MATTE_COLOR,
   PROJECTION_TEXTURE_SWAP_MS,
-  ACTIVE_FRAME_REFRESH_MS,
-  FRAME_ENDPOINT,
-  MEDIA_ENDPOINT,
   PROJECTION_ACTIVE_REFRESH_MS,
   PROJECTION_IDLE_REFRESH_MS,
   PLACEHOLDER_REPAINT_MS,

src/layers/cctv/geometry.js

@@ -1,7 +1,6 @@
 import * as Cesium from 'cesium';
 import { createFrustumVolumePrimitive } from '../../data/cctvViewshed.js';
 import {
-  PROJECTION_VERT_ASPECT,
   FRUSTUM_GROUND_CLEARANCE_M,
   PROBE_MIN_RANGE_M,
   PROBE_CLEARANCE_M,
@@ -582,6 +581,13 @@ export function createGeometry({ state: layerState, services, parts, source }) {
 
   function coverageNeighborCount(targetRecord) {
     if (!targetRecord) return 0;
+    // The summary asks on every notification; scan the catalog only when the
+    // camera, its pose or the catalog changed.
+    const { id, lat, lon, rangeM } = targetRecord.camera;
+    const key = `${id}|${lat}|${lon}|${rangeM}|${layerState._records.length}`;
+    const cached = layerState._neighborCountCache;
+    if (cached?.key === key && cached.records === layerState._records)
+      return cached.count;
     let count = 0;
     for (const record of layerState._records) {
       if (record === targetRecord) continue;
@@ -595,6 +601,11 @@ export function createGeometry({ state: layerState, services, parts, source }) {
         ((targetRecord.camera.rangeM + record.camera.rangeM) / 1000) * 0.92;
       if (dKm <= overlapKm) count++;
     }
+    layerState._neighborCountCache = {
+      key,
+      records: layerState._records,
+      count,
+    };
     return count;
   }
 

src/layers/cctv/geometryQueue.js

@@ -6,6 +6,8 @@ import {
   GEO_TRACKING_BATCH_DELAY_MS,
   GEO_LOAD_BATCH_SIZE,
   GEO_LOAD_BATCH_DELAY_MS,
+  VIEW_GEOMETRY_ATTEMPTS,
+  VIEW_GEOMETRY_RETRY_MS,
 } from './policy.js';
 
 export function createGeometryQueue({
@@ -25,6 +27,8 @@ export function createGeometryQueue({
       clearTimeout(layerState._geoQueueTimer);
       layerState._geoQueueTimer = 0;
     }
+    clearTimeout(layerState._viewGeometryRetryTimer);
+    layerState._viewGeometryRetryTimer = 0;
     layerState._geoQueue = [];
     layerState._geoProgressNotifier = null;
     if (clearProgress) {
@@ -223,6 +227,7 @@ export function createGeometryQueue({
             err?.message || err,
           );
         }
+        noteViewAttempt(record);
         if (
           layerState._geoLoading &&
           layerState._geoLoadDone < layerState._geoLoadTotal
@@ -236,14 +241,15 @@ export function createGeometryQueue({
         layerState._geoLoading = false;
         if (wasInitialLoad) {
           layerState._geoLoadDone = layerState._geoLoadTotal;
-          if (layerState._enabled) {
-            parts.rendering.refreshCoverageStyles();
-            // Geometry refinement may have replaced record.position objects — the
-            // one-shot drain completion re-anchors the card entries (event-driven,
-            // not a per-frame or timer pass).
-            parts.cards.refreshAmbientCards();
-          }
+          if (layerState._enabled) parts.rendering.refreshCoverageStyles();
         }
+        // Geometry refinement may have replaced record.position objects — every
+        // drain's completion re-anchors the card entries (event-driven, not a
+        // per-frame or timer pass).
+        // While the camera moves, moveEnd reselects them instead.
+        if (layerState._enabled && !layerState._cameraMoving)
+          parts.cards.refreshAmbientCards();
+        scheduleViewGeometryRetry();
         // Completion is never coalesced: subscribers must observe the final
         // loading state even if the last progress tick just happened.
         layerState._geoProgressNotifier?.finish();
@@ -261,16 +267,17 @@ export function createGeometryQueue({
 
   /**
    * Appends records to the geometry queue (no progress tracking) and starts
-   * the batch timer if idle. Used by update()'s ONE-SHOT tiles-ready completion
-   * pass (records left `!groundResolved` by an enable-time drain that ran while
-   * tiles were still streaming) so it shares the same stagger machinery as the
-   * initial load. Fires at most once per enable — never on a recurring timer.
+   * the batch timer if idle. Used by update()'s one-shot tiles-ready
+   * completion pass and by enqueueViewGeometry, so both share the initial
+   * load's stagger machinery. Never driven by a recurring timer.
    * @param {Object[]} records - Camera records needing geometry refresh.
    */
 
   function enqueueGeometryRefresh(records) {
+    const queued = new Set(layerState._geoQueue);
     for (const record of records) {
-      if (!layerState._geoQueue.includes(record)) {
+      if (!queued.has(record)) {
+        queued.add(record);
         layerState._geoQueue.push(record);
       }
     }
@@ -283,10 +290,10 @@ export function createGeometryQueue({
   }
 
   /**
-   * Starts the initial staggered load: orders all records active-camera-first,
-   * then by distance from the current viewer position (nearest first, so
-   * cameras likely in view refine before off-screen ones), and exposes
-   * loaded/total progress through uiState()/getStats() while running.
+   * Starts the initial staggered load over the geometry working set: active
+   * camera first, then by distance from the current viewer position (nearest
+   * first), and exposes loaded/total progress through uiState()/getStats()
+   * while running. Cameras outside the view refine when they come into it.
    */
 
   function startGeometryLoadQueue() {
@@ -303,7 +310,7 @@ export function createGeometryQueue({
     const refLon = carto
       ? Cesium.Math.toDegrees(carto.longitude)
       : (active?.camera.lon ?? 0);
-    const pending = layerState._records
+    const pending = geometryWorkingSet()
       .filter((record) => record !== active)
       .map((record) => ({
         record,
@@ -325,7 +332,134 @@ export function createGeometryQueue({
     );
     layerState._geoQueueTimer = setTimeout(processGeometryBatch, 0);
   }
+  /**
+   * The records whose geometry the view needs: the shown icons, the active
+   * camera and the coverage cohort drawn around it.
+   * @returns {Object[]}
+   */
+
+  function geometryWorkingSet() {
+    const records = new Set(layerState._viewRecords);
+    const active = parts.selection.getActiveRecord();
+    if (active) records.add(active);
+    for (const id of layerState._coverageVisibleIds) {
+      const record = layerState._recordById.get(id);
+      if (record) records.add(record);
+    }
+    return [...records];
+  }
+
+  /** The regime key a view attempt counts against: interim while tiles stream. */
+  function viewAttemptKey() {
+    const regime = parts.ground.currentSurfaceRegime();
+    const tilesReady =
+      regime !== 'google-3d' || parts.model.projectionTilesReady();
+    return { key: tilesReady ? regime : `${regime}:interim`, tilesReady };
+  }
+
+  /**
+   * Counts a processed geometry attempt against the current regime key; each
+   * key keeps its own count, so tile streaming going on and off does not
+   * reset the ready-tiles budget.
+   */
+  function noteViewAttempt(record) {
+    const { key } = viewAttemptKey();
+    record.viewAttempts ??= {};
+    record.viewAttempts[key] = (record.viewAttempts[key] || 0) + 1;
+    record.viewAttemptAt = performance.now();
+  }
+
+  /**
+   * Whether a record may be attempted again under `key`. After a first
+   * unresolved attempt, the second waits out VIEW_GEOMETRY_RETRY_MS so its
+   * elevation cell can warm, rather than going to the next motion tick.
+   */
+  /** Whether a record still has an attempt left under the current key. */
+  function withinViewBudget(record) {
+    const { key } = viewAttemptKey();
+    return (record.viewAttempts?.[key] || 0) < VIEW_GEOMETRY_ATTEMPTS;
+  }
+
+  function attemptsLeft(record, key) {
+    const attempts = record.viewAttempts?.[key] || 0;
+    if (attempts >= VIEW_GEOMETRY_ATTEMPTS) return false;
+    return (
+      attempts === 0 ||
+      performance.now() - record.viewAttemptAt >= VIEW_GEOMETRY_RETRY_MS
+    );
+  }
+
+  /**
+   * After a drain, gives working-set cameras it left ungrounded one more
+   * attempt once their elevation cells have had time to warm. The timer is
+   * set for the earliest such camera and re-arms for the rest when it fires.
+   */
+  function scheduleViewGeometryRetry() {
+    if (!layerState._enabled || layerState._viewGeometryRetryTimer) return;
+    const { key } = viewAttemptKey();
+    const active = parts.selection.getActiveRecord();
+    let due = Infinity;
+    for (const record of geometryWorkingSet()) {
+      const attempts = record.viewAttempts?.[key] || 0;
+      if (
+        record === active ||
+        attempts === 0 ||
+        attempts >= VIEW_GEOMETRY_ATTEMPTS ||
+        !parts.ground.needsGeometry(record)
+      )
+        continue;
+      due = Math.min(due, record.viewAttemptAt + VIEW_GEOMETRY_RETRY_MS);
+    }
+    if (due === Infinity) return;
+    layerState._viewGeometryRetryTimer = setTimeout(
+      () => {
+        layerState._viewGeometryRetryTimer = 0;
+        enqueueViewGeometry();
+        // A drain re-arms on completion; with none running, the cameras still
+        // cooling down need their own timer.
+        if (!layerState._geoQueueTimer) scheduleViewGeometryRetry();
+      },
+      Math.max(0, due - performance.now()),
+    );
+  }
+
+  /**
+   * Queues working-set cameras the current surface has not grounded yet,
+   * after a camera move brings new ones into view. Attempts are counted when
+   * a record is processed, not queued, so a drain cut short by disable() is
+   * not lost; each record gets VIEW_GEOMETRY_ATTEMPTS per surface regime,
+   * spaced by VIEW_GEOMETRY_RETRY_MS, so a sample the shared floor refuses
+   * (too far, too high) is not retried on every move. While photoreal tiles are still streaming the attempts are
+   * interim, and the update() completion pass is re-armed to retry these
+   * records when they land. The active camera is left to selection, which
+   * owns its re-sampling.
+   */
+
+  function enqueueViewGeometry() {
+    if (!layerState._enabled) return;
+    const { key, tilesReady } = viewAttemptKey();
+    const active = parts.selection.getActiveRecord();
+    const pending = [];
+    let coolingDown = false;
+    for (const record of geometryWorkingSet()) {
+      if (record === active || !parts.ground.needsGeometry(record)) continue;
+      if (!attemptsLeft(record, key)) {
+        coolingDown ||=
+          (record.viewAttempts?.[key] || 0) < VIEW_GEOMETRY_ATTEMPTS;
+        continue;
+      }
+      pending.push(record);
+    }
+    // A camera back in view during its cooldown still needs its retry timer.
+    if (coolingDown && !layerState._geoQueueTimer) scheduleViewGeometryRetry();
+    if (!pending.length) return;
+    if (!tilesReady) layerState._tilesReadyReenqueued = false;
+    enqueueGeometryRefresh(pending);
+  }
   return {
+    enqueueViewGeometry,
+    withinViewBudget,
+    geometryWorkingSet,
     stopGeometryLoadQueue,
     createGeometryProgressNotifier,
     processCctvGeometryQueueBatch,

src/layers/cctv/ground.js

@@ -1,3 +1,4 @@
+import * as Cesium from 'cesium';
 import {
   SUPPORT_KEYS,
   planeSupportPoints,
@@ -78,6 +79,14 @@ export function createGround({ state: layerState, services, parts, source }) {
     return record?.groundResolved?.[regime] === true;
   }
 
+  /**
+   * True until the record has geometry grounded for the regime. Cameras are
+   * refined only once they enter the view, so many never have geometry.
+   */
+  function needsGeometry(record, regime = currentSurfaceRegime()) {
+    return !record?.frustumGeometry || !isGroundResolved(record, regime);
+  }
+
   /**
    * Ground altitude used for pure geometry recomputes: the given regime's
    * cached resolution (`record.groundSamples[regime]` — a shared mesh/DEM floor
@@ -184,8 +193,11 @@ export function createGround({ state: layerState, services, parts, source }) {
    * Task 5: applies a LATE-arriving ground-prior batch (init's bounded race
    * lost — cold proxy cache / slow upstream). Pure recomputes only, no scene
    * queries:
+   *  - records without geometry yet: only the icon moves onto the prior;
+   *    the frustum is built when the camera enters the view.
    *  - terrain-globe regime: the prior IS the resolution → re-run the
-   *    resolution (updateRecordGeometry latches it) for every record.
+   *    resolution (updateRecordGeometry latches it) for every record with
+   *    geometry.
    *  - google-3d regime: records still awaiting a shared floor move from the
    *    catalog fallback onto the exact prior; records already holding a shared
    *    mesh/DEM floor keep it untouched.
@@ -198,6 +210,7 @@ export function createGround({ state: layerState, services, parts, source }) {
   function applyLateGroundPriors(records, priors) {
     if (!Array.isArray(records) || !Array.isArray(priors)) return;
     let applied = 0;
+    let moved = 0;
     for (let i = 0; i < records.length && i < priors.length; i++) {
       const record = records[i];
       const prior = priors[i];
@@ -212,6 +225,24 @@ export function createGround({ state: layerState, services, parts, source }) {
         record.camera.absoluteHeightM =
           prior.ellipsoid + record.camera.mountHeightM;
       }
+      // Cameras without geometry only move their icon onto the prior, so the
+      // view pass projects the right point; their frustums are built when
+      // they enter the view, as recomputing the whole catalog here would
+      // stall a large one.
+      if (!record.frustumGeometry) {
+        if (record.position) {
+          Cesium.Cartesian3.fromDegrees(
+            record.camera.lon,
+            record.camera.lat,
+            record.camera.absoluteHeightM,
+            undefined,
+            record.position,
+          );
+          if (record.billboard) record.billboard.position = record.position;
+          moved += 1;
+        }
+        continue;
+      }
       const regime = currentSurfaceRegime();
       if (regime === 'terrain-globe') {
         // Prior IS the resolution — re-latch onto the fresh value.
@@ -224,7 +255,9 @@ export function createGround({ state: layerState, services, parts, source }) {
         applied += 1;
       }
     }
-    if (applied) parts.presentation.notifyListeners();
+    if (moved && parts.rendering.refreshHorizonCulling())
+      parts.geometryQueue.enqueueViewGeometry();
+    if (applied || moved) parts.presentation.notifyListeners();
   }
 
   /**
@@ -234,7 +267,7 @@ export function createGround({ state: layerState, services, parts, source }) {
    * deck/building-top in google-3d vs bare Re:Earth DEM on globe stacks), so
    * on a REGIME change (photoreal ↔ globe; bing→osm stays 'terrain-globe' and
    * no-ops):
-   *  1. every record's geometry recomputes IMMEDIATELY from the new regime's
+   *  1. every record that has geometry recomputes IMMEDIATELY from the new regime's
    *     resolution — cached sample if that regime has one, else the Re:Earth
    *     prior (never blank, zero scene queries);
    *  2. entering google-3d re-arms the one-shot tiles-ready completion latch so
@@ -250,6 +283,9 @@ export function createGround({ state: layerState, services, parts, source }) {
     layerState._lastAppliedRegime = regime;
 
     for (const record of layerState._records) {
+      // Only cameras that already have geometry are rewritten; the rest are
+      // grounded for the new regime when they enter the view.
+      if (!record.frustumGeometry) continue;
       if (regime === 'terrain-globe') {
         // Prior IS the resolution — latch it (zero scene queries).
         record.groundSamples['terrain-globe'] = groundPriorAltFor(record);
@@ -353,6 +389,7 @@ export function createGround({ state: layerState, services, parts, source }) {
     resolveFootprintGround,
     groundPriorAltFor,
     isGroundResolved,
+    needsGeometry,
     groundAltFor,
     rearmGroundResolution,
     resolveCommittedGroundAnchor,

src/layers/cctv/headingConfidence.js

@@ -1,4 +1,5 @@
 import { t } from '../../i18n/index.js';
+import { roundHeadingDegrees } from '../../data/headingDegrees.js';
 
 /**
  * @module headingConfidence
@@ -44,7 +45,7 @@ export function isHeadingEstimated(camera) {
  * @returns {string}
  */
 export function headingHudToken(camera) {
-  const hdg = Math.round(Number(camera?.headingDeg) || 0);
+  const hdg = roundHeadingDegrees(Number(camera?.headingDeg)) ?? 0;
   return isHeadingEstimated(camera)
     ? t('HDG {value}° (ESTIMATED)', { value: hdg })
     : t('HDG {value}°', { value: hdg });

src/layers/cctv/headingConfidence.test.mjs

@@ -44,6 +44,15 @@ test('HUD token tags a synthetic bearing and rounds the degrees', () => {
   );
 });
 
+test('HUD token reads a bearing that rounds to north as 0°, not 360°', () => {
+  assert.equal(headingHudToken({ headingDeg: 359.4 }), 'HDG 359°');
+  assert.equal(headingHudToken({ headingDeg: 359.6 }), 'HDG 0°');
+  assert.equal(
+    headingHudToken({ headingDeg: 359.5, headingConfidence: 'low' }),
+    'HDG 0° (ESTIMATED)',
+  );
+});
+
 test('HUD token stays untagged for surveyed and calibrated bearings', () => {
   assert.equal(
     headingHudToken({ headingDeg: 67.5, headingConfidence: 'high' }),

src/layers/cctv/health.js

@@ -1,4 +1,4 @@
-import { HEALTH_SYNC_INTERVAL_MS, HEALTH_ENDPOINT } from './policy.js';
+import { HEALTH_SYNC_INTERVAL_MS } from './policy.js';
 
 export function createHealth({ state: layerState, services, parts, source }) {
   /**

src/layers/cctv/index.js

@@ -91,6 +91,9 @@ export function createCctvLayer({ services, source }) {
       processGeometryBatch: parts.geometryQueue.processGeometryBatch,
       hideCctvRecordVisuals: parts.rendering.hideCctvRecordVisuals,
       refreshCoverageStyles: parts.rendering.refreshCoverageStyles,
+      refreshHorizonCulling: parts.rendering.refreshHorizonCulling,
+      _viewRecordIdsForTest: () =>
+        state._viewRecords.map((record) => record.camera.id),
       clearProbeClampOnDeactivation:
         parts.geometry.clearProbeClampOnDeactivation,
       cctvRecordNeedsActivation: parts.model.cctvRecordNeedsActivation,

src/layers/cctv/ingestion.js

@@ -32,13 +32,22 @@ export function createIngestion({
         // projectionTilesReady() is false while a (hidden) Google tileset
         // exists, so this latch effectively fires for the google-3d regime —
         // terrain-globe records resolve from the prior in their drain pass.
-        const unresolved = layerState._records.filter(
-          (record) => !parts.ground.isGroundResolved(record),
-        );
+        const unresolved = parts.geometryQueue
+          .geometryWorkingSet()
+          .filter(
+            (record) =>
+              !parts.ground.isGroundResolved(record) &&
+              parts.geometryQueue.withinViewBudget(record),
+          );
         if (unresolved.length)
           parts.geometryQueue.enqueueGeometryRefresh(unresolved);
       }
       await parts.health.syncHealthState();
+      // New health can change which camera wins a crowded cell.
+      if (layerState._enabled && parts.rendering.refreshHorizonCulling()) {
+        parts.geometryQueue.enqueueViewGeometry();
+        parts.cards.refreshAmbientCards();
+      }
       parts.navigation.maybeAutoHop(now);
       parts.presentation.notifyListeners();
     },

src/layers/cctv/lifecycle.js

@@ -7,8 +7,14 @@ import {
   CAMERA_ICON,
   IDLE_CAMERA_COLOR,
   CALIBRATION_RANGE_FLOOR_M,
+  VIEW_MOTION_REFRESH_MS,
+  VIEW_MOTION_MIN_MOVE_FRACTION,
+  VIEW_MOTION_MIN_TURN_DEG,
+  VIEW_MOTION_COST_FACTOR,
 } from './policy.js';
 
+const MIN_TURN_COS = Math.cos((VIEW_MOTION_MIN_TURN_DEG * Math.PI) / 180);
+
 export function createLifecycle({
   state: layerState,
   services,
@@ -22,15 +28,94 @@ export function createLifecycle({
   const { onFocusTargetAppear } = services.focus;
   const { releaseContinuousRender } = services.render;
 
+  /**
+   * The settled-view pass: thin the icons, queue the newly visible geometry,
+   * reselect cards, and tell subscribers (the camera picker) when the shown
+   * set changed since they were last told, including by motion passes.
+   */
+  function settleView() {
+    const changed = parts.rendering.refreshHorizonCulling();
+    noteViewPose();
+    parts.geometryQueue.enqueueViewGeometry();
+    parts.cards.refreshAmbientCards();
+    if (changed || layerState._viewUnpublished) {
+      layerState._viewUnpublished = false;
+      parts.presentation.notifyListeners();
+    }
+  }
+
+  /** Records the camera pose the last view pass ran at. */
+  function noteViewPose() {
+    const camera = layerState._viewer?.camera;
+    if (!camera?.positionWC) return;
+    layerState._viewPose = {
+      position: Cesium.Cartesian3.clone(camera.positionWC),
+      direction:
+        camera.directionWC && Cesium.Cartesian3.clone(camera.directionWC),
+    };
+  }
+
+  /**
+   * Whether the camera moved or turned enough since the last view pass to
+   * change what is on screen. A camera that tracks or flies without settling
+   * would otherwise rerun the full pass on every tick.
+   */
+  function viewPoseChanged() {
+    const camera = layerState._viewer?.camera;
+    const pose = layerState._viewPose;
+    if (!pose || !camera?.positionWC) return true;
+    const height = Math.max(1, camera.positionCartographic?.height ?? 0);
+    const moved = Cesium.Cartesian3.distance(camera.positionWC, pose.position);
+    if (moved > height * VIEW_MOTION_MIN_MOVE_FRACTION) return true;
+    if (!pose.direction || !camera.directionWC) return false;
+    return (
+      Cesium.Cartesian3.dot(camera.directionWC, pose.direction) < MIN_TURN_COS
+    );
+  }
+
+  function viewMotionTick() {
+    if (!layerState._enabled) return;
+    const now = performance.now();
+    const pass = layerState._viewMotionPass;
+    if (pass && now - pass.at < pass.ms * VIEW_MOTION_COST_FACTOR) return;
+    if (!viewPoseChanged()) return;
+    if (parts.rendering.refreshHorizonCulling())
+      layerState._viewUnpublished = true;
+    noteViewPose();
+    parts.geometryQueue.enqueueViewGeometry();
+    layerState._viewMotionPass = { at: now, ms: performance.now() - now };
+  }
+
+  function startViewMotionTimer() {
+    if (layerState._viewMotionTimer) return;
+    layerState._viewMotionTimer = setInterval(
+      viewMotionTick,
+      VIEW_MOTION_REFRESH_MS,
+    );
+  }
+
+  function stopViewMotionTimer() {
+    clearInterval(layerState._viewMotionTimer);
+    layerState._viewMotionTimer = 0;
+  }
+
   /** Resets all module-scoped runtime state to initial values. */
 
   function clearRuntimeState() {
     parts.geometryQueue.stopGeometryLoadQueue();
+    stopViewMotionTimer();
     // Idempotent — also covers a re-init without a prior destroy().
     parts.cards.teardownAmbientCards();
     parts.projection.clearProjectionOverlay();
     layerState._records = [];
     layerState._recordById = new Map();
+    layerState._viewRecords = [];
+    layerState._cameraIndexCache = null;
+    layerState._coverageVisibleIds = new Set();
+    layerState._neighborCountCache = null;
+    layerState._viewUnpublished = false;
+    layerState._viewPose = null;
+    layerState._viewMotionPass = null;
     layerState._healthById = new Map();
     layerState._count = 0;
     layerState._lastUpdate = null;
@@ -71,6 +156,13 @@ export function createLifecycle({
       layerState._calibrationById = parts.calibration.loadCalibrationStore();
 
       layerState._billboards = new Cesium.BillboardCollection();
+      // Cesium switches a property's buffer-usage hint whenever it starts or
+      // stops changing from one frame to the next, and every switch rewrites
+      // the vertex data of every billboard. The view pass toggles `show` on a
+      // few icons of a large catalog at a time, so on a 33K catalog each pass
+      // cost two full rewrites. With the hint fixed, Cesium uploads only the
+      // icons that changed.
+      layerState._billboards.computeNewBuffersUsage = () => false;
       layerState._viewer.scene.primitives.add(layerState._billboards);
       registerSpriteCollection('cctv', layerState._billboards);
 
@@ -243,28 +335,76 @@ export function createLifecycle({
       // Field-test fix (2026-07-06): horizon-cull on camera settle (pairs with
       // the billboards' always-on-top depth setting) + one initial pass so the
       // first paint is already culled.
+      // A re-init against a new viewer moves the move listeners to its camera.
+      if (
+        layerState._viewListenerCamera &&
+        layerState._viewListenerCamera !== layerState._viewer.camera
+      ) {
+        const previous = layerState._viewListenerCamera;
+        if (layerState._horizonCullListener)
+          previous.moveEnd?.removeEventListener(
+            layerState._horizonCullListener,
+          );
+        if (layerState._moveStartListener)
+          previous.moveStart?.removeEventListener(
+            layerState._moveStartListener,
+          );
+        layerState._horizonCullListener = null;
+        layerState._moveStartListener = null;
+        layerState._cameraMoving = false;
+      }
+      layerState._viewListenerCamera = layerState._viewer.camera;
       if (!layerState._horizonCullListener) {
         // Ambient cards piggyback the same settle event: moveEnd-driven
         // reselection only, never per frame (refreshAmbientCards no-ops while
         // the layer is disabled).
         layerState._horizonCullListener = () => {
           layerState._cameraMoving = false;
-          parts.rendering.refreshHorizonCulling();
-          parts.cards.refreshAmbientCards();
+          stopViewMotionTimer();
+          settleView();
         };
         layerState._viewer.camera.moveEnd.addEventListener(
           layerState._horizonCullListener,
         );
       }
       if (!layerState._moveStartListener) {
-        // Item B: hover picking pauses while the camera is in motion.
+        // Item B: hover picking pauses while the camera is in motion. A long
+        // move (cockpit flight, a drag) never settles, so the view pass also
+        // reruns on an interval until it does.
         layerState._moveStartListener = () => {
           layerState._cameraMoving = true;
+          // enable() starts it for a move already under way.
+          if (layerState._enabled) startViewMotionTimer();
         };
         layerState._viewer.camera.moveStart.addEventListener(
           layerState._moveStartListener,
         );
       }
+      // A resize or rotation changes what is on screen without moving the
+      // camera.
+      const canvas = layerState._viewer.scene?.canvas;
+      if (layerState._viewResizeCanvas !== canvas) {
+        // A re-init against a new viewer observes its canvas instead.
+        layerState._viewResizeObserver?.disconnect();
+        layerState._viewResizeObserver = null;
+        layerState._viewResizeCanvas = null;
+      }
+      if (
+        !layerState._viewResizeObserver &&
+        typeof ResizeObserver === 'function' &&
+        canvas
+      ) {
+        let frame = 0;
+        layerState._viewResizeObserver = new ResizeObserver(() => {
+          if (frame || !layerState._enabled) return;
+          frame = requestAnimationFrame(() => {
+            frame = 0;
+            if (layerState._enabled) settleView();
+          });
+        });
+        layerState._viewResizeObserver.observe(canvas);
+        layerState._viewResizeCanvas = canvas;
+      }
       parts.rendering.refreshHorizonCulling();
 
       layerState._clickHandler = new Cesium.ScreenSpaceEventHandler(
@@ -325,6 +465,12 @@ export function createLifecycle({
       );
 
       await parts.health.syncHealthState(true);
+      // Health ranks crowded cells: thin again now that it has arrived (a
+      // no-op unless enable() ran while health was loading).
+      if (parts.rendering.refreshHorizonCulling()) {
+        parts.geometryQueue.enqueueViewGeometry();
+        parts.cards.refreshAmbientCards();
+      }
       parts.rendering.refreshCoverageStyles();
       parts.presentation.notifyListeners();
       restoreSpriteOrder(layerState._viewer);
@@ -370,6 +516,9 @@ export function createLifecycle({
         parts.projection.ensureProjectionRuntime(activeRecord);
         parts.frames.refreshProjectionImage(activeRecord, true);
       }
+      parts.rendering.refreshHorizonCulling();
+      // Re-enabled mid-flight: moveStart has already fired.
+      if (layerState._cameraMoving) startViewMotionTimer();
       parts.geometryQueue.startGeometryLoadQueue();
       parts.rendering.refreshCoverageStyles();
       parts.projection.startProjectionLoop();
@@ -402,10 +551,14 @@ export function createLifecycle({
       layerState._removeFocusAppearListener = null;
       parts.projection.stopProjectionLoop();
       parts.geometryQueue.stopGeometryLoadQueue();
+      stopViewMotionTimer();
       // Ambient cards tear down COMPLETELY on disable (owner design point 6):
       // source entries, pacer timer, in-flight handlers, and caches.
       parts.cards.teardownAmbientCards();
       parts.rendering.hideCctvVisuals();
+      // Nothing is in view while the layer is off.
+      layerState._viewRecords = [];
+      layerState._cameraIndexCache = null;
       parts.presentation.notifyListeners();
     },
 
@@ -443,6 +596,13 @@ export function createLifecycle({
         );
         layerState._moveStartListener = null;
       }
+      // The move listeners are gone; nothing will report the end of a move.
+      layerState._cameraMoving = false;
+      layerState._viewListenerCamera = null;
+      stopViewMotionTimer();
+      layerState._viewResizeObserver?.disconnect();
+      layerState._viewResizeObserver = null;
+      layerState._viewResizeCanvas = null;
       if (layerState._gizmo) {
         layerState._gizmo.destroy();
         layerState._gizmo = null;

src/layers/cctv/policy.js

@@ -1,10 +1,4 @@
-export {
-  FRAME_ENDPOINT,
-  SOURCE_ENDPOINT,
-  HEALTH_ENDPOINT,
-  MEDIA_ENDPOINT,
-  ACTIVE_FRAME_REFRESH_MS,
-} from './sourcePolicy.js';
+export { ACTIVE_FRAME_REFRESH_MS } from './sourcePolicy.js';
 import * as Cesium from 'cesium';
 import { CCTV_CARD_FETCH_BURST_SPACING_MS } from '../../data/cctvCards.js';
 import { CCTV_AMBIENT_CARD_MAX } from '../../data/cctvLod.js';
@@ -66,6 +60,45 @@ export const GEO_PROGRESS_NOTIFY_INTERVAL_MS = 300;
 
 export const GEO_PROGRESS_NOTIFY_BATCH_LIMIT = 10;
 
+// View thinning: camera icons show only on or near the screen, and each
+// camera competes for a world-anchored grid cell sized to about VIEW_CELL_PX
+// at its distance from the viewer (in power-of-two metre steps, so a pan
+// keeps the same winners until a camera's distance crosses a step). Cells
+// smaller than VIEW_MIN_CELL_M do not thin:
+// close up every camera shows, co-located ones included.
+
+export const VIEW_CELL_PX = 40;
+
+export const VIEW_MIN_CELL_M = 60;
+
+// Icons this far past the screen edge (fraction of its size) still show, so
+// a pan does not reveal empty ground before the next view pass.
+
+export const VIEW_ICON_MARGIN = 0.5;
+
+// While the camera moves, the view pass reruns at most this often.
+
+export const VIEW_MOTION_REFRESH_MS = 250;
+// A motion tick is skipped unless the camera moved this fraction of its
+// ellipsoid height, or turned this many degrees, since the last pass.
+
+export const VIEW_MOTION_MIN_MOVE_FRACTION = 0.01;
+
+export const VIEW_MOTION_MIN_TURN_DEG = 0.5;
+
+// Motion passes are spaced at least this many times the last pass's cost, so
+// a large catalog spends at most about a tenth of a long move on them.
+
+export const VIEW_MOTION_COST_FACTOR = 10;
+
+// A view camera's geometry is attempted at most this many times per surface
+// regime (a cold elevation cell can leave the first attempt unresolved); the
+// retry runs this long after the drain that left it unresolved.
+
+export const VIEW_GEOMETRY_ATTEMPTS = 2;
+
+export const VIEW_GEOMETRY_RETRY_MS = 1500;
+
 // Throttle for placeholder repaints — the projection RAF loop must not
 // re-fill a 1080p canvas on every frame while a feed image is still loading.
 
@@ -90,9 +123,6 @@ export const CCTV_CALIBRATION_STORAGE_KEY_V2 =
 
 export const PROJECTION_TEXTURE_SWAP_MS = 1000;
 
-export const PROJECTION_VERT_ASPECT =
-  PROJECTION_CANVAS_WIDTH / PROJECTION_CANVAS_HEIGHT;
-
 // V2 frustum geometry (design §2a/§6): the far-cap center + corners never sink
 // below groundAlt + this clearance, so a fabricated pitch (-24°) cannot bury
 // the monitor plane in the 3D tiles. Exported for the unit suite.

src/layers/cctv/presentation.i18n.test.mjs

@@ -0,0 +1,58 @@
+// The CCTV HUD summary shows the CAL badge, source kind and view band in the
+// UI language; English keeps its codes, and unknown source codes stay codes.
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { setLocale } from '../../i18n/index.js';
+import { createPresentation } from './presentation.js';
+
+function summary(sourceKind) {
+  const camera = {
+    id: 'c1',
+    city: 'Austin',
+    name: 'Cam',
+    rangeM: 100,
+    fovDeg: 60,
+    feedType: 'image',
+  };
+  const record = { camera };
+  const presentation = createPresentation({
+    state: {
+      _records: [record],
+      _healthById: new Map(sourceKind ? [['c1', { sourceKind }]] : []),
+      _showProjection: false,
+      _coverageMode: 'sector',
+    },
+    services: {},
+    parts: {
+      selection: { getActiveRecord: () => record },
+      model: {
+        sectorAreaKm2: () => 1,
+        currentViewContext: () => 'street:1:2',
+      },
+      geometry: { coverageNeighborCount: () => 0 },
+      calibration: { deriveCalBadge: () => 'raw-prior' },
+    },
+    source: {},
+  });
+  return presentation.buildSummaryText();
+}
+
+test('en: CAL, SRC and CONTEXT keep their English codes', () => {
+  setLocale('en');
+  assert.match(summary('upstream'), /CAL RAW PRIOR · SRC UPSTREAM/);
+  assert.match(summary(null), /SRC IMAGE · STREET CONTEXT/);
+  assert.match(summary('upstream-image'), /SRC UPSTREAM-IMAGE/);
+});
+
+test('fr: CAL, SRC and CONTEXT values are translated', () => {
+  setLocale('fr');
+  try {
+    assert.match(
+      summary('upstream'),
+      /CAL ESTIM\. INITIALE · SRC AMONT · CONTEXTE RUE/,
+    );
+    assert.match(summary('upstream-image'), /SRC UPSTREAM-IMAGE/);
+  } finally {
+    setLocale('en');
+  }
+});

src/layers/cctv/presentation.js

@@ -1,5 +1,5 @@
 import { CCTV_AMBIENT_CARD_MAX } from '../../data/cctvLod.js';
-import { t } from '../../i18n/index.js';
+import { isolate, msg, t } from '../../i18n/index.js';
 import { ACTIVE_FRAME_REFRESH_MS, IDLE_FRAME_REFRESH_MS } from './policy.js';
 import { headingHudToken, isHeadingEstimated } from './headingConfidence.js';
 import {
@@ -8,6 +8,59 @@ import {
   isDatasheetFov,
 } from './modelSpecs.js';
 
+// The summary line names the CAL badge, the source kind and the view band in
+// the page language; the codes underneath stay English.
+const CAL_BADGE_LABELS = Object.freeze({
+  calibrated: msg('CALIBRATED'),
+  curated: msg('CURATED'),
+  'raw-prior': msg('RAW PRIOR'),
+});
+
+// The same source-kind words as the CCTV panel (src/ui/cctvFrames.js).
+const SOURCE_KIND_LABELS = Object.freeze({
+  snapshot: msg('SNAPSHOT'),
+  live: msg('LIVE'),
+  fallback: msg('FALLBACK'),
+  upstream: msg('UPSTREAM'),
+  synthetic: msg('SYNTHETIC'),
+  configured: msg('CONFIGURED'),
+  seed: msg('SEED'),
+  image: msg('IMAGE'),
+  unknown: msg('UNKNOWN'),
+});
+
+/** CAL badge id ('raw-prior') as the summary shows it; unknown ids stay codes. */
+export function summaryCalLabel(badge) {
+  const key = String(badge || '');
+  return CAL_BADGE_LABELS[key]
+    ? t(CAL_BADGE_LABELS[key])
+    : key.replace('-', ' ').toUpperCase();
+}
+
+/** Source kind ('image', 'snapshot') for the summary; HLS, MJPEG… stay codes. */
+export function summarySourceLabel(kind) {
+  const key = String(kind || 'image').toLowerCase();
+  return SOURCE_KIND_LABELS[key]
+    ? t(SOURCE_KIND_LABELS[key])
+    : key.toUpperCase();
+}
+
+/** View band id ('street', 'city'…) as the HUD names it. */
+export function summaryViewBandLabel(band) {
+  switch (band) {
+    case 'street':
+      return t('STREET', { context: 'view band' });
+    case 'city':
+      return t('CITY', { context: 'view band' });
+    case 'regional':
+      return t('REGIONAL', { context: 'view band' });
+    case 'global':
+      return t('GLOBAL', { context: 'view band' });
+    default:
+      return String(band || '').toUpperCase();
+  }
+}
+
 export function createPresentation({
   state: layerState,
   services,
@@ -44,6 +97,8 @@ export function createPresentation({
     const health = layerState._healthById.get(active.camera.id) || null;
     const calBadge = parts.calibration.deriveCalBadge(active.camera);
 
+    // Each part is isolated: in right-to-left text a code keeps its own value
+    // (FOV 44°) instead of trading it with its neighbour.
     return [
       t('{city} CCTV', {
         city: active.camera.city.toUpperCase(),
@@ -72,17 +127,13 @@ export function createPresentation({
         : t('ISOLATED VIEW'),
       layerState._showProjection ? t('PROJ MONITOR') : t('PROJ OFF'),
       layerState._coverageMode === 'viewshed' ? t('VIEWSHED') : null,
-      t('CAL {value}', {
-        value: calBadge.replace('-', ' ').toUpperCase(),
+      t('CAL {value}', { value: summaryCalLabel(calBadge) }),
+      t('SRC {value}', {
+        value: summarySourceLabel(
+          health?.sourceKind || active.camera.feedType || 'image',
+        ),
       }),
-      health?.sourceKind
-        ? t('SRC {value}', {
-            value: String(health.sourceKind).toUpperCase(),
-          })
-        : t('SRC {value}', {
-            value: String(active.camera.feedType || 'image').toUpperCase(),
-          }),
-      t('{value} CONTEXT', { value: viewBand.toUpperCase() }),
+      t('{value} CONTEXT', { value: summaryViewBandLabel(viewBand) }),
       // Identified hardware: append the model's datasheet specs + attribution.
       active.camera.spec
         ? t('{spec} · SPECS: CCTV-DATABASE.COM', {
@@ -91,6 +142,7 @@ export function createPresentation({
         : null,
     ]
       .filter(Boolean)
+      .map(isolate)
       .join(' · ');
   }
 
@@ -225,14 +277,53 @@ export function createPresentation({
       },
       activeCameraId: activeId,
       activeCamera: active ? getPublicCameraState(active, activeId) : null,
-      cameras: layerState._records.map((record) =>
-        getPublicCameraState(record, activeId),
-      ),
+      cameraIndex: cameraIndex(),
       summary: buildSummaryText(),
     };
+    // The full per-camera state is built only when a subscriber reads it: a
+    // catalog of tens of thousands would otherwise be rebuilt on every
+    // progress tick for listeners that only want the active camera. It reads
+    // the records live at that moment, and spreading or serializing the
+    // payload builds it, so callers that want a count use `count`.
+    let cameras = null;
+    Object.defineProperty(payload, 'cameras', {
+      enumerable: true,
+      get() {
+        cameras ??= layerState._records.map((record) =>
+          getPublicCameraState(record, activeId),
+        );
+        return cameras;
+      },
+    });
     return payload;
   }
 
+  /**
+   * `{ id, city, name }` for the active camera, then every camera the view
+   * pass shows: what the camera picker lists. A whole catalog would put tens
+   * of thousands of options in the DOM and slow every layout. The same array
+   * is returned until the view or the active camera changes, so a consumer
+   * can compare it by identity.
+   * @returns {{id: string, city: string, name: string}[]}
+   */
+
+  function cameraIndex() {
+    const view = layerState._viewRecords;
+    const active = parts.selection.getActiveRecord();
+    const cached = layerState._cameraIndexCache;
+    if (cached?.view === view && cached.active === active) return cached.list;
+    const records = active
+      ? [active, ...view.filter((record) => record !== active)]
+      : view;
+    const list = records.map(({ camera }) => ({
+      id: camera.id,
+      city: camera.city,
+      name: camera.name,
+    }));
+    layerState._cameraIndexCache = { view, active, list };
+    return list;
+  }
+
   /** Dispatches the current UI state to all registered subscriber callbacks. */
 
   function notifyListeners() {

src/layers/cctv/presentation.test.mjs

@@ -0,0 +1,38 @@
+// The CCTV summary line names the CAL badge, the source kind and the view
+// band in the page language; unknown codes stay as uppercase codes.
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { setLocale } from '../../i18n/index.js';
+import {
+  summaryCalLabel,
+  summarySourceLabel,
+  summaryViewBandLabel,
+} from './presentation.js';
+
+function inLocale(locale, run) {
+  setLocale(locale);
+  try {
+    return run();
+  } finally {
+    setLocale('en');
+  }
+}
+
+test('English keeps the summary codes', () => {
+  assert.equal(summaryCalLabel('raw-prior'), 'RAW PRIOR');
+  assert.equal(summarySourceLabel('image'), 'IMAGE');
+  assert.equal(summarySourceLabel('hls'), 'HLS');
+  assert.equal(summaryViewBandLabel('street'), 'STREET');
+  assert.equal(summaryViewBandLabel('none'), 'NONE');
+});
+
+test('Portuguese summary values are translated', () => {
+  inLocale('pt', () => {
+    assert.equal(summaryCalLabel('raw-prior'), 'ESTIMATIVA BRUTA');
+    assert.equal(summaryCalLabel('calibrated'), 'CALIBRADA');
+    assert.equal(summarySourceLabel('IMAGE'), 'IMAGEM');
+    assert.equal(summarySourceLabel('mjpeg'), 'MJPEG');
+    assert.equal(summaryViewBandLabel('street'), 'RUA');
+    assert.equal(summaryViewBandLabel('city'), 'CIDADE');
+  });
+});

src/layers/cctv/rendering.js

@@ -1,5 +1,4 @@
 import * as Cesium from 'cesium';
-import { horizonOccluder } from '../../data/iconOrientation.js';
 import { isHeadingEstimated } from './headingConfidence.js';
 import {
   ACTIVE_CAMERA_COLOR,
@@ -11,8 +10,21 @@ import {
   ACTIVE_COVERAGE_EDGE,
   IDLE_COVERAGE_EDGE_MUTED,
   ACTIVE_COVERAGE_EDGE_DEPTHFAIL,
+  VIEW_CELL_PX,
+  VIEW_ICON_MARGIN,
+  VIEW_MIN_CELL_M,
 } from './policy.js';
 
+/** FNV-1a over a camera id: a stable, well-spread order for crowded cells. */
+function idHash(id) {
+  let hash = 0x811c9dc5;
+  for (let i = 0; i < id.length; i++) {
+    hash ^= id.charCodeAt(i);
+    hash = Math.imul(hash, 0x01000193);
+  }
+  return hash >>> 0;
+}
+
 export function createRendering({
   state: layerState,
   services,
@@ -138,24 +150,186 @@ export function createRendering({
    * (Google-3D regime) nothing writes far-side depth, and the billboards are now
    * always-on-top (`disableDepthTestDistance: INFINITY` — the far-zoom submerge
    * fix), so without this pass London's cluster would shine through the planet
-   * from a US viewpoint. Pure math over ≤ catalog-size points; runs on
-   * camera.moveEnd + init only (event-driven — no steady-state work).
+   * from a US viewpoint.
+   *
+   * The same pass thins the view so a large catalog stays readable and cheap:
+   * icons well off screen hide, and each camera competes for a world-anchored
+   * cell sized to VIEW_CELL_PX at its distance (healthiest first, then a stable
+   * id order). The active camera shows whenever it is above the horizon
+   * and near the screen, even in a crowded cell. The shown records become
+   * `_viewRecords`, the working set for geometry, cards and the camera picker;
+   * the array keeps its identity while the shown set is unchanged.
+   *
+   * Runs on camera settle, throttled during motion, on resize, enable and
+   * activation changes — never per frame.
+   * @returns {boolean} Whether the shown set changed.
    */
 
   function refreshHorizonCulling() {
     if (
+      !layerState._enabled ||
       !layerState._viewer ||
       layerState._viewer.isDestroyed() ||
       !layerState._records.length
     )
-      return;
-    const occluder = horizonOccluder(layerState._viewer.camera);
+      return false;
+    const { camera, scene } = layerState._viewer;
+    const width = scene.canvas.clientWidth || scene.canvas.width || 0;
+    const height = scene.canvas.clientHeight || scene.canvas.height || 0;
+    const minX = -width * VIEW_ICON_MARGIN;
+    const maxX = width * (1 + VIEW_ICON_MARGIN);
+    const minY = -height * VIEW_ICON_MARGIN;
+    const maxY = height * (1 + VIEW_ICON_MARGIN);
+    // Ground metres one pixel covers per metre of distance from the viewer.
+    const fovy = Number.isFinite(camera.frustum?.fovy)
+      ? camera.frustum.fovy
+      : Math.PI / 3;
+    const metresPerPixelPerMetre =
+      (2 * Math.tan(fovy / 2)) / Math.max(1, height);
+    const viewer = camera.positionWC;
+    // The horizon test of Cesium's EllipsoidalOccluder, inlined: this loop
+    // visits every camera in the catalog.
+    const inverseRadii = Cesium.Ellipsoid.WGS84.oneOverRadii;
+    const cx = viewer.x * inverseRadii.x;
+    const cy = viewer.y * inverseRadii.y;
+    const cz = viewer.z * inverseRadii.z;
+    const limbSquared = cx * cx + cy * cy + cz * cz - 1;
+    const activeId = layerState._activeCameraId;
+    const project = screenProjector(scene, camera, width, height);
+    const pass = (layerState._viewPassId = (layerState._viewPassId || 0) + 1);
+    const shown = [];
+    const cells = new Map();
+    for (const record of layerState._records) {
+      const position = record.billboard?.position;
+      if (!position) continue;
+      const vx = position.x * inverseRadii.x - cx;
+      const vy = position.y * inverseRadii.y - cy;
+      const vz = position.z * inverseRadii.z - cz;
+      const vtDotVc = -(vx * cx + vy * cy + vz * cz);
+      if (
+        limbSquared < 0
+          ? vtDotVc > 0
+          : vtDotVc > limbSquared &&
+            (vtDotVc * vtDotVc) / (vx * vx + vy * vy + vz * vz) > limbSquared
+      )
+        continue;
+      const screen = project(position);
+      if (
+        !screen ||
+        !(screen.x >= minX && screen.x <= maxX) ||
+        !(screen.y >= minY && screen.y <= maxY)
+      )
+        continue;
+      const dx = position.x - viewer.x;
+      const dy = position.y - viewer.y;
+      const dz = position.z - viewer.z;
+      const cellM =
+        VIEW_CELL_PX *
+        metresPerPixelPerMetre *
+        Math.sqrt(dx * dx + dy * dy + dz * dz);
+      if (record.camera.id === activeId || !(cellM >= VIEW_MIN_CELL_M)) {
+        record.viewPass = pass;
+        shown.push(record);
+        continue;
+      }
+      const key = worldCellKey(record, cellM);
+      const rank = viewRank(record);
+      const holder = cells.get(key);
+      if (!holder || rank < holder.rank) cells.set(key, { record, rank });
+    }
+    for (const { record } of cells.values()) {
+      record.viewPass = pass;
+      shown.push(record);
+    }
     for (const record of layerState._records) {
       const bb = record.billboard;
       if (!bb) continue;
-      const visible = occluder.isPointVisible(bb.position);
+      const visible = record.viewPass === pass;
       if (bb.show !== visible) bb.show = visible;
     }
+    const previous = layerState._viewRecords;
+    const changed =
+      previous.length !== shown.length ||
+      previous.some((record) => record.viewPass !== pass);
+    if (changed) layerState._viewRecords = shown;
+    return changed;
+  }
+
+  /**
+   * Canvas coordinates for world positions. In 3D the pass multiplies by one
+   * view-projection matrix per call instead of Cesium's per-point
+   * cartesianToCanvasCoordinates, which dominated the pass on a large
+   * catalog; other scene modes keep Cesium's projection.
+   * @returns {(position: Cesium.Cartesian3) => ({x: number, y: number}|null)}
+   */
+  function screenProjector(scene, camera, width, height) {
+    const out = layerState._scratchViewScreen;
+    const projection = camera.frustum?.projectionMatrix;
+    if (
+      scene.mode !== Cesium.SceneMode.SCENE3D ||
+      !projection ||
+      !camera.viewMatrix
+    )
+      return (position) => scene.cartesianToCanvasCoordinates(position, out);
+    const m = Cesium.Matrix4.multiply(
+      projection,
+      camera.viewMatrix,
+      layerState._scratchViewProjection,
+    );
+    return (p) => {
+      const w = m[3] * p.x + m[7] * p.y + m[11] * p.z + m[15];
+      const z = m[2] * p.x + m[6] * p.y + m[10] * p.z + m[14];
+      // Behind the eye or before the near plane: Cesium does not draw it.
+      if (!(w > 0) || z < 0) return null;
+      out.x =
+        ((m[0] * p.x + m[4] * p.y + m[8] * p.z + m[12]) / w + 1) * 0.5 * width;
+      out.y =
+        (1 - (m[1] * p.x + m[5] * p.y + m[9] * p.z + m[13]) / w) * 0.5 * height;
+      return out;
+    };
+  }
+
+  /**
+   * A grid cell fixed to the ground: `cellM` rounded up to a power of two
+   * metres, so the cell (and its winner) only changes when the camera's
+   * distance crosses a doubling: a level pan keeps it, a tilted pan or a zoom
+   * can move cameras near the edge of a step to the next one.
+   */
+  function worldCellKey(record, cellM) {
+    const level = Math.ceil(Math.log2(cellM));
+    const { lat, lon } = record.camera;
+    // A camera's key changes only with the level (or an edited position), so
+    // it is kept per level.
+    if (
+      record.viewCellLevel === level &&
+      record.viewCellLat === lat &&
+      record.viewCellLon === lon
+    )
+      return record.viewCellKey;
+    const latStep = 2 ** level / 111_320;
+    const row = Math.floor(lat / latStep);
+    const rowLat = Cesium.Math.toRadians((row + 0.5) * latStep);
+    const lonStep = latStep / Math.max(0.05, Math.cos(rowLat));
+    record.viewCellLevel = level;
+    record.viewCellLat = lat;
+    record.viewCellLon = lon;
+    record.viewCellKey = `${level}:${row}:${Math.floor(lon / lonStep)}`;
+    return record.viewCellKey;
+  }
+
+  /** Lower ranks win a crowded cell: healthy feeds first, then a stable id order. */
+  function viewRank(record) {
+    const status = layerState._healthById.get(record.camera.id)?.status;
+    const tier =
+      status === 'ok'
+        ? 0
+        : status === 'degraded'
+          ? 1
+          : status === 'offline'
+            ? 3
+            : 2;
+    record.viewHash ??= idHash(record.camera.id);
+    return tier * 2 ** 32 + record.viewHash;
   }
 
   /**
@@ -204,6 +378,8 @@ export function createRendering({
     const activeId = activeRecord?.camera.id || null;
     const coverageVisible =
       parts.geometry.buildCoverageVisibleSet(activeRecord);
+    // Drawn coverage needs geometry too (geometryQueue's working set).
+    layerState._coverageVisibleIds = coverageVisible;
     const coverageOn = layerState._coverageMode !== 'off';
     const viewshedOn = layerState._coverageMode === 'viewshed';
     if (coverageOn) {
@@ -215,8 +391,13 @@ export function createRendering({
     for (const record of layerState._records) {
       const isActive = record.camera.id === activeId;
       if (record.billboard) {
-        record.billboard.color = cameraColorFor(record);
-        record.billboard.scale = isActive ? 1.25 : 1.0;
+        // Unchanged writes still dirty the collection, which then rewrites
+        // every icon's vertices: across a large catalog, write only changes.
+        const color = cameraColorFor(record);
+        if (!Cesium.Color.equals(record.billboard.color, color))
+          record.billboard.color = color;
+        const scale = isActive ? 1.25 : 1.0;
+        if (record.billboard.scale !== scale) record.billboard.scale = scale;
         // disableDepthTestDistance stays POSITIVE_INFINITY for every billboard
         // (set at creation) — see the field-test far-zoom submerge fix there.
       }

src/layers/cctv/selection.js

@@ -141,6 +141,11 @@ export function createSelection({
     void parts.ground.resolveFootprintGround(record);
     record.activationDone = true;
     parts.rendering.refreshCoverageStyles();
+    // The active camera's icon always shows; the previously active one
+    // competes for its cell again. Its coverage neighbours join the working
+    // set and are queued for grounding.
+    parts.rendering.refreshHorizonCulling();
+    parts.geometryQueue.enqueueViewGeometry();
     // The newly active camera leaves the ambient ring (its monitor plane takes
     // over); the freed slot re-fills on this same pass.
     parts.cards.refreshAmbientCards();
@@ -171,7 +176,9 @@ export function createSelection({
         parts.ground.groundAltFor(previous),
       );
     });
+    parts.rendering.refreshHorizonCulling();
     parts.rendering.refreshCoverageStyles();
+    parts.geometryQueue.enqueueViewGeometry();
     parts.cards.refreshAmbientCards();
     layerState._gizmo?.refresh();
     parts.presentation.notifyListeners();

src/layers/cctv/sourcePolicy.js

@@ -1,9 +1,5 @@
 export const FRAME_ENDPOINT = '/api/cctv/frame';
 
-export const SOURCE_ENDPOINT = '/api/cctv/sources';
-
-export const HEALTH_ENDPOINT = '/api/cctv/health';
-
 export const MEDIA_ENDPOINT = '/api/cctv/media';
 
 export const ACTIVE_FRAME_REFRESH_MS = 10000;

src/layers/cctv/state.js

@@ -76,6 +76,63 @@ export function createState({ services }) {
 
   layerState._scratchFocusScreen = new Cesium.Cartesian2();
 
+  layerState._scratchViewScreen = new Cesium.Cartesian2();
+
+  layerState._scratchViewProjection = new Cesium.Matrix4();
+
+  // Counts view passes; a record shown by the latest pass carries its number.
+
+  layerState._viewPassId = 0;
+
+  // Records whose icons the last view pass showed (see refreshHorizonCulling):
+  // geometry refinement, the tiles-ready completion pass and ambient cards
+  // work over these, not the whole catalog.
+
+  layerState._viewRecords = [];
+
+  // Coverage ids refreshCoverageStyles last drew: part of the geometry
+  // working set even when their icons are thinned out.
+
+  layerState._coverageVisibleIds = new Set();
+
+  // View pass triggers besides camera settle: an interval while the camera
+  // moves, and a canvas resize observer.
+
+  layerState._viewMotionTimer = 0;
+
+  layerState._viewResizeObserver = null;
+
+  layerState._viewResizeCanvas = null;
+
+  // The camera the moveStart/moveEnd listeners are attached to.
+
+  layerState._viewListenerCamera = null;
+
+  // A motion pass changed the shown set and the settle pass has not yet told
+  // subscribers; the camera pose the last view pass ran at.
+
+  layerState._viewUnpublished = false;
+
+  layerState._viewPose = null;
+
+  // { at, ms } — when the last motion pass ran and what it cost.
+
+  layerState._viewMotionPass = null;
+
+  // Retries the view geometry a drain left unresolved, once cells warm.
+
+  layerState._viewGeometryRetryTimer = 0;
+
+  // { key, count } — the active camera's coverage-overlap count, which the
+  // summary reads on every notification.
+
+  layerState._neighborCountCache = null;
+
+  // { view, active, list } — the camera picker's index uiState publishes,
+  // rebuilt only when the view pass or the active camera changes.
+
+  layerState._cameraIndexCache = null;
+
   // Staggered geometry-load queue state (see startGeometryLoadQueue).
 
   layerState._geoQueue = [];

src/layers/cctv/testing.js

@@ -79,6 +79,7 @@ export function createTesting({ state: layerState, services, parts, source }) {
    * @param {boolean} [options.enabled=true] Layer enabled state.
    * @param {'off'|'on'|'viewshed'} [options.coverageMode='on'] Coverage mode.
    * @param {boolean} [options.showProjection=false] Projection visibility.
+   * @param {Map<string, Object>} [options.healthById] Health rows by camera id.
    * @returns {void}
    */
 
@@ -89,6 +90,7 @@ export function createTesting({ state: layerState, services, parts, source }) {
     enabled = true,
     coverageMode = 'on',
     showProjection = false,
+    healthById = new Map(),
   } = {}) {
     layerState._viewer = viewer;
     layerState._records = Array.isArray(records) ? records : [];
@@ -108,6 +110,11 @@ export function createTesting({ state: layerState, services, parts, source }) {
       'on',
     );
     layerState._showProjection = !!showProjection;
+    layerState._healthById = healthById;
+    layerState._viewRecords = [];
+    layerState._cameraIndexCache = null;
+    layerState._coverageVisibleIds = new Set();
+    layerState._neighborCountCache = null;
   }
   return {
     _pushAmbientCardEntriesForTest,

src/layers/cyclones/index.js

@@ -16,6 +16,7 @@ import {
 } from './labels.js';
 import {
   formatUtcDayMonth,
+  isolate,
   t,
   tn,
   msg,
@@ -25,9 +26,11 @@ import { formatQuantity } from '../../ui/unitLabels.js';
 
 // "10-12 15:00 UTC" never breaks across lines: no-break spaces, and a word
 // joiner after the hyphen (JetBrains Mono has no U+2011 non-breaking hyphen).
+// The clock is isolated (a no-op outside RTL): a no-break space between two
+// numbers joins them into one run, which in Arabic split the date around it.
 const utc = (value) =>
   value
-    ? `${formatUtcDayMonth(value).replace('-', '-\u2060')}\u00a0${value.slice(11, 16)}\u00a0UTC`
+    ? `${formatUtcDayMonth(value).replace('-', '-\u2060')}\u00a0${isolate(value.slice(11, 16))}\u00a0UTC`
     : t('Unavailable');
 const COVERAGE = msg(
   'Atlantic and eastern/central North Pacific; not worldwide cyclone coverage.',
@@ -41,13 +44,16 @@ const ADVISORIES_UNAVAILABLE = msg('Cyclone advisories unavailable');
 const SERVER_REASONS = new Set([msg('Cyclone data unavailable')]);
 const errorText = (error) =>
   error && (SERVER_REASONS.has(error) ? t(error) : translateKnown(error));
+// NHC's Tropical Cyclone Status JSON reference: PTC is post-tropical, PC is a
+// potential tropical cyclone, and subtropical systems are STS and STD.
 const CLASSIFICATION_NAMES = Object.freeze({
-  PTC: msg('Potential tropical cyclone'),
+  PC: msg('Potential tropical cyclone'),
+  PTC: msg('Post-tropical cyclone'),
   HU: msg('Hurricane'),
   TS: msg('Tropical storm'),
   TD: msg('Tropical depression'),
-  SS: msg('Subtropical storm'),
-  SD: msg('Subtropical depression'),
+  STS: msg('Subtropical storm'),
+  STD: msg('Subtropical depression'),
 });
 const classificationName = (code) =>
   Object.hasOwn(CLASSIFICATION_NAMES, code)

src/layers/cyclones/index.test.mjs

@@ -513,12 +513,13 @@ test('only the latest queued focus runs and an unchanged selection survives refr
 });
 test('classification display expands known codes without altering the source or guessing unknown meanings', async () => {
   for (const [code, label] of [
-    ['PTC', 'Potential tropical cyclone'],
+    ['PC', 'Potential tropical cyclone'],
+    ['PTC', 'Post-tropical cyclone'],
     ['HU', 'Hurricane'],
     ['TS', 'Tropical storm'],
     ['TD', 'Tropical depression'],
-    ['SS', 'Subtropical storm'],
-    ['SD', 'Subtropical depression'],
+    ['STS', 'Subtropical storm'],
+    ['STD', 'Subtropical depression'],
     ['EX', 'EX'],
     ['UNKNOWN', 'UNKNOWN'],
   ]) {

src/layers/cyclones/labels.js

@@ -64,7 +64,7 @@ const SHARED_CARD = Object.freeze({
  * @param {boolean} selected
  * @returns {object}
  */
-export function cycloneStormEntry(storm, selected) {
+function cycloneStormEntry(storm, selected) {
   return {
     ...SHARED_CARD,
     ...markerClearance(
@@ -92,7 +92,7 @@ export function cycloneStormEntry(storm, selected) {
  * @param {{tauHours:number,position:object}} point
  * @returns {object}
  */
-export function cycloneLeadEntry(stormId, point) {
+function cycloneLeadEntry(stormId, point) {
   return {
     ...SHARED_CARD,
     ...markerClearance(CYCLONE_MARKER_PX.forecast),

src/layers/cyclones/source.js

@@ -1,7 +1,11 @@
 import { readResponseJsonCapped } from '../../sources/httpBody.js';
 
+// Shared with the AI tools, so no i18n import: these errors stay English here
+// and the cyclones layer translates them where it shows them (translateKnown).
+const msg = (text) => text;
+
 export const CYCLONE_RESPONSE_LIMIT = 4 * 1024 * 1024;
-const malformed = () => new Error('Malformed cyclone snapshot');
+const malformed = () => new Error(msg('Malformed cyclone snapshot'));
 const text = (value, max = 160) => {
   if (
     typeof value !== 'string' ||
@@ -215,7 +219,7 @@ export function createCycloneSource({
       const abort = () => controller.abort(signal.reason);
       signal?.addEventListener('abort', abort, { once: true });
       const timer = setTimeout(
-        () => controller.abort(new Error('Cyclone request timed out')),
+        () => controller.abort(new Error(msg('Cyclone request timed out'))),
         timeoutMs,
       );
       try {

src/layers/directions/index.js

@@ -18,9 +18,20 @@
 
 import * as Cesium from 'cesium';
 import { roadLabel } from '../../data/routeSteps.js';
-import { t, msg, formatNumber, translateKnown } from '../../i18n/index.js';
+import {
+  t,
+  msg,
+  formatNumber,
+  getLocale,
+  translateKnown,
+} from '../../i18n/index.js';
 import { pointerOwnerName } from '../../data/pointerOwnerNames.js';
-import { formatQuantity } from '../../ui/unitLabels.js';
+import {
+  formatQuantity,
+  quantitySeparator,
+  unitLabel,
+} from '../../ui/unitLabels.js';
+import { distanceParts } from '../../data/distanceFormat.js';
 
 export const DIRECTIONS_STEP_OVERLAY_SOURCE_ID = 'directions-step';
 export const DIRECTIONS_STEP_OVERLAY_SOURCE_OPTIONS = Object.freeze({
@@ -38,33 +49,21 @@ export const DIRECTIONS_MODES = Object.freeze({
 export const DEFAULT_DIRECTIONS_MODE = 'car';
 
 /**
- * The route proxy's refusal texts (server/providers/places/routes.js). They
- * stay English on the wire and in the AI tools; the row shows them translated.
+ * The row error for a failed route request (createDirectionsSource errors),
+ * as English data; the Layers panel shows it translated (ROUTING_ERROR_PATTERNS
+ * in src/ui/statusText.js).
  */
-const ROUTING_REFUSALS = new Set([
-  msg('rate limited'),
-  msg('routing service is rate limited'),
-  msg('route leg too long'),
-  msg('route too long'),
-]);
-
-/** A refusal text from the route proxy in the language; unknown ones as given. */
-export function presentRoutingRefusal(text) {
-  return ROUTING_REFUSALS.has(text) ? t(text) : text;
-}
-
-/** The row text for a failed route request (createDirectionsSource errors). */
 export function presentRoutingFailure(error) {
   if (error?.status === 429) {
     return error.refusal
-      ? t('{error} — try again in a moment', {
-          error: presentRoutingRefusal(error.refusal),
-        })
-      : t('Routing is rate limited — try again in a moment');
+      ? // i18n-ignore: English data, shown through ROUTING_ERROR_PATTERNS
+        `${error.refusal} — try again in a moment`
+      : msg('Routing is rate limited — try again in a moment');
   }
   if (Number.isFinite(error?.status) && error.status > 0)
-    return t('Routing unavailable (HTTP {status})', { status: error.status });
-  return error?.message || t('Routing unavailable');
+    // i18n-ignore: English data, shown through ROUTING_ERROR_PATTERNS
+    return `Routing unavailable (HTTP ${error.status})`;
+  return error?.message || msg('Routing unavailable');
 }
 
 /** Route colour — the annotation palette's cyan, so voice routes and Directions match. */
@@ -110,16 +109,12 @@ export const FLIGHT_PROGRESS_MS = 250;
  * @returns {string}
  */
 export function routeDistanceText(meters) {
-  if (!Number.isFinite(meters) || meters < 0) return '';
-  if (meters < 100) return formatQuantity(Math.round(meters), 'm');
-  if (meters < 1000) return formatQuantity(Math.round(meters / 10) * 10, 'm');
-  const km = meters / 1000;
-  return km < 10
-    ? formatQuantity(km, 'km', {
-        minimumFractionDigits: 1,
-        maximumFractionDigits: 1,
-      })
-    : formatQuantity(Math.round(km), 'km');
+  const parts = distanceParts(meters, { metreStep: 10, exactBelowM: 100 });
+  if (!parts) return '';
+  return formatQuantity(parts.value, parts.unit, {
+    minimumFractionDigits: parts.digits,
+    maximumFractionDigits: parts.digits,
+  });
 }
 
 /**
@@ -130,12 +125,15 @@ export function routeDistanceText(meters) {
  */
 export function routeDurationText(seconds) {
   if (!Number.isFinite(seconds) || seconds < 0) return '';
-  if (seconds < 60) return formatQuantity(Math.round(seconds), 's');
+  const wholeSeconds = Math.round(seconds);
+  if (wholeSeconds < 60) return formatQuantity(wholeSeconds, 's');
   const minutes = Math.round(seconds / 60);
   if (minutes < 60) return formatQuantity(minutes, 'min');
   const hours = formatQuantity(Math.floor(minutes / 60), 'h');
   const rest = minutes % 60;
-  return rest ? `${hours}\u00a0${formatQuantity(rest, 'min')}` : hours;
+  if (!rest) return hours;
+  // "1 h 5 min"; Japanese runs the parts together: 1時間5分.
+  return `${hours}${quantitySeparator(unitLabel('h'))}${formatQuantity(rest, 'min')}`;
 }
 
 /** "left", "slightly right", … as it reads inside a maneuver sentence. */
@@ -306,16 +304,24 @@ export function directionsInstruction(step) {
         ? t('Merge onto {road}', values)
         : t('Merge', { context: 'maneuver' });
     case 'on ramp':
-      if (direction)
+      if (modifier === 'left' || modifier === 'right')
         return road
           ? t('Take the ramp on the {direction} onto {road}', values)
           : t('Take the ramp on the {direction}', values);
+      if (direction && modifier !== 'straight')
+        return road
+          ? t('Take the ramp {direction} onto {road}', values)
+          : t('Take the ramp {direction}', values);
       return road ? t('Take the ramp onto {road}', values) : t('Take the ramp');
     case 'off ramp':
-      if (direction)
+      if (modifier === 'left' || modifier === 'right')
         return road
           ? t('Take the exit on the {direction} onto {road}', values)
           : t('Take the exit on the {direction}', values);
+      if (direction && modifier !== 'straight')
+        return road
+          ? t('Take the exit {direction} onto {road}', values)
+          : t('Take the exit {direction}', values);
       return road ? t('Take the exit onto {road}', values) : t('Take the exit');
     case 'roundabout':
     case 'rotary':
@@ -344,9 +350,14 @@ export function directionsInstruction(step) {
       return road
         ? t('Exit the roundabout onto {road}', values)
         : t('Exit the roundabout');
-    case 'use lane':
-      if (direction) {
-        const lane = { road, direction: laneWord(modifier) };
+    case 'use lane': {
+      const side = modifier.includes('left')
+        ? 'left'
+        : modifier.includes('right')
+          ? 'right'
+          : '';
+      if (side) {
+        const lane = { road, direction: laneWord(side) };
         return road
           ? t('Use the {direction} lane onto {road}', lane)
           : t('Use the {direction} lane', lane);
@@ -354,6 +365,7 @@ export function directionsInstruction(step) {
       return road
         ? t('Continue onto {road}', values)
         : t('Continue', { context: 'maneuver' });
+    }
     default:
       return road
         ? t('Continue onto {road}', values)
@@ -390,6 +402,16 @@ export function normalizeDirectionsParams(params = {}) {
   return out;
 }
 
+/**
+ * A travel-mode word inside a sentence: lower case, except in German, where
+ * the words are nouns and keep their capital ("Auto", "Fahrrad").
+ * @param {string} word Translated mode word.
+ * @returns {string}
+ */
+function modeWordInSentence(word) {
+  return getLocale() === 'de' ? word : word.toLowerCase();
+}
+
 /**
  * Row chips for a given state. Pure so the chip logic is testable without a DOM.
  * @param {{mode:string, armed:null|'a'|'b', a:object|null, b:object|null, status:string, route:object|null}} state
@@ -405,7 +427,7 @@ export function directionsRowControls(state) {
     state: mode === id ? 'active' : 'idle',
     title: t('{mode} — reroute for {modeLower}', {
       mode: t(spec.word),
-      modeLower: t(spec.word).toLowerCase(),
+      modeLower: modeWordInSentence(t(spec.word)),
     }),
     params: { mode: id },
   }));
@@ -643,7 +665,9 @@ export function directionsStats(state) {
     return {
       count: route?.steps.length || 0,
       lastUpdate,
-      error: t('Another map tool is using clicks — close it, then SET A again'),
+      error: msg(
+        'Another map tool is using clicks — close it, then SET A again',
+      ),
       status: 'empty',
       source,
     };
@@ -662,7 +686,7 @@ export function directionsStats(state) {
     return {
       count: 0,
       lastUpdate,
-      error: error || t('No route found'),
+      error: error || msg('No route found'),
       status: 'empty',
       source,
     };
@@ -1144,13 +1168,10 @@ export function createDirectionsLayer({ services, source }) {
         clearRouteGraphics();
         _status = 'error';
         _error =
-          payload?.error === 'no route found'
-            ? t('No route found between A and B')
-            : payload?.error
-              ? t('Routing failed: {error}', {
-                  error: presentRoutingRefusal(payload.error),
-                })
-              : t('No route found between A and B');
+          // i18n-ignore: English data, shown through ROUTING_ERROR_PATTERNS
+          payload?.error && payload.error !== 'no route found'
+            ? `Routing failed: ${payload.error}`
+            : msg('No route found between A and B');
         return;
       }
       _route = route;
@@ -1167,9 +1188,9 @@ export function createDirectionsLayer({ services, source }) {
       // happened instead.
       _error =
         error?.name === 'AbortError'
-          ? t('Routing timed out')
+          ? msg('Routing timed out')
           : error?.name === 'TypeError'
-            ? t('Routing unavailable — no response from the routing service')
+            ? msg('Routing unavailable — no response from the routing service')
             : presentRoutingFailure(error);
     } finally {
       clearTimeout(timer);

src/layers/directions/statusLocale.test.mjs

@@ -0,0 +1,121 @@
+// Directions reports its fixed errors as English data (getStats(), and so the
+// layer snapshot the voice tools and the analyst read); the Layers panel row
+// shows them in the UI language.
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { setLocale, t as translate } from '../../i18n/index.js';
+import { LayerPanel } from '../../ui/layerPanel.js';
+import { directionsStats, presentRoutingFailure } from './index.js';
+
+const idle = {
+  enabled: true,
+  mode: 'car',
+  armed: null,
+  a: null,
+  b: null,
+  status: 'idle',
+  error: null,
+  route: null,
+  lastUpdate: null,
+};
+
+const cases = [
+  [
+    { ...idle, pointerBlocked: true },
+    'Another map tool is using clicks — close it, then SET A again',
+  ],
+  [{ ...idle, status: 'error' }, 'No route found'],
+  [
+    { ...idle, status: 'error', error: 'Routing timed out' },
+    'Routing timed out',
+  ],
+];
+
+function rowFor(stats) {
+  return LayerPanel.prototype._buildMetaText({
+    id: 'directions',
+    enabled: true,
+    stats,
+  });
+}
+
+// Route request failures with the proxy's refusal or an HTTP status in them:
+// [the request error, its English row error, the row text in the language]
+const failures = () => [
+  [
+    { status: 429, refusal: 'route leg too long' },
+    'route leg too long — try again in a moment',
+    translate('{error} — try again in a moment', {
+      error: translate('route leg too long'),
+    }),
+  ],
+  [
+    { status: 429, refusal: null },
+    'Routing is rate limited — try again in a moment',
+    translate('Routing is rate limited — try again in a moment'),
+  ],
+  [
+    { status: 503 },
+    'Routing unavailable (HTTP 503)',
+    translate('Routing unavailable (HTTP {status})', { status: 503 }),
+  ],
+  [
+    { status: 0, message: '' },
+    'Routing unavailable',
+    translate('Routing unavailable'),
+  ],
+];
+
+for (const locale of ['es', 'ru']) {
+  test(`${locale}: Directions errors stay English in stats and read translated in the row`, (t) => {
+    t.after(() => setLocale('en'));
+    setLocale(locale);
+    for (const [state, english] of cases) {
+      const stats = directionsStats(state);
+      assert.equal(stats.error, english);
+      const row = rowFor(stats);
+      assert.ok(row.includes(translate(english)), `${locale}: ${row}`);
+      assert.ok(!row.includes(english), `${locale}: ${row}`);
+    }
+  });
+}
+
+for (const locale of ['es', 'ru']) {
+  test(`${locale}: route request failures stay English in stats and read translated in the row`, (t) => {
+    t.after(() => setLocale('en'));
+    setLocale(locale);
+    for (const [failure, english, shown] of failures()) {
+      const error = presentRoutingFailure(failure);
+      assert.equal(error, english);
+      const stats = directionsStats({ ...idle, status: 'error', error });
+      assert.equal(stats.error, english);
+      assert.ok(rowFor(stats).includes(shown), `${locale}: ${rowFor(stats)}`);
+      assert.notEqual(shown, english);
+    }
+    // The proxy's refusal after "Routing failed:", and a text it never sends.
+    for (const [refusal, shownRefusal] of [
+      ['route too long', translate('route too long')],
+      ['something else', 'something else'],
+    ]) {
+      const row = rowFor(
+        directionsStats({
+          ...idle,
+          status: 'error',
+          error: `Routing failed: ${refusal}`,
+        }),
+      );
+      assert.ok(
+        row.includes(
+          translate('Routing failed: {error}', { error: shownRefusal }),
+        ),
+        `${locale}: ${row}`,
+      );
+    }
+  });
+}
+
+test('en: the Directions row shows the English error', () => {
+  setLocale('en');
+  const row = rowFor(directionsStats({ ...idle, status: 'error' }));
+  assert.match(row, /No route found/);
+});

src/layers/firms/model.js

@@ -1,9 +1,10 @@
 import * as Cesium from 'cesium';
-import { formatNumber, t } from '../../i18n/index.js';
+import { formatNumber, getLocale, isolate, t, tn } from '../../i18n/index.js';
 import {
   satelliteShortName,
   fireDetectionKey,
   accentForSeverity,
+  formatFrpMw,
 } from '../../data/firmsLabels.js';
 import {
   VIEW_PADDING,
@@ -406,7 +407,6 @@ export function createModel({
 
   function buildCellCard(candidate, nowMs) {
     const cell = candidate.cell;
-    const noun = cell.count === 1 ? t('FIRE') : t('FIRES');
     const parts = [t('max {value} MW', { value: formatFrpLabel(cell.maxFrp) })];
     if (cell.newestAcqMs > 0) {
       const age = formatAgeLabel(nowMs - cell.newestAcqMs);
@@ -418,7 +418,12 @@ export function createModel({
       cullPosition: candidate.cullPosition || candidate.position,
       gapPx: 10,
       accent: candidate.accent || accentForSeverity('yellow'),
-      title: `${cell.count} ${noun}`,
+      // The count picks the plural form of the language ("حريقان (2)",
+      // "14 حريقًا", "14 ПОЖАРОВ"); the card shows it in capitals like the
+      // other card titles.
+      title: tn(cell.count, '{n} fire', '{n} fires', {
+        n: cell.count,
+      }).toLocaleUpperCase(getLocale()),
       details: [parts.join(' · ')],
       selected: false,
       priority: Number(cell.maxFrp) || 0,
@@ -480,14 +485,15 @@ export function createModel({
   }
 
   function formatFrp(frp) {
-    return frp >= 10 ? frp.toFixed(0) : frp.toFixed(1);
+    return formatFrpMw(frp);
   }
 
   /** formatFrp for a card, with the locale's decimal separator ("4,9"). */
 
   function formatFrpLabel(frp) {
-    const digits = frp >= 10 ? 0 : 1;
-    return formatNumber(frp, {
+    const text = formatFrpMw(frp);
+    const digits = text.includes('.') ? 1 : 0;
+    return formatNumber(Number(text), {
       minimumFractionDigits: digits,
       maximumFractionDigits: digits,
       useGrouping: false,
@@ -511,7 +517,7 @@ export function createModel({
       lon >= 0
         ? t('{value}°E', { value: amount(lon) })
         : t('{value}°W', { value: amount(lon) });
-    return `${latPart} ${lonPart}`;
+    return `${isolate(latPart)} ${isolate(lonPart)}`;
   }
 
   /** Millisecond delta → "<1h" / "Xh" / "Xd", or '' for invalid input. */
@@ -591,6 +597,7 @@ export function createModel({
     formatLatLon,
     formatFrp,
     formatAge,
+    formatAgeLabel,
     formatAgoMinutes,
     confidenceBucket,
   };

src/layers/firms/queries.js

@@ -18,9 +18,8 @@ export function createQueries({
       if (!fire) return null;
       return {
         id: fireDetectionKey(fire),
-        label: t('Fire · FRP {frp} MW', {
-          frp: components.model.formatFrp(fire.frp),
-        }),
+        // i18n-ignore: English entity label; the voice card translates it (shownEntityLabel)
+        label: `Fire · FRP ${components.model.formatFrp(fire.frp)} MW`,
         latitude: fire.lat,
         longitude: fire.lon,
         frp: fire.frp,
@@ -64,7 +63,8 @@ export function createQueries({
       const staleText = layerState._lastUpdate
         ? t('STALE · cached {age}', {
             age:
-              components.model.formatAge(now - layerState._lastUpdate) || '<1h',
+              components.model.formatAgeLabel(now - layerState._lastUpdate) ||
+              t('<1h', { context: 'age' }),
           })
         : t('STALE');
       let loadingLabel = '';
@@ -117,9 +117,8 @@ export function createQueries({
         latitude: strongest.lat,
         longitude: strongest.lon,
         frp: strongest.frp,
-        label: t('Fire · FRP {frp} MW', {
-          frp: components.model.formatFrp(strongest.frp),
-        }),
+        // i18n-ignore: English entity label; the voice card translates it (shownEntityLabel)
+        label: `Fire · FRP ${components.model.formatFrp(strongest.frp)} MW`,
       };
     },
 

src/layers/firms/selection.js

@@ -193,9 +193,8 @@ export function createSelection({
       layerName: name,
       source: 'NASA FIRMS',
       dataSource: layerState._dataSource,
-      label: t('Fire · FRP {frp} MW', {
-        frp: components.model.formatFrp(fire.frp),
-      }),
+      // i18n-ignore: English entity label; the voice card translates it (shownEntityLabel)
+      label: `Fire · FRP ${components.model.formatFrp(fire.frp)} MW`,
       latitude: fire.lat,
       longitude: fire.lon,
       properties: {

src/layers/flights/motion.js

@@ -60,6 +60,10 @@ export function createMotion({
     publishFocusTargetFromCachedPosition,
   } = services.focus;
 
+  // Fixes leave the cache with their history; corrected positions invalidate
+  // the local frame even when the existing Cartesian is mutated in place.
+  const fixFrames = new WeakMap();
+
   // Round 5: the old `_warmGroundedAircraftSurfaceCache` (global exact-5-decimal
   // warm for every grounded contact on Earth) is GONE. Parked-aircraft GPS
   // jitter minted fresh keys every poll → thousands of upstream points per
@@ -124,7 +128,7 @@ export function createMotion({
    * @returns {Cesium.Cartesian3|null} Estimated ECEF position, or null if no history exists.
    */
 
-  function _deadReckon(icao24, result) {
+  function _deadReckon(icao24, result, sampledRenderTime) {
     const info = flightState.records.data.get(icao24);
     if (FOCUS_EVIDENCE_DEV && flightState._focusEvidenceIds.has(icao24)) {
       const position = flightState._billboards.get(icao24)?.position;
@@ -149,11 +153,13 @@ export function createMotion({
     const out = result || new Cesium.Cartesian3();
     // Render one poll interval behind real time so we interpolate between
     // two KNOWN fixes whenever possible (see RENDER_DELAY_SEC rationale).
-    const renderTime = Cesium.JulianDate.addSeconds(
-      Cesium.JulianDate.now(),
-      -RENDER_DELAY_SEC,
-      flightState._scratchRenderTime,
-    );
+    const renderTime =
+      sampledRenderTime ??
+      Cesium.JulianDate.addSeconds(
+        Cesium.JulianDate.now(flightState._scratchRenderTime),
+        -RENDER_DELAY_SEC,
+        flightState._scratchRenderTime,
+      );
 
     // Bracketing pair: interpolate — no extrapolation error, no snap-back.
     for (let i = history.length - 1; i >= 1; i--) {
@@ -286,12 +292,31 @@ export function createMotion({
       0,
       flightState._scratchOffset,
     );
-    const enu = Cesium.Transforms.eastNorthUpToFixedFrame(
-      fix.position,
-      Cesium.Ellipsoid.WGS84,
-      flightState._scratchEnu,
+    let frame = fixFrames.get(fix);
+    if (!frame) {
+      frame = {
+        position: new Cesium.Cartesian3(),
+        matrix: new Cesium.Matrix4(),
+      };
+      fixFrames.set(fix, frame);
+    }
+    if (
+      !frame.valid ||
+      !Cesium.Cartesian3.equals(frame.position, fix.position)
+    ) {
+      Cesium.Transforms.eastNorthUpToFixedFrame(
+        fix.position,
+        Cesium.Ellipsoid.WGS84,
+        frame.matrix,
+      );
+      Cesium.Cartesian3.clone(fix.position, frame.position);
+      frame.valid = true;
+    }
+    return Cesium.Matrix4.multiplyByPoint(
+      frame.matrix,
+      flightState._scratchOffset,
+      out,
     );
-    return Cesium.Matrix4.multiplyByPoint(enu, flightState._scratchOffset, out);
   }
 
   /**

src/layers/flights/motion.test.mjs

@@ -0,0 +1,184 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import * as Cesium from 'cesium';
+import { createMotion } from './motion.js';
+import { arcOffsetEnu } from '../../data/motionModel.js';
+
+function fixture() {
+  const flightState = {
+    records: { data: new Map() },
+    _positionHistory: new Map(),
+    _focusEvidenceIds: new Set(),
+    _scratchArc: {},
+    _scratchOffset: new Cesium.Cartesian3(),
+    _scratchRenderTime: new Cesium.JulianDate(),
+  };
+  const motion = createMotion({
+    flightState,
+    services: { groundFloor: {}, camera: {}, focus: {} },
+    parts: {},
+  });
+  return { flightState, motion };
+}
+
+function expectedPosition(fix, dt, turnRate, transform) {
+  const arc = {};
+  arcOffsetEnu(fix.velocity, fix.track, turnRate, dt, arc);
+  return Cesium.Matrix4.multiplyByPoint(
+    transform(fix.position, Cesium.Ellipsoid.WGS84, new Cesium.Matrix4()),
+    new Cesium.Cartesian3(arc.east, arc.north, 0),
+    new Cesium.Cartesian3(),
+  );
+}
+
+function close(actual, expected) {
+  assert.ok(Cesium.Cartesian3.distance(actual, expected) < 1e-8);
+}
+
+test('extrapolation reuses fixed frames and invalidates corrected coordinates', (t) => {
+  const { motion } = fixture();
+  const transform = Cesium.Transforms.eastNorthUpToFixedFrame;
+  const spy = t.mock.method(
+    Cesium.Transforms,
+    'eastNorthUpToFixedFrame',
+    transform,
+  );
+  const fix = {
+    position: Cesium.Cartesian3.fromDegrees(-97, 30, 200),
+    velocity: 90,
+    track: 70,
+  };
+  const out = new Cesium.Cartesian3();
+  for (const dt of [-30, 5, 30, 60]) {
+    motion._extrapolateFix(fix, {}, dt, out, 1.5);
+    close(out, expectedPosition(fix, dt, 1.5, transform));
+  }
+  assert.equal(spy.mock.callCount(), 1);
+
+  // Ground reflooring mutates an existing fix's Cartesian in place.
+  Cesium.Cartesian3.fromDegrees(-97, 30, 350, undefined, fix.position);
+  motion._extrapolateFix(fix, {}, 30, out, 1.5);
+  close(out, expectedPosition(fix, 30, 1.5, transform));
+  assert.equal(spy.mock.callCount(), 2);
+
+  fix.position = Cesium.Cartesian3.fromDegrees(140, 80, 1000);
+  motion._extrapolateFix(fix, {}, 30, out, -2);
+  close(out, expectedPosition(fix, 30, -2, transform));
+  assert.equal(spy.mock.callCount(), 3);
+
+  fix.velocity = 210;
+  fix.track = 359;
+  motion._extrapolateFix(fix, {}, 15, out, -1);
+  close(out, expectedPosition(fix, 15, -1, transform));
+  assert.equal(spy.mock.callCount(), 3);
+
+  const replacement = { ...fix };
+  motion._extrapolateFix(replacement, {}, 15, out, -1);
+  close(out, expectedPosition(replacement, 15, -1, transform));
+  assert.equal(spy.mock.callCount(), 4);
+});
+
+test('stationary fixes do not build a frame until motion needs it', (t) => {
+  const { motion } = fixture();
+  const spy = t.mock.method(Cesium.Transforms, 'eastNorthUpToFixedFrame');
+  const fix = {
+    position: Cesium.Cartesian3.fromDegrees(0, 0, 0),
+    velocity: 0,
+    track: 90,
+  };
+  const out = new Cesium.Cartesian3();
+  close(motion._extrapolateFix(fix, {}, 30, out), fix.position);
+  fix.velocity = 10;
+  close(motion._extrapolateFix(fix, {}, 0, out), fix.position);
+  assert.equal(spy.mock.callCount(), 0);
+  motion._extrapolateFix(fix, {}, 30, out);
+  assert.equal(spy.mock.callCount(), 1);
+});
+
+test('fleet render time is shared without resampling or mutating the supplied instant', (t) => {
+  const { flightState, motion } = fixture();
+  const start = Cesium.JulianDate.fromIso8601('2026-10-24T12:00:00Z');
+  const end = Cesium.JulianDate.addSeconds(start, 60, new Cesium.JulianDate());
+  const renderTime = Cesium.JulianDate.addSeconds(
+    start,
+    30,
+    new Cesium.JulianDate(),
+  );
+  const savedTime = Cesium.JulianDate.clone(renderTime);
+  const history = [
+    {
+      time: start,
+      position: Cesium.Cartesian3.fromDegrees(-97, 30, 1000),
+      track: 90,
+    },
+    {
+      time: end,
+      position: Cesium.Cartesian3.fromDegrees(-96.99, 30, 1000),
+      track: 90,
+    },
+  ];
+  for (const id of ['one', 'two']) {
+    flightState.records.data.set(id, { velocity: 100, true_track: 90 });
+    flightState._positionHistory.set(id, history);
+  }
+  t.mock.method(Cesium.JulianDate, 'now', () => {
+    throw new Error('unexpected per-contact clock read');
+  });
+  const expected = Cesium.Cartesian3.lerp(
+    history[0].position,
+    history[1].position,
+    0.5,
+    new Cesium.Cartesian3(),
+  );
+  for (const id of ['one', 'two'])
+    close(
+      motion._deadReckon(id, new Cesium.Cartesian3(), renderTime),
+      expected,
+    );
+  assert.ok(Cesium.JulianDate.equals(renderTime, savedTime));
+});
+
+test('tracked callers still sample a fresh delayed time without a fleet epoch', (t) => {
+  const { flightState, motion } = fixture();
+  const start = Cesium.JulianDate.fromIso8601('2026-10-24T12:00:00Z');
+  const history = [
+    {
+      time: start,
+      position: Cesium.Cartesian3.fromDegrees(-97, 30, 1000),
+      track: 90,
+    },
+    {
+      time: Cesium.JulianDate.addSeconds(start, 60, new Cesium.JulianDate()),
+      position: Cesium.Cartesian3.fromDegrees(-96.99, 30, 1000),
+      track: 90,
+    },
+  ];
+  flightState.records.data.set('tracked', { velocity: 100, true_track: 90 });
+  flightState._positionHistory.set('tracked', history);
+  let elapsed = 60;
+  const spy = t.mock.method(Cesium.JulianDate, 'now', (result) => {
+    assert.equal(result, flightState._scratchRenderTime);
+    return Cesium.JulianDate.addSeconds(start, elapsed, result);
+  });
+  const out = new Cesium.Cartesian3();
+  close(
+    motion._deadReckon('tracked', out),
+    Cesium.Cartesian3.lerp(
+      history[0].position,
+      history[1].position,
+      0.5,
+      new Cesium.Cartesian3(),
+    ),
+  );
+  elapsed = 75;
+  close(
+    motion._deadReckon('tracked', out),
+    Cesium.Cartesian3.lerp(
+      history[0].position,
+      history[1].position,
+      0.75,
+      new Cesium.Cartesian3(),
+    ),
+  );
+  assert.equal(spy.mock.callCount(), 2);
+});

src/layers/flights/ownership.test.mjs

@@ -3,6 +3,7 @@ import assert from 'node:assert/strict';
 import { createCivilFlightLayer } from './index.js';
 import { createFlightState } from './state.js';
 import { createEnrichment } from './enrichment.js';
+import { createTracking } from './tracking.js';
 
 function services() {
   const names = [
@@ -124,3 +125,24 @@ test('a synchronous enrichment failure stays bounded and releases its slot', asy
   await new Promise((done) => setImmediate(done));
   assert.equal(flightState._enrichActive, 0);
 });
+
+test('voice context reads a track that rounds to north as 0°, not 360°', () => {
+  const tracking = createTracking({
+    flightState: {
+      feed: { _lastSource: 'Fixture aircraft' },
+      records: { data: new Map() },
+    },
+    services: services(),
+    parts: {
+      queries: {
+        _describeFlight: () => ({ track: 359.6, altitudeM: 9000 }),
+        _contactLabel: () => 'AAL1',
+      },
+    },
+    layer: {},
+  });
+  assert.equal(
+    tracking._contextSubjectMetadata('abc123').properties.heading,
+    '0°',
+  );
+});

src/layers/flights/policy.js

@@ -1,11 +1,3 @@
-export {
-  GROUND_FLOOR_CLAMP_RADIUS_KM,
-  GROUND_FLOOR_WARM_MAX_ALT_M,
-  POSITION_HISTORY_LIMIT,
-  LANDED_MISSING_POLL_LIMIT,
-  MISSING_POLL_LIMIT,
-  ERROR_BACKOFF_INTERVAL,
-} from './recordPolicy.js';
 import * as Cesium from 'cesium';
 import { EMERGENCY_TINT_CSS } from '../../data/aircraftEmergency.js';
 

src/layers/flights/queries.js

@@ -452,8 +452,8 @@ export function createQueries({
         const isTracked = icao24 === flightState._trackedIcao;
         // Keep planes rendered as a 3D model (billboard hidden) so the detection box
         // doesn't vanish on the 2D→3D handoff; bb.position stays current while hidden.
-        const model = flightState._models.get(icao24);
-        const modelOwnsVisual = parts.rendering._modelOwnsVisual(icao24);
+        const model = flightState._models.get(icao24) ?? null;
+        const modelOwnsVisual = parts.rendering._modelOwnsVisual(icao24, model);
         if (!isTracked && !bb.show && !modelOwnsVisual) continue;
         const info = flightState.records.data.get(icao24);
         let object = flightState._detectionObjects.get(icao24);
@@ -491,8 +491,19 @@ export function createQueries({
         object.position = pos;
         object.skipLabel = isTracked;
         // Card text only — declutter/cohort identity is `object.sourceId` (icao24).
-        const id = _contactLabel(icao24, info);
-        if (object.id !== id) object.id = id;
+        const callsign = info?.callsign;
+        const registration = info?.registration;
+        // Records and enrichment may change in place. Cache by field values,
+        // while keeping the live visual anchor above independent of text.
+        if (
+          object.id === undefined ||
+          object._labelCallsign !== callsign ||
+          object._labelRegistration !== registration
+        ) {
+          object.id = _contactLabel(icao24, info);
+          object._labelCallsign = callsign;
+          object._labelRegistration = registration;
+        }
         const altitude = info?.altitude;
         if (object._altitude !== altitude) {
           object._altitude = altitude;
@@ -580,7 +591,6 @@ export function createQueries({
       const maxRange =
         Number.isFinite(range) && range > 0 ? range : Number.POSITIVE_INFINITY;
 
-      const now = Cesium.JulianDate.now();
       const nearby = [];
 
       for (const [icao24, bb] of flightState._billboards) {

src/layers/flights/queries.test.mjs

@@ -0,0 +1,149 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import * as Cesium from 'cesium';
+import { createQueries } from './queries.js';
+import { createRendering } from './rendering.js';
+
+function fixture() {
+  const info = {
+    callsign: ' TEST123 ',
+    registration: ' N123 ',
+    altitude: 1000,
+  };
+  const bb = { show: true, position: new Cesium.Cartesian3(1, 2, 3) };
+  const flightState = {
+    feed: {},
+    _billboardCollection: { show: true },
+    _billboards: new Map([['abc123', bb]]),
+    _models: new Map(),
+    _detectionObjects: new Map(),
+    records: { data: new Map([['abc123', info]]) },
+  };
+  let formats = 0;
+  const services = {
+    aircraftPresentation: {},
+    militaryRegistry: {},
+    camera: {},
+    focus: {},
+    recession: {},
+    labels: {
+      formatFlightLevel: (altitude) => {
+        formats++;
+        return String(altitude);
+      },
+    },
+  };
+  const parts = {
+    testing: {},
+    tracking: { _trackedModelRegimeActive: () => true },
+    motion: { _trackedVisualCached: () => null },
+  };
+  parts.rendering = createRendering({ flightState, services, parts });
+  const queries = createQueries({ flightState, services, parts }).methods;
+  return { flightState, info, bb, parts, queries, formats: () => formats };
+}
+
+test('candidate text follows in-place enrichment without freezing identity or positions', () => {
+  const f = fixture();
+  const [first] = f.queries.getDetectableObjects();
+  assert.equal(first.id, 'TEST123');
+  assert.equal(first.sourceId, 'abc123');
+  f.bb.position = new Cesium.Cartesian3(4, 5, 6);
+  assert.equal(f.queries.getDetectableObjects()[0], first);
+  assert.equal(first.position, f.bb.position);
+  assert.equal(f.formats(), 1);
+  f.info.callsign = ' NEW456 ';
+  assert.equal(f.queries.getDetectableObjects()[0].id, 'NEW456');
+  f.info.callsign = '   ';
+  assert.equal(f.queries.getDetectableObjects()[0].id, 'N123');
+  f.info.registration = ' N456 ';
+  f.info.altitude = 2000;
+  assert.equal(f.queries.getDetectableObjects()[0].id, 'N456');
+  assert.equal(first.metric, '2000');
+  assert.equal(f.formats(), 2);
+  f.flightState.records.data.set('abc123', { ...f.info });
+  assert.equal(f.queries.getDetectableObjects()[0], first);
+  f.flightState.records.data.delete('abc123');
+  assert.equal(f.queries.getDetectableObjects()[0].id, 'abc123');
+  assert.equal(first.sourceId, 'abc123');
+});
+
+test('unchanged candidate text is normalized once across paints', (t) => {
+  const f = fixture();
+  const trim = String.prototype.trim;
+  let calls = 0;
+  t.mock.method(String.prototype, 'trim', function () {
+    if (String(this) === ' TEST123 ') calls++;
+    return trim.call(this);
+  });
+  for (let i = 0; i < 20; i++) f.queries.getDetectableObjects();
+  assert.equal(calls, 1);
+});
+
+test('candidate collection resolves models once and keeps handoffs live', (t) => {
+  const f = fixture();
+  const get = t.mock.method(f.flightState._models, 'get');
+  const [candidate] = f.queries.getDetectableObjects();
+  assert.equal(get.mock.callCount(), 1);
+  const model = {
+    ready: false,
+    show: true,
+    modelMatrix: Cesium.Matrix4.fromTranslation(
+      new Cesium.Cartesian3(10, 20, 30),
+    ),
+  };
+  f.parts.rendering._modelSpec = () => ({
+    visualCenterNative: Cesium.Cartesian3.ZERO,
+    scale: 1,
+  });
+  f.flightState._models.set('abc123', model);
+  f.bb.show = false;
+  assert.deepEqual(f.queries.getDetectableObjects(), []);
+  model.ready = true;
+  assert.equal(f.queries.getDetectableObjects()[0], candidate);
+  assert.deepEqual(candidate.position, new Cesium.Cartesian3(10, 20, 30));
+  Cesium.Matrix4.setTranslation(
+    model.modelMatrix,
+    new Cesium.Cartesian3(40, 50, 60),
+    model.modelMatrix,
+  );
+  f.queries.getDetectableObjects();
+  assert.deepEqual(candidate.position, new Cesium.Cartesian3(40, 50, 60));
+  model.show = false;
+  assert.deepEqual(f.queries.getDetectableObjects(), []);
+  f.bb.show = true;
+  assert.equal(f.queries.getDetectableObjects()[0].position, f.bb.position);
+  assert.equal(get.mock.callCount(), 6);
+  model.show = true;
+  assert.equal(f.parts.rendering._modelOwnsVisual('abc123'), true);
+  assert.equal(get.mock.callCount(), 7);
+});
+
+test('tracked ownership and live anchors remain independent of fleet models', () => {
+  const f = fixture();
+  f.flightState._trackedIcao = 'abc123';
+  f.flightState._trackedModel = { ready: true, show: true };
+  f.parts.rendering._modelSpec = () => ({});
+  let anchor = new Cesium.Cartesian3(10, 20, 30);
+  f.parts.motion._trackedVisualCached = () => anchor;
+  const [candidate] = f.queries.getDetectableObjects();
+  assert.equal(candidate.position, anchor);
+  assert.equal(candidate.skipLabel, true);
+  assert.equal(f.parts.rendering._modelOwnsVisual('abc123', null), true);
+  anchor = new Cesium.Cartesian3(40, 50, 60);
+  assert.equal(f.queries.getDetectableObjects()[0].position, anchor);
+  for (const tracked of [
+    null,
+    { ready: false, show: true },
+    { ready: true, show: false },
+  ]) {
+    f.flightState._trackedModel = tracked;
+    assert.equal(
+      f.parts.rendering._modelOwnsVisual('abc123', { ready: true, show: true }),
+      false,
+    );
+  }
+  f.flightState._trackedModel = { ready: true, show: true };
+  f.parts.tracking._trackedModelRegimeActive = () => false;
+  assert.equal(f.parts.rendering._modelOwnsVisual('abc123', null), false);
+});

src/layers/flights/rendering.js

@@ -32,10 +32,12 @@ import {
   TRACKED_MODEL_MIN_PX,
   TRACKED_MODEL_MAX_PX,
   FLEET_DR_INTERVAL_MS,
+  RENDER_DELAY_SEC,
   COURSE_SLEW_DT_MAX_SEC,
   ROTATION_REFRESH_MS,
   COURSE_MAX_DPS,
 } from './policy.js';
+import { AIRCRAFT_ENVIRONMENT_MAP_OPTIONS } from '../../data/aircraftModelLighting.js';
 
 export function createRendering({
   flightState,
@@ -382,17 +384,20 @@ export function createRendering({
    *    null or still-loading tracked model from claiming a visual it is not
    *    drawing yet.
    * @param {string} icao24
+   * @param {Cesium.Model|null} [model] Resolved fleet model; null means absent.
    * @returns {boolean}
    */
 
-  function _modelOwnsVisual(icao24) {
+  function _modelOwnsVisual(icao24, model) {
     if (icao24 === flightState._trackedIcao) {
       return (
         parts.tracking._trackedModelRegimeActive() &&
         _modelIsRendering(flightState._trackedModel)
       );
     }
-    return _modelIsRendering(flightState._models.get(icao24));
+    return _modelIsRendering(
+      model === undefined ? flightState._models.get(icao24) : model,
+    );
   }
 
   /** A model is the visual only once it actually draws — loaded AND shown.
@@ -503,6 +508,7 @@ export function createRendering({
       model = await Cesium.Model.fromGltfAsync({
         url: resolveAsset(spec.url),
         asynchronous: false,
+        environmentMapOptions: AIRCRAFT_ENVIRONMENT_MAP_OPTIONS,
         minimumPixelSize: MODEL_MIN_PX,
         scale: spec.scale,
         color: flightState._irBoost ? Cesium.Color.WHITE : _modelColor(icao24),
@@ -709,6 +715,7 @@ export function createRendering({
       Cesium.Model.fromGltfAsync({
         url: resolveAsset(trackedSpec.url),
         asynchronous: false,
+        environmentMapOptions: AIRCRAFT_ENVIRONMENT_MAP_OPTIONS,
         minimumPixelSize: TRACKED_MODEL_MIN_PX,
         scale: trackedSpec.scale,
         color: flightState._irBoost ? Cesium.Color.WHITE : Cesium.Color.CYAN,
@@ -854,6 +861,12 @@ export function createRendering({
         )
       : 0.08;
     flightState._lastFleetTickMs = nowMs;
+    // Every contact in this pass shares the same delayed display instant.
+    const renderTime = Cesium.JulianDate.addSeconds(
+      Cesium.JulianDate.now(flightState._scratchFleetRenderTime),
+      -RENDER_DELAY_SEC,
+      flightState._scratchFleetRenderTime,
+    );
 
     _drainIrReloadQueue(); // bounded per-tick slice of any pending boost-flip reload
     if (flightState._cockpitContactMode)
@@ -957,7 +970,11 @@ export function createRendering({
 
       const info = flightState.records.data.get(icao24);
 
-      const dr = parts.motion._deadReckon(icao24, flightState._scratchFleetPos);
+      const dr = parts.motion._deadReckon(
+        icao24,
+        flightState._scratchFleetPos,
+        renderTime,
+      );
       // The dead-reckoned point drifts away from the fix whose cell supplied the
       // height, so a grounded contact's sprite ends up under the mesh it taxied
       // (or coasted) over. Re-floor at the DISPLAYED coordinate — read-only, and

src/layers/flights/state.js

@@ -242,12 +242,12 @@ export function createFlightState({ source, services }) {
 
   flightState._scratchCarto = new Cesium.Cartographic();
 
-  flightState._scratchEnu = new Cesium.Matrix4();
-
   flightState._scratchArc = { east: 0, north: 0, endCourseDeg: 0 };
 
   flightState._scratchRenderTime = new Cesium.JulianDate();
 
+  flightState._scratchFleetRenderTime = new Cesium.JulianDate();
+
   flightState._scratchFleetPos = new Cesium.Cartesian3();
 
   flightState._scratchSonarScreen = new Cesium.Cartesian2();

src/layers/flights/tracking.js

@@ -24,6 +24,7 @@ import {
   TRAIL_COLOR,
   CYAN_TRANSPARENT,
 } from './policy.js';
+import { roundHeadingDegrees } from '../../data/headingDegrees.js';
 
 export function createTracking({
   flightState,
@@ -47,7 +48,7 @@ export function createTracking({
   const { isMilitaryLayerActive, isMilitaryIcao } = services.militaryRegistry;
   const { trackedLabelModelFromText, refreshTrackedReadout } = services.readout;
   const { applyTrackedCameraFrame } = services.camera;
-  const { resolvePickId, isOwnedByOtherLayer } = services.picking;
+  const { resolvePickId, isOwnedByOtherLayer, pickContact } = services.picking;
   const flightsLayer = layer;
 
   function _emitAwarenessEvent(type, detail) {
@@ -126,7 +127,7 @@ export function createTracking({
           ? `${Math.round(described.velocityMps * 1.944)} kt`
           : '',
         heading: Number.isFinite(described.track)
-          ? `${Math.round(described.track)}°`
+          ? `${roundHeadingDegrees(described.track)}°`
           : '',
         route: route || '',
         icao24,
@@ -1174,7 +1175,9 @@ export function createTracking({
       // first-person reference. A globe click must not fall through to the
       // normal empty-space deselection path; cockpit has explicit exit controls.
       if (document.body.classList.contains('cockpit-mode')) return;
-      const picked = viewer.scene.pick(click.position);
+      const picked = pickContact
+        ? pickContact(viewer.scene, click.position)
+        : viewer.scene.pick(click.position);
 
       if (picked) {
         // Clicking the tracked entity itself — ignore (don't deselect)

src/layers/ghostMaps/catalog.js

@@ -0,0 +1,245 @@
+// S2 Underground GhostMaps catalog: which KMZ in the public repository is the
+// current edition of each product. Pure and portable (the server builds the
+// catalog, tests pin the rules); no i18n, no DOM, no Cesium.
+
+export const GHOSTMAPS_REPO = Object.freeze({
+  owner: 's2underground',
+  name: 'GhostMaps',
+  branch: 'main',
+  url: 'https://github.com/s2underground/GhostMaps',
+});
+
+/** Largest KMZ the proxy downloads; matches the browser's import ceiling. */
+export const GHOSTMAPS_MAX_FILE_BYTES = 50 * 1024 * 1024;
+
+const ARCGIS = 'ArcGIS Data for ATAK (KMZs)/';
+const INCIDENTS = 'Incident Response Products for ATAK (KMZs and Documents)/';
+
+/**
+ * Curated products, in panel order. Each names a series of dated uploads; the
+ * newest edition wins. Patterns match whole repository paths, so a renamed
+ * folder fails closed (the product drops out) instead of matching elsewhere.
+ */
+export const GHOSTMAPS_PRODUCTS = Object.freeze([
+  Object.freeze({
+    id: 'cip',
+    // i18n-ignore: catalog data; the panel shows its own translated label
+    title: 'Common Intelligence Picture',
+    defaultOn: true,
+    pattern: new RegExp(
+      `^${escape(ARCGIS)}Common Intelligence Picture/Master Database/[^/]+\\.kmz$`,
+      'i',
+    ),
+  }),
+  Object.freeze({
+    id: 'kinetic-30d',
+    // i18n-ignore: catalog data; the panel shows its own translated label
+    title: 'Kinetic Activity (30 days)',
+    defaultOn: true,
+    pattern: new RegExp(
+      `^${escape(ARCGIS)}Common Intelligence Picture/30-Day Pulls/Kinetic[^/]*\\.kmz$`,
+      'i',
+    ),
+  }),
+  Object.freeze({
+    id: 'border-crisis',
+    // i18n-ignore: catalog data; the panel shows its own translated label
+    title: 'Border Crisis Map',
+    defaultOn: false,
+    pattern: new RegExp(
+      `^${escape(ARCGIS)}Border Crisis Map/S2Underground_Border_Crisis_Map[^/]*\\.kmz$`,
+      'i',
+    ),
+  }),
+  Object.freeze({
+    id: 'iran-cip',
+    // i18n-ignore: catalog data; the panel shows its own translated label
+    title: 'Iran Common Intelligence Picture',
+    defaultOn: false,
+    pattern: new RegExp(
+      `^${escape(INCIDENTS)}Iran[^/]*/Iran Common Intelligence Picture/[^/]+\\.kmz$`,
+      'i',
+    ),
+  }),
+  Object.freeze({
+    id: 'iran-kinetic',
+    // i18n-ignore: catalog data; the panel shows its own translated label
+    title: 'Iran Kinetic Events',
+    defaultOn: false,
+    pattern: new RegExp(
+      `^${escape(INCIDENTS)}Iran[^/]*/Iran Kinetic Events/[^/]+\\.kmz$`,
+      'i',
+    ),
+  }),
+  Object.freeze({
+    id: 'yemen-flot',
+    // i18n-ignore: catalog data; the panel shows its own translated label
+    title: 'Yemen FLOT',
+    defaultOn: false,
+    pattern: new RegExp(
+      `^${escape(INCIDENTS)}Yemen[^/]*/Yemen FLOT[^/]*\\.kmz$`,
+      'i',
+    ),
+  }),
+]);
+
+/** The newest incident product outside the curated series and the archive. */
+export const GHOSTMAPS_LATEST_DROP = Object.freeze({
+  id: 'latest-drop',
+  // i18n-ignore: catalog data; the panel shows its own translated label
+  title: 'Latest incident drop',
+  defaultOn: false,
+});
+
+const LATEST_DROP_EXCLUDED =
+  /\/(?:0_Archive|Basedata|Reference Material)(?:\/|$)/i;
+
+function escape(text) {
+  return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+const MONTHS = [
+  'jan',
+  'feb',
+  'mar',
+  'apr',
+  'may',
+  'jun',
+  'jul',
+  'aug',
+  'sep',
+  'oct',
+  'nov',
+  'dec',
+];
+const DATE_IN_NAME =
+  /(january|february|march|april|may|june|july|august|september|sept|october|november|december|jan|feb|mar|apr|jun|jul|aug|sep|oct|nov|dec)[ _-]?(\d{1,2})(?:st|nd|rd|th)?[ ,_-]+(20\d\d)/i;
+const EDITION_IN_NAME = /(?:[ _-]export)?[ _-]v?(\d{1,3})$/i;
+
+/**
+ * The date and edition written into an S2 file name, e.g.
+ * `..._October_16_2026_Export_1.kmz` → 2026-10-16, edition 1. Undated names
+ * report `dateMs: null` and sort below every dated edition.
+ * @param {string} fileName
+ * @returns {{dateMs: ?number, edition: number}}
+ */
+export function parseGhostMapsEdition(fileName) {
+  const stem = String(fileName || '').replace(/\.km[lz]$/i, '');
+  const match = DATE_IN_NAME.exec(stem);
+  let dateMs = null;
+  if (match) {
+    const month = MONTHS.indexOf(match[1].slice(0, 3).toLowerCase());
+    const day = Number(match[2]);
+    const year = Number(match[3]);
+    const at = Date.UTC(year, month, day);
+    // Date.UTC rolls 31 Sep into 1 Oct; only an exact calendar date counts.
+    if (month >= 0 && new Date(at).getUTCDate() === day) dateMs = at;
+  }
+  const tail = match ? stem.slice(match.index + match[0].length) : stem;
+  const edition = Number(EDITION_IN_NAME.exec(tail)?.[1] ?? 0);
+  return { dateMs, edition };
+}
+
+function newer(a, b) {
+  if (!b) return true;
+  const ad = a.dateMs ?? -Infinity;
+  const bd = b.dateMs ?? -Infinity;
+  if (ad !== bd) return ad > bd;
+  if (a.edition !== b.edition) return a.edition > b.edition;
+  return a.path > b.path;
+}
+
+/** `S2Underground_Border_Crisis_Map_June_02_2026_v1.kmz` → readable words. */
+export function ghostMapsFileTitle(fileName) {
+  return String(fileName || '')
+    .replace(/\.km[lz]$/i, '')
+    .replace(/^S2Underground_/i, '')
+    .replace(/_/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+/**
+ * Build the product catalog from a recursive git tree listing.
+ * @param {Array<{path: string, type: string, sha: string, size?: number}>} tree
+ * @returns {Array<{id: string, title: string, defaultOn: boolean,
+ *   path: string, fileName: string, fileTitle: string, version: string,
+ *   size: number, dateMs: ?number, edition: number}>}
+ */
+export function buildGhostMapsCatalog(tree) {
+  const best = new Map();
+  let drop = null;
+  for (const entry of Array.isArray(tree) ? tree : []) {
+    if (entry?.type !== 'blob' || typeof entry.path !== 'string') continue;
+    if (!/\.kmz$/i.test(entry.path)) continue;
+    if (!/^[0-9a-f]{40}$/.test(entry.sha || '')) continue;
+    const size = Number(entry.size);
+    if (!Number.isFinite(size) || size <= 0 || size > GHOSTMAPS_MAX_FILE_BYTES)
+      continue;
+    const fileName = entry.path.slice(entry.path.lastIndexOf('/') + 1);
+    const candidate = {
+      path: entry.path,
+      fileName,
+      version: entry.sha,
+      size,
+      ...parseGhostMapsEdition(fileName),
+    };
+    const product = GHOSTMAPS_PRODUCTS.find(({ pattern }) =>
+      pattern.test(entry.path),
+    );
+    if (product) {
+      if (newer(candidate, best.get(product.id)))
+        best.set(product.id, candidate);
+    } else if (
+      entry.path.startsWith(INCIDENTS) &&
+      !LATEST_DROP_EXCLUDED.test(`/${entry.path}`) &&
+      candidate.dateMs != null &&
+      newer(candidate, drop)
+    ) {
+      drop = candidate;
+    }
+  }
+  const rows = [];
+  for (const product of [...GHOSTMAPS_PRODUCTS, GHOSTMAPS_LATEST_DROP]) {
+    const file =
+      product === GHOSTMAPS_LATEST_DROP ? drop : best.get(product.id);
+    if (!file) continue;
+    rows.push({
+      id: product.id,
+      title: product.title,
+      defaultOn: product.defaultOn,
+      ...file,
+      fileTitle: ghostMapsFileTitle(file.fileName),
+    });
+  }
+  return rows;
+}
+
+/**
+ * Raw download URL pinned to a commit, so a CDN can never hand back an older
+ * edition for a newer catalog.
+ * @param {string} commit 40-hex commit sha.
+ * @param {string} path Repository path.
+ */
+export function ghostMapsRawUrl(commit, path) {
+  const encoded = path.split('/').map(encodeURIComponent).join('/');
+  return `https://raw.githubusercontent.com/${GHOSTMAPS_REPO.owner}/${GHOSTMAPS_REPO.name}/${commit}/${encoded}`;
+}
+
+/**
+ * The branch head from a git smart-HTTP ref advertisement
+ * (`/info/refs?service=git-upload-pack`), or null.
+ * @param {string} text
+ * @param {string} [branch]
+ * @returns {?string}
+ */
+export function parseGitRefAdvertisement(text, branch = GHOSTMAPS_REPO.branch) {
+  const ref = `refs/heads/${branch}`;
+  for (const line of String(text || '').split('\n')) {
+    // pkt-line: 4 hex length digits, then "<sha> <ref>" (the first ref line
+    // also carries a NUL and the capability list).
+    const match = /^[0-9a-f]{4}([0-9a-f]{40}) ([^\0\s]+)/.exec(line);
+    if (match && match[2] === ref) return match[1];
+  }
+  return null;
+}

src/layers/ghostMaps/catalog.test.mjs

@@ -0,0 +1,165 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import {
+  buildGhostMapsCatalog,
+  ghostMapsFileTitle,
+  ghostMapsRawUrl,
+  parseGhostMapsEdition,
+  parseGitRefAdvertisement,
+} from './catalog.js';
+
+const ARCGIS = 'ArcGIS Data for ATAK (KMZs)/';
+const INCIDENTS = 'Incident Response Products for ATAK (KMZs and Documents)/';
+let n = 0;
+const blob = (path, size = 1000) => ({
+  path,
+  type: 'blob',
+  size,
+  sha: (++n).toString(16).padStart(40, '0'),
+});
+
+test('editions read the date and export/version number written in the name', () => {
+  assert.deepEqual(
+    parseGhostMapsEdition(
+      'S2Underground_Common_Intelligence_Picture_October_16_2026_Export_1.kmz',
+    ),
+    { dateMs: Date.UTC(2026, 9, 16), edition: 1 },
+  );
+  assert.deepEqual(
+    parseGhostMapsEdition(
+      'S2Underground_Border_Crisis_Map_September_21_2026_Export_v2.kmz',
+    ),
+    { dateMs: Date.UTC(2026, 8, 21), edition: 2 },
+  );
+  assert.deepEqual(
+    parseGhostMapsEdition('Reno Wildfires August 24, 2026.kmz'),
+    {
+      dateMs: Date.UTC(2026, 7, 24),
+      edition: 0,
+    },
+  );
+  assert.deepEqual(
+    parseGhostMapsEdition('Venezuelan_Crisis_Sep_5_2025_v2.kmz'),
+    {
+      dateMs: Date.UTC(2025, 8, 5),
+      edition: 2,
+    },
+  );
+  assert.deepEqual(
+    parseGhostMapsEdition('Kinetic_Activities_Last_30_Days.kmz'),
+    {
+      dateMs: null,
+      edition: 0,
+    },
+  );
+  // An impossible date is not a date.
+  assert.equal(parseGhostMapsEdition('X_September_31_2026.kmz').dateMs, null);
+});
+
+test('each product keeps its newest edition by date, then edition number', () => {
+  const master = `${ARCGIS}Common Intelligence Picture/Master Database/`;
+  const tree = [
+    blob(
+      `${master}S2Underground_Common_Intelligence_Picture_October_9_2026_Export_1.kmz`,
+    ),
+    blob(
+      `${master}S2Underground_Common_Intelligence_Picture_October_16_2026_Export_1.kmz`,
+    ),
+    blob(
+      `${master}S2Underground_Common_Intelligence_Picture_October_1_2026_Export_1.kmz`,
+    ),
+    blob(
+      `${master}S2Underground_Common_Intelligence_Picture_September_30_2026_Export_2.kmz`,
+    ),
+    blob(
+      `${ARCGIS}Common Intelligence Picture/30-Day Pulls/Kinetic_Activities_Last_30_Days.kmz`,
+    ),
+    blob(
+      `${ARCGIS}Border Crisis Map/S2Underground_Border_Crisis_Map_September_21_2026_Export_v1.kmz`,
+    ),
+    blob(
+      `${ARCGIS}Border Crisis Map/S2Underground_Border_Crisis_Map_September_21_2026_Export_v2.kmz`,
+    ),
+    // A European-only subset in a subfolder is not the border map.
+    blob(
+      `${ARCGIS}Border Crisis Map/European Layers Only/Europe_Migration_Crisis_June_02_2026_v1.kmz`,
+    ),
+    blob(`${INCIDENTS}Yemen 2026/Yemen FLOT.kmz`),
+    blob(`${INCIDENTS}Yemen 2026/Yemen FLOT_October_10_2026.kmz`),
+    { path: `${INCIDENTS}Yemen 2026`, type: 'tree', sha: 'f'.repeat(40) },
+  ];
+  const rows = buildGhostMapsCatalog(tree);
+  const byId = Object.fromEntries(rows.map((row) => [row.id, row]));
+  assert.deepEqual(
+    rows.map(({ id }) => id),
+    ['cip', 'kinetic-30d', 'border-crisis', 'yemen-flot'],
+  );
+  assert.match(byId.cip.fileName, /October_16_2026/);
+  assert.equal(byId.cip.defaultOn, true);
+  assert.equal(byId['kinetic-30d'].defaultOn, true);
+  assert.match(byId['border-crisis'].fileName, /Export_v2/);
+  assert.equal(byId['yemen-flot'].fileName, 'Yemen FLOT_October_10_2026.kmz');
+  assert.equal(byId.cip.version, tree[1].sha);
+  assert.equal(
+    byId.cip.fileTitle,
+    'Common Intelligence Picture October 16 2026 Export 1',
+  );
+});
+
+test('latest drop is the newest dated incident file outside curated, archived and base data', () => {
+  const rows = buildGhostMapsCatalog([
+    blob(`${INCIDENTS}Reno Wildfires August 24, 2026.kmz`),
+    blob(
+      `${INCIDENTS}Spokane Fire Disaster - August, 2026/SpokaneDisasterAid_August_8_2026.kmz`,
+    ),
+    blob(
+      `${INCIDENTS}0_Archive/Texas Floods/TexasFloods_December_1_2026_v1.kmz`,
+    ),
+    blob(`${INCIDENTS}Iran 2026/Basedata/Pipelines_December_1_2026.kmz`),
+    blob(
+      `${INCIDENTS}Iran 2026/Iran Kinetic Events/Iran_Kinetic_Events_December_2_2026_v1.kmz`,
+    ),
+    blob(`${INCIDENTS}Undated Product.kmz`),
+  ]);
+  const drop = rows.find(({ id }) => id === 'latest-drop');
+  assert.equal(drop.fileName, 'Reno Wildfires August 24, 2026.kmz');
+  assert.ok(rows.some(({ id }) => id === 'iran-kinetic'));
+});
+
+test('oversized, empty, non-KMZ and malformed entries are skipped', () => {
+  const path = `${ARCGIS}Common Intelligence Picture/Master Database/S2Underground_Common_Intelligence_Picture_October_16_2026_Export_1.kmz`;
+  assert.deepEqual(
+    buildGhostMapsCatalog([
+      { ...blob(path), size: 51 * 1024 * 1024 },
+      { ...blob(path), size: 0 },
+      { ...blob(path), sha: 'not-a-sha' },
+      blob(path.replace(/\.kmz$/, '.zip')),
+      null,
+    ]),
+    [],
+  );
+  assert.deepEqual(buildGhostMapsCatalog(undefined), []);
+});
+
+test('raw URLs are pinned to the commit and encode every path segment', () => {
+  assert.equal(
+    ghostMapsRawUrl('a'.repeat(40), 'Folder (KMZs)/Yemen FLOT.kmz'),
+    `https://raw.githubusercontent.com/s2underground/GhostMaps/${'a'.repeat(40)}/Folder%20(KMZs)/Yemen%20FLOT.kmz`,
+  );
+  assert.equal(ghostMapsFileTitle('S2Underground_A__B.kmz'), 'A B');
+});
+
+test('the branch head comes from the smart-HTTP ref advertisement', () => {
+  const head = '142d7630bc8f1f2c4b96e16ee865ca50d1ab578d';
+  const other = 'b'.repeat(40);
+  const text = [
+    '001e# service=git-upload-pack',
+    `0159${head} HEAD\0multi_ack symref=HEAD:refs/heads/main`,
+    `003f${other} refs/heads/main-old`,
+    `003d${head} refs/heads/main`,
+    '0000',
+  ].join('\n');
+  assert.equal(parseGitRefAdvertisement(text), head);
+  assert.equal(parseGitRefAdvertisement(text, 'dev'), null);
+  assert.equal(parseGitRefAdvertisement(''), null);
+});

src/layers/ghostMaps/index.js

@@ -0,0 +1,711 @@
+import * as Cesium from 'cesium';
+import {
+  decodeXml,
+  kmzImageResolver,
+  kmzMainDocument,
+  parseXml,
+  readZipEntries,
+  resolveKmzPath,
+} from '../../data/geoFileImport.js';
+import {
+  formatNumber,
+  formatUtcDayMonth,
+  msg,
+  t,
+  tn,
+} from '../../i18n/index.js';
+import { createHorizonCull } from '../streetLevel/view.js';
+import { readGhostMapsKml } from './kml.js';
+import { fieldLabel, parseDescriptionFields, wrapCardText } from './records.js';
+export * from './catalog.js';
+export * from './records.js';
+export { readGhostMapsKml } from './kml.js';
+export { createGhostMapsSource } from './source.js';
+
+export const GHOSTMAPS_LAYER_ID = 's2-ghostmaps';
+export const GHOSTMAPS_OVERLAY_SOURCE_ID = 's2-ghostmaps';
+const PICK_PREFIX = 'ghostmaps:';
+const STORAGE_KEY = 'gev.ghostmaps.products';
+const ACCENT = '#c8ff00';
+const MAX_ICON_BYTES = 512 * 1024;
+const CARD_HOST_OPTIONS = Object.freeze({
+  cohortLimit: 1,
+  collisionCapacity: 1,
+  moving: false,
+});
+const MAX_CARD_LINES = 12;
+
+/** Panel names for the catalog's product ids (the catalog sends English). */
+const PRODUCT_LABELS = Object.freeze({
+  cip: msg('Intel Picture'),
+  'kinetic-30d': msg('Kinetic 30d'),
+  'border-crisis': msg('Border Crisis'),
+  'iran-cip': msg('Iran Picture'),
+  'iran-kinetic': msg('Iran Kinetic'),
+  'yemen-flot': msg('Yemen FLOT'),
+  'latest-drop': msg('Latest Drop'),
+});
+
+/** One distinct fallback marker color per product. */
+const PRODUCT_COLORS = Object.freeze({
+  cip: '#c8ff00',
+  'kinetic-30d': '#ff5a36',
+  'border-crisis': '#ffb547',
+  'iran-cip': '#39d0ff',
+  'iran-kinetic': '#ff3b8d',
+  'yemen-flot': '#5dff9f',
+  'latest-drop': '#b48cff',
+});
+
+function defaultStorage() {
+  try {
+    return globalThis.localStorage ?? null;
+  } catch {
+    return null;
+  }
+}
+
+function readStoredSelection(storage) {
+  try {
+    const value = JSON.parse(storage?.getItem(STORAGE_KEY) ?? 'null');
+    return Array.isArray(value) ? new Set(value.map(String)) : null;
+  } catch {
+    return null;
+  }
+}
+
+function writeStoredSelection(storage, selected) {
+  try {
+    storage?.setItem(STORAGE_KEY, JSON.stringify([...selected]));
+  } catch {
+    /* private window or blocked storage: the selection lasts this session */
+  }
+}
+
+/** A round marker for placemarks whose icon is missing or remote. */
+const markerCache = new Map();
+function markerImage(color) {
+  if (markerCache.has(color)) return markerCache.get(color);
+  let url = null;
+  try {
+    const canvas = document.createElement('canvas');
+    canvas.width = canvas.height = 20;
+    const ctx = canvas.getContext('2d');
+    ctx.beginPath();
+    ctx.arc(10, 10, 7, 0, Math.PI * 2);
+    ctx.fillStyle = color;
+    ctx.fill();
+    ctx.lineWidth = 2;
+    ctx.strokeStyle = 'rgba(0,0,0,0.85)';
+    ctx.stroke();
+    url = canvas.toDataURL();
+  } catch {
+    url = null;
+  }
+  markerCache.set(color, url);
+  return url;
+}
+
+const cesiumColor = (rgba, fallback, alpha) =>
+  rgba
+    ? new Cesium.Color(rgba[0], rgba[1], rgba[2], alpha ?? rgba[3])
+    : Cesium.Color.fromCssColorString(fallback).withAlpha(alpha ?? 1);
+
+function anchorOf(geometry) {
+  if (geometry.type === 'point') return geometry.position;
+  const ring =
+    geometry.type === 'polygon' ? geometry.outer : geometry.positions;
+  let lon = 0;
+  let lat = 0;
+  for (const [x, y] of ring) {
+    lon += x;
+    lat += y;
+  }
+  return [lon / ring.length, lat / ring.length];
+}
+
+/**
+ * S2 Underground GhostMaps: the current editions of S2's public KMZ intel
+ * products, kept in step with the GitHub repository. The proxy watches the
+ * branch head and pushes each new commit; only changed products reload.
+ */
+export function createGhostMapsLayer({
+  source,
+  overlayHost = null,
+  screenSpaceEventHandlerFactory = null,
+  picking = null,
+  pointer = null,
+  openExternal = null,
+  storage = defaultStorage(),
+} = {}) {
+  if (typeof source?.getCatalog !== 'function')
+    throw new TypeError('GhostMaps layer requires a catalog source');
+  let _viewer = null;
+  let _enabled = false;
+  let _catalog = null;
+  let _lastError = null;
+  let _unsubscribe = null;
+  let _stream = 'closed';
+  let _queue = Promise.resolve();
+  let _clickHandler = null;
+  let _rowListener = null;
+  let _selectedKey = null;
+  let _selectedCardId = null;
+  let _selectedLink = null;
+  let _lifetime = new AbortController();
+  let _selection = readStoredSelection(storage);
+  /** productId → {version, dataSource, urls, count, features} */
+  const _loaded = new Map();
+  /** productId → in-flight version */
+  const _loading = new Map();
+  /** productId → error text */
+  const _failed = new Map();
+
+  const notifyRow = () => _rowListener?.();
+  const render = () => _viewer?.scene?.requestRender?.();
+  // Pins skip the depth test, and with Google 3D tiles the globe is hidden,
+  // so nothing else stops far-side pins drawing through the planet.
+  const _horizon = createHorizonCull({
+    getViewer: () => _viewer,
+    items: function* () {
+      for (const item of _loaded.values()) yield* item.pins;
+    },
+    onChange: render,
+  });
+  const canSelect = () =>
+    overlayHost && screenSpaceEventHandlerFactory && picking;
+
+  function wanted(product) {
+    return _selection ? _selection.has(product.id) : product.defaultOn;
+  }
+
+  function selectedIds() {
+    return (_catalog?.products || []).filter(wanted).map(({ id }) => id);
+  }
+
+  function unload(id) {
+    const item = _loaded.get(id);
+    if (!item) return;
+    _loaded.delete(id);
+    _viewer?.dataSources?.remove(item.dataSource, true);
+    item.urls.forEach((url) => URL.revokeObjectURL(url));
+    if (_selectedKey?.startsWith(`${id}:`)) clearSelection();
+  }
+
+  /** Build one product's data source off-scene, then swap it in. */
+  async function load(product, signal) {
+    const bytes = await source.getFile(product.id, product.version, { signal });
+    signal.throwIfAborted();
+    const entries = await readZipEntries(bytes);
+    signal.throwIfAborted();
+    const main = kmzMainDocument(entries);
+    if (!main) throw new Error(msg('That KMZ holds no KML document.'));
+    const urls = [];
+    const resolvePacked = kmzImageResolver(entries, main, (url) =>
+      urls.push(url),
+    );
+    // Icons only: ArcGIS exports also pack multi-megabyte photo attachments,
+    // which fall back to the product marker instead of being decoded.
+    const resolveImage = (href) => {
+      const path = resolveKmzPath(href, main, entries);
+      return path && entries.get(path).length <= MAX_ICON_BYTES
+        ? resolvePacked(href)
+        : null;
+    };
+    try {
+      const parsed = readGhostMapsKml(
+        parseXml(decodeXml(entries.get(main)), 'KML'),
+        resolveImage,
+      );
+      entries.clear();
+      signal.throwIfAborted();
+      const color = PRODUCT_COLORS[product.id] || ACCENT;
+      const dataSource = new Cesium.CustomDataSource(
+        `${GHOSTMAPS_LAYER_ID}:${product.id}`,
+      );
+      const features = [];
+      const pins = [];
+      dataSource.entities.suspendEvents();
+      parsed.features.forEach((feature, index) => {
+        const key = `${product.id}:${index}`;
+        const { style } = feature;
+        feature.geometries.forEach((geometry, part) => {
+          const id = `${PICK_PREFIX}${key}:${part}`;
+          if (geometry.type === 'point') {
+            const position = Cesium.Cartesian3.fromDegrees(
+              ...geometry.position,
+            );
+            const entity = dataSource.entities.add({
+              id,
+              position,
+              billboard: {
+                image: style.icon || markerImage(color),
+                scale: Math.min(
+                  1.5,
+                  Math.max(0.35, (style.iconScale ?? 1) * 0.7),
+                ),
+                color:
+                  style.icon && style.iconColor
+                    ? cesiumColor(style.iconColor)
+                    : undefined,
+                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+                verticalOrigin: Cesium.VerticalOrigin.CENTER,
+                // Ground-clamped icons would sink into terrain and 3D tiles; the
+                // horizon cull hides the far side instead (see `_horizon`).
+                disableDepthTestDistance: Number.POSITIVE_INFINITY,
+              },
+            });
+            pins.push({
+              position,
+              get show() {
+                return entity.show;
+              },
+              set show(value) {
+                entity.show = value;
+              },
+            });
+          } else if (geometry.type === 'line') {
+            dataSource.entities.add({
+              id,
+              polyline: {
+                positions: Cesium.Cartesian3.fromDegreesArray(
+                  geometry.positions.flat(),
+                ),
+                width: Math.min(8, Math.max(1.5, style.lineWidth ?? 2)),
+                material: cesiumColor(style.lineColor, color),
+                clampToGround: true,
+              },
+            });
+          } else {
+            const ring = (points) =>
+              Cesium.Cartesian3.fromDegreesArray(points.flat());
+            dataSource.entities.add({
+              id,
+              polygon: {
+                hierarchy: new Cesium.PolygonHierarchy(
+                  ring(geometry.outer),
+                  geometry.holes.map(
+                    (hole) => new Cesium.PolygonHierarchy(ring(hole)),
+                  ),
+                ),
+                material:
+                  style.fill === false
+                    ? Cesium.Color.TRANSPARENT
+                    : cesiumColor(
+                        style.polyColor,
+                        color,
+                        style.polyColor ? undefined : 0.25,
+                      ),
+                classificationType: Cesium.ClassificationType.BOTH,
+              },
+            });
+            if (style.outline !== false)
+              dataSource.entities.add({
+                id: `${id}:outline`,
+                polyline: {
+                  positions: ring([...geometry.outer, geometry.outer[0]]),
+                  width: Math.min(6, Math.max(1.5, style.lineWidth ?? 2)),
+                  material: cesiumColor(style.lineColor, color),
+                  clampToGround: true,
+                },
+              });
+          }
+        });
+        features.push({
+          name: feature.name,
+          folder: feature.folder,
+          description: feature.description,
+          anchor: anchorOf(feature.geometries[0]),
+        });
+      });
+      dataSource.entities.resumeEvents();
+      return { version: product.version, dataSource, urls, features, pins };
+    } catch (error) {
+      urls.forEach((url) => URL.revokeObjectURL(url));
+      throw error;
+    }
+  }
+
+  /** Bring the globe in line with the catalog and the chip selection. */
+  function sync() {
+    const run = _queue.then(async () => {
+      if (!_enabled || !_viewer || !_catalog) return;
+      const signal = _lifetime.signal;
+      const products = new Map(_catalog.products.map((p) => [p.id, p]));
+      for (const id of [..._loaded.keys()]) {
+        const product = products.get(id);
+        if (!product || !wanted(product)) unload(id);
+      }
+      for (const product of _catalog.products) {
+        if (!wanted(product) || signal.aborted) continue;
+        if (_loaded.get(product.id)?.version === product.version) continue;
+        _loading.set(product.id, product.version);
+        _failed.delete(product.id);
+        notifyRow();
+        try {
+          const next = await load(product, signal);
+          if (signal.aborted || !_enabled) {
+            next.urls.forEach((url) => URL.revokeObjectURL(url));
+            return;
+          }
+          // Cull before the first frame so far-side pins never flash.
+          _horizon.update(next.pins);
+          await _viewer.dataSources.add(next.dataSource);
+          // The new edition is on the globe before the old one leaves.
+          unload(product.id);
+          _loaded.set(product.id, next);
+        } catch (error) {
+          if (signal.aborted) return;
+          console.warn(`[Data:GhostMaps] ${product.id}:`, error);
+          _failed.set(
+            product.id,
+            error?.template ||
+              error?.message ||
+              msg('GhostMaps file could not be read'),
+          );
+        } finally {
+          _loading.delete(product.id);
+          notifyRow();
+          render();
+        }
+      }
+    });
+    _queue = run.catch(() => {});
+    return run;
+  }
+
+  function applyCatalog(catalog) {
+    _catalog = catalog;
+    _lastError = catalog.error || null;
+    notifyRow();
+    return sync();
+  }
+
+  function toggleProduct(id) {
+    // The first change pins the whole current selection, defaults included.
+    if (!_selection) _selection = new Set(selectedIds());
+    if (_selection.has(id)) _selection.delete(id);
+    else _selection.add(id);
+    writeStoredSelection(storage, _selection);
+    notifyRow();
+    void sync();
+  }
+
+  // ---- selection card ----------------------------------------------------
+  function featureFor(key) {
+    const [productId, index] = key.split(':');
+    return {
+      product: _catalog?.products.find((p) => p.id === productId) || null,
+      feature: _loaded.get(productId)?.features[Number(index)] || null,
+    };
+  }
+
+  function publishCard() {
+    if (!canSelect()) return;
+    const { product, feature } = _selectedKey ? featureFor(_selectedKey) : {};
+    if (!feature) {
+      _selectedKey = null;
+      _selectedCardId = null;
+      _selectedLink = null;
+      overlayHost.setEntries(
+        GHOSTMAPS_OVERLAY_SOURCE_ID,
+        [],
+        CARD_HOST_OPTIONS,
+      );
+      return;
+    }
+    const { fields, links } = parseDescriptionFields(feature.description);
+    _selectedLink = links[0] || null;
+    const heading = [t(PRODUCT_LABELS[product?.id] || product?.title || '')];
+    if (feature.folder) heading.push(fieldLabel(feature.folder));
+    if (product?.dateMs) heading.push(formatUtcDayMonth(product.dateMs));
+    const details = [heading.filter(Boolean).join(' · ')];
+    for (const { label, value } of fields) {
+      if (details.length >= MAX_CARD_LINES) break;
+      // ArcGIS repeats the feature type as the first row; the title has it.
+      if (value === feature.name) continue;
+      const line = label ? `${fieldLabel(label)}: ${value}` : value;
+      details.push(
+        ...wrapCardText(line, 60, Math.min(4, MAX_CARD_LINES - details.length)),
+      );
+    }
+    if (_selectedLink && openExternal)
+      details.push(
+        tn(
+          links.length,
+          '{count} source link ↗ · click card to open',
+          '{count} source links ↗ · click card to open the first',
+          { count: formatNumber(links.length) },
+        ),
+      );
+    const title = t('S2 · {name}', {
+      name: fieldLabel(feature.name || feature.folder) || t('Report'),
+    });
+    const card = {
+      id: `ghostmaps-card:${_selectedKey}`,
+      selected: true,
+      interactive: Boolean(_selectedLink && openExternal),
+      title,
+      details,
+      accent: PRODUCT_COLORS[product?.id] || ACCENT,
+      priority: Number.MAX_SAFE_INTEGER,
+      gapPx: 15,
+      verticalOnly: true,
+      placement: 'above',
+      // A click card comes and goes with the click, as CCTV cards do, rather
+      // than holding the label arbiter's 2.5 s minimum lifetime; and it hides
+      // when its marker turns behind the planet.
+      stateless: true,
+      horizonCull: true,
+      position: Cesium.Cartesian3.fromDegrees(...feature.anchor),
+    };
+    if (card.interactive) {
+      const link = _selectedLink;
+      card.accessibilityLabel = t('Open the source for {title}', { title });
+      card.activate = () => {
+        openExternal(link);
+        return true;
+      };
+    }
+    _selectedCardId = card.id;
+    overlayHost.setEntries(
+      GHOSTMAPS_OVERLAY_SOURCE_ID,
+      [card],
+      CARD_HOST_OPTIONS,
+    );
+    overlayHost.setVisible?.(GHOSTMAPS_OVERLAY_SOURCE_ID, true);
+  }
+
+  function clearSelection() {
+    _selectedKey = null;
+    _selectedCardId = null;
+    _selectedLink = null;
+    // An empty publish, as the perimeter cards deselect: it releases the
+    // selected card's paint lane, which clearing the source alone left drawn.
+    overlayHost?.setEntries(GHOSTMAPS_OVERLAY_SOURCE_ID, [], CARD_HOST_OPTIONS);
+  }
+
+  function pickedKey(picked) {
+    const pickId = picking.resolvePickId(picked);
+    if (typeof pickId !== 'string' || !pickId.startsWith(PICK_PREFIX))
+      return null;
+    const [productId, index] = pickId.slice(PICK_PREFIX.length).split(':');
+    return _loaded.get(productId)?.features[Number(index)]
+      ? `${productId}:${index}`
+      : null;
+  }
+
+  function installClickHandler() {
+    if (!canSelect() || _clickHandler || !_viewer) return;
+    picking.registerPickOwner?.(
+      GHOSTMAPS_LAYER_ID,
+      (pickedId) =>
+        typeof pickedId === 'string' && pickedId.startsWith(PICK_PREFIX),
+    );
+    _clickHandler = screenSpaceEventHandlerFactory(_viewer);
+    _clickHandler.setInputAction((click) => {
+      if (pointer && !pointer.isPointerFree()) return;
+      const cardHit = overlayHost.hitTest?.(
+        click.position?.x,
+        click.position?.y,
+        { sourceId: GHOSTMAPS_OVERLAY_SOURCE_ID },
+      );
+      if (cardHit && cardHit.entryId === _selectedCardId) {
+        if (_selectedLink && openExternal) openExternal(_selectedLink);
+        return;
+      }
+      const picked = _viewer.scene.pick(click.position);
+      const key = picked ? pickedKey(picked) : null;
+      if (key) {
+        _selectedKey = key;
+        publishCard();
+        render();
+        return;
+      }
+      if (picked) {
+        const pickId = picking.resolvePickId(picked);
+        if (pickId && picking.isOwnedByOtherLayer(GHOSTMAPS_LAYER_ID, pickId))
+          return;
+      }
+      if (_selectedKey) {
+        clearSelection();
+        render();
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+  }
+
+  function removeClickHandler() {
+    _clickHandler?.destroy();
+    _clickHandler = null;
+    picking?.unregisterPickOwner?.(GHOSTMAPS_LAYER_ID);
+  }
+
+  function featureCount() {
+    let count = 0;
+    for (const item of _loaded.values()) count += item.features.length;
+    return count;
+  }
+
+  const layer = {
+    id: GHOSTMAPS_LAYER_ID,
+    name: 'S2 GhostMaps',
+    icon: '👻',
+    source: 'S2 Underground',
+    // Pushes arrive within seconds over the event stream; this interval is
+    // the backstop if the stream is down.
+    updateInterval: 300000,
+
+    init(viewer) {
+      if (_viewer) throw new Error('GhostMaps layer is already initialized');
+      _viewer = viewer;
+    },
+
+    enable() {
+      _enabled = true;
+      _lifetime = new AbortController();
+      for (const item of _loaded.values()) item.dataSource.show = true;
+      installClickHandler();
+      if (!_unsubscribe && typeof source.subscribe === 'function')
+        _unsubscribe = source.subscribe(
+          (catalog) => {
+            if (_enabled) void applyCatalog(catalog);
+          },
+          (state) => {
+            if (_stream === state) return;
+            _stream = state;
+            notifyRow();
+          },
+        );
+    },
+
+    disable() {
+      _enabled = false;
+      _lifetime.abort();
+      _unsubscribe?.();
+      _unsubscribe = null;
+      _stream = 'closed';
+      removeClickHandler();
+      clearSelection();
+      _horizon.stop();
+      for (const id of [..._loaded.keys()]) unload(id);
+      render();
+    },
+
+    async update(_viewerArg, { signal } = {}) {
+      if (!_enabled || signal?.aborted) return false;
+      try {
+        const catalog = await source.getCatalog({ signal });
+        if (!_enabled) return false;
+        await applyCatalog(catalog);
+        return true;
+      } catch (error) {
+        if (signal?.aborted || !_enabled) return false;
+        console.warn('[Data:GhostMaps] catalog error:', error);
+        _lastError = error?.message || msg('GhostMaps catalog unavailable');
+        notifyRow();
+        // Keep the layer on; the event stream or the next interval recovers.
+        return true;
+      }
+    },
+
+    destroy() {
+      layer.disable();
+      _viewer = null;
+      _catalog = null;
+      _rowListener = null;
+    },
+
+    setRowControlsListener(listener) {
+      _rowListener = listener;
+    },
+
+    getRowControls() {
+      const products = _catalog?.products || [];
+      const commit = _catalog?.commit;
+      const info = commit
+        ? _stream === 'open'
+          ? t('LIVE · GitHub {commit} · {message} · checked every {seconds}s', {
+              commit: commit.slice(0, 7),
+              message: _catalog.message || '—',
+              seconds: formatNumber(
+                Math.round((_catalog.pollMs || 15000) / 1000),
+              ),
+            })
+          : t('GitHub {commit} · {message} · reconnecting for live updates', {
+              commit: commit.slice(0, 7),
+              message: _catalog.message || '—',
+            })
+        : t('Connecting to the S2 GhostMaps repository…');
+      return {
+        chips: products.map((product) => {
+          const loaded = _loaded.get(product.id);
+          const failed = _failed.get(product.id);
+          return {
+            id: product.id,
+            label: t(PRODUCT_LABELS[product.id] || product.title),
+            active: wanted(product),
+            busy: _loading.has(product.id),
+            state: failed ? 'error' : undefined,
+            color: PRODUCT_COLORS[product.id],
+            title: [
+              product.fileTitle,
+              loaded
+                ? tn(
+                    loaded.features.length,
+                    '{count} placemark',
+                    '{count} placemarks',
+                    {
+                      count: formatNumber(loaded.features.length),
+                    },
+                  )
+                : null,
+              failed ? t(failed) : null,
+            ]
+              .filter(Boolean)
+              .join(' · '),
+            onClick: () => toggleProduct(product.id),
+          };
+        }),
+        legend: [],
+        info,
+        infoTitle: t(
+          'S2 Underground publishes these KMZ products to GitHub. New uploads are detected within seconds and replace the previous edition automatically. Click a marker for its report.',
+        ),
+      };
+    },
+
+    getStats() {
+      return {
+        count: featureCount(),
+        products: [..._loaded.keys()],
+        commit: _catalog?.commit || null,
+        lastUpdate: _catalog?.committedAt || _catalog?.changedAt || null,
+        checkedAt: _catalog?.checkedAt || null,
+        stream: _stream,
+        loading: _loading.size > 0,
+        error: _lastError || [..._failed.values()][0] || null,
+        fallback: false,
+      };
+    },
+
+    /** Loaded placemarks as plain records, for tools and QA. */
+    getAnalystRecords(maxCount = Infinity) {
+      if (!_enabled) return [];
+      const out = [];
+      for (const [productId, item] of _loaded) {
+        for (const feature of item.features) {
+          if (out.length >= maxCount) return out;
+          out.push({
+            product: productId,
+            name: feature.name,
+            folder: feature.folder,
+            lon: feature.anchor[0],
+            lat: feature.anchor[1],
+          });
+        }
+      }
+      return out;
+    },
+  };
+  return layer;
+}

src/layers/ghostMaps/kml.js

@@ -0,0 +1,198 @@
+// Read the drawable content of a parsed GhostMaps KML document: placemarks
+// with their folder, geometry, resolved style and raw description. Network
+// links, overlays, models and remote icons are never followed; an icon is
+// either an image packed in the same KMZ or the layer's own marker.
+import { kmlColor } from './records.js';
+
+export const MAX_GHOSTMAPS_FEATURES = 20_000;
+export const MAX_GHOSTMAPS_POSITIONS = 250_000;
+
+const childrenNamed = (el, name) =>
+  [...(el?.children || [])].filter((child) => child.localName === name);
+const firstChild = (el, name) =>
+  [...(el?.children || [])].find((child) => child.localName === name) || null;
+const descendants = (el, name) =>
+  [...(el?.getElementsByTagName?.('*') || [])].filter(
+    (child) => child.localName === name,
+  );
+const text = (el) => (el?.textContent ?? '').trim();
+
+function number(el, fallback) {
+  const value = Number(text(el));
+  return el && Number.isFinite(value) ? value : fallback;
+}
+
+/** `lon,lat[,alt] lon,lat ...` → [[lon, lat], ...]; invalid tuples are dropped. */
+export function parseKmlCoordinates(value) {
+  const out = [];
+  for (const tuple of String(value ?? '')
+    .trim()
+    .split(/\s+/)) {
+    const [lon, lat] = tuple.split(',').map(Number);
+    if (
+      Number.isFinite(lon) &&
+      Number.isFinite(lat) &&
+      Math.abs(lat) <= 90 &&
+      Math.abs(lon) <= 180
+    )
+      out.push([lon, lat]);
+  }
+  return out;
+}
+
+function readStyle(styleEl, resolveImage) {
+  const style = {};
+  const icon = firstChild(styleEl, 'IconStyle');
+  if (icon) {
+    const href = text(firstChild(firstChild(icon, 'Icon'), 'href'));
+    style.icon = href ? resolveImage(href) : null;
+    style.iconScale = number(firstChild(icon, 'scale'), 1);
+    style.iconColor = kmlColor(text(firstChild(icon, 'color')));
+  }
+  const line = firstChild(styleEl, 'LineStyle');
+  if (line) {
+    style.lineColor = kmlColor(text(firstChild(line, 'color')));
+    style.lineWidth = number(firstChild(line, 'width'), 1);
+  }
+  const poly = firstChild(styleEl, 'PolyStyle');
+  if (poly) {
+    style.polyColor = kmlColor(text(firstChild(poly, 'color')));
+    style.fill = text(firstChild(poly, 'fill')) !== '0';
+    style.outline = text(firstChild(poly, 'outline')) !== '0';
+  }
+  return style;
+}
+
+/** Shared styles by id; a StyleMap resolves to its `normal` pair. */
+function collectStyles(doc, resolveImage) {
+  const styles = new Map();
+  for (const el of descendants(doc, 'Style')) {
+    const id = el.getAttribute('id');
+    if (id) styles.set(id, readStyle(el, resolveImage));
+  }
+  const maps = new Map();
+  for (const el of descendants(doc, 'StyleMap')) {
+    const id = el.getAttribute('id');
+    if (!id) continue;
+    const normal = childrenNamed(el, 'Pair').find(
+      (pair) => text(firstChild(pair, 'key')) === 'normal',
+    );
+    if (!normal) continue;
+    const inline = firstChild(normal, 'Style');
+    maps.set(
+      id,
+      inline
+        ? readStyle(inline, resolveImage)
+        : text(firstChild(normal, 'styleUrl')),
+    );
+  }
+  const resolve = (url, depth = 0) => {
+    const id = String(url || '').replace(/^#/, '');
+    if (!id || url.includes('/') || depth > 2) return {};
+    if (styles.has(id)) return styles.get(id);
+    const mapped = maps.get(id);
+    if (typeof mapped === 'string') return resolve(mapped, depth + 1);
+    return mapped || {};
+  };
+  return resolve;
+}
+
+function readGeometry(el, out, budget) {
+  switch (el.localName) {
+    case 'Point': {
+      const [position] = parseKmlCoordinates(
+        text(firstChild(el, 'coordinates')),
+      );
+      if (position) {
+        budget.positions += 1;
+        out.push({ type: 'point', position });
+      }
+      break;
+    }
+    case 'LineString':
+    case 'LinearRing': {
+      const positions = parseKmlCoordinates(
+        text(firstChild(el, 'coordinates')),
+      );
+      if (positions.length >= 2) {
+        budget.positions += positions.length;
+        out.push({ type: 'line', positions });
+      }
+      break;
+    }
+    case 'Polygon': {
+      const ring = (boundary) =>
+        parseKmlCoordinates(
+          text(firstChild(firstChild(boundary, 'LinearRing'), 'coordinates')),
+        );
+      const outer = ring(firstChild(el, 'outerBoundaryIs'));
+      if (outer.length >= 3) {
+        const holes = childrenNamed(el, 'innerBoundaryIs')
+          .map(ring)
+          .filter((hole) => hole.length >= 3);
+        budget.positions +=
+          outer.length + holes.reduce((n, hole) => n + hole.length, 0);
+        out.push({ type: 'polygon', outer, holes });
+      }
+      break;
+    }
+    case 'MultiGeometry':
+      for (const child of el.children) readGeometry(child, out, budget);
+      break;
+    default:
+      // Models, tracks and anything newer are not drawn.
+      break;
+  }
+}
+
+/** Name of the nearest enclosing Folder (or Document), for grouping. */
+function folderName(el) {
+  for (let node = el.parentElement; node; node = node.parentElement) {
+    if (node.localName === 'Folder' || node.localName === 'Document') {
+      const name = text(firstChild(node, 'name'));
+      if (name) return name;
+    }
+  }
+  return '';
+}
+
+/**
+ * @param {Document} doc Parsed KML.
+ * @param {(href: string) => ?string} resolveImage URL for a KMZ-packed image.
+ * @returns {{features: Array<{name: string, folder: string,
+ *   description: string, style: object, geometries: Array<object>}>,
+ *   positions: number, over: boolean}}
+ */
+export function readGhostMapsKml(doc, resolveImage = () => null) {
+  const styleFor = collectStyles(doc, resolveImage);
+  const features = [];
+  const budget = { positions: 0 };
+  let over = false;
+  for (const placemark of descendants(doc, 'Placemark')) {
+    // A hidden placemark (visibility 0) is drawn hidden by Google Earth too.
+    if (text(firstChild(placemark, 'visibility')) === '0') continue;
+    const geometries = [];
+    for (const child of placemark.children)
+      readGeometry(child, geometries, budget);
+    if (!geometries.length) continue;
+    if (
+      features.length >= MAX_GHOSTMAPS_FEATURES ||
+      budget.positions > MAX_GHOSTMAPS_POSITIONS
+    ) {
+      over = true;
+      break;
+    }
+    const inline = firstChild(placemark, 'Style');
+    features.push({
+      name: text(firstChild(placemark, 'name')).slice(0, 200),
+      folder: folderName(placemark).slice(0, 120),
+      description: text(firstChild(placemark, 'description')),
+      style: {
+        ...styleFor(text(firstChild(placemark, 'styleUrl'))),
+        ...(inline ? readStyle(inline, resolveImage) : {}),
+      },
+      geometries,
+    });
+  }
+  return { features, positions: budget.positions, over };
+}

src/layers/ghostMaps/lifecycle.test.mjs

@@ -0,0 +1,180 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import * as Cesium from 'cesium';
+import { createGhostMapsLayer } from './index.js';
+
+function element(localName, children = [], value = '', attributes = {}) {
+  const node = {
+    localName,
+    children,
+    get textContent() {
+      return value + children.map((child) => child.textContent).join('');
+    },
+    getAttribute: (key) => attributes[key] ?? null,
+    getElementsByTagName(name) {
+      return children.flatMap((child) => [
+        ...(name === '*' || name === child.localName ? [child] : []),
+        ...child.getElementsByTagName(name),
+      ]);
+    },
+  };
+  for (const child of children) child.parentElement = node;
+  return node;
+}
+
+function documentFixture() {
+  return element('document', [
+    element('kml', [
+      element('Document', [
+        element(
+          'Style',
+          [
+            element('IconStyle', [
+              element('Icon', [element('href', [], 'icon.png')]),
+            ]),
+          ],
+          '',
+          { id: 'pin' },
+        ),
+        element('Placemark', [
+          element('name', [], 'Test report'),
+          element('styleUrl', [], '#pin'),
+          element('Point', [element('coordinates', [], '12,34')]),
+        ]),
+      ]),
+    ]),
+  ]);
+}
+
+// A stored KMZ with a local icon; the XML DOM double supplies its one point.
+function fixtureKmz() {
+  const files = [
+    ['doc.kml', '<kml/>'],
+    ['icon.png', 'packed icon'],
+  ];
+  const local = [];
+  const central = [];
+  let offset = 0;
+  for (const [name, value] of files) {
+    const key = Buffer.from(name);
+    const bytes = Buffer.from(value);
+    const header = Buffer.alloc(30);
+    header.writeUInt32LE(0x04034b50);
+    header.writeUInt32LE(bytes.length, 18);
+    header.writeUInt32LE(bytes.length, 22);
+    header.writeUInt16LE(key.length, 26);
+    const directory = Buffer.alloc(46);
+    directory.writeUInt32LE(0x02014b50);
+    directory.writeUInt32LE(bytes.length, 20);
+    directory.writeUInt32LE(bytes.length, 24);
+    directory.writeUInt16LE(key.length, 28);
+    directory.writeUInt32LE(offset, 42);
+    local.push(header, key, bytes);
+    central.push(directory, key);
+    offset += header.length + key.length + bytes.length;
+  }
+  const directory = Buffer.concat(central);
+  const end = Buffer.alloc(22);
+  end.writeUInt32LE(0x06054b50);
+  end.writeUInt16LE(files.length, 8);
+  end.writeUInt16LE(files.length, 10);
+  end.writeUInt32LE(directory.length, 12);
+  end.writeUInt32LE(offset, 16);
+  return new Uint8Array(Buffer.concat([...local, directory, end]));
+}
+
+function fixture(t, { beforeFileReturns, onCreateUrl } = {}) {
+  const previous = Object.getOwnPropertyDescriptor(globalThis, 'DOMParser');
+  globalThis.DOMParser = class {
+    parseFromString() {
+      return documentFixture();
+    }
+  };
+  t.after(() => {
+    if (previous) Object.defineProperty(globalThis, 'DOMParser', previous);
+    else delete globalThis.DOMParser;
+  });
+  const created = [];
+  const revoked = [];
+  t.mock.method(URL, 'createObjectURL', () => {
+    const url = `blob:local-${created.length}`;
+    created.push(url);
+    onCreateUrl?.(layer);
+    return url;
+  });
+  t.mock.method(URL, 'revokeObjectURL', (url) => revoked.push(url));
+  t.mock.method(console, 'warn', () => {});
+  const mounted = new Set();
+  const viewer = {
+    scene: { requestRender() {} },
+    dataSources: {
+      async add(dataSource) {
+        mounted.add(dataSource);
+        return dataSource;
+      },
+      remove(dataSource) {
+        return mounted.delete(dataSource);
+      },
+    },
+  };
+  const layer = createGhostMapsLayer({
+    storage: null,
+    source: {
+      getCatalog: async () => ({
+        products: [{ id: 'cip', version: 'a'.repeat(40), defaultOn: true }],
+      }),
+      getFile: async () => {
+        beforeFileReturns?.(layer);
+        return fixtureKmz();
+      },
+    },
+  });
+  layer.init(viewer);
+  layer.enable();
+  t.after(() => layer.destroy());
+  return { layer, viewer, mounted, created, revoked };
+}
+
+test('cancelling a file read does not allocate packed-image URLs', async (t) => {
+  const { layer, viewer, mounted, created, revoked } = fixture(t, {
+    beforeFileReturns: (layer) => queueMicrotask(() => layer.disable()),
+  });
+  await layer.update(viewer);
+  assert.equal(created.length, 0);
+  assert.equal(revoked.length, 0);
+  assert.equal(mounted.size, 0);
+});
+
+test('cancellation during parsing releases every packed-image URL', async (t) => {
+  const { layer, viewer, mounted, created, revoked } = fixture(t, {
+    onCreateUrl: (layer) => layer.disable(),
+  });
+  await layer.update(viewer);
+  assert.equal(created.length, 1);
+  assert.deepEqual(revoked, created);
+  assert.equal(mounted.size, 0);
+});
+
+test('entity construction failure releases parsed image URLs', async (t) => {
+  const { layer, viewer, mounted, created, revoked } = fixture(t);
+  t.mock.method(Cesium.EntityCollection.prototype, 'add', () => {
+    throw new Error('fixture entity failure');
+  });
+  await layer.update(viewer);
+  assert.equal(created.length, 1);
+  assert.deepEqual(revoked, created);
+  assert.equal(mounted.size, 0);
+  assert.equal(layer.getStats().error, 'fixture entity failure');
+});
+
+test('successful load keeps icons until the product is disabled', async (t) => {
+  const { layer, viewer, mounted, created, revoked } = fixture(t);
+  await layer.update(viewer);
+  assert.equal(created.length, 1);
+  assert.equal(revoked.length, 0);
+  assert.equal(mounted.size, 1);
+  assert.equal(layer.getStats().count, 1);
+  layer.disable();
+  assert.deepEqual(revoked, created);
+  assert.equal(mounted.size, 0);
+});

src/layers/ghostMaps/records.js

@@ -0,0 +1,165 @@
+// Pure helpers for GhostMaps placemarks: description tables to plain fields,
+// KML colors, and card text wrapping. Strings in, data out — description
+// markup is only ever read as text, never inserted into the page.
+
+const ENTITIES = Object.freeze({
+  amp: '&',
+  lt: '<',
+  gt: '>',
+  quot: '"',
+  apos: "'",
+  nbsp: ' ',
+});
+
+/** Decode the HTML character references ArcGIS and Google Earth emit. */
+export function decodeHtmlEntities(text) {
+  return String(text ?? '').replace(
+    /&(#x[0-9a-f]{1,6}|#\d{1,7}|[a-z]{2,8});/gi,
+    (whole, ref) => {
+      if (ref[0] === '#') {
+        const code =
+          ref[1] === 'x' || ref[1] === 'X'
+            ? parseInt(ref.slice(2), 16)
+            : parseInt(ref.slice(1), 10);
+        return code > 0 &&
+          code <= 0x10ffff &&
+          !(code >= 0xd800 && code <= 0xdfff)
+          ? String.fromCodePoint(code)
+          : '';
+      }
+      return ENTITIES[ref.toLowerCase()] ?? whole;
+    },
+  );
+}
+
+/** Markup to one line of plain text. */
+export function htmlToText(html) {
+  return decodeHtmlEntities(
+    String(html ?? '')
+      .replace(/<(script|style|head)\b[\s\S]*?<\/\1\s*>/gi, ' ')
+      .replace(/<br\s*\/?>/gi, ' ')
+      .replace(/<[^>]*>/g, ' '),
+  )
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+const EMPTY_VALUES = new Set(['', '<null>', 'null', 'n/a', '-', '<blank>']);
+// ArcGIS writes geometry type and internal ids into every popup table.
+const SKIPPED_LABELS = new Set(['shape', 'objectid', 'fid', 'globalid']);
+const MAX_FIELDS = 24;
+const MAX_VALUE = 600;
+const MAX_LINKS = 6;
+
+/**
+ * Fields and links from a placemark description. ArcGIS "popup" exports are a
+ * two-column table (label, value); anything else becomes one unlabelled field.
+ * @param {string} html Description as written in the KML (CDATA text).
+ * @returns {{fields: Array<{label: string, value: string}>, links: string[]}}
+ */
+export function parseDescriptionFields(html) {
+  const source = String(html ?? '').replace(
+    /<(script|style|head)\b[\s\S]*?<\/\1\s*>/gi,
+    ' ',
+  );
+  const fields = [];
+  const links = [];
+  const addLinks = (markup) => {
+    for (const match of markup.matchAll(/href\s*=\s*["']([^"']+)["']/gi)) {
+      const url = decodeHtmlEntities(match[1]).trim();
+      if (/^https?:\/\/[^\s]+$/i.test(url) && !links.includes(url))
+        links.push(url);
+    }
+  };
+  // Innermost rows only: ArcGIS nests the field table inside an outer row,
+  // and only leaf rows with exactly two cells are label/value pairs.
+  for (const row of source.matchAll(
+    /<tr\b[^>]*>((?:(?!<tr\b)[\s\S])*?)<\/tr\s*>/gi,
+  )) {
+    const cells = [
+      ...row[1].matchAll(/<t[dh]\b[^>]*>([\s\S]*?)<\/t[dh]\s*>/gi),
+    ].map((cell) => cell[1]);
+    if (cells.length !== 2) continue;
+    const label = htmlToText(cells[0]);
+    const value = htmlToText(cells[1]);
+    if (!label || SKIPPED_LABELS.has(label.toLowerCase())) continue;
+    if (EMPTY_VALUES.has(value.toLowerCase())) continue;
+    addLinks(cells[1]);
+    // A bare research link is carried by `links`; the card does not need
+    // the URL twice.
+    if (/^https?:\/\/\S+$/i.test(value)) continue;
+    if (fields.length < MAX_FIELDS)
+      fields.push({ label, value: value.slice(0, MAX_VALUE) });
+  }
+  if (!fields.length && !links.length) {
+    const text = htmlToText(source);
+    if (text) fields.push({ label: '', value: text.slice(0, MAX_VALUE) });
+    addLinks(source);
+  }
+  return { fields, links: links.slice(0, MAX_LINKS) };
+}
+
+/**
+ * KML `aabbggrr` to `[r, g, b, a]` in 0..1, or null.
+ * @param {string} text
+ * @returns {?number[]}
+ */
+export function kmlColor(text) {
+  const hex = String(text ?? '')
+    .trim()
+    .replace(/^#/, '');
+  if (!/^[0-9a-f]{8}$/i.test(hex)) return null;
+  const byte = (at) => parseInt(hex.slice(at, at + 2), 16) / 255;
+  return [byte(6), byte(4), byte(2), byte(0)];
+}
+
+/**
+ * Greedy word wrap for canvas card lines; overlong words are cut.
+ * @param {string} text
+ * @param {number} width Characters per line.
+ * @param {number} maxLines Lines kept; the last ends with an ellipsis when cut.
+ * @returns {string[]}
+ */
+export function wrapCardText(text, width = 56, maxLines = 4) {
+  const lines = [];
+  let line = '';
+  let cut = false;
+  for (let word of String(text ?? '')
+    .split(/\s+/)
+    .filter(Boolean)) {
+    while (word.length > width) {
+      if (line) {
+        lines.push(line);
+        line = '';
+      }
+      lines.push(word.slice(0, width));
+      word = word.slice(width);
+    }
+    if (!line) line = word;
+    else if (line.length + 1 + word.length <= width) line += ` ${word}`;
+    else {
+      lines.push(line);
+      line = word;
+    }
+    if (lines.length >= maxLines) {
+      cut = true;
+      break;
+    }
+  }
+  if (line && lines.length < maxLines) lines.push(line);
+  else if (line) cut = true;
+  const kept = lines.slice(0, maxLines);
+  if (cut && kept.length) {
+    const last = kept[kept.length - 1];
+    kept[kept.length - 1] = `${last.slice(0, width - 1)}…`;
+  }
+  return kept;
+}
+
+/** Field labels ArcGIS writes CamelCase; show them as words. */
+export function fieldLabel(label) {
+  return String(label ?? '')
+    .replace(/([a-z])([A-Z0-9])/g, '$1 $2')
+    .replace(/_/g, ' ')
+    .trim();
+}

src/layers/ghostMaps/records.test.mjs

@@ -0,0 +1,106 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import {
+  decodeHtmlEntities,
+  fieldLabel,
+  htmlToText,
+  kmlColor,
+  parseDescriptionFields,
+  wrapCardText,
+} from './records.js';
+
+// The shape ArcGIS Pro writes into every S2 placemark description.
+const ARCGIS = `<html xmlns:fo="http://www.w3.org/1999/XSL/Format"><head>
+<META http-equiv="Content-Type" content="text/html"></head>
+<body style="margin:0px"><table style="font-family:Arial">
+<tr style="text-align:center;font-weight:bold;background:#9CBCE2"><td>HistoricProtestSite</td></tr>
+<tr><td><table style="font-family:Arial">
+<tr><td>SHAPE</td><td>Point</td></tr>
+<tr bgcolor="#D4E4F3"><td>InstallationType</td><td>HistoricProtestSite</td></tr>
+<tr><td>OperationalStatus</td><td>ACTIVE</td></tr>
+<tr bgcolor="#D4E4F3"><td>Affiliation</td><td>&lt;Null&gt;</td></tr>
+<tr><td>Description</td><td>Locals gather here &amp; protest &#8212; weekly.</td></tr>
+<tr><td>Research1</td><td><a target="_blank" href="https://x.com/a/status/1">https://x.com/a/status/1</a></td></tr>
+<tr><td>Research2</td><td><a href="javascript:alert(1)">bad</a></td></tr>
+<tr><td>Research3</td><td>&lt;Null&gt;</td></tr>
+</table></td></tr></table></body><script type="text/javascript">
+function changeImage(a, b) { document.getElementById('x').innerHTML = b; }
+</script></html>`;
+
+test('ArcGIS popup tables become plain label/value fields and http links', () => {
+  const { fields, links } = parseDescriptionFields(ARCGIS);
+  assert.deepEqual(fields, [
+    { label: 'InstallationType', value: 'HistoricProtestSite' },
+    { label: 'OperationalStatus', value: 'ACTIVE' },
+    { label: 'Description', value: 'Locals gather here & protest — weekly.' },
+    { label: 'Research2', value: 'bad' },
+  ]);
+  // javascript: and other schemes never become links.
+  assert.deepEqual(links, ['https://x.com/a/status/1']);
+});
+
+test('free-form descriptions become one unlabelled field; scripts are dropped', () => {
+  assert.deepEqual(
+    parseDescriptionFields(
+      '<p>Front line<br>as of 10 Oct</p><script>steal()</script><a href="https://s2.example/x">more</a>',
+    ),
+    {
+      fields: [{ label: '', value: 'Front line as of 10 Oct more' }],
+      links: ['https://s2.example/x'],
+    },
+  );
+  assert.deepEqual(parseDescriptionFields(''), { fields: [], links: [] });
+  assert.deepEqual(parseDescriptionFields(undefined), {
+    fields: [],
+    links: [],
+  });
+});
+
+test('field values and counts are bounded', () => {
+  const rows = Array.from(
+    { length: 40 },
+    (_, i) => `<tr><td>K${i}</td><td>${'x'.repeat(900)}</td></tr>`,
+  ).join('');
+  const { fields } = parseDescriptionFields(`<table>${rows}</table>`);
+  assert.equal(fields.length, 24);
+  assert.equal(fields[0].value.length, 600);
+});
+
+test('entities and tags decode to text', () => {
+  assert.equal(
+    decodeHtmlEntities('&lt;b&gt; &#x41;&#66; &nbsp;&bogus;'),
+    '<b> AB  &bogus;',
+  );
+  assert.equal(decodeHtmlEntities('&#xD800;&#0;'), '');
+  assert.equal(htmlToText('<style>a{}</style><b>One</b>\n two'), 'One two');
+});
+
+test('KML aabbggrr colors convert to rgba', () => {
+  assert.deepEqual(kmlColor('ff0000ff'), [1, 0, 0, 1]);
+  assert.deepEqual(kmlColor('8000ff00'), [0, 1, 0, 128 / 255]);
+  assert.equal(kmlColor('red'), null);
+  assert.equal(kmlColor(''), null);
+});
+
+test('card text wraps on words, cuts long words and marks truncation', () => {
+  assert.deepEqual(wrapCardText('one two three four', 9, 4), [
+    'one two',
+    'three',
+    'four',
+  ]);
+  assert.deepEqual(wrapCardText('abcdefghijkl', 5, 4), [
+    'abcde',
+    'fghij',
+    'kl',
+  ]);
+  assert.deepEqual(wrapCardText('aa bb cc dd ee', 5, 2), ['aa bb', 'cc d…']);
+  assert.deepEqual(wrapCardText('', 5, 2), []);
+  for (const line of wrapCardText('word '.repeat(200), 20, 3))
+    assert.ok(line.length <= 20);
+});
+
+test('CamelCase field labels read as words', () => {
+  assert.equal(fieldLabel('OperationalStatus'), 'Operational Status');
+  assert.equal(fieldLabel('Research1'), 'Research 1');
+  assert.equal(fieldLabel('Kinetic_Activity'), 'Kinetic Activity');
+});

src/layers/ghostMaps/source.js

@@ -0,0 +1,81 @@
+import {
+  readResponseBytesCapped,
+  readResponseJsonCapped,
+} from '../../sources/httpBody.js';
+import { GHOSTMAPS_MAX_FILE_BYTES } from './catalog.js';
+
+// A portable export (package.json): no i18n here. Failures stay English data;
+// the Layers panel shows them translated.
+const msg = (text) => text;
+
+/**
+ * Same-origin GhostMaps source: the catalog, one product's KMZ bytes, and a
+ * push subscription that fires whenever the watcher sees a new commit.
+ */
+export function createGhostMapsSource({
+  fetchImpl = (...args) => globalThis.fetch(...args),
+  EventSourceImpl = globalThis.EventSource,
+} = {}) {
+  return {
+    async getCatalog({ signal } = {}) {
+      const response = await fetchImpl('/api/ghostmaps/catalog', { signal });
+      if (!response.ok)
+        throw new Error(
+          `GhostMaps catalog unavailable (HTTP ${response.status})`,
+        );
+      const catalog = await readResponseJsonCapped(
+        response,
+        1024 * 1024,
+        signal,
+      );
+      if (!Array.isArray(catalog?.products))
+        throw new Error(msg('Malformed GhostMaps catalog'));
+      return catalog;
+    },
+
+    async getFile(id, version, { signal } = {}) {
+      const response = await fetchImpl(
+        `/api/ghostmaps/file/${encodeURIComponent(id)}?v=${encodeURIComponent(version)}`,
+        { signal },
+      );
+      if (!response.ok)
+        throw new Error(`GhostMaps file unavailable (HTTP ${response.status})`);
+      return readResponseBytesCapped(
+        response,
+        GHOSTMAPS_MAX_FILE_BYTES,
+        signal,
+      );
+    },
+
+    /**
+     * Call `onCatalog(catalog)` for every catalog the server pushes, and
+     * `onState('open' | 'connecting' | 'closed')` as the stream changes. The
+     * browser's EventSource reconnects by itself. Returns an unsubscribe.
+     */
+    subscribe(onCatalog, onState = () => {}) {
+      if (typeof EventSourceImpl !== 'function') {
+        onState('closed');
+        return () => {};
+      }
+      const events = new EventSourceImpl('/api/ghostmaps/events');
+      const states = ['connecting', 'open', 'closed'];
+      const report = () => onState(states[events.readyState] ?? 'connecting');
+      events.onopen = report;
+      events.onerror = report;
+      const listener = (event) => {
+        try {
+          const catalog = JSON.parse(event.data);
+          if (Array.isArray(catalog?.products)) onCatalog(catalog);
+        } catch {
+          /* ignore a malformed frame; the next one replaces it */
+        }
+      };
+      events.addEventListener('catalog', listener);
+      report();
+      return () => {
+        events.removeEventListener('catalog', listener);
+        events.close();
+      };
+    },
+  };
+}

src/layers/gnss/index.js

@@ -70,10 +70,16 @@ export function createGnssIntegrityLayer({
   viewAnchor = defaultGnssViewAnchor,
   now = () => Date.now(),
   monotonicNow = () => performance.now(),
-  windowMs = GNSS_WINDOW_MS,
+  windowMs: requestedWindowMs,
 } = {}) {
   if (typeof source?.getSnapshot !== 'function')
     throw new TypeError('GNSS integrity layer requires a snapshot source');
+  // A source may set its own evidence window; anything but a positive finite
+  // duration keeps the default.
+  const windowMs =
+    Number.isFinite(requestedWindowMs) && requestedWindowMs > 0
+      ? requestedWindowMs
+      : GNSS_WINDOW_MS;
   let _viewer = null;
   let _primitives = null;
   let _request = null;
@@ -375,7 +381,8 @@ export function createGnssIntegrityLayer({
         chips: [],
         info:
           t(
-            'Regional sample · 250 nm radius · cells from visited views over 30 min',
+            'Regional sample · 250 nm radius · cells from visited views over {minutes} min',
+            { minutes: formatNumber(provenance.window.minutes) },
           ) +
           (_lastError && _retryAt
             ? ` · ${translateFeedError(_lastError)} · ${

src/layers/installations/policy.js

@@ -2,8 +2,6 @@ export const LAYER_ID = 'military-installations';
 
 export const REQUEST_DEBOUNCE_MS = 180;
 
-export const MAX_VIEWPORT_DEGREES = 10;
-
 export const MAX_RENDERED = 700;
 
 export const GOOGLE_MILITARY_PLACE_TYPES = new Set(['military_base']);

src/layers/launches/hover.test.mjs

@@ -0,0 +1,232 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { Event } from 'cesium';
+import { createLaunchHover } from './lifecycle.js';
+
+function fakeTimers() {
+  const timers = new Map();
+  let nextId = 1;
+  const api = {
+    setTimer(fn, ms) {
+      const id = nextId++;
+      timers.set(id, { fn, ms });
+      return id;
+    },
+    clearTimer(id) {
+      timers.delete(id);
+    },
+    pending: () => [...timers.values()],
+    flush() {
+      const due = [...timers.entries()];
+      timers.clear();
+      for (const [, timer] of due) timer.fn();
+    },
+  };
+  return api;
+}
+
+function hoverRig({ overMarker }) {
+  let at = 0,
+    picks = 0,
+    enabled = true,
+    free = true;
+  const timers = fakeTimers();
+  const viewer = {
+    camera: { moveStart: new Event(), moveEnd: new Event() },
+    scene: {
+      canvas: { style: { cursor: '' } },
+      drillPick(position) {
+        picks++;
+        return overMarker(position) ? [{ id: 'launch' }] : [];
+      },
+    },
+  };
+  const hover = createLaunchHover({
+    viewer,
+    enabled: () => enabled,
+    entityLaunchId: (id) => id === 'launch',
+    now: () => at,
+    documentRef: { hidden: false },
+    pointerFree: () => free,
+    setTimer: timers.setTimer,
+    clearTimer: timers.clearTimer,
+  });
+  return {
+    hover,
+    timers,
+    viewer,
+    cursor: () => viewer.scene.canvas.style.cursor,
+    picks: () => picks,
+    setTime: (value) => (at = value),
+    setEnabled: (value) => (enabled = value),
+    setFree: (value) => (free = value),
+  };
+}
+
+const onMarker = (position) => position?.x === 1;
+const marker = () => ({ endPosition: { x: 1, y: 1 } });
+const empty = () => ({ endPosition: { x: 9, y: 9 } });
+
+test('mission hover runs one trailing check for a pointer that stops on empty space', () => {
+  const rig = hoverRig({ overMarker: onMarker });
+  rig.hover.move(marker());
+  assert.equal(rig.cursor(), 'pointer');
+  rig.setTime(50);
+  const movement = empty();
+  rig.hover.move(movement);
+  // Cesium reuses its movement object; the trailing check must use a copy.
+  movement.endPosition.x = 1;
+  assert.equal(rig.picks(), 1);
+  assert.deepEqual(
+    rig.timers.pending().map((timer) => timer.ms),
+    [70],
+  );
+  rig.setTime(80);
+  rig.hover.move(empty());
+  assert.equal(rig.timers.pending().length, 1, 'one trailing check at a time');
+  rig.setTime(120);
+  rig.timers.flush();
+  assert.equal(rig.picks(), 2);
+  assert.equal(rig.cursor(), '');
+  assert.equal(rig.timers.pending().length, 0);
+  rig.hover.destroy();
+});
+
+test('mission hover trailing check sets the cursor for a pointer that stops on a mission', () => {
+  const rig = hoverRig({ overMarker: onMarker });
+  rig.hover.move(empty());
+  assert.equal(rig.cursor(), '');
+  rig.setTime(50);
+  rig.hover.move(marker());
+  rig.setTime(120);
+  rig.timers.flush();
+  assert.equal(rig.picks(), 2);
+  assert.equal(rig.cursor(), 'pointer');
+  rig.hover.destroy();
+  assert.equal(rig.cursor(), '');
+});
+
+test('mission hover trailing check is cancelled by reset, destroy, and camera motion', () => {
+  for (const cancel of [
+    (rig) => rig.hover.reset(),
+    (rig) => rig.hover.destroy(),
+    (rig) => rig.viewer.camera.moveStart.raiseEvent(),
+  ]) {
+    const rig = hoverRig({ overMarker: onMarker });
+    rig.hover.move(empty());
+    rig.setTime(50);
+    rig.hover.move(marker());
+    assert.equal(rig.timers.pending().length, 1);
+    cancel(rig);
+    assert.equal(rig.timers.pending().length, 0);
+    assert.equal(rig.picks(), 1);
+    assert.equal(rig.cursor(), '');
+    rig.hover.destroy();
+  }
+});
+
+test('mission hover trailing check rechecks eligibility before picking', () => {
+  for (const block of [
+    (rig) => rig.setEnabled(false),
+    (rig) => rig.setFree(false),
+  ]) {
+    const rig = hoverRig({ overMarker: onMarker });
+    rig.hover.move(marker());
+    rig.setTime(50);
+    rig.hover.move(marker());
+    block(rig);
+    rig.setTime(120);
+    rig.timers.flush();
+    assert.equal(rig.picks(), 1);
+    assert.equal(rig.cursor(), '');
+    rig.hover.destroy();
+  }
+});
+
+test('mission hover throttles, clears on motion/hidden, and releases listeners', () => {
+  let at = 0,
+    picks = 0,
+    enabled = true;
+  const listeners = new Set();
+  const doc = {
+    hidden: false,
+    addEventListener: (_n, fn) => listeners.add(fn),
+    removeEventListener: (_n, fn) => listeners.delete(fn),
+  };
+  const viewer = {
+    camera: { moveStart: new Event(), moveEnd: new Event() },
+    scene: {
+      canvas: { style: {} },
+      drillPick() {
+        picks++;
+        return [{ id: 'launch' }];
+      },
+    },
+  };
+  const hover = createLaunchHover({
+    viewer,
+    enabled: () => enabled,
+    entityLaunchId: (id) => id === 'launch',
+    now: () => at,
+    documentRef: doc,
+    pointerFree: () => true,
+    ...fakeTimers(),
+  });
+  for (at = 0; at < 120; at++) hover.move({ endPosition: {} });
+  assert.equal(picks, 1);
+  assert.equal(viewer.scene.canvas.style.cursor, 'pointer');
+  hover.move({ endPosition: {} });
+  assert.equal(picks, 2);
+  viewer.camera.moveStart.raiseEvent();
+  at = 500;
+  hover.move({ endPosition: {} });
+  assert.equal(picks, 2);
+  assert.equal(viewer.scene.canvas.style.cursor, '');
+  viewer.camera.moveEnd.raiseEvent();
+  hover.move({ endPosition: {} });
+  assert.equal(picks, 3);
+  doc.hidden = true;
+  for (const fn of listeners) fn();
+  hover.move({ endPosition: {} });
+  assert.equal(picks, 3);
+  assert.equal(viewer.scene.canvas.style.cursor, '');
+  doc.hidden = false;
+  enabled = false;
+  hover.move({ endPosition: {} });
+  assert.equal(picks, 3);
+  hover.destroy();
+  assert.equal(listeners.size, 0);
+  assert.equal(viewer.camera.moveStart.numberOfListeners, 0);
+  assert.equal(viewer.camera.moveEnd.numberOfListeners, 0);
+});
+
+test('mission hover preserves the cursor of a pointer-owning tool', () => {
+  let free = true,
+    picks = 0;
+  const viewer = {
+    camera: { moveStart: new Event(), moveEnd: new Event() },
+    scene: {
+      canvas: { style: { cursor: '' } },
+      drillPick() {
+        picks++;
+        return [{ id: 'launch' }];
+      },
+    },
+  };
+  const hover = createLaunchHover({
+    viewer,
+    enabled: () => true,
+    entityLaunchId: () => true,
+    documentRef: null,
+    pointerFree: () => free,
+  });
+  hover.move({ endPosition: {} });
+  assert.equal(viewer.scene.canvas.style.cursor, 'pointer');
+  free = false;
+  viewer.scene.canvas.style.cursor = 'crosshair';
+  hover.move({ endPosition: {} });
+  viewer.camera.moveStart.raiseEvent();
+  hover.destroy();
+  assert.equal(picks, 1);
+  assert.equal(viewer.scene.canvas.style.cursor, 'crosshair');
+});

src/layers/launches/index.js

@@ -42,7 +42,10 @@ export function createRocketLaunchesLayer({ services, source }) {
     parts.controls.methods,
     parts.lifecycle.methods,
     parts.ingestion.methods,
+    parts.panel.commands,
     {
+      subscribePanel: parts.panel.subscribePanel,
+      subscribeReplayOverlay: parts.overlays.subscribeReplayOverlay,
       satelliteParamsForSpaceMissions:
         parts.policyHelpers.satelliteParamsForSpaceMissions,
       satelliteParamsAfterSpaceMissions:
@@ -69,10 +72,6 @@ export function createRocketLaunchesLayer({ services, source }) {
       missionHoverPreviewRange: parts.panel.missionHoverPreviewRange,
       createMissionRosterPreviewOwnership:
         parts.panel.createMissionRosterPreviewOwnership,
-      bindMissionRosterItemKeyboardPreview:
-        parts.panel.bindMissionRosterItemKeyboardPreview,
-      captureMissionRosterFocus: parts.panel.captureMissionRosterFocus,
-      restoreMissionRosterFocus: parts.panel.restoreMissionRosterFocus,
       resolveMissionRosterPreviewLaunch:
         parts.panel.resolveMissionRosterPreviewLaunch,
       formatMissionEventTime: parts.policyHelpers.formatMissionEventTime,

src/layers/launches/ingestion.test.mjs

@@ -87,6 +87,7 @@ async function fixture({ legacySource = false } = {}) {
       renderMissionRoster: noop,
       renderMissionPanel: noop,
       clearMissionRosterHover: noop,
+      clearMissionPanel: noop,
     },
     replay: { stopMissionReplay: noop },
     selection: {

src/layers/launches/lifecycle.js

@@ -1,6 +1,116 @@
 import * as Cesium from 'cesium';
 import { isPointerFree } from '../../data/inputOwnership.js';
 
+const HOVER_PICK_INTERVAL_MS = 120;
+
+/**
+ * Bound hover picking independently of precise click selection. A move inside
+ * the throttle window is not dropped: its position is kept and one trailing
+ * check runs when the window ends, so a pointer that stops is still resolved.
+ */
+export function createLaunchHover({
+  viewer,
+  enabled,
+  entityLaunchId,
+  now = () => performance.now(),
+  documentRef = globalThis.document,
+  pointerFree = isPointerFree,
+  setTimer = globalThis.setTimeout,
+  clearTimer = globalThis.clearTimeout,
+}) {
+  let moving = false;
+  let lastPick = -Infinity;
+  let ownsCursor = false;
+  let pendingPosition = null;
+  let trailingTimer = null;
+  const clearCursor = () => {
+    if (ownsCursor && viewer.scene.canvas.style.cursor === 'pointer')
+      viewer.scene.canvas.style.cursor = '';
+    ownsCursor = false;
+  };
+  const cancelTrailing = () => {
+    if (trailingTimer !== null) clearTimer(trailingTimer);
+    trailingTimer = null;
+    pendingPosition = null;
+  };
+  const reset = () => {
+    cancelTrailing();
+    clearCursor();
+    lastPick = -Infinity;
+  };
+  const start = () => {
+    moving = true;
+    reset();
+  };
+  const end = () => {
+    moving = false;
+    reset();
+  };
+  const visibility = () => {
+    if (documentRef?.hidden || documentRef?.visibilityState === 'hidden')
+      reset();
+  };
+  const eligible = () =>
+    enabled() &&
+    !moving &&
+    !documentRef?.hidden &&
+    documentRef?.visibilityState !== 'hidden' &&
+    pointerFree();
+  const pick = (position, at) => {
+    lastPick = at;
+    const found = viewer.scene
+      .drillPick(position, 12)
+      .some((picked) => entityLaunchId(picked?.id));
+    if (found) {
+      viewer.scene.canvas.style.cursor = 'pointer';
+      ownsCursor = true;
+    } else clearCursor();
+  };
+  const trailing = () => {
+    trailingTimer = null;
+    const position = pendingPosition;
+    pendingPosition = null;
+    if (!position) return;
+    // Eligibility may have changed while the check waited.
+    if (!eligible()) {
+      reset();
+      return;
+    }
+    pick(position, now());
+  };
+  const removeStart = viewer.camera?.moveStart?.addEventListener(start);
+  const removeEnd = viewer.camera?.moveEnd?.addEventListener(end);
+  documentRef?.addEventListener?.('visibilitychange', visibility);
+  return {
+    move(movement) {
+      if (!eligible()) {
+        reset();
+        return;
+      }
+      const at = now();
+      const wait = HOVER_PICK_INTERVAL_MS - (at - lastPick);
+      if (wait > 0) {
+        // Cesium reuses the movement object, so keep a copy of the position.
+        pendingPosition = Cesium.Cartesian2.clone(
+          movement.endPosition,
+          pendingPosition ?? undefined,
+        );
+        if (trailingTimer === null) trailingTimer = setTimer(trailing, wait);
+        return;
+      }
+      cancelTrailing();
+      pick(movement.endPosition, at);
+    },
+    reset,
+    destroy() {
+      reset();
+      removeStart?.();
+      removeEnd?.();
+      documentRef?.removeEventListener?.('visibilitychange', visibility);
+    },
+  };
+}
+
 export function createLifecycle({
   state: layerState,
   services,
@@ -8,6 +118,7 @@ export function createLifecycle({
   source,
 }) {
   const { holdContinuousRender, releaseContinuousRender } = services.render;
+  let hover = null;
 
   const methods = {
     init(viewer) {
@@ -45,14 +156,15 @@ export function createLifecycle({
       layerState._moveHandler = new Cesium.ScreenSpaceEventHandler(
         viewer.scene.canvas,
       );
-      layerState._moveHandler.setInputAction((movement) => {
-        if (!layerState._enabled || !layerState._dataSource?.show) return;
-        const missionEntity = viewer.scene
-          .drillPick(movement.endPosition, 12)
-          .map((picked) => picked?.id)
-          .find((candidate) => parts.selection.entityLaunchId(candidate));
-        viewer.scene.canvas.style.cursor = missionEntity ? 'pointer' : '';
-      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+      hover = createLaunchHover({
+        viewer,
+        enabled: () => layerState._enabled && layerState._dataSource?.show,
+        entityLaunchId: parts.selection.entityLaunchId,
+      });
+      layerState._moveHandler.setInputAction(
+        hover.move,
+        Cesium.ScreenSpaceEventType.MOUSE_MOVE,
+      );
       // Apply horizon visibility before Cesium traverses and picks the scene.
       // A postRender write is one frame late and can remain visibly stale when
       // request-on-demand rendering stops after a globe camera move.
@@ -89,7 +201,6 @@ export function createLifecycle({
       if (layerState._dataSource) layerState._dataSource.show = true;
       parts.orbitRendering.syncMissionOrbitPrimitiveVisibility();
       parts.selection.focusFullGlobe(layerState._viewer);
-      document.getElementById('cockpit-context')?.setAttribute('hidden', '');
       if (layerState._selectedLaunchId)
         parts.selection.setSelectedMission(
           layerState._selectedLaunchId,
@@ -100,6 +211,7 @@ export function createLifecycle({
     },
 
     async disable() {
+      hover?.reset();
       layerState._sourceController.abort();
       layerState._enabled = false;
       releaseContinuousRender('rocket-launches');
@@ -122,6 +234,8 @@ export function createLifecycle({
     },
 
     async destroy(viewer) {
+      hover?.destroy();
+      hover = null;
       layerState._sourceController.abort();
       releaseContinuousRender('rocket-launches'); // direct-destroy path (perf wave 2 fix)
       layerState._enabled = false;
@@ -147,13 +261,7 @@ export function createLifecycle({
       layerState._animationStarts.clear();
       layerState._satelliteTelemetry.clear();
       layerState._replayTracks.clear();
-      layerState._missionPanel?.remove();
-      layerState._missionPanel = null;
-      if (layerState._missionRoster) {
-        layerState._missionRoster.onclick = null;
-      }
-      layerState._missionRosterPreviewOwnership = null;
-      layerState._missionRoster = null;
+      parts.panel.clearMissionPanel();
       layerState._viewer = null;
       if (layerState._dataSource)
         viewer.dataSources.remove(layerState._dataSource, true);

src/layers/launches/missionStatus.i18n.test.mjs

@@ -13,20 +13,7 @@ import { createPanel } from './panel.js';
 const NOW = new Date('2026-07-27T00:00:00Z');
 
 function shownStatus(status) {
-  const outputs = new Map();
   const state = {
-    _missionPanel: {
-      querySelector(selector) {
-        if (!outputs.has(selector))
-          outputs.set(selector, {
-            textContent: '',
-            closest: () => null,
-            removeAttribute() {},
-          });
-        return outputs.get(selector);
-      },
-      closest: () => null,
-    },
     _selectedLaunchId: 'mission-1',
     _launches: [
       {
@@ -39,15 +26,14 @@ function shownStatus(status) {
     ],
     _replayTracks: new Map(),
   };
-  createPanel({
+  return createPanel({
     state,
     parts: {
       overlays: { shortMissionLabel: (name) => name },
       policyHelpers: { missionPathPresentation: () => ({}) },
-      replay: { syncReplayButton() {} },
+      replay: { presentReplay: () => ({}) },
     },
-  }).renderMissionPanel();
-  return outputs.get('[data-mission-status]').textContent;
+  }).presentMission().status;
 }
 
 test('a launch without a status keeps the English fallback in its record', () => {

src/layers/launches/overlays.js

@@ -280,60 +280,64 @@ export function createOverlays({ state: layerState, services, parts, source }) {
     return ascending ? 'ascent' : 'orbit';
   }
 
-  function createReplayVehicleOverlay() {
-    if (layerState._replayVehicleOverlay || typeof document === 'undefined')
+  /**
+   * Present the replay vehicle overlay to its subscribers, or null to remove
+   * it. An unchanged presentation is not sent again.
+   */
+  function presentReplayVehicleOverlay(patch) {
+    const current = layerState._replayVehicleOverlay;
+    const next = patch && { ...current, ...patch };
+    if (
+      next === current ||
+      (next &&
+        current &&
+        Object.keys(next).every((k) => next[k] === current[k]))
+    )
       return;
-    const host = document.getElementById('cesiumContainer') || document.body;
-    layerState._replayVehicleOverlay = document.createElement('div');
-    layerState._replayVehicleOverlay.className =
-      'mission-replay-vehicle-overlay';
-    layerState._replayVehicleOverlay.hidden = true;
-    layerState._replayVehicleOverlay.setAttribute('aria-hidden', 'true');
-    layerState._replayVehicleOverlay.innerHTML = `
-    <div class="mission-replay-flight-symbol">
-      <svg class="mission-replay-rocket" viewBox="0 0 48 72" aria-hidden="true">
-        <path class="mission-replay-rocket-body" d="M24 5C16 14 14 27 15 45L9 54L18 51L24 58L30 51L39 54L33 45C34 27 32 14 24 5Z"></path>
-        <circle class="mission-replay-rocket-port" cx="24" cy="29" r="3.4"></circle>
-      </svg>
-      <svg class="mission-replay-thrust" viewBox="0 0 72 72" aria-hidden="true">
-        <ellipse style="--thrust-index:0" cx="36" cy="7" rx="5" ry="1.8"></ellipse>
-        <ellipse style="--thrust-index:1" cx="36" cy="15" rx="8" ry="2.4"></ellipse>
-        <ellipse style="--thrust-index:2" cx="36" cy="24" rx="11" ry="3"></ellipse>
-        <ellipse style="--thrust-index:3" cx="36" cy="35" rx="15" ry="3.8"></ellipse>
-        <ellipse style="--thrust-index:4" cx="36" cy="48" rx="20" ry="4.7"></ellipse>
-        <ellipse style="--thrust-index:5" cx="36" cy="63" rx="26" ry="5.8"></ellipse>
-      </svg>
-    </div>
-    <div class="mission-replay-orbit-dot" aria-hidden="true"></div>
-    <div class="mission-replay-overlay-callout">
-      <strong data-replay-overlay-title></strong>
-      <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',
-      );
+    layerState._replayVehicleOverlay = next;
+    for (const listener of [...layerState._replayVehicleOverlayListeners])
+      listener(next);
+  }
+
+  /**
+   * Receive every presentation of the replay vehicle overlay, starting with
+   * the current one.
+   * @param {(view: ?object) => void} listener
+   * @returns {() => void} Unsubscribe.
+   */
+  function subscribeReplayOverlay(listener) {
+    layerState._replayVehicleOverlayListeners.add(listener);
+    listener(layerState._replayVehicleOverlay);
+    return () => layerState._replayVehicleOverlayListeners.delete(listener);
+  }
+
+  function createReplayVehicleOverlay() {
+    if (layerState._replayVehicleOverlay) return;
+    presentReplayVehicleOverlay({
+      visible: false,
+      mode: null,
+      thrusting: false,
+      paused: false,
+      transform: null,
+      rotation: null,
+      iconOpacity: null,
+      labelOpacity: null,
+      title: '',
+      detail: '',
+    });
   }
 
   function hideReplayVehicleOverlay() {
     if (!layerState._replayVehicleOverlay) return;
-    layerState._replayVehicleOverlay.hidden = true;
-    layerState._replayVehicleOverlay.classList.remove(
-      'is-thrusting',
-      'is-paused',
-    );
+    presentReplayVehicleOverlay({
+      visible: false,
+      thrusting: false,
+      paused: false,
+    });
   }
 
   function destroyReplayVehicleOverlay() {
-    layerState._replayVehicleOverlay?.remove();
-    layerState._replayVehicleOverlay = null;
-    layerState._replayVehicleOverlayText = '';
+    presentReplayVehicleOverlay(null);
   }
 
   function clearMissionOverlaySources() {
@@ -523,23 +527,15 @@ export function createOverlays({ state: layerState, services, parts, source }) {
       : 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(
-      'is-thrusting',
-      replayActive && state.ascending && !state.countdownActive,
-    );
-    layerState._replayVehicleOverlay.classList.toggle(
-      'is-paused',
-      replayActive && layerState._replayPaused,
-    );
-    layerState._replayVehicleOverlay.style.transform = `translate3d(${renderedWindowPosition.x}px, ${renderedWindowPosition.y}px, 0) translate(-50%, -50%)`;
+    const frame = {
+      visible: true,
+      mode,
+      thrusting: replayActive && state.ascending && !state.countdownActive,
+      paused: replayActive && layerState._replayPaused,
+      transform: `translate3d(${renderedWindowPosition.x}px, ${renderedWindowPosition.y}px, 0) translate(-50%, -50%)`,
+      iconOpacity: String(factor),
+      labelOpacity: String(sonar ? sonar.label(factor) : 1),
+    };
     let vehicleRotation = 0;
     if (replayActive && !state.countdownActive) {
       const tangentStep = Math.max(0.002, 0.8 / Math.max(2, path.length - 1));
@@ -581,10 +577,7 @@ export function createOverlays({ state: layerState, services, parts, source }) {
         }
       }
     }
-    layerState._replayVehicleOverlay.style.setProperty(
-      '--mission-replay-rotation',
-      `${Cesium.Math.toDegrees(vehicleRotation)}deg`,
-    );
+    frame.rotation = `${Cesium.Math.toDegrees(vehicleRotation)}deg`;
 
     const mission = shortMissionLabel(launch.name, 22).toUpperCase();
     const siteName = compactLaunchSiteName(launch.launchSite);
@@ -620,16 +613,7 @@ export function createOverlays({ state: layerState, services, parts, source }) {
       detail = parts.policyHelpers.formatMissionEventTime(state.eventTime);
     }
     if (layerState._replayPaused) title = t('PAUSED · {title}', { title });
-    const nextText = `${title}\n${detail}`;
-    if (nextText !== layerState._replayVehicleOverlayText) {
-      layerState._replayVehicleOverlayText = nextText;
-      layerState._replayVehicleOverlay.querySelector(
-        '[data-replay-overlay-title]',
-      ).textContent = title;
-      layerState._replayVehicleOverlay.querySelector(
-        '[data-replay-overlay-detail]',
-      ).textContent = detail;
-    }
+    presentReplayVehicleOverlay({ ...frame, title, detail });
     return mode;
   }
   return {
@@ -643,6 +627,7 @@ export function createOverlays({ state: layerState, services, parts, source }) {
     missionHoverReticleImage,
     replayOverlayMode,
     createReplayVehicleOverlay,
+    subscribeReplayOverlay,
     hideReplayVehicleOverlay,
     destroyReplayVehicleOverlay,
     clearMissionOverlaySources,

src/layers/launches/panel.js

@@ -1,11 +1,20 @@
 import * as Cesium from 'cesium';
-import { t } from '../../i18n/index.js';
+import { formatNumber, isolate, onLocaleChange, t } from '../../i18n/index.js';
 import {
   MISSION_CLOSE_VIEW_RANGE_M,
   MISSION_GLOBE_VIEW_RANGE_M,
 } from './policy.js';
 import { UNKNOWN_LAUNCH_STATUS } from './model.js';
 
+// Landing endpoints carry an English accuracy code (the panel and the map
+// entity compare it); only the text shown in the stage table is translated.
+// The downrange estimate arrives already translated.
+function accuracyLabel(accuracy) {
+  if (accuracy === 'CONFIRMED') return t('CONFIRMED');
+  if (accuracy === 'PAD / RTLS') return t('PAD / RTLS');
+  return accuracy;
+}
+
 export function createPanel({ state: layerState, services, parts, source }) {
   /**
    * Preserve the user's globe scale for roster previews while avoiding an
@@ -88,68 +97,6 @@ export function createPanel({ state: layerState, services, parts, source }) {
     };
   }
 
-  /**
-   * Bind native keyboard focus events for one rendered roster row.
-   * @param {Element} button Mission roster button.
-   * @param {number} index Source-array mission index.
-   * @param {{pointerEnter: (index: number) => void, pointerLeave: () => void,
-   *   focus: (index: number) => void, blur: (nextIndex?: number|null) => void}} ownership
-   * @param {Element} roster Roster root used to reject focus targets outside the list.
-   */
-
-  function bindMissionRosterItemKeyboardPreview(
-    button,
-    index,
-    ownership,
-    roster,
-  ) {
-    button.addEventListener('mouseenter', () => ownership.pointerEnter(index));
-    button.addEventListener('mouseleave', () => ownership.pointerLeave());
-    button.addEventListener('focus', () => ownership.focus(index));
-    button.addEventListener('blur', (event) => {
-      const nextButton = event.relatedTarget?.closest?.(
-        '[data-mission-roster-index]',
-      );
-      const nextIndex =
-        nextButton && roster.contains(nextButton)
-          ? Number(nextButton.dataset.missionRosterIndex)
-          : null;
-      ownership.blur(nextIndex);
-    });
-  }
-
-  /** Capture the exact mission identity owned by keyboard focus before a refresh. */
-
-  function captureMissionRosterFocus(
-    list,
-    activeElement = globalThis.document?.activeElement,
-  ) {
-    const button = activeElement?.closest?.('[data-mission-roster-id]');
-    if (!button || !list?.contains(button)) return null;
-    const launchId = button.dataset.missionRosterId;
-    return launchId ? { launchId } : null;
-  }
-
-  /** Restore focus by mission identity, or continue after the list if it departed. */
-
-  function restoreMissionRosterFocus(list, snapshot, continuation) {
-    if (!snapshot?.launchId) return 'none';
-    const button = Array.from(
-      list?.querySelectorAll?.('[data-mission-roster-id]') || [],
-    ).find(
-      (candidate) => candidate.dataset.missionRosterId === snapshot.launchId,
-    );
-    if (button) {
-      button.focus({ preventScroll: true });
-      return 'restored';
-    }
-    if (continuation?.focus) {
-      continuation.focus({ preventScroll: true });
-      return 'continued';
-    }
-    return 'none';
-  }
-
   /** Resolve a pending preview against the current refresh, never a stale object. */
 
   function resolveMissionRosterPreviewLaunch(launches, launchId) {
@@ -158,213 +105,213 @@ export function createPanel({ state: layerState, services, parts, source }) {
     );
   }
 
-  function missionTableRows(items, columns, emptyText) {
-    if (!items.length)
-      return `<tr><td colspan="${columns}" class="mission-table-empty">${emptyText}</td></tr>`;
-    return items.map((item) => item).join('');
+  /**
+   * Publish a fresh view unless it is the one already shown. The roster
+   * carries its own signature, so a telemetry update compares the mission.
+   */
+  function publish(view) {
+    const signature = `${layerState._missionRosterSignature}|${JSON.stringify(view.mission)}`;
+    if (layerState._missionPanelSignature === signature) return;
+    layerState._missionPanelSignature = signature;
+    layerState._missionPanelView = view;
+    for (const listener of [...layerState._missionPanelListeners])
+      listener(view);
   }
 
-  function setMissionPanelField(selector, value, title = '') {
-    const output = layerState._missionPanel?.querySelector(selector);
-    if (!output) return;
-    const row = output.closest('[data-mission-field]');
-    const available =
-      value !== null && value !== undefined && String(value).trim() !== '';
-    if (row) row.hidden = !available;
-    if (!available) {
-      output.textContent = '';
-      output.removeAttribute('title');
-      return;
-    }
-    output.textContent = value;
-    if (title) output.title = title;
-    else output.removeAttribute('title');
+  /**
+   * Receive every published view, starting with the current one.
+   * @param {(view: {roster: ?object, mission: ?object}) => void} listener
+   * @returns {() => void} Unsubscribe.
+   */
+  function subscribePanel(listener) {
+    layerState._missionPanelListeners.add(listener);
+    if (layerState._missionPanelView) listener(layerState._missionPanelView);
+    return () => layerState._missionPanelListeners.delete(listener);
   }
 
-  function renderMissionPanel() {
-    if (!layerState._missionPanel) return;
+  /** Publish the roster and the selected mission as they stand. */
+  function publishPanel() {
+    if (!layerState._missionPanelReady) return;
+    publish({
+      roster: layerState._missionRosterView,
+      mission: presentMission(),
+    });
+  }
+
+  /** A detail value, or null when the panel hides its row. */
+  function presentField(value) {
+    return value !== null && value !== undefined && String(value).trim() !== ''
+      ? String(value)
+      : null;
+  }
+
+  function presentPayload(payload, launch) {
+    const detail = [
+      payload.manufacturer,
+      payload.operator && payload.operator !== payload.manufacturer
+        ? payload.operator
+        : null,
+      Number.isFinite(payload.massKg)
+        ? `${formatNumber(payload.massKg)} KG`
+        : null,
+    ]
+      .filter(Boolean)
+      .join(' · ');
+    return {
+      name: `${payload.name ?? ''}${payload.amount > 1 ? ` ×${payload.amount}` : ''}`,
+      detail,
+      type: payload.type || t('UNSPECIFIED'),
+      destination:
+        payload.destination || launch.orbit?.name || t('UNAVAILABLE'),
+    };
+  }
+
+  function presentStage(stage, launch) {
+    const endpoint = stage.endpoint;
+    const destination =
+      stage.destination ||
+      (endpoint?.accuracy === 'PAD / RTLS'
+        ? launch.launchSite
+        : t('UNAVAILABLE'));
+    const position = endpoint
+      ? `${isolate(`${endpoint.lat.toFixed(2)}, ${endpoint.lon.toFixed(2)}`)} · ${accuracyLabel(endpoint.accuracy)}`
+      : stage.downrangeKm > 0
+        ? t('{value} KM DOWNRANGE', {
+            value: formatNumber(stage.downrangeKm),
+          })
+        : t('POSITION UNAVAILABLE');
+    const detail = [
+      Number.isFinite(stage.flightNumber)
+        ? t('FLIGHT {count}', {
+            count: stage.flightNumber,
+          })
+        : null,
+      stage.reused ? t('REUSED') : null,
+      stage.recoveryType,
+    ]
+      .filter(Boolean)
+      .join(' · ');
+    return {
+      name: String(stage.name ?? ''),
+      detail,
+      status: String(stage.status ?? ''),
+      destination: String(destination ?? ''),
+      position,
+    };
+  }
+
+  /**
+   * The selected mission as the panel shows it, or null when none is
+   * selected and the panel hides. Text arrives in the UI language.
+   */
+  function presentMission() {
     const launch = layerState._launches.find(
       (item) => item.id === layerState._selectedLaunchId,
     );
-    const index = launch ? layerState._launches.indexOf(launch) : -1;
-    layerState._missionPanel.hidden = !launch;
-    if (!launch) return;
-    layerState._missionPanel.querySelector('[data-mission-title]').textContent =
-      parts.overlays.shortMissionLabel(launch.name, 32).toUpperCase();
-    setMissionPanelField('[data-mission-provider]', launch.provider);
-    // Launch Library status names are provider data, shown as sent; only the
-    // fallback for a launch without one is ours to translate.
-    setMissionPanelField(
-      '[data-mission-status]',
-      launch.status === UNKNOWN_LAUNCH_STATUS
-        ? t(UNKNOWN_LAUNCH_STATUS)
-        : launch.status,
-    );
-    setMissionPanelField(
-      '[data-mission-site]',
-      launch.launchSite && launch.launchSite !== 'Unknown launch site'
-        ? launch.launchSite
-        : null,
-    );
-    setMissionPanelField('[data-mission-time]', launch.launchTime);
+    if (!launch) return null;
+    const index = layerState._launches.indexOf(launch);
     const pathPresentation = parts.policyHelpers.missionPathPresentation(
       launch,
       layerState._replayTracks.has(launch.id),
     );
-    setMissionPanelField('[data-mission-orbit]', pathPresentation.orbit);
-    layerState._missionPanel.querySelector(
-      '[data-mission-ascent-source]',
-    ).textContent = pathPresentation.ascent;
-    const payloadRows = launch.payloads.length
-      ? launch.payloads.slice(0, 5).map((payload) => {
-          const detail = [
-            payload.manufacturer,
-            payload.operator && payload.operator !== payload.manufacturer
-              ? payload.operator
-              : null,
-            Number.isFinite(payload.massKg)
-              ? `${payload.massKg.toLocaleString()} KG`
-              : null,
-          ]
-            .filter(Boolean)
-            .join(' · ');
-          return `<tr><td>${escapeMissionText(payload.name)}${payload.amount > 1 ? ` ×${payload.amount}` : ''}${detail ? `<small>${escapeMissionText(detail)}</small>` : ''}</td><td>${escapeMissionText(payload.type || t('UNSPECIFIED'))}</td><td>${escapeMissionText(payload.destination || launch.orbit?.name || t('UNAVAILABLE'))}</td></tr>`;
-        })
-      : [];
-    if (launch.payloads.length > 5) {
-      payloadRows.push(
-        `<tr><td colspan="3" class="mission-table-empty">${t('+{count} additional payload records', { count: launch.payloads.length - 5 })}</td></tr>`,
-      );
-    }
-    layerState._missionPanel.querySelector(
-      '[data-mission-payloads]',
-    ).innerHTML = missionTableRows(
-      payloadRows,
-      3,
-      t('PAYLOAD DATA UNAVAILABLE'),
-    );
-    const stageRows = launch.recoveryStages.map((stage) => {
-      const endpoint = stage.endpoint;
-      const destination =
-        stage.destination ||
-        (endpoint?.accuracy === 'PAD / RTLS'
+    const telemetry = layerState._missionTelemetry;
+    return {
+      scrollRequest: layerState._missionPanelScrollRequest,
+      title: parts.overlays.shortMissionLabel(launch.name, 32).toUpperCase(),
+      provider: presentField(launch.provider),
+      // Launch Library status names are provider data, shown as sent; only
+      // the fallback for a launch without one is ours to translate.
+      status: presentField(
+        launch.status === UNKNOWN_LAUNCH_STATUS
+          ? t(UNKNOWN_LAUNCH_STATUS)
+          : launch.status,
+      ),
+      site: presentField(
+        launch.launchSite && launch.launchSite !== 'Unknown launch site'
           ? launch.launchSite
-          : t('UNAVAILABLE'));
-      const position = endpoint
-        ? `${endpoint.lat.toFixed(2)}, ${endpoint.lon.toFixed(2)} · ${endpoint.accuracy}`
-        : stage.downrangeKm > 0
-          ? t('{value} KM DOWNRANGE', {
-              value: stage.downrangeKm.toLocaleString(),
-            })
-          : t('POSITION UNAVAILABLE');
-      const stageDetail = [
-        Number.isFinite(stage.flightNumber)
-          ? t('FLIGHT {count}', {
-              count: stage.flightNumber,
+          : null,
+      ),
+      time: presentField(launch.launchTime),
+      orbit: presentField(pathPresentation.orbit),
+      ascent: pathPresentation.ascent ?? '',
+      distance: telemetry?.distance ?? null,
+      speed: telemetry?.speed ?? null,
+      speedTitle: telemetry?.speedTitle ?? null,
+      payloads: launch.payloads
+        .slice(0, 5)
+        .map((payload) => presentPayload(payload, launch)),
+      payloadsMore:
+        launch.payloads.length > 5
+          ? t('+{count} additional payload records', {
+              count: launch.payloads.length - 5,
             })
           : null,
-        stage.reused ? t('REUSED') : null,
-        stage.recoveryType,
-      ]
-        .filter(Boolean)
-        .join(' · ');
-      return `<tr><td>${escapeMissionText(stage.name)}${stageDetail ? `<small>${escapeMissionText(stageDetail)}</small>` : ''}</td><td>${escapeMissionText(stage.status)}</td><td>${escapeMissionText(destination)}<small>${escapeMissionText(position)}</small></td></tr>`;
-    });
-    layerState._missionPanel.querySelector('[data-mission-stages]').innerHTML =
-      missionTableRows(stageRows, 3, t('NO STAGE RE-ENTRY / RECOVERY DATA'));
-    const stageSection = layerState._missionPanel.querySelector(
-      '[data-mission-stages-section]',
-    );
-    if (stageSection) stageSection.hidden = stageRows.length === 0;
-    updateMissionTelemetry(true);
-    layerState._missionPanel.querySelector('[data-mission-index]').textContent =
-      `${index + 1} / ${layerState._launches.length}`;
-    layerState._missionPanel.querySelector('[data-mission-prev]').disabled =
-      index <= 0;
-    layerState._missionPanel.querySelector('[data-mission-next]').disabled =
-      index < 0 || index >= layerState._launches.length - 1;
-    parts.replay.syncReplayButton();
-    const panelScroller = layerState._missionPanel.closest(
-      ":root[data-ui-theme='cyber'] .cyber-panel-body, .global-context-panel-inner",
-    );
-    if (panelScroller) panelScroller.scrollTop = 0;
+      stages: launch.recoveryStages.map((stage) => presentStage(stage, launch)),
+      index: `${index + 1} / ${layerState._launches.length}`,
+      previousDisabled: index <= 0,
+      nextDisabled: index < 0 || index >= layerState._launches.length - 1,
+      replay: parts.replay.presentReplay(),
+    };
   }
 
-  function renderMissionRoster() {
-    if (!layerState._missionRoster) return;
-    const list = layerState._missionRoster.querySelector(
-      '[data-mission-roster-list]',
-    );
-    const count = layerState._missionRoster.querySelector(
-      '[data-mission-roster-count]',
-    );
-    if (count)
-      count.textContent = t('{count} / 30D', {
-        count: layerState._launches.length,
-      });
-    if (!list) return;
-    const focusSnapshot = captureMissionRosterFocus(list);
-    layerState._missionRosterPreviewOwnership?.reset();
-    const entries = parts.policyHelpers.missionRosterEntries(
-      layerState._launches,
-    );
-    if (!entries.length) {
-      list.innerHTML = `<div class="space-mission-roster-empty">${t('NO MISSIONS AVAILABLE IN THE CURRENT 30-DAY WINDOW')}</div>`;
-      restoreMissionRosterFocus(
-        list,
-        focusSnapshot,
-        layerState._missionRoster.querySelector(
-          '[data-mission-roster-focus-continuation]',
-        ),
-      );
-      return;
-    }
-    list.innerHTML = entries
+  /** Present the newly selected mission and return its panel to the top. */
+  function renderMissionPanel() {
+    if (!layerState._missionPanelReady) return;
+    layerState._missionTelemetry = null;
+    updateMissionTelemetry(true, false);
+    layerState._missionPanelScrollRequest++;
+    publishPanel();
+  }
+
+  /** The roster entries as the list shows them. */
+  function presentRoster() {
+    const entries = parts.policyHelpers
+      .missionRosterEntries(layerState._launches)
       .map(({ launch, index }) => {
-        const color = parts.model.missionMarkerColor(launch).toCssColorString();
-        const date = launch.launchTime?.slice(0, 10) || t('DATE UNAVAILABLE');
-        const provider = launch.provider || t('UNSPECIFIED OPERATOR');
         const label = parts.overlays
           .shortMissionLabel(launch.name, 27)
           .toUpperCase();
-        return `<button type="button" class="space-mission-roster-item" data-mission-roster-index="${index}" data-mission-roster-id="${escapeMissionText(launch.id)}" aria-label="${escapeMissionText(t('Select {mission}', { mission: label }))}"><span class="space-mission-roster-marker" style="--mission-roster-color:${color}" aria-hidden="true"></span><span class="space-mission-roster-copy"><strong>${escapeMissionText(label)}</strong><small>${escapeMissionText(provider)} · ${escapeMissionText(date)}</small></span><span class="space-mission-roster-chevron" aria-hidden="true">›</span></button>`;
-      })
-      .join('');
-    list.querySelectorAll('[data-mission-roster-index]').forEach((button) => {
-      const index = Number(button.dataset.missionRosterIndex);
-      bindMissionRosterItemKeyboardPreview(
-        button,
-        index,
-        layerState._missionRosterPreviewOwnership,
-        layerState._missionRoster,
-      );
-    });
-    restoreMissionRosterFocus(
-      list,
-      focusSnapshot,
-      layerState._missionRoster.querySelector(
-        '[data-mission-roster-focus-continuation]',
-      ),
-    );
+        return {
+          index,
+          id: String(launch.id ?? ''),
+          color: parts.model.missionMarkerColor(launch).toCssColorString(),
+          label,
+          ariaLabel: t('Select {mission}', { mission: label }),
+          provider: launch.provider || t('UNSPECIFIED OPERATOR'),
+          date: launch.launchTime?.slice(0, 10) || t('DATE UNAVAILABLE'),
+        };
+      });
+    return {
+      count: t('{count} / 30D', { count: layerState._launches.length }),
+      entries,
+      empty: t('NO MISSIONS AVAILABLE IN THE CURRENT 30-DAY WINDOW'),
+    };
   }
 
-  function escapeMissionText(value) {
-    return String(value ?? '').replace(
-      /[&<>"']/g,
-      (character) =>
-        ({
-          '&': '&amp;',
-          '<': '&lt;',
-          '>': '&gt;',
-          '"': '&quot;',
-          "'": '&#39;',
-        })[character],
-    );
+  /**
+   * Present the roster. A changed roster drops the hover and keyboard
+   * preview; the list restores keyboard focus by mission identity, which
+   * resumes the preview.
+   */
+  function renderMissionRoster() {
+    if (!layerState._missionPanelReady) return;
+    const roster = presentRoster();
+    const signature = JSON.stringify(roster);
+    if (signature !== layerState._missionRosterSignature) {
+      layerState._missionRosterSignature = signature;
+      layerState._missionRosterView = roster;
+      layerState._missionRosterPreviewOwnership?.reset();
+    }
+    publishPanel();
   }
 
-  function updateMissionTelemetry(force = false) {
+  /**
+   * Read the selected mission's altitude and speed, at most four times a
+   * second unless forced, and republish when they change.
+   */
+  function updateMissionTelemetry(force = false, republish = true) {
     if (
-      !layerState._missionPanel ||
+      !layerState._missionPanelReady ||
       !layerState._selectedLaunchId ||
       !layerState._dataSource
     )
@@ -381,33 +328,30 @@ export function createPanel({ state: layerState, services, parts, source }) {
     const altitudeM = position
       ? Cesium.Cartographic.fromCartesian(position)?.height
       : null;
-    setMissionPanelField(
-      '[data-mission-distance]',
-      Number.isFinite(altitudeM)
+    const speedMps = layerState._satelliteTelemetry.get(
+      layerState._selectedLaunchId,
+    )?.speedMps;
+    layerState._missionTelemetry = {
+      distance: Number.isFinite(altitudeM)
         ? t('{value} KM', {
-            value: Math.max(0, altitudeM / 1000).toLocaleString(undefined, {
+            value: formatNumber(Math.max(0, altitudeM / 1000), {
               maximumFractionDigits: 0,
             }),
           })
         : null,
-    );
-    const speedMps = layerState._satelliteTelemetry.get(
-      layerState._selectedLaunchId,
-    )?.speedMps;
-    setMissionPanelField(
-      '[data-mission-speed]',
-      Number.isFinite(speedMps)
+      speed: Number.isFinite(speedMps)
         ? t('{value} KM/S', {
-            value: (speedMps / 1000).toLocaleString(undefined, {
+            value: formatNumber(speedMps / 1000, {
               minimumFractionDigits: 2,
               maximumFractionDigits: 2,
             }),
           })
         : null,
-      Number.isFinite(speedMps)
-        ? `${(speedMps * 3.6).toLocaleString(undefined, { maximumFractionDigits: 0 })} km/h`
-        : '',
-    );
+      speedTitle: Number.isFinite(speedMps)
+        ? `${formatNumber(speedMps * 3.6, { maximumFractionDigits: 0 })} km/h`
+        : null,
+    };
+    if (republish) publishPanel();
   }
 
   function selectMissionAt(index) {
@@ -451,121 +395,94 @@ export function createPanel({ state: layerState, services, parts, source }) {
     }, 140);
   }
 
-  function createMissionPanel() {
-    if (layerState._missionPanel || typeof document === 'undefined') return;
-    const host =
-      document.getElementById('space-mission-panel-host') ||
-      document.getElementById('right-context-rail');
-    if (!host) return;
-    layerState._missionRoster = document.getElementById('space-mission-roster');
-    if (layerState._missionRoster) {
-      layerState._missionRosterPreviewOwnership =
-        createMissionRosterPreviewOwnership({
-          preview: scheduleMissionRosterPreview,
-          clear: clearMissionRosterPreviewState,
-        });
-      layerState._missionRoster.onclick = (event) => {
-        const button =
-          event.target instanceof Element
-            ? event.target.closest('[data-mission-roster-index]')
-            : null;
-        if (!button) return;
-        selectMissionAt(Number(button.dataset.missionRosterIndex));
-      };
-    }
-    layerState._missionPanel = document.createElement('aside');
-    layerState._missionPanel.id = 'space-mission-panel';
-    layerState._missionPanel.className = 'context-space-mission-detail';
-    layerState._missionPanel.setAttribute(
-      'aria-label',
-      t('Selected Space Mission'),
+  /** Select the mission before or after the selected one. */
+  function selectAdjacentMission(step) {
+    selectMissionAt(
+      layerState._launches.findIndex(
+        (item) => item.id === layerState._selectedLaunchId,
+      ) + step,
     );
-    layerState._missionPanel.innerHTML = `<div class="space-mission-view-header"><span>${t('SELECTED SPACE MISSION')}</span><button type="button" data-mission-close title="${t('Show all missions')}" aria-label="${t('Deselect mission')}">×</button></div><div class="space-mission-detail"><strong data-mission-title>${t('MISSION')}</strong><span data-mission-field data-mission-provider></span><span data-mission-field>${t('STATUS · ')}<b data-mission-status></b></span><span data-mission-field>${t('LAUNCH SITE · ')}<b data-mission-site></b></span><span data-mission-field>${t('LAUNCH TIME · ')}<b data-mission-time></b></span><span data-mission-field>${t('ORBIT · ')}<b data-mission-orbit></b></span><span>${t('ASCENT PATH · ')}<b data-mission-ascent-source></b></span><span data-mission-field>${t('CURRENT DISTANCE FROM EARTH · ')}<b data-mission-distance></b></span><span data-mission-field>${t('SATELLITE SPEED · ')}<b data-mission-speed></b></span></div><section class="mission-data-section"><h4>${t('PAYLOAD')}</h4><div class="mission-table-scroll"><table class="mission-data-table"><thead><tr><th>${t('NAME')}</th><th>${t('TYPE')}</th><th>${t('DESTINATION')}</th></tr></thead><tbody data-mission-payloads></tbody></table></div></section><section class="mission-data-section" data-mission-stages-section><h4>${t('STAGE / RE-ENTRY / RECOVERY')}</h4><div class="mission-table-scroll"><table class="mission-data-table"><thead><tr><th>${t('STAGE')}</th><th>${t('STATUS')}</th><th>${t('FINAL POSITION')}</th></tr></thead><tbody data-mission-stages></tbody></table></div></section><div class="mission-replay-speed-control"><div class="mission-replay-speed-header"><label for="space-mission-replay-speed">${t('REPLAY SPEED')}</label><output class="gev-slider-value" for="space-mission-replay-speed" data-mission-replay-speed-output>1×</output></div><input id="space-mission-replay-speed" class="gev-quantitative-slider" type="range" min="0.25" max="4" step="0.25" value="1" data-mission-replay-speed aria-label="${t('Replay speed multiplier')}"><div class="mission-replay-speed-scale" aria-hidden="true"><span>0.25×</span><span>1×</span><span>4×</span></div></div><div class="mission-action-row"><button type="button" class="mission-focus-button" data-mission-focus>${t('FOCUS')}</button><button type="button" class="mission-replay-button" data-mission-replay aria-pressed="false">${t('REPLAY ASCENT')}</button></div><div class="space-mission-nav"><button type="button" class="mission-nav-button" data-mission-prev title="${t('Previous mission')}"><span aria-hidden="true">‹</span> ${t('PREV')}</button><span class="mission-nav-index" data-mission-index>—</span><button type="button" class="mission-nav-button" data-mission-next title="${t('Next mission')}">${t('NEXT')} <span aria-hidden="true">›</span></button></div><button type="button" class="panel-layer-toggle" data-mission-show-all>${t('SHOW ALL / DESELECT')}</button>`;
-    layerState._missionPanel
-      .querySelector('.mission-action-row')
-      .insertAdjacentHTML(
-        'beforeend',
-        `<div class="mission-replay-transport" data-mission-replay-transport hidden>
-      <button type="button" data-mission-replay-toggle title="${t('Pause replay')}" aria-label="${t('Pause replay')}">Ⅱ</button>
-      <button type="button" class="cancel" data-mission-replay-cancel title="${t('Cancel replay')}" aria-label="${t('Cancel replay')}"><span aria-hidden="true">×</span></button>
-    </div>`,
-      );
-    host.appendChild(layerState._missionPanel);
-    layerState._missionPanel
-      .querySelector('[data-mission-prev]')
-      .addEventListener('click', () =>
-        selectMissionAt(
-          layerState._launches.findIndex(
-            (item) => item.id === layerState._selectedLaunchId,
-          ) - 1,
-        ),
-      );
-    layerState._missionPanel
-      .querySelector('[data-mission-next]')
-      .addEventListener('click', () =>
-        selectMissionAt(
-          layerState._launches.findIndex(
-            (item) => item.id === layerState._selectedLaunchId,
-          ) + 1,
-        ),
-      );
-    layerState._missionPanel
-      .querySelector('[data-mission-close]')
-      .addEventListener('click', () =>
-        parts.selection.setSelectedMission(null),
-      );
-    layerState._missionPanel
-      .querySelector('[data-mission-show-all]')
-      .addEventListener('click', () =>
-        parts.selection.setSelectedMission(null),
-      );
-    layerState._missionPanel
-      .querySelector('[data-mission-focus]')
-      .addEventListener('click', () => {
-        const launch = layerState._launches.find(
-          (item) => item.id === layerState._selectedLaunchId,
-        );
-        if (launch) parts.selection.focusLaunchSite(launch);
-      });
-    layerState._missionPanel
-      .querySelector('[data-mission-replay]')
-      .addEventListener('click', () => {
-        if (layerState._selectedLaunchId)
-          parts.replay.startMissionReplay(layerState._selectedLaunchId);
-      });
-    layerState._missionPanel
-      .querySelector('[data-mission-replay-toggle]')
-      .addEventListener('click', () => {
-        if (layerState._replayPaused) parts.replay.resumeMissionReplay();
-        else parts.replay.pauseMissionReplay();
-      });
-    layerState._missionPanel
-      .querySelector('[data-mission-replay-cancel]')
-      .addEventListener('click', parts.replay.stopMissionReplay);
-    layerState._missionPanel
-      .querySelector('[data-mission-replay-speed]')
-      .addEventListener('input', (event) => {
-        parts.replay.setReplaySpeed(event.currentTarget.value);
-      });
-    parts.replay.syncReplaySpeedControl();
   }
+
+  /** The panel's commands, called by Core's mission components. */
+  const commands = {
+    selectMissionAt,
+    selectPreviousMission: () => selectAdjacentMission(-1),
+    selectNextMission: () => selectAdjacentMission(1),
+    deselectMission: () => parts.selection.setSelectedMission(null),
+    focusSelectedLaunchSite() {
+      const launch = layerState._launches.find(
+        (item) => item.id === layerState._selectedLaunchId,
+      );
+      if (launch) parts.selection.focusLaunchSite(launch);
+    },
+    startSelectedReplay() {
+      if (layerState._selectedLaunchId)
+        parts.replay.startMissionReplay(layerState._selectedLaunchId);
+    },
+    toggleReplayPause() {
+      if (layerState._replayPaused) parts.replay.resumeMissionReplay();
+      else parts.replay.pauseMissionReplay();
+    },
+    cancelReplay: () => parts.replay.stopMissionReplay(),
+    setReplaySpeed: (value) => parts.replay.setReplaySpeed(value),
+    rosterPointerEnter: (index) =>
+      layerState._missionRosterPreviewOwnership?.pointerEnter(index),
+    rosterPointerLeave: () =>
+      layerState._missionRosterPreviewOwnership?.pointerLeave(),
+    rosterFocus: (index) =>
+      layerState._missionRosterPreviewOwnership?.focus(index),
+    rosterBlur: (nextIndex) =>
+      layerState._missionRosterPreviewOwnership?.blur(nextIndex),
+  };
+
+  /** Start presenting the roster and the selected mission. */
+  function createMissionPanel() {
+    if (layerState._missionPanelReady) return;
+    layerState._missionPanelReady = true;
+    layerState._missionRosterPreviewOwnership =
+      createMissionRosterPreviewOwnership({
+        preview: scheduleMissionRosterPreview,
+        clear: clearMissionRosterPreviewState,
+      });
+    // The roster and mission are worded again in a new locale.
+    layerState._offMissionLocale = onLocaleChange(() => {
+      renderMissionRoster();
+      updateMissionTelemetry(true, false);
+      publishPanel();
+    });
+    publishPanel();
+  }
+
+  /** Stop presenting; the components return to their initial markup. */
+  function clearMissionPanel() {
+    layerState._missionPanelReady = false;
+    layerState._offMissionLocale?.();
+    layerState._offMissionLocale = null;
+    layerState._missionRosterPreviewOwnership = null;
+    layerState._missionRosterView = null;
+    layerState._missionRosterSignature = null;
+    layerState._missionTelemetry = null;
+    layerState._replayTransportLabel = null;
+    publish({ roster: null, mission: null });
+  }
+
   return {
     missionHoverPreviewRange,
     createMissionRosterPreviewOwnership,
-    bindMissionRosterItemKeyboardPreview,
-    captureMissionRosterFocus,
-    restoreMissionRosterFocus,
     resolveMissionRosterPreviewLaunch,
-    missionTableRows,
-    setMissionPanelField,
+    subscribePanel,
+    publishPanel,
+    presentMission,
     renderMissionPanel,
     renderMissionRoster,
-    escapeMissionText,
     updateMissionTelemetry,
     selectMissionAt,
     clearMissionRosterPreviewState,
     clearMissionRosterHover,
     scheduleMissionRosterPreview,
     createMissionPanel,
+    clearMissionPanel,
+    commands,
   };
 }

src/layers/launches/panel.test.mjs

@@ -0,0 +1,196 @@
+// The launches layer presents its roster and selected mission as plain views
+// and publishes them to subscribers; Core's mission components render them.
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { createPanel } from './panel.js';
+import { createState } from './state.js';
+
+function fixture() {
+  const state = createState({
+    services: { overlays: {}, render: {} },
+  });
+  const calls = [];
+  const parts = {
+    overlays: {
+      shortMissionLabel: (name) => name,
+      syncMissionOverlayEntries: () => calls.push(['overlays']),
+    },
+    policyHelpers: {
+      missionRosterEntries: (launches) =>
+        launches.map((launch, index) => ({ launch, index })),
+      missionPathPresentation: () => ({ orbit: 'LEO', ascent: 'ESTIMATED' }),
+      previewMissionFromRoster: (launch) => calls.push(['preview', launch.id]),
+    },
+    model: {
+      missionMarkerColor: () => ({ toCssColorString: () => 'rgb(1, 2, 3)' }),
+    },
+    selection: {
+      setSelectedMission: (id, isolate) => calls.push(['select', id, isolate]),
+      focusMission: (launch) => calls.push(['focus-mission', launch.id]),
+      focusLaunchSite: (launch) => calls.push(['focus-site', launch.id]),
+    },
+    replay: {
+      presentReplay: () => ({ available: false }),
+      startMissionReplay: (id) => calls.push(['replay', id]),
+      stopMissionReplay: () => calls.push(['cancel']),
+      pauseMissionReplay: () => calls.push(['pause']),
+      resumeMissionReplay: () => calls.push(['resume']),
+      setReplaySpeed: (value) => calls.push(['speed', value]),
+    },
+  };
+  const panel = createPanel({ state, parts });
+  const views = [];
+  panel.subscribePanel((view) => views.push(view));
+  return { state, panel, views, calls };
+}
+
+const launch = (id, extra = {}) => ({
+  id,
+  name: `Mission ${id}`,
+  provider: 'SpaceX',
+  status: 'Go',
+  launchSite: 'Unknown launch site',
+  launchTime: '2026-11-01T10:00:00Z',
+  payloads: [],
+  recoveryStages: [],
+  ...extra,
+});
+
+test('the panel publishes only once the layer starts presenting', () => {
+  const { state, panel, views } = fixture();
+  state._launches = [launch('a')];
+  panel.renderMissionRoster();
+  assert.equal(views.length, 0);
+  panel.createMissionPanel();
+  assert.deepEqual(views, [{ roster: null, mission: null }]);
+  panel.renderMissionRoster();
+  const { roster } = views.at(-1);
+  assert.equal(roster.count, '1 / 30D');
+  assert.deepEqual(roster.entries, [
+    {
+      index: 0,
+      id: 'a',
+      color: 'rgb(1, 2, 3)',
+      label: 'MISSION A',
+      ariaLabel: 'Select MISSION A',
+      provider: 'SpaceX',
+      date: '2026-11-01',
+    },
+  ]);
+  const late = [];
+  panel.subscribePanel((view) => late.push(view));
+  assert.equal(late[0], views.at(-1));
+  panel.clearMissionPanel();
+  assert.deepEqual(views.at(-1), { roster: null, mission: null });
+});
+
+test('an unchanged roster keeps its view and the preview; a changed one drops it', async () => {
+  const { state, panel, views, calls } = fixture();
+  state._launches = [launch('a'), launch('b')];
+  panel.createMissionPanel();
+  panel.renderMissionRoster();
+  const published = views.length;
+  const roster = views.at(-1).roster;
+  panel.commands.rosterFocus(1);
+  assert.equal(state._hoveredRosterLaunchId, 'b');
+  panel.renderMissionRoster();
+  assert.equal(views.length, published);
+  assert.equal(state._hoveredRosterLaunchId, 'b');
+  await new Promise((resolve) => setTimeout(resolve, 160));
+  assert.deepEqual(calls.at(-1), ['preview', 'b']);
+  state._launches = [launch('b'), launch('a')];
+  panel.renderMissionRoster();
+  assert.equal(state._hoveredRosterLaunchId, null);
+  assert.notEqual(views.at(-1).roster, roster);
+  // The list restores focus on the mission, which takes the preview back.
+  panel.commands.rosterFocus(0);
+  assert.equal(state._hoveredRosterLaunchId, 'b');
+  panel.clearMissionPanel();
+});
+
+test('the selected mission is presented with its rows and returns to the top', () => {
+  const { state, panel, views } = fixture();
+  state._launches = [
+    launch('a'),
+    launch('b', {
+      payloads: Array.from({ length: 6 }, (_, index) => ({
+        name: `Sat ${index}`,
+        amount: index === 0 ? 2 : 1,
+        manufacturer: 'Maker',
+        massKg: 500,
+      })),
+      recoveryStages: [
+        {
+          name: 'B1080',
+          status: 'Landed',
+          flightNumber: 9,
+          reused: true,
+          endpoint: { lat: 28.4, lon: -77.1, accuracy: 'DRONESHIP' },
+        },
+      ],
+    }),
+  ];
+  panel.createMissionPanel();
+  state._selectedLaunchId = 'b';
+  panel.renderMissionPanel();
+  const first = views.at(-1).mission;
+  assert.equal(first.title, 'MISSION B');
+  assert.equal(first.site, null);
+  assert.equal(first.orbit, 'LEO');
+  assert.equal(first.index, '2 / 2');
+  assert.equal(first.previousDisabled, false);
+  assert.equal(first.nextDisabled, true);
+  assert.equal(first.payloads.length, 5);
+  assert.deepEqual(first.payloads[0], {
+    name: 'Sat 0 ×2',
+    detail: 'Maker · 500 KG',
+    type: 'UNSPECIFIED',
+    destination: 'UNAVAILABLE',
+  });
+  assert.equal(first.payloadsMore, '+1 additional payload records');
+  assert.deepEqual(first.stages, [
+    {
+      name: 'B1080',
+      detail: 'FLIGHT 9 · REUSED',
+      status: 'Landed',
+      destination: 'UNAVAILABLE',
+      position: '28.40, -77.10 · DRONESHIP',
+    },
+  ]);
+  panel.renderMissionPanel();
+  assert.equal(views.at(-1).mission.scrollRequest, first.scrollRequest + 1);
+  state._selectedLaunchId = null;
+  panel.renderMissionPanel();
+  assert.equal(views.at(-1).mission, null);
+});
+
+test('the panel commands act on the selected mission', () => {
+  const { state, panel, calls } = fixture();
+  state._launches = [launch('a'), launch('b'), launch('c')];
+  state._selectedLaunchId = 'b';
+  const { commands } = panel;
+  commands.selectPreviousMission();
+  commands.selectNextMission();
+  commands.selectMissionAt(9);
+  commands.focusSelectedLaunchSite();
+  commands.startSelectedReplay();
+  commands.toggleReplayPause();
+  state._replayPaused = true;
+  commands.toggleReplayPause();
+  commands.cancelReplay();
+  commands.setReplaySpeed('2');
+  commands.deselectMission();
+  assert.deepEqual(calls, [
+    ['select', 'a', true],
+    ['focus-mission', 'a'],
+    ['select', 'c', true],
+    ['focus-mission', 'c'],
+    ['focus-site', 'b'],
+    ['replay', 'b'],
+    ['pause'],
+    ['resume'],
+    ['cancel'],
+    ['speed', '2'],
+    ['select', null, undefined],
+  ]);
+});

src/layers/launches/panelScroll.test.mjs

@@ -1,34 +0,0 @@
-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/launches/rendering.js

@@ -109,7 +109,7 @@ export function createRendering({
       );
     });
     if (satelliteTrack) layerState._orbitMatches++;
-    const entity = layerState._dataSource.entities.add({
+    layerState._dataSource.entities.add({
       id: `rocket-launch:${launch.id}`,
       position,
       point: {

src/layers/launches/replay.js

@@ -139,8 +139,10 @@ export function createReplay({ state: layerState, services, parts, source }) {
       0,
       Number(preCountdownDurationSec) || 0,
     );
+    // The hold precedes the whole countdown; ending it at -hold cut T-10 to T-5.
     const preCountdownActive =
-      preCountdownDuration > 0 && realSecondsSinceStart < -preCountdownDuration;
+      preCountdownDuration > 0 &&
+      realSecondsSinceStart < -REPLAY_COUNTDOWN_DURATION_SEC;
     const countdownActive = realSecondsSinceStart < 0 && !preCountdownActive;
     const countdownSeconds = countdownActive
       ? Math.ceil(-realSecondsSinceStart)
@@ -179,60 +181,41 @@ export function createReplay({ state: layerState, services, parts, source }) {
     };
   }
 
+  /** Republish the mission panel after a replay state change. */
   function syncReplayButton() {
-    const button = layerState._missionPanel?.querySelector(
-      '[data-mission-replay]',
-    );
-    const transport = layerState._missionPanel?.querySelector(
-      '[data-mission-replay-transport]',
-    );
-    const speedControl = layerState._missionPanel?.querySelector(
-      '.mission-replay-speed-control',
-    );
-    if (!button) return;
+    parts.panel.publishPanel();
+  }
+
+  /**
+   * The replay controls as the mission panel shows them: the start button,
+   * the transport with its pause toggle, and the speed slider.
+   */
+  function presentReplay() {
     const active = Boolean(
       layerState._replayCameraLaunchId &&
       layerState._replayCameraLaunchId === layerState._selectedLaunchId,
     );
-    const replayAvailable = Boolean(
+    const available = Boolean(
       layerState._selectedLaunchId &&
       layerState._replayTracks.has(layerState._selectedLaunchId),
     );
-    if (speedControl) speedControl.hidden = !replayAvailable;
-    button.hidden = active || !replayAvailable;
-    button.disabled = !replayAvailable;
-    button.textContent = t('REPLAY ASCENT');
-    button.classList.remove('active');
-    button.setAttribute('aria-pressed', String(active));
-    button.title = t('Replay the estimated ascent with a following camera');
-    if (transport) {
-      transport.hidden = !active;
-      transport.classList.toggle(
-        'is-paused',
-        active && layerState._replayPaused,
-      );
-      const toggleButton = transport.querySelector(
-        '[data-mission-replay-toggle]',
-      );
-      if (toggleButton) {
-        toggleButton.disabled = !active;
-        toggleButton.textContent = layerState._replayPaused ? '▶' : 'Ⅱ';
-        toggleButton.setAttribute(
-          'aria-label',
-          layerState._replayPaused ? t('Resume replay') : t('Pause replay'),
-        );
-        toggleButton.title = layerState._replayPaused
-          ? t('Resume replay')
-          : t('Pause replay');
-      }
-    }
+    const paused = layerState._replayPaused;
+    const speed = layerState._replaySpeed;
+    return {
+      available,
+      active,
+      paused: active && paused,
+      toggleText: paused ? '▶' : 'Ⅱ',
+      toggleLabel: paused ? t('Resume replay') : t('Pause replay'),
+      transportLabel: layerState._replayTransportLabel,
+      speed: String(speed),
+      speedText: `${speed.toFixed(speed % 1 ? 2 : 0)}×`,
+      speedProgress: `${((speed - REPLAY_SPEED_MIN) / (REPLAY_SPEED_MAX - REPLAY_SPEED_MIN)) * 100}%`,
+    };
   }
 
   function syncReplayCountdownButton(state) {
-    const transport = layerState._missionPanel?.querySelector(
-      '[data-mission-replay-transport]',
-    );
-    if (!transport || !layerState._replayCameraLaunchId) return;
+    if (!layerState._replayCameraLaunchId) return;
     const phase = state.countdownActive
       ? t('T minus {seconds}', {
           seconds: state.countdownSeconds,
@@ -244,29 +227,14 @@ export function createReplay({ state: layerState, services, parts, source }) {
           : state.ascending
             ? t('Ascent replay')
             : t('Orbit replay');
-    transport.setAttribute(
-      'aria-label',
-      `${phase}${layerState._replayPaused ? t(', paused') : ''}`,
-    );
+    const label = `${phase}${layerState._replayPaused ? t(', paused') : ''}`;
+    if (label === layerState._replayTransportLabel) return;
+    layerState._replayTransportLabel = label;
+    parts.panel.publishPanel();
   }
 
   function syncReplaySpeedControl() {
-    const input = layerState._missionPanel?.querySelector(
-      '[data-mission-replay-speed]',
-    );
-    const output = layerState._missionPanel?.querySelector(
-      '[data-mission-replay-speed-output]',
-    );
-    if (input) {
-      input.value = String(layerState._replaySpeed);
-      const progress =
-        ((layerState._replaySpeed - REPLAY_SPEED_MIN) /
-          (REPLAY_SPEED_MAX - REPLAY_SPEED_MIN)) *
-        100;
-      input.style.setProperty('--replay-speed-progress', `${progress}%`);
-    }
-    if (output)
-      output.textContent = `${layerState._replaySpeed.toFixed(layerState._replaySpeed % 1 ? 2 : 0)}×`;
+    parts.panel.publishPanel();
   }
 
   function setReplaySpeed(value) {
@@ -281,7 +249,8 @@ export function createReplay({ state: layerState, services, parts, source }) {
         ? layerState._replayPausedAtMs
         : Date.now();
     for (const [launchId, startedAt] of layerState._animationStarts) {
-      if (!Number.isFinite(startedAt)) continue;
+      // A countdown runs in real time; rescaling it turned T-8 into T-32 at 0.25x.
+      if (!Number.isFinite(startedAt) || startedAt > now) continue;
       const elapsedMissionMs = (now - startedAt) * previousSpeed;
       layerState._animationStarts.set(
         launchId,
@@ -548,6 +517,7 @@ export function createReplay({ state: layerState, services, parts, source }) {
     replayStartAfterPause,
     replayState,
     syncReplayButton,
+    presentReplay,
     syncReplayCountdownButton,
     syncReplaySpeedControl,
     setReplaySpeed,

src/layers/launches/replay.test.mjs

@@ -0,0 +1,47 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { createState } from './state.js';
+import { createReplay } from './replay.js';
+import { createPaths } from './paths.js';
+
+const noop = () => {};
+
+function replayRig() {
+  const state = createState({
+    services: {
+      overlays: {
+        setOverlayEntries: noop,
+        setOverlaySourceVisible: noop,
+        clearOverlaySource: noop,
+      },
+    },
+  });
+  const parts = { panel: { publishPanel: noop } };
+  parts.paths = createPaths({ state, parts });
+  return { state, replay: createReplay({ state, parts }) };
+}
+
+test('changing replay speed during the countdown keeps its real-time liftoff', (t) => {
+  t.mock.timers.enable({ apis: ['Date'], now: 1_000_000 });
+  const { state, replay } = replayRig();
+  const launch = { launchTime: '2026-07-20T10:00:00Z', timeline: [] };
+  state._animationStarts.set('countdown', 1_008_000); // T-8
+  state._animationStarts.set('flying', 990_000); // 10 s into the mission
+
+  replay.setReplaySpeed(0.25);
+
+  const startedAt = state._animationStarts.get('countdown');
+  assert.equal(startedAt, 1_008_000);
+  const countdown = replay.replayState(
+    launch,
+    startedAt,
+    12,
+    28,
+    5400,
+    state._replaySpeed,
+    Date.now(),
+  );
+  assert.equal(countdown.countdownSeconds, 8);
+  // Mission time already flown is still preserved across the change.
+  assert.equal(state._animationStarts.get('flying'), 960_000);
+});

src/layers/launches/replayOverlay.test.mjs

@@ -0,0 +1,121 @@
+// src/layers/launches/replayOverlay.test.mjs — the launches layer presents
+// its replay vehicle overlay to subscribers, and the scene chrome renders it
+// inside the globe container.
+import '../../testSupport/registerDom.mjs';
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { createApp, nextTick } from 'vue';
+import { createPinia } from 'pinia';
+import { useMissionReplayStore } from '../../ui/stores/missionReplay.js';
+import SceneChromeView from '../../ui/views/SceneChromeView.vue';
+import { createOverlays } from './overlays.js';
+
+function overlays() {
+  const state = {
+    _replayVehicleOverlay: null,
+    _replayVehicleOverlayListeners: new Set(),
+  };
+  const parts = createOverlays({ state, services: {}, parts: {}, source: {} });
+  return Object.assign(parts, { state });
+}
+
+test('subscribers get the overlay as it is created, hidden and removed, never twice the same', () => {
+  const parts = overlays();
+  const views = [];
+  const unsubscribe = parts.subscribeReplayOverlay((view) => views.push(view));
+  assert.deepEqual(views, [null], 'a subscriber starts from the current one');
+  parts.createReplayVehicleOverlay();
+  parts.createReplayVehicleOverlay();
+  assert.equal(views.length, 2);
+  assert.equal(views[1].visible, false);
+  parts.hideReplayVehicleOverlay();
+  assert.equal(views.length, 2, 'an unchanged overlay is not sent again');
+  parts.destroyReplayVehicleOverlay();
+  assert.equal(views.at(-1), null);
+  parts.hideReplayVehicleOverlay();
+  unsubscribe();
+  parts.createReplayVehicleOverlay();
+  assert.equal(views.length, 3);
+});
+
+test('the scene chrome renders the overlay in the globe container', async (t) => {
+  document.body.replaceChildren();
+  const pinia = createPinia();
+  const app = createApp(SceneChromeView).use(pinia);
+  app.mount(document.body.appendChild(document.createElement('div')));
+  t.after(() => app.unmount());
+  const store = useMissionReplayStore(pinia);
+  const node = () => document.querySelector('.mission-replay-vehicle-overlay');
+  const parts = overlays();
+  parts.subscribeReplayOverlay((view) => store.publish(view));
+  await nextTick();
+  assert.equal(node(), null);
+  parts.createReplayVehicleOverlay();
+  await nextTick();
+  const element = node();
+  assert.equal(element.parentElement.id, 'cesiumContainer');
+  assert.equal(element.hidden, true);
+  assert.equal(element.getAttribute('aria-hidden'), 'true');
+  assert.equal(element.hasAttribute('data-mode'), false);
+  assert.equal(
+    element.querySelectorAll('.mission-replay-thrust ellipse').length,
+    6,
+  );
+  // A frame as updateReplayVehicleOverlay presents it.
+  parts.state._replayVehicleOverlay = {
+    ...parts.state._replayVehicleOverlay,
+    visible: true,
+    mode: 'ascent',
+    thrusting: true,
+    paused: false,
+    transform: 'translate3d(10px, 20px, 0) translate(-50%, -50%)',
+    rotation: '12deg',
+    iconOpacity: '0.5',
+    labelOpacity: '1',
+    title: 'ASCENT REPLAY · TEST',
+    detail: 'T+00:10',
+  };
+  store.publish(parts.state._replayVehicleOverlay);
+  await nextTick();
+  assert.equal(element.hidden, false);
+  assert.equal(element.dataset.mode, 'ascent');
+  assert.ok(element.classList.contains('is-thrusting'));
+  assert.equal(element.classList.contains('is-paused'), false);
+  assert.equal(
+    element.style.getPropertyValue('--mission-replay-rotation'),
+    '12deg',
+  );
+  assert.match(element.style.transform, /translate3d\(10px, 20px, 0(px)?\)/);
+  assert.equal(
+    element.querySelector('.mission-replay-flight-symbol').style.opacity,
+    '0.5',
+  );
+  assert.equal(
+    element.querySelector('.mission-replay-orbit-dot').style.opacity,
+    '0.5',
+  );
+  assert.equal(
+    element.querySelector('.mission-replay-overlay-callout').style.opacity,
+    '1',
+  );
+  assert.equal(
+    element.querySelector('[data-replay-overlay-title]').textContent,
+    'ASCENT REPLAY · TEST',
+  );
+  assert.equal(
+    element.querySelector('[data-replay-overlay-detail]').textContent,
+    'T+00:10',
+  );
+  parts.hideReplayVehicleOverlay();
+  await nextTick();
+  assert.equal(element.hidden, true);
+  assert.equal(element.classList.contains('is-thrusting'), false);
+  assert.equal(
+    element.dataset.mode,
+    'ascent',
+    'hiding keeps the mode, as before',
+  );
+  parts.destroyReplayVehicleOverlay();
+  await nextTick();
+  assert.equal(node(), null);
+});

src/layers/launches/state.js

@@ -53,9 +53,21 @@ export function createState({ services }) {
 
   state._launches = [];
 
-  state._missionPanel = null;
+  state._missionPanelReady = false;
 
-  state._missionRoster = null;
+  state._missionPanelView = null;
+
+  state._missionPanelSignature = null;
+
+  state._missionPanelListeners = new Set();
+
+  state._missionRosterView = null;
+
+  state._missionRosterSignature = null;
+
+  state._missionTelemetry = null;
+
+  state._missionPanelScrollRequest = 0;
 
   state._missionRosterHoverTimer = null;
 
@@ -65,9 +77,10 @@ export function createState({ services }) {
 
   state._missionHoverReticleImage = null;
 
+  // The replay vehicle overlay as its view renders it; null without one.
   state._replayVehicleOverlay = null;
 
-  state._replayVehicleOverlayText = '';
+  state._replayVehicleOverlayListeners = new Set();
 
   state._animationStarts = new Map();
 
@@ -99,6 +112,8 @@ export function createState({ services }) {
 
   state._replayPaused = false;
 
+  state._replayTransportLabel = null;
+
   state._replayPausedAtMs = null;
 
   state._replaySpeed = 1;

src/layers/localAdsb/card.js

@@ -1,6 +1,7 @@
 import { AIRCRAFT_CLASS_LABELS } from '../../data/aircraftClass.js';
 import { formatNumber, t, tn } from '../../i18n/index.js';
 import { BAND_LABELS, LOCAL_ADSB_COLOR, SOURCE_LABELS } from './policy.js';
+import { roundHeadingDegrees } from '../../data/headingDegrees.js';
 
 const DASH = '—';
 
@@ -152,7 +153,7 @@ export function localAdsbCardModel(
       t('ALT {altitude} FT · GS {speed} KT · TRK {track}', {
         altitude: grouped(altitude),
         speed: speed === null ? DASH : speed,
-        track: track === null ? DASH : `${track}°`,
+        track: track === null ? DASH : `${roundHeadingDegrees(track)}°`,
       }),
       vertical === null
         ? t('V/S {rate}', { rate: DASH })

src/layers/localAdsb/card.test.mjs

@@ -0,0 +1,19 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { setLocale } from '../../i18n/index.js';
+import { localAdsbCardModel } from './card.js';
+
+test('a track of 359.7° reads TRK 0°, not TRK 360°', () => {
+  setLocale('en');
+  const { details } = localAdsbCardModel(
+    {
+      icao: 'abc123',
+      altitudeFt: 12500,
+      groundSpeedKt: 240,
+      trackDeg: 359.7,
+      lastPositionAt: 1000,
+    },
+    5000,
+  );
+  assert.equal(details[1], 'ALT 12,500 FT · GS 240 KT · TRK 0°');
+});

src/layers/localAdsb/feeds.js

@@ -5,12 +5,12 @@ import {
 
 /** Same-origin route served by `server/providers/local-receivers.js`. */
 export const LOCAL_RECEIVERS_URL = '/api/local-receivers/aircraft';
-export const LOCAL_RECEIVER_POLL_MS = 1_000;
+const LOCAL_RECEIVER_POLL_MS = 1_000;
 /**
  * Browser-side deadline for one route request, body included. The server
  * bounds each upstream read at 2 s; this bounds the browser-to-server leg.
  */
-export const LOCAL_RECEIVER_REQUEST_TIMEOUT_MS = 5_000;
+const LOCAL_RECEIVER_REQUEST_TIMEOUT_MS = 5_000;
 
 function abortError() {
   const error = new Error('Local receiver request aborted');

src/layers/localAdsb/index.js

@@ -36,18 +36,8 @@ import {
 } from './policy.js';
 import { localAdsbStatus } from './status.js';
 
-export {
-  LAYER_ID as LOCAL_ADSB_LAYER_ID,
-  HEARD_BY_RECEIVER,
-} from './policy.js';
-export {
-  localAdsbCardModel,
-  localAdsbClassLine,
-  localAdsbIsUat,
-  localAdsbReceiverLine,
-  localAdsbTitle,
-} from './card.js';
-export { localAdsbClass } from './enrichment.js';
+export { HEARD_BY_RECEIVER } from './policy.js';
+export { localAdsbCardModel, localAdsbReceiverLine } from './card.js';
 export { localAdsbStatus } from './status.js';
 
 const FEET_TO_METERS = 0.3048;
@@ -66,10 +56,12 @@ const DEFAULT_DISPLAY = Object.freeze({
  * Local ADS-B layer: draws aircraft heard by the user's own receivers.
  *
  * Two inputs feed it. The receiver is any object with `getState()` returning
- * `{ connected, status, message, mode, webUsbSupported, aircraft, messagesPerSecond }`,
+ * `{ connected, status, message, errorText, mode, webUsbSupported, aircraft, messagesPerSecond }`,
  * `subscribe(listener)` and `setMode(mode)`; `aircraft` holds records from
- * `src/sources/adsbRecords.js`. The browser WebUSB session is one such
- * receiver. The optional `feeds` session (`./feeds.js`) supplies records read
+ * `src/sources/adsbRecords.js`, and the optional `errorText` is the English
+ * text of an `error` status (`message`, the UI-language one, stands in for a
+ * receiver without it). The browser WebUSB session is one such receiver.
+ * The optional `feeds` session (`./feeds.js`) supplies records read
  * by the server from local 1090/978 MHz decoders; it polls only while this
  * layer is enabled. Records are merged by ICAO (`mergeLocalAdsbRecords`).
  * Aircraft heard only on 978 MHz UAT carry a thin ring around the marker.

src/layers/localAdsb/models.js

@@ -14,6 +14,7 @@ import {
   MODEL_PROX_ADD_M,
   MODEL_PROX_KEEP_M,
 } from '../flights/policy.js';
+import { AIRCRAFT_ENVIRONMENT_MAP_OPTIONS } from '../../data/aircraftModelLighting.js';
 
 const specKey = (spec) => `${spec.url}@${spec.scale}`;
 
@@ -87,6 +88,7 @@ export function createLocalAdsbModels({
       model = await loadModel({
         url: resolveAsset(spec.url),
         asynchronous: false,
+        environmentMapOptions: AIRCRAFT_ENVIRONMENT_MAP_OPTIONS,
         minimumPixelSize: MODEL_MIN_PX,
         scale: spec.scale,
         color,

src/layers/localAdsb/motion.js

@@ -26,7 +26,7 @@ import {
 export const LOCAL_ADSB_HISTORY_MS = 10 * 60_000;
 export const LOCAL_ADSB_HISTORY_POINTS = 600;
 /** A display correction larger than this snaps instead of sliding. */
-export const LOCAL_ADSB_SNAP_M = 3_000;
+const LOCAL_ADSB_SNAP_M = 3_000;
 /** Chord course uses the newest fix at least this much older than the anchor. */
 const CHORD_BASELINE_MS = 2_000;
 /** Turn rate is estimated over this window of heard fixes. */

src/layers/localAdsb/status.js

@@ -24,7 +24,7 @@ function plural(count, one, many) {
  * @param {object[]} feeds Feed statuses from the route.
  * @returns {string}
  */
-export function describeFeedProblems(feeds) {
+function describeFeedProblems(feeds) {
   const byStatus = new Map();
   for (const feed of feeds) {
     if (feed?.status === 'live') continue;
@@ -41,7 +41,7 @@ export function describeFeedProblems(feeds) {
 }
 
 /** Whether the server reported at least one configured feed. */
-export function feedsConfigured(feedState) {
+function feedsConfigured(feedState) {
   return Boolean(
     feedState?.configured === true &&
     Array.isArray(feedState.feeds) &&
@@ -51,7 +51,7 @@ export function feedsConfigured(feedState) {
 
 function webUsbStatus(receiver, heard, feedState) {
   if (receiver.status === 'error')
-    return { status: 'error', error: receiver.message };
+    return { status: 'error', error: receiver.errorText ?? receiver.message };
   if (receiver.status === 'connecting' || receiver.status === 'tuning')
     return { loading: true, loadingLabel: msg('opening receiver') };
   if (

src/layers/localAdsb/statusLocale.test.mjs

@@ -2,7 +2,8 @@
 // "USB error", feed problems, even as the whole error) read in the UI language.
 import assert from 'node:assert/strict';
 import test from 'node:test';
-import { setLocale } from '../../i18n/index.js';
+import { setLocale, t } from '../../i18n/index.js';
+import { SdrController } from '../../sdr/controller.js';
 import { LayerPanel } from '../../ui/layerPanel.js';
 import { localAdsbStatus } from './status.js';
 
@@ -66,3 +67,45 @@ for (const locale of ['es', 'ru']) {
     });
   }
 }
+
+// A receiver error is English data for the layer (stats, and what the voice
+// tools and the analyst read); the Radio card and the row show it translated.
+for (const locale of ['es', 'ru']) {
+  test(`${locale}: a WebUSB receiver error stays English in stats and reads translated`, async () => {
+    const receiver = new SdrController({
+      storage: null,
+      webUsb: {},
+      providerFactory: () => ({
+        get: async () => {
+          throw new Error('No device was selected.');
+        },
+      }),
+    });
+    setLocale(locale);
+    try {
+      assert.equal(await receiver.connect('adsb'), false);
+      const state = receiver.getState();
+      assert.equal(state.status, 'error');
+      assert.equal(state.errorText, 'No RTL-SDR device selected');
+      assert.equal(state.message, t('No RTL-SDR device selected'));
+      assert.notEqual(state.message, state.errorText);
+
+      const status = localAdsbStatus({
+        receiver: state,
+        feedState: null,
+        heard: 0,
+      });
+      assert.equal(status.error, 'No RTL-SDR device selected');
+      const row = rowFor(status, 0);
+      assert.ok(row.includes(state.message), row);
+      assert.doesNotMatch(row, /No RTL-SDR device selected/, row);
+
+      // The English text goes with the error: stop() clears it.
+      await receiver.stop();
+      assert.equal(receiver.getState().errorText, null);
+    } finally {
+      setLocale('en');
+      await receiver.destroy();
+    }
+  });
+}

src/layers/military/ownership.test.mjs

@@ -2,6 +2,7 @@ import test from 'node:test';
 import assert from 'node:assert/strict';
 import { createMilitaryFlightLayer } from './index.js';
 import { createFlightState } from './state.js';
+import { createTracking } from './tracking.js';
 
 function services() {
   const names = [
@@ -211,3 +212,27 @@ test('a newly seen military contact appears at its delayed position, not ahead o
     `expected about ${Math.round(expectedM)} m behind the fix, got ${Math.round(behindM)} m`,
   );
 });
+
+test('voice context reads a track that rounds to north as 0°, not 360°', () => {
+  const stubs = services();
+  stubs.aircraftPresentation = { tr3bTypeLabel: (id, type) => type };
+  const tracking = createTracking({
+    flightState: {
+      feed: { _lastSource: 'Fixture aircraft' },
+      records: { data: new Map() },
+    },
+    services: stubs,
+    parts: {
+      queries: {
+        _describeFlight: () => ({ track: 359.6, callsign: 'RCH123' }),
+        _toCleanText: (value) => value || '',
+        _formatAltitude: () => '',
+      },
+    },
+    layer: {},
+  });
+  assert.equal(
+    tracking._contextSubjectMetadata('ae1234').properties.heading,
+    '0°',
+  );
+});

src/layers/military/policy.js

@@ -1,10 +1,3 @@
-export {
-  GROUND_FLOOR_WARM_MAX_ALT_M,
-  POSITION_HISTORY_LIMIT,
-  LANDED_MISSING_POLL_LIMIT,
-  MISSING_POLL_LIMIT,
-  ERROR_BACKOFF_INTERVAL,
-} from './recordPolicy.js';
 import * as Cesium from 'cesium';
 import { EMERGENCY_TINT_CSS } from '../../data/aircraftEmergency.js';
 

src/layers/military/queries.js

@@ -366,7 +366,6 @@ export function createQueries({
       const maxRange =
         Number.isFinite(range) && range > 0 ? range : Number.POSITIVE_INFINITY;
 
-      const now = Cesium.JulianDate.now();
       const nearby = [];
 
       for (const [icao24, bb] of flightState._billboards) {

src/layers/military/rendering.js

@@ -53,6 +53,7 @@ import {
   ROTATION_REFRESH_MS,
   COURSE_MAX_DPS,
 } from './policy.js';
+import { AIRCRAFT_ENVIRONMENT_MAP_OPTIONS } from '../../data/aircraftModelLighting.js';
 
 export function createRendering({
   flightState,
@@ -473,6 +474,7 @@ export function createRendering({
       model = await Cesium.Model.fromGltfAsync({
         url: resolveAsset(spec.url),
         asynchronous: false,
+        environmentMapOptions: AIRCRAFT_ENVIRONMENT_MAP_OPTIONS,
         minimumPixelSize: MODEL_MIN_PX,
         scale: spec.scale,
         color: flightState._irBoost ? Cesium.Color.WHITE : _modelColor(icao24),
@@ -676,6 +678,7 @@ export function createRendering({
       Cesium.Model.fromGltfAsync({
         url: resolveAsset(trackedSpec.url),
         asynchronous: false,
+        environmentMapOptions: AIRCRAFT_ENVIRONMENT_MAP_OPTIONS,
         minimumPixelSize: TRACKED_MODEL_MIN_PX,
         scale: trackedSpec.scale,
         color: flightState._irBoost ? Cesium.Color.WHITE : TRACKED_ICON_COLOR,

src/layers/military/snapshotRenderer.js

@@ -187,7 +187,6 @@ export function createMilitarySnapshotRenderer({
       // If this is the tracked aircraft, update label text
       // (position updates automatically via dead-reckoning CallbackProperty)
       if (isTracked && flightState._trackedEntity) {
-        const info = flightState.records.data.get(icao24);
         tracking._updateTrackedLabelModel(icao24);
       }
     }

src/layers/military/tracking.js

@@ -25,6 +25,7 @@ import {
   AMBER_TRANSPARENT,
   TRACKED_ICON_COLOR,
 } from './policy.js';
+import { roundHeadingDegrees } from '../../data/headingDegrees.js';
 
 export function createTracking({
   flightState,
@@ -47,7 +48,7 @@ export function createTracking({
   const { ensureGeoidReady, geoidHeight } = services.geoid;
   const { clearFocusTarget } = services.focus;
   const { applyTrackedCameraFrame } = services.camera;
-  const { resolvePickId, isOwnedByOtherLayer } = services.picking;
+  const { resolvePickId, isOwnedByOtherLayer, pickContact } = services.picking;
 
   function _emitAwarenessEvent(type, detail) {
     if (
@@ -120,7 +121,7 @@ export function createTracking({
           ? `${Math.round(described.velocityMps * 1.944)} kt`
           : '',
         heading: Number.isFinite(described.track)
-          ? `${Math.round(described.track)}°`
+          ? `${roundHeadingDegrees(described.track)}°`
           : '',
         icao24,
         // Honesty cue: the contact is coasting on dead reckoning, so the
@@ -593,7 +594,7 @@ export function createTracking({
   }
 
   /**
-   * Fire-and-forget adsb.lol readsb trace backfill (PRD F2). Trace points are
+   * Fire-and-forget optional source history backfill (PRD F2). Trace points are
    * stride-thinned to the remaining vertex budget, then spliced strictly older
    * than the oldest seeded fix AHEAD of the locally accumulated fine segment,
    * capped at TRAIL_MAX_POINTS (newest kept). Any failure (404/timeout/
@@ -1079,7 +1080,9 @@ export function createTracking({
       // first-person reference. Empty globe clicks are inert until the user
       // exits with C, Escape, or the dedicated button.
       if (document.body.classList.contains('cockpit-mode')) return;
-      const picked = viewer.scene.pick(click.position);
+      const picked = pickContact
+        ? pickContact(viewer.scene, click.position)
+        : viewer.scene.pick(click.position);
 
       if (picked) {
         // Clicking the tracked entity itself -- ignore (don't deselect)

src/layers/perimeters/index.js

@@ -55,6 +55,8 @@ export function createFirePerimetersLayer({
   let _dataSource = null;
   let _count = 0;
   let _lastUpdate = null;
+  // The proxy's last snapshot, served while WFIGS is unreachable.
+  let _stale = false;
   let _lastError = null;
   let _enabled = false;
   let _clickHandler = null;
@@ -260,6 +262,7 @@ export function createFirePerimetersLayer({
       _count = 0;
       _lastUpdate = null;
       _lastError = null;
+      _stale = false;
       _enabled = false;
       console.log('[Data:FirePerimeters] Initialized');
     },
@@ -287,9 +290,21 @@ export function createFirePerimetersLayer({
       _request = request;
       refreshInciwebIndex(request.signal);
       try {
-        const rows = await source.getSnapshot({ signal: request.signal });
+        // The source contract is getSnapshot; a source that can also say how
+        // fresh its rows are (the WFIGS proxy) offers getSnapshotDetail.
+        const snapshot =
+          typeof source.getSnapshotDetail === 'function'
+            ? await source.getSnapshotDetail({ signal: request.signal })
+            : { rows: await source.getSnapshot({ signal: request.signal }) };
         if (request.signal.aborted || _request !== request || !_enabled)
           return false;
+        const { rows } = snapshot;
+        _stale = snapshot.stale === true;
+        // A stale snapshot is as old as its fetch, not this poll.
+        const updatedAt =
+          _stale && Number.isFinite(snapshot.fetchedAt)
+            ? snapshot.fetchedAt
+            : Date.now();
 
         // Incident facts may change independently of the polygon's source clock.
         const signature = JSON.stringify(
@@ -299,7 +314,7 @@ export function createFirePerimetersLayer({
         );
         if (signature === _snapshotSignature) {
           if (_selectedId) publishSelectedCard();
-          _lastUpdate = Date.now();
+          _lastUpdate = updatedAt;
           _lastError = null;
           return true;
         }
@@ -355,7 +370,7 @@ export function createFirePerimetersLayer({
         // Refresh (or drop) the selected incident's card against the new feed.
         if (_selectedId) publishSelectedCard();
         _count = rows.length;
-        _lastUpdate = Date.now();
+        _lastUpdate = updatedAt;
         _lastError = null;
         console.log(
           `[Data:FirePerimeters] Updated: ${_count} incidents, ${nextEntities.length} polygons`,
@@ -366,6 +381,8 @@ export function createFirePerimetersLayer({
           return false;
         console.warn('[Data:FirePerimeters] Fetch error:', e);
         _lastError = e?.message || msg('Perimeter source unavailable');
+        // A failure now outranks the stale snapshot still drawn.
+        _stale = false;
         return false;
       } finally {
         if (_request === request) _request = null;
@@ -391,6 +408,7 @@ export function createFirePerimetersLayer({
       _count = 0;
       _lastUpdate = null;
       _lastError = null;
+      _stale = false;
     },
 
     /** Snapshot incident facts (with card-anchor coordinates) for the analyst query engine. */
@@ -443,6 +461,7 @@ export function createFirePerimetersLayer({
         count: _count,
         lastUpdate: _lastUpdate,
         error: _lastError,
+        stale: _stale,
       };
     },
   };

src/layers/perimeters/ownership.test.mjs

@@ -552,3 +552,36 @@ for (const action of ['disable', 'destroy', 'selection']) {
     if (action !== 'destroy') h.layer.destroy();
   });
 }
+
+test('a stale snapshot reads stale, dated by its own fetch, and a fresh one clears it', async () => {
+  const fetchedAt = Date.now() - 3 * 60 * 60 * 1000;
+  let snapshot = { rows: [row], stale: true, fetchedAt };
+  const h = harness({
+    getSnapshot: async () => snapshot.rows,
+    getSnapshotDetail: async () => snapshot,
+  });
+  await h.layer.update(h.viewer);
+  assert.equal(h.layer.getStats().stale, true);
+  assert.equal(h.layer.getStats().lastUpdate, fetchedAt);
+  snapshot = { rows: [row], stale: false, fetchedAt: Date.now() };
+  await h.layer.update(h.viewer);
+  assert.equal(h.layer.getStats().stale, false);
+  assert.ok(h.layer.getStats().lastUpdate > fetchedAt);
+});
+
+test('a failed refresh after a stale snapshot reads as the failure, not stale', async () => {
+  let fail = false;
+  const h = harness({
+    getSnapshot: async () => [row],
+    getSnapshotDetail: async () => {
+      if (fail) throw new Error('WFIGS HTTP 502');
+      return { rows: [row], stale: true, fetchedAt: Date.now() - 60_000 };
+    },
+  });
+  await h.layer.update(h.viewer);
+  assert.equal(h.layer.getStats().stale, true);
+  fail = true;
+  await h.layer.update(h.viewer);
+  assert.equal(h.layer.getStats().stale, false);
+  assert.equal(h.layer.getStats().error, 'WFIGS HTTP 502');
+});

src/layers/perimeters/source.js

@@ -8,20 +8,35 @@ const msg = (text) => text;
 export function createWfigsPerimeterSource({
   fetchImpl = (...args) => globalThis.fetch(...args),
 } = {}) {
+  /**
+   * The rows with how fresh they are: the proxy answers from its last
+   * snapshot, marked stale, while WFIGS is unreachable.
+   * @returns {Promise<{rows: object[], stale: boolean, fetchedAt: number|null}>}
+   */
+  async function getSnapshotDetail({ signal } = {}) {
+    signal?.throwIfAborted();
+    const response = await fetchImpl('/api/fire-perimeters', { signal });
+    if (!response.ok) throw new Error(`WFIGS HTTP ${response.status}`);
+    const payload = await readResponseJsonCapped(
+      response,
+      80 * 1024 * 1024,
+      signal,
+    );
+    signal?.throwIfAborted();
+    if (!Array.isArray(payload?.rows))
+      throw new Error(msg('Malformed perimeter snapshot'));
+    return {
+      rows: payload.rows,
+      stale: payload.stale === true,
+      fetchedAt: Number.isFinite(payload.fetchedAt) ? payload.fetchedAt : null,
+    };
+  }
+
   return {
-    async getSnapshot({ signal } = {}) {
-      signal?.throwIfAborted();
-      const response = await fetchImpl('/api/fire-perimeters', { signal });
-      if (!response.ok) throw new Error(`WFIGS HTTP ${response.status}`);
-      const payload = await readResponseJsonCapped(
-        response,
-        80 * 1024 * 1024,
-        signal,
-      );
-      signal?.throwIfAborted();
-      if (!Array.isArray(payload?.rows))
-        throw new Error(msg('Malformed perimeter snapshot'));
-      return payload.rows;
+    /** The perimeter rows (see getSnapshotDetail for staleness). */
+    async getSnapshot(options = {}) {
+      return (await getSnapshotDetail(options)).rows;
     },
+    getSnapshotDetail,
   };
 }

src/layers/perimeters/source.test.mjs

@@ -115,3 +115,67 @@ test('response-body completion honors cancellation without replacing records', a
     name: 'AbortError',
   });
 });
+
+test('a failed refresh serves the last snapshot marked stale for a day, then refuses', async () => {
+  let clock = 1_000_000_000;
+  let up = true;
+  const plugin = firePerimetersProxy({
+    now: () => clock,
+    fetchImpl: async () => {
+      if (!up) throw new Error('WFIGS unreachable');
+      return Response.json(validPayload);
+    },
+  });
+  let handler;
+  plugin.configureServer({
+    middlewares: { use: (_path, callback) => (handler = callback) },
+  });
+  const ask = async () => {
+    const reply = {};
+    await handler(
+      { url: '/', method: 'GET', socket: { remoteAddress: '127.0.0.1' } },
+      {
+        writeHead(status, headers) {
+          reply.status = status;
+          reply.staleHeader = headers?.['X-Data-Stale'] === 'true';
+        },
+        end(body) {
+          reply.body = JSON.parse(body);
+        },
+      },
+    );
+    return reply;
+  };
+  const fresh = await ask();
+  assert.equal(fresh.status, 200);
+  assert.equal(fresh.body.stale, undefined);
+  up = false;
+  clock += 23 * 60 * 60 * 1000;
+  const stale = await ask();
+  assert.equal(stale.status, 200);
+  assert.equal(stale.staleHeader, true);
+  assert.equal(stale.body.stale, true);
+  assert.equal(stale.body.fetchedAt, fresh.body.fetchedAt);
+  clock += 2 * 60 * 60 * 1000;
+  assert.equal((await ask()).status, 502, 'a day-old snapshot is not served');
+});
+
+test('the snapshot detail carries the proxy staleness and fetch time', async () => {
+  const fetchedAt = Date.UTC(2026, 9, 25, 12);
+  const source = createWfigsPerimeterSource({
+    fetchImpl: async () => Response.json({ rows: [], stale: true, fetchedAt }),
+  });
+  assert.deepEqual(await source.getSnapshotDetail(), {
+    rows: [],
+    stale: true,
+    fetchedAt,
+  });
+  assert.deepEqual(await source.getSnapshot(), []);
+});
+
+test('getSnapshot works when taken off its source object', async () => {
+  const { getSnapshot } = createWfigsPerimeterSource({
+    fetchImpl: async () => Response.json({ rows: [] }),
+  });
+  assert.deepEqual(await getSnapshot(), []);
+});