Merge Core main into german/hal-644-ar: Arabic on the Vue UI

Main moved the UI to Vue views and Pinia stores, so the Arabic changes to
the old DOM controllers now live in their views: the rail legend range
comes from formatScaleRange (keeping units a source supplies as given),
the voice timeout options are worded by Intl unit formatting in
VoiceControl, and the scene editor's JSON fields stay left to right in
SceneDialog. Main's CCTV status line, launch panel and calibration values
keep the Arabic isolates and Western-digit formatting.

isolate() and keepCodesWithValues() read the locale through getLocale(),
which follows the page's vue-i18n instance, and the Intl formatters take
intlLocale(getLocale()). A language switch now applies in place, and
applyDocumentLanguage sets <html dir> on every switch, so the page mirrors
without a reload.

The icon rails and their tips are placed with logical properties, so they
stay on the outer side of the mirrored stacks; Cyber's new stack offsets,
padding and edge lines are logical too, and rtl.css moves Cyber's right
stack to its new rail clearance. Main removed the Context mini radio, so its
right-to-left rules and test go.

The Arabic catalog gains main's new strings and drops the ones main no
longer uses; the other catalogs keep main's new keys and the branch's
landing labels.

scripts/check-package-boundaries.mjs

@@ -1,6 +1,8 @@
 import { readFile, realpath } from 'node:fs/promises';
 import path from 'node:path';
 import { fileURLToPath, pathToFileURL } from 'node:url';
+import vue from '@vitejs/plugin-vue';
+import { VUE_PLUGIN_OPTIONS } from '../build/vueOptions.js';
 import { build, normalizePath } from 'vite';
 
 /** Build each browser or Node export group and reject imports outside its declared ownership. */
