Merge branch 'main' into denis/cockpit-subject-providers

changelog.d/1579-render-failure-notice.md

@@ -0,0 +1,6 @@
+- When the globe stops drawing after a render error or a lost WebGL context,
+  an alert dialog says so instead of leaving a frozen or black globe behind
+  working controls. Retry restarts drawing (Reload after a lost context), and
+  Reset view reopens the app without the view restored from the address bar.
+  Cesium's "Rendering has stopped" panel no longer appears in the app
+  (German, @gekh, #1579).

changelog.d/1715-vessel-typical-length.md

@@ -0,0 +1,3 @@
+- Draw a vessel whose feed sends no length at its ship type's typical size, so
+  a cruise ship or container ship no longer shows as its type's smallest model
+  (samehkhamis, #1715).

changelog.d/1723-cctv-panel-collapse-on-disable.md

@@ -0,0 +1,5 @@
+- Collapse the CCTV panel when the layer is switched off. It stayed open with
+  an empty frame and a meta line that still described the last camera; the
+  meta line of a disabled layer now reads the catalog count. Contacts, Space
+  Missions and Clear selected data layers leave the panel as it is
+  (asturksever, #1723).

docs/CURRENT-STATE.md

@@ -2306,6 +2306,17 @@ shown without a fade once it is decoded (or after one second if its decode never
 settles), so a new camera's preview is blank only while its frame loads. Disposal
 releases listeners, subscriptions, image handlers, summary timers and chip-hide timers.
 
+The panel opens when a camera becomes active and collapses when the layer is
+switched off, from its own switch or anywhere else. The panel chrome applies
+the collapse, so a panel the desktop accordion only folded has its saved and
+shared state closed too. Clear selected data layers and Context isolation
+(Contacts, Space Missions) switch the layer off without the user asking: the
+panel and its share preference stay as they are, and the layer comes back to an
+open panel. Only the switch-off isolation makes counts (`suspendsLayer`, true
+while `_clearLayersOutsideContextMode` switches the layer off): the user
+switching CCTV off inside Contacts closes the panel as anywhere else. A panel opened by hand while the layer is off stays open, and its
+meta line reads the catalog count, not the last active camera.
+
 ## UI disposal
 
 UI disposal releases the CCTV subscription, command-dock observer, legacy drag
@@ -2520,6 +2531,53 @@ future driver fix restores the effect with no code change; iOS/iPadOS platform
 detection is the backstop for when no probe context can be created. Applied
 during viewer construction, before any tile builds a draw command.
 
+## Render failure notice
+
+When the globe stops drawing, the scene chrome says so instead of leaving a
+black globe behind working controls. `installRenderFailureNotice()`
+(`src/ui/renderFailure.js`) listens for Cesium's `renderError` and the canvas'
+`webglcontextlost`, logs the error, and publishes a notice that
+`RenderFailure.vue` shows as an alert dialog with focus on its first action.
+The app's viewer uses `showRenderLoopErrors: false`, so Cesium's dead-end
+"Rendering has stopped" panel no longer appears; `applicationViewerOptions()`
+keeps it by default for other callers.
+
+- **Retry** restarts the render loop. The notice stays until a frame starts
+  and ends without an error: Cesium raises `postRender` after a failed frame
+  too.
+- **Reload**, after a lost context, reloads the page; the address keeps the
+  view.
+- **Reset view** opens `appRootUrl()`, without the hash or `/share/<code>`
+  path; the query, such as `?lang=`, is kept.
+
+Pitfalls:
+
+- An error thrown outside Scene's error handling (a frame listener, `onTick`,
+  a resize) stops the loop without a `renderError`. The notice wraps the
+  widget's `render()` and `resize()` and raises it as one, once even with
+  `rethrowRenderErrors`.
+- A throwing listener leaves its Cesium event mid-raise, with listener changes
+  only queued. The wrapper finishes those raises first (`finishRaise()` over
+  `frameEvents()`), so a layer turned off or on meanwhile behaves.
+- A render error marks the loop stopped while its next frame is still queued.
+  The wrapper keeps the loop marked running, so a Retry or a shown tab
+  (`src/app/tools.js`) before that frame starts no second loop.
+- After a lost context, later render errors are only logged, so the notice
+  keeps saying why. The listener neither prevents nor restores the loss.
+- When the globe draws again, focus goes back where it was, or to the globe's
+  canvas, which the map's keys read as the map; the canvas is focusable only
+  until focus leaves or the globe is pressed. Focus the user moved stays put.
+- The notice sits above floating panels such as the Québec camera viewer, and
+  its buttons are 44 px tall on touch screens.
+
+An inline conversation panel never reloads or navigates its host's page: it
+offers Retry after a render error only, and no notice after a lost context,
+where the panel runtime's own notice applies (`src/app/globePanelRuntime.js`).
+Its timer (`keepPanelRendering()`) draws only while the render loop is on and
+logs nothing itself, so each render error is logged once, by the notice. An
+error a timer frame throws is caught there: it has already been raised as a
+render error.
+
 ## Map Source control ownership
 
 Map Source controls own chip listeners, source-state subscriptions and selection

public/models/fleet/types.json

@@ -1149,6 +1149,7 @@
     70,
     79
    ],
+   "typical_len": 300,
    "rules": [
     {
      "min_len": 70,
@@ -1188,6 +1189,7 @@
     80,
     89
    ],
+   "typical_len": 250,
    "rules": [
     {
      "name_re": "\\bLNG\\b|\\bGAS\\b",
@@ -1214,6 +1216,7 @@
     60,
     69
    ],
+   "typical_len": 140,
    "rules": [
     {
      "min_len": 70,
@@ -1243,6 +1246,7 @@
     37,
     37
    ],
+   "typical_len": 19,
    "rules": [
     {
      "min_len": 35,
@@ -1273,6 +1277,7 @@
     30,
     30
    ],
+   "typical_len": 24,
    "rules": [
     {
      "min_len": 15,
@@ -1343,6 +1348,7 @@
     55,
     55
    ],
+   "typical_len": 40,
    "rules": [
     {
      "min_len": 25,
@@ -1358,6 +1364,7 @@
     40,
     49
    ],
+   "typical_len": 40,
    "rules": [
     {
      "min_len": 20,
@@ -1373,6 +1380,7 @@
     33,
     33
    ],
+   "typical_len": 100,
    "rules": [
     {
      "min_len": 50,

scripts/format-scope.json

@@ -557,6 +557,13 @@
   "src/ui/frameRateMonitor.js",
   "src/ui/frameRateMonitor.test.mjs",
   "src/ui/frameRateView.test.mjs",
+  "src/ui/renderFailure.test.mjs",
+  "src/ui/renderFailureView.test.mjs",
+  "src/ui/renderFailureLoopErrors.test.mjs",
+  "src/ui/renderFailureEventRetry.test.mjs",
+  "src/app/renderFailureInlineRetry.test.mjs",
+  "src/ui/renderFailureSecondLoop.test.mjs",
+  "src/ui/renderLoopFixture.mjs",
   "src/layers/cctv/lifecycle.js",
   "src/layers/cctv/controls.js",
   "src/layers/cctv/geometry.js",

scripts/package-boundaries.json

@@ -166,6 +166,7 @@
       "src/ui/kit/UiBadge.vue",
       "src/ui/stores/globeActions.js",
       "src/ui/views/panels/GlobeActions.vue",
+      "src/ui/views/panels/RenderFailure.vue",
       "src/ui/views/panels/GlobeCompass.vue",
       "src/ui/stores/recording.js",
       "src/ui/styleParameters.js",
@@ -3142,6 +3143,7 @@
       "src/ui/displayControls.js",
       "src/ui/effects.js",
       "src/ui/frameRateMonitor.js",
+      "src/ui/renderFailure.js",
       "src/ui/layerPanel.js",
       "src/ui/weatherPanel.js",
       "src/ui/railCards.js",

scripts/qa-camera-controls.mjs

@@ -339,6 +339,45 @@ try {
     '#cctv-frame',
     (image) => !image.getAttribute('src') && image.dataset.cameraId === '',
   );
+  // The address bar follows the share state after a short delay: wait for the
+  // CCTV panel token (1 collapsed, 0 open) the step expects.
+  const panelState = async (expectedToken) => {
+    const settled = await page
+      .waitForFunction(
+        (token) =>
+          new RegExp(`(?:^|_)v\\.c\\.${token}(?:_|$)`).test(
+            new URLSearchParams(location.hash.slice(1)).get('ui') || '',
+          ),
+        { timeout: 5000 },
+        expectedToken,
+      )
+      .then(
+        () => true,
+        () => false,
+      );
+    return page.evaluate(
+      (shared) => ({
+        collapsed: document
+          .getElementById('cctv-panel')
+          .classList.contains('collapsed'),
+        shared,
+        ui: new URLSearchParams(location.hash.slice(1)).get('ui'),
+      }),
+      settled ? expectedToken : null,
+    );
+  };
+  const closedOnDisable = await panelState('1');
+  check(
+    'disable collapses the panel and its share preference',
+    closedOnDisable.collapsed && closedOnDisable.shared === '1',
+    JSON.stringify(closedOnDisable),
+  );
+  // The switch sits inside the collapsed panel: reopen it from the right rail.
+  await page.click('[data-rail-item="cctv-panel"]');
+  await page.waitForFunction(
+    () =>
+      !document.getElementById('cctv-panel').classList.contains('collapsed'),
+  );
   await page.click('#cctv-enable-btn');
   await page.waitForFunction(
     () =>
@@ -351,6 +390,42 @@ try {
     'disable clears the preview and re-enable reacquires the camera frame',
     disabledCleanly,
   );
+  // Contacts switches CCTV off to isolate itself and restores it on the way
+  // out: the open panel and its share preference survive the round trip.
+  const cameraBeforeContacts = await page.evaluate(
+    () =>
+      window.__godsEyeView.styleManager._cctvControls.getState()
+        ?.activeCameraId,
+  );
+  const entered = await page.evaluate(() =>
+    window.__godsEyeView.styleManager.setContextMode('flights'),
+  );
+  await page.waitForFunction(
+    () => !window.__godsEyeView.dataManager.isEnabled('cctv'),
+  );
+  const duringContacts = await panelState('0');
+  await page.evaluate(() =>
+    window.__godsEyeView.styleManager.setContextMode(null),
+  );
+  await page.waitForFunction(() =>
+    window.__godsEyeView.dataManager.isEnabled('cctv'),
+  );
+  const afterContacts = await panelState('0');
+  check(
+    'Contacts isolation keeps the open CCTV panel and restores its camera',
+    entered?.ok === true &&
+      !duringContacts.collapsed &&
+      duringContacts.shared === '0' &&
+      !afterContacts.collapsed &&
+      afterContacts.shared === '0' &&
+      (await page.evaluate(
+        (cameraId) =>
+          window.__godsEyeView.styleManager._cctvControls.getState()
+            ?.activeCameraId === cameraId,
+        cameraBeforeContacts,
+      )),
+    JSON.stringify({ entered, duringContacts, afterContacts }),
+  );
   await page.$eval('#cctv-frame', (image) =>
     image.scrollIntoView({ block: 'nearest' }),
   );

src/annotations/drawToolBehaviour.test.mjs

@@ -400,6 +400,27 @@ test('Enter finishes from the canvas and the label field, never from a focused b
   }
 });
 
+test('Enter on the globe canvas finishes, as after the render failure notice hands focus back', async () => {
+  const h = harness();
+  try {
+    h.act('toggleDraw');
+    h.tool.setShape('area');
+    h.tool.addVertex(-97.75, 30.26);
+    h.tool.addVertex(-97.74, 30.26);
+    h.tool.addVertex(-97.74, 30.27);
+
+    // src/ui/views/panels/RenderFailure.vue focuses the canvas when the globe
+    // draws again and the control that had focus is gone.
+    h.documentDouble.emit('keydown', { key: 'Enter', target: h.viewer.scene.canvas });
+    await Promise.resolve();
+    await Promise.resolve();
+    assert.equal(h.annotations.calls.annotate.length, 1, 'Enter on the canvas finishes');
+    assert.equal(h.annotations.calls.annotate[0].specs[0].type, 'area');
+  } finally {
+    h.restore();
+  }
+});
+
 test('the live preview hangs at the height the click landed on', async () => {
   const h = harness();
   try {

src/app/embed.js

@@ -94,17 +94,6 @@ export function panelAwareVisibility(doc = globalThis.document) {
 const PANEL_FRAME_MS = 33;
 const MISSED_FRAMES_MS = 250;
 
-/** A render error's details, including the plain objects workers report. */
-function describeError(error) {
-  if (error instanceof Error)
-    return `${error.name}: ${error.message}\n${error.stack}`;
-  try {
-    return JSON.stringify(error, Object.getOwnPropertyNames(error ?? {}));
-  } catch {
-    return String(error);
-  }
-}
-
 /**
  * Keep the globe drawing in an inline panel. Some hosts report a panel on
  * screen as hidden, which stops the browser's animation frames and with them
@@ -122,33 +111,27 @@ export function keepPanelRendering(
     frameRequest = windowRef.requestAnimationFrame(onFrame);
   };
   frameRequest = windowRef.requestAnimationFrame(onFrame);
-  // Cesium stops drawing after a render error, and so does the timer.
-  // Report the error in full: workers report plain objects, which Cesium
-  // prints as [object Object].
-  let failed = false;
-  const removeErrorListener = viewer.scene?.renderError?.addEventListener(
-    (_scene, error) => {
-      failed = true;
-      console.error(
-        "[God's Eye View panel] render error:",
-        describeError(error),
-      );
-    },
-  );
+  // Cesium stops its render loop after a render error, and the timer stops
+  // with it; Retry restarts both. The render failure notice logs the error
+  // (src/ui/renderFailure.js).
   const timer = windowRef.setInterval(() => {
     if (
-      failed ||
+      viewer.useDefaultRenderLoop === false ||
       now() - lastFrame < MISSED_FRAMES_MS ||
       viewer.isDestroyed?.()
     )
       return;
-    viewer.resize();
-    viewer.render();
+    try {
+      viewer.resize();
+      viewer.render();
+    } catch {
+      // Raised as a render error by now (src/ui/renderFailure.js), which
+      // stops this timer; thrown on, it would only reach the host page.
+    }
   }, PANEL_FRAME_MS);
   return () => {
     windowRef.clearInterval(timer);
     windowRef.cancelAnimationFrame(frameRequest);
-    removeErrorListener?.();
   };
 }
 

src/app/embed.test.mjs

@@ -457,8 +457,7 @@ test('a panel keeps drawing from a timer while animation frames stop', () => {
   assert.equal(frame, null);
 });
 
-test('a panel reports a render error in full and stops drawing', () => {
-  let listener = null;
+test('a panel stops drawing while its render loop is stopped', () => {
   let tick = null;
   const windowRef = {
     requestAnimationFrame: () => 1,
@@ -467,31 +466,19 @@ test('a panel reports a render error in full and stops drawing', () => {
     clearInterval() {},
   };
   const drawn = [];
-  const viewer = {
-    resize() {},
-    render: () => drawn.push('render'),
-    scene: {
-      renderError: {
-        addEventListener: (fn) => ((listener = fn), () => (listener = null)),
-      },
-    },
-  };
-  const logged = [];
-  const original = console.error;
-  console.error = (...args) => logged.push(args.join(' '));
-  try {
-    let clock = 0;
-    const stop = keepPanelRendering(viewer, { windowRef, now: () => clock });
-    listener(viewer.scene, { name: 'RuntimeError', message: 'worker failed' });
-    assert.match(logged[0], /render error: .*"message":"worker failed"/);
-    clock = 1000;
-    tick();
-    assert.deepEqual(drawn, []);
-    stop();
-    assert.equal(listener, null);
-  } finally {
-    console.error = original;
-  }
+  const viewer = { resize() {}, render: () => drawn.push('render') };
+  let clock = 0;
+  const stop = keepPanelRendering(viewer, { windowRef, now: () => clock });
+  // Cesium stops its render loop after a render error.
+  viewer.useDefaultRenderLoop = false;
+  clock = 1000;
+  tick();
+  assert.deepEqual(drawn, []);
+  // Retry restarts it, and the timer draws again.
+  viewer.useDefaultRenderLoop = true;
+  tick();
+  assert.deepEqual(drawn, ['render']);
+  stop();
 });
 
 test('a followed aircraft owns the camera, and cockpit view is entered after it', async () => {

src/app/renderFailureInlineRetry.test.mjs

@@ -0,0 +1,120 @@
+// Retry in an inline panel whose host stops animation frames, so the panel
+// draws from keepPanelRendering's timer. Drives Cesium's real startRenderLoop
+// and useDefaultRenderLoop setter (CesiumWidget.prototype).
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import * as Cesium from 'cesium';
+import { keepPanelRendering } from './embed.js';
+import { renderLoopFixture } from '../ui/renderLoopFixture.mjs';
+
+function setup() {
+  let tick = null;
+  let clock = 0;
+  // The host reports the panel hidden: its own animation frames never arrive.
+  const windowRef = {
+    requestAnimationFrame: () => 1,
+    cancelAnimationFrame() {},
+    setInterval: (fn) => ((tick = fn), 1),
+    clearInterval() {},
+  };
+  const previousError = console.error;
+  console.error = () => {};
+  const state = { failure: null, drawn: 0 };
+  const scene = {
+    renderError: new Cesium.Event(),
+    preUpdate: new Cesium.Event(),
+    postRender: new Cesium.Event(),
+    requestRender() {},
+    initializeFrame() {},
+    // Scene.render: a failing primitive update raises renderError
+    // (tryAndCatchError) and returns; a failing listener throws.
+    render() {
+      state.drawn += 1;
+      this.preUpdate.raiseEvent(this);
+      if (state.failure === 'caught')
+        this.renderError.raiseEvent(this, new Error('boom'));
+      if (state.failure === 'thrown') throw new Error('boom');
+      this.postRender.raiseEvent(this);
+    },
+  };
+  const { frames, widget, viewer, store, runFrames, restore } =
+    renderLoopFixture(scene, {
+      viewer: {
+        isDestroyed: () => false,
+        render: () => widget.render(),
+        resize: () => widget.resize(),
+      },
+      notice: { allowReload: false },
+    });
+  const stop = keepPanelRendering(viewer, { windowRef, now: () => clock });
+  viewer.useDefaultRenderLoop = true;
+  const timerFrame = () => {
+    clock += 400;
+    tick();
+  };
+  return {
+    frames,
+    state,
+    store,
+    timerFrame,
+    animationFrames: runFrames,
+    restore: () => {
+      stop();
+      restore();
+      console.error = previousError;
+    },
+  };
+}
+
+for (const failure of ['caught', 'thrown']) {
+  test(`an error ${failure} in a frame the timer draws: Retry draws again with one render loop`, () => {
+    const { frames, state, store, timerFrame, animationFrames, restore } =
+      setup();
+    try {
+      // The host stops animation frames with the loop's next one queued.
+      assert.equal(frames.length, 1);
+      state.failure = failure;
+      timerFrame(); // an error thrown here does not reach the host page
+      assert.equal(store.renderFailure?.reason, 'render-error');
+      assert.equal(typeof store.renderFailure.retry, 'function');
+      state.failure = null;
+      store.renderFailure.retry();
+      const before = state.drawn;
+      timerFrame();
+      assert.ok(state.drawn > before, 'the panel draws again after Retry');
+      assert.equal(
+        store.renderFailure,
+        null,
+        'a clean frame clears the notice',
+      );
+      assert.equal(frames.length, 1, 'Retry starts no second loop');
+      // The host resumes frames: the globe draws once a frame.
+      state.drawn = 0;
+      animationFrames(3);
+      assert.equal(state.drawn, 3);
+    } finally {
+      restore();
+    }
+  });
+}
+
+test('an error Scene caught in an animation frame right before the host stopped frames: Retry keeps one render loop', () => {
+  const { frames, state, store, timerFrame, animationFrames, restore } =
+    setup();
+  try {
+    state.failure = 'caught';
+    animationFrames(1);
+    assert.equal(store.renderFailure?.reason, 'render-error');
+    assert.equal(frames.length, 1);
+    state.failure = null;
+    store.renderFailure.retry();
+    timerFrame();
+    assert.equal(store.renderFailure, null);
+    assert.equal(frames.length, 1, 'Retry starts no second loop');
+    state.drawn = 0;
+    animationFrames(3);
+    assert.equal(state.drawn, 3);
+  } finally {
+    restore();
+  }
+});

src/app/scene.js

@@ -15,6 +15,8 @@ import {
   governorRequestRender,
 } from '../renderGovernor.js';
 import { describeError } from './errors.js';
+import { isEmbeddedInline } from './embed.js';
+import { installRenderFailureNotice } from '../ui/renderFailure.js';
 import { worldClock, worldTimeFor } from '../time/worldClock.js';
 import { followWorldTime } from '../time/viewerClock.js';
 import { onLocaleChange, t } from '../i18n/index.js';
@@ -55,11 +57,17 @@ export async function createApplicationScene({
   const viewer = createApplicationViewer({
     container: 'cesiumContainer',
     creditContainer,
+    // The render failure notice below replaces Cesium's dead-end panel.
+    showRenderLoopErrors: false,
   });
   defer(() => {
     uninstallRenderGovernor(viewer);
     if (!viewer.isDestroyed()) viewer.destroy();
   });
+  // An inline panel must not reload or navigate its host's page.
+  defer(
+    installRenderFailureNotice(viewer, { allowReload: !isEmbeddedInline() }),
+  );
   defer(installTrackpadPinchZoom(viewer));
   defer(
     followWorldTime(viewer, worldTimeFor('sky'), {

src/app/viewer.js

@@ -375,8 +375,15 @@ export function installGlobeInViewRecovery(
   };
 }
 
-/** Cesium.Viewer options of the standard globe viewer. */
-export function applicationViewerOptions(creditContainer) {
+/**
+ * Cesium.Viewer options of the standard globe viewer. `showRenderLoopErrors`
+ * false leaves render errors to the caller's own notice instead of Cesium's
+ * panel.
+ */
+export function applicationViewerOptions(
+  creditContainer,
+  { showRenderLoopErrors = true } = {},
+) {
   return {
     timeline: false,
     animation: false,
@@ -396,16 +403,21 @@ export function applicationViewerOptions(creditContainer) {
     creditContainer,
     msaaSamples: 4,
     contextOptions: { webgl: { preserveDrawingBuffer: true } },
+    showRenderLoopErrors,
   };
 }
 
 /** Create the standard globe viewer in caller-owned, visible containers. */
-export function createApplicationViewer({ container, creditContainer }) {
+export function createApplicationViewer({
+  container,
+  creditContainer,
+  showRenderLoopErrors,
+}) {
   if (!container || !creditContainer)
     throw new TypeError('Viewer and credit containers are required');
   const viewer = new Cesium.Viewer(
     container,
-    applicationViewerOptions(creditContainer),
+    applicationViewerOptions(creditContainer, { showRenderLoopErrors }),
   );
   try {
     viewer.targetFrameRate = 60;

src/data/fleetModels.js

@@ -133,8 +133,9 @@ export function hullBeam(beam) {
 /**
  * The model for a vessel of AIS ship type `shipType` and the reported length
  * and beam (metres) and name: the first rule that matches in the first type
- * range that has one, else `default_vessel`. Drawn at the reported length, as
- * built when it is unknown.
+ * range that has one, else `default_vessel`. Drawn at the reported length;
+ * when it is unknown (most live feeds send none), chosen and drawn at the
+ * range's `typical_len`, else as built.
  * @param {object} types Parsed `types.json`.
  * @param {number} [shipType]
  * @param {number} [length]
@@ -145,13 +146,14 @@ export function hullBeam(beam) {
 export function resolveVessel(types, shipType, length, beam, name) {
   const L = hullLength(length) ?? 0;
   const B = hullBeam(beam) ?? 0;
-  const drawn = L > 0 ? L : null;
   if (shipType !== undefined && shipType !== null) {
     for (const group of types.vessels) {
       if (!(shipType >= group.types[0] && shipType <= group.types[1])) continue;
+      const len = L > 0 ? L : (group.typical_len ?? 0);
+      const drawn = len > 0 ? len : null;
       for (const rule of group.rules) {
-        if (rule.min_len && L < rule.min_len) continue;
-        if (rule.max_len && L > rule.max_len) continue;
+        if (rule.min_len && len < rule.min_len) continue;
+        if (rule.max_len && len > rule.max_len) continue;
         if (rule.name_re && !new RegExp(rule.name_re).test(name ?? ''))
           continue;
         if (rule.max_bl && !(B > 0 && L > 0 && B / L <= rule.max_bl)) continue;
@@ -159,7 +161,7 @@ export function resolveVessel(types, shipType, length, beam, name) {
       }
     }
   }
-  return { model: types.default_vessel, length: drawn };
+  return { model: types.default_vessel, length: L > 0 ? L : null };
 }
 
 /**
@@ -341,18 +343,22 @@ export function aircraftModelSpec(set, { typeCode, type, category } = {}) {
  * @returns {object} {@link fleetModelSpec}
  */
 export function vesselModelSpec(set, { type, length, beam, name } = {}) {
+  // A beam counts only beside a reported length: a vessel drawn at its type's
+  // typical length keeps the model's proportions.
+  const reported = hullLength(length ?? undefined);
+  const hullWidth = reported === undefined ? undefined : (beam ?? undefined);
   const resolved = resolveVessel(
     set.types,
     aisShipTypeCode(type),
-    length ?? undefined,
-    beam ?? undefined,
+    reported,
+    hullWidth,
     name ?? undefined,
   );
   return specOf(
     set,
     resolved,
     (r) => ({ model: set.types.default_vessel, length: r.length }),
-    { beam: beam ?? undefined },
+    { beam: hullWidth },
   );
 }
 

src/data/fleetModels.test.mjs

@@ -57,6 +57,7 @@ const sliceTypes = {
   vessels: [
     {
       types: [70, 79],
+      typical_len: 300,
       rules: [
         { min_len: 70, max_len: 140, max_bl: 0.12, model: 'inland_cargo' },
         {
@@ -133,6 +134,29 @@ test('vessels: the first matching rule of the first type range with one, else th
   });
 });
 
+test("vessels of unknown length are chosen and drawn at their range's typical length", () => {
+  assert.deepEqual(resolveVessel(sliceTypes, 70), {
+    model: 'container_ship',
+    length: 300,
+  });
+  assert.deepEqual(resolveVessel(sliceTypes, 70, 511, 126), {
+    model: 'container_ship',
+    length: 300,
+  });
+  assert.deepEqual(resolveVessel(sliceTypes, 70, 90, 15), {
+    model: 'general_cargo',
+    length: 90,
+  });
+  assert.deepEqual(resolveVessel(sliceTypes, 31), {
+    model: 'tug',
+    length: null,
+  });
+  // Every passenger, cargo and tanker range of the set has one.
+  for (const code of [60, 70, 80]) {
+    assert.ok(resolveVessel(types, code).length > 100, String(code));
+  }
+});
+
 test("vessels: AIS's out-of-range sizes (511 m long, 126 m abeam) are unknown, drawn as built", () => {
   assert.deepEqual(resolveVessel(sliceTypes, 52, 511), {
     model: 'tug',
@@ -267,6 +291,12 @@ test('vessel specs read AIS codes and text families, stretched to the reported b
   const [sx, sy, sz] = box.scaleXYZ;
   assert.ok(Math.abs(sy - 51 / catalog.container_ship.beam) < 1e-12);
   assert.ok(Math.abs(sz - (sx + sy) / 2) < 1e-12);
+  // A beam with no reported length: the type's typical length, in the model's
+  // own proportions, not a typical-length hull squeezed to that beam.
+  const unsized = vesselModelSpec(set, { type: '70', length: 0, beam: 14 });
+  assert.equal(unsized.model, 'container_ship');
+  const [ux, uy, uz] = unsized.scaleXYZ;
+  assert.ok(Math.abs(uy - ux) < 1e-12 && Math.abs(uz - ux) < 1e-12);
   assert.equal(vesselModelSpec(set, { type: 'Tug', length: 30 }).model, 'tug');
   assert.equal(vesselModelSpec(set, { type: '36' }).model, 'sailboat');
   // No type, no size: the generic vessel as built.

src/i18n/locales/ar.json

@@ -3953,5 +3953,12 @@
   "Confirm: remove every added entry from Data Layers": "تأكيد: إزالة كل الإدخالات المُضافة من طبقات البيانات",
   "Remove every added entry from Data Layers": "إزالة كل الإدخالات المُضافة من طبقات البيانات",
   "Showing {shown} of {total}": "عرض {shown} من {total}",
-  "BROWSE DATA LIBRARY": "تصفّح مكتبة البيانات"
+  "BROWSE DATA LIBRARY": "تصفّح مكتبة البيانات",
+  "The globe stopped drawing": "توقفت الكرة الأرضية عن الرسم",
+  "The browser took back the globe's 3D graphics. Layers and controls still work, but the map cannot draw until the page reloads.": "استعاد المتصفح رسومات الكرة الأرضية ثلاثية الأبعاد. لا تزال الطبقات وعناصر التحكم تعمل، لكن الخريطة لن تُرسم حتى تُعاد تحميل الصفحة.",
+  "Rendering stopped after an error. Layers and controls still work, but the map is not updating.": "توقف العرض بعد خطأ. لا تزال الطبقات وعناصر التحكم تعمل، لكن الخريطة لا يتم تحديثها.",
+  "Reset view reloads the app without the view restored from the address bar.": "تعيد «إعادة ضبط العرض» تحميل التطبيق دون العرض المستعاد من شريط العنوان.",
+  "Reload": "إعادة التحميل",
+  "Retry": "إعادة المحاولة",
+  "Reset view": "إعادة ضبط العرض"
 }

src/i18n/locales/de.json

@@ -3605,5 +3605,12 @@
   "Confirm: remove every added entry from Data Layers": "Bestätigen: alle hinzugefügten Einträge aus Datenebenen entfernen",
   "Remove every added entry from Data Layers": "Alle hinzugefügten Einträge aus Datenebenen entfernen",
   "Showing {shown} of {total}": "{shown} von {total} angezeigt",
-  "BROWSE DATA LIBRARY": "DATENBIBLIOTHEK DURCHSUCHEN"
+  "BROWSE DATA LIBRARY": "DATENBIBLIOTHEK DURCHSUCHEN",
+  "The globe stopped drawing": "Der Globus zeichnet nicht mehr",
+  "The browser took back the globe's 3D graphics. Layers and controls still work, but the map cannot draw until the page reloads.": "Der Browser hat dem Globus die 3D-Grafik entzogen. Ebenen und Bedienelemente funktionieren weiter, aber die Karte kann erst nach dem Neuladen der Seite wieder zeichnen.",
+  "Rendering stopped after an error. Layers and controls still work, but the map is not updating.": "Das Rendern wurde nach einem Fehler angehalten. Ebenen und Bedienelemente funktionieren weiter, aber die Karte wird nicht aktualisiert.",
+  "Reset view reloads the app without the view restored from the address bar.": "Ansicht zurücksetzen lädt die App ohne die aus der Adressleiste wiederhergestellte Ansicht neu.",
+  "Reload": "Neu laden",
+  "Retry": "Erneut versuchen",
+  "Reset view": "Ansicht zurücksetzen"
 }

src/i18n/locales/es.json

@@ -3692,5 +3692,12 @@
   "500–1,000 m": "500–1000 m",
   "1,000–2,000 m": "1000–2000 m",
   "2,000–3,000 m": "2000–3000 m",
-  "3,000 m and above": "3000 m o más"
+  "3,000 m and above": "3000 m o más",
+  "The globe stopped drawing": "El globo dejó de dibujarse",
+  "The browser took back the globe's 3D graphics. Layers and controls still work, but the map cannot draw until the page reloads.": "El navegador retiró los gráficos 3D del globo. Las capas y los controles siguen funcionando, pero el mapa no se dibujará hasta que se recargue la página.",
+  "Rendering stopped after an error. Layers and controls still work, but the map is not updating.": "El renderizado se detuvo tras un error. Las capas y los controles siguen funcionando, pero el mapa no se actualiza.",
+  "Reset view reloads the app without the view restored from the address bar.": "Restablecer la vista recarga la app sin la vista restaurada desde la barra de direcciones.",
+  "Reload": "Recargar",
+  "Retry": "Reintentar",
+  "Reset view": "Restablecer la vista"
 }

src/i18n/locales/fr.json

@@ -3692,5 +3692,12 @@
   "Confirm: remove every added entry from Data Layers": "Confirmer : retirer du panneau Couches toutes les entrées ajoutées",
   "Remove every added entry from Data Layers": "Retirer du panneau Couches toutes les entrées ajoutées",
   "Showing {shown} of {total}": "Affichées : {shown} sur {total}",
-  "BROWSE DATA LIBRARY": "PARCOURIR LA BIBLIOTHÈQUE DE DONNÉES"
+  "BROWSE DATA LIBRARY": "PARCOURIR LA BIBLIOTHÈQUE DE DONNÉES",
+  "The globe stopped drawing": "Le globe ne s’affiche plus",
+  "The browser took back the globe's 3D graphics. Layers and controls still work, but the map cannot draw until the page reloads.": "Le navigateur a retiré au globe ses graphismes 3D. Les calques et les commandes fonctionnent toujours, mais la carte ne pourra s’afficher qu’après le rechargement de la page.",
+  "Rendering stopped after an error. Layers and controls still work, but the map is not updating.": "Le rendu s’est arrêté après une erreur. Les calques et les commandes fonctionnent toujours, mais la carte ne se met plus à jour.",
+  "Reset view reloads the app without the view restored from the address bar.": "Réinitialiser la vue recharge l’app sans la vue restaurée depuis la barre d’adresse.",
+  "Reload": "Recharger",
+  "Retry": "Réessayer",
+  "Reset view": "Réinitialiser la vue"
 }

src/i18n/locales/he.json

@@ -3692,5 +3692,12 @@
   "Confirm: remove every added entry from Data Layers": "אישור: הסרת כל הפריטים שנוספו משכבות נתונים",
   "Remove every added entry from Data Layers": "הסרת כל הפריטים שנוספו משכבות נתונים",
   "Showing {shown} of {total}": "מוצגים {shown} מתוך {total}",
-  "BROWSE DATA LIBRARY": "עיון בספריית הנתונים"
+  "BROWSE DATA LIBRARY": "עיון בספריית הנתונים",
+  "The globe stopped drawing": "הגלובוס הפסיק להצטייר",
+  "The browser took back the globe's 3D graphics. Layers and controls still work, but the map cannot draw until the page reloads.": "הדפדפן לקח בחזרה את הגרפיקה התלת-ממדית של הגלובוס. השכבות והפקדים עדיין פועלים, אבל המפה לא תוכל להצטייר עד שהעמוד ייטען מחדש.",
+  "Rendering stopped after an error. Layers and controls still work, but the map is not updating.": "הרינדור נעצר בעקבות שגיאה. השכבות והפקדים עדיין פועלים, אבל המפה אינה מתעדכנת.",
+  "Reset view reloads the app without the view restored from the address bar.": "\"איפוס תצוגה\" טוען מחדש את האפליקציה בלי התצוגה ששוחזרה משורת הכתובת.",
+  "Reload": "טען מחדש",
+  "Retry": "נסה שוב",
+  "Reset view": "איפוס תצוגה"
 }

src/i18n/locales/it.json

@@ -3692,5 +3692,12 @@
   "Confirm: remove every added entry from Data Layers": "Conferma: rimuovi da Livelli dati tutte le voci aggiunte",
   "Remove every added entry from Data Layers": "Rimuovi da Livelli dati tutte le voci aggiunte",
   "Showing {shown} of {total}": "Mostrati: {shown} su {total}",
-  "BROWSE DATA LIBRARY": "ESPLORA LIBRERIA DATI"
+  "BROWSE DATA LIBRARY": "ESPLORA LIBRERIA DATI",
+  "The globe stopped drawing": "Il globo ha smesso di disegnare",
+  "The browser took back the globe's 3D graphics. Layers and controls still work, but the map cannot draw until the page reloads.": "Il browser ha ritirato la grafica 3D del globo. Livelli e controlli funzionano ancora, ma la mappa non può essere disegnata finché la pagina non viene ricaricata.",
+  "Rendering stopped after an error. Layers and controls still work, but the map is not updating.": "Il rendering si è fermato dopo un errore. Livelli e controlli funzionano ancora, ma la mappa non si aggiorna.",
+  "Reset view reloads the app without the view restored from the address bar.": "Ripristina vista ricarica l’app senza la vista ripristinata dalla barra degli indirizzi.",
+  "Reload": "Ricarica",
+  "Retry": "Riprova",
+  "Reset view": "Ripristina vista"
 }

src/i18n/locales/ja.json

@@ -3518,5 +3518,12 @@
   "Confirm: remove every added entry from Data Layers": "確認：追加したすべての項目をデータレイヤーから削除",
   "Remove every added entry from Data Layers": "追加したすべての項目をデータレイヤーから削除",
   "Showing {shown} of {total}": "{total}件中{shown}件を表示",
-  "BROWSE DATA LIBRARY": "データライブラリを見る"
+  "BROWSE DATA LIBRARY": "データライブラリを見る",
+  "The globe stopped drawing": "地球儀の描画が止まりました",
+  "The browser took back the globe's 3D graphics. Layers and controls still work, but the map cannot draw until the page reloads.": "ブラウザーが地球儀の 3D グラフィックスを解放しました。レイヤーと操作は引き続き使えますが、ページを再読み込みするまで地図は描画されません。",
+  "Rendering stopped after an error. Layers and controls still work, but the map is not updating.": "エラーのため描画が停止しました。レイヤーと操作は引き続き使えますが、地図は更新されません。",
+  "Reset view reloads the app without the view restored from the address bar.": "「ビューをリセット」は、アドレスバーから復元したビューを使わずにアプリを再読み込みします。",
+  "Reload": "再読み込み",
+  "Retry": "再試行",
+  "Reset view": "ビューをリセット"
 }

src/i18n/locales/pt.json

@@ -3692,5 +3692,12 @@
   "Confirm: remove every added entry from Data Layers": "Confirmar: remover de \"Camadas de dados\" todas as entradas adicionadas",
   "Remove every added entry from Data Layers": "Remover de \"Camadas de dados\" todas as entradas adicionadas",
   "Showing {shown} of {total}": "Mostrando {shown} de {total}",
-  "BROWSE DATA LIBRARY": "EXPLORAR BIBLIOTECA DE DADOS"
+  "BROWSE DATA LIBRARY": "EXPLORAR BIBLIOTECA DE DADOS",
+  "The globe stopped drawing": "O globo parou de desenhar",
+  "The browser took back the globe's 3D graphics. Layers and controls still work, but the map cannot draw until the page reloads.": "O navegador retirou os gráficos 3D do globo. As camadas e os controles continuam funcionando, mas o mapa só volta a ser desenhado depois de recarregar a página.",
+  "Rendering stopped after an error. Layers and controls still work, but the map is not updating.": "A renderização parou após um erro. As camadas e os controles continuam funcionando, mas o mapa não está sendo atualizado.",
+  "Reset view reloads the app without the view restored from the address bar.": "Redefinir vista recarrega o app sem a vista restaurada da barra de endereços.",
+  "Reload": "Recarregar",
+  "Retry": "Tentar novamente",
+  "Reset view": "Redefinir vista"
 }

src/i18n/locales/ru.json

@@ -3779,5 +3779,12 @@
   "500–1,000 m": "500–1000 м",
   "1,000–2,000 m": "1000–2000 м",
   "2,000–3,000 m": "2000–3000 м",
-  "3,000 m and above": "3000 м и выше"
+  "3,000 m and above": "3000 м и выше",
+  "The globe stopped drawing": "Глобус перестал отрисовываться",
+  "The browser took back the globe's 3D graphics. Layers and controls still work, but the map cannot draw until the page reloads.": "Браузер отключил 3D-графику глобуса. Слои и элементы управления работают, но карта не отрисуется, пока страница не будет перезагружена.",
+  "Rendering stopped after an error. Layers and controls still work, but the map is not updating.": "Отрисовка остановилась из-за ошибки. Слои и элементы управления работают, но карта не обновляется.",
+  "Reset view reloads the app without the view restored from the address bar.": "«Сбросить вид» перезагружает приложение без вида, восстановленного из адресной строки.",
+  "Reload": "Перезагрузить",
+  "Retry": "Повторить",
+  "Reset view": "Сбросить вид"
 }

src/i18n/locales/sv.json

@@ -3605,5 +3605,12 @@
   "Confirm: remove every added entry from Data Layers": "Bekräfta: ta bort alla tillagda poster från Datalager",
   "Remove every added entry from Data Layers": "Ta bort alla tillagda poster från Datalager",
   "Showing {shown} of {total}": "Visar {shown} av {total}",
-  "BROWSE DATA LIBRARY": "BLÄDDRA I DATABIBLIOTEKET"
+  "BROWSE DATA LIBRARY": "BLÄDDRA I DATABIBLIOTEKET",
+  "The globe stopped drawing": "Globen ritas inte längre",
+  "The browser took back the globe's 3D graphics. Layers and controls still work, but the map cannot draw until the page reloads.": "Webbläsaren tog tillbaka globens 3D-grafik. Lager och reglage fungerar fortfarande, men kartan kan inte ritas förrän sidan laddas om.",
+  "Rendering stopped after an error. Layers and controls still work, but the map is not updating.": "Renderingen stoppades efter ett fel. Lager och reglage fungerar fortfarande, men kartan uppdateras inte.",
+  "Reset view reloads the app without the view restored from the address bar.": "”Återställ vy” laddar om appen utan vyn som återställdes från adressfältet.",
+  "Reload": "Ladda om",
+  "Retry": "Försök igen",
+  "Reset view": "Återställ vy"
 }

src/i18n/locales/uk.json

@@ -3779,5 +3779,12 @@
   "Confirm: remove every added entry from Data Layers": "Підтвердити: видалити всі додані записи з «Шарів даних»",
   "Remove every added entry from Data Layers": "Видалити всі додані записи з «Шарів даних»",
   "Showing {shown} of {total}": "Показано {shown} з {total}",
-  "BROWSE DATA LIBRARY": "ВІДКРИТИ БІБЛІОТЕКУ ДАНИХ"
+  "BROWSE DATA LIBRARY": "ВІДКРИТИ БІБЛІОТЕКУ ДАНИХ",
+  "The globe stopped drawing": "Глобус перестав відмальовуватися",
+  "The browser took back the globe's 3D graphics. Layers and controls still work, but the map cannot draw until the page reloads.": "Браузер вимкнув 3D-графіку глобуса. Шари та елементи керування працюють, але карта не відмалюється, доки сторінку не буде перезавантажено.",
+  "Rendering stopped after an error. Layers and controls still work, but the map is not updating.": "Відмальовування зупинилося через помилку. Шари та елементи керування працюють, але карта не оновлюється.",
+  "Reset view reloads the app without the view restored from the address bar.": "«Скинути вигляд» перезавантажує застосунок без вигляду, відновленого з адресного рядка.",
+  "Reload": "Перезавантажити",
+  "Retry": "Повторити",
+  "Reset view": "Скинути вигляд"
 }

src/i18n/locales/zh-CN.json

@@ -3518,5 +3518,12 @@
   "Confirm: remove every added entry from Data Layers": "确认：从数据图层中移除所有已添加条目",
   "Remove every added entry from Data Layers": "从数据图层中移除所有已添加条目",
   "Showing {shown} of {total}": "显示 {shown} / {total}",
-  "BROWSE DATA LIBRARY": "浏览数据资源库"
+  "BROWSE DATA LIBRARY": "浏览数据资源库",
+  "The globe stopped drawing": "地球已停止绘制",
+  "The browser took back the globe's 3D graphics. Layers and controls still work, but the map cannot draw until the page reloads.": "浏览器收回了地球的 3D 图形。图层和控件仍可使用，但在重新加载页面之前地图无法绘制。",
+  "Rendering stopped after an error. Layers and controls still work, but the map is not updating.": "渲染因错误而停止。图层和控件仍可使用，但地图不再更新。",
+  "Reset view reloads the app without the view restored from the address bar.": "“重置视图”会重新加载应用，不使用从地址栏恢复的视图。",
+  "Reload": "重新加载",
+  "Retry": "重试",
+  "Reset view": "重置视图"
 }

src/i18n/locales/zh-Hant.json

@@ -3518,5 +3518,12 @@
   "Confirm: remove every added entry from Data Layers": "確認：從數據圖層中移除所有已添加條目",
   "Remove every added entry from Data Layers": "從數據圖層中移除所有已添加條目",
   "Showing {shown} of {total}": "顯示 {shown} / {total}",
-  "BROWSE DATA LIBRARY": "瀏覽數據資源庫"
+  "BROWSE DATA LIBRARY": "瀏覽數據資源庫",
+  "The globe stopped drawing": "地球已停止繪製",
+  "The browser took back the globe's 3D graphics. Layers and controls still work, but the map cannot draw until the page reloads.": "瀏覽器收回了地球的 3D 圖形。圖層和控件仍可使用，但在重新加載頁面之前地圖無法繪製。",
+  "Rendering stopped after an error. Layers and controls still work, but the map is not updating.": "渲染因錯誤而停止。圖層和控件仍可使用，但地圖不再更新。",
+  "Reset view reloads the app without the view restored from the address bar.": "「重置視圖」會重新加載應用，不使用從地址欄恢復的視圖。",
+  "Reload": "重新加載",
+  "Retry": "重試",
+  "Reset view": "重置視圖"
 }

src/ui/applicationShell.js

@@ -1200,6 +1200,11 @@ export class StyleManager extends ShellFacade {
         toggleEnabled: (...args) => this._toggleCctvEnabled(...args),
         runExplicitFocus: (...args) => this._runExplicitCctvFocus(...args),
         setPanelCollapsed: (...args) => this.setPanelCollapsed(...args),
+        // Clear selected data layers and Context isolation switch the layer
+        // off without the user asking: the panel keeps its state for both.
+        preservePanelState: () =>
+          this._preservePanelStateDuringLayerClear ||
+          this._contextSuspendsLayer('cctv'),
         showToast: (message) => this._showToast(message),
         syncViewport: () => this._syncCctvPanelViewport(),
       },

src/ui/cctvControls.js

@@ -54,6 +54,7 @@ export class CctvControls {
     this._cctvSummaryTypingTimer = null;
     this._lastCctvSummaryText = '';
     this._lastSeenCctvActiveId = null;
+    this._wasCctvEnabled = false;
     this._cctvChipHideTimer = null;
     this._cctvChipWasBusy = false;
     // The camera grid chip as last published; its label stays while hidden.

src/ui/cctvPanel.test.mjs

@@ -513,3 +513,96 @@ test('the panel meta line reads a bearing that rounds to north as HDG 0°', () =
   assert.match(meta(359.4), /· HDG 359° ·/);
   assert.match(meta(359.6), /· HDG 0° ·/);
 });
+
+/** The panel collapses the test asked for, as `[panelId, collapsed]` pairs. */
+function collapseCalls(controls) {
+  const calls = [];
+  controls.actions.setPanelCollapsed = (panelId, collapsed) => {
+    calls.push([panelId, collapsed]);
+    // The panel chrome owns the class the controls read back.
+    controls._cctvPanel.classList.toggle('collapsed', collapsed);
+  };
+  return calls;
+}
+
+const activeState = {
+  enabled: true,
+  count: 1,
+  cameraIndex: [],
+  activeCameraId: camera.id,
+  activeCamera: camera,
+};
+
+test('switching the layer off collapses the panel it opened', (t) => {
+  const { controls } = panel(t);
+  const calls = collapseCalls(controls);
+  controls._renderCctvState(activeState);
+  assert.deepEqual(calls, [['cctv-panel', false]]);
+  // The layer keeps its active camera while off.
+  controls._renderCctvState({ ...activeState, enabled: false });
+  assert.deepEqual(calls.at(-1), ['cctv-panel', true]);
+  // A panel reopened by hand stays open through later notifications while
+  // the layer is off: only the on → off change collapses.
+  controls._cctvPanel.classList.remove('collapsed');
+  controls._renderCctvState({ ...activeState, enabled: false });
+  assert.equal(calls.length, 2);
+  assert.equal(controls._cctvPanel.classList.contains('collapsed'), false);
+});
+
+test('a layer that was never on leaves an open panel alone', (t) => {
+  const { controls } = panel(t);
+  const calls = collapseCalls(controls);
+  controls._renderCctvState({ enabled: false, count: 3, cameraIndex: [] });
+  controls._renderCctvState({ enabled: false, count: 3, cameraIndex: [] });
+  assert.deepEqual(calls, []);
+});
+
+test('the data manager switching the layer off collapses the panel too', (t) => {
+  const { controls } = panel(t);
+  const calls = collapseCalls(controls);
+  let on = true;
+  controls.actions.isEnabled = () => on;
+  controls._renderCctvState(activeState);
+  on = false;
+  controls._renderCctvState(activeState);
+  assert.deepEqual(calls.at(-1), ['cctv-panel', true]);
+});
+
+test('a layer the application suspends keeps its panel through the round trip', (t) => {
+  const { controls } = panel(t);
+  const calls = collapseCalls(controls);
+  // Clear selected data layers and Context isolation both answer true.
+  let suspended = true;
+  controls.actions.preservePanelState = () => suspended;
+  controls._renderCctvState(activeState);
+  controls._renderCctvState({ ...activeState, enabled: false });
+  assert.equal(controls._cctvPanel.classList.contains('collapsed'), false);
+  suspended = false;
+  controls._renderCctvState(activeState);
+  assert.equal(controls._cctvPanel.classList.contains('collapsed'), false);
+  assert.ok(calls.every(([, collapsed]) => collapsed === false));
+  // The next switch-off is the user's again.
+  controls._renderCctvState({ ...activeState, enabled: false });
+  assert.deepEqual(calls.at(-1), ['cctv-panel', true]);
+});
+
+test('a panel the accordion folded still has its saved state closed', (t) => {
+  const { controls } = panel(t);
+  controls._renderCctvState(activeState);
+  const calls = [];
+  controls.actions.setPanelCollapsed = (...args) => calls.push(args);
+  // Folded for layout only: the class is there, the saved state is open. The
+  // panel chrome tells the two apart, so the controls always ask it.
+  controls._cctvPanel.classList.add('collapsed');
+  controls._renderCctvState({ ...activeState, enabled: false });
+  assert.deepEqual(calls, [['cctv-panel', true]]);
+});
+
+test('the meta line of a disabled layer does not describe its last camera', () => {
+  const off = { ...activeState, enabled: false, count: 3 };
+  assert.equal(
+    presentCctvPanel(off, false).meta,
+    '3 cameras loaded · enable CCTV to activate',
+  );
+  assert.match(presentCctvPanel(activeState, true).meta, /^Austin · HDG /);
+});

src/ui/cctvPresentation.js

@@ -90,7 +90,9 @@ export function presentCctvPanel(state, enabled) {
 }
 
 function metaText(state, enabled, activeCamera, catalogCount) {
-  if (activeCamera) {
+  // The layer keeps its active camera while off: a disabled panel must not
+  // describe a feed it no longer shows.
+  if (enabled && activeCamera) {
     const provider = cctvSourceLabelText(
       activeCamera.sourceLabel || activeCamera.provider || 'Configured Source',
     );
@@ -188,6 +190,20 @@ export function _renderCctvState(state) {
     });
   }
   this._lastSeenCctvActiveId = effectiveActiveId;
+  // Switching the layer off closes the panel it opened: nothing is left to
+  // show. Only the on → off change collapses, so a panel the user opens
+  // while the layer is off stays open. Clear selected data layers and
+  // Context isolation keep the panel: the layer comes back with it. The
+  // panel chrome decides whether anything changes: a panel the desktop
+  // accordion only folded still has an open saved state to close.
+  if (
+    this._wasCctvEnabled &&
+    !enabled &&
+    !this.actions.preservePanelState?.()
+  ) {
+    this.actions.setPanelCollapsed('cctv-panel', true);
+  }
+  this._wasCctvEnabled = enabled;
 
   this._updateCctvSyncChip(state?.loading, enabled);
 

src/ui/contextControls.js

@@ -51,6 +51,8 @@ export class ContextControls {
     this._contextRestoreState = null;
     this._contextLayerReactionPromises = new Set();
     this._preservePanelStateDuringLayerClear = false;
+    /** Layers Context isolation is switching off right now. */
+    this._isolatingLayerIds = new Set();
     this._userFacingContextNotificationTokens = new Set();
     this._clearSelectedLayersPromise = null;
     this._clearSelectedLayersManagerPromise = null;
@@ -59,6 +61,16 @@ export class ContextControls {
   showToast(...args) {
     if (!this.destroyed) this.actions.showToast(...args);
   }
+  /**
+   * Whether Context isolation is switching this layer off right now: it is
+   * suspended, and leaving the mode restores it. A switch-off by the user,
+   * inside the mode or out of it, is not.
+   * @param {string} layerId Layer id.
+   * @returns {boolean}
+   */
+  suspendsLayer(layerId) {
+    return this._isolatingLayerIds.has(layerId);
+  }
   setClearBusy(...args) {
     if (!this.destroyed) this.actions.setClearBusy(...args);
   }

src/ui/contextControls.test.mjs

@@ -153,3 +153,56 @@ test('a rejected tracked reaction settles without an unhandled rejection', async
   await controls._waitForContextLayerSettlement();
   assert.equal(controls._contextLayerReactionPromises.size, 0);
 });
+
+test('only a layer Context isolation is switching off is suspended', async (t) => {
+  const { controls } = fixture(t);
+  const enabled = new Set(['cctv']);
+  // What the CCTV panel is told at each visibility change of its layer.
+  const seen = [];
+  controls._dataManager = {
+    layers: new Map([['cctv', {}]]),
+    getEnabledLayerIds: () => [...enabled],
+    getLayerParams: () => null,
+    setLayerParams() {},
+    isEnabled: (layerId) => enabled.has(layerId),
+    isEffectivelyEnabled: (layerId) => enabled.has(layerId),
+    async setEnabled(layerId, next) {
+      // The layer tells its panel it is off while it is being disabled.
+      if (next) enabled.add(layerId);
+      else enabled.delete(layerId);
+      seen.push([layerId, next, controls.suspendsLayer(layerId)]);
+      return true;
+    },
+    async restoreEnabledLayerIds(layerIds) {
+      for (const layerId of layerIds) await this.setEnabled(layerId, true);
+    },
+  };
+  assert.equal(controls.suspendsLayer('cctv'), false);
+  controls._captureContextSessionSnapshot();
+  await controls._clearLayersOutsideContextMode('flights');
+  assert.deepEqual(seen, [['cctv', false, true]]);
+  assert.equal(controls.suspendsLayer('cctv'), false, 'only while isolating');
+  // Inside the mode the user turns CCTV back on, then off: their own.
+  await controls._dataManager.setEnabled('cctv', true);
+  await controls._dataManager.setEnabled('cctv', false);
+  assert.deepEqual(seen.at(-1), ['cctv', false, false]);
+  await controls._restoreContextSession();
+  assert.equal(enabled.has('cctv'), true);
+  // A switch-off after the mode is left is the user's own too.
+  await controls._dataManager.setEnabled('cctv', false);
+  assert.deepEqual(seen.at(-1), ['cctv', false, false]);
+});
+
+test('a failed isolation leaves no layer suspended', async (t) => {
+  const { controls } = fixture(t);
+  controls._dataManager = {
+    layers: new Map([['cctv', {}]]),
+    isEffectivelyEnabled: () => true,
+    isEnabled: () => true,
+    setEnabled: async () => {
+      throw new Error('disable failed');
+    },
+  };
+  await assert.rejects(controls._clearLayersOutsideContextMode('flights'));
+  assert.equal(controls.suspendsLayer('cctv'), false);
+});

src/ui/contextTransactions.js

@@ -240,25 +240,35 @@ export async function _clearLayersOutsideContextMode(
 ) {
   const allowed = contextAllowedLayerIds(mode);
   const pending = [];
-  for (const [layerId] of this._dataManager.layers || []) {
-    // Effective visibility: a disallowed layer still mid-ENABLING must be
-    // isolated too, or it settles ON inside the exclusive mode.
-    if (
-      !allowed.has(layerId) &&
-      this._dataManager.isEffectivelyEnabled(layerId)
-    ) {
-      pending.push({
-        layerId,
-        transition: this._dataManager.setEnabled(layerId, false, {
-          notificationToken,
-          ...(signal ? { signal } : {}),
-        }),
-      });
+  // Panels read this while their layer goes off (suspendsLayer): a layer
+  // isolation switches off is suspended, not switched off by the user.
+  const isolating = [];
+  let results;
+  try {
+    for (const [layerId] of this._dataManager.layers || []) {
+      // Effective visibility: a disallowed layer still mid-ENABLING must be
+      // isolated too, or it settles ON inside the exclusive mode.
+      if (
+        !allowed.has(layerId) &&
+        this._dataManager.isEffectivelyEnabled(layerId)
+      ) {
+        if (!this._isolatingLayerIds.has(layerId)) {
+          this._isolatingLayerIds.add(layerId);
+          isolating.push(layerId);
+        }
+        pending.push({
+          layerId,
+          transition: this._dataManager.setEnabled(layerId, false, {
+            notificationToken,
+            ...(signal ? { signal } : {}),
+          }),
+        });
+      }
     }
+    results = await Promise.all(pending.map(({ transition }) => transition));
+  } finally {
+    for (const layerId of isolating) this._isolatingLayerIds.delete(layerId);
   }
-  const results = await Promise.all(
-    pending.map(({ transition }) => transition),
-  );
   const failed = pending
     .filter(
       ({ layerId }, index) =>

src/ui/renderFailure.js

@@ -0,0 +1,216 @@
+import { useStatusStore } from './stores/status.js';
+import { applicationPinia } from './vueRuntime.js';
+import { describeError } from '../app/errors.js';
+import { appRootUrl } from '../share/shareLinkPath.js';
+
+/**
+ * Show a recoverable notice when the globe stops drawing, instead of a black
+ * globe behind working controls. Retry restarts the render loop, or reloads
+ * after a lost WebGL context; Reset opens the app's root address. With
+ * `allowReload: false`, Reset is dropped and a lost context shows no notice:
+ * only a reload draws again, and the page says so itself.
+ * Returns a function that removes the notice.
+ */
+export function installRenderFailureNotice(
+  viewer,
+  {
+    store = useStatusStore(applicationPinia()),
+    locationRef = globalThis.location,
+    allowReload = true,
+    logError = (error) =>
+      console.error('[Render] The globe stopped drawing:', error),
+  } = {},
+) {
+  const { scene } = viewer;
+  const { canvas } = viewer;
+  let notice = null;
+  let contextLost = false;
+  // With rethrowRenderErrors, Scene throws the error it has just raised;
+  // the render() wrapper must not raise it again.
+  let raisedByScene = null;
+  let frameFailed = false;
+  let removeFrameListeners = null;
+
+  function retry() {
+    if (contextLost) {
+      locationRef.reload();
+      return;
+    }
+    viewer.useDefaultRenderLoop = true;
+    scene.requestRender();
+  }
+
+  function reset() {
+    locationRef.assign(appRootUrl(locationRef.href));
+  }
+
+  function stopWatchingFrames() {
+    removeFrameListeners?.();
+    removeFrameListeners = null;
+  }
+
+  function clear() {
+    stopWatchingFrames();
+    if (store.renderFailure === notice) store.publishRenderFailure(null);
+    notice = null;
+  }
+
+  // Cesium raises postRender after a failed frame too, so only a frame that
+  // starts and ends without a render error clears the notice.
+  function watchFrames() {
+    if (removeFrameListeners || contextLost) return;
+    const removeStart = scene.preUpdate.addEventListener(() => {
+      frameFailed = false;
+      raisedByScene = null;
+    });
+    const removeEnd = scene.postRender.addEventListener(() => {
+      if (!frameFailed) clear();
+    });
+    removeFrameListeners = () => {
+      removeStart();
+      removeEnd();
+    };
+  }
+
+  function present(detail) {
+    const reason = contextLost ? 'context-lost' : 'render-error';
+    // A loop restarted into the same error keeps the notice as it was.
+    if (notice?.reason === reason && notice.detail === detail) return;
+    notice = {
+      reason,
+      detail,
+      retry,
+      reset: allowReload ? reset : null,
+    };
+    store.publishRenderFailure(notice);
+    watchFrames();
+  }
+
+  const onRenderError = (_scene, error) => {
+    raisedByScene = { error };
+    frameFailed = true;
+    logError(error);
+    // A lost context fails every frame after it; the notice keeps saying why.
+    if (contextLost) return;
+    present(error ? describeError(error) : '');
+  };
+  const onContextLost = () => {
+    contextLost = true;
+    // No frame can clear this one; only a reload draws again.
+    stopWatchingFrames();
+    // A page that must not reload has nothing to offer: an inline panel
+    // shows its own lost-context notice (src/app/globePanelRuntime.js).
+    if (!allowReload) {
+      clear();
+      return;
+    }
+    present('');
+  };
+
+  const removeRenderError = scene.renderError.addEventListener(onRenderError);
+  // An error thrown outside Scene's error handling (a frame listener, onTick,
+  // resize) stops the loop without a renderError. Raise one, so Cesium, an
+  // inline panel's timer and this notice all see it. First finish the event
+  // raises it cut short, so listeners added or removed meanwhile apply.
+  const unguard = ['resize', 'render'].map((name) =>
+    reportThrown(viewer.cesiumWidget, name, (error) => {
+      frameEvents(viewer).forEach(finishRaise);
+      if (!raisedByScene || raisedByScene.error !== error)
+        scene.renderError.raiseEvent(scene, error);
+      raisedByScene = null;
+    }),
+  );
+  canvas.addEventListener('webglcontextlost', onContextLost);
+  return () => {
+    removeRenderError();
+    unguard.forEach((restore) => restore());
+    canvas.removeEventListener('webglcontextlost', onContextLost);
+    clear();
+  };
+}
+
+/**
+ * Events Cesium raises in a frame outside Scene's error handling, which a
+ * listener's error can leave mid-raise. Only top-level tilesets are reached.
+ */
+function frameEvents(viewer) {
+  const { scene } = viewer;
+  const events = [
+    scene.preUpdate,
+    scene.postUpdate,
+    scene.preRender,
+    scene.postRender,
+    scene.camera?.changed,
+    scene.camera?.moveStart,
+    scene.camera?.moveEnd,
+    viewer.clock?.onTick,
+    viewer.clock?.onStop,
+    scene.globe?.tileLoadProgressEvent,
+  ];
+  const primitives = scene.primitives;
+  for (let i = 0; i < (primitives?.length ?? 0); i += 1) {
+    const tileset = primitives.get(i);
+    events.push(
+      tileset?.loadProgress,
+      tileset?.allTilesLoaded,
+      tileset?.initialTilesLoaded,
+    );
+  }
+  return events;
+}
+
+/**
+ * Finish a raise a throwing listener cut short. Until a raise ends, Cesium's
+ * `Event` only queues added and removed listeners; apply that queue.
+ * These are Cesium's private fields (`_invokingListeners`, `_toAdd`,
+ * `_toRemove`, `_listeners`, and the widget's `_renderLoopRunning`), checked
+ * against cesium 1.138 / @cesium/engine 22.3.0; the render loop fixture tests
+ * drive the real classes and fail when an upgrade renames them.
+ */
+function finishRaise(event) {
+  if (!event?._invokingListeners) return;
+  event._invokingListeners = false;
+  for (const [listener, scopes] of event._toAdd) {
+    const added = event._listeners.get(listener) ?? new Set();
+    scopes.forEach((scope) => added.add(scope));
+    event._listeners.set(listener, added);
+  }
+  event._toAdd.clear();
+  for (const [listener, scopes] of event._toRemove) {
+    const left = event._listeners.get(listener);
+    scopes.forEach((scope) => left?.delete(scope));
+    if (left?.size === 0) event._listeners.delete(listener);
+  }
+  event._toRemove.clear();
+}
+
+/**
+ * Report an error the widget's `name` method throws, and rethrow it.
+ *
+ * A render error marks the loop stopped, but a call made while it ran leaves
+ * its next frame queued, and that frame stops it. Keep the loop marked
+ * running, so a Retry or a shown tab before that frame starts no second loop.
+ * After a throw, the loop's own catch still marks it stopped.
+ */
+function reportThrown(widget, name, report) {
+  const original = widget?.[name];
+  if (typeof original !== 'function') return () => {};
+  const own = Object.hasOwn(widget, name);
+  const guarded = function (...args) {
+    const looping = widget._renderLoopRunning;
+    try {
+      return original.apply(this, args);
+    } catch (error) {
+      report(error);
+      throw error;
+    } finally {
+      if (looping) widget._renderLoopRunning = true;
+    }
+  };
+  widget[name] = guarded;
+  return () => {
+    if (widget[name] !== guarded) return;
+    if (own) widget[name] = original;
+    else delete widget[name];
+  };
+}

src/ui/renderFailure.test.mjs

@@ -0,0 +1,177 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import * as Cesium from 'cesium';
+import { installRenderFailureNotice } from './renderFailure.js';
+
+function fixture(t, options = {}) {
+  const canvasListeners = new Map();
+  const scene = {
+    renderError: new Cesium.Event(),
+    preUpdate: new Cesium.Event(),
+    postRender: new Cesium.Event(),
+    requestRender() {
+      this.requests = (this.requests ?? 0) + 1;
+    },
+  };
+  const viewer = {
+    scene,
+    useDefaultRenderLoop: true,
+    canvas: {
+      addEventListener: (name, listener) => canvasListeners.set(name, listener),
+      removeEventListener: (name, listener) => {
+        if (canvasListeners.get(name) === listener)
+          canvasListeners.delete(name);
+      },
+    },
+  };
+  const store = {
+    renderFailure: null,
+    published: [],
+    publishRenderFailure(next) {
+      this.renderFailure = next;
+      this.published.push(next);
+    },
+  };
+  const visits = [];
+  const locationRef = {
+    href: 'https://gev.example/share/AQc?lang=ru#lat=48.8584&lon=2.2945',
+    reload: () => visits.push('reload'),
+    assign: (url) => visits.push(String(url)),
+  };
+  const logged = [];
+  const uninstall = installRenderFailureNotice(viewer, {
+    store,
+    locationRef,
+    logError: (error) => logged.push(error),
+    ...options,
+  });
+  t.after(uninstall);
+  // One Cesium frame: preUpdate, an optional render error, then postRender,
+  // which Cesium raises after a failed frame too.
+  const frame = (error) => {
+    scene.preUpdate.raiseEvent(scene);
+    if (error) {
+      viewer.useDefaultRenderLoop = false;
+      scene.renderError.raiseEvent(scene, error);
+    }
+    scene.postRender.raiseEvent(scene);
+  };
+  return {
+    viewer,
+    scene,
+    store,
+    visits,
+    logged,
+    uninstall,
+    frame,
+    loseContext: () => canvasListeners.get('webglcontextlost')?.({}),
+    canvasListeners,
+  };
+}
+
+test('a render error shows a notice that survives the failed frame', (t) => {
+  const f = fixture(t);
+  assert.equal(f.store.renderFailure, null);
+  const error = new Error('Expected width to be greater than 0');
+  f.frame(error);
+  const notice = f.store.renderFailure;
+  assert.equal(notice.reason, 'render-error');
+  assert.equal(notice.detail, 'Expected width to be greater than 0');
+  assert.equal(typeof notice.retry, 'function');
+  assert.equal(typeof notice.reset, 'function');
+  assert.deepEqual(f.logged, [error]);
+});
+
+test('Retry restarts the render loop and a clean frame clears the notice', (t) => {
+  const f = fixture(t);
+  f.frame(new Error('boom'));
+  f.store.renderFailure.retry();
+  assert.equal(f.viewer.useDefaultRenderLoop, true);
+  assert.equal(f.scene.requests, 1);
+  assert.ok(f.store.renderFailure, 'the notice waits for a frame');
+  f.frame();
+  assert.equal(f.store.renderFailure, null);
+  // Clearing stops the per-frame listeners.
+  assert.equal(f.scene.preUpdate.numberOfListeners, 0);
+  assert.equal(f.scene.postRender.numberOfListeners, 0);
+});
+
+test('a loop restarted into the same error keeps one notice', (t) => {
+  const f = fixture(t);
+  f.frame(new Error('boom'));
+  const first = f.store.renderFailure;
+  f.store.renderFailure.retry();
+  f.frame(new Error('boom'));
+  assert.equal(f.store.renderFailure, first);
+  assert.equal(f.store.published.length, 1);
+  f.frame(new Error('other'));
+  assert.equal(f.store.renderFailure.detail, 'other');
+  assert.ok(!f.store.published.includes(null), 'no new appearance');
+});
+
+test('a new failure after recovery is a new appearance', (t) => {
+  const f = fixture(t);
+  f.frame(new Error('boom'));
+  f.store.renderFailure.retry();
+  f.frame();
+  f.frame(new Error('boom'));
+  assert.deepEqual(
+    f.store.published.map((notice) => notice?.reason ?? null),
+    ['render-error', null, 'render-error'],
+  );
+});
+
+test('a render error without a value shows no detail', (t) => {
+  const f = fixture(t);
+  f.viewer.useDefaultRenderLoop = false;
+  f.scene.renderError.raiseEvent(f.scene, undefined);
+  assert.equal(f.store.renderFailure.reason, 'render-error');
+  assert.equal(f.store.renderFailure.detail, '');
+});
+
+test('Reset opens the app root without the restored view', (t) => {
+  const f = fixture(t);
+  f.frame(new Error('boom'));
+  f.store.renderFailure.reset();
+  assert.deepEqual(f.visits, ['https://gev.example/?lang=ru']);
+});
+
+test('a lost context offers a reload and no frame clears it', (t) => {
+  const f = fixture(t);
+  f.loseContext();
+  const notice = f.store.renderFailure;
+  assert.equal(notice.reason, 'context-lost');
+  assert.equal(notice.detail, '');
+  // Cesium's next frame then fails on the dead drawing buffer.
+  f.frame(new Error('Expected width to be greater than 0'));
+  assert.equal(f.store.renderFailure, notice, 'the notice keeps saying why');
+  f.frame();
+  assert.ok(f.store.renderFailure, 'a lost context never draws again');
+  f.store.renderFailure.retry();
+  assert.deepEqual(f.visits, ['reload']);
+});
+
+test('a page that must not reload offers neither reload nor reset', (t) => {
+  const f = fixture(t, { allowReload: false });
+  f.frame(new Error('boom'));
+  assert.equal(typeof f.store.renderFailure.retry, 'function');
+  assert.equal(f.store.renderFailure.reset, null);
+  // Only a reload draws again, which this page must not offer: the notice
+  // goes, and the page's own lost-context notice speaks instead.
+  f.loseContext();
+  assert.equal(f.store.renderFailure, null);
+  f.frame(new Error('Expected width to be greater than 0'));
+  assert.equal(f.store.renderFailure, null);
+});
+
+test('uninstall removes the listeners and the notice', (t) => {
+  const f = fixture(t);
+  f.frame(new Error('boom'));
+  f.uninstall();
+  assert.equal(f.store.renderFailure, null);
+  assert.equal(f.scene.renderError.numberOfListeners, 0);
+  assert.equal(f.scene.postRender.numberOfListeners, 0);
+  assert.equal(f.canvasListeners.size, 0);
+  f.frame(new Error('later'));
+  assert.equal(f.store.renderFailure, null);
+});

src/ui/renderFailureEventRetry.test.mjs

@@ -0,0 +1,207 @@
+// Retry after a scene event listener throws. Cesium's Event.raiseEvent has no
+// try/finally, so the event stays mid-raise and only queues listener changes.
+// Drives Cesium's real Event and startRenderLoop.
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import * as Cesium from 'cesium';
+import { installRenderFailureNotice } from './renderFailure.js';
+import { renderLoopFixture } from './renderLoopFixture.mjs';
+
+function setup() {
+  // Scene.render as in Scene.js:4369: preUpdate always, preRender/postRender
+  // only when a frame is rendered (requestRenderMode idle skips them).
+  const scene = {
+    renderError: new Cesium.Event(),
+    preUpdate: new Cesium.Event(),
+    preRender: new Cesium.Event(),
+    postRender: new Cesium.Event(),
+    requestRenderMode: true,
+    _renderRequested: false,
+    rendered: 0,
+    requestRender() {
+      this._renderRequested = true;
+    },
+    initializeFrame() {},
+    render(time) {
+      this.preUpdate.raiseEvent(this, time);
+      const shouldRender = !this.requestRenderMode || this._renderRequested;
+      if (!shouldRender) return;
+      this._renderRequested = false;
+      this.preRender.raiseEvent(this, time);
+      this.rendered += 1;
+      this.postRender.raiseEvent(this, time);
+    },
+  };
+  return { scene, ...renderLoopFixture(scene) };
+}
+
+for (const eventName of ['postRender', 'preUpdate']) {
+  test(`idle: a ${eventName} listener that threw once; a successful Retry clears the notice`, () => {
+    const { scene, viewer, store, runFrames, restore } = setup();
+    try {
+      let broken = true;
+      scene[eventName].addEventListener(() => {
+        if (broken) throw new TypeError('listener failed');
+      });
+      scene.requestRender();
+      viewer.useDefaultRenderLoop = true;
+      runFrames(1);
+      assert.equal(store.renderFailure?.reason, 'render-error');
+      assert.equal(viewer.useDefaultRenderLoop, false);
+      broken = false; // the cause goes away
+      store.renderFailure.retry();
+      const before = scene.rendered;
+      runFrames(10); // idle: no camera move, no render request
+      assert.ok(scene.rendered > before, 'the globe drew again');
+      assert.equal(store.renderFailure, null, 'the notice is cleared');
+    } finally {
+      restore();
+    }
+  });
+}
+
+test('a throwing postRender listener removed before Retry is not called again', () => {
+  const { scene, viewer, store, runFrames, restore } = setup();
+  try {
+    let calls = 0;
+    const remove = scene.postRender.addEventListener(() => {
+      calls += 1;
+      throw new TypeError('layer listener failed');
+    });
+    scene.requestRender();
+    viewer.useDefaultRenderLoop = true;
+    runFrames(1);
+    assert.equal(store.renderFailure?.reason, 'render-error');
+    remove(); // the user turns the layer off
+    store.renderFailure.retry();
+    runFrames(5);
+    assert.equal(calls, 1, 'the removed listener ran again after Retry');
+    assert.equal(viewer.useDefaultRenderLoop, true, 'the loop keeps running');
+    assert.equal(store.renderFailure, null, 'the notice is cleared');
+  } finally {
+    restore();
+  }
+});
+
+const listenerCount = (event) =>
+  [...event._listeners.values()].reduce((sum, scopes) => sum + scopes.size, 0);
+
+// While the loop is stopped, a layer turned off and on again, or a ground
+// task in worldAnnotationRenderer that starts, times out and starts again.
+const RESUBSCRIBE = {
+  'turned off and on': (event, listener) => {
+    event.removeEventListener(listener);
+    event.addEventListener(listener);
+  },
+  'added, removed and added again': (event, listener) => {
+    event.addEventListener(listener);
+    event.removeEventListener(listener);
+    event.addEventListener(listener);
+  },
+};
+
+for (const [name, resubscribe] of Object.entries(RESUBSCRIBE)) {
+  test(`a listener ${name} while the loop is stopped runs after Retry`, () => {
+    const { scene, viewer, store, runFrames, restore } = setup();
+    try {
+      let broken = true;
+      scene.postRender.addEventListener(() => {
+        if (broken) throw new TypeError('layer listener failed');
+      });
+      let calls = 0;
+      const listener = () => {
+        calls += 1;
+      };
+      if (name === 'turned off and on')
+        scene.postRender.addEventListener(listener);
+      scene.requestRender();
+      viewer.useDefaultRenderLoop = true;
+      runFrames(1);
+      assert.equal(store.renderFailure?.reason, 'render-error');
+      resubscribe(scene.postRender, listener);
+      broken = false;
+      store.renderFailure.retry();
+      calls = 0;
+      scene.requestRender();
+      runFrames(3);
+      assert.ok(calls > 0, 'the re-added listener runs after Retry');
+      assert.equal(
+        scene.postRender.numberOfListeners,
+        listenerCount(scene.postRender),
+      );
+    } finally {
+      restore();
+    }
+  });
+}
+
+// Every event a listener's error can cut short is finished when the error
+// surfaces, so a listener added at once is subscribed.
+const FRAME_EVENTS = {
+  'scene.preUpdate': (v) => v.scene.preUpdate,
+  'scene.postUpdate': (v) => v.scene.postUpdate,
+  'scene.preRender': (v) => v.scene.preRender,
+  'scene.postRender': (v) => v.scene.postRender,
+  'camera.changed': (v) => v.scene.camera.changed,
+  'camera.moveStart': (v) => v.scene.camera.moveStart,
+  'camera.moveEnd': (v) => v.scene.camera.moveEnd,
+  'clock.onTick': (v) => v.clock.onTick,
+  'clock.onStop': (v) => v.clock.onStop,
+  'globe.tileLoadProgressEvent': (v) => v.scene.globe.tileLoadProgressEvent,
+  'tileset.loadProgress': (v) => v.scene.primitives.get(0).loadProgress,
+  'tileset.allTilesLoaded': (v) => v.scene.primitives.get(0).allTilesLoaded,
+  'tileset.initialTilesLoaded': (v) =>
+    v.scene.primitives.get(0).initialTilesLoaded,
+};
+
+for (const [name, pick] of Object.entries(FRAME_EVENTS)) {
+  test(`a listener that throws in ${name} leaves it finished`, () => {
+    const events = () => ({
+      changed: new Cesium.Event(),
+      moveStart: new Cesium.Event(),
+      moveEnd: new Cesium.Event(),
+    });
+    const tileset = {
+      loadProgress: new Cesium.Event(),
+      allTilesLoaded: new Cesium.Event(),
+      initialTilesLoaded: new Cesium.Event(),
+    };
+    const viewer = {
+      scene: {
+        renderError: new Cesium.Event(),
+        preUpdate: new Cesium.Event(),
+        postUpdate: new Cesium.Event(),
+        preRender: new Cesium.Event(),
+        postRender: new Cesium.Event(),
+        camera: events(),
+        globe: { tileLoadProgressEvent: new Cesium.Event() },
+        primitives: { length: 1, get: () => tileset },
+      },
+      clock: { onTick: new Cesium.Event(), onStop: new Cesium.Event() },
+      canvas: { addEventListener() {}, removeEventListener() {} },
+      cesiumWidget: {
+        _renderLoopRunning: false,
+        render: () => pick(viewer).raiseEvent(),
+      },
+    };
+    const store = { publishRenderFailure() {} };
+    const uninstall = installRenderFailureNotice(viewer, {
+      store,
+      locationRef: { href: 'https://gev.example/', reload() {}, assign() {} },
+      logError() {},
+    });
+    try {
+      const event = pick(viewer);
+      event.addEventListener(() => {
+        throw new TypeError('listener failed');
+      });
+      assert.throws(() => viewer.cesiumWidget.render(), TypeError);
+      assert.equal(event._invokingListeners, false);
+      const listener = () => {};
+      event.addEventListener(listener);
+      assert.ok(event._listeners.has(listener));
+    } finally {
+      uninstall();
+    }
+  });
+}

src/ui/renderFailureLoopErrors.test.mjs

@@ -0,0 +1,46 @@
+// Errors thrown in the render loop outside Scene's tryAndCatchError. Drives
+// Cesium's real startRenderLoop through the useDefaultRenderLoop setter.
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import * as Cesium from 'cesium';
+import { renderLoopFixture } from './renderLoopFixture.mjs';
+
+function runLoop(render) {
+  const scene = {
+    renderError: new Cesium.Event(),
+    preUpdate: new Cesium.Event(),
+    postRender: new Cesium.Event(),
+    requestRender() {},
+    initializeFrame() {},
+    render,
+  };
+  const fixture = renderLoopFixture(scene);
+  fixture.viewer.useDefaultRenderLoop = true;
+  fixture.runFrames(3);
+  return { ...fixture, uninstall: fixture.restore };
+}
+
+test('an error thrown outside tryAndCatchError still shows the notice', () => {
+  // Scene.render raises preRender outside tryAndCatchError (Scene.js:4439),
+  // so a listener's exception propagates.
+  const { widget, store, logged, uninstall } = runLoop(function () {
+    this.preUpdate.raiseEvent(this);
+    throw new TypeError("Cannot read properties of undefined (reading 'x')");
+  });
+  assert.equal(widget.useDefaultRenderLoop, false);
+  assert.equal(store.renderFailure?.reason, 'render-error');
+  assert.equal(logged.length, 1);
+  uninstall();
+});
+
+test('an error Scene raised and threw on with rethrowRenderErrors is reported once', () => {
+  const { store, logged, uninstall } = runLoop(function () {
+    this.preUpdate.raiseEvent(this);
+    const error = new Error('boom');
+    this.renderError.raiseEvent(this, error);
+    throw error;
+  });
+  assert.equal(store.renderFailure?.detail, 'boom');
+  assert.equal(logged.length, 1);
+  uninstall();
+});

src/ui/renderFailureSecondLoop.test.mjs

@@ -0,0 +1,95 @@
+// Retry after an error Scene catches itself: the loop is marked stopped but
+// its next frame is still queued, so an early Retry must not start a second
+// loop. Drives Cesium's real startRenderLoop and useDefaultRenderLoop setter.
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import * as Cesium from 'cesium';
+import { renderLoopFixture } from './renderLoopFixture.mjs';
+
+function setup({ targetFrameRate } = {}) {
+  const scene = {
+    renderError: new Cesium.Event(),
+    preUpdate: new Cesium.Event(),
+    preRender: new Cesium.Event(),
+    postRender: new Cesium.Event(),
+    broken: false,
+    drawn: 0,
+    requestRender() {},
+    initializeFrame() {},
+    // Scene.render (Scene.js:4369): an update error is caught by
+    // tryAndCatchError, which raises renderError and returns normally.
+    render(time) {
+      this.drawn += 1;
+      this.preUpdate.raiseEvent(this, time);
+      if (this.broken) this.renderError.raiseEvent(this, new Error('boom'));
+      this.preRender.raiseEvent(this, time);
+      this.postRender.raiseEvent(this, time);
+    },
+  };
+  return { scene, ...renderLoopFixture(scene, { targetFrameRate }) };
+}
+
+for (const targetFrameRate of [undefined, 60]) {
+  test(`targetFrameRate ${targetFrameRate}: Retry before the next frame after an error Scene caught keeps one render loop`, () => {
+    const { frames, scene, viewer, store, runFrames, restore } = setup({
+      targetFrameRate,
+    });
+    try {
+      viewer.useDefaultRenderLoop = true;
+      runFrames(2);
+      scene.broken = true;
+      runFrames(1);
+      assert.equal(store.renderFailure?.reason, 'render-error');
+      // The cause is gone; Retry runs (a queued Enter on the focused Retry)
+      // before the loop's next animation frame.
+      scene.broken = false;
+      store.renderFailure.retry();
+      assert.equal(frames.length, 1, 'one animation frame queued after Retry');
+      scene.drawn = 0;
+      runFrames(3);
+      assert.equal(store.renderFailure, null);
+      assert.equal(scene.drawn, 3, 'the globe draws once a frame');
+    } finally {
+      restore();
+    }
+  });
+}
+
+test('control: Retry after the next frame ran keeps one render loop', () => {
+  const { frames, scene, viewer, store, runFrames, restore } = setup();
+  try {
+    viewer.useDefaultRenderLoop = true;
+    runFrames(2);
+    scene.broken = true;
+    runFrames(1);
+    scene.broken = false;
+    runFrames(1);
+    assert.equal(frames.length, 0, 'the stopped loop queued nothing');
+    store.renderFailure.retry();
+    scene.drawn = 0;
+    runFrames(3);
+    assert.equal(scene.drawn, 3);
+  } finally {
+    restore();
+  }
+});
+
+test('a tab hidden and shown again before the next frame after an error Scene caught keeps one render loop', () => {
+  const { scene, viewer, runFrames, restore } = setup();
+  try {
+    viewer.useDefaultRenderLoop = true;
+    runFrames(2);
+    scene.broken = true;
+    runFrames(1);
+    scene.broken = false;
+    // src/app/tools.js turns the loop off while the tab is hidden and back on
+    // when it is shown, before the queued frame runs.
+    viewer.useDefaultRenderLoop = false;
+    viewer.useDefaultRenderLoop = true;
+    scene.drawn = 0;
+    runFrames(3);
+    assert.equal(scene.drawn, 3, 'the globe draws once a frame');
+  } finally {
+    restore();
+  }
+});

src/ui/renderFailureView.test.mjs

@@ -0,0 +1,173 @@
+// The scene chrome renders the render failure notice and its actions.
+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 { useStatusStore } from './stores/status.js';
+import SceneChromeView from './views/SceneChromeView.vue';
+
+function mount(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());
+  return useStatusStore(pinia);
+}
+
+const notice = () => document.getElementById('render-failure');
+const buttons = () =>
+  [...(notice()?.querySelectorAll('button') ?? [])].map((button) =>
+    button.textContent.trim(),
+  );
+
+test('a render failure shows an alert dialog that moves focus to Retry', async (t) => {
+  const store = mount(t);
+  assert.equal(notice(), null, 'no notice while the globe draws');
+  const calls = [];
+  store.publishRenderFailure({
+    reason: 'render-error',
+    detail: 'Expected width to be greater than 0',
+    retry: () => calls.push('retry'),
+    reset: () => calls.push('reset'),
+  });
+  await nextTick();
+  await nextTick();
+  const element = notice();
+  assert.equal(element.getAttribute('role'), 'alertdialog');
+  assert.equal(
+    document.getElementById(element.getAttribute('aria-labelledby'))
+      .textContent,
+    'The globe stopped drawing',
+  );
+  assert.match(
+    document.getElementById(element.getAttribute('aria-describedby'))
+      .textContent,
+    /^Rendering stopped after an error\./,
+  );
+  assert.equal(
+    element.querySelector('.render-failure-detail').textContent,
+    'Expected width to be greater than 0',
+  );
+  assert.deepEqual(buttons(), ['Retry', 'Reset view']);
+  assert.equal(document.activeElement?.textContent.trim(), 'Retry');
+  for (const button of element.querySelectorAll('button')) button.click();
+  assert.deepEqual(calls, ['retry', 'reset']);
+  store.publishRenderFailure(null);
+  await nextTick();
+  assert.equal(notice(), null);
+});
+
+test('a lost context offers Reload, and a panel that cannot reload offers nothing', async (t) => {
+  const store = mount(t);
+  store.publishRenderFailure({
+    reason: 'context-lost',
+    detail: '',
+    retry: () => {},
+    reset: () => {},
+  });
+  await nextTick();
+  assert.match(
+    document.getElementById('render-failure-message').textContent,
+    /3D graphics/,
+  );
+  assert.equal(notice().querySelector('.render-failure-detail'), null);
+  assert.deepEqual(buttons(), ['Reload', 'Reset view']);
+  store.publishRenderFailure({
+    reason: 'context-lost',
+    detail: '',
+    retry: null,
+    reset: null,
+  });
+  await nextTick();
+  assert.deepEqual(buttons(), []);
+  assert.equal(notice().querySelector('.render-failure-hint'), null);
+});
+
+const failure = () => ({
+  reason: 'render-error',
+  detail: '',
+  retry: () => {},
+  reset: null,
+});
+const settle = async () => {
+  await nextTick();
+  await nextTick();
+};
+
+test('focus goes back where it was when the globe draws again', async (t) => {
+  const store = mount(t);
+  const search = document.body.appendChild(document.createElement('input'));
+  search.focus();
+  store.publishRenderFailure(failure());
+  await settle();
+  assert.equal(document.activeElement?.textContent.trim(), 'Retry');
+  store.publishRenderFailure(null);
+  await settle();
+  assert.equal(document.activeElement, search);
+});
+
+// The globe's canvas, as CesiumWidget builds it inside the container.
+const addGlobeCanvas = () => {
+  const widget = document.createElement('div');
+  widget.className = 'cesium-widget';
+  document.getElementById('cesiumContainer').appendChild(widget);
+  return widget.appendChild(document.createElement('canvas'));
+};
+
+test('focus goes to the globe canvas when the element it came from is gone', async (t) => {
+  const store = mount(t);
+  const canvas = addGlobeCanvas();
+  const search = document.body.appendChild(document.createElement('input'));
+  search.focus();
+  store.publishRenderFailure(failure());
+  await settle();
+  search.remove();
+  store.publishRenderFailure(null);
+  await settle();
+  // The map's keys, Enter to finish a drawing among them, read the canvas
+  // as the map (src/annotations/drawTool.js).
+  assert.equal(document.activeElement, canvas);
+  assert.equal(canvas.getAttribute('tabindex'), '-1');
+  canvas.blur();
+  assert.equal(canvas.hasAttribute('tabindex'), false, 'only this once');
+});
+
+test('focus goes to the globe canvas when the element it came from cannot take it', async (t) => {
+  const store = mount(t);
+  const canvas = addGlobeCanvas();
+  const button = document.body.appendChild(document.createElement('button'));
+  button.focus();
+  store.publishRenderFailure(failure());
+  await settle();
+  button.disabled = true;
+  store.publishRenderFailure(null);
+  await settle();
+  assert.equal(document.activeElement, canvas);
+  // A press on the globe leaves focus on the page again, as Cesium has it.
+  canvas.dispatchEvent(new Event('pointerdown'));
+  assert.equal(document.activeElement, document.body);
+  assert.equal(canvas.hasAttribute('tabindex'), false);
+});
+
+test('focus the user moved while the notice was up stays put', async (t) => {
+  const store = mount(t);
+  store.publishRenderFailure(failure());
+  await settle();
+  const chat = document.body.appendChild(document.createElement('textarea'));
+  chat.focus();
+  store.publishRenderFailure(null);
+  await settle();
+  assert.equal(document.activeElement, chat);
+});
+
+test('the globe drawing from the start leaves focus alone', async (t) => {
+  mount(t);
+  await settle();
+  assert.equal(document.activeElement, document.body);
+  assert.equal(
+    document.getElementById('cesiumContainer').hasAttribute('tabindex'),
+    false,
+  );
+});

src/ui/renderLoopFixture.mjs

@@ -0,0 +1,72 @@
+// A widget on Cesium's real CesiumWidget.prototype (startRenderLoop, the
+// useDefaultRenderLoop setter, render) around a scene double, with animation
+// frames queued by hand and the render failure notice installed.
+import * as Cesium from 'cesium';
+import { installRenderFailureNotice } from './renderFailure.js';
+
+export function renderLoopFixture(
+  scene,
+  { targetFrameRate, viewer: viewerExtras = {}, notice = {} } = {},
+) {
+  const frames = [];
+  const previousRaf = globalThis.requestAnimationFrame;
+  globalThis.requestAnimationFrame = (fn) => frames.push(fn);
+  const widget = Object.create(Cesium.CesiumWidget.prototype);
+  Object.assign(widget, {
+    _scene: scene,
+    _clock: { tick() {} },
+    _canRender: true,
+    _useDefaultRenderLoop: false,
+    _renderLoopRunning: false,
+    // What src/app/scene.js passes to the viewer.
+    _showRenderLoopErrors: false,
+    _targetFrameRate: targetFrameRate,
+    isDestroyed: () => false,
+    resize() {},
+  });
+  // CesiumWidget's own renderError handler, which marks the loop stopped.
+  scene.renderError.addEventListener(() => {
+    widget._useDefaultRenderLoop = false;
+    widget._renderLoopRunning = false;
+  });
+  const viewer = Object.assign(
+    {
+      scene,
+      cesiumWidget: widget,
+      canvas: { addEventListener() {}, removeEventListener() {} },
+      get useDefaultRenderLoop() {
+        return widget.useDefaultRenderLoop;
+      },
+      set useDefaultRenderLoop(value) {
+        widget.useDefaultRenderLoop = value;
+      },
+    },
+    viewerExtras,
+  );
+  const store = {
+    renderFailure: null,
+    publishRenderFailure(next) {
+      this.renderFailure = next;
+    },
+  };
+  const logged = [];
+  const uninstall = installRenderFailureNotice(viewer, {
+    store,
+    locationRef: { href: 'https://gev.example/', reload() {}, assign() {} },
+    logError: (error) => logged.push(error),
+    ...notice,
+  });
+  let time = 0;
+  const runFrames = (n) => {
+    for (let i = 0; i < n; i += 1) {
+      // Above a 60 fps target's interval, so every frame draws.
+      time += 17;
+      for (const fn of frames.splice(0)) fn(time);
+    }
+  };
+  const restore = () => {
+    uninstall();
+    globalThis.requestAnimationFrame = previousRaf;
+  };
+  return { frames, widget, viewer, store, logged, runFrames, restore };
+}

src/ui/shellFacade.js

@@ -891,6 +891,10 @@ export class ShellFacade {
     return this._contextControls?._preservePanelStateDuringLayerClear ?? false;
   }
 
+  _contextSuspendsLayer(layerId) {
+    return this._contextControls?.suspendsLayer(layerId) ?? false;
+  }
+
   _runUserFacingContextAction(...args) {
     return this._contextControls?._runUserFacingContextAction(...args);
   }

src/ui/stores/status.js

@@ -7,7 +7,9 @@ import { markRaw, shallowRef } from 'vue';
  * road network chip, CctvControls the camera grid chip; the toast shows
  * what any owner's createToast() (src/ui/toast.js) publishes, and the title
  * bar the FPS readout createFrameRateMonitor() publishes. Each label keeps its
- * last text while hidden, so the next change flaps from what was shown.
+ * last text while hidden, so the next change flaps from what was shown. The
+ * render failure notice is what installRenderFailureNotice()
+ * (src/ui/renderFailure.js) publishes while the globe cannot draw.
  */
 export const useStatusStore = defineStore('gev-status', () => {
   /**
@@ -32,6 +34,13 @@ export const useStatusStore = defineStore('gev-status', () => {
    */
   const fps = shallowRef(null);
 
+  /**
+   * The globe's render failure, `{reason, detail, retry, reset}`; null while
+   * the globe draws. `reason` is 'render-error' or 'context-lost', and `retry`
+   * and `reset` are null where that action is not offered.
+   */
+  const renderFailure = shallowRef(null);
+
   /** @param {?object} next A fresh presentation of the loading status. */
   function publishLoading(next) {
     loading.value = next && markRaw(next);
@@ -57,6 +66,11 @@ export const useStatusStore = defineStore('gev-status', () => {
     fps.value = next && markRaw(next);
   }
 
+  /** @param {?object} next A fresh presentation of the render failure. */
+  function publishRenderFailure(next) {
+    renderFailure.value = next && markRaw(next);
+  }
+
   return {
     fps,
     publishFps,
@@ -68,5 +82,7 @@ export const useStatusStore = defineStore('gev-status', () => {
     publishTraffic,
     cctv,
     publishCctv,
+    renderFailure,
+    publishRenderFailure,
   };
 });

src/ui/styles/status.css

@@ -405,6 +405,76 @@ html:not([lang='en']) #global-loading-detail {
   }
 }
 
+/* ── Render failure notice ───────────────────── */
+/* Above the loading screen, so a globe that fails while it loads says so too,
+   and above floating panels such as the Québec camera viewer (2000). */
+#render-failure {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2001;
+  box-sizing: border-box;
+  width: min(420px, calc(100vw - 32px));
+  max-height: calc(100vh - 32px);
+  overflow-y: auto;
+  padding: 20px 22px;
+  background: var(--glass-bg);
+  border: 1px solid #ff7272;
+  border-radius: 12px;
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  box-shadow: 0 0 24px rgba(255, 88, 88, 0.18);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+#render-failure-title {
+  margin: 0 0 8px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: #ff7272;
+}
+
+#render-failure p {
+  margin: 0 0 10px;
+}
+
+#render-failure .render-failure-detail {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-secondary);
+  overflow-wrap: anywhere;
+}
+
+#render-failure .render-failure-hint {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+#render-failure .render-failure-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 14px;
+}
+
+#render-failure .gev-action-button {
+  font-size: 11px;
+  padding: 8px 14px;
+}
+
+@media (pointer: coarse) {
+  #render-failure .gev-action-button {
+    min-height: 44px;
+  }
+}
+
 /* ── Toast Notification ──────────────────────── */
 #toast {
   position: fixed;

src/ui/views/SceneChromeView.vue

@@ -18,6 +18,7 @@ import ScreenAnnotations from './panels/ScreenAnnotations.vue';
 import AwarenessDirection from './panels/AwarenessDirection.vue';
 import UiButton from '../kit/UiButton.vue';
 import GlobeActions from './panels/GlobeActions.vue';
+import RenderFailure from './panels/RenderFailure.vue';
 import WorldTimeline from './panels/WorldTimeline.vue';
 
 // The ACTIVE STYLE corner shows the style VisualSettings publishes.
@@ -61,6 +62,7 @@ const vToastText = {
 
 <template>
   <div id="cesiumContainer"></div>
+  <RenderFailure />
   <div id="world-overlay-root" aria-hidden="true">
     <canvas id="world-overlay-canvas"></canvas>
   </div>

src/ui/views/panels/RenderFailure.vue

@@ -0,0 +1,87 @@
+<script setup>
+import { nextTick, ref, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import { msg, t } from '../../../i18n/index.js';
+import { useStatusStore } from '../../stores/status.js';
+import UiButton from '../../kit/UiButton.vue';
+
+// Published by installRenderFailureNotice() (src/ui/renderFailure.js).
+const { renderFailure: failure } = storeToRefs(useStatusStore());
+const panel = ref(null);
+const MESSAGES = {
+  'context-lost': msg(
+    "The browser took back the globe's 3D graphics. Layers and controls still work, but the map cannot draw until the page reloads.",
+  ),
+  'render-error': msg(
+    'Rendering stopped after an error. Layers and controls still work, but the map is not updating.',
+  ),
+};
+// Focus goes to the first action when the notice appears. When the globe
+// draws again, it goes back, or to the map, unless the user moved it.
+let focusBefore;
+watch(
+  () => Boolean(failure.value),
+  async (shown) => {
+    if (shown) {
+      focusBefore = document.activeElement;
+      await nextTick();
+      panel.value?.querySelector('button')?.focus();
+      return;
+    }
+    if (focusBefore === undefined) return;
+    const previous = focusBefore;
+    focusBefore = undefined;
+    await nextTick();
+    const active = document.activeElement;
+    if (active && active !== document.body) return;
+    if (previous?.isConnected && previous !== document.body) {
+      previous.focus({ preventScroll: true });
+      // A control disabled, hidden or made inert meanwhile does not take it.
+      if (document.activeElement === previous) return;
+    }
+    focusMap();
+  },
+  { immediate: true },
+);
+
+// The map's keys (Enter to finish a drawing, Space to talk) read the canvas
+// as the map. It stays focusable only until focus leaves or the globe is
+// pressed; a press leaves focus on the page, as in Cesium.
+function focusMap() {
+  const canvas = document.querySelector(
+    '#cesiumContainer .cesium-widget canvas',
+  );
+  if (!canvas) return;
+  if (!canvas.hasAttribute('tabindex')) {
+    canvas.tabIndex = -1;
+    const done = new AbortController();
+    const release = () => {
+      done.abort();
+      canvas.removeAttribute('tabindex');
+    };
+    canvas.addEventListener('blur', release, { signal: done.signal });
+    canvas.addEventListener(
+      'pointerdown',
+      () => {
+        release();
+        canvas.blur();
+      },
+      { capture: true, signal: done.signal },
+    );
+  }
+  canvas.focus({ preventScroll: true });
+}
+</script>
+
+<template>
+  <div v-if="failure" id="render-failure" ref="panel" role="alertdialog" aria-labelledby="render-failure-title" aria-describedby="render-failure-message">
+    <h2 id="render-failure-title">{{ t('The globe stopped drawing') }}</h2>
+    <p id="render-failure-message">{{ t(MESSAGES[failure.reason] ?? MESSAGES['render-error']) }}</p>
+    <p v-if="failure.detail" class="render-failure-detail" translate="no">{{ failure.detail }}</p>
+    <p v-if="failure.reset" class="render-failure-hint">{{ t('Reset view reloads the app without the view restored from the address bar.') }}</p>
+    <div v-if="failure.retry || failure.reset" class="render-failure-actions">
+      <UiButton v-if="failure.retry" class="gev-action-button render-failure-retry" :onClick="failure.retry">{{ failure.reason === 'context-lost' ? t('Reload') : t('Retry') }}</UiButton>
+      <UiButton v-if="failure.reset" class="gev-action-button render-failure-reset" :onClick="failure.reset">{{ t('Reset view') }}</UiButton>
+    </div>
+  </div>
+</template>