@@ -99,15 +101,20 @@ export async function checkPackageBoundaries(root) {
       ssr: node ? { noExternal: true } : undefined,
       logLevel: 'silent',
       plugins: [
+        vue(VUE_PLUGIN_OPTIONS),
         {
           name: 'check-package-ownership',
           moduleParsed(info) {
-            if (!allowed.has(info.id)) {
+            // Plugin helpers are virtual; a single-file component's style and
+            // template blocks belong to the component file itself.
+            if (info.id.startsWith('\0')) return;
+            const id = info.id.split('?')[0];
+            if (!allowed.has(id)) {
               throw new Error(
-                `Package boundary ${name} imports an unowned module: ${path.relative(root, info.id)}`,
+                `Package boundary ${name} imports an unowned module: ${path.relative(root, id)}`,
               );
             }
-            seen.add(info.id);
+            seen.add(id);
           },
         },
       ],

scripts/format-scope.json

@@ -180,6 +180,8 @@
   "src/ui/panelDisclosure.js",
   "src/ui/imagerySplit.js",
   "src/ui/imagerySplit.test.mjs",
+  "src/ui/imagerySplitView.test.mjs",
+  "src/ui/stores/imagerySplit.js",
   "src/ui/surfaceKeyboard.js",
   "src/ui/surfaceKeyboard.test.mjs",
   "src/ui/panelRails.js",
@@ -197,9 +199,7 @@
   "scripts/qa-scope-hud.mjs",
   "scripts/qa-segmented-controls.mjs",
   "src/ui/displayControls.js",
-  "src/ui/segmentedControl.test.mjs",
   "src/ui/styles/segmented-control.css",
-  "src/ui/displayControls.test.mjs",
   "src/ui/cameraOrientationControls.js",
   "src/ui/cameraOrientationControls.test.mjs",
   "src/ui/effects.js",
@@ -297,6 +297,8 @@
   "src/ui/styles.js",
   "src/ui/shellLifecycle.test.mjs",
   "src/testSupport/readStylesheet.mjs",
+  "src/testSupport/voiceUi.mjs",
+  "src/testSupport/voiceView.mjs",
   "src/testSupport/streetLevelFakes.mjs",
   "src/splitFlap.js",
   "style.css",
@@ -526,6 +528,7 @@
   "scripts/qa-traffic-navigation.mjs",
   "src/ui/frameRateMonitor.js",
   "src/ui/frameRateMonitor.test.mjs",
+  "src/ui/frameRateView.test.mjs",
   "src/layers/cctv/lifecycle.js",
   "src/layers/cctv/controls.js",
   "src/layers/cctv/geometry.js",
@@ -561,6 +564,7 @@
   "src/data/cctvCataloniaSource.test.mjs",
   "src/data/cctvHk.test.mjs",
   "src/data/cctvVegvesen.test.mjs",
+  "src/data/cctvA22.test.mjs",
   "src/data/cctvNyc.test.mjs",
   "src/data/cctvNswSource.test.mjs",
   "src/data/cctvTxdotSource.test.mjs",
@@ -649,7 +653,6 @@
   "src/voice/realtimeBackend.test.mjs",
   "src/agent/worldPacket.test.mjs",
   "src/voice/layerSummary.js",
-  "build/application-html.js",
   "src/app/sources.js",
   "src/ui/composition.js",
   "src/services/application.js",
@@ -702,7 +705,6 @@
   "src/ui/shareRestoration.js",
   "src/ui/visualSettings.js",
   "src/ui/panelChrome.js",
-  "src/ui/panelChrome.radioOwnership.test.mjs",
   "src/testSupport/readShellSource.mjs",
   "src/ui/stateOwners.test.mjs",
   "src/layers/flights/records.js",
@@ -740,6 +742,8 @@
   "server/providers/openai/toolDescriptions.js",
   "src/voice/session.js",
   "src/voice/sessionCommands.js",
+  "src/ui/stores/pointerReticle.js",
+  "src/voice/pointerReticleView.test.mjs",
   "src/voice/realtimeSession.js",
   "src/voice/realtimeEvents.js",
   "src/voice/session.test.mjs",
@@ -897,6 +901,7 @@
   "scripts/qa-weather-swap.mjs",
   "scripts/qa-weather-teardown.mjs",
   "src/layers/weather/imageryHost.test.mjs",
+  "src/layers/weather/display.test.mjs",
   "src/sdr/adsbDecoder.test.mjs",
   "src/sdr/controller.test.mjs",
   "src/sdr/decoderDiagnostics.test.mjs",
@@ -909,6 +914,8 @@
   "src/sources/adsbRecords.test.mjs",
   "src/layers/localAdsb/index.test.mjs",
   "src/ui/localSdrControls.test.mjs",
+  "src/ui/sdrCardActions.test.mjs",
+  "src/ui/radioPanelActions.test.mjs",
   "src/ui/localSdrMarkup.test.mjs",
   "src/ui/localSdrPresentation.test.mjs",
   "src/data/localReceiversProxy.test.mjs",
@@ -1094,7 +1101,6 @@
   "server/providers/overpass/requestAdmission.test.mjs",
   "src/tooling/trackArrivalObservation.test.mjs",
   "src/ui/styles/status-badge.css",
-  "src/ui/statusBadge.test.mjs",
   "src/ui/cctvBadges.test.mjs",
   "scripts/qa-status-badges.mjs",
   "src/dockerTrustedPeers.test.mjs",
@@ -1104,12 +1110,13 @@
   "src/hudSummaryGate.test.mjs",
   "src/voice/hudPlaceLabels.test.mjs",
   "src/voice/panel/preferences.test.mjs",
+  "src/voice/panel/preferencesView.test.mjs",
+  "src/voice/voiceControlView.test.mjs",
   "src/voice/panel/host.test.mjs",
   "src/voice/panel/manualPanel.test.mjs",
   "src/voice/panel/nativeActivity.test.mjs",
   "src/voice/panel/inactivity.test.mjs",
   "src/voice/panel/actionObserver.test.mjs",
-  "src/voice/panel/testDom.mjs",
   "src/voice/realtimeCostPanel.test.mjs",
   "docs/SHARE-LINK-FORMAT.md",
   "src/share/wire.test.mjs",
@@ -1118,5 +1125,60 @@
   "src/testSupport/shareViewFixtures.mjs",
   "src/ui/shareLinks.test.mjs",
   "src/ui/shareButton.test.mjs",
-  "src/share/shareLinkPath.test.mjs"
+  "src/share/shareLinkPath.test.mjs",
+  "src/ui/kit/UiRail.test.mjs",
+  "src/ui/kit/UiSegmented.vue",
+  "src/ui/kit/UiSegmented.test.mjs",
+  "src/ui/kit/UiSlider.js",
+  "src/ui/kit/UiSlider.test.mjs",
+  "src/ui/kit/UiButton.vue",
+  "src/ui/kit/UiButton.test.mjs",
+  "src/ui/kit/UiChip.vue",
+  "src/ui/kit/UiChip.test.mjs",
+  "src/ui/globeActions.test.mjs",
+  "src/ui/safeFrameView.test.mjs",
+  "src/ui/kit/UiSelect.js",
+  "src/ui/kit/UiSelect.test.mjs",
+  "src/ui/kit/UiBadge.vue",
+  "src/ui/kit/UiBadge.test.mjs",
+  "src/ui/kit/UiEmpty.vue",
+  "src/ui/rail/RailChips.vue",
+  "src/ui/displayPanelActions.test.mjs",
+  "src/testSupport/vueDom.mjs",
+  "build/vueLoader.js",
+  "build/registerVue.js",
+  "src/ui/panelNavigation.test.mjs",
+  "src/ui/stores/owners.js",
+  "src/ui/stores/owners.test.mjs",
+  "src/ui/stores/panels.test.mjs",
+  "src/ui/stores/status.js",
+  "src/ui/statusChipsView.test.mjs",
+  "src/ui/statusChipOwners.test.mjs",
+  "src/ui/toast.js",
+  "src/ui/toastView.test.mjs",
+  "src/ui/stores/sceneInteractions.js",
+  "src/scenes/dataPacks/presentationView.test.mjs",
+  "src/ui/stores/dataPacks.js",
+  "src/scenes/interactionsView.test.mjs",
+  "src/layers/wind/inspectionMarker.js",
+  "src/layers/wind/inspectionMarker.test.mjs",
+  "src/ui/stores/windInspection.js",
+  "src/ui/stores/missionReplay.js",
+  "src/layers/launches/replayOverlay.test.mjs",
+  "src/ui/stores/bhoteKoshiPanel.js",
+  "src/data/bhoteKoshiPanelView.test.mjs",
+  "src/ui/stores/celestialRing.js",
+  "src/celestialRingView.test.mjs",
+  "src/ui/stores/screenAnnotations.js",
+  "src/ui/stores/worldOverlayActions.js",
+  "src/overlays/worldOverlayActionsView.test.mjs",
+  "src/ui/stores/awarenessDirection.js",
+  "src/layers/awareness/directionOverlay.test.mjs",
+  "src/hudReadouts.js",
+  "src/ui/stores/hud.js",
+  "src/ui/views/intelHudView.test.mjs",
+  "src/testSupport/hudReadouts.mjs",
+  "src/ui/stores/firstRun.js",
+  "src/firstRunLauncherView.test.mjs",
+  "src/firstRunCopy.js"
 ]

scripts/format.mjs

@@ -39,7 +39,7 @@ export async function discoverRuntimeFormatFiles(root) {
   const files = [];
   for (const name of new Set(candidates)) {
     if (
-      !/\.[cm]?js$/.test(name) ||
+      !/\.([cm]?js|vue)$/.test(name) ||
       /\.test\.[cm]?js$/.test(name) ||
       !existsSync(path.join(root, name))
     )

scripts/i18n.mjs

@@ -8,7 +8,7 @@
 // lists it.
 //
 // Messages are the English literals passed to t(), tn() and msg() in src/,
-// plus the markup opted in with data-i18n* in src/ui/templates and index.html.
+// plus the markup opted in with data-i18n* in index.html and the Vue views.
 // It also lists UI text that is not marked at all (see findUnmarked).
 import { existsSync, readFileSync, writeFileSync } from 'node:fs';
 import { execFileSync } from 'node:child_process';
@@ -119,10 +119,10 @@ export function extractMessages() {
     }
   }
 
-  const markup = trackedFiles('index.html', 'src/ui/templates/*.html');
+  const markup = markupFiles();
   const TAG = /<([a-zA-Z][\w-]*)(\s[^>]*?)\/?>([^<]*)/gs;
   for (const file of markup) {
-    const html = readFileSync(path.join(ROOT, file), 'utf8');
+    const html = readMarkup(file);
     for (const [, tag, attrs, text] of html.matchAll(TAG)) {
       const where = `${file} <${tag}>`;
       if (/\sdata-i18n(\s|=|$)/.test(attrs)) {
@@ -156,7 +156,7 @@ const SKIP_TAGS = new Set(['script', 'style', 'svg', 'code', 'pre', 'title']);
 /**
  * User-visible markup text without data-i18n*. Skipped, with everything
  * inside: translate="no" (text that stays as is, as in HTML),
- * data-i18n-runtime (code sets this text through t()), and icons
+ * data-i18n-runtime (page markup whose text code sets through t()), and icons
  * (aria-hidden, Material Symbols).
  */
 export function unmarkedMarkup(file, html) {
@@ -404,9 +404,12 @@ export function unmarkedScript(file, original) {
  */
 export function findUnmarked() {
   const found = [];
-  for (const file of trackedFiles('index.html', 'src/ui/templates/*.html'))
+  for (const file of markupFiles()) {
+    found.push(...unmarkedMarkup(file, readMarkup(file)));
+  }
+  for (const file of trackedFiles('src/**/*.vue'))
     found.push(
-      ...unmarkedMarkup(file, readFileSync(path.join(ROOT, file), 'utf8')),
+      ...markedTemplate(file, readFileSync(path.join(ROOT, file), 'utf8')),
     );
   for (const file of sourceFiles().filter(
     (name) => !NOT_UI.some((pattern) => pattern.test(name)),
@@ -423,6 +426,57 @@ export function findUnmarked() {
   });
 }
 
+/**
+ * data-i18n* in a Vue template: views translate with t() as they render, so
+ * their text follows the locale; the attributes are for static page markup.
+ * Reads the whole single-file component, so lines are the file's own.
+ */
+export function markedTemplate(file, source) {
+  const start = source.indexOf('<template>');
+  if (start === -1) return [];
+  const end = source.lastIndexOf('</template>');
+  // Comments and attribute values are blanked, keeping every offset.
+  const blank = (text) => text.replace(/[^\n]/g, ' ');
+  const template = source
+    .slice(0, end === -1 ? undefined : end)
+    .replace(/<!--[\s\S]*?-->/g, blank);
+  const found = [];
+  const TAG = /<[a-zA-Z][\w-]*((?:"[^"]*"|'[^']*'|[^>"'])*)>/g;
+  TAG.lastIndex = start + '<template>'.length;
+  for (let tag; (tag = TAG.exec(template));) {
+    const attrs = tag[1].replace(/"[^"]*"|'[^']*'/g, blank);
+    const offset = tag.index + tag[0].length - 1 - tag[1].length;
+    for (const match of attrs.matchAll(
+      /(?<=\s)(?::|v-bind:)?(data-i18n[\w-]*)(?=[\s=/]|$)/g,
+    ))
+      found.push({
+        where: `${file}:${lineAt(source, offset + match.index)}`,
+        text: `${match[1]}: use t() in a Vue template`,
+      });
+  }
+  return found;
+}
+
+/** Markup checked for unmarked text: the page and its views. */
+function markupFiles() {
+  return trackedFiles('index.html', 'src/ui/views/*.vue');
+}
+
+/**
+ * A file's markup; for a single-file component, its template block without
+ * interpolations, which are code: their t() calls are read with the sources.
+ */
+function readMarkup(file) {
+  const source = readFileSync(path.join(ROOT, file), 'utf8');
+  if (!file.endsWith('.vue')) return source;
+  const start = source.indexOf('<template>');
+  const end = source.lastIndexOf('</template>');
+  if (start === -1) return '';
+  return source
+    .slice(start + '<template>'.length, end)
+    .replace(/\{\{[\s\S]*?\}\}/g, '');
+}
+
 // Text that never reaches the page as UI: tool results and descriptions for
 // AI clients (MCP and the voice model).
 const NOT_UI = [/^src\/tools\//];
@@ -433,6 +487,7 @@ function sourceFiles() {
     'src/*.mjs',
     'src/**/*.js',
     'src/**/*.mjs',
+    'src/**/*.vue',
   ).filter(
     (file) =>
       !file.startsWith('src/i18n/') &&

scripts/package-boundaries.json

@@ -17,8 +17,136 @@
   },
   "application": {
     "exports": ["./application"],
-    "modules": ["src/app/application.js"],
-    "external": []
+    "modules": [
+      "src/app/application.js",
+      "src/ui/vueRuntime.js",
+      "src/ui/views/index.js",
+      "src/ui/views/CockpitView.vue",
+      "src/ui/views/CommandDockView.vue",
+      "src/ui/views/ContextView.vue",
+      "src/ui/views/panels/RadioPanel.vue",
+      "src/ui/views/panels/SdrCard.vue",
+      "src/ui/views/panels/RadioTuner.vue",
+      "src/ui/views/panels/LocalePicker.vue",
+      "src/ui/views/panels/SceneDialog.vue",
+      "src/ui/views/panels/VoiceControl.vue",
+      "src/ui/views/panels/VoiceCard.vue",
+      "src/ui/views/panels/VoiceVisualizer.vue",
+      "src/ui/localePicker.js",
+      "src/ui/views/panels/PhoneTabBar.vue",
+      "src/ui/views/panels/CockpitBriefing.vue",
+      "src/ui/views/panels/CockpitContext.vue",
+      "src/ui/views/panels/CockpitRoute.vue",
+      "src/ui/views/panels/CockpitRollingValue.vue",
+      "src/ui/views/panels/CockpitSignalList.vue",
+      "src/ui/views/panels/CockpitUtilityControls.vue",
+      "src/ui/cockpitBriefPages.js",
+      "src/ui/cockpitContextState.js",
+      "src/ui/cockpitInstrumentState.js",
+      "src/ui/cockpitRollingValue.js",
+      "src/ui/radioTunerModel.js",
+      "src/ui/views/panels/MissionDetail.vue",
+      "src/ui/views/panels/MissionRoster.vue",
+      "src/ui/views/panels/AwarenessPanel.vue",
+      "src/ui/views/panels/AwarenessNames.vue",
+      "src/ui/views/DisplayControlsView.vue",
+      "src/ui/views/LayerPanelsView.vue",
+      "src/ui/views/ProviderSettingsView.vue",
+      "src/ui/views/SceneChromeView.vue",
+      "src/ui/views/WelcomeView.vue",
+      "src/ui/views/SceneOptions.vue",
+      "src/ui/views/SceneShotList.vue",
+      "src/ui/stores/scenes.js",
+      "src/ui/scenePresentation.js",
+      "src/i18n/index.js",
+      "src/i18n/locale.js",
+      "src/i18n/locales/de.json",
+      "src/i18n/locales/es.json",
+      "src/i18n/locales/fr.json",
+      "src/i18n/locales/it.json",
+      "src/i18n/locales/ja.json",
+      "src/i18n/locales/pt.json",
+      "src/i18n/locales/ru.json",
+      "src/i18n/locales/uk.json",
+      "src/i18n/locales/zh-CN.json",
+      "src/i18n/locales/zh-Hant.json",
+      "src/ui/views/panels/StreetLevelPanel.vue",
+      "src/ui/views/panels/CctvPanel.vue",
+      "src/ui/cctv/CctvCalValue.vue",
+      "src/ui/cctv/CctvPicker.vue",
+      "src/ui/stores/cctv.js",
+      "src/ui/stores/radio.js",
+      "src/ui/stores/context.js",
+      "src/ui/stores/cockpit.js",
+      "src/ui/stores/locale.js",
+      "src/ui/stores/providerSettings.js",
+      "src/ui/stores/sceneSharing.js",
+      "src/ui/stores/voice.js",
+      "src/ui/stores/location.js",
+      "src/ui/stores/streetLevel.js",
+      "src/ui/rail/RailChips.vue",
+      "src/ui/views/panels/DisplayPanel.vue",
+      "src/ui/views/panels/GeoImport.vue",
+      "src/ui/stores/display.js",
+      "src/ui/localSdrPresentation.js",
+      "src/ui/unitLabels.js",
+      "src/layers/localAdsb/feedNames.js",
+      "src/ui/stores/owners.js",
+      "src/ui/rail/rangeValue.js",
+      "src/ui/rail/classToggle.js",
+      "src/ui/rail/focusSafeChildren.js",
+      "src/ui/rail/fieldValue.js",
+      "src/ui/rail/statusText.js",
+      "src/voice/control.js",
+      "src/ui/views/panels/ImagerySplitView.vue",
+      "src/ui/stores/imagerySplit.js",
+      "src/ui/stores/status.js",
+      "src/ui/views/panels/SplitFlapText.vue",
+      "src/splitFlap.js",
+      "src/ui/stores/sceneInteractions.js",
+      "src/ui/views/panels/SceneInteractions.vue",
+      "src/ui/stores/dataPacks.js",
+      "src/ui/views/panels/DataPacks.vue",
+      "src/ui/stores/pointerReticle.js",
+      "src/ui/stores/windInspection.js",
+      "src/ui/views/panels/WindInspectionMarker.vue",
+      "src/ui/stores/missionReplay.js",
+      "src/ui/views/panels/MissionReplayOverlay.vue",
+      "src/ui/stores/bhoteKoshiPanel.js",
+      "src/ui/views/panels/BhoteKoshiPanel.vue",
+      "src/ui/stores/celestialRing.js",
+      "src/ui/views/panels/CelestialRing.vue",
+      "src/ui/stores/screenAnnotations.js",
+      "src/ui/views/panels/ScreenAnnotations.vue",
+      "src/ui/stores/worldOverlayActions.js",
+      "src/ui/stores/awarenessDirection.js",
+      "src/ui/views/panels/AwarenessDirection.vue",
+      "src/ui/stores/hud.js",
+      "src/ui/views/IntelHudView.vue",
+      "src/ui/stores/firstRun.js",
+      "src/firstRunCopy.js",
+      "src/ui/kit/UiButton.vue",
+      "src/ui/kit/UiSegmented.vue",
+      "src/ui/rail/RailPanel.vue",
+      "src/ui/kit/UiPanel.vue",
+      "src/ui/kit/UiPanelToggle.vue",
+      "src/ui/stores/panelChrome.js",
+      "src/ui/rail/PanelCollapseButton.vue",
+      "src/ui/rail/panelState.js",
+      "src/sdr/gain.js",
+      "src/ui/kit/UiSlider.js",
+      "src/ui/kit/UiChip.vue",
+      "src/ui/kit/UiSelect.js",
+      "src/ui/kit/UiEmpty.vue",
+      "src/ui/kit/UiBadge.vue",
+      "src/ui/stores/globeActions.js",
+      "src/ui/views/panels/GlobeActions.vue",
+      "src/ui/views/panels/GlobeCompass.vue",
+      "src/ui/stores/recording.js",
+      "src/ui/styleParameters.js",
+      "src/ui/i18n.js"
+    ],
+    "external": ["vue", "pinia", "vue-i18n"]
   },
   "viewer": {
     "exports": ["./application/viewer"],
@@ -34,15 +162,17 @@
   },
   "vite-build": {
     "runtime": "node",
-    "exports": ["./build/vite", "./build/html"],
+    "exports": ["./build/vite", "./build/register-vue"],
     "modules": [
       "build/vite.js",
-      "build/application-html.js",
       "build/allowedHosts.js",
       "build/embed-framing.js",
-      "build/panel.js"
+      "build/panel.js",
+      "build/vueOptions.js",
+      "build/registerVue.js",
+      "build/vueLoader.js"
     ],
-    "external": ["vite-plugin-cesium"]
+    "external": ["vite-plugin-cesium", "@vitejs/plugin-vue", "vue"]
   },
   "live-providers": {
     "runtime": "node",
@@ -426,7 +556,8 @@
       "src/ui/rightPanelRail.js",
       "src/ui/panelMeasurement.js",
       "src/ui/panelRailGeometry.js",
-      "src/panelStackLayout.js"
+      "src/panelStackLayout.js",
+      "src/ui/panelAccordion.js"
     ],
     "external": []
   },
@@ -436,7 +567,7 @@
       "src/ui/visualInput.js",
       "src/ui/applicationShortcuts.js",
       "src/ui/styleParameters.js",
-      "src/ui/slider.js",
+      "src/ui/rail/rangeValue.js",
       "src/i18n/index.js",
       "src/i18n/locale.js",
       "src/i18n/locales/ar.json",
@@ -449,13 +580,15 @@
       "src/i18n/locales/ru.json",
       "src/i18n/locales/uk.json",
       "src/i18n/locales/zh-CN.json",
-      "src/i18n/locales/zh-Hant.json"
+      "src/i18n/locales/zh-Hant.json",
+      "src/ui/rail/fieldValue.js",
+      "src/ui/kit/UiSlider.js"
     ],
-    "external": []
+    "external": ["vue"]
   },
   "display-controls": {
     "exports": ["./ui/display"],
-    "modules": ["src/ui/displayControls.js", "src/ui/segmentedControl.js"],
+    "modules": ["src/ui/displayControls.js"],
     "external": []
   },
   "visual-effects": {
@@ -509,9 +642,11 @@
       "src/ui/weatherPanel.js",
       "src/ui/railCards.js",
       "src/ui/railCardBlocks.js",
-      "src/ui/slider.js",
-      "src/ui/chipGroup.js",
-      "src/ui/rowList.js",
+      "src/ui/layerRowText.js",
+      "src/ui/layerPanel/LayerRows.vue",
+      "src/ui/rail/classToggle.js",
+      "src/ui/rail/focusSafeChildren.js",
+      "src/ui/layerPanel/RowText.vue",
       "src/ui/railTimeline.js",
       "src/ui/clearLayersControl.js",
       "src/loadingFeedback.js",
@@ -536,9 +671,22 @@
       "src/ui/unitLabels.js",
       "src/ui/keyGuidance.js",
       "src/ui/statusText.js",
-      "src/ui/statusBadge.js"
+      "src/ui/rail/RailChips.vue",
+      "src/ui/rail/RailRowList.vue",
+      "src/ui/rail/RailCardSetting.vue",
+      "src/ui/rail/RailCardBlocks.vue",
+      "src/ui/rail/RailCard.vue",
+      "src/ui/rail/RailCards.vue",
+      "src/ui/rail/utcClock.js",
+      "src/ui/rail/RailTimeline.vue",
+      "src/ui/rail/rangeValue.js",
+      "src/ui/weather/WeatherReadout.vue",
+      "src/ui/kit/UiButton.vue",
+      "src/ui/kit/UiBadge.vue",
+      "src/ui/rail/fieldValue.js",
+      "src/ui/kit/UiSlider.js"
     ],
-    "external": []
+    "external": ["vue"]
   },
   "location-controls": {
     "exports": ["./ui/location"],
@@ -572,6 +720,9 @@
       "src/ui/radioControls.js",
       "src/ui/radioBindings.js",
       "src/ui/radioPresentation.js",
+      "src/ui/vueRuntime.js",
+      "src/ui/stores/radio.js",
+      "src/ui/stores/owners.js",
       "src/ui/radioTunerModel.js",
       "src/i18n/index.js",
       "src/i18n/locale.js",
@@ -585,9 +736,10 @@
       "src/i18n/locales/ru.json",
       "src/i18n/locales/uk.json",
       "src/i18n/locales/zh-CN.json",
-      "src/i18n/locales/zh-Hant.json"
+      "src/i18n/locales/zh-Hant.json",
+      "src/ui/i18n.js"
     ],
-    "external": []
+    "external": ["vue", "pinia", "vue-i18n"]
   },
   "cctv-controls": {
     "exports": ["./ui/cctv"],
@@ -595,7 +747,6 @@
       "src/ui/cctv.js",
       "src/ui/cctvBindings.js",
       "src/ui/cctvCalibration.js",
-      "src/ui/formField.js",
       "src/ui/cctvControls.js",
       "src/ui/cctvFrames.js",
       "src/ui/cctvVideo.js",
@@ -614,9 +765,12 @@
       "src/i18n/locales/zh-CN.json",
       "src/i18n/locales/zh-Hant.json",
       "src/ui/unitLabels.js",
-      "src/ui/statusBadge.js"
+      "src/ui/vueRuntime.js",
+      "src/ui/stores/cctv.js",
+      "src/ui/stores/status.js",
+      "src/ui/i18n.js"
     ],
-    "external": []
+    "external": ["vue", "pinia", "vue-i18n"]
   },
   "context-controls": {
     "exports": ["./ui/context", "./ui/context/policy"],
@@ -661,6 +815,10 @@
     "modules": [
       "src/ui/cockpit.js",
       "src/ui/cockpitBriefing.js",
+      "src/ui/cockpitBriefPages.js",
+      "src/ui/cockpitContextState.js",
+      "src/ui/cockpitInstrumentState.js",
+      "src/ui/cockpitRollingValue.js",
       "src/ui/cockpitCamera.js",
       "src/ui/cockpitContext.js",
       "src/ui/cockpitController.js",
@@ -699,7 +857,9 @@
       "src/ui/scenes.js",
       "src/ui/sceneControls.js",
       "src/ui/scenePresentation.js",
-      "src/ui/actionButton.js",
+      "src/ui/stores/scenes.js",
+      "src/ui/views/SceneOptions.vue",
+      "src/ui/views/SceneShotList.vue",
       "src/i18n/index.js",
       "src/i18n/locale.js",
       "src/i18n/locales/ar.json",
@@ -713,9 +873,11 @@
       "src/i18n/locales/uk.json",
       "src/i18n/locales/zh-CN.json",
       "src/i18n/locales/zh-Hant.json",
-      "src/ui/unitLabels.js"
+      "src/ui/unitLabels.js",
+      "src/ui/vueRuntime.js",
+      "src/ui/i18n.js"
     ],
-    "external": []
+    "external": ["vue", "pinia", "vue-i18n"]
   },
   "ui-shell": {
     "exports": ["./ui/shell"],
@@ -755,7 +917,6 @@
       "src/navigationPolicy.js",
       "src/panelStackLayout.js",
       "src/rightRailPolicy.js",
-      "src/splitFlap.js",
       "src/styles/anime.js",
       "src/styles/noir.js",
       "src/styles/retro.js",
@@ -771,7 +932,6 @@
       "src/ui/cctv.js",
       "src/ui/cctvBindings.js",
       "src/ui/cctvCalibration.js",
-      "src/ui/formField.js",
       "src/ui/cctvControls.js",
       "src/ui/cctvFrames.js",
       "src/ui/cctvVideo.js",
@@ -779,6 +939,10 @@
       "src/ui/clearLayersControl.js",
       "src/ui/cockpit.js",
       "src/ui/cockpitBriefing.js",
+      "src/ui/cockpitBriefPages.js",
+      "src/ui/cockpitContextState.js",
+      "src/ui/cockpitInstrumentState.js",
+      "src/ui/cockpitRollingValue.js",
       "src/ui/cockpitCamera.js",
       "src/ui/cockpitContext.js",
       "src/ui/cockpitController.js",
@@ -800,15 +964,17 @@
       "src/ui/contextSubscriptions.js",
       "src/ui/contextTransactions.js",
       "src/ui/displayControls.js",
-      "src/ui/segmentedControl.js",
       "src/ui/effects.js",
       "src/ui/frameRateMonitor.js",
       "src/ui/layerPanel.js",
       "src/ui/weatherPanel.js",
       "src/ui/railCards.js",
       "src/ui/railCardBlocks.js",
-      "src/ui/chipGroup.js",
-      "src/ui/rowList.js",
+      "src/ui/layerRowText.js",
+      "src/ui/layerPanel/LayerRows.vue",
+      "src/ui/rail/classToggle.js",
+      "src/ui/rail/focusSafeChildren.js",
+      "src/ui/layerPanel/RowText.vue",
       "src/ui/railTimeline.js",
       "src/ui/layers.js",
       "src/ui/leftPanelRail.js",
@@ -834,7 +1000,9 @@
       "src/ui/rightPanelRail.js",
       "src/ui/sceneControls.js",
       "src/ui/scenePresentation.js",
-      "src/ui/actionButton.js",
+      "src/ui/stores/scenes.js",
+      "src/ui/views/SceneOptions.vue",
+      "src/ui/views/SceneShotList.vue",
       "src/ui/scenes.js",
       "src/ui/shareFollow.js",
       "src/share/follow.js",
@@ -843,7 +1011,6 @@
       "src/ui/shellElements.js",
       "src/ui/shellFeedback.js",
       "src/ui/styleParameters.js",
-      "src/ui/slider.js",
       "src/ui/surfaceKeyboard.js",
       "src/ui/uiLifetime.js",
       "src/ui/visualEffects.js",
@@ -882,11 +1049,58 @@
       "src/ui/keyGuidance.js",
       "src/ui/layerNames.js",
       "src/ui/statusText.js",
-      "src/ui/statusBadge.js",
       "src/scopeMaskPolicy.js",
-      "src/visualStylePolicy.js"
+      "src/visualStylePolicy.js",
+      "src/ui/stores/panels.js",
+      "src/ui/panelRailCatalog.js",
+      "src/ui/vueRuntime.js",
+      "src/ui/kit/UiIcon.vue",
+      "src/ui/kit/rail.js",
+      "src/ui/kit/UiTooltip.vue",
+      "src/ui/kit/UiRail.vue",
+      "src/ui/PanelRailView.vue",
+      "src/ui/panelNavigation.js",
+      "src/ui/panelAccordion.js",
+      "src/ui/rail/RailRowList.vue",
+      "src/ui/rail/RailChips.vue",
+      "src/ui/rail/RailCardSetting.vue",
+      "src/ui/rail/RailCardBlocks.vue",
+      "src/ui/rail/RailCard.vue",
+      "src/ui/rail/RailCards.vue",
+      "src/ui/rail/utcClock.js",
+      "src/ui/rail/RailTimeline.vue",
+      "src/ui/rail/rangeValue.js",
+      "src/ui/weather/WeatherReadout.vue",
+      "src/ui/stores/streetLevel.js",
+      "src/ui/stores/cctv.js",
+      "src/ui/stores/radio.js",
+      "src/ui/stores/context.js",
+      "src/ui/stores/cockpit.js",
+      "src/ui/stores/locale.js",
+      "src/ui/stores/providerSettings.js",
+      "src/ui/stores/sceneSharing.js",
+      "src/ui/stores/voice.js",
+      "src/ui/stores/location.js",
+      "src/ui/stores/display.js",
+      "src/ui/stores/owners.js",
+      "src/ui/stores/status.js",
+      "src/ui/toast.js",
+      "src/ui/stores/missionReplay.js",
+      "src/ui/stores/celestialRing.js",
+      "src/ui/stores/worldOverlayActions.js",
+      "src/ui/stores/awarenessDirection.js",
+      "src/ui/stores/hud.js",
+      "src/ui/stores/panelChrome.js",
+      "src/ui/rail/panelState.js",
+      "src/ui/rail/fieldValue.js",
+      "src/ui/kit/UiSlider.js",
+      "src/ui/kit/UiButton.vue",
+      "src/ui/kit/UiBadge.vue",
+      "src/ui/stores/globeActions.js",
+      "src/ui/stores/recording.js",
+      "src/ui/i18n.js"
     ],
-    "external": ["cesium"]
+    "external": ["cesium", "vue", "pinia", "vue-i18n"]
   },
   "ui-styles": {
     "exports": ["./ui/styles"],
@@ -962,7 +1176,9 @@
       "src/ui/scenes.js",
       "src/ui/sceneControls.js",
       "src/ui/scenePresentation.js",
-      "src/ui/actionButton.js",
+      "src/ui/stores/scenes.js",
+      "src/ui/views/SceneOptions.vue",
+      "src/ui/views/SceneShotList.vue",
       "src/contextModePolicy.js",
       "src/director/clock.js",
       "src/director/timeline.js",
@@ -994,6 +1210,7 @@
       "src/director/authoring.js",
       "src/scenes/sharing.js",
       "src/ui/sceneSharing.js",
+      "src/ui/stores/sceneSharing.js",
       "src/data/cameraArrival.js",
       "src/i18n/index.js",
       "src/i18n/locale.js",
@@ -1009,9 +1226,15 @@
       "src/i18n/locales/zh-CN.json",
       "src/i18n/locales/zh-Hant.json",
       "src/ui/unitLabels.js",
-      "src/visualStylePolicy.js"
+      "src/visualStylePolicy.js",
+      "src/ui/vueRuntime.js",
+      "src/ui/stores/status.js",
+      "src/ui/toast.js",
+      "src/ui/stores/sceneInteractions.js",
+      "src/ui/stores/dataPacks.js",
+      "src/ui/i18n.js"
     ],
-    "external": ["cesium"]
+    "external": ["cesium", "vue", "pinia", "vue-i18n"]
   },
   "live-observations": {
     "exports": ["./sources/live"],
@@ -1937,9 +2160,13 @@
       "src/voice/geminiCaptureWorklet.js",
       "src/sources/httpBody.js",
       "src/sources/requestDeadline.js",
-      "src/i18n/marker.js"
+      "src/i18n/marker.js",
+      "src/ui/stores/voice.js",
+      "src/ui/vueRuntime.js",
+      "src/ui/stores/pointerReticle.js",
+      "src/ui/i18n.js"
     ],
-    "external": []
+    "external": ["vue", "pinia", "vue-i18n"]
   },
   "application-components": {
     "exports": [
@@ -2457,7 +2684,6 @@
       "src/ui/cctv.js",
       "src/ui/cctvBindings.js",
       "src/ui/cctvCalibration.js",
-      "src/ui/formField.js",
       "src/ui/cctvControls.js",
       "src/ui/cctvFrames.js",
       "src/ui/cctvVideo.js",
@@ -2465,6 +2691,10 @@
       "src/ui/clearLayersControl.js",
       "src/ui/cockpit.js",
       "src/ui/cockpitBriefing.js",
+      "src/ui/cockpitBriefPages.js",
+      "src/ui/cockpitContextState.js",
+      "src/ui/cockpitInstrumentState.js",
+      "src/ui/cockpitRollingValue.js",
       "src/ui/cockpitCamera.js",
       "src/ui/cockpitContext.js",
       "src/ui/cockpitController.js",
@@ -2487,15 +2717,17 @@
       "src/ui/contextSubscriptions.js",
       "src/ui/contextTransactions.js",
       "src/ui/displayControls.js",
-      "src/ui/segmentedControl.js",
       "src/ui/effects.js",
       "src/ui/frameRateMonitor.js",
       "src/ui/layerPanel.js",
       "src/ui/weatherPanel.js",
       "src/ui/railCards.js",
       "src/ui/railCardBlocks.js",
-      "src/ui/chipGroup.js",
-      "src/ui/rowList.js",
+      "src/ui/layerRowText.js",
+      "src/ui/layerPanel/LayerRows.vue",
+      "src/ui/rail/classToggle.js",
+      "src/ui/rail/focusSafeChildren.js",
+      "src/ui/layerPanel/RowText.vue",
       "src/ui/railTimeline.js",
       "src/ui/layers.js",
       "src/ui/leftPanelRail.js",
@@ -2521,14 +2753,15 @@
       "src/ui/rightPanelRail.js",
       "src/ui/sceneControls.js",
       "src/ui/scenePresentation.js",
-      "src/ui/actionButton.js",
+      "src/ui/stores/scenes.js",
+      "src/ui/views/SceneOptions.vue",
+      "src/ui/views/SceneShotList.vue",
       "src/ui/scenes.js",
       "src/ui/shareFollow.js",
       "src/ui/shareRestoration.js",
       "src/ui/shellElements.js",
       "src/ui/shellFeedback.js",
       "src/ui/styleParameters.js",
-      "src/ui/slider.js",
       "src/ui/surfaceKeyboard.js",
       "src/ui/uiLifetime.js",
       "src/ui/visualEffects.js",
@@ -2670,6 +2903,7 @@
       "src/layers/weather/index.js",
       "src/layers/weather/clock.js",
       "src/layers/weather/rendering.js",
+      "src/layers/weather/display.js",
       "src/layers/weather/shellRendering.js",
       "src/layers/weather/infraredAlpha.js",
       "src/layers/weather/infraredImage.js",
@@ -2702,6 +2936,7 @@
       "src/director/authoring.js",
       "src/scenes/sharing.js",
       "src/ui/sceneSharing.js",
+      "src/ui/stores/sceneSharing.js",
       "src/layers/weather/imageryOrder.js",
       "src/layers/weather/imageryHost.js",
       "src/layers/cyclones/index.js",
@@ -2837,10 +3072,72 @@
       "src/voice/geminiSession.js",
       "src/voice/geminiAudio.js",
       "src/voice/geminiCaptureWorklet.js",
-      "src/ui/statusBadge.js",
       "src/sceneCommandRelease.js",
       "src/scopeMaskPolicy.js",
-      "src/visualStylePolicy.js"
+      "src/visualStylePolicy.js",
+      "src/ui/stores/panels.js",
+      "src/ui/panelRailCatalog.js",
+      "src/ui/vueRuntime.js",
+      "src/ui/kit/UiIcon.vue",
+      "src/ui/kit/UiTooltip.vue",
+      "src/ui/kit/rail.js",
+      "src/ui/kit/UiRail.vue",
+      "src/ui/kit/UiSegmented.vue",
+      "src/ui/PanelRailView.vue",
+      "src/ui/panelNavigation.js",
+      "src/ui/panelAccordion.js",
+      "src/ui/rail/RailChips.vue",
+      "src/ui/rail/RailCardSetting.vue",
+      "src/ui/rail/RailRowList.vue",
+      "src/ui/rail/RailCard.vue",
+      "src/ui/rail/RailCards.vue",
+      "src/ui/rail/RailCardBlocks.vue",
+      "src/ui/rail/utcClock.js",
+      "src/ui/rail/RailTimeline.vue",
+      "src/ui/rail/rangeValue.js",
+      "src/ui/weather/WeatherReadout.vue",
+      "src/ui/recentImagery/RecentImageryCard.vue",
+      "src/ui/recentImagery/RecentImageryReadout.vue",
+      "src/ui/stores/streetLevel.js",
+      "src/ui/stores/cctv.js",
+      "src/ui/stores/radio.js",
+      "src/ui/stores/context.js",
+      "src/ui/stores/cockpit.js",
+      "src/ui/stores/locale.js",
+      "src/ui/stores/providerSettings.js",
+      "src/ui/stores/sceneSharing.js",
+      "src/ui/stores/voice.js",
+      "src/ui/stores/location.js",
+      "src/ui/stores/display.js",
+      "src/ui/stores/owners.js",
+      "src/ui/stores/imagerySplit.js",
+      "src/ui/stores/status.js",
+      "src/ui/toast.js",
+      "src/ui/stores/sceneInteractions.js",
+      "src/ui/stores/dataPacks.js",
+      "src/ui/stores/pointerReticle.js",
+      "src/ui/stores/windInspection.js",
+      "src/layers/wind/inspectionMarker.js",
+      "src/ui/stores/missionReplay.js",
+      "src/ui/stores/bhoteKoshiPanel.js",
+      "src/ui/stores/celestialRing.js",
+      "src/ui/stores/screenAnnotations.js",
+      "src/ui/stores/worldOverlayActions.js",
+      "src/ui/stores/awarenessDirection.js",
+      "src/hudReadouts.js",
+      "src/ui/stores/hud.js",
+      "src/ui/stores/firstRun.js",
+      "src/firstRunCopy.js",
+      "src/ui/stores/panelChrome.js",
+      "src/ui/rail/panelState.js",
+      "src/ui/rail/fieldValue.js",
+      "src/ui/kit/UiSlider.js",
+      "src/ui/kit/UiButton.vue",
+      "src/ui/kit/UiEmpty.vue",
+      "src/ui/kit/UiBadge.vue",
+      "src/ui/stores/globeActions.js",
+      "src/ui/stores/recording.js",
+      "src/ui/i18n.js"
     ],
     "external": [
       "hls.js",
@@ -2851,7 +3148,10 @@
       "pbf",
       "satellite.js",
       "mapillary-js",
-      "@jtarrio/webrtlsdr"
+      "@jtarrio/webrtlsdr",
+      "vue",
+      "pinia",
+      "vue-i18n"
     ]
   },
   "application-catalog": {
@@ -3303,6 +3603,7 @@
       "src/layers/weather/index.js",
       "src/layers/weather/clock.js",
       "src/layers/weather/rendering.js",
+      "src/layers/weather/display.js",
       "src/layers/weather/shellRendering.js",
       "src/layers/weather/infraredAlpha.js",
       "src/layers/weather/infraredImage.js",
@@ -3425,7 +3726,14 @@
       "src/layers/streetLevel/providers/mapillary/policy.js",
       "src/data/geoImportImages.js",
       "src/data/geoImportPins.js",
-      "src/data/geoFileImport.js"
+      "src/data/geoFileImport.js",
+      "src/ui/stores/imagerySplit.js",
+      "src/ui/vueRuntime.js",
+      "src/ui/stores/windInspection.js",
+      "src/layers/wind/inspectionMarker.js",
+      "src/ui/stores/bhoteKoshiPanel.js",
+      "src/hudReadouts.js",
+      "src/ui/i18n.js"
     ],
     "external": [
       "hls.js",
@@ -3436,7 +3744,10 @@
       "pbf",
       "mgrs",
       "mapillary-js",
-      "@jtarrio/webrtlsdr"
+      "@jtarrio/webrtlsdr",
+      "vue",
+      "pinia",
+      "vue-i18n"
     ]
   },
   "application-operations": {
@@ -3583,13 +3894,15 @@
       "src/ui/applicationShortcuts.js",
       "src/ui/effects.js",
       "src/ui/styleParameters.js",
-      "src/ui/slider.js",
+      "src/ui/rail/rangeValue.js",
       "src/ui/uiLifetime.js",
       "src/ui/visualEffects.js",
       "src/ui/visualInput.js",
       "src/ui/visualPresets.js",
       "src/ui/visualSettings.js",
-      "src/ui/segmentedControl.js",
+      "src/ui/stores/display.js",
+      "src/ui/stores/owners.js",
+      "src/ui/vueRuntime.js",
       "src/i18n/marker.js",
       "src/i18n/index.js",
       "src/i18n/locale.js",
@@ -3606,9 +3919,12 @@
       "src/i18n/locales/zh-Hant.json",
       "src/scopeMaskPolicy.js",
       "src/ui/displayControls.js",
-      "src/visualStylePolicy.js"
+      "src/visualStylePolicy.js",
+      "src/ui/rail/fieldValue.js",
+      "src/ui/kit/UiSlider.js",
+      "src/ui/i18n.js"
     ],
-    "external": ["cesium"]
+    "external": ["cesium", "vue", "pinia", "vue-i18n"]
   },
   "ui-panel-chrome": {
     "exports": ["./ui/panel-chrome"],
@@ -3638,9 +3954,15 @@
       "src/i18n/locales/ru.json",
       "src/i18n/locales/uk.json",
       "src/i18n/locales/zh-CN.json",
-      "src/i18n/locales/zh-Hant.json"
+      "src/i18n/locales/zh-Hant.json",
+      "src/ui/panelRailCatalog.js",
+      "src/ui/panelAccordion.js",
+      "src/ui/vueRuntime.js",
+      "src/ui/stores/panelChrome.js",
+      "src/ui/rail/panelState.js",
+      "src/ui/i18n.js"
     ],
-    "external": []
+    "external": ["vue", "pinia", "vue-i18n"]
   },
   "civil-flight-records": {
     "exports": ["./layers/flights/records"],
@@ -3802,9 +4124,13 @@
       "src/i18n/locales/zh-CN.json",
       "src/i18n/locales/zh-Hant.json",
       "src/ui/statusText.js",
-      "src/voice/providerCapabilities.js"
+      "src/voice/providerCapabilities.js",
+      "src/ui/vueRuntime.js",
+      "src/ui/stores/voice.js",
+      "src/ui/stores/pointerReticle.js",
+      "src/ui/i18n.js"
     ],
-    "external": []
+    "external": ["vue", "pinia", "vue-i18n"]
   },
   "alpr-source": {
     "exports": ["./layers/alpr/source"],

scripts/qa-cockpit-utility.mjs

@@ -1720,6 +1720,9 @@ try {
     const priorSignalMaxHeight = signal.style.maxHeight;
     signal.style.maxHeight = '150px';
     manager._setCockpitDisclosure(kind, true);
+    // Let Vue render the disclosure, but not the scheduled layout frame: the
+    // first syncSignalLayout below must be the first pass.
+    await Promise.resolve();
     // One pass must be enough. Record the result of the FIRST layout call, then
     // confirm a second changes nothing, so a convergence regression cannot hide
     // behind a repeated call.
@@ -1751,7 +1754,7 @@ try {
     return state;
   }, { variantName: variant, kind: openKind });
 
-  for (const variant of ['off', 'minimal', 'tactical', 'operator']) {
+  for (const variant of ['off', 'minimal', 'tactical']) {
     for (const kind of ['display', 'radio']) {
       const state = await desktopState(variant, kind);
       check(
@@ -1796,7 +1799,7 @@ try {
     manager._setCockpitDisplayPortalActive(false);
     document.body.classList.remove('cockpit-mode');
     await waitFrames();
-    standard.classList.remove('collapsed');
+    manager._presentPanel(standard, { collapsed: false });
     standard.style.height = '120px';
     standard.style.maxHeight = '120px';
     standard.style.overflowY = 'auto';
@@ -1831,7 +1834,7 @@ try {
     cockpit.style.height = priorCockpitHeight;
     cockpit.style.maxHeight = priorCockpitMaxHeight;
     cockpit.style.overflowY = priorCockpitOverflow;
-    standard.classList.toggle('collapsed', standardWasCollapsed);
+    manager._presentPanel(standard, { collapsed: standardWasCollapsed });
     return {
       standardBefore,
       standardAfter,
@@ -1851,7 +1854,7 @@ try {
     JSON.stringify(portalScroll),
   );
 
-  const boundary = await page.evaluate(() => {
+  const boundary = await page.evaluate(async () => {
     const manager = window.__godsEyeView.styleManager;
     const hud = document.getElementById('cockpit-hud');
     const signal = document.getElementById('cockpit-signal-stream');
@@ -1866,6 +1869,7 @@ try {
     signal.hidden = false;
     manager._setCockpitDisclosure('radio', false);
     manager._setCockpitDisclosure('display', true);
+    await new Promise(requestAnimationFrame);
     const priorSignalMaxHeight = signal.style.maxHeight;
     const priorSignalHeight = signal.style.height;
     // The strip is pinned to the viewport ceiling once the briefing card grows
@@ -2081,9 +2085,9 @@ try {
       await page.screenshot({ path: path.join(shotsDir, `cyber-resize-${height}.png`) });
     }
   }
-  await page.evaluate(() => window.__godsEyeView.styleManager._setHudVariant('operator'));
+  await page.evaluate(() => window.__godsEyeView.styleManager._setHudVariant('tactical'));
 
-  const signalTransition = await page.evaluate(() => {
+  const signalTransition = await page.evaluate(async () => {
     const manager = window.__godsEyeView.styleManager;
     const cockpit = manager.cockpitView;
     const signalToggle = document.getElementById('cockpit-signal-toggle');
@@ -2110,6 +2114,8 @@ try {
       manager._setCockpitDisclosure('radio', true);
       manager._setCockpitDisclosure('radio', false);
       const manualCollapseRetained = cockpit.signalCollapsed && cockpit.signalUserCollapsed;
+      // The toggle renders the published collapse on Vue's next flush.
+      await new Promise((resolve) => requestAnimationFrame(resolve));
       return {
         afterExpansion,
         afterRepeatedExpansion,
@@ -2136,7 +2142,7 @@ try {
       && signalTransition.signalAriaExpanded === 'false',
     JSON.stringify(signalTransition),
   );
-  const contextTransition = await page.evaluate(() => {
+  const contextTransition = await page.evaluate(async () => {
     const cockpit = window.__godsEyeView.styleManager.cockpitView;
     const priorCollapsed = cockpit.contextCollapsed;
     const contextToggle = document.getElementById('cockpit-context-toggle');
@@ -2148,6 +2154,8 @@ try {
       cockpit.setContextCollapsed(false);
       const afterExpansion = expandedEvents;
       cockpit.setContextCollapsed(false);
+      // The toggle renders the published collapse on Vue's next flush.
+      await new Promise((resolve) => requestAnimationFrame(resolve));
       return {
         afterExpansion,
         afterRepeatedExpansion: expandedEvents,
@@ -2168,33 +2176,34 @@ try {
     JSON.stringify(contextTransition),
   );
   // Use the real connected DOM to catch focus loss caused by moving live rows.
-  const signalFocus = await page.evaluate(() => {
+  const signalFocus = await page.evaluate(async () => {
     const cockpit = window.__godsEyeView.styleManager.cockpitView;
+    // The rows render on Vue's next update; a frame is past it.
+    const show = async (items) => {
+      cockpit.signalItems = items;
+      cockpit.publishCockpitSignals();
+      await new Promise(requestAnimationFrame);
+    };
     const originalItems = cockpit.signalItems;
     const wasCollapsed = cockpit.signalCollapsed;
     cockpit.setSignalCollapsed(false);
     const item = (id) => ({ key: `qa-${id}`, tone: 'info', timestamp: Date.now(),
       title: `QA ${id}`, detail: 'Keyboard refresh fixture', target: { layerId: 'flights', id } });
     try {
-      cockpit.signalItems = [item('focus-a'), item('focus-b')];
-      cockpit.renderCockpitSignals();
+      await show([item('focus-a'), item('focus-b')]);
       const button = cockpit.signalList.querySelector('[data-signal-id="focus-a"]');
       button.focus();
       const acquired = document.activeElement === button;
-      cockpit.signalItems = [item('focus-c'), item('focus-b'), item('focus-a')];
-      cockpit.renderCockpitSignals();
+      await show([item('focus-c'), item('focus-b'), item('focus-a')]);
       const retained = document.activeElement === button && button.isConnected;
       const order = [...cockpit.signalList.querySelectorAll('[data-signal-id]')].map((node) => node.dataset.signalId);
-      cockpit.signalItems = [item('focus-b')];
-      cockpit.renderCockpitSignals();
+      await show([item('focus-b')]);
       const continuation = cockpit.briefTabs[cockpit.briefPageIndex] || cockpit.signalToggle;
       const continued = document.activeElement === continuation;
-      cockpit.signalItems = [item('focus-a'), item('focus-b')];
-      cockpit.renderCockpitSignals();
+      await show([item('focus-a'), item('focus-b')]);
       return { acquired, retained, order, continued, notReclaimed: document.activeElement === continuation };
     } finally {
-      cockpit.signalItems = originalItems;
-      cockpit.renderCockpitSignals();
+      await show(originalItems);
       cockpit.setSignalCollapsed(wasCollapsed);
     }
   });
@@ -2260,12 +2269,14 @@ try {
     signal.hidden = false;
     manager._setCockpitDisclosure('display', false);
     manager._setCockpitDisclosure('radio', false);
+    await new Promise(requestAnimationFrame);
     manager.cockpitView.syncSignalLayout();
     const collapsed = {
       display: displayControl.getBoundingClientRect().toJSON(),
       radio: radioControl.getBoundingClientRect().toJSON(),
     };
     display.click();
+    await new Promise(requestAnimationFrame);
     manager.cockpitView.syncSignalLayout();
     return {
       collapsed,

scripts/qa-context-arrivals.mjs

@@ -474,12 +474,22 @@ async function contacts() {
 
   // SEARCH NEARBY SITES, as the user presses it.
   await page.evaluate(() => {
-    document.getElementById('toast').textContent = '';
+    const toast = document.getElementById('toast');
+    const before = toast.firstChild;
     document.getElementById('installations-search-btn').click();
+    window.__qaToastBefore = before;
   });
+  // Every toast show writes a new text node, even for a repeated message.
   await page
     .waitForFunction(
-      () => document.getElementById('toast').textContent.trim().length > 0,
+      () => {
+        const toast = document.getElementById('toast');
+        return (
+          toast.classList.contains('visible') &&
+          toast.firstChild !== window.__qaToastBefore &&
+          toast.textContent.trim().length > 0
+        );
+      },
       { timeout: 20_000 },
     )
     .catch(() => {});

scripts/qa-director-sharing.mjs

@@ -427,6 +427,9 @@ try {
     shot.interactions = [];
     fields[0].value = JSON.stringify(scene);
     fields[1].value = JSON.stringify(shot);
+    // Typing fires input; the dialog reads its fields from those events.
+    for (const field of fields)
+      field.dispatchEvent(new Event('input', { bubbles: true }));
   });
   await page.click('[data-director-apply-details]');
   await page.waitForFunction(

scripts/qa-firstrun-mutations.mjs

@@ -25,12 +25,18 @@ import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
-const TESTS = ['src/firstRunExperience.test.mjs', 'src/standalone/startupChrome.test.mjs'];
+const TESTS = [
+  'src/firstRunExperience.test.mjs',
+  'src/standalone/startupChrome.test.mjs',
+  'src/firstRunLauncherView.test.mjs',
+];
 
 const FILES = {
   keyboard: path.join(ROOT, 'src', 'ui', 'surfaceKeyboard.js'),
   module: path.join(ROOT, 'src', 'firstRunExperience.js'),
-  html: path.join(ROOT, 'src', 'ui', 'templates', 'welcome.html'),
+  copy: path.join(ROOT, 'src', 'firstRunCopy.js'),
+  surfaces: path.join(ROOT, 'src', 'exclusiveSurfaces.js'),
+  html: path.join(ROOT, 'src', 'ui', 'views', 'WelcomeView.vue'),
   css: path.join(ROOT, 'src', 'ui', 'styles', 'first-run.css'),
   voiceInstructions: path.join(ROOT, 'server/providers/openai/instructions.js'),
   voiceDescriptions: path.join(
@@ -53,7 +59,8 @@ const MUTATIONS = [
     to: "writeStored('local', sessionStorageRef, FIRST_RUN_STORAGE_KEY, 'suppressed');",
   },
   {
-    defect: 'the checkbox is ignored, so nothing can ever suppress the launcher',
+    defect:
+      'the checkbox is ignored, so nothing can ever suppress the launcher',
     file: 'module',
     from: "    ? writeStored('local', storage, FIRST_RUN_STORAGE_KEY, 'suppressed')",
     to: '    ? false',
@@ -77,7 +84,8 @@ const MUTATIONS = [
     to: '  // durable check removed',
   },
   {
-    defect: '?welcome=1 no longer outranks suppression, so demos cannot replay it',
+    defect:
+      '?welcome=1 no longer outranks suppression, so demos cannot replay it',
     file: 'module',
     from: "if (params.get('welcome') === '1') return true;",
     to: '// replay hatch removed',
@@ -139,8 +147,9 @@ const MUTATIONS = [
     to: '    /* observer never attached */',
   },
   {
-    defect: 'cockpit drops off the exclusive list and can stack with the launcher',
-    file: 'module',
+    defect:
+      'cockpit drops off the exclusive list and can stack with the launcher',
+    file: 'surfaces',
     from: "export const EXCLUSIVE_SURFACE_CLASSES = Object.freeze([\n  'cockpit-mode',",
     to: 'export const EXCLUSIVE_SURFACE_CLASSES = Object.freeze([',
   },
@@ -157,45 +166,52 @@ const MUTATIONS = [
     to: 'dismiss();',
   },
   {
-    defect: 'isTopmost stops hit-testing, so an unclassed overlay buries the card again',
+    defect:
+      'isTopmost stops hit-testing, so an unclassed overlay buries the card again',
     file: 'module',
     from: '    root.getClientRects().length > 0 &&\n    !coveredByOverlay();',
     to: '    root.getClientRects().length > 0;',
   },
   {
-    defect: 'an inconclusive hit test reads as COVERED, so ESC quietly stops working',
+    defect:
+      'an inconclusive hit test reads as COVERED, so ESC quietly stops working',
     file: 'module',
     from: '      return Boolean(hit) && !root.contains(hit);',
     to: '      return !root.contains(hit);',
   },
   {
-    defect: 'the launcher stops honouring a key another surface already claimed',
+    defect:
+      'the launcher stops honouring a key another surface already claimed',
     file: 'keyboard',
     from: ' || event.defaultPrevented',
     to: '    /* belt removed */',
   },
   {
-    // Anchored past the call so it cannot land on the cockpit disclosure's own
-    // stopImmediatePropagation() a few lines below and prove nothing about this.
-    defect: 'the radio disclosure returns to stopPropagation, so one ESC does two things',
+    // Anchored past the call so it lands on the Cockpit utility disclosure's
+    // Escape claim and nowhere else.
+    defect:
+      'a Cockpit utility disclosure returns to stopPropagation, so later document listeners also act on its ESC',
     file: 'radio',
-    from: '      event.stopImmediatePropagation();\n      const escapedFromDisclosure =\n        event.target === this._contextRadioToggleBtn ||',
-    to: '      event.stopPropagation();\n      const escapedFromDisclosure =\n        event.target === this._contextRadioToggleBtn ||',
+    from: "      event.stopImmediatePropagation();\n      const kind = displayOpen ? 'display' : 'radio';",
+    to: "      event.stopPropagation();\n      const kind = displayOpen ? 'display' : 'radio';",
   },
   {
-    defect: 'the "no timer" decision is deleted, so the next editor re-litigates it blind',
+    defect:
+      'the "no timer" decision is deleted, so the next editor re-litigates it blind',
     file: 'module',
     from: '   * ACCEPTED, DELIBERATELY NOT TIMED OUT: a surface class that never clears',
     to: '   * (note removed)',
   },
   {
-    defect: 'a bounded reveal timer punches the card through a recording in progress',
+    defect:
+      'a bounded reveal timer punches the card through a recording in progress',
     file: 'module',
     from: '  const syncToExclusiveSurfaces = () => {\n    if (closing) return;',
     to: '  const syncToExclusiveSurfaces = () => {\n    if (closing) return;\n    globalThis.setTimeout?.(reveal, 45000);',
   },
   {
-    defect: 'the accepted no-show vanishes from CURRENT-STATE and reads as a bug',
+    defect:
+      'the accepted no-show vanishes from CURRENT-STATE and reads as a bug',
     file: 'docs',
     from: 'a surface class that never clears means no launcher for that page',
     to: 'the launcher always turns up eventually for that page',
@@ -203,10 +219,11 @@ const MUTATIONS = [
 
   // ── The checkbox may not promise what storage refused ─────────────────────
   {
-    defect: 'a refused write leaves the box ticked, promising a suppression nobody stored',
+    defect:
+      'a refused write leaves the box ticked, promising a suppression nobody stored',
     file: 'module',
-    from: '    if (setFirstRunSuppressed(wanted, storage)) return;',
-    to: '    setFirstRunSuppressed(wanted, storage);\n    return;',
+    from: '    if (setFirstRunSuppressed(Boolean(wanted), storage)) return true;',
+    to: '    setFirstRunSuppressed(Boolean(wanted), storage);\n    return true;',
   },
   {
     defect: 'a missing storage area reports the write as saved',
@@ -215,14 +232,16 @@ const MUTATIONS = [
     to: '    store?.setItem?.(key, value);\n    return true;',
   },
   {
-    defect: 'the scroll fade promises more list on a card where everything fits',
+    defect:
+      'the scroll fade promises more list on a card where everything fits',
     file: 'module',
-    from: 'choiceList.dataset.scrollable = String(overflows);',
-    to: "choiceList.dataset.scrollable = 'true'; void overflows;",
+    from: 'present({ scrollable: String(overflows) });',
+    to: "present({ scrollable: 'true' }); void overflows;",
   },
 
   {
-    defect: 'the DISPLAY rail opens on first run again, stealing the impression',
+    defect:
+      'the DISPLAY rail opens on first run again, stealing the impression',
     file: 'ui',
     from: "if (panelId === 'pp-toggles' && stored === null) collapsed = true;",
     to: "if (panelId === 'pp-toggles' && stored === null) collapsed = false;",
@@ -236,13 +255,15 @@ const MUTATIONS = [
 
   // ── Mission definitions ────────────────────────────────────────────────────
   {
-    defect: 'the removed INFRASTRUCTURE tile comes back as a one-click globe dump',
+    defect:
+      'the removed INFRASTRUCTURE tile comes back as a one-click globe dump',
     file: 'module',
     from: '  environmental: Object.freeze({',
     to: "  infrastructure: Object.freeze({\n    kind: 'globe',\n    layerIds: Object.freeze(['local-datacenters', 'local-dams', 'telegeography-submarine-cables']),\n    busyText: 'Mapping global infrastructure…',\n  }),\n  environmental: Object.freeze({",
   },
   {
-    defect: 'ENVIRONMENTAL drops the keyless earthquakes that carry it without a key',
+    defect:
+      'ENVIRONMENTAL drops the keyless earthquakes that carry it without a key',
     file: 'module',
     from: "layerIds: Object.freeze(['earthquakes', 'local-firms']),",
     to: "layerIds: Object.freeze(['local-firms']),",
@@ -256,11 +277,11 @@ const MUTATIONS = [
   {
     defect: 'the tile stops promising the fires it actually turns on',
     file: 'html',
-    from: '<small>Live earthquakes and active fires, from USGS and NASA</small>',
-    to: '<small>Live earthquakes worldwide, straight from USGS</small>',
+    from: "  'Live earthquakes and active fires, from USGS and NASA',",
+    to: "  'Live earthquakes worldwide, straight from USGS',",
   },
   {
-    defect: "the owner-authored first-run line is quietly rewritten",
+    defect: 'the owner-authored first-run line is quietly rewritten',
     file: 'html',
     from: 'It feels like a forbidden cockpit—then you realize the sources are public and the data is real.',
     to: "It feels like a forbidden cockpit. It isn't — every feed is public, and every contact is live.",
@@ -302,21 +323,24 @@ const MUTATIONS = [
     to: 'if (!mission) return { ok: true, choice };',
   },
   {
-    defect: 'the fires/quakes tile name stops being switchable from one constant',
-    file: 'module',
-    from: 'return ENVIRONMENTAL_LABELS[choice] || ENVIRONMENTAL_LABELS.ENVIRONMENTAL;',
-    to: 'return ENVIRONMENTAL_LABELS.ENVIRONMENTAL;',
+    defect:
+      'the fires/quakes tile name stops being switchable from one constant',
+    file: 'copy',
+    from: 'ENVIRONMENTAL_LABEL_KEYS[choice] || ENVIRONMENTAL_LABEL_KEYS.ENVIRONMENTAL;',
+    to: 'ENVIRONMENTAL_LABEL_KEYS.ENVIRONMENTAL;',
   },
 
   // ── Defaults interplay (the ruling this whole integration turns on) ────────
   {
-    defect: "mission layer enables stop persisting, unlike the clicks they stand for",
+    defect:
+      'mission layer enables stop persisting, unlike the clicks they stand for',
     file: 'module',
     from: "dataManager.setEnabled(layerId, true, { origin: 'user' })",
     to: 'dataManager.setEnabled(layerId, true)',
   },
   {
-    defect: 'a mission hand-edits detection and kills the style auto-preset contract',
+    defect:
+      'a mission hand-edits detection and kills the style auto-preset contract',
     file: 'module',
     from: '        flyToGlobe: () => styleManager.resetToGlobeView(),',
     to: '        flyToGlobe: () => { styleManager._detectionUserOverridden = true; return styleManager.resetToGlobeView(); },',
@@ -328,13 +352,15 @@ const MUTATIONS = [
     to: '      styleManager._setModels3dEnabled?.(true);\n          const result = await styleManager.setContextMode(mode);',
   },
   {
-    defect: 'the Context panel is left collapsed, hiding the mode that just started',
+    defect:
+      'the Context panel is left collapsed, hiding the mode that just started',
     file: 'module',
     from: "            styleManager.setPanelCollapsed?.('global-context-panel', false, {\n              explicit: true,\n            });",
     to: '            // panel reveal removed',
   },
   {
-    defect: 'the decision table is deleted, so the next editor re-litigates it blind',
+    defect:
+      'the decision table is deleted, so the next editor re-litigates it blind',
     file: 'module',
     from: ' * MISSION → APP STATE, AND WHAT IT IS ALLOWED TO PERSIST',
     to: ' * (notes removed)',
@@ -342,10 +368,11 @@ const MUTATIONS = [
 
   // ── Accessibility and the transplant defects ──────────────────────────────
   {
-    defect: 'disabling the focused tile drops the keyboard to <body> mid-flight',
-    file: 'module',
-    from: "    for (const button of buttons)\n      button.setAttribute('aria-disabled', String(next));",
-    to: '    for (const button of buttons) button.disabled = next;',
+    defect:
+      'disabling the focused tile drops the keyboard to <body> mid-flight',
+    file: 'html',
+    from: ':aria-disabled="launcher?.busy ?? undefined" @click="controls?.choose(\'contacts\')"',
+    to: ':disabled="launcher?.busy === \'true\'" @click="controls?.choose(\'contacts\')"',
   },
   {
     defect: 'Tab escapes into an app the visitor has not seen yet',
@@ -384,19 +411,22 @@ const MUTATIONS = [
     to: 'body.never-matches-anything #first-run-launcher,',
   },
   {
-    defect: 'the flex card defeats [hidden] and sits in the a11y tree pre-reveal',
+    defect:
+      'the flex card defeats [hidden] and sits in the a11y tree pre-reveal',
     file: 'css',
     from: '#first-run-launcher[hidden] {\n  display: none;\n}',
     to: '/* [hidden] rule removed */',
   },
   {
-    defect: 'the card loses its viewport cap and clips on a short landscape phone',
+    defect:
+      'the card loses its viewport cap and clips on a short landscape phone',
     file: 'css',
     from: '  max-height: calc(100dvh - 1.5rem);',
     to: '  /* cap removed */',
   },
   {
-    defect: 'the mission list stops scrolling, so tiles overflow the capped card',
+    defect:
+      'the mission list stops scrolling, so tiles overflow the capped card',
     file: 'css',
     from: '  min-height: 0;\n  overflow-y: auto;',
     to: '  /* scroll removed */',
@@ -415,19 +445,19 @@ const MUTATIONS = [
   {
     defect: 'a mission tile is dropped from the menu',
     file: 'html',
-    from: '      <button type="button" data-first-run-choice="space-missions">',
-    to: '      <button type="button" data-first-run-choice-disabled="space-missions">',
+    from: '      <button type="button" data-first-run-choice="space-missions"',
+    to: '      <button type="button" data-first-run-choice-disabled="space-missions"',
   },
   {
-    defect: 'the menu order stops matching the owner\'s',
+    defect: "the menu order stops matching the owner's",
     file: 'html',
-    from: '<button type="button" data-first-run-choice="environmental">',
-    to: '<button type="button" data-first-run-choice="zzz-environmental">',
+    from: '<button type="button" data-first-run-choice="environmental"',
+    to: '<button type="button" data-first-run-choice="zzz-environmental"',
   },
   {
     defect: 'the "don\'t show again" checkbox is removed',
     file: 'html',
-    from: '<input type="checkbox" data-first-run-suppress />',
+    from: '<input type="checkbox" data-first-run-suppress @change="onSuppress" />',
     to: '<span data-first-run-suppress-removed></span>',
   },
   {
@@ -439,8 +469,8 @@ const MUTATIONS = [
   {
     defect: 'the launcher is no longer announced as a dialog',
     file: 'html',
-    from: '<aside id="first-run-launcher" role="dialog"',
-    to: '<aside id="first-run-launcher"',
+    from: 'id="first-run-launcher" role="dialog"',
+    to: 'id="first-run-launcher"',
   },
   {
     defect: 'the launcher is revealed before the loading cover yields',
@@ -449,7 +479,8 @@ const MUTATIONS = [
     to: "      revealFirstRun();\n      loadingScreen.classList.add('hidden');",
   },
   {
-    defect: 'the globe missions lose their DataManager and cannot enable layers',
+    defect:
+      'the globe missions lose their DataManager and cannot enable layers',
     file: 'main',
     from: 'firstRun = initializeWelcome?.({ styleManager, dataManager });',
     to: 'firstRun = initializeWelcome?.({ styleManager });',
@@ -463,7 +494,8 @@ const MUTATIONS = [
     to: "'Counts, lists, superlatives, and attribute filters over records loaded by ENABLED layers",
   },
   {
-    defect: 'the instruction mapping is dropped, so voice cannot reach the modes',
+    defect:
+      'the instruction mapping is dropped, so voice cannot reach the modes',
     file: 'voiceInstructions',
     from: "    'NAMED VIEWS are shorthand",
     to: "    // 'NAMED VIEWS are shorthand",
@@ -471,21 +503,25 @@ const MUTATIONS = [
 ];
 
 const originals = new Map();
-for (const [key, file] of Object.entries(FILES)) originals.set(key, fs.readFileSync(file, 'utf8'));
+for (const [key, file] of Object.entries(FILES))
+  originals.set(key, fs.readFileSync(file, 'utf8'));
 
 /** Write only on a real change: a no-op write still wakes every file watcher. */
 const write = (file, next) => {
   if (fs.readFileSync(file, 'utf8') !== next) fs.writeFileSync(file, next);
 };
 const restoreAll = () => {
-  for (const [key, file] of Object.entries(FILES)) write(file, originals.get(key));
+  for (const [key, file] of Object.entries(FILES))
+    write(file, originals.get(key));
 };
 process.on('exit', restoreAll);
 
 let caught = 0;
 const missed = [];
 
-console.log(`\nFirst-run launcher pin strength — ${MUTATIONS.length} individual reverts\n`);
+console.log(
+  `\nFirst-run launcher pin strength — ${MUTATIONS.length} individual reverts\n`,
+);
 for (const { defect, file, from, to } of MUTATIONS) {
   const original = originals.get(file);
   if (!original.includes(from)) {
@@ -497,10 +533,15 @@ for (const { defect, file, from, to } of MUTATIONS) {
   let red = false;
   let by = '';
   try {
-    execFileSync('node', ['--test', ...TESTS], { cwd: ROOT, encoding: 'utf8', stdio: 'pipe' });
+    execFileSync(
+      'node',
+      ['--import=./build/registerVue.js', '--test', ...TESTS],
+      { cwd: ROOT, encoding: 'utf8', stdio: 'pipe' },
+    );
   } catch (error) {
     red = true;
-    const failed = String(error.stdout || '').split('\n')
+    const failed = String(error.stdout || '')
+      .split('\n')
       .filter((line) => line.trim().startsWith('✖') && line.includes('('))
       .map((line) => line.trim().slice(2).split(' (')[0]);
     by = [...new Set(failed)].slice(0, 2).join('; ');

scripts/qa-firstrun.mjs

@@ -357,53 +357,6 @@ async function runArbitrationSection(page, { shots, consoleErrors }) {
       `classVisible=${afterUncoveredEsc.classVisible} session=${afterUncoveredEsc.session}`,
     );
 
-    // ── Blocker repro: a control that claims only the KEY ───────────────────
-    // The compact Radio disclosure closes on ESC from a capture listener bound
-    // long before this module exists. It called stopPropagation(), which does
-    // NOT stop later listeners on the same document — so one key closed the
-    // disclosure AND dismissed the launcher. The card is not hiding behind this
-    // one and must not yield to it: the key is simply already spoken for.
-    await open(page, { query: "?welcome=1", errorSink: consoleErrors });
-    const beforeRadio = await launcherState();
-    record('the launcher is up before the radio disclosure opens', beforeRadio.onScreen);
-    const radioOpened = await page.evaluate(() => {
-      document.getElementById('context-radio-toggle-btn')?.click();
-      return !!document.getElementById('context-radio-dock')?.classList.contains('disclosure-open');
-    });
-    await sleep(250);
-    record('the compact Radio disclosure opens', radioOpened);
-    const withRadio = await launcherState();
-    record(
-      'a small disclosure is a key contest, not a screen takeover — no yield',
-      withRadio.classVisible && withRadio.topmost,
-      `classVisible=${withRadio.classVisible} topmost=${withRadio.topmost}`,
-    );
-
-    await page.keyboard.press('Escape');
-    await sleep(400);
-    const radioAfterEsc = await page.evaluate(() => (
-      !!document.getElementById('context-radio-dock')?.classList.contains('disclosure-open')
-    ));
-    const launcherAfterRadioEsc = await launcherState();
-    record('ESC closes the disclosure', radioOpened && !radioAfterEsc,
-      `disclosure still open=${radioAfterEsc}`);
-    record(
-      'that SAME ESC does not also dismiss the launcher',
-      beforeRadio.onScreen && launcherAfterRadioEsc.classVisible
-        && launcherAfterRadioEsc.session !== 'dismissed',
-      `classVisible=${launcherAfterRadioEsc.classVisible} session=${launcherAfterRadioEsc.session} — one key, one action`,
-    );
-    // ...and the NEXT press is the launcher's, so nothing was permanently taken.
-    await page.keyboard.press('Escape');
-    await sleep(600);
-    const escAfterRadioClosed = await launcherState();
-    record(
-      'the next ESC belongs to the launcher again',
-      beforeRadio.onScreen && !escAfterRadioClosed.classVisible
-        && escAfterRadioClosed.session === 'dismissed',
-      `classVisible=${escAfterRadioClosed.classVisible} session=${escAfterRadioClosed.session}`,
-    );
-
     // ── Deferred reveal: a surface already up when the launcher would show ──
     // The class goes on as soon as the app exists, which is well before the
     // launcher's reveal (~T+1.9s), so init genuinely sees a screen it does not

scripts/qa-layer-panel.mjs

@@ -87,17 +87,21 @@ try {
         row().querySelector('.data-toggle-btn').dataset.feedState === 'stale',
       ]);
       const ui = window.__godsEyeView.styleManager;
-      ui._clearSelectedLayersBtn.click();
+      const clearButton = document.getElementById('clear-selected-layers');
+      clearButton.click();
+      // The bar renders the busy state on Vue's next flush.
+      await Promise.resolve();
       result.push([
         'native clear activation presents busy state',
-        ui._clearSelectedLayersBtn.getAttribute('aria-busy') === 'true' &&
+        clearButton.getAttribute('aria-busy') === 'true' &&
           !!ui._contextControls._clearSelectedLayersPromise,
       ]);
       await ui._contextControls._clearSelectedLayersPromise;
+      await Promise.resolve();
       result.push([
         'clear settles through the existing layer transaction',
         !manager.isEnabled(id) &&
-          ui._clearSelectedLayersBtn.getAttribute('aria-busy') === 'false',
+          clearButton.getAttribute('aria-busy') === 'false',
       ]);
       await manager.setEnabled(id, true);
       const final = row().querySelector('.data-toggle-btn');

scripts/qa-location-controls.mjs

@@ -62,13 +62,17 @@ try {
   );
   check(
     'orbit controls and indicator agree',
-    await page.evaluate(() => {
+    await page.evaluate(async () => {
       const ui = window.__godsEyeView.styleManager;
+      // Vue renders on a microtask; a task later the indicator shows it.
+      const rendered = () => new Promise((resolve) => setTimeout(resolve));
       ui.setOrbit(true);
+      await rendered();
       const active =
         ui.orbitController.active &&
         document.getElementById('orbit-indicator').classList.contains('active');
       ui.setOrbit(false);
+      await rendered();
       return (
         active &&
         !ui.orbitController.active &&
@@ -120,8 +124,11 @@ try {
       const ui = window.__godsEyeView.styleManager;
       return (
         ui._searchedLocationLabel === '39.7392° N, 104.9903° W' &&
-        ui._locationMiniCity.textContent.includes('39.7392° N') &&
-        ui._locationMiniPoi.textContent === '104.9903° W'
+        document
+          .getElementById('location-mini-city')
+          .textContent.includes('39.7392° N') &&
+        document.getElementById('location-mini-poi').textContent ===
+          '104.9903° W'
       );
     }),
   );
@@ -194,8 +201,11 @@ try {
       const ui = window.__godsEyeView.styleManager;
       return (
         ui._searchedLocationLabel === 'Second landmark, Test city' &&
-        ui._locationMiniCity.textContent.includes('Second landmark') &&
-        ui._locationMiniPoi.textContent === 'Test city' &&
+        document
+          .getElementById('location-mini-city')
+          .textContent.includes('Second landmark') &&
+        document.getElementById('location-mini-poi').textContent ===
+          'Test city' &&
         ui.activeStyle === 'normal' &&
         !ui._locationSearch.classList.contains('searching')
       );
@@ -227,8 +237,10 @@ try {
         requestAnimationFrame(() => requestAnimationFrame(resolve)),
       );
       return (
-        !ui._poiRow.classList.contains('expanded') &&
-        !ui._locationBarDivider.classList.contains('visible')
+        !document.getElementById('poi-row').classList.contains('expanded') &&
+        !document
+          .getElementById('location-bar-divider')
+          .classList.contains('visible')
       );
     }, cityId),
   );
@@ -284,7 +296,7 @@ try {
     'native reset returns through the existing camera handoff',
     await page.evaluate(async () => {
       const ui = window.__godsEyeView.styleManager;
-      ui._resetGlobeBtn.click();
+      document.getElementById('reset-globe-view').click();
       const pending = ui._globeResetPromise;
       if (!pending) return false;
       await pending;
@@ -301,8 +313,11 @@ try {
       ui._locationControls.destroy();
       ui._locationLookup.destroy();
       const before = ui._navigationGeneration;
-      ui._locationPills.querySelector('button').click();
-      ui._resetGlobeBtn.click();
+      document
+        .getElementById('location-pills')
+        .querySelector('button')
+        ?.click();
+      document.getElementById('reset-globe-view').click();
       ui._locationSearch.dispatchEvent(
         new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }),
       );

scripts/qa-map-source-controls.mjs

@@ -69,9 +69,10 @@ try {
     await page.evaluate(() => {
       const manager = window.__godsEyeView.styleManager;
       return (
-        manager._mapStackChips.querySelector('[aria-pressed="true"]')?.dataset
-          .stackId === 'osm' &&
-        manager._mapStackStatus.textContent ===
+        document
+          .getElementById('map-stack-chips')
+          .querySelector('[aria-pressed="true"]')?.dataset.stackId === 'osm' &&
+        document.getElementById('map-stack-status').textContent ===
           manager.mapStackController.getState().activeStack.shortLabel
       );
     }),
@@ -81,32 +82,38 @@ try {
     await page.evaluate(async () => {
       const manager = window.__godsEyeView.styleManager;
       const result = await manager.setMapStack('esri-imagery');
+      // The dock renders the published row on Vue's next flush.
+      await new Promise((resolve) => setTimeout(resolve, 0));
       const active = manager.mapStackController.getActiveId();
       return (
         window.__qaMapSelections.at(-1) === 'esri-imagery' &&
-        manager._mapStackChips.querySelector('[aria-pressed="true"]')?.dataset
-          .stackId === active &&
+        document
+          .getElementById('map-stack-chips')
+          .querySelector('[aria-pressed="true"]')?.dataset.stackId === active &&
         (result.ok || !!manager.mapStackController.getState().lastError)
       );
     }),
   );
   check(
-    'refresh revokes retained old chips',
-    await page.evaluate(() => {
+    'refresh re-presents the chips without duplicating them',
+    await page.evaluate(async () => {
       const manager = window.__godsEyeView.styleManager;
-      const old = manager._mapStackChips.querySelector('[data-stack-id="osm"]');
       manager._mapSourceControls.refresh();
-      const before = window.__qaMapSelections.length;
-      old.click();
-      return window.__qaMapSelections.length === before;
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      return (
+        document.querySelectorAll('#map-stack-chips [data-stack-id="osm"]')
+          .length === 1
+      );
     }),
   );
   check(
     'refreshed chips still select once',
     await page.evaluate(async () => {
-      const manager = window.__godsEyeView.styleManager;
       const before = window.__qaMapSelections.length;
-      manager._mapStackChips.querySelector('[data-stack-id="osm"]').click();
+      document
+        .getElementById('map-stack-chips')
+        .querySelector('[data-stack-id="osm"]')
+        .click();
       await Promise.resolve();
       return window.__qaMapSelections.length === before + 1;
     }),
@@ -188,7 +195,10 @@ try {
       const manager = window.__godsEyeView.styleManager;
       const before = window.__qaMapSelections.length;
       manager._mapSourceControls.destroy();
-      manager._mapStackChips.querySelector('[data-stack-id="osm"]').click();
+      document
+        .getElementById('map-stack-chips')
+        .querySelector('[data-stack-id="osm"]')
+        .click();
       const result = await manager._mapSourceControls.select('esri-imagery');
       return result === null && window.__qaMapSelections.length === before;
     }),

scripts/qa-map-source-tray.mjs

@@ -871,6 +871,9 @@ try {
       return originalSetStack(stackId);
     };
     const switchPromise = styleManager._setMapStack('osm', { syncShare: false });
+    // The dock renders the published row on Vue's next flush.
+    const rendered = () => new Promise((resolve) => setTimeout(resolve, 0));
+    await rendered();
     const during = {
       status: document.getElementById('map-stack-status').textContent,
       active: [...document.querySelectorAll('.map-stack-chip')]
@@ -879,6 +882,7 @@ try {
     };
     release();
     await switchPromise;
+    await rendered();
     const after = {
       status: document.getElementById('map-stack-status').textContent,
       active: [...document.querySelectorAll('.map-stack-chip')]

scripts/qa-perf.mjs

@@ -310,7 +310,7 @@ try {
     countFrames(2_500),
     page.evaluate(() => new Promise((resolve) => setTimeout(() => {
       // Drive the actual sharpen slider: input event → handler →
-      // _applySharpenIntensity → governorRequestRender. Proves the wiring,
+      // _setSharpenIntensity → governorRequestRender. Proves the wiring,
       // not just the facade.
       const slider = document.getElementById('sharpen-intensity-slider');
       if (!slider) { resolve({ ok: false }); return; }

scripts/qa-radio.mjs

@@ -81,6 +81,32 @@ function check(name, ok, detail = '') {
 
 const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
+// Radio lives only inside Context; a user reaches its controls by expanding
+// Context and then Radio. Returns the prior collapse state so a step can put
+// the panels back for the scenarios that follow.
+async function revealRadioControls(page, targetId) {
+  const prior = await page.evaluate(async (id) => {
+    const manager = window.__godsEyeView.styleManager;
+    const collapsed = (panelId) => document.getElementById(panelId).classList.contains('collapsed');
+    const state = { context: collapsed('global-context-panel'), radio: collapsed('radio-panel') };
+    manager.setPanelCollapsed('global-context-panel', false, { explicit: true });
+    manager.setPanelCollapsed('radio-panel', false, { explicit: true });
+    await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+    document.getElementById(id).scrollIntoView({ block: 'nearest' });
+    return state;
+  }, targetId);
+  await page.waitForSelector(`#${targetId}`, { visible: true });
+  return prior;
+}
+
+async function restoreRadioPanels(page, prior) {
+  await page.evaluate(({ context, radio }) => {
+    const manager = window.__godsEyeView.styleManager;
+    manager.setPanelCollapsed('radio-panel', radio);
+    manager.setPanelCollapsed('global-context-panel', context);
+  }, prior);
+}
+
 // Native pick buffers and clustered overlay entries settle on rendered frames,
 // not on wall-clock sleeps, particularly with software rendering.
 async function settleRadioFrames(page) {
@@ -285,31 +311,16 @@ async function main() {
       window.__godsEyeView.styleManager.setPanelCollapsed('global-context-panel', true);
     });
 
+    const enablePanels = await revealRadioControls(page, 'radio-enable-btn');
     const enableStartedAt = Date.now();
-    const initialDisclosure = await page.evaluate(() => {
-      const button = document.getElementById('context-radio-toggle-btn');
-      const mini = document.getElementById('context-radio-mini');
-      const enabledBefore = window.__godsEyeView.dataManager.isEnabled('radio');
-      button.click();
-      return {
-        enabledBefore,
-        enabledAfterDisclosure: window.__godsEyeView.dataManager.isEnabled('radio'),
-        expanded: button.getAttribute('aria-expanded'),
-        miniHidden: mini.hidden,
-      };
-    });
-    check(
-      'Radio launcher discloses compact controls without changing power',
-      !initialDisclosure.enabledBefore && !initialDisclosure.enabledAfterDisclosure
-        && initialDisclosure.expanded === 'true' && !initialDisclosure.miniHidden,
-      JSON.stringify(initialDisclosure),
-    );
-    await page.$eval('#context-radio-mini-enable-btn', (button) => button.click());
+    await page.click('#radio-enable-btn');
     await page.waitForFunction(() => {
       const state = window.__godsEyeView.dataManager.layers.get('radio').module.getUIState();
       return state.enabled && !state.loading && state.stationCount === 750;
     });
     const enableElapsedMs = Date.now() - enableStartedAt;
+    // Later scenarios start from the collapsed rail this step began with.
+    await restoreRadioPanels(page, enablePanels);
     const initial = await page.evaluate(() => {
       const module = window.__godsEyeView.dataManager.layers.get('radio').module;
       const state = module.getUIState();
@@ -328,9 +339,6 @@ async function main() {
           color: entry.dataset.radioColor,
         })),
         enablePressed: document.getElementById('radio-enable-btn').getAttribute('aria-pressed'),
-        launcherExpanded: document.getElementById('context-radio-toggle-btn').getAttribute('aria-expanded'),
-        launcherActive: document.getElementById('context-radio-toggle-btn').classList.contains('active'),
-        compactEnablePressed: document.getElementById('context-radio-mini-enable-btn').getAttribute('aria-pressed'),
         fullPlayEnabled: !document.getElementById('radio-play-btn').disabled,
         fullPlayLabel: document.getElementById('radio-play-btn').getAttribute('aria-label'),
         tunerVisible: !document.getElementById('radio-tuner').hidden,
@@ -341,9 +349,8 @@ async function main() {
     check('750-station catalog renders within the browser budget', initial.state.stationCount === 750 && enableElapsedMs < 5000, `${enableElapsedMs}ms`);
     check('enable does not autoplay', initial.plays === 0 && initial.state.audioState === 'stopped');
     check(
-      'compact and detailed Radio power controls reflect the layer manager independently of disclosure',
-      initial.enablePressed === 'true' && initial.compactEnablePressed === 'true'
-        && initial.launcherExpanded === 'true' && initial.launcherActive,
+      'Radio power control reflects the layer manager after the panels collapse again',
+      initial.enablePressed === 'true',
     );
     check('dynamic canonical and genre categories reach the UI', initial.filterOptions >= 10, `${initial.filterOptions} options`);
     const musicOption = initial.filterPalette.find((entry) => entry.id === 'music');
@@ -419,14 +426,10 @@ async function main() {
         prevDisabled: document.getElementById('radio-prev-btn').disabled,
         playDisabled: document.getElementById('radio-play-btn').disabled,
         volumeDisabled: document.getElementById('radio-volume').disabled,
-        disclosureLabel: document.getElementById('context-radio-toggle-btn').getAttribute('aria-label'),
-        compactPowerLabel: document.getElementById('context-radio-mini-enable-btn').getAttribute('aria-label'),
-        compactPowerText: document.getElementById('context-radio-mini-enable-btn').textContent,
         fullLabel: document.getElementById('radio-enable-btn').getAttribute('aria-label'),
         fullText: document.getElementById('radio-enable-btn').textContent,
         layerState: document.getElementById('radio-layer-state').textContent,
         playbackMessage: document.getElementById('radio-playback-state').textContent,
-        miniStation: document.getElementById('context-radio-mini-station').textContent,
         dataRailText: document.querySelector('[data-layer-id="radio"] .data-toggle-btn')?.textContent,
         dataRailState: document.querySelector('[data-layer-id="radio"] .data-toggle-btn')?.dataset.feedState,
         dataRailLabel: document.querySelector('[data-layer-id="radio"] .data-toggle-btn')?.getAttribute('aria-label'),
@@ -468,14 +471,10 @@ async function main() {
         && uncertainPresentation.prevDisabled
         && uncertainPresentation.playDisabled
         && uncertainPresentation.volumeDisabled
-        && /compact Radio controls/i.test(uncertainPresentation.disclosureLabel)
-        && /uncertain/i.test(uncertainPresentation.compactPowerLabel)
-        && uncertainPresentation.compactPowerText === 'RECONCILE'
         && /uncertain/i.test(uncertainPresentation.fullLabel)
         && uncertainPresentation.fullText === 'RECONCILE'
         && uncertainPresentation.layerState === 'UNCERTAIN'
         && /uncertain/i.test(uncertainPresentation.playbackMessage)
-        && uncertainPresentation.miniStation === 'RADIO STATE UNCERTAIN'
         && uncertainPresentation.dataRailText === 'UNCERTAIN'
         && uncertainPresentation.dataRailState === 'uncertain'
         && /uncertain/i.test(uncertainPresentation.dataRailLabel)
@@ -517,10 +516,6 @@ async function main() {
       presentationActive: window.__godsEyeView.dataManager.layers.get('radio').module.getUIState().presentationActive,
       markerSourceVisible: window.__godsEyeView.viewer.dataSources.getByName('Radio stations')[0]?.show,
       full: document.getElementById('radio-enable-btn').textContent,
-      disclosure: document.getElementById('context-radio-toggle-btn').getAttribute('aria-label'),
-      disclosureControls: document.getElementById('context-radio-toggle-btn').getAttribute('aria-controls'),
-      disclosureExpanded: document.getElementById('context-radio-toggle-btn').getAttribute('aria-expanded'),
-      compactPower: document.getElementById('context-radio-mini-enable-btn').textContent,
       layerState: document.getElementById('radio-layer-state').textContent,
       message: document.getElementById('radio-playback-state').textContent,
       stopDisabled: document.getElementById('radio-stop-btn').disabled,
@@ -534,8 +529,6 @@ async function main() {
         && disablingPresentation.presentationActive === false
         && disablingPresentation.markerSourceVisible === false
         && disablingPresentation.full === 'DISABLING'
-        && /compact Radio controls/i.test(disablingPresentation.disclosure)
-        && disablingPresentation.compactPower === 'DISABLING'
         && disablingPresentation.layerState === 'DISABLING'
         && /disabling/i.test(disablingPresentation.message)
         && disablingPresentation.stopDisabled
@@ -592,10 +585,6 @@ async function main() {
       presentationActive: window.__godsEyeView.dataManager.layers.get('radio').module.getUIState().presentationActive,
       markerSourceVisible: window.__godsEyeView.viewer.dataSources.getByName('Radio stations')[0]?.show,
       full: document.getElementById('radio-enable-btn').textContent,
-      disclosure: document.getElementById('context-radio-toggle-btn').getAttribute('aria-label'),
-      disclosureControls: document.getElementById('context-radio-toggle-btn').getAttribute('aria-controls'),
-      disclosureExpanded: document.getElementById('context-radio-toggle-btn').getAttribute('aria-expanded'),
-      compactPower: document.getElementById('context-radio-mini-enable-btn').textContent,
       layerState: document.getElementById('radio-layer-state').textContent,
       message: document.getElementById('radio-playback-state').textContent,
       tunerHidden: document.getElementById('radio-tuner').hidden,
@@ -610,10 +599,6 @@ async function main() {
         && enablingPresentation.presentationActive === false
         && enablingPresentation.markerSourceVisible === false
         && enablingPresentation.full === 'ENABLING'
-        && enablingPresentation.disclosure === 'Go to expanded Radio section'
-        && enablingPresentation.disclosureControls === 'radio-panel'
-        && enablingPresentation.disclosureExpanded === 'true'
-        && enablingPresentation.compactPower === 'ENABLING'
         && enablingPresentation.layerState === 'ENABLING'
         && /enabling/i.test(enablingPresentation.message)
         && enablingPresentation.tunerHidden
@@ -1115,7 +1100,7 @@ async function main() {
         document.getElementById('installations-search-btn').click();
         await new Promise((resolve) => setTimeout(resolve, 50));
         const installationFalseMessage = document.getElementById('toast').textContent;
-        const installationFalseReleased = !document.getElementById('installations-search-btn').disabled;
+        const installationFalseReleased = document.getElementById('installations-search-btn').getAttribute('aria-busy') === 'false';
 
         dataManager.setEnabled = async (layerId, shouldEnable) => {
           if (layerId === 'military-installations' && shouldEnable) {
@@ -1126,7 +1111,7 @@ async function main() {
         document.getElementById('installations-search-btn').click();
         await new Promise((resolve) => setTimeout(resolve, 50));
         const installationEnableRejectionMessage = document.getElementById('toast').textContent;
-        const installationEnableRejectionReleased = !document.getElementById('installations-search-btn').disabled;
+        const installationEnableRejectionReleased = document.getElementById('installations-search-btn').getAttribute('aria-busy') === 'false';
 
         dataManager.setEnabled = async (layerId, shouldEnable) => {
           if (layerId === 'military-installations' && shouldEnable) enabled.add(layerId);
@@ -1138,13 +1123,13 @@ async function main() {
         document.getElementById('installations-search-btn').click();
         await new Promise((resolve) => setTimeout(resolve, 50));
         const installationRejectionMessage = document.getElementById('toast').textContent;
-        const installationRejectionReleased = !document.getElementById('installations-search-btn').disabled;
+        const installationRejectionReleased = document.getElementById('installations-search-btn').getAttribute('aria-busy') === 'false';
 
         if (installations) installations.searchNearby = async () => false;
         document.getElementById('installations-search-btn').click();
         await new Promise((resolve) => setTimeout(resolve, 50));
         const installationSearchFalseMessage = document.getElementById('toast').textContent;
-        const installationSearchFalseReleased = !document.getElementById('installations-search-btn').disabled;
+        const installationSearchFalseReleased = document.getElementById('installations-search-btn').getAttribute('aria-busy') === 'false';
         await new Promise((resolve) => setTimeout(resolve, 0));
         return {
           semanticFalseMessage,
@@ -1581,112 +1566,9 @@ async function main() {
       JSON.stringify(directoryRefreshContinuity),
     );
     await page.select('#radio-filter', 'news');
-    check('launcher enables Radio without forcing Context open', !initial.panelExpanded && !initial.contextExpanded && initial.nestedInContext);
+    check('enabled Radio stays nested in Context and leaves both panels collapsed', !initial.panelExpanded && !initial.contextExpanded && initial.nestedInContext);
     check('full Play is available before a station is selected', !initial.state.selected && initial.fullPlayEnabled && initial.fullPlayLabel === 'Play nearest radio station');
 
-    const hoverOnlyDisclosure = await page.evaluate(() => {
-      const button = document.getElementById('context-radio-toggle-btn');
-      if (button.getAttribute('aria-expanded') === 'true') button.click();
-      return {
-        expanded: button.getAttribute('aria-expanded'),
-        hidden: document.getElementById('context-radio-mini').hidden,
-      };
-    });
-    await page.hover('#context-radio-toggle-btn');
-    await sleep(100);
-    const hoverOnlyVisible = await page.$eval('#context-radio-mini', (mini) => (
-      !mini.hidden && getComputedStyle(mini).display !== 'none'
-    ));
-    check(
-      'hover alone does not disclose compact Radio controls',
-      hoverOnlyDisclosure.expanded === 'false' && hoverOnlyDisclosure.hidden && !hoverOnlyVisible,
-      JSON.stringify({ hoverOnlyDisclosure, hoverOnlyVisible }),
-    );
-    await page.click('#context-radio-toggle-btn');
-    await page.waitForFunction(() => {
-      const button = document.getElementById('context-radio-toggle-btn');
-      const mini = document.getElementById('context-radio-mini');
-      return button.getAttribute('aria-expanded') === 'true'
-        && !mini.hidden && getComputedStyle(mini).display !== 'none';
-    });
-    const compact = await page.evaluate(() => {
-      const mini = document.getElementById('context-radio-mini');
-      const toggle = document.getElementById('context-radio-toggle-btn');
-      const dock = document.getElementById('context-radio-dock');
-      const miniRect = mini.getBoundingClientRect();
-      const toggleRect = toggle.getBoundingClientRect();
-      const miniStyle = getComputedStyle(mini);
-      return {
-        visible: miniStyle.display !== 'none' && miniRect.width > 0 && miniRect.height > 0,
-        display: miniStyle.display,
-        visibility: miniStyle.visibility,
-        opacity: miniStyle.opacity,
-        miniRect: { top: miniRect.top, left: miniRect.left, width: miniRect.width, height: miniRect.height },
-        toggleRect: { top: toggleRect.top, left: toggleRect.left, width: toggleRect.width, height: toggleRect.height },
-        dockRect: (() => {
-          const rect = dock.getBoundingClientRect();
-          return { top: rect.top, left: rect.left, width: rect.width, height: rect.height };
-        })(),
-        offsetParent: mini.offsetParent?.id || mini.offsetParent?.className || null,
-        prevEnabled: !document.getElementById('context-radio-mini-prev-btn').disabled,
-        playEnabled: !document.getElementById('context-radio-mini-play-btn').disabled,
-        playLabel: document.getElementById('context-radio-mini-play-btn').getAttribute('aria-label'),
-        nextEnabled: !document.getElementById('context-radio-mini-next-btn').disabled,
-        volumeEnabled: !document.getElementById('context-radio-mini-volume').disabled,
-        offsetBelowToggle: Math.round(miniRect.top - toggleRect.bottom),
-      };
-    });
-    check(
-      'explicit launcher disclosure reveals enabled compact Radio controls',
-      compact.visible && compact.prevEnabled && compact.playEnabled && compact.nextEnabled && compact.volumeEnabled,
-      JSON.stringify(compact),
-    );
-    check('compact Play is available before a station is selected', compact.playLabel === 'Play nearest radio station');
-    check('compact Radio controls sit 20px below the launcher', compact.offsetBelowToggle === 20, `${compact.offsetBelowToggle}px`);
-    const compactCloseDisclosure = await page.evaluate(() => {
-      const launcher = document.getElementById('context-radio-toggle-btn');
-      const close = document.getElementById('context-radio-mini-close-btn');
-      close.focus();
-      close.click();
-      const result = {
-        launcherExpanded: launcher.getAttribute('aria-expanded'),
-        compactHidden: document.getElementById('context-radio-mini').hidden,
-        focusRestored: document.activeElement === launcher,
-        radioCollapsed: document.getElementById('radio-panel').classList.contains('collapsed'),
-      };
-      launcher.click();
-      return result;
-    });
-    check(
-      'dedicated compact close hides only the compact Radio disclosure and restores launcher focus',
-      compactCloseDisclosure.launcherExpanded === 'false'
-        && compactCloseDisclosure.compactHidden
-        && compactCloseDisclosure.focusRestored
-        && compactCloseDisclosure.radioCollapsed,
-      JSON.stringify(compactCloseDisclosure),
-    );
-    const compactTouchDisclosure = await page.evaluate(() => {
-      const button = document.getElementById('context-radio-toggle-btn');
-      button.click();
-      const closed = button.getAttribute('aria-expanded') === 'false'
-        && document.getElementById('context-radio-mini').hidden;
-      button.dispatchEvent(new PointerEvent('pointerdown', {
-        bubbles: true,
-        pointerType: 'touch',
-        isPrimary: true,
-      }));
-      button.click();
-      return {
-        closed,
-        reopened: button.getAttribute('aria-expanded') === 'true'
-          && !document.getElementById('context-radio-mini').hidden,
-      };
-    });
-    check(
-      'touch/coarse-pointer activation can close and reopen compact Radio controls',
-      compactTouchDisclosure.closed && compactTouchDisclosure.reopened,
-      JSON.stringify(compactTouchDisclosure),
-    );
     const multiExpandedPanelLayout = await page.evaluate(async () => {
       const manager = window.__godsEyeView.styleManager;
       const ids = ['data-panel', 'scene-panel', 'pp-toggles', 'cctv-panel', 'global-context-panel'];
@@ -1834,7 +1716,14 @@ async function main() {
           else panel.setAttribute('style', state.style);
           if (state.ariaHidden === null) panel.removeAttribute('aria-hidden');
           else panel.setAttribute('aria-hidden', state.ariaHidden);
-          manager._syncPanelCollapseButton(panel);
+          // The restored classes are the panel's state again.
+          const has = (name) => panel.classList.contains(name);
+          manager._presentPanel(panel, {
+            collapsed: has('collapsed'),
+            pinned: has('dock-pinned'),
+            pinnedTop: has('dock-pinned-top'),
+            auto: has('layout-auto-collapsed') ? 'layout' : has('accordion-collapsed') ? 'accordion' : null,
+          });
         }
         for (const [id, state] of Object.entries(prior.stacks)) {
           const stack = document.getElementById(id);
@@ -2062,7 +1951,6 @@ async function main() {
         hudVariant: manager.hud.getVariant(),
         displayExpanded: display.getAttribute('aria-expanded') === 'true',
         radioExpanded: radio.getAttribute('aria-expanded') === 'true',
-        contextRadioExpanded: document.getElementById('context-radio-toggle-btn')?.getAttribute('aria-expanded') === 'true',
         focusId: document.activeElement?.id || null,
         detectionMode: manager.getDetectionState().detectionMode,
         models3dEnabled: manager._models3dEnabled,
@@ -2093,7 +1981,7 @@ async function main() {
       manager._setCockpitDisplayPortalActive(true);
       hud.hidden = false;
       signal.hidden = false;
-      dataPanel.classList.remove('collapsed');
+      manager._presentPanel(dataPanel, { collapsed: false });
       window.__godsEyeView.styleManager._syncLeftPanelAdaptiveLayout();
       window.__godsEyeView.styleManager.cockpitView.syncSignalLayout();
       if (display.getAttribute('aria-expanded') === 'true') display.click();
@@ -2158,11 +2046,13 @@ async function main() {
       for (let index = 0; index < 5; index += 1) {
         recordLayoutStep();
         if (index < 4) {
-          if (index < 2) {
-            hudLayout.value = index === 0 ? 'operator' : 'minimal';
-            hudLayout.dispatchEvent(new Event('change', { bubbles: true }));
-          } else {
+          // Off and back on in Minimal, so the toggle must restore a
+          // non-default layout before the cycle returns to Tactical.
+          if (index === 1 || index === 2) {
             hudToggle.click();
+          } else {
+            hudLayout.value = index === 0 ? 'minimal' : 'tactical';
+            hudLayout.dispatchEvent(new Event('change', { bubbles: true }));
           }
           await waitForHudSettle();
         }
@@ -2176,8 +2066,7 @@ async function main() {
       contextCard.hidden = false;
       // Expand the panel the same way this block already does at entry, so the
       // portaled Display groups measured further down keep their DOM home.
-      dataPanel.classList.remove('collapsed', 'layout-auto-collapsed');
-      manager._syncPanelCollapseButton(dataPanel);
+      manager._presentPanel(dataPanel, { collapsed: false, auto: null });
       manager._syncLeftPanelAdaptiveLayout();
       await waitForLayout();
       const panelRect = dataPanel.getBoundingClientRect();
@@ -2271,24 +2160,27 @@ async function main() {
         .every((control) => control.closest('.pp-toggle-group')?.parentElement
           ?.closest('#cockpit-display-panel'));
       display.click();
+      await waitForLayout();
 
       manager.cockpitView.syncSignalLayout();
       radio.click();
+      await waitForLayout();
       const radioOpened = radio.getAttribute('aria-expanded') === 'true'
         && !document.getElementById('cockpit-radio-panel').hidden;
       const mutuallyExclusive = display.getAttribute('aria-expanded') === 'false';
       radio.click();
+      await waitForLayout();
 
       manager.cockpitView.syncSignalLayout();
       radio.click();
+      await waitForLayout();
 
       const radioNavigationAvailable = [
         document.getElementById('cockpit-radio-prev-btn'),
         document.getElementById('cockpit-radio-next-btn'),
       ].every((button) => button?.isConnected && !button.disabled);
       const detailsExcluded = !document.querySelector(
-        '#cockpit-radio-panel #context-radio-details-btn, '
-        + '#cockpit-radio-panel #radio-filter, #cockpit-radio-panel #radio-tuner',
+        '#cockpit-radio-panel #radio-filter, #cockpit-radio-panel #radio-tuner',
       );
       const scenesHidden = getComputedStyle(scene).display === 'none';
       radio.click();
@@ -2331,7 +2223,7 @@ async function main() {
         scenesHidden,
         mapProviderUtilityStable,
         hudInteractionsExact: layoutSteps.map((step) => step.hud).join('>')
-          === 'TACTICAL>OPERATOR>MINIMAL>OFF>MINIMAL',
+          === 'TACTICAL>MINIMAL>OFF>MINIMAL>TACTICAL',
         // The accordion clears the topline, Cockpit cards, and Cesium credits
         // across every HUD layout. Its list owns any overflow internally.
         leftLaneClearAcrossHudCycle: layoutSteps.every((step) => (
@@ -2381,7 +2273,6 @@ async function main() {
         manager.setPanelCollapsed('global-context-panel', prior.contextCollapsed);
         if (display.getAttribute('aria-expanded') !== String(prior.displayExpanded)) display.click();
         if (radio.getAttribute('aria-expanded') !== String(prior.radioExpanded)) radio.click();
-        manager._setRadioDisclosure(prior.contextRadioExpanded);
         hud.hidden = prior.hudHidden;
         signal.hidden = prior.signalHidden;
         if (prior.utilityTop) hud.style.setProperty('--cockpit-utility-top', prior.utilityTop);
@@ -2402,7 +2293,14 @@ async function main() {
           else panel.setAttribute('style', state.style);
           if (state.ariaHidden === null) panel.removeAttribute('aria-hidden');
           else panel.setAttribute('aria-hidden', state.ariaHidden);
-          manager._syncPanelCollapseButton(panel);
+          // The restored classes are the panel's state again.
+          const has = (name) => panel.classList.contains(name);
+          manager._presentPanel(panel, {
+            collapsed: has('collapsed'),
+            pinned: has('dock-pinned'),
+            pinnedTop: has('dock-pinned-top'),
+            auto: has('layout-auto-collapsed') ? 'layout' : has('accordion-collapsed') ? 'accordion' : null,
+          });
         }
         manager._panelLayout._leftStackPreferredPanelId = prior.preferredLeftPanelId;
         localStorage.clear();
@@ -2416,7 +2314,6 @@ async function main() {
           && document.getElementById('global-context-panel').classList.contains('collapsed') === prior.contextCollapsed
           && display.getAttribute('aria-expanded') === String(prior.displayExpanded)
           && radio.getAttribute('aria-expanded') === String(prior.radioExpanded)
-          && document.getElementById('context-radio-toggle-btn')?.getAttribute('aria-expanded') === String(prior.contextRadioExpanded)
           && hud.hidden === prior.hudHidden
           && signal.hidden === prior.signalHidden
           && intelHud.style.getPropertyValue('transition') === priorHudTransition
@@ -2472,21 +2369,20 @@ async function main() {
     check('first Play scenario starts without a leaked Radio selection', firstPlayPrecondition === null,
       `selected=${firstPlayPrecondition}`);
     await page.select('#radio-filter', 'all');
-    await page.$eval('#context-radio-toggle-btn', (button) => {
-      if (button.getAttribute('aria-expanded') !== 'true') button.click();
-    });
     await page.evaluate(() => {
       const camera = window.__godsEyeView.viewer.camera;
       window.__qaFirstPlayFlyToCalls = [];
       window.__qaFirstPlayOriginalFlyTo = camera.flyTo;
       camera.flyTo = (options) => window.__qaFirstPlayFlyToCalls.push(options);
-      document.getElementById('context-radio-toggle-btn').focus();
     });
-    await page.$eval('#context-radio-mini-play-btn', (button) => button.click());
+    const firstPlayPanels = await revealRadioControls(page, 'radio-play-btn');
+    await page.focus('#radio-play-btn');
+    await page.click('#radio-play-btn');
     await page.waitForFunction(() => {
       const state = window.__godsEyeView.dataManager.layers.get('radio').module.getUIState();
       return state.audioState === 'playing' || state.audioState === 'error';
     });
+    await restoreRadioPanels(page, firstPlayPanels);
     const postMicroDragPlayback = await page.evaluate(async () => {
       const mod = window.__godsEyeView.dataManager.layers.get('radio').module;
       let state = mod.getUIState();
@@ -2593,59 +2489,19 @@ async function main() {
     );
     await page.select('#radio-filter', 'news');
 
-    await page.$eval('#context-radio-mini-volume', (input) => {
+    await page.$eval('#radio-volume', (input) => {
       input.value = '35';
       input.dispatchEvent(new Event('input', { bubbles: true }));
     });
-    const compactVolume = await page.evaluate(() => ({
+    const radioVolume = await page.evaluate(() => ({
       volume: window.__godsEyeView.dataManager.layers.get('radio').module.getUIState().volume,
       full: document.getElementById('radio-volume').value,
-      mini: document.getElementById('context-radio-mini-volume').value,
+      label: document.getElementById('radio-volume-value').textContent,
     }));
-    check('compact volume shares the full Radio player state', Math.abs(compactVolume.volume - 0.35) < 0.001 && compactVolume.full === '35' && compactVolume.mini === '35');
-
-    const compactDisclosureContinuity = await page.evaluate(async () => {
-      const radio = window.__godsEyeView.dataManager.layers.get('radio').module;
-      const manager = window.__godsEyeView.styleManager;
-      manager.setPanelCollapsed('global-context-panel', true);
-      manager._setRadioDisclosure(true);
-      await radio.play({ origin: 'user' });
-      const before = radio.getUIState();
-      const disclosure = document.getElementById('context-radio-toggle-btn');
-      if (disclosure.getAttribute('aria-expanded') !== 'true') disclosure.click();
-      disclosure.click();
-      const closed = {
-        expanded: disclosure.getAttribute('aria-expanded'),
-        hidden: document.getElementById('context-radio-mini').hidden,
-        state: radio.getUIState(),
-      };
-      disclosure.click();
-      return {
-        before,
-        closed,
-        reopened: disclosure.getAttribute('aria-expanded'),
-        miniHidden: document.getElementById('context-radio-mini').hidden,
-        after: radio.getUIState(),
-      };
-    });
     check(
-      'compact disclosure preserves playback, station, filter, and volume continuity',
-      compactDisclosureContinuity.closed.expanded === 'false'
-        && compactDisclosureContinuity.closed.hidden
-        && compactDisclosureContinuity.reopened === 'true'
-        && !compactDisclosureContinuity.miniHidden
-        && compactDisclosureContinuity.before.audioState === 'playing'
-        && compactDisclosureContinuity.closed.state.audioState === 'playing'
-        && compactDisclosureContinuity.after.audioState === 'playing'
-        && compactDisclosureContinuity.after.selected?.id === compactDisclosureContinuity.before.selected?.id
-        && compactDisclosureContinuity.after.filter === compactDisclosureContinuity.before.filter
-        && compactDisclosureContinuity.after.volume === compactDisclosureContinuity.before.volume,
-      JSON.stringify({
-        before: compactDisclosureContinuity.before,
-        closed: compactDisclosureContinuity.closed,
-        reopened: compactDisclosureContinuity.reopened,
-        after: compactDisclosureContinuity.after,
-      }),
+      'full Radio volume drives the Radio player state',
+      Math.abs(radioVolume.volume - 0.35) < 0.001 && radioVolume.full === '35' && radioVolume.label === '35%',
+      JSON.stringify(radioVolume),
     );
 
     const voicePause = await page.evaluate(async () => {
@@ -2709,11 +2565,13 @@ async function main() {
       idleVoice.audioState === 'paused',
       idleVoice.audioState,
     );
-    const manualPlayTarget = await page.evaluate(() => {
+    const manualPlayTarget = await page.evaluate(async () => {
       const manager = window.__godsEyeView.styleManager;
-      manager.setPanelCollapsed('global-context-panel', true);
-      manager._setRadioDisclosure(true);
-      const button = document.getElementById('context-radio-mini-play-btn');
+      manager.setPanelCollapsed('global-context-panel', false);
+      manager.setPanelCollapsed('radio-panel', false);
+      await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+      const button = document.getElementById('radio-play-btn');
+      button.scrollIntoView({ block: 'nearest' });
       const rect = button.getBoundingClientRect();
       const style = getComputedStyle(button);
       return {
@@ -2728,12 +2586,12 @@ async function main() {
       };
     });
     check(
-      'manual voice takeover targets the visible compact Radio Play control',
+      'manual voice takeover targets the visible full Radio Play control',
       manualPlayTarget.visible && manualPlayTarget.enabled,
       JSON.stringify(manualPlayTarget),
     );
     if (manualPlayTarget.visible && manualPlayTarget.enabled) {
-      await page.click('#context-radio-mini-play-btn');
+      await page.click('#radio-play-btn');
       await page.waitForFunction(() => (
         window.__godsEyeView.dataManager.layers.get('radio').module.getUIState().audioState === 'playing'
         && window.__godsEyeView.voiceCommands.status === 'idle'
@@ -2781,7 +2639,6 @@ async function main() {
     await page.evaluate(() => window.__godsEyeView.voiceCommands.setStatus('idle', 'QA complete'));
     await page.evaluate(async () => {
       const manager = window.__godsEyeView.styleManager;
-      manager._setRadioDisclosure(false);
       manager.setPanelCollapsed('global-context-panel', false);
       manager.setPanelCollapsed('radio-panel', false);
       await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
@@ -2860,14 +2717,20 @@ async function main() {
       };
       const playsBefore = window.__qaRadioPlayCalls.length;
       const frozenSignature = style._radioControls._radioTunerBandSignature;
+      // The tuner renders from the Radio store; let Vue patch before reading.
+      const rendered = () => Promise.resolve();
       pointer('pointerdown', xFor(0));
+      await rendered();
       const left = snapshot();
       const centerCoordinate = (count - 1) / 2;
       pointer('pointermove', xFor(centerCoordinate));
+      await rendered();
       const center = snapshot();
       pointer('pointermove', xFor(centerCoordinate + 2));
+      await rendered();
       const shifted = snapshot();
       pointer('pointermove', xFor(count - 1));
+      await rendered();
       const right = snapshot();
       const shiftedByIndex = new Map(shifted.ticks.map((tick) => [tick.index, tick.x]));
       const sharedTick = center.ticks.find((tick) => shiftedByIndex.has(tick.index));
@@ -2924,7 +2787,7 @@ async function main() {
         tapeDelta: absoluteTuner.tapeDelta,
       }),
     );
-    const tunerCancelRestore = await page.evaluate(() => {
+    const tunerCancelRestore = await page.evaluate(async () => {
       const gev = window.__godsEyeView;
       const style = gev.styleManager;
       const radio = gev.dataManager.layers.get('radio').module;
@@ -2957,11 +2820,14 @@ async function main() {
       const targetIndex = before.slot < beforeStations.length - 2 ? before.slot + 2 : before.slot - 2;
       pointer('pointerdown', before.slot);
       pointer('pointermove', targetIndex);
+      // The tuner renders from the Radio store; let Vue patch before reading.
+      await Promise.resolve();
       const shiftedSlot = Number(slider.value);
       const previewBeforeCancel = gev.viewer.entities.values
         .find((entity) => String(entity.id).startsWith('radio:selected:'))?.id || null;
       const flyToCallsBeforeCancel = flyToCalls.length;
       pointer('pointercancel', targetIndex);
+      await Promise.resolve();
       const afterStations = style._radioControls._radioTunerStations;
       const afterState = radio.getUIState();
       const after = {
@@ -3117,7 +2983,7 @@ async function main() {
     await page.evaluate(async () => {
       await window.__godsEyeView.dataManager.layers.get('radio').module.update();
     });
-    const tunerRefreshRelease = await page.evaluate((target) => {
+    const tunerRefreshRelease = await page.evaluate(async (target) => {
       const gev = window.__godsEyeView;
       const slider = document.getElementById('radio-tuner-slider');
       const displayedBeforeRelease = document.getElementById('radio-tuner-station').textContent;
@@ -3130,6 +2996,10 @@ async function main() {
         clientY: target.clientY,
       }));
       const state = gev.dataManager.layers.get('radio').module.getUIState();
+      // The playback line renders from the Radio store once Vue flushes.
+      const message = await Promise.resolve().then(
+        () => document.getElementById('radio-playback-state').textContent,
+      );
       return {
         displayedBeforeRelease,
         frozenGeneration,
@@ -3138,7 +3008,7 @@ async function main() {
         plays: window.__qaRadioPlayCalls.length,
         value: document.getElementById('radio-tuner-value').textContent,
         stationText: document.getElementById('radio-tuner-station').textContent,
-        message: document.getElementById('radio-playback-state').textContent,
+        message,
         targetId: target.id,
       };
     }, tunerRefreshTarget);
@@ -3185,6 +3055,8 @@ async function main() {
       pointer('pointermove', targetIndex);
       const previewPlays = window.__qaRadioPlayCalls.length;
       pointer('pointerup', targetIndex);
+      // The tuner renders from the Radio store; sample once Vue has patched.
+      await Promise.resolve();
       const samples = [needle.getBoundingClientRect().left];
       await new Promise((resolve) => requestAnimationFrame(resolve));
       samples.push(needle.getBoundingClientRect().left);
@@ -3835,22 +3707,22 @@ async function main() {
       gev.dataManager.layers.get('flights').enabled = true;
     });
     await sleep(500);
-    await page.evaluate(() => window.__godsEyeView.styleManager.setPanelCollapsed('global-context-panel', true));
     await page.evaluate(() => {
-      const button = document.getElementById('context-radio-toggle-btn');
-      if (button.getAttribute('aria-expanded') !== 'true') button.click();
+      const manager = window.__godsEyeView.styleManager;
+      manager.setPanelCollapsed('global-context-panel', false);
+      manager.setPanelCollapsed('radio-panel', false);
     });
-    await page.waitForSelector('#context-radio-mini', { visible: true });
+    await page.waitForSelector('#radio-next-btn', { visible: true });
     await page.evaluate(() => {
       window.__qaRadioCameraHeight = window.__godsEyeView.viewer.camera.positionCartographic.height;
     });
     const radioOnlyNextDispatched = await page.evaluate(() => {
-      const button = document.getElementById('context-radio-mini-next-btn');
+      const button = document.getElementById('radio-next-btn');
       if (!button) return false;
       button.click();
       return true;
     });
-    if (!radioOnlyNextDispatched) throw new Error('Radio compact next button unavailable');
+    if (!radioOnlyNextDispatched) throw new Error('Radio next button unavailable');
     await page.waitForFunction(() => typeof window.__qaRejectRadioPlay === 'function');
     await page.evaluate(() => {
       const viewer = window.__godsEyeView.viewer;
@@ -3885,7 +3757,7 @@ async function main() {
       flyToCalls: window.__qaRadioFlyToCalls.length,
       flightTargets,
       cameraHeight: window.__qaRadioCameraHeight,
-      compactPlayLabel: document.getElementById('context-radio-mini-play-btn').getAttribute('aria-label'),
+      playLabel: document.getElementById('radio-play-btn').getAttribute('aria-label'),
       regularMarkerSize: Array.from({ length: window.__godsEyeView.viewer.dataSources.length }, (_, index) => window.__godsEyeView.viewer.dataSources.get(index))
         .find((item) => item.name === 'Radio stations')?.entities.values[0]?.point?.pixelSize?.getValue(),
       selectedMarkerSize: selectedEntity?.point?.pixelSize?.getValue(),
@@ -3898,7 +3770,7 @@ async function main() {
     };
     });
     check(
-      'compact Next follows stable directory order and retries its next available station',
+      'Radio Next follows stable directory order and retries its next available station',
       playing.state.selected?.id === playing.expectedFallback?.id
         && playing.calls[0] === playing.expectedPrimary?.streamUrl
         && playing.calls[1] === playing.expectedFallback?.streamUrl,
@@ -3909,9 +3781,9 @@ async function main() {
         fallback: playing.expectedFallback?.id,
       }),
     );
-    check('compact next is explicit playback and updates play/pause state', playing.calls.length === 2 && playing.compactPlayLabel.startsWith('Pause'));
+    check('Radio next is explicit playback and updates play/pause state', playing.calls.length === 2 && playing.playLabel.startsWith('Pause'));
     check(
-      'compact next rotates toward its station without changing zoom, including fallback',
+      'Radio next rotates toward its station without changing zoom, including fallback',
       playing.flyToCalls === 2
         && Math.abs(playing.flightTargets[0]?.lat - playing.expectedPrimary?.lat) < 0.001
         && Math.abs(playing.flightTargets[0]?.lon - playing.expectedPrimary?.lon) < 0.001
@@ -3950,11 +3822,11 @@ async function main() {
       };
       return [
         await run('flights', 'radio-next-btn'),
-        await run('military', 'context-radio-mini-prev-btn'),
+        await run('military', 'radio-prev-btn'),
       ];
     });
     check(
-      'full and compact Radio navigation preserve Flights/Military camera ownership',
+      'full Radio Next and Prev navigation preserve Flights/Military camera ownership',
       trackedRadioControls.every((sample) => sample.afterStationId
         && sample.afterStationId !== sample.beforeStationId
         && sample.flyToDelta === 0
@@ -3968,7 +3840,7 @@ async function main() {
       viewer.trackedEntity = undefined;
       window.__qaRadioDelayNextFailure = true;
       const beforeFlyToCalls = window.__qaRadioFlyToCalls.length;
-      document.getElementById('context-radio-mini-next-btn')?.click();
+      document.getElementById('radio-next-btn')?.click();
       return { beforeFlyToCalls };
     });
     await page.waitForFunction(() => typeof window.__qaRejectRadioPlay === 'function');
@@ -4244,7 +4116,7 @@ async function main() {
       window.__godsEyeView.dataManager.layers.get('flights').enabled = false;
     });
     const radioOnlyNextClicked = await page.evaluate(() => {
-      const button = document.getElementById('context-radio-mini-next-btn');
+      const button = document.getElementById('radio-next-btn');
       if (!(button instanceof HTMLButtonElement)) return false;
       button.click();
       return true;
@@ -4508,106 +4380,12 @@ async function main() {
         && companion.radioCollapsed && !companion.contextCollapsed && companion.nested,
     );
 
-    const expandedContextRadioBefore = await page.evaluate(() => {
-      const gev = window.__godsEyeView;
-      const scroller = document.querySelector('#global-context-panel .global-context-panel-inner');
-      scroller.scrollTop = 0;
-      const camera = gev.viewer.camera.positionWC;
-      return {
-        scrollTop: scroller.scrollTop,
-        pageY: window.scrollY,
-        camera: { x: camera.x, y: camera.y, z: camera.z },
-        plays: window.__qaRadioPlayCalls.length,
-      };
-    });
-    await page.click('#context-radio-toggle-btn');
-    await page.waitForFunction(() => !document.getElementById('radio-panel').classList.contains('collapsed'));
-    await page.waitForFunction((priorScroll) => (
-      document.activeElement?.getAttribute('data-collapse-target') === 'radio-panel'
-      && document.querySelector('#global-context-panel .global-context-panel-inner').scrollTop > priorScroll
-    ), { timeout: 10_000 }, expandedContextRadioBefore.scrollTop);
-    const expandedContextRadioAfter = await page.evaluate(() => {
-      const gev = window.__godsEyeView;
-      gev.styleManager._renderRadioState(gev.dataManager.layers.get('radio').module.getUIState());
-      const launcher = document.getElementById('context-radio-toggle-btn');
-      const radio = document.getElementById('radio-panel');
-      const scroller = document.querySelector('#global-context-panel .global-context-panel-inner');
-      const camera = gev.viewer.camera.positionWC;
-      return {
-        ariaControls: launcher.getAttribute('aria-controls'),
-        expanded: launcher.getAttribute('aria-expanded'),
-        label: launcher.getAttribute('aria-label'),
-        radioCollapsed: radio.classList.contains('collapsed'),
-        compactHidden: document.getElementById('context-radio-mini').hidden,
-        scrollTop: scroller.scrollTop,
-        focusTarget: document.activeElement?.getAttribute('data-collapse-target'),
-        pageY: window.scrollY,
-        camera: { x: camera.x, y: camera.y, z: camera.z },
-        plays: window.__qaRadioPlayCalls.length,
-        state: gev.dataManager.layers.get('radio').module.getUIState().audioState,
-      };
-    });
-    const expandedContextRadioCameraDelta = Math.hypot(
-      expandedContextRadioAfter.camera.x - expandedContextRadioBefore.camera.x,
-      expandedContextRadioAfter.camera.y - expandedContextRadioBefore.camera.y,
-      expandedContextRadioAfter.camera.z - expandedContextRadioBefore.camera.z,
-    );
-    check(
-      'expanded Context Radio icon reveals and scrolls to embedded Radio without an overlay or playback/camera theft',
-      expandedContextRadioAfter.ariaControls === 'radio-panel'
-        && expandedContextRadioAfter.expanded === 'true'
-        && expandedContextRadioAfter.label === 'Go to expanded Radio section'
-        && !expandedContextRadioAfter.radioCollapsed
-        && expandedContextRadioAfter.compactHidden
-        && expandedContextRadioAfter.scrollTop > expandedContextRadioBefore.scrollTop
-        && expandedContextRadioAfter.focusTarget === 'radio-panel'
-        && expandedContextRadioAfter.pageY === expandedContextRadioBefore.pageY
-        && expandedContextRadioCameraDelta < 0.01
-        && expandedContextRadioAfter.plays === expandedContextRadioBefore.plays
-        && expandedContextRadioAfter.state === 'playing',
-      JSON.stringify({
-        before: expandedContextRadioBefore,
-        after: expandedContextRadioAfter,
-        cameraDelta: expandedContextRadioCameraDelta,
-      }),
-    );
-
     await page.evaluate(() => {
       const manager = window.__godsEyeView.styleManager;
-      manager.setPanelCollapsed('global-context-panel', true);
-      manager._setRadioDisclosure(true);
+      manager.setPanelCollapsed('global-context-panel', false);
+      manager.setPanelCollapsed('radio-panel', false);
     });
-    await page.waitForFunction(() => {
-      const close = document.getElementById('context-radio-mini-close-btn');
-      const rect = close.getBoundingClientRect();
-      return !document.getElementById('context-radio-mini').hidden && rect.width > 0 && rect.height > 0;
-    });
-    await page.click('#context-radio-mini-close-btn');
-    const closedCompact = await page.evaluate(() => {
-      const launcher = document.getElementById('context-radio-toggle-btn');
-      return {
-        radioCollapsed: document.getElementById('radio-panel').classList.contains('collapsed'),
-        compactHidden: document.getElementById('context-radio-mini').hidden,
-        focusRestored: document.activeElement === launcher,
-      };
-    });
-    await page.click('#context-radio-toggle-btn');
-    await page.waitForFunction(() => !document.getElementById('context-radio-mini').hidden);
-    await page.click('#context-radio-details-btn');
-    const repeatedOpen = await page.evaluate(() => ({
-      radioCollapsed: document.getElementById('radio-panel').classList.contains('collapsed'),
-      compactHidden: document.getElementById('context-radio-mini').hidden,
-    }));
-    const splitDetailActions = { closedCompact, repeatedOpen };
-    check(
-      'collapsed Context keeps compact close and full-panel open as separate stable actions',
-      !splitDetailActions.closedCompact.radioCollapsed
-        && splitDetailActions.closedCompact.compactHidden
-        && splitDetailActions.closedCompact.focusRestored
-        && !splitDetailActions.repeatedOpen.radioCollapsed
-        && splitDetailActions.repeatedOpen.compactHidden,
-      JSON.stringify(splitDetailActions),
-    );
+    await page.waitForFunction(() => !document.getElementById('radio-panel').classList.contains('collapsed'));
 
     await page.click('#global-context-flights-btn');
     await page.waitForFunction(() => !document.getElementById('context-flights-view').hidden);

scripts/qa-scene-controls.mjs

@@ -106,6 +106,39 @@ try {
         ),
     ),
   );
+  // A long rename keeps its editor visible inside the shot row.
+  await page.click('.scene-shot-label', { count: 2 });
+  await page.waitForSelector('.scene-shot-rename', { visible: true });
+  await page.type(
+    '.scene-shot-rename',
+    ' with a much longer title that runs well past the shot row',
+  );
+  await page.keyboard.press('End');
+  check(
+    'A long rename keeps the editor visible inside its shot row',
+    await page.evaluate(() => {
+      // The label clips with an ellipsis, which hides an editor that
+      // overflows it, so its content must fit its width.
+      const input = document.querySelector('.scene-shot-rename');
+      const label = input?.closest('.scene-shot-label');
+      const box = input?.getBoundingClientRect();
+      const style = input && getComputedStyle(input);
+      return (
+        !!box &&
+        box.width > 120 &&
+        box.height > 10 &&
+        label.scrollWidth <= label.clientWidth + 1 &&
+        style.visibility === 'visible' &&
+        style.borderTopWidth !== '0px' &&
+        document.activeElement === input
+      );
+    }),
+  );
+  await page.keyboard.press('Escape');
+  await page.waitForFunction(
+    () => !document.querySelector('.scene-shot-rename'),
+  );
+
   await page.click('#scene-capture-btn');
   await page.waitForFunction(
     () => document.querySelectorAll('.scene-shot-row').length === 2,
@@ -409,12 +442,12 @@ try {
         return '{"scenes":[]}';
       },
     });
+    // A shot row held across disposal must not act once it is revoked.
+    const retainedLabel = document.querySelector('.scene-shot-label');
     const stopping = director.destroy();
     const notificationsAtStop = window.__qaSceneState.length;
-    const stoppedSynchronously =
-      controls.destroyed &&
-      controls.removers.length === 0 &&
-      controls.rowRemovers.length === 0;
+    const stoppedSynchronously = controls.destroyed;
+    retainedLabel?.click();
     document.getElementById('scene-new-btn').click();
     controls.run('capture');
     finish();
@@ -423,6 +456,7 @@ try {
     await director.destroy();
     return {
       stoppedSynchronously,
+      heldRowAction: Boolean(retainedLabel),
       stateStopped: window.__qaSceneState.length === notificationsAtStop,
       sameProject: director._project === project,
       noLateStatus:
@@ -432,7 +466,9 @@ try {
   });
   check(
     'Disposal revokes fixed and row actions before waiting for scene work',
-    teardown.stoppedSynchronously && teardown.rowsGone,
+    teardown.stoppedSynchronously &&
+      teardown.heldRowAction &&
+      teardown.rowsGone,
   );
   check(
     'Late import completion cannot replace the disposed project or status',

scripts/qa-scene-dialog-file-drop.mjs

@@ -4,7 +4,7 @@
  * file dropped from the desktop, proved in a real browser.
  *
  * The dialog draws a translated row over the native file input
- * (src/ui/sceneSharing.js, fileChooser). The input must still cover the row,
+ * (src/ui/views/panels/SceneDialog.vue). The input must still cover the row,
  * or drops miss it. Drops a file on the row's centre via CDP and expects
  * `input.files` to hold it.
  *
@@ -15,31 +15,34 @@
  * drop selects the file, 1 otherwise.
  */
 import http from 'node:http';
-import { mkdtemp, readFile, rm, writeFile } from 'node:fs/promises';
+import { mkdtemp, rm, writeFile } from 'node:fs/promises';
 import { tmpdir } from 'node:os';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
+import vue from '@vitejs/plugin-vue';
 import puppeteer from 'puppeteer';
+import { createServer } from 'vite';
+import { VUE_PLUGIN_OPTIONS } from '../build/vueOptions.js';
 
 const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
-const TYPES = {
-  '.js': 'text/javascript',
-  '.mjs': 'text/javascript',
-  '.json': 'application/json',
-  '.html': 'text/html',
-};
 
+// The scene panels view draws the dialog; Vite compiles it for the page.
 const PAGE = `<!doctype html><html lang="en"><body>
+<div id="view"></div>
 <script type="module">
+  import { createApp, nextTick } from 'vue';
+  import { applicationPinia } from '/src/ui/vueRuntime.js';
+  import LayerPanelsView from '/src/ui/views/LayerPanelsView.vue';
   import { createSceneDialog } from '/src/ui/sceneSharing.js';
-  window.openDialog = () => {
+  createApp(LayerPanelsView).use(applicationPinia()).mount('#view');
+  window.openDialog = async () => {
     const dialog = createSceneDialog('Share selected scene', () => {});
-    const files = dialog.input('Choose data-pack files', '', { type: 'file' });
-    files.multiple = true;
-    window.filesInput = files;
-    // Centre of the visible row (the wrapper's last child).
-    const row = files.parentElement.lastElementChild;
-    const r = row.getBoundingClientRect();
+    dialog.input('Choose data-pack files', '', { type: 'file', multiple: true });
+    await nextTick();
+    const input = document.querySelector('[data-director-dialog] input[type=file]');
+    window.filesInput = input;
+    // Centre of the visible row (the label's last child).
+    const r = input.parentElement.lastElementChild.getBoundingClientRect();
     return { x: r.x + r.width / 2, y: r.y + r.height / 2 };
   };
   window.ready = true;
@@ -56,21 +59,21 @@ async function main() {
   const dir = await mkdtemp(path.join(tmpdir(), 'qa-scene-dialog-drop-'));
   const pack = path.join(dir, 'pack.json');
   await writeFile(pack, '{}');
-  const server = http.createServer(async (req, res) => {
+  const vite = await createServer({
+    root: ROOT,
+    configFile: false,
+    logLevel: 'error',
+    plugins: [vue(VUE_PLUGIN_OPTIONS)],
+    server: { middlewareMode: true, hmr: false },
+    appType: 'custom',
+  });
+  const server = http.createServer((req, res) => {
     if (req.url === '/') {
       res.writeHead(200, { 'content-type': 'text/html' });
       res.end(PAGE);
       return;
     }
-    try {
-      const body = await readFile(path.join(ROOT, req.url));
-      res.writeHead(200, {
-        'content-type': TYPES[path.extname(req.url)] || 'text/plain',
-      });
-      res.end(body);
-    } catch {
-      res.writeHead(404).end();
-    }
+    vite.middlewares(req, res, () => res.writeHead(404).end());
   });
   await new Promise((resolve) => server.listen(0, '127.0.0.1', resolve));
   const url = `http://127.0.0.1:${server.address().port}/`;
@@ -99,6 +102,7 @@ async function main() {
   } finally {
     await browser.close();
     server.close();
+    await vite.close();
     await rm(dir, { recursive: true, force: true });
   }
 }

scripts/qa-scope-hud.mjs

@@ -345,7 +345,7 @@ try {
     (await readScope()).feather === 2,
   );
   await page.click('#scope-toggle');
-  for (const layout of ['minimal', 'operator', 'cyber', 'tactical']) {
+  for (const layout of ['minimal', 'cyber', 'tactical']) {
     await page.select('#hud-layout-select', layout);
     const state = await readScope();
     check(
@@ -395,7 +395,7 @@ try {
     restored,
   );
 
-  for (const layout of ['minimal', 'operator', 'tactical']) {
+  for (const layout of ['minimal', 'tactical']) {
     await page.select('#hud-layout-select', layout);
     await page.evaluate(() =>
       window.__godsEyeView.styleManager.applyVisualState({
@@ -429,20 +429,13 @@ try {
         wrappersTransparent: wrappers.every(
           (el) => getComputedStyle(el).display === 'contents',
         ),
-        operatorFrame:
-          hud.dataset.variant !== 'operator' ||
-          (getComputedStyle(hud.querySelector('.hud-corner'))
-            .backgroundColor === 'rgba(0, 0, 0, 0.36)' &&
-            getComputedStyle(hud.querySelector('.hud-top-bar'))
-              .backgroundImage !== 'none'),
       };
     });
     check(
       `${layout}: Scope ON retains the original presentation without new backplates`,
       original.markerAbsent &&
         original.unbacked &&
-        original.wrappersTransparent &&
-        original.operatorFrame,
+        original.wrappersTransparent,
       original,
     );
     check(
@@ -571,7 +564,7 @@ try {
           );
         });
       const broadBackings = [
-        ...hud.querySelectorAll('.hud-corner, .hud-top-bar, .hud-bottom-bar'),
+        ...hud.querySelectorAll('.hud-corner, .hud-bottom-bar'),
       ].filter(
         (el) =>
           el.offsetWidth > 0 &&
@@ -656,7 +649,7 @@ try {
       }),
   );
   check('narrow HUD text backings stay within the viewport', narrow);
-  for (const layout of ['minimal', 'operator', 'tactical']) {
+  for (const layout of ['minimal', 'tactical']) {
     await page.select('#hud-layout-select', layout);
     await page.evaluate(() =>
       window.__godsEyeView.styleManager.applyVisualState({

scripts/qa-status-badges.mjs

@@ -69,8 +69,6 @@ try {
           calDirty: false,
         },
       });
-      window.__qaBadgeText =
-        document.getElementById('cctv-source-badge').textContent;
     });
     await page.waitForSelector('.weather-coverage.gev-status-badge');
     const inventory = await page.evaluate(() => {
@@ -120,20 +118,22 @@ try {
     );
 
     for (const state of ['loading', 'error', 'retained', 'ready', 'idle']) {
-      const result = await page.evaluate((state) => {
+      const result = await page.evaluate(async (state) => {
         const owner = window.__godsEyeView.styleManager._cctvControls;
-        owner._cctvFrame.dataset.loading = state === 'loading' ? 'true' : '';
-        owner._cctvFrame.dataset.error = ['error', 'retained'].includes(state)
-          ? 'true'
-          : '';
-        owner._cctvFrameWrap.classList.toggle(
-          'has-frame',
-          state === 'retained',
-        );
+        const frame = owner._frame;
+        owner._frame = {
+          ...frame,
+          loading: state === 'loading',
+          error: ['error', 'retained'].includes(state),
+          hasFrame: state === 'retained',
+        };
         owner._syncCctvSourceBadge(
           owner._cctvState.activeCamera,
           state !== 'idle',
         );
+        owner._frame = frame;
+        // The panel view renders the badge on Vue's next flush.
+        await new Promise((resolve) => requestAnimationFrame(resolve));
         const badge = document.getElementById('cctv-source-badge');
         return {
           state: badge.dataset.frameState,
@@ -164,7 +164,7 @@ try {
       ['curated', true, 'rgb(255, 208, 138)'],
     ]) {
       const result = await page.evaluate(
-        ({ calBadge, dirty }) => {
+        async ({ calBadge, dirty }) => {
           const owner = window.__godsEyeView.styleManager._cctvControls;
           document.getElementById('cctv-next-btn').focus();
           owner._renderCctvState({
@@ -175,6 +175,8 @@ try {
               calDirty: dirty,
             },
           });
+          // The panel view renders the chip on Vue's next flush.
+          await new Promise((resolve) => requestAnimationFrame(resolve));
           const badge = document.getElementById('cctv-quality-chip');
           return {
             state: badge.dataset.calBadge,

scripts/qa-ui-disposal.mjs

@@ -40,6 +40,8 @@ try {
         cancelable: true,
       }),
     );
+    // The title bar renders the readout on Vue's next flush.
+    await Promise.resolve();
     const fpsReadout = document.querySelector('.frame-rate-readout');
     const fpsWasVisible = fpsReadout && !fpsReadout.hidden;
     const watchObserver = (name) => {
@@ -118,10 +120,18 @@ try {
       if (type === 'resize' && callback === resizeHandler) counts.resize++;
       return removeEventListener.call(this, type, callback, options);
     };
-    const { setSplitFlapText } = await import('/src/splitFlap.js');
+    // Through the owner, so its copy of the label and the store agree.
     const feedbackLabel = document.getElementById('global-loading-label');
-    setSplitFlapText(feedbackLabel, 'CHECKING LIVE DATA');
-    setSplitFlapText(feedbackLabel, 'LOAD COMPLETE');
+    for (const label of ['CHECKING LIVE DATA', 'LOAD COMPLETE']) {
+      ui._feedback._publishLoading({
+        hidden: false,
+        state: 'loading',
+        label,
+        detail: '',
+      });
+      // Vue renders on a microtask; a task later the label shows it.
+      await new Promise((resolve) => setTimeout(resolve));
+    }
     const permanentText =
       feedbackLabel.querySelector('.gev-flap-text')?.firstChild;
     let stateNotifications = 0;
@@ -202,6 +212,7 @@ try {
           feedbackLabel.querySelector('.gev-flap-text')?.firstChild ===
             permanentText &&
           permanentText.data === 'LOAD COMPLETE' &&
+          document.getElementById('global-loading-status').hidden &&
           !feedbackLabel.classList.contains('gev-flap-active') &&
           feedbackLabel.querySelector('.gev-flap-cells')?.childNodes.length ===
             0,
@@ -211,7 +222,9 @@ try {
           ui._lifetime.timers.size === 0 &&
           ui._lifetime.removers.size === 0,
         frameRateReleased:
-          fpsWasVisible && !fpsReadout.isConnected && fpsReadout.hidden,
+          fpsWasVisible &&
+          !fpsReadout.isConnected &&
+          !document.querySelector('.frame-rate-readout'),
         stateStopped: stateNotifications === 0,
         idempotent: once === JSON.stringify(counts),
       };

scripts/qa-visual-input.mjs

@@ -57,7 +57,7 @@ try {
       persist: false,
       syncShare: false,
     });
-    manager._sliderPanel.classList.remove('collapsed');
+    manager._presentPanel(manager._sliderPanel, { collapsed: false });
     const slider = manager._sliderContainer.querySelector('input');
     window.__qaOldSlider = slider;
     const name = 'pixelation';
@@ -140,9 +140,11 @@ try {
       hudBefore,
     ),
   );
-  const displayBefore = await page.evaluate(() => {
+  const displayBefore = await page.evaluate(async () => {
     const manager = window.__godsEyeView.styleManager;
     manager._setBloomEnabled(true);
+    // The Display view shows the slider row on its next render.
+    await new Promise((resolve) => requestAnimationFrame(resolve));
     manager._bloomSlider.value = '80';
     manager._bloomSlider.dispatchEvent(new Event('input', { bubbles: true }));
     manager._bloomSlider.focus();
@@ -263,7 +265,7 @@ try {
     'destroyed Display controls cannot change settings',
     await page.evaluate(() => {
       const manager = window.__godsEyeView.styleManager;
-      manager._displayControls.destroy();
+      manager._displayBindings._detachDisplayControls();
       const before = manager.bloomEnabled;
       const contrast = manager._bloomStage.uniforms.contrast;
       manager._bloomBtn.click();

scripts/qa-voice-auth-focus.mjs

@@ -12,10 +12,14 @@ import { after, before, test } from 'node:test';
 import puppeteer from 'puppeteer';
 
 const root = new URL('../', import.meta.url);
-const template = await readFile(
-  new URL('src/ui/templates/provider-settings.html', root),
+const view = await readFile(
+  new URL('src/ui/views/ProviderSettingsView.vue', root),
   'utf8',
 );
+const template = view.slice(
+  view.indexOf('<template>') + '<template>'.length,
+  view.lastIndexOf('</template>'),
+);
 const assets = new Set([
   '/src/keySetup.js',
   '/src/voice/cloudVoiceAuth.js',

scripts/qa-voice-routing.mjs

@@ -1023,7 +1023,7 @@ async function runDeixisBehavior(page, run, settle) {
   };
   const beginAt = (x, y, said = null) =>
     page.evaluate(
-      (px, py, text) => {
+      async (px, py, text) => {
         const voice = window.__gevVoiceCommands;
         if (text) {
           // What the session emits for a spoken turn: a new turn, then the caption.
@@ -1043,6 +1043,8 @@ async function runDeixisBehavior(page, run, settle) {
         voice.pointer.hold('keydown');
         const snapshot = voice.beginPointerTurn('keydown');
         voice.pointer.releaseHold();
+        // The voice card and the reticle render on Vue's next flush.
+        await Promise.resolve();
         const chip = document.getElementById('gev-voice-card-pointer');
         const reticle = document.querySelector('.gev-pointer-reticle');
         return {

scripts/qa-weather-journey.mjs

@@ -261,7 +261,7 @@ try {
     for (const [id, entry] of gev.dataManager.layers)
       if (entry.enabled)
         await gev.dataManager.setEnabled(id, false, { origin: 'user' });
-    document.querySelector('#data-panel')?.classList.remove('collapsed');
+    gev.styleManager._presentPanel('data-panel', { collapsed: false });
   });
 
   // 1. Earth view, clean.

scripts/run-unit-tests.mjs

@@ -71,8 +71,14 @@ export function allocationTestArgs(file) {
   return ['--expose-gc', '--test', '--test-concurrency=1', file];
 }
 
+/** Node flags every unit-test process receives. */
+export const UNIT_TEST_NODE_FLAGS = Object.freeze([
+  // Single-file components compile on import.
+  '--import=./build/registerVue.js',
+]);
+
 function runTests(args) {
-  const result = spawnSync(process.execPath, args, {
+  const result = spawnSync(process.execPath, [...UNIT_TEST_NODE_FLAGS, ...args], {
     cwd: process.cwd(),
     stdio: 'inherit',
     env: process.env,

scripts/track-regression.mjs

@@ -612,6 +612,7 @@ async function main() {
       if (models3dButton) {
         if (!models3dButton.classList.contains('active')) models3dButton.click();
         models3dButton.click(); // → OFF: both layers must follow the one control
+        await new Promise((resolve) => setTimeout(resolve)); // the view renders
         models3dOff.button = models3dButton.classList.contains('active');
         models3dOff.fl = fl.getParams().models3d;
         models3dOff.mil = mil.getParams().models3d;