Merge pull request #1499 from bilawalsidhu/sameh/core-vue

Move the application UI to Vue and Pinia

.prettierignore

@@ -20,3 +20,8 @@ node_modules
 .vite
 .vite-*
 *.min.js
+
+# Application views, and panels lifted from them, hold the page markup
+# verbatim; reflowing it changes the DOM
+src/ui/views/*View.vue
+src/ui/views/panels/

.prettierrc.json

@@ -2,5 +2,11 @@
   "singleQuote": true,
   "tabWidth": 2,
   "semi": true,
-  "endOfLine": "lf"
+  "endOfLine": "lf",
+  "overrides": [
+    {
+      "files": "*.vue",
+      "options": { "htmlWhitespaceSensitivity": "strict" }
+    }
+  ]
 }

CONTRIBUTING.md

@@ -115,7 +115,7 @@ The highest-leverage places to jump in:
 
 ## Architecture in one minute
 
-- **No framework.** Vanilla JS + [CesiumJS](https://cesium.com/platform/cesiumjs/) + [Vite](https://vitejs.dev/).
+- **Vue 3 + Pinia for the interface,** [CesiumJS](https://cesium.com/platform/cesiumjs/) for the globe and [Vite](https://vitejs.dev/) to build. See [Building UI](#building-ui).
 - **Assembly lives in `src/app/`; standalone defaults live in `src/standalone/`.** UI controllers live in `src/ui/`, layer factories in `src/layers/`, portable sources in `src/sources/`, and application operations in `src/services/`. Existing `src/data/<layer>.js` entries retain compatibility; new code belongs with its focused owner.
 - Sources acquire records; renderers own Cesium resources. Import `gods-eye-view/layers/<family>/source` when only a source factory is needed. Common voice controls consume the session interface; protocol adapters own connection details.
 - **Secrets stay server-side.** Anything needing a private key goes through a local proxy under `server/providers/`. The browser only ever sees the Google Maps key (which you restrict) and ephemeral tokens.
@@ -126,9 +126,65 @@ The highest-leverage places to jump in:
 - ES modules, **2-space indent, single quotes, semicolons.**
 - JSDoc on exported/public functions.
 - Match the surrounding code — comment density, naming, and idiom.
-- User-visible text goes through `t()`, `tn()` or `msg()`, or a `data-i18n*` attribute in markup, and `npm run i18n` must pass. See [docs/I18N.md](docs/I18N.md).
+- User-visible text goes through `t()` or `tn()`, with `msg()` marking English that is stored and translated later. Components call `t()` in their templates, so their text follows the locale; `data-i18n*` attributes are only for static page markup such as the loading screen, and `npm run i18n` rejects them in a template. `npm run i18n` must pass. See [docs/I18N.md](docs/I18N.md).
 - Prefer small, reviewable commits. Conventional-commit-style prefixes (`feat:`, `fix:`, `perf:`, `docs:`) are appreciated but not required.
 
+## Building UI
+
+New UX elements are Vue components whose state lives in a Pinia store, and so
+are existing ones when a change converts them:
+
+- **Views are Vue components.** Application views live in `src/ui/views/` and
+  the components they place in `src/ui/views/panels/`; a component that
+  belongs to one feature sits beside its owner (`src/ui/rail/`,
+  `src/ui/weather/`). A view renders what its store holds and forwards
+  clicks and input to the store; it holds no application logic.
+- **State lives in a Pinia store** in `src/ui/stores/`. The owner presents a
+  plain view object and publishes it to the store; the view renders it. User
+  actions return to the owner through handlers it connects to the store,
+  which replace an earlier owner's. Where several owners answer different
+  actions of one store, use `createOwners()` from `src/ui/stores/owners.js`:
+  `act(name, ...args)` calls the newest connected owner that handles `name`,
+  and the owner calls `detach(token)` when it stops.
+- **Portable owners stay framework-free.** An owner in a portable export
+  imports neither Vue nor Pinia: it takes a `publish` option or offers a
+  `subscribe…()`, and the application shell connects it to the store.
+  `npm run check:boundaries` enforces this.
+- **Reuse the kit first.** `src/ui/kit/` has one component per control:
+  `UiButton` (including pressed toggles and pressable chips), `UiSelect`,
+  `UiSlider`, `UiSegmented`, `UiChip` (a label, not a control), `UiBadge`,
+  `UiEmpty`, `UiIcon`, `UiTooltip`, `UiPanel` and `UiRail`. Use these before
+  writing a control. When the kit lacks something, extend a kit component or
+  add one that follows the kit's names, props, events and class names (see
+  [Component kit](docs/VUE-MIGRATION.md#component-kit)), rather than
+  building a one-off.
+- **No hand-written DOM binding.** Don't build elements or write text,
+  classes or attributes from a controller to show UI state; render it from
+  the store. New controls take input through the store rather than through
+  listeners the owner adds. To render outside the view's host (the body, the
+  globe container, or a slot another surface opens), use `<Teleport>` to
+  `body`, a fixed id or a container the owner publishes; don't move nodes by
+  hand. What stays imperative: classes on `<body>` and `<head>`, which sit
+  outside Vue (`cockpit-mode`, `ui-clean-view`); focus moves; positions a
+  layout pass measures in the same task that writes them; and surfaces an
+  owner paints or plays, such as the Cesium canvas, overlay canvases and live
+  video. A few existing surfaces keep listeners or bindings that
+  [docs/VUE-MIGRATION.md](docs/VUE-MIGRATION.md) records; keep those
+  contracts when you change them, and don't copy them into new UI.
+- **Text** goes through `t()` or `tn()` where the template renders it.
+  English kept in a constant or a store is marked with `msg()` and passed to
+  `t()` when it renders, since a `t()` at module load would fix the English.
+- **Test components, not markup strings.** Mount the component over
+  happy-dom with `@vue/test-utils` or `createApp` and assert what it renders
+  from its store (see `src/testSupport/vueDom.mjs`, `src/ui/kit/*.test.mjs`
+  and `src/ui/views/intelHudView.test.mjs`). Run one such file with
+  `node --import=./build/registerVue.js --test <file>`. Don't pass happy-dom
+  nodes to `assert.equal`/`deepEqual`; compare them with `assertSameNode()`
+  from `src/testSupport/domAssert.mjs`.
+
+[docs/VUE-MIGRATION.md](docs/VUE-MIGRATION.md) records how each surface moved
+and what stays imperative, and why.
+
 ## Formatting and reusable components
 
 Run `npm run format` before submitting changes, then `npm run format:check`

README.md

@@ -491,12 +491,12 @@ How the globe handles live data:
 - **Sits on the real ground.** Entity heights are aligned to work with Google 3D tiles, so aircraft park on aprons and cameras stand on street corners instead of floating.
 - **Caching and request budgets.** An OpenSky credit governor, a TomTom daily tile budget, and disk-cached TLEs reduce repeated requests. These controls do not replace provider quotas or billing controls.
 - **Server-side credentials.** Every API that touches a private key (OpenAI, AISStream, OpenSky OAuth, camera frames) is brokered through a hardened server-side proxy with SSRF protection, response caps, and sanitized errors. The only keys the browser sees are Google Maps and Cesium ion (restrict both at the provider).
-- **No framework.** Vanilla JavaScript, **CesiumJS**, and **Vite** — plus **Google Photorealistic 3D Tiles** for the planet and the **OpenAI Realtime API** for voice. Fast to read, fast to hack on.
+- **A small stack.** **Vue 3** and **Pinia** for the interface, **CesiumJS** for the globe and **Vite** to build it — plus **Google Photorealistic 3D Tiles** for the planet and the **OpenAI Realtime API** for voice. Fast to read, fast to hack on.
 
 ```
 src/
 ├── main.js                 # Bootstrap: Google 3D tiles, layer registration
-├── ui/                     # Runtime UI — panels, HUD, styles, controls
+├── ui/                     # Runtime UI — Vue views, Pinia stores, kit, controllers, styles
 ├── hud.js                  # Intelligence HUD + AI scene summary
 ├── keySetup.js             # POWER UP panel — in-app provider keys (dev server only)
 ├── mapStackController.js   # Basemap switching — Google 3D / Esri / OSM / ion stacks

build/application-html.js

@@ -1,40 +0,0 @@
-import { readFileSync } from 'node:fs';
-
-export const APPLICATION_TEMPLATES = Object.freeze([
-  'scene-chrome',
-  'cockpit',
-  'display-controls',
-  'command-dock',
-  'layer-panels',
-  'context',
-  'welcome',
-  'provider-settings',
-  'hud-loading',
-]);
-const allowed = new Set(APPLICATION_TEMPLATES);
-
-/** Expand only known component templates; markers cannot name filesystem paths. */
-export function expandApplicationHtml(html) {
-  return html.replace(
-    /^[ \t]*<!-- gev:template ([^\s]+) -->\r?\n?/gm,
-    (_, name) => {
-      if (!allowed.has(name))
-        throw new Error(`Unknown application template: ${name}`);
-      return readFileSync(
-        new URL(`../src/ui/templates/${name}.html`, import.meta.url),
-        'utf8',
-      );
-    },
-  );
-}
-
-/** Assemble static application markup before Vite processes scripts and assets. */
-export function applicationHtmlPlugin() {
-  return {
-    name: 'application-component-templates',
-    transformIndexHtml: {
-      order: 'pre',
-      handler: expandApplicationHtml,
-    },
-  };
-}

build/registerVue.js

@@ -0,0 +1,5 @@
+import { register } from 'node:module';
+
+// Lets Node import single-file components: `node --import=<this file>`.
+// Hosts reach it as `<core package>/build/register-vue`.
+register('./vueLoader.js', import.meta.url);

build/vite.js

@@ -1,6 +1,7 @@
 import { fileURLToPath } from 'node:url';
-import { applicationHtmlPlugin } from './application-html.js';
 import cesium from 'vite-plugin-cesium';
+import vue from '@vitejs/plugin-vue';
+import { VUE_PLUGIN_OPTIONS } from './vueOptions.js';
 import { DEFAULT_ALLOWED_HOSTS, hostCheckPlugin } from './allowedHosts.js';
 import { embedFramingPlugin } from './embed-framing.js';
 import { panelBuildPlugin } from './panel.js';
@@ -155,7 +156,8 @@ export function createBrowserViteConfig({
       // Next, so no provider route answers a Host the server does not allow.
       hostCheckPlugin(),
       cesium(),
-      applicationHtmlPlugin(),
+      // Application views are Vue single-file components.
+      vue(VUE_PLUGIN_OPTIONS),
       ...plugins,
       embedFramingPlugin(),
       panelBuildPlugin(),
@@ -209,6 +211,12 @@ export function createBrowserViteConfig({
     // framing + CSP hardening (one constant, no drift).
     preview: { headers: BROWSER_HEADERS },
     define: {
+      // vue-i18n holds the locale and catalogs; Core formats the messages
+      // (src/ui/i18n.js), so the build drops vue-i18n's message compiler.
+      __VUE_I18N_FULL_INSTALL__: 'false',
+      __VUE_I18N_LEGACY_API__: 'false',
+      __INTLIFY_PROD_DEVTOOLS__: 'false',
+      __INTLIFY_DROP_MESSAGE_COMPILER__: 'true',
       'import.meta.env.GOOGLE_MAPS_API_KEY': JSON.stringify(googleApiKey),
       'import.meta.env.CESIUM_ION_TOKEN': JSON.stringify(cesiumToken),
       // Mapillary client tokens are public by design (see SECURITY.md).

build/vueLoader.js

@@ -0,0 +1,53 @@
+import { readFile } from 'node:fs/promises';
+import { fileURLToPath } from 'node:url';
+import { compileScript, compileTemplate, parse } from 'vue/compiler-sfc';
+import { VUE_TEMPLATE_OPTIONS } from './vueOptions.js';
+
+/**
+ * Compile a single-file component to an ES module for Node, so unit tests (the
+ * application's and a host's) can import components without a bundler.
+ * Styles are dropped: tests read the global stylesheet separately.
+ */
+export function compileVueModule(source, filename) {
+  // The template is parsed with the SFC; parse it as the browser build does.
+  const { descriptor, errors } = parse(source, {
+    filename,
+    templateParseOptions: VUE_TEMPLATE_OPTIONS.compilerOptions,
+  });
+  if (errors.length) throw errors[0];
+  const id = filename;
+  if (descriptor.scriptSetup) {
+    return compileScript(descriptor, {
+      id,
+      inlineTemplate: true,
+      templateOptions: VUE_TEMPLATE_OPTIONS,
+    }).content;
+  }
+  const script = descriptor.script
+    ? compileScript(descriptor, { id, genDefaultAs: '__sfc__' }).content
+    : 'const __sfc__ = {};';
+  let template = '';
+  if (descriptor.template) {
+    const compiled = compileTemplate({
+      source: descriptor.template.content,
+      filename,
+      id,
+      ...VUE_TEMPLATE_OPTIONS,
+    });
+    if (compiled.errors.length) throw compiled.errors[0];
+    template = compiled.code;
+  }
+  return `${script}\n${template}\nif (typeof render === 'function') __sfc__.render = render;\nexport default __sfc__;\n`;
+}
+
+/** Node module hook: load `.vue` files as compiled modules. */
+export async function load(url, context, nextLoad) {
+  if (!url.endsWith('.vue')) return nextLoad(url, context);
+  const filename = fileURLToPath(url);
+  const source = await readFile(filename, 'utf8');
+  return {
+    format: 'module',
+    source: compileVueModule(source, filename),
+    shortCircuit: true,
+  };
+}

build/vueOptions.js

@@ -0,0 +1,16 @@
+/**
+ * Template options shared by the browser build, the boundary check and the
+ * unit-test loader. Whitespace between nodes is kept (as a single space) so
+ * an application view renders as its static markup did; Prettier formats
+ * single-file components with strict whitespace sensitivity to match. Asset
+ * URLs such as `/pin.svg` stay literal instead of becoming module imports.
+ */
+export const VUE_TEMPLATE_OPTIONS = Object.freeze({
+  compilerOptions: Object.freeze({ whitespace: 'preserve' }),
+  transformAssetUrls: false,
+});
+
+/** `@vitejs/plugin-vue` options for application builds. */
+export const VUE_PLUGIN_OPTIONS = Object.freeze({
+  template: VUE_TEMPLATE_OPTIONS,
+});

changelog.d/1499-vue-and-pinia.md

@@ -0,0 +1,205 @@
+- The language picker switches language in place instead of reloading the
+  page. Views re-render; code that publishes translated text words it again
+  through `onLocaleChange` (`src/i18n/index.js`), and `<html lang>`/`dir` and
+  the page's `data-i18n` markup follow. `persistLocale` replaces
+  `persistLocaleAndReload`, and `registerUnsavedWork` and the switch's
+  unsaved-work prompt are removed, since a switch no longer loses anything
+  (samehkhamis, #1499).
+
+- A map source's `unavailableReason` may be a function, read when the reason
+  is shown so it follows the locale; the sources from `createDefaultMapSources`
+  (`./maps/defaults`) give functions. `MapSourceController` reads either form
+  (samehkhamis, #1499).
+
+- The application views translate their text with `t()` as they render,
+  so it follows the active locale; they no longer carry `data-i18n*`
+  attributes, and `npm run i18n` rejects those in a Vue template. The boot
+  pass (`applyDocumentTranslations`) still translates static page markup
+  such as the loading screen and a host's own markup (samehkhamis, #1499).
+
+- The page's locale lives in a vue-i18n instance installed in every
+  application view, and `t()`, `tn()` and the Intl formatters read it from
+  there, so a view that translates while rendering renders again when the
+  locale changes. `bindLocale` (`src/i18n/index.js`) keeps the locale in a
+  given ref; Core's Vite config builds vue-i18n without its message
+  compiler. Catalogs, messages and call sites are unchanged
+  (samehkhamis, #1499).
+
+- Cockpit's Display popover shows the Display panel's own HUD, Detection,
+  Parameters and 3D groups through Vue teleports: `CockpitDisplayPortal`
+  publishes the popover's slots (`publish`, with `afterRender` to lay out once
+  they have moved) instead of moving the groups itself (samehkhamis, #1499).
+
+- The Cockpit utility strip's measured layout renders from the `gev-cockpit`
+  store: the layout pass publishes `utilityLayout` (the HUD's
+  `--cockpit-utility-*` lengths, `primaryOnly` and `hideCollapsed`), and a host
+  constructing `CockpitController` passes `publish.utilityLayout` beside its
+  other publishers (samehkhamis, #1499).
+
+- The Cockpit Contact and briefing cards' collapse renders from the
+  `gev-cockpit` store: the controller publishes `contextCollapsed` and
+  `signalCollapsed` in its presence, and each card's `data-collapsed` and its
+  toggle's state, words and icon follow it (samehkhamis, #1499).
+
+- The panels' own state classes (`collapsed`, `dock-pinned`, `dock-pinned-top`,
+  `layout-auto-collapsed`, `accordion-collapsed`) render from the
+  `gev-panel-chrome` store: the shell, the rails and the accordion present each
+  panel's state there instead of writing its classes. `layoutLeftPanelRail` and
+  `layoutRightPanelRail` (`./ui/layout`) now call
+  `onCollapse(panel, {collapsed, auto})` and leave drawing it to the host.
+  Without a shell to own the panels, the voice tools' `set_panel_open` now
+  reports that there is no panel to open instead of writing its classes
+  (samehkhamis, #1499).
+
+- The shell's panel chrome no longer writes the panels' collapse buttons, the
+  dock tray toggles' names or the dock pins' pressed state: it presents each
+  panel's open and pinned state to the `gev-panel-chrome` store, and the
+  buttons, now views, call it there. `bindPanelDisclosure` (`./ui/panels`) binds
+  only a panel's Escape; it no longer takes `buttons` or `onChange`. `UiButton`
+  joins the component kit (samehkhamis, #1499).
+
+- `SceneControls` (`./ui/scenes`) no longer takes `elements` or writes the Scene
+  panel's buttons, status, progress or runtime chip: it presents them to the
+  `gev-scenes` store and the panel's buttons call its actions there.
+  `sceneElements`, `presentSceneButtons`, `presentSceneProgress` and
+  `presentSceneRuntime` give way to `sceneButtonsDisabled` and `scenePercent`.
+  It no longer stands down when the page has no Scene panel: ESC still stops a
+  playing scene and the runtime chip still shows (samehkhamis, #1499).
+
+- `initFirstRunExperience` (via `./application/chrome`) no longer writes the
+  launcher's classes, attributes or text, or removes the card: it presents them
+  to the welcome view's `gev-first-run` store (its new `store` option) and
+  connects the controls the view's buttons call (samehkhamis, #1499).
+
+- `IntelHUD` (`./ui/hud`) no longer builds or writes `#intel-hud`: it hands its
+  readouts, visibility, layout variant and style colors to its `publish` option,
+  and Core's `intel-hud` view renders them. A page places that view with
+  `<div class="gev-view" data-gev-view="intel-hud">` instead of a bare
+  `#intel-hud` element. `./layers/vessels` shows the selected vessel's HUD
+  readout through `services.readouts.presentSelectedVessel()` instead of writing
+  `#hud-ais-vessel`; the application passes `src/hudReadouts.js`, which IntelHUD
+  follows (samehkhamis, #1499).
+
+- `LocationControls` (`./ui/location`) no longer builds the city and landmark
+  pills or writes the mini status: it presents the tray, including the search
+  error (`setSearchError()`), and hands it to its `publish` option, and Core's
+  dock renders it and calls `chooseCity()` and `choosePoi()`. Its `elements` are
+  now only `search`: `resetButtons` and `searchToggle` are gone, and the reset
+  buttons and the search toggle call its new `reset()` and `toggleSearch()`. It
+  presents the search field's open and searching state too (`searchExpanded`,
+  `searching`; a `searchExpanded` option starts it open), set through
+  `setSearching()`, `settleSearch()` and `closeSearch()`, and a host renders the
+  field's `expanded` and `searching` classes from it; `LocationSearch` takes a
+  `setSearching` option in place of writing the field's class, and
+  `NavigationController` a `settleSearch` option in place of `searchInput`.
+  `createOrbitIndicator()` is replaced by `showOrbit(active)`, which adds the
+  ORBIT indicator to the presented tray as `orbit: { active }` (null until
+  offered) (samehkhamis, #1499).
+
+- `createMapSourceControls()` (`./ui/maps`) no longer renders the map source
+  chips into a `container` or writes a `statusElement`: it presents the chip row
+  and status badge and hands them to its `publish` option, and Core's dock
+  renders them and calls `select()`. `renderMapStackChips`, `syncMapStackChips`
+  and `MAP_STACK_CHIP_CLASS` are removed (samehkhamis, #1499).
+
+- `./layers/launches` no longer writes the Space Missions roster or the selected
+  mission panel into `#space-mission-panel-host`: the layer publishes both
+  through `subscribePanel(listener)` and Core's Space Missions views render
+  them, calling the layer's panel commands (`selectMissionAt`,
+  `selectPreviousMission`, `selectNextMission`, `deselectMission`,
+  `focusSelectedLaunchSite`, `startSelectedReplay`, `toggleReplayPause`,
+  `cancelReplay`, `setReplaySpeed` and the `roster*` preview inputs). The
+  `bindMissionRosterItemKeyboardPreview`, `captureMissionRosterFocus` and
+  `restoreMissionRosterFocus` helpers are gone; the roster keeps focus itself
+  (samehkhamis, #1499).
+
+- `./layers/awareness` no longer writes the Contacts panel into
+  `#military-awareness-panel`: the layer publishes a plain panel view through
+  `subscribePanel(listener)` and Core's Contacts view renders it, calling the
+  layer's `navigatePrevious`, `focusCurrent`, `navigateNext` and `focusTarget`.
+  The `awarenessPanelControlKey`, `captureAwarenessPanelFocus` and
+  `restoreAwarenessPanelFocus` helpers are gone; the view keeps focus itself
+  (samehkhamis, #1499).
+
+- `./ui/cctv` and `./ui/radio` import Vue and Pinia: their controllers publish
+  the panel's state to a store that the CCTV and Radio views render, instead of
+  writing the panel's markup themselves (samehkhamis, #1499).
+
+- `./ui/display`'s `bindDisplayControls` is gone: the Display panel's controls
+  and the dock's style buttons call their owner through the display store's
+  `connect`/`act`, and its allocation and 3D model choices are the kit's
+  `UiSegmented`. `initDrawTool` takes `connect(actions)`, which returns their
+  disconnect, and no longer listens on the Draw controls; its view publishes
+  `color` and `label` too, and the shape choice is a `UiSegmented`.
+  `initGeoFileImport` takes `connect(actions)` the same way and no longer
+  listens on the Import button, picker or list, nor restores focus itself: the
+  `GeoImport` view does both, and its `publish` need not settle once the list
+  renders. Street Level's fit and panorama filters and Recent Imagery's mode are
+  `UiSegmented` too: the Street Level store's owner answers `setPano` and
+  `setRenderMode`, and `RecentImageryReadout` takes `onSetMode`. The Radio
+  panel's and Cockpit's internet radio controls and the tuner slider's events
+  call `RadioControls`, and the local RTL-SDR card's controls
+  `LocalSdrControls`, through the radio store's new `connect`/`act`; the card
+  labels its gain options itself. `act` returns what the answering action
+  returned. The Display, Radio, RTL-SDR, Cockpit, mission replay, style
+  parameter, rail card, observation timeline, imagery opacity, Street Level date
+  and Bhote Koshi sliders are the kit's `UiSlider`, a native range input that
+  emits numbers, and the pressed toggles are the kit's `UiButton`, which gains
+  `pressedClass`; so are the rail card chips, map source chips and location
+  pills (which now report `aria-pressed`), and the voice card's chips are the
+  kit's new `UiChip`. The selects are the kit's new `UiSelect`, the status
+  badges its new `UiBadge` and the one-line empty states its new `UiEmpty`. The
+  top-center clear, share, tilt, north-up and reset buttons, and the cockpit's
+  reset, call the shell through the new globe actions store, which also carries
+  the camera's tilt and compass heading. The recording safe frame renders what
+  `RecordingControls` publishes to the new recording store. `syncScopeControls`
+  (`./ui/display`), `shouldHideCollapsedRightPanels` (`./ui/layout`),
+  `bindClearLayersControl` (`./ui/layers`) and `createStyleParameters`
+  (`./ui/input`; the Display panel renders the style parameters VisualSettings
+  publishes to the display store) are deprecated: the Display view, the rail and
+  the globe actions view now own what they did. `./ui/input` imports Vue
+  (samehkhamis, #1499).
+
+- `./scenes` presents the scene sharing dialogs and the EDIT DETAILS / SHARE
+  SCENE bar through a store that the scene panels view renders, so a page that
+  omits `layer-panels` shows neither (samehkhamis, #1499).
+
+- `./voice/control`'s `createVoiceControl({ panel })` returns the voice
+  control's presenter instead of element handles: owners write it by part
+  (`update('detail', { text })`) and listen with `on('button', fn)`, and the
+  command dock renders it from a store. `createVoiceCommands`' `createControl`
+  and `VoiceCardControls` (`{ ui }` instead of `{ root }`) take the same
+  presenter; the `reset` option is gone, since a newer control replaces the
+  previous one (samehkhamis, #1499).
+
+- Pages place each view with a `<div class="gev-view" data-gev-view="NAME">`
+  host and write their own loading screen; the `build/html` template expansion
+  and its `gev:template` markers are gone. `createApplication` takes `omitViews`
+  (for example `['provider-settings']`) for views an application leaves out
+  (samehkhamis, #1499).
+
+- The page's panels, dock, cockpit and dialogs are Vue views with the same
+  markup as before. Hosts that do not initialize Core's locale pass
+  `localePicker: false` to `createApplicationControls` to drop the language
+  picker, and Node tests that import application modules register the component
+  loader with `--import=<core>/build/register-vue` (samehkhamis, #1499).
+
+- The Data, Authoring, Weather, Recent Imagery, Context, CCTV, Street Level and
+  Radio panels are one component, `UiPanel` (`src/ui/kit/`), with the same
+  markup plus the kit's `ui-panel` classes, their titles translated by `t()`
+  rather than `data-i18n`; `RailPanel` binds it to the panel chrome store.
+  `PanelCollapseButton` drops its `initial` and `initialTitle` props and takes
+  `startCollapsed`, so before startup presents a panel its button already shows
+  that state's glyph, words and `aria-expanded` (samehkhamis, #1499).
+
+- The Authoring, shot list and CCTV buttons and Street Level's nearest button
+  are the kit's `UiButton` (danger buttons in the `alert` tone, primary ones the
+  `primary` variant), keeping their classes; the CCTV on/off, coverage,
+  auto-hop, projection and adjust toggles now say their state with
+  `aria-pressed` (samehkhamis, #1499).
+
+- Each desktop sidebar has an icon rail that lists every panel on that side and
+  opens one with a click. One panel is open per side in every HUD layout, so the
+  collapsed panel headers no longer take up the sidebars. Phones keep the bottom
+  tab bar. The rail is the first view built with Vue and Pinia, which now ship
+  with the app; see docs/VUE-MIGRATION.md (samehkhamis, #1499).

docs/APPLICATION.md

@@ -200,6 +200,24 @@ its pending results. Source disposal does not silently reinstate a default.
 `ui/composition` supplies the default engines to the shell. Applications can
 supply a HUD implementation or request policy through control services. The
 shared chrome owns the welcome/loading transition; standalone composition adds
-Provider Settings. `build/html` expands an allowlist of component markers from
-`src/ui/templates`; unknown names cannot read arbitrary filesystem paths. The
-standalone document expands to the same markup as before this extraction.
+Provider Settings. A page places each Vue view in `src/ui/views` with a host,
+`<div class="gev-view" data-gev-view="NAME"></div>`, and writes its own loading
+screen (`#loading-screen` with a `.loader-status` line) as static markup so it
+paints before any script runs. `createApplication()` renders the views before
+anything reads the page; `omitViews` names views the application leaves out,
+such as `provider-settings`, and their hosts are removed. Leaving out
+`layer-panels` also leaves out the scene sharing dialogs it draws, and leaving
+out `scene-chrome` the before/after imagery dividers (the imagery still splits,
+with no line or handle to move it), the status chips, the toast, the ORBIT
+indicator, the FPS readout, the Scene actions panel, the data-pack attribution
+cards, the wind inspection marker, the Space Missions replay vehicle, the
+full-globe celestial ring, the screen-space map annotations, the visible
+map target list and the Global Context compass;
+leaving out `command-dock` the voice control and its pointer reticle;
+leaving out `context` the Bhote Koshi reconstruction panel; and leaving out
+`intel-hud` the Intel HUD overlay (`#intel-hud`), whose readouts the HUD
+implementation publishes to the `gev-hud` store. An unknown
+view name is an error. A host that does not initialize Core's locale passes
+`localePicker: false` to `createApplicationControls` instead of editing the
+markup. Node tests that import application modules register the component
+loader with `node --import=<core package>/build/register-vue`.

docs/CODE-BOUNDARIES.md

@@ -276,7 +276,7 @@ compatible through re-exports.
 
 ### Adding a right-rail readout panel
 
-Add the shell in `src/ui/templates/context.html` inside `#right-context-rail`:
+Add the shell in `src/ui/views/ContextView.vue` inside `#right-context-rail`:
 a `.panel-collapsible` with a stable `id` and matching `data-panel-id`, the
 existing `.panel-header`, collapse button and a dedicated body. Register it
 with the existing panel chrome/layout owners; do not allocate rail space in
@@ -297,13 +297,13 @@ compactStatus, blocks }` in place. Their full-width native button headers expose
 adapter owns accordion state. Generic cards do not select data or enable layers.
 
 `blocks` is an ordered array of loose, optional `{ id, type, ... }` descriptors,
-rendered by `railCardBlocks.js`. There are no per-section disclosures:
+rendered by `rail/RailCardBlocks.vue`. There are no per-section disclosures:
 
 - `summary`: `text`, a single summary line.
-- `list`: `list: { ariaLabel, items }`, reconciled by `syncRowList` in `rowList.js`.
+- `list`: `list: { ariaLabel, items }`, keyed by `rail/RailRowList.vue`.
 - `lines`: keyed `lines: [{ id, text, muted? }]` for details and status.
 - `settings`: `settings: [{ id, label, chips }]`; each labelled row has a 56 px
-  label column and a wrapping `syncChipGroup` from `chipGroup.js`.
+  label column and wrapping keyed chips from `rail/RailChips.vue`.
 - `legend`: `legend: { colors, labels, units?, zeroIndex?, categorical? }` for a
   ramp/scale (including a physical freezing anchor) or separate keyed swatches.
 - `actions`: keyed `actions: [{ id, label, params?, href?, onClick?, disabled?,
@@ -372,12 +372,10 @@ facade's asynchronous teardown can yield.
 
 ## Ordinary action buttons
 
-`src/ui/actionButton.js` is a native, listener-free view helper used by Scene
-presentation and sharing-toolbar owners. It receives translated text and explicit
-presentation/accessibility properties. Feature controllers own action dispatch,
-state, persistence and cleanup. Static Scenes/CCTV templates use the same CSS
-surface and preserve IDs and layout hooks. The helper imports no application,
-renderer, storage or services; it belongs to the consuming package closures.
+The scene panels view and the CCTV panel draw their action buttons with the shared
+`gev-action-button` classes in `src/ui/styles/action-button.css`. Feature
+controllers own action dispatch, state, persistence and cleanup, and the views
+preserve IDs and layout hooks.
 
 ## Display controls
 
@@ -401,9 +399,9 @@ remain in their callers.
 `ui/maps` owns source-chip presentation, selection feedback and its subscription
 lifetime. It receives the existing controller and explicit state/action callbacks;
 it imports no renderer or application. Source construction and availability policy
-remain with the map controller. Rebuilding controls removes their previous chip
-listeners, and destruction suppresses late completions without owning or destroying
-the supplied controller.
+remain with the map controller. The dock renders the chips; rebuilding controls
+drops their previous subscription, and destruction suppresses late completions
+without owning or destroying the supplied controller.
 
 ## Layer panel
 
@@ -741,13 +739,13 @@ DOM and platform middleware.
 
 ### Native form fields
 
-`src/ui/formField.js` constructs native numeric inputs without listeners or
-application state. Static selects and number inputs use the same `gev-field`
-surface, with explicit compact and inline densities. Feature owners retain
+Native numeric inputs are rendered by the views that own them; the CCTV pose
+chip renders its inline input in `src/ui/cctv/CctvCalValue.vue`. Static
+selects and number inputs use the same `gev-field` surface, with explicit
+compact and inline densities. Feature owners retain
 option identity/order, bounds, parsing, draft values, input/change timing and
 teardown. CCTV effective-pose conversion and tuner/device operations remain
-feature responsibilities. A Vue replacement can reuse this contract and CSS;
-it replaces DOM construction, rather than adding a second state owner.
+feature responsibilities.
 
 The shared stylesheet owns field surfaces and disabled opacity; feature and theme
 palettes use `--gev-field-background`, `--gev-field-border-color`,
@@ -759,11 +757,9 @@ field rules separate, so Radio's palette remains an intentional exception.
 
 ### Read-only status badges
 
-`src/ui/statusBadge.js` constructs/updates ordinary badges without listeners,
-status inference or live-region policy. It consumes translated text and controlled
-visibility; appearance variants share CSS rather than mapping machine states to
-universal severity. CCTV owns frame/source and calibration rules and their data
-attributes, while Weather owns coverage labels. The keyed rail-card owner keeps
-node identity, header focus, disclosure and teardown. The shared adapter never
-creates another state store or announces all card updates. A Vue view can replace
-this adapter and retain these presentation inputs and styles.
+Views draw read-only badges with the `gev-status-badge` classes, without
+listeners, status inference or live-region policy. Appearance variants share
+CSS rather than mapping machine states to universal severity. CCTV owns
+frame/source and calibration rules and their data attributes, while Weather
+owns coverage labels. The rail card keeps node identity, header focus,
+disclosure and teardown, and does not announce every card update.

docs/CURRENT-STATE.md

@@ -893,7 +893,7 @@ The standalone FIRMS provider, source defaults and parsing behavior are unchange
 
 CLI tools and development launchers accept `GEV_PROJECT_ROOT` to select the project environment, dependencies and output directory. Their default remains this checkout; bundled tool resources and source checks stay relative to the script installation. The setup doctor also accepts an explicit `rootDir`.
 
-Application composition now uses shared scene/control/catalog/tool constructors and allowlisted HTML component templates. The standalone entry supplies settings and the default sources. Terrain, boundaries, weather, regional context and summaries use configurable services; renderer/action owners remain page-scoped. Annotation proximity guards remain on by default and allow distant targets only for explicit navigation.
+Application composition now uses shared scene/control/catalog/tool constructors and the application's Vue views (see [VUE-MIGRATION.md](VUE-MIGRATION.md)). The standalone entry supplies settings and the default sources. Terrain, boundaries, weather, regional context and summaries use configurable services; renderer/action owners remain page-scoped. Annotation proximity guards remain on by default and allow distant targets only for explicit navigation.
 
 Voice controls compose a supplied action runner and connection controller.
 Realtime token and SDP requests live in a configurable backend, with independent
@@ -1464,11 +1464,11 @@ The application supplies actions and retains effect settings, restore claims and
 rendering. Native keyboard editing, model modes and current defaults are preserved.
 Destroying the UI removes these listeners before asynchronous teardown.
 
-Ordinary sliders share the native range component in `ui/slider.js` and the
-`gev-quantitative-slider` surface in `ui/styles/slider.css`. Display, shader
+Ordinary sliders share the native `gev-quantitative-slider` surface in
+`ui/styles/slider.css`. Display, shader
 parameters, volume, replay speed, weather settings/history, imagery opacity and
 Street View's date filter use the same rail, thumb, value styling, keyboard focus and disabled state.
-Generated controls use `createSlider`; static templates apply the same class.
+Templates, components and generated controls apply the same class.
 Feature owners retain bounds, steps, formatted values, input/change timing and
 listener cleanup. The radio tuning dial, imagery comparison divider and event
 comparison/progression controls keep their specialized presentation and behavior.
@@ -1487,11 +1487,9 @@ boundaries preserve the current Tactical/Cyber appearance and native behavior.
 ## Ordinary status badges
 
 CCTV source/frame labels, calibration provenance and Weather coverage labels use
-`ui/statusBadge.js` and the `gev-status-badge` CSS surface. The listener-free
-adapter accepts already-translated `label` and `hidden` values; pill, box and plain
-appearances describe shape/density only. Static CCTV markup uses the same classes
-as generated rail-card badges. Repeated identical updates do not rewrite text or
-replace nodes. Empty coverage remains hidden.
+the `gev-status-badge` CSS surface, drawn by the CCTV view and the rail card from
+already-translated labels; pill, box and plain appearances describe
+shape/density only. Empty coverage remains hidden.
 
 Feature owners retain the status rules, machine-state attributes, translations
 and announcement policy. CCTV frame acquisition (`idle/loading/error/ready`)
@@ -1501,18 +1499,16 @@ prior poses; unsaved edits override the label until save/reset. Coverage labels
 remain geographic scope, not health claims. Existing colors and the source
 badge's polite live region are preserved; coverage and calibration do not gain
 live regions. Interactive layer toggles, progress indicators and world overlays
-retain their specialized ownership. Vue can reuse the view contract and CSS while
-replacing DOM construction. Browser acceptance:
+retain their specialized ownership. Browser acceptance:
 `QA_BASE_URL=http://127.0.0.1:4189 node scripts/qa-status-badges.mjs`.
 
 ## Ordinary action buttons
 
 Scene panel actions, shot LOAD/DEL actions, the EDIT DETAILS / SHARE SCENE
-bar and one-shot CCTV actions use `ui/actionButton.js` and the shared
-`gev-action-button` surface in `ui/styles/action-button.css`. Static templates
-apply the same classes as generated buttons. The native builder accepts translated
-text, default/danger variants, default/compact sizes and disabled/accessibility
-properties; it installs no listeners and owns no application state. Feature
+bar and one-shot CCTV actions use the shared `gev-action-button` surface in
+`ui/styles/action-button.css`, with default/danger variants and
+default/compact sizes, drawn by the scene panels view (`LayerPanelsView.vue`,
+`SceneShotList.vue`) and the CCTV panel. Feature
 controllers retain callbacks, enable/disable rules, confirmation prompts,
 persistence and teardown. The smaller shot actions retain their existing sizing
 and hover treatment. Feature CSS still owns panel layout and translated wrapping.
@@ -1520,21 +1516,21 @@ and hover treatment. Feature CSS still owns panel layout and translated wrapping
 CCTV enable, coverage, auto-hop, projection and adjustment toggles, editable
 calibration-value chips and the scene authoring dialogs retain their specialized
 controls. Existing `scene-btn` hooks remain compatible with Street Level and
-legacy toggles. The shared CSS, explicit input/action boundary and behavior tests
-can carry to a Vue view while Vue replaces native DOM construction.
+legacy toggles.
 Browser acceptance: `QA_BASE_URL=http://127.0.0.1:4179 node scripts/qa-action-buttons.mjs`;
 `qa-scene-controls.mjs` also covers real Scene authoring/playback with native Space capture.
 
 ## Segmented selectors
 
-Segmented selectors use the controlled DOM adapter in `ui/segmentedControl.js`
-and the shared `gev-segmented` / `gev-segment` surface. Model coverage, label
+Segmented selectors are the kit's `UiSegmented` (`ui/kit/UiSegmented.vue`) on
+the shared `gev-segmented` / `gev-segment` surface. Model coverage, label
 allocation, drawing shape, Street View fit/panorama filters and imagery mode keep
-their feature-owned values, actions and persistence. Painting a restored value
-does not emit a change or move focus. Existing keyboard policies remain explicit:
-Street View uses arrows/Home/End with one tab stop, imagery mode uses arrows from
-its controlled selection, and Display keeps its existing native button behavior.
-Pure value navigation is separate from DOM rendering for reuse by a future view.
+their feature-owned values, actions and persistence: the view renders the
+owner's value and sends a choice back through its store. Rendering a restored
+value does not emit a change or move focus. Each group names its keyboard
+policy: Street View uses `radio` (arrows/Home/End with one tab stop), imagery
+mode `arrows` from its controlled selection, and Display `none`, its native
+button behavior.
 Segments keep their word minimum width: compact inline groups such as FIT/FILL
 and ALL/360°/FLAT must not break short labels mid-word. Collapsed Weather follows
 the same exclusive-rail hiding rule as the other readouts.
@@ -1572,6 +1568,28 @@ The right rail skips panels hidden by other CSS (computed `display: none`), but
 keeps the collapsed panels its own exclusive presentation hides, so automatic
 collapse can still be undone.
 
+## Panel rails
+
+On desktop each side stack has a floating icon rail (`src/ui/panelNavigation.js`,
+rendered by the Vue `PanelRailView` and the kit's `UiRail`) in the screen-edge
+gutter beside it. The rail lists every panel the side currently offers, in stack
+order: Data Layers and Authoring on the left; Display, CCTV, Weather and Recent
+Imagery (while shown), Street Level and Context on the right. Selecting an item
+opens its panel through `setPanelCollapsed(id, false, {explicit: true})`;
+selecting the open panel's item closes it. The item of the open panel is
+pressed (`aria-pressed`), and its tooltip is suppressed while the panel is open.
+
+One panel is open per desktop side, in every HUD layout. Opening a side panel
+by any route (rail, header, keyboard, voice) collapses its peers; restored or
+shared state that opens several is normalized by the layout pass, which keeps
+the most recently opened panel, then the one holding keyboard focus, then the
+first, and marks the others `accordion-collapsed` (presentation only, so share
+links still report the saved preference). Collapsed panels are hidden
+(`layout-exclusive`) because the rail lists them. The rail lives inside its
+stack, so it hides with it in Cockpit (where Authoring's item is also hidden),
+recording and clean view. The panel store (`src/ui/stores/panels.js`) mirrors
+each side's panels from the DOM; `PanelChrome` remains the disclosure owner.
+
 ## Phone layout
 
 At 720px and narrower, `src/ui/mobileShell.js` keeps the globe full screen and
@@ -1607,8 +1625,9 @@ sheet before a panel's own Escape handling, and the dock's hover auto-close does
 not apply inside a sheet.
 Cockpit, recording and clean view close the sheet and hide the tab bar; scene
 playback keeps both so its STOP control in the Authoring panel stays reachable. The
-right rail neither hides collapsed siblings nor applies Cyber's one-panel
-accordion at these widths, since the sheet chooses what shows. The Cesium and Google attribution stays visible above the
+side rails neither hide collapsed siblings nor apply the desktop one-panel
+accordion at these widths, and the panel rails are hidden, since the sheet
+chooses what shows. The Cesium and Google attribution stays visible above the
 voice control, and above an open sheet. The page draws under the notch and
 system bars (`viewport-fit=cover`) and the shell's chrome uses safe-area insets.
 Wider viewports are unchanged, and crossing to them closes any open sheet.
@@ -3862,10 +3881,10 @@ Shipped locales: **en** (source and fallback), **de**, **es**, **fr**, **it**, *
   select `zh-Hant`. Explicit `Hans` selects `zh-CN` regardless of region. `?lang=` is not stored, and share links drop
   it, so a recipient keeps their own language. The globe picker in the
   bottom-right corner (`src/ui/localePicker.js`) stores the choice, drops
-  `?lang=` (keeps it only when storage is blocked) and reloads. It asks first
-  when the reload would lose work registered with `registerUnsavedWork`:
-  unsaved keys or CCTV calibration, Draw marks, imported map files, the open
-  cockpit, a voice session.
+  `?lang=` (keeps it only when storage is blocked) and switches in place:
+  views re-render, code that published translated text words it again through
+  `onLocaleChange`, and `<html lang>`/`dir` and the page's `data-i18n` markup
+  follow. Nothing is lost; a toast already on screen keeps its words.
 - **Gate.** `npm run i18n` (and `src/i18n/catalog.test.mjs` under `npm test`)
   extracts every message and fails on missing, empty, unused,
   placeholder-mismatched, still-English (plural forms included) or
@@ -5457,7 +5476,7 @@ request viewbox and continues searching without that geographic preference.
 ### Manual Whiteboard Drawing (September 2026)
 
 - DISPLAY ▸ **Draw** turns the globe into a whiteboard drawn by hand. Pick a shape (Area, Line, Pin), click the vertices on the real world, type an optional label and pick a colour, and finish. **Keyboard contract, live only while Draw is on and never while you are typing in another field:** Enter finishes the shape (as does a double-click, and the two cannot both submit it — the session is replaced before the annotate call is awaited); Backspace removes the last vertex; Esc cancels the shape in progress, and a second Esc — Esc on an empty session — leaves draw mode. Typing in the label field keeps Backspace; Enter there also finishes. **Clear** wipes the board (the shape in progress and every placed mark), so removing marks does not require the console or the microphone.
-- Runtime entry: `createApplicationTools` (`src/app/tools.js`, behind the `src/standalone/tools.js` shim) calls `initDrawTool({ viewer, annotations })` after `initAnnotations` and defers its `destroy()`, so disposing the shell returns every DOM listener, the Cesium handler, the preview data source, the borrowed click actions and the `window.__gevDrawTool` handle. Its markup is a DISPLAY-rail component template (`src/ui/templates/display-controls.html`), assembled into `index.html` at build time. That handle (`setActive`, `setShape`, `addVertex(lon, lat)`, `finish`, `cancel`, `clearAll`, `diagnostics`) is the no-mouse test seam.
+- Runtime entry: `createApplicationTools` (`src/app/tools.js`, behind the `src/standalone/tools.js` shim) calls `initDrawTool({ viewer, annotations })` after `initAnnotations` and defers its `destroy()`, so disposing the shell returns every DOM listener, the Cesium handler, the preview data source, the borrowed click actions and the `window.__gevDrawTool` handle. Its markup is in the DISPLAY-rail view (`src/ui/views/DisplayControlsView.vue`), rendered into its `index.html` host before the page is wired. That handle (`setActive`, `setShape`, `addVertex(lon, lat)`, `finish`, `cancel`, `clearAll`, `diagnostics`) is the no-mouse test seam.
 - Contract: a finished shape is submitted through the SAME `annotationEngine.annotate()` the voice agent uses, with geometry supplied and `manual: true` (`type: area` + `ring`, `type: route` + `path`, `type: pin` + coordinates). `resolveSpec` short-circuits manual specs (`resolveManualSpec`) so no geocoder, Places or Overpass call is made. A drawn area is a real (not synthesized) outline and drapes solid; a drawn line is a `route` with `mode: 'manual'`, labelled with its length and never a travel time; a pin is a point. Drawn marks therefore render with the whiteboard look, persist, de-dup, appear in `.list()`, and clear with `clear_annotations` / `.clear()`.
 - **A vertex is a lon/lat, and the mark is DRAPED.** Clicks are picked through `pickWorldFromScreen` — one of two scene helpers the annotation resolver factory (`src/annotations/resolver.js`) exposes alongside `sampleGroundHeight`, so the app has ONE depth-aware pick cascade rather than a second written beside it — which returns the height the pick landed on as well as the coordinate, so the live preview hangs on the roof or hillside under the pointer instead of sinking to sea level. The world renderer draws areas and routes with `clampToGround`, so the height is dropped at finish in one place (`finishSpec`) rather than being carried downstream and discarded silently: what you get is the outline you drew, lying on the surface beneath it.
 - **Draped marks classify onto `ClassificationType.BOTH`** — terrain AND 3D tiles — not onto 3D tiles alone. With only `CESIUM_3D_TILE`, every area fill, area outline, route and arrow rendered to nothing on a keyless boot, where Cesium's own globe carries Esri/OSM imagery and there are no tiles to classify against; the labels appeared and the geometry did not. That hit spoken annotations exactly as hard as hand-drawn ones. `scripts/qa-draw-tool.mjs` counts the mark's own colour in the rendered frame before and after a shape is finished, on a keyed AND a keyless server, so "the board says there is a mark" can no longer pass for "the mark is on screen".
@@ -5522,7 +5541,7 @@ pins and share links already supply complete boxes.
 - **Modes, pins and the preview.** The mode is explicit: `image` (one pinned day, slot `a`), `basemap` (that day on the left of a swipe, the basemap on the right: slot `a` splits LEFT and there is no second layer) and `ab` (day `a` left, day `b` right). `setAssignment(slot, key | null)` / `toggleAssignment(slot, key)` pin and unpin; a day is in one slot at most (pinning it in the other slot moves it) and an empty day cannot be pinned. `setMode()` keeps both pins; `b` only drapes in `ab`. While the mode's first empty slot exists the focused day previews in it: a click at once, arrow keys after 250 ms of quiet (`FOCUS_DEBOUNCE_MS`, one timer, last day wins); an unprobed day is followed and previews when its probe says present, an empty or unknown day never drapes and the previous preview stays. A pin change drops the preview until focus moves again, and unpinning takes that layer off at once. `rankLatest` picks START HERE coverage first (a present HLS day whose footprints cover the box, or have none, beats a newer sliver), then newest with all granules ≤ 20% known cloud, then newest; slivers only as `partial`; else the newest non-empty VIIRS day; it is focused and previewed after each search when nothing is pinned. Escape clears the preview (`clearPreview()`), then cancels the box tool, then blurs — with SELECT BOX armed too, through the tool's `onEscape` interceptor wired in `createApplicationTools`. Pins, mode, box and split changes made in the panel are published with `adoptLayerParams`, never while a share link is being applied.
 - **Rendering.** `rendering.js` owns at most two GIBS layers on the host `src/maps/imageryHost.js` resolves: `viewer.imageryLayers` while the globe shows, the photoreal tileset's `imageryLayers` while it is hidden, or none (the panel says so). Layers are rebuilt on a new host, never re-parented. `MapSourceController.subscribe()` fires after every settled stack switch (silent switches and fallbacks included) and the layer rebinds on it. Tile requests pass a six-slot semaphore of our own (Cesium's global limits are untouched). Under `requestRenderMode` a deferred tile needs a later frame, but a deferral must never request one itself or a stalled tile keeps the scene rendering every frame: a request that finds the semaphore full asks for nothing (the settling request asks for one frame), and a tile Cesium itself deferred goes through one coalesced 250 ms retry. Thumbnails: three fetches at once, sixteen decoded images, least-recently-used where a `get` read is never a use; eviction keeps the probe result. The strip's visible window is probed around the focused card; the pinned and previewed days are probed wherever they sit, at the focused card's priority, so a pin restored or assigned off-screen still drapes.
 - **Esri surface and the swipe.** While any image is on the map (a preview included) the layer holds the map lease (`acquireImageryComparison`, owner `recent-imagery`, `esri-if-photoreal`): on Google 3D the map switches to Esri, because 30 m pixels over 3D buildings do not read, and Cesium's split only works on the globe. The lease is handed back, and Google 3D restored unless the operator changed maps meanwhile, when the last image leaves the map or the layer is disabled; the notice line says so while it holds. While a day is shown the imagery keeps Esri: a manual switch that lands on Google 3D is answered at once with a new lease under the same policy (`keepEsri`), the notice reads `Imagery stays on Esri · CLEAR to use Google 3D`, and the divider never suspends because of a map switch. It re-leases once per switch generation and only for a manual one (`MapSourceController#getSwitchOrigin()` is `manual` for an outside `setStack`, `automatic` for the controller's own fallback or recovery), never for the lease's own switch and never while releasing, so CLEAR and disable still return to Google 3D; a lease another owner holds stays refused. When Esri fails and the controller falls back to Google 3D on its own, the layer lets the lease go without restoring anything, both days drape on the tileset without a swipe and the guidance reads `Esri map unavailable · no swipe`; only the next manual switch to Google 3D takes Esri again, so a failing Esri map is never retried in a loop. Switching between globe stacks (Esri, OSM, Bing) only rebinds. On a tileset host both images drape without a swipe. The split control (`createImagerySplit`, labels A / B, or IMAGE / BASEMAP) exists only while a swipe is live, recentres on every new comparison (not while scrubbing the second day), except once for a split restored from a link. There is no keyboard shortcut (Space is the app's push-to-talk): SWAP (`#ri-swap`, in the controls row, its slot reserved and the button disabled while no swipe is live) trades the two sides, A to the right and B to the left, or the image to the right of the basemap, and a second click restores; the hint reads `Drag the divider · SWAP trades sides`. The swap is not in the share link, and every new comparison starts unswapped. One opacity applies to both drapes. Another owner holding the lease is reported and the images still drape.
-- **Panel.** `#recent-imagery-panel` is static rail markup in `src/ui/templates/context.html` beside `#weather-panel`, registered in `PanelLayoutController`, `PanelChrome` and the share panel state (`ui` token `i`), hidden while the layer is off and opened on first appearance unless a stored or shared collapse choice exists (`dataset.collapsedPreference`). `LayerPanel.attachRecentImagery(factory)` mounts the readout (`createRecentImageryPanel` in `src/ui/recentImagery.js`) into its `data-rail-scroller` body, as the weather readout is mounted. The body is a fixed stack in which no block changes height and no control moves in any state: `#ri-actions` (SELECT BOX · USE VIEW · CLEAR, rail-card actions), `#ri-notice` (one line: `#ri-notice-text` with the refusal, error, CLEAR notice or the Esri note, and `#ri-zoom-in` in a fixed slot at its right end, reserved unless an oversized box or view can be fitted), `#ri-strip` (day cards newest first: thumbnail, date, sensor, cloud, START HERE, PREVIEW, and a SHOW chip or A and B chips; ← → Home End move, S / A / B pin, Enter previews), `#ri-hint` (one line: the next step), `#ri-selection` (`#ri-mode` IMAGE · VS BASEMAP · A / B, then `#ri-slot-a` and `#ri-slot-b` with `#ri-unpin-a` / `#ri-unpin-b` kept in place when empty), `#ri-controls` (`#ri-opacity`, EXPORT / EXPORT A and EXPORT B) and `#ri-details`, a collapsed rail card holding the focused day's acquisition, coverage and granules, catalog notes, the empty-days toggle and the imagery credit. Absent controls are reserved (invisible), never removed. Every render preserves the body's `scrollTop`; opening DETAILS then scrolls its card into view once.
+- **Panel.** `#recent-imagery-panel` is rail markup in the Context view (`src/ui/views/ContextView.vue`) beside `#weather-panel`, registered in `PanelLayoutController`, `PanelChrome` and the share panel state (`ui` token `i`), hidden while the layer is off and opened on first appearance unless a stored or shared collapse choice exists (`dataset.collapsedPreference`). `LayerPanel.attachRecentImagery(factory)` mounts the readout (`createRecentImageryPanel` in `src/ui/recentImagery.js`) into its `data-rail-scroller` body, as the weather readout is mounted. The body is a fixed stack in which no block changes height and no control moves in any state: `#ri-actions` (SELECT BOX · USE VIEW · CLEAR, rail-card actions), `#ri-notice` (one line: `#ri-notice-text` with the refusal, error, CLEAR notice or the Esri note, and `#ri-zoom-in` in a fixed slot at its right end, reserved unless an oversized box or view can be fitted), `#ri-strip` (day cards newest first: thumbnail, date, sensor, cloud, START HERE, PREVIEW, and a SHOW chip or A and B chips; ← → Home End move, S / A / B pin, Enter previews), `#ri-hint` (one line: the next step), `#ri-selection` (`#ri-mode` IMAGE · VS BASEMAP · A / B, then `#ri-slot-a` and `#ri-slot-b` with `#ri-unpin-a` / `#ri-unpin-b` kept in place when empty), `#ri-controls` (`#ri-opacity`, EXPORT / EXPORT A and EXPORT B) and `#ri-details`, a collapsed rail card holding the focused day's acquisition, coverage and granules, catalog notes, the empty-days toggle and the imagery credit. Absent controls are reserved (invisible), never removed. Every render preserves the body's `scrollTop`; opening DETAILS then scrolls its card into view once.
 - **Share links.** Layer options (token `1`): box edges as integers at degrees × 100000, pins `a` and `b` as compact days (`S20260918`), `m` mode (0 image, 1 basemap, 2 A / B), `p` split percent (share-link only: never stored locally) and `v` for the daily overview. Row chips: `MORE DETAIL · 30 m` (on) and `DAILY OVERVIEW · 250 m` (off).
 - Regression surface: the colocated `*.test.mjs` beside each module (shared doubles in `src/layers/recentImagery/testDoubles.mjs`; `src/ui/recentImagery.test.mjs` includes a DOM-structure guard: every control keeps its place in the tree, nothing is hidden, and every fixed-height block keeps the class the stylesheet fixes its height by; it has no layout, so it cannot see movement), `src/ui/layerPanel.test.mjs` (mount), `src/maps/controller.test.mjs` (`subscribe`), `src/data/layerState.test.mjs` (codec), `src/sharelink.celestial.test.mjs` (panel token), and the live gate `scripts/qa-recent-imagery.mjs`, which also measures every control's rect, relative to the panel, across the transitions within 1 px; that measurement is the real layout-shift check. `QA_RECENT_IMAGERY_SLOW_RENDER=1` gives loaded software renderers a 4 s zoom deadline and an 8-sample stability tail; the default stays 2 s and 12 samples.
 
@@ -5561,10 +5580,10 @@ pins and share links already supply complete boxes.
 
 ### Split-flap status chips (August 2026)
 
-- The three status chips flip their LABELS over character by character when the text changes, like a departure board: `#global-loading-label` ("LOADING LIVE DATA" → "LOAD COMPLETE"), `#traffic-sync-label`, and `#cctv-sync-label` ("loading frames" → "camera grid ready"). All three route through `setSplitFlapText()` in `src/splitFlap.js`; there is no other writer of those three elements. The progress counters (`#*-sync-progress`, `#global-loading-detail`) are deliberately left as plain `textContent` — they tick several times a second, and flapping them reads as a slot machine.
-- `#global-loading-label` doubles as the universal top-center status banner, so anything routed through `_showGlobalStatusNotice()` flaps as well — in particular the share-link restore notices, of which "Shared military flight could not be restored — feed unavailable" is the longest at 63 characters. That needs no special case: `planSplitFlap()` compresses the stagger to hold the 620 ms budget (26 ms → 6.9 ms per column at that length), every column is reserved for the whole cascade, and `element.textContent` is the complete notice at every instant, so the `aria-live` region announces the whole sentence rather than a fragment. A notice deferred minutes past boot is equally safe: `ensureHost()` re-validates the shell on every call, and the long-lived `Text` node is never replaced.
-- **DOM text is the truth, and its node NEVER moves — do not "fix" this.** The first call upgrades a chip label into a permanent shell (`ensureHost`): a `.gev-flap-text` span holding one long-lived `Text` node, plus an `aria-hidden` `.gev-flap-cells` sibling. After that the ONLY text operation for the life of the chip is `node.data = next`. Nothing is reparented, so the label is never transiently empty and the `aria-live` region never sees a removal/reinsertion pair it could announce twice. `element.textContent` is the settled string at every instant, because the cells carry no text at all: both glyphs are CSS generated content (`::before` from `data-flap-prev` = outgoing, `::after` from `data-flap-next` = incoming), which never reaches `textContent`. This keeps QA pins honest and lets `_updateTrafficSyncChip`'s own `textContent !==` guard keep working. The shell is built on a tick where the text is NOT changing, so no real label change ever carries a structural mutation.
-- **No animation loop, and exactly ONE `setTimeout` per change.** CSS `animation`/`transition` only, triggered once per text change and staggered through a per-cell `--gev-flap-delay`. The single timer is the settle that strips the cells; the width ease ends on a `transitionend`/`transitioncancel` listener, never a second timer. Idle cost is zero, there is no periodic work, and nothing requests a Cesium render or takes a render-governor hold. `setSplitFlapText` is a no-op on unchanged text, which is required — the chips are repainted by a 60 ms and a 500 ms ticker.
+- The three status chips flip their LABELS over character by character when the text changes, like a departure board: `#global-loading-label` ("LOADING LIVE DATA" → "LOAD COMPLETE"), `#traffic-sync-label`, and `#cctv-sync-label` ("loading frames" → "camera grid ready"). ShellFeedback and CctvControls publish them to the `gev-status` store, and the scene chrome renders each label with `SplitFlapText.vue`, which plays the cascade `src/splitFlap.js` plans; there is no other writer of those three labels. When an owner is destroyed it publishes the label `stopped`, which rests it at once. The progress counters (`#*-sync-progress`, `#global-loading-detail`) are deliberately left as plain `textContent` — they tick several times a second, and flapping them reads as a slot machine.
+- `#global-loading-label` doubles as the universal top-center status banner, so anything routed through `_showGlobalStatusNotice()` flaps as well — in particular the share-link restore notices, of which "Shared military flight could not be restored — feed unavailable" is the longest at 63 characters. That needs no special case: `planSplitFlap()` compresses the stagger to hold the 620 ms budget (26 ms → 6.9 ms per column at that length), every column is reserved for the whole cascade, and `element.textContent` is the complete notice at every instant, so the `aria-live` region announces the whole sentence rather than a fragment. A notice deferred minutes past boot is equally safe: the long-lived `Text` node is never replaced.
+- **DOM text is the truth, and its node NEVER moves — do not "fix" this.** The label is a `.gev-flap-text` span holding one long-lived `Text` node, plus an `aria-hidden` `.gev-flap-cells` sibling; the component's `v-flap-text` directive writes it, because Vue would patch a lone `{{ text }}` child by setting `textContent` and swap the node. The ONLY text operation for the life of the chip is `node.data = next`. Nothing is reparented, so the label is never transiently empty and the `aria-live` region never sees a removal/reinsertion pair it could announce twice. `element.textContent` is the settled string at every instant, because the cells carry no text at all: both glyphs are CSS generated content (`::before` from `data-flap-prev` = outgoing, `::after` from `data-flap-next` = incoming), which never reaches `textContent`. This keeps QA pins honest. Whether the label is on screen is read once the change has rendered, after its chip shows or hides with it; the cells go in before the browser paints.
+- **No animation loop, and exactly ONE `setTimeout` per change.** CSS `animation`/`transition` only, triggered once per text change and staggered through a per-cell `--gev-flap-delay`. The single timer is the settle that strips the cells; the width ease ends on a `transitionend`/`transitioncancel` listener, never a second timer. Idle cost is zero, there is no periodic work, and nothing requests a Cesium render or takes a render-governor hold. An unchanged label is not republished, which is required — the chips are recomputed by a 60 ms and a 500 ms ticker.
 - **Only what was visible flaps away.** An interrupted cascade (A→B cut short by C) derives each column's outgoing glyph from `visibleGlyphs()` — what that column is actually SHOWING at that instant, which for a column whose stagger has not elapsed is still A, not the pending B. `FLAP_TURN_RATIO` must track the `gev-flap-out`/`gev-flap-in` keyframe crossover in style.css.
 - **Columns never renumber mid-cascade — do not "optimise" this away.** For the whole cascade the board keeps one column per index of the LONGER string, each holding its own width; a column the new string does not reach flaps to a BLANK in place (`data-flap-next=" "`) rather than collapsing. Collapsing stacks the absolutely-positioned outgoing glyphs on one x AND lets a later glyph slide into an earlier column, which makes `visibleGlyphs()` lie and the interrupt rule flap the wrong glyph away. Pinned by "a cleared column holds its place instead of letting later glyphs slide left".
 - Length changes are eased, never snapped, and the ease is placed so it never fights the flaps (`.gev-flap-sizing`): a GROWING label reserves its columns as the cells go in and eases at the START; a SHRINKING one holds full width for the whole cascade and eases at SETTLEMENT.
@@ -5650,7 +5669,7 @@ apply to `public/` assets or built-preview serving.
 - GEV MIC control is a glass capsule (var(--glass-bg), blur(24px) saturate(1.4), 999px radius; panel radius in error state).
 - The desktop right rail (`#right-context-rail`) owns `DISPLAY`, `CCTV`, its active parameter controls, and `GLOBAL CONTEXT` as one fixed responsive stack in that order. Its compact buttons use the same 176 px width as the left accordion and one consistent 50 px height, share the left stack's 52 px edge inset and measured top baseline across HUD variants, then constrain themselves against visible HUD/chrome rectangles and the remaining vertical corridor. `DISPLAY` is no longer draggable and legacy saved coordinates are ignored.
 - The right rail is labeled **DISPLAY** (formerly "MOVE") and groups, in order, HUD, DETECT, Bloom, Sharpen, 3D, Clean-UI (HUD + DETECT promoted to the top). Its expanded controls retain the same compact 176 px width as the right-side tabs instead of growing to the wider Context detail-card width. It starts expanded on first run and respects the user's later `v6` collapse choice. Collapses/expands with directional chevrons (`◀` collapsed, `▶` expanded).
-- Display and Context use matching 330 px expanded widths and matching compact tab dimensions. The parameter panel is part of Display's expanded content. DISPLAY may remain open beside one contextual panel; CCTV and Context are mutually exclusive. In Tactical HUD, expanding CCTV or Context hides the other contextual launcher while DISPLAY remains independently available. The most recently opened right-rail panel owns the constrained lane even when it appears later in DOM order; passive restoration and automatic disclosure do not replace that explicit owner. Minimal and other HUD layouts retain the collapsed launchers; when their active panel exceeds the measured corridor, the rail reserves sibling heights and gaps and scrolls the active panel internally.
+- Display and Context use matching 330 px expanded widths and matching compact tab dimensions. The parameter panel is part of Display's expanded content. One right-rail panel is open at a time in every HUD layout and collapsed launchers are hidden; the panel rail beside the stack switches between them (see Panel rails). The most recently opened right-rail panel owns the lane even when it appears later in DOM order; passive restoration and automatic disclosure do not replace that explicit owner. When the open panel exceeds the measured corridor, it scrolls internally.
 - At 720px and below both panel stacks (`#left-panel-stack`, `#right-context-rail`) go edge-to-edge and scroll vertically. Every hosted panel's decorative `.panel-glow` is pinned to its panel box there (`inset: 0` in `src/ui/styles/responsive.css`): on desktop the glow overhangs the panel by 18–20 px as harmless paint, but inside a scroll container that overhang is scrollable overflow on both axes and drew a horizontal scrollbar band plus a vertical scrollbar that scrolled nothing but glow whenever CCTV, Context, Data Layers or Authoring was expanded. The glow's blur is ink overflow and never scrolls, so the look is unchanged. Do not fix this by clipping the stacks: `overflow-x: clip` would not remove the vertical scrollbar. Context draws no glow at all (`display: none`), so it is not part of that pin. Pinned by `src/ui/panelRails.test.mjs` against every `(max-width: 720px)` block in the flattened stylesheet.
 - `STYLE PRESETS` and `LOCATIONS` start collapsed, expand on intentional hover/click, and auto-collapse after hover leave delay.
 - Collapsed mini-status indicators show active style and active location/landmark.
@@ -6083,7 +6102,7 @@ After the initial broadside launch profile, the ascent chase camera stays in a r
 During orbit replay, the camera continues following the selected vehicle but eases its look-at target down toward the vehicle's sub-satellite globe anchor. The range expands when necessary for high-altitude missions, keeping both Earth and the tracked label visible through the full revolution. The active replay clock clamps at the final orbital sample rather than wrapping to ascent progress zero; replay completion therefore leaves the final globe/orbit framing in place and does not return to the launch site.
 
 Reconstructed mission orbits use a small downrange launch-to-insertion arc, so their estimated ground track is not artificially drawn directly over the launch pad in top-down views. The ascent remains connected to the ring at its selected insertion point.
-Collapsed right-rail controls use the same 176 px width as collapsed left-rail controls, while expanded right-side detail panels retain their independent widths. DISPLAY starts expanded only on first run and then respects persistence; DISPLAY may remain open beside CCTV or Context, while CCTV and Context remain mutually exclusive without persisting forced collapses. Selecting a dedicated Context mode opens its right-side surface and clears unrelated layers after first snapshotting their exact state. Final exit restores the original enabled set and changed parameters. Cockpit View hides the right-side CCTV control because CCTV is not part of the cockpit rail. Airborne cockpit altitude uses the tracked aircraft's reported aviation MSL altitude, never the potentially negative Cesium terrain/ellipsoid render height; confirmed grounded contacts display `0 ft` without rewriting that source field. A cold photoreal floor shows `ACQUIRING SURFACE` for at most five seconds, then uses the source target-height fallback instead of freezing the camera indefinitely.
+Collapsed right-rail controls use the same 176 px width as collapsed left-rail controls, while expanded right-side detail panels retain their independent widths. DISPLAY starts expanded only on first run and then respects persistence; one right-side panel is open at a time, without persisting the collapses that rule forces. Selecting a dedicated Context mode opens its right-side surface and clears unrelated layers after first snapshotting their exact state. Final exit restores the original enabled set and changed parameters. Cockpit View hides the right-side CCTV control because CCTV is not part of the cockpit rail. Airborne cockpit altitude uses the tracked aircraft's reported aviation MSL altitude, never the potentially negative Cesium terrain/ellipsoid render height; confirmed grounded contacts display `0 ft` without rewriting that source field. A cold photoreal floor shows `ACQUIRING SURFACE` for at most five seconds, then uses the source target-height fallback instead of freezing the camera indefinitely.
 Replay transport uses one Play/Pause toggle plus Cancel. During ascent only the active thrust ring is visible; stage-recovery handoff uses a pulsing dot.
 
 ## Tooling Snapshot
@@ -6449,8 +6468,8 @@ when their footprints touch or contain one another, never across a seam toleranc
 - Scene and CCTV selects share the default `gev-field` surface. HUD layout and
   draw colour retain compact density. Radio filter, tuner gain and FM frequency
   use the same base while retaining their feature-specific skins and layout.
-- The CCTV inline number editor uses `createNumberInput` with its existing
-  precision and inline density. Enter/blur commit, Escape cancellation, frozen
+- The CCTV inline number editor is rendered by its pose chip component with
+  its existing precision and inline density. Enter/blur commit, Escape cancellation, frozen
   camera base, camera-switch guards and disposal remain with CCTV controls.
 - Options, values, native keyboard/typeahead, disabled attributes and browser
   validity remain native. Frequency bounds, tuner commit timing and calibration

docs/I18N.md

@@ -25,17 +25,39 @@ label.textContent = t(FEED_STATE_LABELS[state]);
 
 A module the server, tools or other portable code also imports must not load the catalogs: it imports `msg` from `src/i18n/marker.js`, which only marks the text, and the UI translates it with `t()` where it shows it. (Older modules keep a local `const msg = (text) => text`, which works the same.)
 
+Vue views call the same `t()` and `tn()`. The page's vue-i18n instance (`src/ui/i18n.js`), installed in every view, holds the active locale, and `t()`, `tn()` and the formatters read it from there, so a view that translates while rendering renders again when the locale changes. Views don't use vue-i18n's own `t`: English is the key, `context` picks an entry and plural forms follow `Intl.PluralRules`, which only Core's functions do.
+
 `msg()` exists for two reasons. `npm run i18n` finds messages only as string literals inside `t(…)`, `tn(…)` and `msg(…)`, so `t(FEED_STATE_LABELS[state])` alone tells it nothing. And a `t()` call at module load runs before the page has picked its language, so it would freeze the English.
 
 ## Markup
 
+Vue views translate in the template, so their text renders in the active locale:
+
+```vue
+<span>{{ t('Normal') }}</span>
+<button :title="t('Pin visual presets')">…</button>
+<option value="all">{{ t('All', { context: 'radio tag' }) }}</option>
+```
+
+Static page markup that no view renders (the loading screen in `index.html`, a host's own markup) opts in with attributes instead, and `npm run i18n` rejects them in a Vue template:
+
 ```html
 <span data-i18n>Normal</span>
 <button title="Pin visual presets" data-i18n-title>…</button>
 <input placeholder="Search any location..." data-i18n-placeholder />
 ```
 
-`data-i18n` replaces the element's text, so put it on the element that directly holds the text, never on a parent with child elements. `data-i18n-title`, `data-i18n-aria-label` and `data-i18n-placeholder` translate that attribute. `data-i18n-context="radio tag"` gives the element's text a context, the catalog entry `radio tag|All`, as `t('All', { context: 'radio tag' })` does in code. Markup is translated once at boot, and switching language reloads the page. A module that holds work a reload would lose (an unsaved edit, an open session) registers it with `registerUnsavedWork(() => busy ? msg('unsaved …') : null)` from `src/i18n/index.js`, and the language picker asks before reloading.
+`data-i18n` replaces the element's text, so put it on the element that directly holds the text, never on a parent with child elements. `data-i18n-title`, `data-i18n-aria-label` and `data-i18n-placeholder` translate that attribute. `data-i18n-context="radio tag"` gives the element's text a context, the catalog entry `radio tag|All`, as `t('All', { context: 'radio tag' })` does in code. Markup is translated at boot and again after every language switch.
+
+## Switching language
+
+The language picker switches in place, without a reload. A view that calls `t()` while it renders follows by itself. Code that translates text and hands it on (to a store, a published view object, a layer's state, a DOM node) must word it again when the language changes:
+
+- **Present again.** `onLocaleChange(listener)` from `src/i18n/index.js` calls the listener after each change and returns the function that removes it; call that at teardown. The listener presents the view again from what it keeps, as `layerPanel.js` and `cockpitController.js` do.
+- **Keep the English, translate when presenting.** Store `msg()` text or a function that words it, not its translation: the voice control takes `update(part, { text: () => t('MIC') })`, the scene director's status and the SDR receiver's messages keep such functions, and `imagerySplit.js` takes its titles that way.
+- **Translated constants in a view** go in `computed`, not in a plain `const` set up once.
+
+A toast already on screen keeps its words.
 
 ## Rules
 
@@ -66,16 +88,16 @@ An empty translation is reported, and so is one left as the English, plural form
 
 `npm run i18n` and `npm test` fail on UI text that is not marked:
 
-- **Markup:** element text without `data-i18n`, and `title`, `aria-label` or `placeholder` without the matching `data-i18n-*`.
+- **Markup:** element text without `data-i18n`, and `title`, `aria-label` or `placeholder` without the matching `data-i18n-*`. In a Vue template, static text or a static `title`, `aria-label` or `placeholder` (rather than `t()`), and any `data-i18n*` attribute.
 - **Code:** string literals that reach the page without `t()`, `tn()` or `msg()`: assigned to `textContent`, `title` and the like; passed to `setAttribute('title' | 'aria-label' | …)`, `createTextNode`, `showToast` and other notice helpers; assigned to a layer's `error`, `lastError`, `loadingLabel`, `statusMessage` or `status` (a plain `error = …` too); or kept in `label:`, `title:`, `status:` and similar properties. Not reported: declarations (`let status = …`), default values, ternary branches and lower-case codes (`'auth-failed'`). The full list is `JS_SINKS` in `scripts/i18n.mjs`.
 
 Fix it by marking the text. When the text must stay as it is, say so where it lives:
 
-| Case                                                                        | How                                                                      |
-| --------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
-| Codes, units, product names in markup (`0.9 dB`, `ADS-B · 1090`, `OpenSky`) | `translate="no"` on the element; it covers everything inside, as in HTML |
-| Markup whose text code sets through `t()` (a status that starts as `OFF`)   | `data-i18n-runtime` on the element                                       |
-| A literal in code that is not UI copy (a product name, sample data)         | `// i18n-ignore: <reason>` on the line or the line above                 |
+| Case                                                                           | How                                                                      |
+| ------------------------------------------------------------------------------ | ------------------------------------------------------------------------ |
+| Codes, units, product names in markup (`0.9 dB`, `ADS-B · 1090`, `OpenSky`)    | `translate="no"` on the element; it covers everything inside, as in HTML |
+| Page markup whose text code sets through `t()` (a status that starts as `OFF`) | `data-i18n-runtime` on the element (not in a Vue template)               |
+| A literal in code that is not UI copy (a product name, sample data)            | `// i18n-ignore: <reason>` on the line or the line above                 |
 
 Icons (`aria-hidden="true"`, Material Symbols), comments, CSS values and lowercase identifiers are skipped automatically, and so is `src/tools/`, whose text is written for AI clients rather than the page.
 
@@ -84,6 +106,7 @@ Icons (`aria-hidden="true"`, Material Symbols), comments, CSS values and lowerca
 | File                            | What it holds                                                                  |
 | ------------------------------- | ------------------------------------------------------------------------------ |
 | `src/i18n/index.js`             | `t`, `tn`, `msg`, the Intl formatters, markup translation, switching language  |
+| `src/ui/i18n.js`                | the page's vue-i18n instance: the active locale and the catalogs               |
 | `src/i18n/marker.js`            | `msg` alone, for modules the server or tools import (no catalogs)              |
 | `src/i18n/locale.js`            | shipped languages, their names, choosing the language at boot                  |
 | `src/i18n/locales/<code>.json`  | one catalog per language, keyed by English text                                |

docs/TRANSLATORS.md

@@ -22,7 +22,7 @@ Every other language is one flat JSON file, `src/i18n/locales/<code>.json`, keye
 
 A `tn()` entry is keyed by the English plural form and holds one string per `Intl.PluralRules` category of that language. A missing entry falls back to English.
 
-The page picks its language from `?lang=`, then the choice stored by the language picker (the globe button in the bottom-right corner), then the browser languages, then English. `?lang=` is not stored, and copied share links leave it out. Switching reloads the page.
+The page picks its language from `?lang=`, then the choice stored by the language picker (the globe button in the bottom-right corner), then the browser languages, then English. `?lang=` is not stored, and copied share links leave it out. Switching applies at once, without a reload.
 
 ## The check
 

docs/UI-OWNERSHIP.md

@@ -11,12 +11,18 @@ scene playback and voice. It delegates; new behavior belongs with its owner.
 | `cockpitCoordinator.js` | Cockpit entry/rollback, readouts and the single Display portal |
 | `visualSettings.js` | Effects, detection overrides, visual restoration and render-loop lifetime |
 | `panelChrome.js` | Disclosure, docking, layout and Cockpit panel restoration |
+| `panelNavigation.js` | Desktop panel rails: each side's offered panels and the open one |
 | `aircraftDisplay.js` | Shared commercial/military 3D display preferences and controls |
 | `layerBindings.js` | Data-manager attachment, selected-tracker adoption and camera-entry listeners |
 | `displayBindings.js` | Keyboard/display subscriptions and frame-rate monitor lifetime |
 | `shareRestoration.js` | Initial share/layer restoration and cancellation |
 | `shellFeedback.js` | Loading feedback, notices and toast lifetime |
 
+Owners that present UI do so through Vue: they publish plain view objects to a
+Pinia store in `src/ui/stores/`, views in `src/ui/views/` render them, and user
+actions return through the handlers the owner connects to that store. See
+[Building UI](../CONTRIBUTING.md#building-ui).
+
 Owners receive named services, elements, operations and readers. They do not
 receive the application shell itself. Readers resolve a replaceable collaborator
 at use time; operations cross an ownership boundary without copying its state.

docs/VUE-MIGRATION.md

@@ -0,0 +1,368 @@
+# Vue migration
+
+The application UI moves from static templates plus imperative DOM wiring to
+Vue 3 components with Pinia stores. The migration keeps the experience the
+same: element ids, classes, the global stylesheet, translations, keyboard
+shortcuts, voice actions, share links and the phone layout all behave as
+before. The one intended change is the panel rail described below.
+
+## Goals
+
+- Views are Vue single-file components; state that several views read lives in
+  Pinia stores rather than in DOM classes.
+- The owners listed in [UI-OWNERSHIP.md](UI-OWNERSHIP.md) keep their
+  responsibilities. A component replaces DOM construction; it does not add a
+  second owner of the same state.
+- Public methods used by layers, scene playback, voice and host applications
+  (`setPanelCollapsed`, `setContextMode`, `setStyle`, share and location
+  subscriptions) keep their signatures.
+- Ids and classes used by browser QA and host applications stay stable until a
+  host can use an explicit extension point instead.
+
+## The panel rail
+
+Each desktop sidebar gets a floating icon rail that lists every panel available
+on that side. Selecting an icon opens that panel; selecting it again closes it.
+One panel is open per side at a time, so the rail replaces the accordion
+stacking. Panels that are not available in the current mode (for example
+Weather before a weather layer is active) are shown disabled or omitted as the
+panel's own availability rule dictates. The rail hides with the rest of the
+chrome in Cockpit, scene playback, recording and the clean view.
+
+Phones keep the existing bottom tab bar and sheets; the rail is desktop only.
+
+Voice and keyboard openings go through the same panel store, so they follow the
+one-panel rule too. Share links continue to record which panels are open.
+
+## Component kit
+
+`src/ui/kit/` holds the generic components: `UiRail`, `UiTooltip`, `UiIcon`,
+`UiButton`, `UiPanel`, `UiSegmented`, `UiSlider`, `UiChip`, `UiSelect`,
+`UiBadge` and `UiEmpty` so far, with more joining as the controls they serve
+are converted. One component
+serves every use of a control, with props for the differences (`UiPanel`'s
+`sideways`, `glow`, `scroll`), rather than a copy per panel. The components
+are styled by the existing stylesheet and custom properties; a kit class such as
+`ui-button--icon` carries no Core style yet, and a converted control keeps
+its own classes beside it. They contain no application state.
+`UiPanel` takes a `title`, slots and `v-model:collapsed`, but its
+`collapsed` drives only the button and `ui-panel--collapsed`: the root's
+`collapsed` class, which hides the body, is drawn at once by `v-panel-state`
+from the panel chrome store, and there is no `closable`, since Core's panels collapse rather than close.
+`UiSegmented` adds `keyboard` (`none`, `arrows`, or `radio` with
+Home and End), since each of Core's groups keeps its own keyboard policy, and
+`itemClass`/`activeClass` for Core's segment classes. A key moves focus at
+once and asks for a change only when it lands on another option. Every
+segmented group in Core is a `UiSegmented`; the old `segmentedControl.js`
+adapter is gone.
+`UiButton` adds `pressedClass`, Core's class on a pressed toggle (most use
+`active`); its pressed classes toggle through `classList`, so a class other
+code adds (a voice highlight) survives a press. Every pressed toggle in the
+views is a `UiButton` except Bhote Koshi's cinematic button and the
+tilt-map button, whose owners still write their state into the DOM. Core's
+pressable chips and pills (rail card chips, map sources, cities and places)
+are `UiButton`s too; `UiChip` is a non-interactive label chip, used by
+the voice card.
+`UiSelect` renders the bare native select (Core's labels sit outside it or
+come as an `aria-label`) with `v-model`, `options` and `disabled`;
+options that carry their own attributes come through the slot, a caller's
+`@change` still reaches the select, and `hold` works as in `UiSlider`.
+Without `hold`, a select takes its model back after its own change renders,
+so a pick its owner refuses goes back; an owner that answers later (the SDR
+gain) takes `hold`. Every select in the views is a `UiSelect`.
+`UiBadge` takes a `tone` and carries Core's `gev-status-badge`; its
+density variants and colours stay caller classes, and it renders the CCTV
+source and calibration badges and the rail card badges. `UiEmpty` takes
+a `title` and `hint`, but Core's empty states are one line, so the title
+is the text itself rather than a bold heading; the Scene shot list, mission
+roster and imagery strip use it. The locale picker's and the mission tables'
+empty rows stay a paragraph and table cells.
+`UiSlider` keeps the native range input rather than drawing a
+`role="slider"` track, so Core's keyboard, form behaviour and styling stay;
+it takes `v-model`, `min`, `max`, `step` and `disabled`, emits a
+number, and adds `hold` (never rewrite a focused handle, and take the model
+back on blur) and `unstyled` (the browser's own range, as Bhote Koshi's
+are, without Core's slider surface). A caller's own input, change and blur
+handlers still reach the input, and a null model leaves it as it is. It is
+a functional render-function component, so the portable `./ui/input` rows
+use it without a component compiler. Every range in the views is a
+`UiSlider` except the radio tuner's: its owner moves the handle back to the
+selected station on a drag's first input without changing the slot, which
+a functional component would not render again.
+
+Controls share one skin, so every panel reads the same. Every scrolling
+surface carries the kit's `.ui-scroll`, which draws the thin
+themed scrollbar from `--scroll-thumb` and `--scroll-track`; the Cyber theme
+sets those two tokens, and Cockpit's HUD windows keep their accent tint. A
+surface without it would draw the platform's light scrollbar, because the
+page declares no dark `color-scheme`. Selects and number fields are
+`.gev-field`, which draws its own chevron in place of the platform's arrow
+and keeps native spinners dark; ranges are `.gev-quantitative-slider`, with
+a feature supplying only its accent.
+
+## Phases
+
+1. **Foundation.** Vue, Pinia and the Vite Vue plugin join the browser build
+   (`build/vite.js`, so host applications receive them too). One Vue runtime is
+   created by the shell (`src/ui/vueRuntime.js`) with one Pinia instance that
+   every view shares; disposing the shell unmounts them. Stores are added
+   when a view needs one, mirroring state an owner already publishes, so
+   there is never a second owner of the same state.
+2. **Rail.** `PanelChrome` enforces one panel per side; the panel store
+   mirrors each side's panels and the rail renders from it. The rail panels
+   are `RailPanel`s: the kit's `UiPanel` drawing Core's panel markup, bound to the `gev-panel-chrome`
+   store, with their titles rendered by `t()` rather than `data-i18n`. Each panel's
+   collapse button, the dock tray toggles and the
+   dock pins render the open and pinned state PanelChrome presents to the
+   `gev-panel-chrome` store, and their clicks call it there. Each panel's
+   root draws its own state from there too (`v-panel-state`: `collapsed`,
+   `dock-pinned`, `dock-pinned-top`, `layout-auto-collapsed`,
+   `accordion-collapsed`): PanelChrome, the rails and the accordion present
+   it rather than writing classes. The directive applies it in a synchronous
+   watcher, not on Vue's next render, because the rails measure a panel in
+   the same task that opens or closes it. PanelChrome and its preference
+   restore, and the phone shell, read a panel's state back from the store
+   (`_shownPanel`; the markup's classes before its first presentation), so
+   once a panel is presented a class written outside the store no longer
+   counts. The rails, the accordion and the hover disclosure
+   (`panelDisclosure.js`), which act within the same task as a layout, read
+   the classes the directive has just drawn. Done.
+3. **Panels.** Each template and its wiring become a component, keeping ids,
+   classes and CSS; text a template renders with `t()` drops its `data-i18n`
+   marker. The page places each view with a
+   `.gev-view` host (`display: contents`), and `mountApplicationViews()`
+   (`src/ui/views/index.js`) renders the view into it before the page is
+   translated and wired. `createApplication()` calls it too, removing the
+   hosts of any views its `omitViews` names. Views belong to the page and are
+   unmounted only when a later call omits them. The loading screen is static markup in the page so it
+   paints before any script runs. Markup
+   tests read `renderApplicationHtml()` from `src/testSupport`, which renders
+   the views on the server. Templates compile with Vue's `preserve`
+   whitespace, which keeps the whitespace between elements as a single
+   space, so a view renders as its template did; no view markup sits under a
+   `white-space: pre` rule. Application views (`src/ui/views/*View.vue`) are
+   kept out of Prettier; other components are formatted with strict
+   whitespace sensitivity, so their source spacing is what renders. The
+   markup has moved, unchanged:
+   every template except the loading screen is a view.
+
+   Next each view takes over its wiring: markup an owner builds with
+   `createElement` becomes component markup that renders from a Pinia store
+   the owner publishes to, and user actions come back to the owner through
+   the store, so the owner keeps every decision. Component text uses
+   `t()`, which follows the locale as the view renders; the views carry no
+   `data-i18n*` markers, which `npm run i18n` rejects in a template. Shared builders become components first and
+   keep their imperative entry points until their owners are components:
+   the rail cards, card blocks and timeline (`src/ui/rail/`) render through
+   Vue's synchronous `render()` behind `createRailCards()`,
+   `createRailCardBlocks()` and `createRailTimeline()`. Order: Scenes (done: `SceneOptions` and
+   `SceneShotList` over the `gev-scenes` store; the panel's buttons, status
+   line, progress bar and the runtime chip render the panel SceneControls
+   presents there, and the buttons and file chooser call its actions), Weather (done: the owner
+   renders `WeatherReadout` from the view it computes), Recent imagery
+   (done: `RecentImageryReadout` and its day cards, the same way),
+   Street level (done: `StreetLevelPanel` renders the `gev-street-level`
+   store that `StreetLevelControls` publishes to; the controls keep their
+   listeners, EXPAND, focus and resizing), CCTV (done: `CctvPanel` renders
+   the whole panel from the `gev-cctv` store, including the camera picker,
+   the inline pose editor, the frame preview, source badge and typed
+   summary; `CctvControls` keeps its listeners, the frame requests and the
+   live video surface), Layers (done: `LayerPanel` presents each row and
+   renders `LayerRows` synchronously; keyed chips and list items keep focus
+   through the refresh their own click triggers, and clicks re-read the live
+   descriptor before acting), Display (in progress: `DisplayPanel` renders
+   the HUD, Sonar, Scope, Celestial, detection, bloom, sharpen and the
+   active style's parameter sliders from the `gev-display` store, which
+   VisualSettings publishes to and answers the sliders through, and the 3D
+   aircraft group, the Draw controls and the imported file list, which
+   AircraftDisplay, the draw tool and the file import publish beside it;
+   the controls call DisplayBindings, the draw tool and the file import
+   through the store's `connect`/`act`, the newest owner of an action
+   answering it; `GeoImport` hands keyboard focus on before a focused row
+   goes, with `v-focus-safe-children`; the
+   style parameter rows render through Vue behind `createStyleParameters()`,
+   as a render function so the portable `./ui/input` entry needs no
+   component compiler; the other groups follow one owner at a time),
+   Context and Radio (in progress: `RadioPanel` renders the directory row,
+   station card, transport, volume and playback line from the `gev-radio`
+   store that RadioControls publishes to and whose controls it answers
+   through the store's `connect`/`act` (the shared `createOwners()`; a
+   refused station tag gets the kept tag back from `act`), and `SdrCard` the
+   local RTL-SDR card that LocalSdrControls publishes beside it and answers
+   the same way; fields a person edits take their value through
+   `v-field-value`, which never writes a focused field;
+   `RadioTuner` renders the directory tuner, where RadioControls keeps the
+   drag and its slot, takes the slider's pointer, key and value events
+   through the store and publishes the band, readouts, slider and needle,
+   and the component lays out the tick tape against the dial's measured
+   width and lays out the snapped needle before it drops the drag class;
+   `ContextView` renders the mode switch and the nearby sites
+   search from the `gev-context` store, which ContextControls reaches only
+   through its `publish` option, so `./ui/context` needs no Vue;
+   `AwarenessPanel` renders the Contacts panel that the awareness layer
+   publishes through `subscribePanel()`, the first layer to hand its rail
+   content to a view, and `MissionRoster` and `MissionDetail` the Space
+   Missions roster and selected mission that the launches layer publishes
+   the same way), the command dock (in progress: the style buttons, the
+   dock's style mini status and the ACTIVE STYLE corner render the style
+   VisualSettings publishes to the `gev-display` store; the buttons keep
+   their owner's listeners; the map source chips and status badge render
+   what `createMapSourceControls()` publishes beside it, so `./ui/maps`
+   needs no Vue; the location tray's city and landmark pills, mini status
+   and search error render what `LocationControls` publishes to the
+   `gev-location` store, and the search field keeps its listeners; beside
+   the voice control, the dock teleports each voice pointer reticle to the
+   body where its `PointerReticle` presents it in the `gev-pointer-reticle`
+   store), the phone shell (`PhoneTabBar` renders the tabs and open sheet the shell
+   publishes to the `gev-display` store, teleporting the tab bar and sheet
+   backdrop to the end of the page from the first publish until the shell
+   is destroyed; the shell takes their clicks from the document), the
+   imagery dividers (`ImagerySplitView`, in the scene chrome, teleports each
+   before/after divider that `createImagerySplit` publishes to the
+   `gev-imagery-split` store to the body; the split keeps the
+   drag, keyboard, CSS position and scene split), the status chips
+   (the top-center loading status and the road network and camera grid
+   chips render what ShellFeedback and CctvControls publish to the
+   `gev-status` store; `SplitFlapText` plays the departure-board flip that
+   `splitFlap.js` plans, writing only the label's one text node; the toast
+   renders what each owner's `createToast()` publishes there, on that
+   owner's own timer, and the title bar's FPS readout what
+   `createFrameRateMonitor()` publishes), the globe actions
+   (`GlobeActions` renders the top-center bar; its clear, share, tilt,
+   north-up and reset buttons, and the cockpit's reset, call the shell
+   through the `gev-globe-actions` store, which also carries a clear or a
+   reset under way and the camera's tilt and heading
+   that `bindCameraOrientationControls` publishes each drawn frame it
+   changes, which only `GlobeCompass` renders; an owner publishes only
+   while it answers the button, so a shell replaced by a newer one leaves
+   its state alone), the recording safe frame (the scene chrome renders
+   the frame `RecordingControls` publishes to the `gev-recording` store),
+   the Scene actions panel (`SceneInteractions`
+   teleports what the scene interactions owner publishes to the
+   `gev-scene-interactions` store into the viewer's container; the owner
+   keeps the pick handler and focuses the picked action), the data-pack
+   attribution cards (`DataPacks` teleports what the data-pack presentations
+   publish to the `gev-data-packs` store into the viewer's container and
+   stops a removed card's player), the wind inspection marker
+   (`WindInspectionMarker` teleports the marker into the wind layer's
+   container where `createWindInspectionMarker()`, now in
+   `src/layers/wind/inspectionMarker.js` so the portable `./tools` entry
+   needs no Vue, places it after each rendered frame; an unchanged frame
+   publishes nothing), the Space Missions replay vehicle
+   (`MissionReplayOverlay` teleports into the globe container what the
+   launches layer presents through `subscribeReplayOverlay()`, which the
+   application shell publishes to the `gev-mission-replay` store, so the
+   portable `./layers/launches` entry needs no Vue), the Bhote Koshi
+   reconstruction panel (`BhoteKoshiPanel`, last in the context rail,
+   renders what the event layer publishes to the `gev-bhote-koshi-panel`
+   store: each control's text, hidden, disabled, value and attributes as
+   the layer writes them, unchanged frames sending nothing; the rail takes
+   `bhote-event-active` while it shows), the full-globe celestial ring
+   (`CelestialRing` teleports into the globe container what `CelestialRing`
+   in `src/celestialRing.js` publishes to the `gev-celestial-ring` store and
+   hands its two canvases back for the owner to paint; the application shell
+   passes the store in, so the keyhole helpers other packages import need no
+   Vue), the screen-space map annotations (`ScreenAnnotations` teleports to
+   the body the board the screen annotation renderer publishes to the
+   `gev-screen-annotations` store after each rendered frame: each mark's SVG
+   parts as attribute records, the fading marks until they leave; the view
+   hands back the callout text and mark groups the renderer measures, and
+   the tracked-entity fade is measured once the frame is in the document;
+   the styles it injected now live in `src/ui/styles/annotations.css`), the
+   visible map target list (the scene chrome renders the buttons and status
+   the world overlay presents through `subscribeWorldOverlayActions()`, which
+   the application shell publishes to the `gev-world-overlay-actions` store
+   and answers with `activateWorldOverlayAction()`; the module needs no Vue
+   for the portable transit entry, and its card and detection canvases stay
+   painting surfaces it draws on, like the Cesium canvas), the Global
+   Context compass and contact bearings (`AwarenessDirection` teleports into
+   the globe container what the awareness layer presents through
+   `subscribeDirectionOverlay()`, which the application shell publishes to
+   the `gev-awareness-direction` store, so the portable `./layers/awareness`
+   entry needs no Vue), the Intel HUD (the `intel-hud` view renders
+   `#intel-hud`, its corners, edges and bottom bar from the `gev-hud`
+   store, which IntelHUD publishes to through its `publish` option: the
+   readouts, the typing summary, the REC blink, visibility, layout variant
+   and style colors; the vessel layer presents the selected vessel's
+   readout through `src/hudReadouts.js` instead of writing into the HUD),
+   the first-run mission launcher (the welcome view renders the card's
+   visibility, busy state, status line, copy and scroll fade from the
+   `gev-first-run` store that `initFirstRunExperience` publishes to, and its
+   choices, DISMISS and "Don't show this again" call the launcher's
+   controls; a refused save hands the tick back to the view to revert. The
+   launcher still reads the rendered card for its hit test, keyboard trap,
+   focus and overflow measurement), then
+   Cockpit (in progress: `CockpitBriefing` renders the briefing card's
+   pages, cycle toggle, regional news and local conditions, and
+   `CockpitContext` the Contact card's scope, navigation, counts, nearest
+   contact and weather toggle, `CockpitView` the instruments, destination
+   arrow and vision selector, and `CockpitRoute` the flight plan card, from
+   the `gev-cockpit` store that the Cockpit controller publishes to,
+   starting from `cockpitBriefPages.js`, `cockpitContextState.js` and
+   `cockpitInstrumentState.js`, which both read; the odometer readouts
+   (`CockpitRollingValue`) keep their throttle and roll in
+   `cockpitRollingValue.js`. `CockpitSignalList` renders the live signal
+   rows; `v-focus-safe-children` turns Vue's move of the focused row into
+   moves of the rows around it, and hands focus to the shown briefing tab
+   before the focused row is removed, so a keyed list reorders several times
+   a second without dropping keyboard focus. The instruments publish on
+   every HUD update (about 10 Hz); in a dev build their Vue patch costs
+   about 0.5 ms, close to the DOM writes it replaced. The controller also
+   publishes which surfaces are shown: the entry button and TR-3B chip in
+   the Context panel, the HUD with its exit and reset buttons and briefing
+   card, and the Contact card. Focus moves to the exit button, and back to
+   the entry, only after Vue renders them. The cards' collapse is part of
+   that presence too: each card's `data-collapsed` and its toggle's words
+   and icon render from it. The controls keep the controller's listeners,
+   and the cards' layout stays with the controller, which reads their
+   visibility when it lays them out. Its layout pass publishes the utility
+   strip's measured fit (the HUD's anchor and height limits, whether only the
+   expanded control fits and which control is hidden from assistive
+   technology), which `CockpitView` and `CockpitUtilityControls` render; the
+   briefing and Contact cards' positions stay imperative, because the same
+   pass measures them straight after writing them.
+   `CockpitUtilityControls` renders the Display
+   and Radio launchers, which popover is open and the compact Radio
+   controls from the `gev-radio` store that RadioControls publishes to and
+   answers through. The Cockpit display portal publishes the Display
+   popover's slots to the `gev-display` store while Cockpit is on, and
+   `DisplayPanel` teleports its HUD, Detection, Parameters and 3D groups into
+   them and back; the portal keeps each surface's scroll position and puts
+   back focus the move dropped).
+   Layers that write into the right rail directly gain a slot instead.
+
+4. **Cleanup.** The build-time template expansion is retired: `index.html`
+   lists the view hosts and the loading screen itself. Every owner that
+   showed UI state through hand-written DOM writes now publishes to a store
+   that a view renders, apart from the imperative parts this document
+   records surface by surface; [Building UI](../CONTRIBUTING.md#building-ui)
+   now requires the pattern for new UI. The page-level markup tests read
+   `renderApplicationHtml()`, the real views rendered on the server, and new
+   tests mount components; three tests still read a `.vue` file's source
+   (`cyberTheme`, `panelStorageDocs`, `geoFileImport`). The views translate with `t()`
+   while rendering, and vue-i18n holds the locale they read; the attribute
+   translation pass is left for static page markup (the loading screen and a
+   host's own markup). An explicit API for hosts to register panels and rail items is
+   deferred until a host adds one: no host does today (the hosted
+   application's account interface is its own markup), and the first such
+   panel, the hosted timeline, will shape it.
+
+## Verification
+
+- Unit tests: stores and components run under `npm test`. Single-file
+  components are compiled by a test loader; component tests render with
+  `@vue/test-utils` and `happy-dom`. `npm test` registers the loader; to run
+  one file that reaches a component (including anything importing the
+  shell), use `node --import=./build/registerVue.js --test <file>`.
+- Never pass happy-dom nodes to `assert.equal` or `deepEqual`: a failure
+  prints both operands, and a node reaches the whole page and window, which
+  runs the process out of memory. Compare nodes with `assertSameNode()`
+  (`src/testSupport/domAssert.mjs`).
+- Panels lifted out of a view keep its verbatim markup in
+  `src/ui/views/panels/`, which Prettier leaves alone like the views.
+- Visual parity: before/after screenshots of every panel at desktop and phone
+  widths, in the default and Cyber themes, with the rail as the only expected
+  difference.
+- Browser QA: the selector-based `scripts/qa-*.mjs` suites keep passing.
+- `npm run format:check`, `npm run check:boundaries`, `npm run i18n` and
+  `npm run build`.

docs/panel-surfaces.md

@@ -12,7 +12,7 @@ A rail panel uses an outer owner with its existing stable `id`, matching
 `data-panel-id`, and `panel-collapsible` class. Its first non-glow child is the
 surface. Keep the header and any outward popup outside the scrolling body:
 
-```html
+```vue
 <section
   id="example-panel"
   data-panel-id="example-panel"
@@ -21,14 +21,11 @@ surface. Keep the header and any outward popup outside the scrolling body:
   <div data-panel-surface>
     <header data-panel-header>
       <h2 class="panel-title panel-surface-title">Example</h2>
-      <button
-        class="panel-collapse-btn panel-surface-control"
-        data-collapse-target="example-panel"
-        aria-expanded="true"
-        aria-label="Collapse Example"
-      >
-        −
-      </button>
+      <PanelCollapseButton
+        class="panel-surface-control"
+        target="example-panel"
+        :name="t('Example')"
+      />
     </header>
     <div data-panel-body data-rail-scroller>
       <label>Filter <input class="panel-surface-control" type="text" /></label>
@@ -92,15 +89,27 @@ Do not copy the rail example's `.panel-collapse-btn` class into the dock:
 existing dock rules intentionally hide that class. The generic surface skin
 does not replace the dock's disclosure policy.
 
-The existing `PanelChrome` binds `.panel-collapse-btn[data-collapse-target]`
-at initialization and routes state through `setPanelCollapsed`. For additions
+A panel with Core's standard header (glow, title, badges, divider, actions
+and collapse button) is a `RailPanel` (`src/ui/rail/`): the kit's `UiPanel`
+bound to the `gev-panel-chrome` store, with its state classes drawn by
+`v-panel-state` and its button's click asking `PanelChrome` to toggle it.
+A panel with its own header uses `PanelCollapseButton`, which renders the
+collapse button (`.panel-collapse-btn`) from the open state `PanelChrome`
+presents to that store; until then, both show their `startCollapsed` state,
+which should match the markup's `collapsed` class.
+Either way, the click reaches `PanelChrome`'s `setPanelCollapsed`. `PanelChrome` collects the buttons'
+targets at initialization and binds each panel's Escape. For additions
 present at startup, keep those hooks and the existing chrome lifecycle. A
-dynamically mounted panel must bind and dispose its own disclosure using
-`bindPanelDisclosure` / `collapsePanelOnEscape` from `panelDisclosure.js`, with
-the application owning state changes. Do not rerun the whole application chrome
+dynamically mounted panel must own its disclosure: its own state, button and
+Escape, bound and disposed with `bindPanelDisclosure` /
+`collapsePanelOnEscape` from `panelDisclosure.js` (which bind Escape only). Do not rerun the whole application chrome
 initializer just to add one panel. `layoutLeftPanelRail` and
 `layoutRightPanelRail` accept arbitrary direct `data-panel-id` children; their
-host owns layout scheduling, observations and collapse callbacks. Dynamic
+host owns layout scheduling, observations and collapse callbacks. A rail
+never writes a panel's classes: it calls `onCollapse(panel, {collapsed,
+auto})`, and the host draws that state (the application presents it to the
+panel chrome store, which each root's `v-panel-state` draws at once, so the
+rail can measure the panel in the same task). Dynamic
 content that changes size may require an owner-scheduled layout pass or an
 owned `ResizeObserver`; adding CSS attributes does not register new observers.
 

index.html

@@ -26,26 +26,28 @@
        with the sources: src/materialSymbolsSubset.test.mjs fails when a source
        names a glyph this list is missing, because a missing glyph does not draw
        a box — the ligature never forms and the element renders the literal word. -->
-  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0,0&icon_names=adjust,arrow_drop_down,arrow_forward,arrow_left,arrow_right,bolt,chevron_left,chevron_right,close,close_fullscreen,dark_mode,draw,east,flare,flight,layers,layers_clear,light_mode,local_fire_department,more_horiz,my_location,navigation,normal,on,open_in_full,public,radar,radio,right_panel_close,right_panel_open,rocket_launch,search,settings,skip_next,skip_previous,upload_file,videocam,view_in_ar,visibility,visibility_off" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0,0&icon_names=adjust,arrow_drop_down,arrow_forward,arrow_left,arrow_right,bolt,chevron_left,chevron_right,close,close_fullscreen,dark_mode,draw,east,flare,flight,layers,layers_clear,light_mode,local_fire_department,more_horiz,movie,my_location,navigation,normal,on,open_in_full,partly_cloudy_day,public,radar,radio,right_panel_close,right_panel_open,rocket_launch,satellite_alt,search,settings,skip_next,skip_previous,streetview,tune,upload_file,videocam,view_in_ar,visibility,visibility_off" rel="stylesheet" />
 </head>
 <body>
-  <!-- gev:template scene-chrome -->
+  <div class="gev-view" data-gev-view="scene-chrome"></div>
+  <div class="gev-view" data-gev-view="cockpit"></div>
+  <div class="gev-view" data-gev-view="display-controls"></div>
+  <div class="gev-view" data-gev-view="command-dock"></div>
+  <div class="gev-view" data-gev-view="layer-panels"></div>
+  <div class="gev-view" data-gev-view="context"></div>
+  <div class="gev-view" data-gev-view="welcome"></div>
+  <div class="gev-view" data-gev-view="provider-settings"></div>
+  <!-- Intelligence HUD Overlay -->
+  <div class="gev-view" data-gev-view="intel-hud"></div>
 
-  <!-- gev:template cockpit -->
-
-  <!-- gev:template display-controls -->
-
-  <!-- gev:template command-dock -->
-
-  <!-- gev:template layer-panels -->
-
-  <!-- gev:template context -->
-
-  <!-- gev:template welcome -->
-
-  <!-- gev:template provider-settings -->
-
-  <!-- gev:template hud-loading -->
+  <!-- Loading screen -->
+  <div id="loading-screen">
+    <div class="loader-content">
+      <span class="loader-logo brand-logo" data-logo-gaze data-logo-src="/logo.svg" aria-hidden="true"><img src="/logo.svg" alt="" /></span>
+      <h2 translate="no">GOD'S EYE <span class="title-accent">VIEW</span></h2>
+      <p class="loader-status" data-i18n>Initializing photorealistic world...</p>
+    </div>
+  </div>
 
   <script type="module" src="/src/main.js"></script>
 </body>

package-lock.json

@@ -19,9 +19,16 @@
         "mapillary-js": "^4.1.2",
         "mgrs": "^2.1.0",
         "pbf": "^5.1.2",
-        "satellite.js": "^6.0.2"
+        "pinia": "^2.3.1",
+        "satellite.js": "^6.0.2",
+        "vue": "^3.5.44",
+        "vue-i18n": "^11.4.15"
       },
       "devDependencies": {
+        "@happy-dom/global-registrator": "^20.14.6",
+        "@vitejs/plugin-vue": "^5.2.4",
+        "@vue/test-utils": "^2.5.1",
+        "happy-dom": "^20.14.6",
         "prettier": "3.9.6",
         "puppeteer": "^25.16.0",
         "sharp": "^0.35.4",
@@ -33,6 +40,52 @@
         "node": ">=24.14.0 <25 || >=26 <27"
       }
     },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.29.11",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.11.tgz",
+      "integrity": "sha512-snZbO7MEDOof+hvNa97EjEY7qD7h2kwvQr5AJC3ZhQudKW5dnej6k3kP9NQV88hJwaS8vDqRLFo9rivLEhle2g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.12",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.12.tgz",
+      "integrity": "sha512-WJ7JBp/Q4+z/ImydtI7jS6NVco5++632ExBemSX+Ysb+G1lCwQ5BVo3SY+jGGOcZXI4ZccbZSUSJLNBW6eEpJg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.11"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.11",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.11.tgz",
+      "integrity": "sha512-WCsemW40Cpc6gouC1SrY6PBaZ+oLRlEVY9XBvZBI7il/HyUrb2nJ505wE1MHEFyDZNnrWDEuy4jL50WVHfTTSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.29.11",
+        "@babel/helper-validator-identifier": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@cesium/engine": {
       "version": "22.3.0",
       "resolved": "https://registry.npmjs.org/@cesium/engine/-/engine-22.3.0.tgz",
@@ -537,6 +590,20 @@
         "node": ">=18"
       }
     },
+    "node_modules/@happy-dom/global-registrator": {
+      "version": "20.14.6",
+      "resolved": "https://registry.npmjs.org/@happy-dom/global-registrator/-/global-registrator-20.14.6.tgz",
+      "integrity": "sha512-Xd2FwCdm0cAZ+EG0upp69tpxBT9jtvVxaZv1lnbgWsNaZyEuPs0PojYgvCmtQ1RRdRCYCyWTeLjn3Z0aSxDchA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": ">=20.0.0",
+        "happy-dom": "^20.14.6"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/@img/colour": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
@@ -1064,6 +1131,73 @@
         "url": "https://opencollective.com/libvips"
       }
     },
+    "node_modules/@intlify/core-base": {
+      "version": "11.4.15",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-11.4.15.tgz",
+      "integrity": "sha512-yHNg7+M6VKQuj+KUO/CrtcBMm3iAspvfFe1H/eKI0TP0pn2T2srBF1gEb/TL3c8RA/BZZGOIySwtZD0i+9/hhw==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/devtools-types": "11.4.15",
+        "@intlify/message-compiler": "11.4.15",
+        "@intlify/shared": "11.4.15"
+      },
+      "engines": {
+        "node": ">= 22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/devtools-types": {
+      "version": "11.4.15",
+      "resolved": "https://registry.npmjs.org/@intlify/devtools-types/-/devtools-types-11.4.15.tgz",
+      "integrity": "sha512-NFV9LsP720IkR6BHNfUYBSkd/abocWimcOWAS63D3spwczy8zDvXCf9WMyhCVQ7FcYkWyECZke18x8D6UNVBFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/core-base": "11.4.15",
+        "@intlify/shared": "11.4.15"
+      },
+      "engines": {
+        "node": ">= 22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "11.4.15",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-11.4.15.tgz",
+      "integrity": "sha512-dV6apms3MXAG3jZ/6bAq+IW2IKDGasmjA/Aoi0JVKCStVi6GbzrPruCVbU/Djn1n41w5EiM3KdnpTuo6I1qe5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/shared": "11.4.15",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "11.4.15",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-11.4.15.tgz",
+      "integrity": "sha512-jlTJkM4bMdr267e1iUE2RMNz1LyoYU6IPReKjnQM6RvipEBUVwmMHbeUckDcOmR+WeungEGjaNmSQJdQzJcOfQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.6.0.tgz",
+      "integrity": "sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==",
+      "license": "MIT"
+    },
     "node_modules/@jtarrio/signals": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@jtarrio/signals/-/signals-0.10.1.tgz",
@@ -1115,6 +1249,13 @@
         "node": ">=24.0.0"
       }
     },
+    "node_modules/@one-ini/wasm": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@one-ini/wasm/-/wasm-0.2.1.tgz",
+      "integrity": "sha512-TUqERXGNTifZ9y2g3wPxQrw3HpHv/02DsW3D90T9x0hhonrL1ZqpSmNrU2XkoIq0fP1N6gZfVQzy2Fw1ZvGBNg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@puppeteer/browsers": {
       "version": "3.2.6",
       "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-3.2.6.tgz",
@@ -1556,6 +1697,16 @@
       "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
       "license": "MIT"
     },
+    "node_modules/@types/node": {
+      "version": "26.6.6",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-26.6.6.tgz",
+      "integrity": "sha512-MzQj+8Kx3XI40OmUAE6Qoh58ZMNstNNMwn2nfd3qWsfe7nDNSqJNzes4njhz6AHwrSHOffSLwXU6yb474Q4aog==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~8.9.0"
+      }
+    },
     "node_modules/@types/pako": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/@types/pako/-/pako-1.0.7.tgz",
@@ -1605,6 +1756,171 @@
       "integrity": "sha512-Qu3Nn6JFuF4+sHKYl+IcX9vYiI40ogleXzFFSxoE1W94rG98o/kXs8uJ0QSfFzuwBCZWlGfUGpPkgwuuX4PchA==",
       "license": "MIT"
     },
+    "node_modules/@types/whatwg-mimetype": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/whatwg-mimetype/-/whatwg-mimetype-3.0.2.tgz",
+      "integrity": "sha512-c2AKvDT8ToxLIOUlN51gTiHXflsfIFisS4pO7pDPoKouJCESkhZnEy623gwP9laCy5lnLDAw1vAzu2vM2YLOrA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/ws": {
+      "version": "8.18.2",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.2.tgz",
+      "integrity": "sha512-67MQl+fpWKVTT1NYdnmo3U4sc/xPo/zQBncVnI74qmQa0z/b+1g6iYqNmGCPbxO+zz2aklb08a0oHfegiVd0/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@vitejs/plugin-vue": {
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz",
+      "integrity": "sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0 || ^6.0.0",
+        "vue": "^3.2.25"
+      }
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.5.44",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.44.tgz",
+      "integrity": "sha512-k34nCytbK8PQ1gR2mGROYOw6Pnv/mumqIdrZ3x2tbyXZDWm7ViKGLTfdB+DRrWqEQsLgGJvn0WN9jBif5zCTLQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.9",
+        "@vue/shared": "3.5.44",
+        "entities": "^7.0.1",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.2"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.5.44",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.44.tgz",
+      "integrity": "sha512-W5AoBFWdw1lQAKiHowkfgFKFab82oSRT6sGsPfw/q1GRjsy/ZJFLHGhJyBRIFN9APLTUduDH9U2JAiPOIyKuYg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-core": "3.5.44",
+        "@vue/shared": "3.5.44"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.5.44",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.44.tgz",
+      "integrity": "sha512-dzHmQ4jXTpdr5FjIQUeykVakN/uzqFbUo9/C5ikBFg3a3PeM6uRxeczx1ZbXBML0/zJstEh3ygYipzR5Z7b2Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.9",
+        "@vue/compiler-core": "3.5.44",
+        "@vue/compiler-dom": "3.5.44",
+        "@vue/compiler-ssr": "3.5.44",
+        "@vue/shared": "3.5.44",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.21",
+        "postcss": "^8.5.29",
+        "source-map-js": "^1.2.2"
+      }
+    },
+    "node_modules/@vue/compiler-sfc/node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.5.44",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.44.tgz",
+      "integrity": "sha512-xr5gb1JVHlfXJwSlRz1FeP6uxoazdzHuMTVLE7up+4Vrqxk219CvxLPxD9NXBt47yvZW7+p4DXfyp4O1fkByIA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.44",
+        "@vue/shared": "3.5.44"
+      }
+    },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.5.44",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.44.tgz",
+      "integrity": "sha512-u+QJdKeBBEADkPdevsL+6E12QlYVfBD8Zcw5qjDQKtamI6l14KyqazJMobhCKelhWN5zpyKUiEDoTyHE93cqWw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/shared": "3.5.44"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.5.44",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.44.tgz",
+      "integrity": "sha512-uEa/ndwjhrrhnOfb2p+sZy6zeoamJOISqaLSJGk/8R6nABT1ZldpzcJoPzKj+zHVomVBPcmQYyC2r4LtvDV6CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.44",
+        "@vue/shared": "3.5.44"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.5.44",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.44.tgz",
+      "integrity": "sha512-3fc4ARcXVhVBaJ3ujWiNZJARD6pkyRcwG+ZYhMzjKtKUp7MAY0HLwr7r3Smep3Li6ZaWT6ewdmx8XqdaD5oNZg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.44",
+        "@vue/runtime-core": "3.5.44",
+        "@vue/shared": "3.5.44",
+        "csstype": "^3.2.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.5.44",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.44.tgz",
+      "integrity": "sha512-R4S1UoH4h5Frrauv8Z5XE5TxV9oBiUSgWIC4TyVK1FK+RocRnOLwFA5Xcmo2011RlgJp+AbZCnw6afrhlgRuUQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.44",
+        "@vue/runtime-dom": "3.5.44",
+        "@vue/shared": "3.5.44"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.5.44",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.44.tgz",
+      "integrity": "sha512-H82XLH0DjmSOdbEwO15x3QTo1f5PWEtv237eLpYKc0mqLu+B8hnq16lFWmuBmNurkeiG3wr+oM1FhOll/YVFRg==",
+      "license": "MIT"
+    },
+    "node_modules/@vue/test-utils": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.5.1.tgz",
+      "integrity": "sha512-V/4a99odJ7hapr0bRt35XxljGk8hefq31gSOnlKTcEq2fUeoj2qb+FcpJYfQu4qfYhW9Ug+O2+CZ3QmZ7gXDzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-beautify": "^2.0.0",
+        "vue-component-type-helpers": "^3.0.0"
+      },
+      "peerDependencies": {
+        "@vue/compiler-dom": "3.x",
+        "@vue/server-renderer": "3.x",
+        "vue": "3.x"
+      },
+      "peerDependenciesMeta": {
+        "@vue/server-renderer": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@zip.js/zip.js": {
       "version": "2.8.18",
       "resolved": "https://registry.npmjs.org/@zip.js/zip.js/-/zip.js-2.8.18.tgz",
@@ -1619,6 +1935,16 @@
         "node": ">=18.0.0"
       }
     },
+    "node_modules/abbrev": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-5.0.0.tgz",
+      "integrity": "sha512-/XrFJgzQQQHpti1raDJC6m4ws6aNktmjBlhk8Fdlk7LwCEuDoieEJJY9OFHjfiFJFFRM2tK+Ky/IsfbbmlMu1w==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "6.4.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.4.0.tgz",
@@ -1667,18 +1993,54 @@
         "pnpm": ">=10.10.0"
       }
     },
+    "node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
     "node_modules/bitmap-sdf": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/bitmap-sdf/-/bitmap-sdf-1.0.4.tgz",
       "integrity": "sha512-1G3U4n5JE6RAiALMxu0p1XmeZkTeCwGKykzsLTCqVzfSDaN6S7fKnkIkfejogz+iwqBWc0UYAIKnKHNN7pSfDg==",
       "license": "MIT"
     },
+    "node_modules/brace-expansion": {
+      "version": "5.0.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.12.tgz",
+      "integrity": "sha512-YovQ3rzhaLMIrDjNDMkNS01tea93qhEhG5xy8f6+R0l+dw3Ki+5sCoIoI942iuLZTHWogWktgwVDhU09iNEimQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
     "node_modules/browser-split": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/browser-split/-/browser-split-0.0.1.tgz",
       "integrity": "sha512-JhvgRb2ihQhsljNda3BI8/UcRHVzrVwo3Q+P8vDtSiyobXuFpuZ9mq+MbRGMnC22CjW3RrfXdg6j6ITX8M+7Ow==",
       "license": "MIT"
     },
+    "node_modules/buffer-image-size": {
+      "version": "0.6.4",
+      "resolved": "https://registry.npmjs.org/buffer-image-size/-/buffer-image-size-0.6.4.tgz",
+      "integrity": "sha512-nEh+kZOPY1w+gcCMobZ6ETUp9WfibndnosbpwB1iJk/8Gt5ZF2bhS6+B6bPYz424KtwsR6Rflc3tCz1/ghX2dQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
     "node_modules/camelize": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
@@ -1762,6 +2124,23 @@
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
       "license": "MIT"
     },
+    "node_modules/config-chain": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
+      "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ini": "^1.3.4",
+        "proto-list": "~1.2.1"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -1843,6 +2222,35 @@
       "integrity": "sha512-X7hshQbLyMJ/3RPhyObLARM2sNxxmRALLKx1+NVFFnQ9gKzmCrxm9+uLIAdBcvc8FNLpctqlQ2V6AE92Ol9UDQ==",
       "license": "ISC"
     },
+    "node_modules/editorconfig": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-3.0.2.tgz",
+      "integrity": "sha512-T0ix8GhtxyKVfUFEcvdNDt3YGqlwkFHbD4/5bgFUDgFmxhI/cSRAeJ87/Sz//Cq8Eam6JX/e23RkoFO71P7aAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@one-ini/wasm": "0.2.1",
+        "commander": "^14.0.3",
+        "minimatch": "~10.2.4",
+        "semver": "^7.7.4"
+      },
+      "bin": {
+        "editorconfig": "bin/editorconfig"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/editorconfig/node_modules/commander": {
+      "version": "14.0.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-14.0.3.tgz",
+      "integrity": "sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -1880,6 +2288,18 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/entities": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
+      "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/error": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/error/-/error-4.4.0.tgz",
@@ -1953,7 +2373,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/etag": {
@@ -2056,6 +2475,24 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/glob": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-13.0.6.tgz",
+      "integrity": "sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "minimatch": "^10.2.2",
+        "minipass": "^7.1.3",
+        "path-scurry": "^2.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/global": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
@@ -2079,6 +2516,25 @@
       "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
       "license": "MIT"
     },
+    "node_modules/happy-dom": {
+      "version": "20.14.6",
+      "resolved": "https://registry.npmjs.org/happy-dom/-/happy-dom-20.14.6.tgz",
+      "integrity": "sha512-5DDsf4QmEIlRL6NkCv/fxSjYHHkZceL/IaYQdJc2h3G7DRTEai++VTjbfL0LB9geW2VrA3+vrjF3Efx+OTtX0Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": ">=20.0.0",
+        "@types/whatwg-mimetype": "^3.0.2",
+        "@types/ws": "^8.18.1",
+        "buffer-image-size": "^0.6.4",
+        "entities": "^7.0.1",
+        "whatwg-mimetype": "^3.0.0",
+        "ws": "^8.21.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/hls.js": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.7.3.tgz",
@@ -2138,6 +2594,13 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/is-object": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-object/-/is-object-1.0.2.tgz",
@@ -2157,6 +2620,35 @@
         "@types/estree": "*"
       }
     },
+    "node_modules/js-beautify": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-2.0.3.tgz",
+      "integrity": "sha512-cyFbh3tkPhknnTD/0bLf0T0yy2ZIbqL05mttzbt4y1Zfr7NxqXQZ62dkBLKs3oHH/lpjmDRAnciJiSUyOy8XwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "config-chain": "^1.1.13",
+        "editorconfig": "^3.0.2",
+        "glob": "^13.0.6",
+        "js-cookie": "^3.0.8",
+        "nopt": "^10.0.1"
+      },
+      "bin": {
+        "css-beautify": "js/bin/css-beautify.js",
+        "html-beautify": "js/bin/html-beautify.js",
+        "js-beautify": "js/bin/js-beautify.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/js-cookie": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.8.tgz",
+      "integrity": "sha512-yeJd4aNAdYZQjaon2bpD/Gb0B/omw7HQOsynXXcOiWVCacbBcPlgn8S/d1X6blFSaHao7ozqtW7NZW19xpCtIw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/jsep": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/jsep/-/jsep-1.4.0.tgz",
@@ -2216,6 +2708,16 @@
       "integrity": "sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==",
       "license": "Apache-2.0"
     },
+    "node_modules/lru-cache": {
+      "version": "11.5.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.3.tgz",
+      "integrity": "sha512-U4N8FgzmWxc8k1VH8Kr6lQg18U7Fjvby6wXHVRX/ZZ7IwWbRMgrRbP0Wrb5q5NVinryp4SQampHKdvtecItxUg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
@@ -2343,6 +2845,32 @@
         "dom-walk": "^0.1.0"
       }
     },
+    "node_modules/minimatch": {
+      "version": "10.2.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.6.tgz",
+      "integrity": "sha512-vpLQEs+VLCr1nU0BXS07maYoFwlDAH0gngQuuttxIwutDFEMHq2blX+8vpgxDdK3J1PwjCJiep77OitTZ4Ll1A==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.8"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz",
+      "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/mitt": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
@@ -2368,10 +2896,9 @@
       "license": "MIT"
     },
     "node_modules/nanoid": {
-      "version": "3.3.19",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.19.tgz",
-      "integrity": "sha512-Y2tUNy4ouw6tq5oDSKeQYGOyhkUBhNOcGV/02KC+6kd9eDGqdZd++mjMiIDilrBYvjEnCYvVtsuHCuP+okSfug==",
-      "dev": true,
+      "version": "3.3.20",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.20.tgz",
+      "integrity": "sha512-uKdg2G3GNCKQn9byYOpxbGqrT2fGO5KRt5J/8b3pok8rT6qxGWF6hxMyJiEYtAf+FVyYuD9hRaDqX5uPFYJ4ZQ==",
       "funding": [
         {
           "type": "github",
@@ -2392,6 +2919,22 @@
       "integrity": "sha512-f7h4svPtl+QidoBv4taKXUjJ70G2asaZ8G28nS0OkqaalX8dwwrtWtyxEDPK62AC00ur/+/E0pUwBwY5EPn15Q==",
       "license": "MIT"
     },
+    "node_modules/nopt": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-10.0.1.tgz",
+      "integrity": "sha512-df3sBr/6ax9hSGuC3CspvLlbnX8cP5L5nZwXF8cGN8l0zSWR6BvzmQ6jPUKjvo6+/xdpkNvEcucBNUdBeeV13g==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "abbrev": "^5.0.0"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
+      }
+    },
     "node_modules/nosleep.js": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/nosleep.js/-/nosleep.js-0.12.0.tgz",
@@ -2427,6 +2970,23 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/path-scurry": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.2.tgz",
+      "integrity": "sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^11.0.0",
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/pbf": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/pbf/-/pbf-5.1.2.tgz",
@@ -2443,7 +3003,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
@@ -2459,6 +3018,28 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.3.1.tgz",
+      "integrity": "sha512-khUlZSwt9xXCaTbbxFYBKDc/bWAGWJjOgvxETwkTN7KRm66EeT1ZdZj6i2ceh9sP2Pzqsbc704r2yngBrxBVug==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.4.4",
+        "vue": "^2.7.0 || ^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/polylabel": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/polylabel/-/polylabel-1.1.0.tgz",
@@ -2475,10 +3056,9 @@
       "license": "ISC"
     },
     "node_modules/postcss": {
-      "version": "8.5.28",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.28.tgz",
-      "integrity": "sha512-RRuzqDtt5Y9h3quz5hWhK+TPnsmVs6WwSU6LkJMeY4HstUEDuYTG8UJSdawMRzmzAtV+KEoG8N3Qg2qLy5vM/A==",
-      "dev": true,
+      "version": "8.5.32",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.32.tgz",
+      "integrity": "sha512-LJlKCCAUFKOuZxipUdYw1NzIITEsPcgyOG9LkvRJvuKj/bRzbuRY0ARXvL0pWGpsZvn8jku+LMep2eU0seHp8g==",
       "funding": [
         {
           "type": "opencollective",
@@ -2495,9 +3075,9 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.18",
+        "nanoid": "^3.3.20",
         "picocolors": "^1.1.1",
-        "source-map-js": "^1.2.1"
+        "source-map-js": "^1.2.2"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -2528,6 +3108,13 @@
         "node": ">= 0.6.0"
       }
     },
+    "node_modules/proto-list": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
+      "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/protobufjs": {
       "version": "8.8.0",
       "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-8.8.0.tgz",
@@ -2825,7 +3412,6 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.2.tgz",
       "integrity": "sha512-KGj/8Y43x35aZVDtt+J4mK1hoLGHULMYfSkODJNQjNDC3oW1PqPoxMwo0pLUsWM/UEGzON/NxeHywEfNXNP3Vw==",
-      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -2959,6 +3545,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/undici-types": {
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-8.9.0.tgz",
+      "integrity": "sha512-KTDyRTYX8sWmKXAikPHHSyc63CRPETMctyjKFupcC6OBLXT3xsN0e9aF7m+mIXutFWpUXuedtowG7iLOzp0kQg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/universalify": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
@@ -3115,6 +3708,81 @@
         "rollup": "^2.25.0"
       }
     },
+    "node_modules/vue": {
+      "version": "3.5.44",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.44.tgz",
+      "integrity": "sha512-dvvmaOCG7lAMkJTPqPwWeGMsPS6DIsFsfZDUgBp9V6mHf9b3+/wyVwYR4Es+WV6uJC0FKRxp81Obcq0ZwUcGFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.44",
+        "@vue/compiler-sfc": "3.5.44",
+        "@vue/runtime-dom": "3.5.44",
+        "@vue/server-renderer": "3.5.44",
+        "@vue/shared": "3.5.44"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-component-type-helpers": {
+      "version": "3.3.14",
+      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-3.3.14.tgz",
+      "integrity": "sha512-Pq3+OnbCiPCHk0R7KSZrx+j/XXaUn2kSQ1epxq60w8CPbByLjC1EJgV51n4WY851sTXUVzsNMuitywdkdVyKjA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-i18n": {
+      "version": "11.4.15",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.4.15.tgz",
+      "integrity": "sha512-bOoNYoEd/ta4g2EelI9HKxPyMZvTDFoykTNYujDTOGoKDRy5ehKJg8WmMDU7hWqNM5efO7fEGNRuwrBXnwHyDg==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/core-base": "11.4.15",
+        "@intlify/devtools-types": "11.4.15",
+        "@intlify/shared": "11.4.15",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/web-worker": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.5.0.tgz",
@@ -3128,6 +3796,16 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/whatwg-mimetype": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
+      "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/wrap-ansi": {
       "version": "9.0.2",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.2.tgz",

package.json

@@ -66,9 +66,16 @@
     "mapillary-js": "^4.1.2",
     "mgrs": "^2.1.0",
     "pbf": "^5.1.2",
-    "satellite.js": "^6.0.2"
+    "pinia": "^2.3.1",
+    "satellite.js": "^6.0.2",
+    "vue": "^3.5.44",
+    "vue-i18n": "^11.4.15"
   },
   "devDependencies": {
+    "@happy-dom/global-registrator": "^20.14.6",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vue/test-utils": "^2.5.1",
+    "happy-dom": "^20.14.6",
     "prettier": "3.9.6",
     "puppeteer": "^25.16.0",
     "sharp": "^0.35.4",
@@ -213,8 +220,8 @@
     "./voice/actions": "./src/voice/gevActions.js",
     "./annotations": "./src/annotations/index.js",
     "./context": "./src/data/contextStore.js",
-    "./build/html": {
-      "node": "./build/application-html.js"
+    "./build/register-vue": {
+      "node": "./build/registerVue.js"
     },
     "./application/catalog": "./src/app/catalog.js",
     "./standalone/catalog": "./src/standalone/catalog.js",

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",
@@ -650,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",
@@ -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",
@@ -910,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",
@@ -1095,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",
@@ -1105,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",
@@ -1119,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/de.json",
@@ -448,13 +579,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": {
@@ -507,9 +640,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",
@@ -533,9 +668,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"],
@@ -568,6 +716,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",
@@ -580,9 +731,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"],
@@ -590,7 +742,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",
@@ -608,9 +759,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"],
@@ -654,6 +808,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",
@@ -691,7 +849,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/de.json",
@@ -704,9 +864,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"],
@@ -746,7 +908,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",
@@ -762,7 +923,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",
@@ -770,6 +930,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",
@@ -791,15 +955,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",
@@ -825,7 +991,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",
@@ -834,7 +1002,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",
@@ -872,11 +1039,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"],
@@ -952,7 +1166,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",
@@ -984,6 +1200,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",
@@ -998,9 +1215,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"],
@@ -1908,9 +2131,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": [
@@ -2428,7 +2655,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",
@@ -2436,6 +2662,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",
@@ -2458,15 +2688,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",
@@ -2492,14 +2724,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",
@@ -2674,6 +2907,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",
@@ -2808,10 +3042,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",
@@ -2822,7 +3118,10 @@
       "pbf",
       "satellite.js",
       "mapillary-js",
-      "@jtarrio/webrtlsdr"
+      "@jtarrio/webrtlsdr",
+      "vue",
+      "pinia",
+      "vue-i18n"
     ]
   },
   "application-catalog": {
@@ -3396,7 +3695,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",
@@ -3407,7 +3713,10 @@
       "pbf",
       "mgrs",
       "mapillary-js",
-      "@jtarrio/webrtlsdr"
+      "@jtarrio/webrtlsdr",
+      "vue",
+      "pinia",
+      "vue-i18n"
     ]
   },
   "application-operations": {
@@ -3552,13 +3861,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",
@@ -3574,9 +3885,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"],
@@ -3605,9 +3919,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"],
@@ -3767,9 +4087,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.
@@ -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
@@ -2083,7 +2087,7 @@ try {
   }
   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,19 +166,22 @@ 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 */',
@@ -177,25 +189,29 @@ const MUTATIONS = [
   {
     // 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',
+    defect:
+      'a Cockpit utility disclosure returns to stopPropagation, so later document listeners also act on its ESC',
     file: 'radio',
     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-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

@@ -1100,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) {
@@ -1111,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);
@@ -1123,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,
@@ -1716,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);
@@ -1974,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();
@@ -2059,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();
@@ -2154,16 +2160,20 @@ 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'),
@@ -2283,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();
@@ -2700,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));
@@ -2764,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;
@@ -2797,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 = {
@@ -2957,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;
@@ -2970,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,
@@ -2978,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);
@@ -3025,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);

scripts/qa-scene-controls.mjs

@@ -442,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();
@@ -456,6 +456,7 @@ try {
     await director.destroy();
     return {
       stoppedSynchronously,
+      heldRowAction: Boolean(retainedLabel),
       stateStopped: window.__qaSceneState.length === notificationsAtStop,
       sameProject: director._project === project,
       noLateStatus:
@@ -465,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-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;

src/annotations/drawTool.js

@@ -30,7 +30,6 @@
  * at finish, deliberately and in one place — see `finishSpec` in drawMode.js.
  */
 import * as Cesium from 'cesium';
-import { createSegmentedControl } from '../ui/segmentedControl.js';
 import { pickWorldFromScreen } from './annotationResolver.js';
 import {
   claimPointer,
@@ -50,7 +49,7 @@ import {
   removeLastVertex,
 } from './drawMode.js';
 
-import { msg, registerUnsavedWork, t, translateKnown } from '../i18n/index.js';
+import { onLocaleChange, t, translateKnown } from '../i18n/index.js';
 /** The id this tool claims the pointer under. */
 const DRAW_POINTER_OWNER = 'draw';
 const PREVIEW_DATA_SOURCE_NAME = 'gev-draw-preview';
@@ -65,26 +64,32 @@ const PREVIEW = {
 };
 
 /**
- * Wire the Draw control. Returns a handle with a `destroy()` the application
+ * Run the Draw control. Returns a handle with a `destroy()` the application
  * lifetime owns, plus the console/test seam (`window.__gevDrawTool`).
- * @param {{viewer: Cesium.Viewer, annotations: {annotate: Function, clear: Function}}} deps
+ * The tool hands what the controls show (`{ active, shape, color, label,
+ * hint }`) to `publish`, which the view renders, and answers the controls
+ * through the actions it gives `connect`, which returns their disconnect.
+ * @param {{viewer: Cesium.Viewer, annotations: {annotate: Function, clear: Function}, publish?: Function, connect?: Function}} deps
  * @returns {{destroy: Function}|null}
  */
-export function initDrawTool({ viewer, annotations }) {
-  const toggle = document.getElementById('draw-toggle');
-  const modeRow = document.getElementById('draw-mode-row');
-  const labelRow = document.getElementById('draw-label-row');
-  const labelInput = document.getElementById('draw-label-input');
-  const colorSelect = document.getElementById('draw-color-select');
-  const clearButton = document.getElementById('draw-clear');
-  const hint = document.getElementById('draw-hint');
-  if (!viewer || !annotations || !toggle) return null;
+export function initDrawTool({
+  viewer,
+  annotations,
+  publish = () => {},
+  connect = () => () => {},
+}) {
+  // A page without the Draw controls (the Display controls view omitted) has
+  // no draw tool.
+  if (!viewer || !annotations || !document.getElementById('draw-toggle'))
+    return null;
 
   let active = false;
   let destroyed = false;
   let session = null;
   let shape = 'area';
   let color = 'primary';
+  let label = '';
+  let hint = '';
   let handler = null;
   let lease = null;
   let savedDoubleClick = null;
@@ -95,25 +100,13 @@ export function initDrawTool({ viewer, annotations }) {
   // one of those must not write its outcome over the newer state.
   let generation = 0;
   const previewEntities = [];
-  // Every DOM listener this tool adds, so teardown is one loop rather than a
-  // list that can fall out of step with the bindings below.
+  // Every DOM listener this tool adds (the session's keydown), so teardown is
+  // one loop rather than a list that can fall out of step with the bindings.
   const domListeners = [];
   const listen = (target, type, listener, options) => {
-    if (!target) return;
     target.addEventListener(type, listener, options);
     domListeners.push([target, type, listener, options]);
   };
-  // The board lives only in memory: switching language (a reload) asks first
-  // while it holds a lasting mark or a shape is half drawn.
-  const unregisterUnsavedWork = registerUnsavedWork(() => {
-    if (destroyed) return null;
-    const lasting = (annotations.list?.() || []).some(
-      (mark) => mark && mark.ttlMs == null && !mark.expiring,
-    );
-    return lasting || session?.vertices?.length > 0
-      ? msg('drawings on the map')
-      : null;
-  });
 
   const dataSource = new Cesium.CustomDataSource(PREVIEW_DATA_SOURCE_NAME);
   // `add()` resolves on the NEXT tick, so an init-then-immediate-destroy would
@@ -124,9 +117,18 @@ export function initDrawTool({ viewer, annotations }) {
     () => null,
   );
 
+  const present = () => publish({ active, shape, color, label, hint });
+  // The hint is kept as the call that words it, so a language switch can
+  // word it again.
+  let hintText = () => '';
   const setHint = (text) => {
-    if (hint) hint.textContent = text;
+    hintText = text;
+    hint = text();
+    present();
   };
+  const offLocale = onLocaleChange(() => {
+    if (!destroyed) setHint(hintText);
+  });
 
   // ---- preview ---------------------------------------------------------
   const vertexPositions = () =>
@@ -161,7 +163,7 @@ export function initDrawTool({ viewer, annotations }) {
     previewEntities.length = 0;
     if (!session) {
       previewLine.show = false;
-      setHint(drawHint(null));
+      setHint(() => drawHint(null));
       viewer.scene.requestRender();
       return;
     }
@@ -187,7 +189,7 @@ export function initDrawTool({ viewer, annotations }) {
         }),
       );
     }
-    setHint(drawHint(session));
+    setHint(() => drawHint(session));
     viewer.scene.requestRender();
   };
 
@@ -210,14 +212,14 @@ export function initDrawTool({ viewer, annotations }) {
     // A click that changed nothing still deserves an answer when the reason is
     // a limit rather than the harmless tail of a double-click.
     if (reason === 'full')
-      setHint(
+      setHint(() =>
         t(
           'That shape already has {count} points — finish it or press Backspace.',
           { count: MAX_VERTICES },
         ),
       );
     else if (reason === 'invalid')
-      setHint(t('That point is off the globe — click on the world.'));
+      setHint(() => t('That point is off the globe — click on the world.'));
   };
   const onMove = (event) => {
     if (!session || session.shape === 'pin' || destroyed) return;
@@ -235,17 +237,18 @@ export function initDrawTool({ viewer, annotations }) {
     if (reason !== 'ok') {
       // 'too-few' is just "keep clicking" and the hint already says so;
       // a degenerate or off-globe shape needs to be told why it was refused.
-      if (reason !== 'too-few') setHint(drawHint(session));
+      if (reason !== 'too-few') setHint(() => drawHint(session));
       return null;
     }
-    const spec = finishSpec(session, { label: labelInput?.value || '', color });
+    const spec = finishSpec(session, { label, color });
     if (!spec) return null;
     // Start a fresh session BEFORE awaiting, so a second Enter or the second
     // half of a double-click cannot submit the same shape twice.
     session = createDrawSession(shape);
     cursor = null;
     syncPreview();
-    if (labelInput) labelInput.value = '';
+    label = '';
+    present();
     const attempt = generation;
     try {
       const result = await annotations.annotate([spec], {
@@ -253,11 +256,12 @@ export function initDrawTool({ viewer, annotations }) {
         flyTo: false,
       });
       if (destroyed || attempt !== generation) return result;
-      if (result?.drawn === 0) setHint(t('That shape could not be placed.'));
+      if (result?.drawn === 0)
+        setHint(() => t('That shape could not be placed.'));
       return result;
     } catch (error) {
       if (destroyed || attempt !== generation) return null;
-      setHint(
+      setHint(() =>
         t('Could not place the shape: {error}', {
           error: error?.message || error,
         }),
@@ -279,13 +283,15 @@ export function initDrawTool({ viewer, annotations }) {
     if (session) session = createDrawSession(shape);
     annotations.clear();
     syncPreview();
-    if (!destroyed && !active) setHint(t('Board cleared.'));
+    if (!destroyed && !active) setHint(() => t('Board cleared.'));
   };
 
   // ---- keys: only while drawing, never while typing in another field ----
+  // The label field is this tool's own: typing there still drives drawing.
+  const isLabelField = (target) => target?.id === 'draw-label-input';
   const typingElsewhere = (event) => {
     const t = event.target;
-    if (!t || t === labelInput) return false;
+    if (!t || isLabelField(t)) return false;
     return (
       t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable
     );
@@ -298,7 +304,7 @@ export function initDrawTool({ viewer, annotations }) {
    */
   const enterBelongsToDrawing = (event) => {
     const t = event.target;
-    if (!t || t === labelInput) return true;
+    if (!t || isLabelField(t)) return true;
     if (
       typeof t.closest === 'function' &&
       t.closest('button, a, select, [role="button"], [role="radio"]')
@@ -328,7 +334,7 @@ export function initDrawTool({ viewer, annotations }) {
       else setActive(false);
       return;
     }
-    if (event.key === 'Backspace' && event.target !== labelInput) {
+    if (event.key === 'Backspace' && !isLabelField(event.target)) {
       if (removeLastVertex(session)) {
         event.preventDefault();
         syncPreview();
@@ -345,7 +351,7 @@ export function initDrawTool({ viewer, annotations }) {
         // Somebody else is using the pointer — possibly an older instance of
         // this same tool that has not finished tearing down. Say so instead of
         // half-starting.
-        setHint(
+        setHint(() =>
           t('{owner} is using the pointer — close it first.', {
             owner: translateKnown(pointerOwnerName(pointerOwner())),
           }),
@@ -354,10 +360,7 @@ export function initDrawTool({ viewer, annotations }) {
       }
     }
     active = next;
-    toggle.classList.toggle('active', active);
-    toggle.setAttribute('aria-pressed', String(active));
-    modeRow?.classList.toggle('visible', active);
-    labelRow?.classList.toggle('visible', active);
+    present();
     document.body.classList.toggle('gev-drawing', active);
     if (active) {
       session = createDrawSession(shape);
@@ -419,8 +422,7 @@ export function initDrawTool({ viewer, annotations }) {
       );
       savedDoubleClick = null;
     }
-    // Drop just the keydown listener bound alongside this handler; the control
-    // listeners below outlive a session and come off in destroy().
+    // Drop the keydown listener bound alongside this handler.
     for (let i = domListeners.length - 1; i >= 0; i -= 1) {
       const [target, type, listener, options] = domListeners[i];
       if (listener !== onKey) continue;
@@ -429,37 +431,32 @@ export function initDrawTool({ viewer, annotations }) {
     }
   }
 
-  listen(toggle, 'click', () => setActive(!active));
-  const shapeButtons = [
-    ...(modeRow?.querySelectorAll('.pp-mode-btn[data-shape]') || []),
-  ];
-  const shapeControl = createSegmentedControl({
-    buttons: shapeButtons,
-    valueOf: (button) => button.dataset.shape,
-    listen,
-    onChange: (value) => {
-      shape = normalizeShape(value);
-      shapeControl.update(shape);
-      if (active) {
-        generation += 1;
-        session = createDrawSession(shape);
-        cursor = null;
-        syncPreview();
-      }
-    },
-  });
-  listen(colorSelect, 'change', () => {
-    color = COLORS.includes(colorSelect.value) ? colorSelect.value : 'primary';
-    syncPreview();
-  });
-  listen(clearButton, 'click', clearAll);
-  listen(labelInput, 'keydown', (event) => {
-    if (event.key === 'Enter' && session?.vertices?.length) {
-      event.preventDefault();
-      void finish();
+  /** Draw `next` from now on; an open shape starts over in it. */
+  function chooseShape(next) {
+    shape = normalizeShape(next);
+    present();
+    if (active) {
+      generation += 1;
+      session = createDrawSession(shape);
+      cursor = null;
+      syncPreview();
     }
+  }
+  const disconnect = connect({
+    toggleDraw: () => setActive(!active),
+    setDrawShape: chooseShape,
+    setDrawColor: (value) => {
+      color = COLORS.includes(value) ? value : 'primary';
+      present();
+      syncPreview();
+    },
+    setDrawLabel: (text) => {
+      label = String(text ?? '');
+      present();
+    },
+    clearDraw: clearAll,
   });
-  setHint(drawHint(null));
+  setHint(() => drawHint(null));
 
   const api = {
     get active() {
@@ -472,12 +469,7 @@ export function initDrawTool({ viewer, annotations }) {
       return session;
     },
     setActive,
-    setShape(next) {
-      const btn = modeRow?.querySelector(
-        `.pp-mode-btn[data-shape="${normalizeShape(next)}"]`,
-      );
-      btn?.click();
-    },
+    setShape: chooseShape,
     /** Test seam: add a vertex from lon/lat as if it had been clicked. */
     addVertex(lon, lat, height = 0) {
       if (!session) return false;
@@ -526,7 +518,8 @@ export function initDrawTool({ viewer, annotations }) {
       generation += 1;
       if (active) setActive(false);
       destroyed = true;
-      unregisterUnsavedWork();
+      offLocale();
+      disconnect();
       releaseSceneHandler();
       releasePointer(lease);
       lease = null;
@@ -546,11 +539,8 @@ export function initDrawTool({ viewer, annotations }) {
         }
       });
       document.body.classList.remove('gev-drawing');
-      toggle.classList.remove('active');
-      toggle.setAttribute('aria-pressed', 'false');
-      modeRow?.classList.remove('visible');
-      labelRow?.classList.remove('visible');
-      if (hint) hint.textContent = '';
+      hint = '';
+      present();
       if (window.__gevDrawTool === api) delete window.__gevDrawTool;
       return attaching;
     },

src/annotations/drawTool.test.mjs

@@ -23,7 +23,7 @@ test('the application composition wires the draw tool and owns its teardown', ()
   const tools = read('src/app/tools.js');
   const engineAt = tools.indexOf('const annotations = initAnnotations({');
   const drawAt = tools.indexOf(
-    'const drawTool = initDrawTool({ viewer, annotations });',
+    'const drawTool = initDrawTool({\n    viewer,\n    annotations,\n    publish: (view) => displayStore.publishDraw(view),',
   );
   assert.ok(engineAt >= 0, 'initAnnotations call missing');
   assert.ok(
@@ -62,9 +62,9 @@ test('the engine resolves manual geometry before any name resolution', () => {
 });
 
 test('the Draw control markup carries the ids the tool binds to', () => {
-  // The DISPLAY rail is a component template now, assembled into index.html at
-  // build time — the markup is not in index.html any more.
-  const html = read('src/ui/templates/display-controls.html');
+  // The DISPLAY rail is a Vue view now, rendered into index.html's view host —
+  // the markup is not in index.html any more.
+  const html = read('src/ui/views/panels/DisplayPanel.vue');
   const ids = [
     'draw-toggle',
     'draw-mode-row',
@@ -84,15 +84,25 @@ test('the Draw control markup carries the ids the tool binds to', () => {
   for (const shape of ['area', 'line', 'pin']) {
     assert.match(
       html,
-      new RegExp(`data-shape="${shape}"`),
+      new RegExp(`'data-shape': '${shape}'`),
       `shape button ${shape} missing`,
     );
   }
-  for (const id of ids) {
+  // The rows and the hint render what the tool publishes; the controls
+  // call the actions the tool connects to the display store.
+  for (const action of [
+    "act('toggleDraw')",
+    "act('setDrawShape', $event)",
+    "act('setDrawLabel', $event.target.value)",
+    "act('setDrawColor', $event)",
+    "act('clearDraw')",
+  ]) {
+    assert.ok(html.includes(action), `DisplayPanel must call ${action}`);
+    const name = /act\('([a-zA-Z]+)'/.exec(action)[1];
     assert.match(
       tool(),
-      new RegExp(`getElementById\\('${id}'\\)`),
-      `drawTool must bind #${id}`,
+      new RegExp(`\\b${name}: `),
+      `drawTool must answer ${name}`,
     );
   }
 });

src/annotations/drawToolBehaviour.test.mjs

@@ -6,7 +6,6 @@ import { test } from 'node:test';
 import assert from 'node:assert/strict';
 import * as Cesium from 'cesium';
 import { initDrawTool } from './drawTool.js';
-import { describeUnsavedWork } from '../i18n/index.js';
 import {
   isPointerFree,
   pointerOwner,
@@ -47,7 +46,6 @@ class FakeElement {
     this.attributes = new Map();
     this.textContent = '';
     this.value = '';
-    this.children = [];
     this.listeners = [];
   }
   setAttribute(name, value) {
@@ -65,16 +63,6 @@ class FakeElement {
     );
     if (at >= 0) this.listeners.splice(at, 1);
   }
-  querySelectorAll(selector) {
-    if (selector === '.pp-mode-btn[data-shape]')
-      return this.children.filter((child) => child.dataset.shape);
-    const shape = /\.pp-mode-btn\[data-shape="([a-z]+)"\]/.exec(selector)?.[1];
-    if (shape) return this.children.filter((child) => child.dataset.shape === shape);
-    return [];
-  }
-  querySelector(selector) {
-    return this.querySelectorAll(selector)[0] ?? null;
-  }
   click() {
     return this.emit('click');
   }
@@ -108,18 +96,11 @@ function fakeDom() {
     byId.set(id, element);
     return element;
   };
+  // The control whose presence means the page has Draw, a focused button
+  // whose Enter is its own, and the tool's label field.
   make('draw-toggle', 'BUTTON');
-  const modeRow = make('draw-mode-row');
-  for (const shape of ['area', 'line', 'pin']) {
-    const button = new FakeElement('BUTTON');
-    button.dataset.shape = shape;
-    modeRow.children.push(button);
-  }
-  make('draw-label-row');
-  make('draw-label-input', 'INPUT');
-  make('draw-color-select', 'SELECT');
   make('draw-clear', 'BUTTON');
-  make('draw-hint', 'SPAN');
+  make('draw-label-input', 'INPUT');
 
   const body = new FakeElement('BODY');
   const documentDouble = {
@@ -218,14 +199,29 @@ function harness() {
   const previousWindow = globalThis.window;
   globalThis.document = documentDouble;
   globalThis.window = globalThis.window || {};
-  const tool = initDrawTool({ viewer, annotations });
+  const shown = { view: null };
+  // The controls' actions, as the display store holds them.
+  const controls = { actions: null };
+  const tool = initDrawTool({
+    viewer,
+    annotations,
+    publish: (view) => (shown.view = view),
+    connect: (actions) => {
+      controls.actions = actions;
+      return () => (controls.actions = null);
+    },
+  });
   return {
     tool,
+    shown,
     viewer,
     annotations,
     byId,
     documentDouble,
     element: (id) => byId.get(id),
+    controls,
+    /** A control's change, as the view sends it. */
+    act: (name, ...args) => controls.actions?.[name]?.(...args),
     restore() {
       resetPointerOwnership();
       if (previousDocument === undefined) delete globalThis.document;
@@ -241,38 +237,15 @@ const LEFT_DOUBLE_CLICK = Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK;
 
 /* ── the tests ─────────────────────────────────────────────────────────── */
 
-// First in the file: tools left by later tests would answer the same registry.
-test('a lasting mark or a half-drawn shape makes the language switch ask first', async () => {
-  const h = harness();
-  try {
-    let marks = [];
-    h.annotations.list = () => marks;
-    assert.deepEqual(describeUnsavedWork(), [], 'an empty board loses nothing');
-    marks = [{ id: 'a', ttlMs: 8000, expiring: false }];
-    assert.deepEqual(describeUnsavedWork(), [], 'a fading mark is not work');
-    marks = [{ id: 'b', ttlMs: null, expiring: false }];
-    assert.deepEqual(describeUnsavedWork(), ['drawings on the map']);
-    marks = [];
-    h.element('draw-toggle').emit('click');
-    h.tool.addVertex(-97.75, 30.26);
-    assert.deepEqual(describeUnsavedWork(), ['drawings on the map'], 'a shape in progress');
-    marks = [{ id: 'c', ttlMs: null, expiring: false }];
-    await h.tool.destroy();
-    assert.deepEqual(describeUnsavedWork(), [], 'a destroyed tool unregisters');
-  } finally {
-    h.restore();
-  }
-});
-
 test('turning Draw on takes a lease and turning it off gives it back', async () => {
   const h = harness();
   try {
     assert.equal(isPointerFree(), true);
-    h.element('draw-toggle').emit('click');
+    h.act('toggleDraw');
     assert.equal(pointerOwner(), 'draw', 'the session owns the pointer');
     assert.equal(h.tool.active, true);
 
-    h.element('draw-toggle').emit('click');
+    h.act('toggleDraw');
     assert.equal(isPointerFree(), true, 'leaving draw mode frees the pointer');
     assert.equal(h.tool.active, false);
   } finally {
@@ -284,18 +257,18 @@ test('Draw refuses to start when something else holds the pointer', async () =>
   const h = harness();
   try {
     const other = claimPointer('directions');
-    h.element('draw-toggle').emit('click');
+    h.act('toggleDraw');
     assert.equal(h.tool.active, false, 'it must not half-start');
     assert.equal(pointerOwner(), 'directions', 'and must not steal the claim');
     // Named by its tool, not by the internal owner id.
     assert.equal(
-      h.element('draw-hint').textContent,
+      h.shown.view.hint,
       'Directions is using the pointer — close it first.',
     );
     assert.equal(h.tool.diagnostics().sceneHandler, false, 'no handler was bound');
 
     releasePointer(other);
-    h.element('draw-toggle').emit('click');
+    h.act('toggleDraw');
     assert.equal(h.tool.active, true, 'and it starts once the pointer is free');
   } finally {
     h.restore();
@@ -305,13 +278,13 @@ test('Draw refuses to start when something else holds the pointer', async () =>
 test('a destroyed instance cannot free the pointer its replacement holds', async () => {
   const first = harness();
   try {
-    first.element('draw-toggle').emit('click');
+    first.act('toggleDraw');
     assert.equal(pointerOwner(), 'draw');
     // The replacement takes over before the old one finishes tearing down.
     first.tool.setActive(false);
     const second = harness();
     try {
-      second.element('draw-toggle').emit('click');
+      second.act('toggleDraw');
       assert.equal(pointerOwner(), 'draw');
       await first.tool.destroy();
       assert.equal(
@@ -336,7 +309,7 @@ test('both stock viewer click actions are borrowed for the session and given bac
     h.viewer.screenSpaceEventHandler.setInputAction(stockClick, LEFT_CLICK);
     h.viewer.screenSpaceEventHandler.setInputAction(stockDouble, LEFT_DOUBLE_CLICK);
 
-    h.element('draw-toggle').emit('click');
+    h.act('toggleDraw');
     assert.equal(
       h.viewer.screenSpaceEventHandler.getInputAction(LEFT_CLICK),
       undefined,
@@ -347,7 +320,7 @@ test('both stock viewer click actions are borrowed for the session and given bac
       undefined,
     );
 
-    h.element('draw-toggle').emit('click');
+    h.act('toggleDraw');
     assert.equal(
       h.viewer.screenSpaceEventHandler.getInputAction(LEFT_CLICK),
       stockClick,
@@ -365,7 +338,7 @@ test('both stock viewer click actions are borrowed for the session and given bac
 test('Enter finishes from the canvas and the label field, never from a focused button', async () => {
   const h = harness();
   try {
-    h.element('draw-toggle').emit('click');
+    h.act('toggleDraw');
     h.tool.setShape('area');
     h.tool.addVertex(-97.75, 30.26);
     h.tool.addVertex(-97.74, 30.26);
@@ -395,7 +368,7 @@ test('Enter finishes from the canvas and the label field, never from a focused b
 test('the live preview hangs at the height the click landed on', async () => {
   const h = harness();
   try {
-    h.element('draw-toggle').emit('click');
+    h.act('toggleDraw');
     h.tool.setShape('line');
     h.tool.addVertex(-97.75, 30.26, 187.5);
     h.tool.addVertex(-97.74, 30.26, 212.25);
@@ -449,7 +422,7 @@ test('destroy releases the pointer, the handler, the listeners and the stock act
   try {
     const stockClick = () => 'viewer picks and selects';
     h.viewer.screenSpaceEventHandler.setInputAction(stockClick, LEFT_CLICK);
-    h.element('draw-toggle').emit('click');
+    h.act('toggleDraw');
     h.tool.addVertex(-97.75, 30.26);
     assert.equal(pointerOwner(), 'draw');
     assert.ok(h.tool.diagnostics().domListeners > 0);
@@ -463,7 +436,7 @@ test('destroy releases the pointer, the handler, the listeners and the stock act
     assert.equal(after.sceneHandler, false, 'the Cesium handler is gone');
     assert.equal(after.domListeners, 0, 'every DOM listener came off');
     assert.equal(h.documentDouble.listeners.length, 0, 'including the keydown');
-    assert.equal(h.element('draw-toggle').listeners.length, 0);
+    assert.equal(h.controls.actions, null, 'and the controls are disconnected');
     assert.equal(
       h.viewer.screenSpaceEventHandler.getInputAction(LEFT_CLICK),
       stockClick,
@@ -481,15 +454,99 @@ test('destroy releases the pointer, the handler, the listeners and the stock act
 test('Clear wipes the board and the shape in progress', async () => {
   const h = harness();
   try {
-    h.element('draw-toggle').emit('click');
+    h.act('toggleDraw');
     h.tool.addVertex(-97.75, 30.26);
     h.tool.addVertex(-97.74, 30.26);
     assert.equal(h.tool.session.vertices.length, 2);
 
-    h.element('draw-clear').emit('click');
+    h.act('clearDraw');
     assert.equal(h.annotations.calls.clear, 1, 'placed marks are removed');
     assert.equal(h.tool.session.vertices.length, 0, 'and so is the shape in progress');
   } finally {
     h.restore();
   }
 });
+
+test('the controls choose the shape, colour and label the next shape is drawn with', async () => {
+  const h = harness();
+  try {
+    h.act('toggleDraw');
+    h.act('setDrawShape', 'line');
+    h.act('setDrawColor', 'amber');
+    h.act('setDrawLabel', 'Route A');
+    assert.deepEqual(
+      { ...h.shown.view, hint: undefined },
+      { active: true, shape: 'line', color: 'amber', label: 'Route A', hint: undefined },
+      'the view shows what the controls chose',
+    );
+    h.act('setDrawColor', 'purple');
+    assert.equal(h.shown.view.color, 'primary', 'an unknown colour falls back');
+    h.act('setDrawColor', 'cyan');
+    h.tool.addVertex(-97.75, 30.26);
+    // Choosing a shape again starts the open one over.
+    h.act('setDrawShape', 'line');
+    assert.equal(h.tool.session.vertices.length, 0);
+    h.tool.addVertex(-97.75, 30.26);
+    h.tool.addVertex(-97.74, 30.26);
+    h.documentDouble.emit('keydown', { key: 'Enter', target: h.documentDouble.body });
+    await Promise.resolve();
+    await Promise.resolve();
+    const spec = h.annotations.calls.annotate[0].specs[0];
+    assert.equal(spec.type, 'route', 'a drawn line is a manual route');
+    assert.equal(spec.color, 'cyan');
+    assert.equal(spec.label, 'Route A');
+    assert.equal(h.shown.view.label, '', 'a finished shape empties the label');
+  } finally {
+    h.restore();
+  }
+});
+
+test('keys typed in the label field: Enter finishes, Backspace edits, Escape cancels', async () => {
+  const h = harness();
+  try {
+    const label = h.element('draw-label-input');
+    const elsewhere = new FakeElement('INPUT', 'location-search');
+    h.act('toggleDraw');
+    h.tool.addVertex(-97.75, 30.26);
+    h.tool.addVertex(-97.74, 30.26);
+    h.documentDouble.emit('keydown', { key: 'Backspace', target: label });
+    assert.equal(h.tool.session.vertices.length, 2, 'Backspace edits the label');
+    h.documentDouble.emit('keydown', { key: 'Enter', target: elsewhere });
+    await Promise.resolve();
+    assert.equal(h.annotations.calls.annotate.length, 0, 'another field keeps its Enter');
+    h.documentDouble.emit('keydown', { key: 'Escape', target: label });
+    assert.equal(h.tool.session.vertices.length, 0, 'Escape drops the open shape');
+    assert.equal(h.tool.active, true, 'and leaves Draw on');
+    h.act('setDrawShape', 'line');
+    h.tool.addVertex(-97.75, 30.26);
+    h.tool.addVertex(-97.74, 30.26);
+    h.documentDouble.emit('keydown', { key: 'Enter', target: label });
+    await Promise.resolve();
+    await Promise.resolve();
+    assert.equal(h.annotations.calls.annotate.length, 1, 'Enter in the label finishes');
+  } finally {
+    h.restore();
+  }
+});
+
+test('a page without the Draw controls gets no draw tool', () => {
+  resetPointerOwnership();
+  const previousDocument = globalThis.document;
+  globalThis.document = { getElementById: () => null };
+  try {
+    let connected = false;
+    const tool = initDrawTool({
+      viewer: fakeViewer(),
+      annotations: fakeAnnotations(),
+      connect: () => {
+        connected = true;
+        return () => {};
+      },
+    });
+    assert.equal(tool, null);
+    assert.equal(connected, false);
+  } finally {
+    if (previousDocument === undefined) delete globalThis.document;
+    else globalThis.document = previousDocument;
+  }
+});

src/annotations/hybridAnnotationRenderer.js

@@ -16,11 +16,15 @@ import { createScreenAnnotationRenderer } from './screenAnnotationRenderer.js';
  * label-less) so every caption shares one consistent style.
  *
  * The hybrid surface honors add/update/remove/sync/destroy; update coordinates the
- * one route change that spans both sub-renderers.
+ * one route change that spans both sub-renderers. `screen` passes options to the
+ * screen renderer (its store, in tests).
  */
-export function createHybridAnnotationRenderer(viewer) {
+export function createHybridAnnotationRenderer(
+  viewer,
+  { screen: screenOptions } = {},
+) {
   const world = createWorldAnnotationRenderer(viewer);
-  const screen = createScreenAnnotationRenderer(viewer);
+  const screen = createScreenAnnotationRenderer(viewer, screenOptions);
   // anno.id -> { worldProxy?, screenProxy? } — proxies own the sub-renderer state.
   const routed = new Map();
 

src/annotations/hybridAnnotationRenderer.test.mjs

@@ -1,143 +1,24 @@
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
 import * as Cesium from 'cesium';
+import { createPinia } from 'pinia';
+import { useScreenAnnotationsStore } from '../ui/stores/screenAnnotations.js';
 import { createHybridAnnotationRenderer } from './hybridAnnotationRenderer.js';
 
-class FakeClassList {
-  constructor(owner) {
-    this.owner = owner;
-    this.names = new Set();
-  }
-
-  reset(value) {
-    this.names = new Set(String(value || '').split(/\s+/).filter(Boolean));
-  }
-
-  add(...names) {
-    for (const name of names) this.names.add(name);
-    this.owner.attributes.set('class', Array.from(this.names).join(' '));
-  }
-
-  remove(...names) {
-    for (const name of names) this.names.delete(name);
-    this.owner.attributes.set('class', Array.from(this.names).join(' '));
-  }
-
-  contains(name) {
-    return this.names.has(name);
-  }
+/** A hybrid renderer whose screen board is presented to its own store. */
+function hybridWithBoard(viewer) {
+  const store = useScreenAnnotationsStore(createPinia());
+  const renderer = createHybridAnnotationRenderer(viewer, { screen: { store } });
+  return { store, renderer };
 }
 
-class FakeElement {
-  constructor(tagName) {
-    this.tagName = tagName;
-    this.attributes = new Map();
-    this.children = [];
-    this.parentNode = null;
-    this.style = {};
-    this.classList = new FakeClassList(this);
-    this.textContent = '';
-  }
-
-  setAttribute(name, value) {
-    this.attributes.set(name, String(value));
-    if (name === 'class') this.classList.reset(value);
-  }
-
-  getAttribute(name) {
-    return this.attributes.get(name) ?? null;
-  }
-
-  set className(value) {
-    this.setAttribute('class', value);
-  }
-
-  get className() {
-    return this.getAttribute('class') || '';
-  }
-
-  set id(value) {
-    this.setAttribute('id', value);
-  }
-
-  get id() {
-    return this.getAttribute('id') || '';
-  }
-
-  appendChild(child) {
-    child.parentNode = this;
-    this.children.push(child);
-    return child;
-  }
-
-  removeChild(child) {
-    const index = this.children.indexOf(child);
-    if (index >= 0) this.children.splice(index, 1);
-    child.parentNode = null;
-    return child;
-  }
-
-  remove() {
-    this.parentNode?.removeChild(this);
-  }
-
-  querySelector(selector) {
-    return this.querySelectorAll(selector)[0] || null;
-  }
-
-  querySelectorAll(selector) {
-    const className = selector.startsWith('.') ? selector.slice(1) : null;
-    const matches = [];
-    const visit = (node) => {
-      for (const child of node.children) {
-        if (className && child.classList.contains(className)) matches.push(child);
-        visit(child);
-      }
-    };
-    visit(this);
-    return matches;
-  }
-
-  addEventListener() {}
-
-  getBBox() {
-    return { x: 0, y: 0, width: 40, height: 16 };
-  }
-
-  set innerHTML(value) {
-    this._innerHTML = value;
-  }
+/** The screen marks the board shows, fading ones included. */
+function annotationGroups(store) {
+  return store.board?.marks ?? [];
 }
 
-function fakeDocument() {
-  const head = new FakeElement('head');
-  const body = new FakeElement('body');
-  const roots = [head, body];
-  return {
-    head,
-    body,
-    createElement: (tag) => new FakeElement(tag),
-    createElementNS: (_namespace, tag) => new FakeElement(tag),
-    getElementById(id) {
-      let found = null;
-      const visit = (node) => {
-        if (node.getAttribute('id') === id) found = node;
-        for (const child of node.children) visit(child);
-      };
-      for (const root of roots) visit(root);
-      return found;
-    },
-  };
-}
-
-function findAnnotationGroup(document) {
-  const layer = document.body.children.find((child) => child.classList.contains('gev-screen-whiteboard'));
-  const svg = layer.children.find((child) => child.classList.contains('gev-screen-whiteboard-svg'));
-  return {
-    svg,
-    group: svg.children.find((child) => child.classList.contains('gev-anno')),
-  };
-}
+const childrenWithClass = (mark, name) =>
+  mark.children.filter((child) => child.attrs?.class?.split(' ').includes(name));
 
 function cameraLookingAt(lon, lat) {
   const target = Cesium.Cartesian3.fromDegrees(lon, lat);
@@ -184,7 +65,6 @@ function cameraLookingAt(lon, lat) {
 
 /** Install the browser globals both renderers touch, restored after the test. */
 function installBrowserGlobals(t) {
-  const originalDocument = globalThis.document;
   const originalRequestAnimationFrame = globalThis.requestAnimationFrame;
   const originalWindow = globalThis.window;
   const originalBrowserConstructors = new Map([
@@ -193,13 +73,10 @@ function installBrowserGlobals(t) {
     ['ImageBitmap', globalThis.ImageBitmap],
     ['OffscreenCanvas', globalThis.OffscreenCanvas],
   ]);
-  globalThis.document = fakeDocument();
   globalThis.requestAnimationFrame = (callback) => { callback(); return 1; };
   globalThis.window = { setTimeout: (fn) => { fn(); return 1; } };
   for (const name of originalBrowserConstructors.keys()) globalThis[name] = class {};
   t.after(() => {
-    if (originalDocument === undefined) delete globalThis.document;
-    else globalThis.document = originalDocument;
     if (originalRequestAnimationFrame === undefined) delete globalThis.requestAnimationFrame;
     else globalThis.requestAnimationFrame = originalRequestAnimationFrame;
     if (originalWindow === undefined) delete globalThis.window;
@@ -244,9 +121,6 @@ function fakeViewer(lon, lat) {
   };
 }
 
-function annotationGroups(svg) {
-  return svg.children.filter((child) => child.classList.contains('gev-anno'));
-}
 
 function naiveRingCentroid(ring) {
   const totals = ring.reduce(
@@ -257,7 +131,6 @@ function naiveRingCentroid(ring) {
 }
 
 test('hybrid outline upgrade preserves the screen group and adds world geometry', (t) => {
-  const originalDocument = globalThis.document;
   const originalRequestAnimationFrame = globalThis.requestAnimationFrame;
   const originalBrowserConstructors = new Map([
     ['HTMLCanvasElement', globalThis.HTMLCanvasElement],
@@ -265,12 +138,9 @@ test('hybrid outline upgrade preserves the screen group and adds world geometry'
     ['ImageBitmap', globalThis.ImageBitmap],
     ['OffscreenCanvas', globalThis.OffscreenCanvas],
   ]);
-  globalThis.document = fakeDocument();
   globalThis.requestAnimationFrame = (callback) => { callback(); return 1; };
   for (const name of originalBrowserConstructors.keys()) globalThis[name] = class {};
   t.after(() => {
-    if (originalDocument === undefined) delete globalThis.document;
-    else globalThis.document = originalDocument;
     if (originalRequestAnimationFrame === undefined) delete globalThis.requestAnimationFrame;
     else globalThis.requestAnimationFrame = originalRequestAnimationFrame;
     for (const [name, original] of originalBrowserConstructors) {
@@ -305,7 +175,7 @@ test('hybrid outline upgrade preserves the screen group and adds world geometry'
       },
     },
   };
-  const renderer = createHybridAnnotationRenderer(viewer);
+  const { store, renderer } = hybridWithBoard(viewer);
   const anno = {
     id: 'anno-hybrid-fb3',
     type: 'area',
@@ -319,10 +189,8 @@ test('hybrid outline upgrade preserves the screen group and adds world geometry'
   };
 
   renderer.add(anno);
-  const before = findAnnotationGroup(globalThis.document);
-  const originalCallout = before.group.querySelector('.gev-anno-callout');
-  const originalDot = before.group.querySelector('.gev-anno-dot');
-  assert.equal(before.group.querySelectorAll('.gev-anno-ring').length, 2);
+  const [before] = annotationGroups(store);
+  assert.equal(childrenWithClass(before, 'gev-anno-ring').length, 2);
   assert.equal(dataSources.length, 1);
   assert.equal(dataSources[0].entities.values.length, 0);
 
@@ -339,18 +207,22 @@ test('hybrid outline upgrade preserves the screen group and adds world geometry'
   anno.footprintKind = 'area';
   renderer.update(anno);
 
-  const after = findAnnotationGroup(globalThis.document);
+  const [after, ...others] = annotationGroups(store);
   const expectedWindow = Cesium.SceneTransforms.worldToWindowCoordinates(
     scene,
     Cesium.Cartesian3.fromDegrees(centroid.lon, centroid.lat, centroid.height),
   );
-  assert.equal(after.group, before.group, 'the real hybrid keeps the existing SVG group');
-  assert.equal(after.svg.children.filter((child) => child.classList.contains('gev-anno')).length, 1);
-  assert.equal(after.group.querySelectorAll('.gev-anno-ring').length, 0, 'screen reticle rings are removed');
-  assert.equal(after.group.querySelector('.gev-anno-callout'), originalCallout, 'the callout node is retained');
-  assert.equal(after.group.querySelector('.gev-anno-dot'), originalDot, 'the anchor dot is retained');
-  assert.equal(originalDot.getAttribute('cx'), expectedWindow.x.toFixed(1));
-  assert.equal(originalDot.getAttribute('cy'), expectedWindow.y.toFixed(1));
+  assert.equal(after.key, before.key, 'the real hybrid keeps the existing screen mark');
+  assert.equal(others.length, 0);
+  assert.equal(childrenWithClass(after, 'gev-anno-ring').length, 0, 'screen reticle rings are removed');
+  assert.deepEqual(
+    after.children.map((child) => child.key),
+    ['dot', 'leader', 'callout'],
+    'the dot, leader and callout are retained',
+  );
+  const dot = after.children.find((child) => child.key === 'dot');
+  assert.equal(dot.attrs.cx, expectedWindow.x.toFixed(1));
+  assert.equal(dot.attrs.cy, expectedWindow.y.toFixed(1));
   assert.deepEqual(centroid, { lon: -100.8, lat: 29.4, height: 0 }, 'closed-ring vertex mean stays pinned');
   assert.equal(dataSources[0].entities.values.length, 2, 'world area adds one fill and one outline');
   assert.equal(dataSources[0].entities.values.filter((entity) => entity.polygon).length, 1);
@@ -370,7 +242,7 @@ test('hybrid outline upgrade preserves the screen group and adds world geometry'
 test('a sub-renderer throw mid-add leaves state the rollback can still remove', (t) => {
   installBrowserGlobals(t);
   const { viewer, dataSources } = fakeViewer(-99, 31);
-  const renderer = createHybridAnnotationRenderer(viewer);
+  const { store, renderer } = hybridWithBoard(viewer);
   const ring = [[-106, 25], [-93, 25], [-93, 36], [-106, 36], [-106, 25]];
   const anno = {
     id: 'anno-partial-add',
@@ -386,20 +258,19 @@ test('a sub-renderer throw mid-add leaves state the rollback can still remove',
 
   // The world drape lands first; the screen caption then fails the way a lost
   // context does, AFTER the world geometry is already on the board.
-  const { svg } = findAnnotationGroup(globalThis.document);
-  const appendChild = svg.appendChild.bind(svg);
+  const publish = store.publish;
   let failNextInsert = true;
-  svg.appendChild = (child) => {
+  store.publish = (board) => {
     if (failNextInsert) {
       failNextInsert = false;
       throw new Error('screen insert failed');
     }
-    return appendChild(child);
+    return publish(board);
   };
 
   assert.throws(() => renderer.add(anno), /screen insert failed/);
   assert.equal(dataSources[0].entities.values.length, 2, 'the world drape is already live');
-  assert.equal(annotationGroups(svg).length, 0, 'the half-built screen group detached itself');
+  assert.equal(annotationGroups(store).length, 0, 'the half-built screen group detached itself');
 
   // The engine's rollback path — it must reach the partial state by id.
   renderer.remove(anno);
@@ -409,7 +280,7 @@ test('a sub-renderer throw mid-add leaves state the rollback can still remove',
   // an orphan nothing owns.
   renderer.add(anno);
   assert.equal(dataSources[0].entities.values.length, 2, 'the retry draws exactly one world drape');
-  assert.equal(annotationGroups(svg).length, 1, 'and exactly one screen caption');
+  assert.equal(annotationGroups(store).length, 1, 'and exactly one screen caption');
   renderer.remove(anno);
   assert.equal(dataSources[0].entities.values.length, 0);
   renderer.destroy();
@@ -418,7 +289,7 @@ test('a sub-renderer throw mid-add leaves state the rollback can still remove',
 test('a release that throws keeps the mark addressable for a retry cleanup', (t) => {
   installBrowserGlobals(t);
   const { viewer, dataSources } = fakeViewer(-99, 31);
-  const renderer = createHybridAnnotationRenderer(viewer);
+  const { store, renderer } = hybridWithBoard(viewer);
   const ring = [[-106, 25], [-93, 25], [-93, 36], [-106, 36], [-106, 25]];
   const anno = {
     id: 'anno-release-throw',
@@ -433,35 +304,34 @@ test('a release that throws keeps the mark addressable for a retry cleanup', (t)
   };
 
   renderer.add(anno);
-  const { svg } = findAnnotationGroup(globalThis.document);
   assert.equal(dataSources[0].entities.values.length, 2);
-  assert.equal(annotationGroups(svg).length, 1);
+  assert.equal(annotationGroups(store).length, 1);
 
   // The world route releases fine, then the screen release fails part-way
-  // (its fade-out timer throws) — so its SVG group is still in the document.
+  // (its fade-out timer throws) — so its mark is still on the board.
   const workingSetTimeout = globalThis.window.setTimeout;
   globalThis.window.setTimeout = () => { throw new Error('teardown scheduling failed'); };
   assert.throws(() => renderer.remove(anno), /teardown scheduling failed/);
   assert.equal(dataSources[0].entities.values.length, 0, 'the world route did release');
-  assert.equal(annotationGroups(svg).length, 1, 'the screen route did NOT — that is the orphan');
+  assert.equal(annotationGroups(store).length, 1, 'the screen route did NOT — that is the orphan');
 
   // Dropping the routing entry here would make that orphan permanently
   // unreachable. It must still be addressable, so a retry finishes the job.
   globalThis.window.setTimeout = workingSetTimeout;
   renderer.remove(anno);
-  assert.equal(annotationGroups(svg).length, 0, 'the retry cleanup must reach the orphan');
+  assert.equal(annotationGroups(store).length, 0, 'the retry cleanup must reach the orphan');
   assert.equal(dataSources[0].entities.values.length, 0, 'without double-releasing the world route');
 
   // Fully released now — a third call is inert.
   renderer.remove(anno);
-  assert.equal(annotationGroups(svg).length, 0);
+  assert.equal(annotationGroups(store).length, 0);
   renderer.destroy();
 });
 
 test('a world add that fails mid-way leaves its landed entities removable', (t) => {
   installBrowserGlobals(t);
   const { viewer, dataSources } = fakeViewer(-99, 31);
-  const renderer = createHybridAnnotationRenderer(viewer);
+  const { store, renderer } = hybridWithBoard(viewer);
   const ring = [[-106, 25], [-93, 25], [-93, 36], [-106, 36], [-106, 25]];
   const anno = {
     id: 'anno-partial-world-add',
@@ -493,9 +363,8 @@ test('a world add that fails mid-way leaves its landed entities removable', (t)
   assert.equal(entities.values.length, 0,
     'the rollback must see the entities that landed before the throw');
 
-  const { svg } = findAnnotationGroup(globalThis.document);
   renderer.add(anno);
   assert.equal(entities.values.length, 2, 'the retry draws a complete mark');
-  assert.equal(annotationGroups(svg).length, 1);
+  assert.equal(annotationGroups(store).length, 1);
   renderer.destroy();
 });

src/annotations/screenAnnotationRenderer.js

@@ -5,6 +5,9 @@ import {
   TRACKED_OVERLAY_SOURCE_ID,
 } from '../data/trackedReadout.js';
 import { t } from '../i18n/index.js';
+import { nextTick } from 'vue';
+import { useScreenAnnotationsStore } from '../ui/stores/screenAnnotations.js';
+import { applicationPinia } from '../ui/vueRuntime.js';
 
 /** A label whose detailed outline could not be resolved. */
 function outlineUnavailableLabel(label) {
@@ -27,11 +30,17 @@ function outlineUnavailableLabel(label) {
  * Marks behind the globe horizon are culled with an EllipsoidalOccluder, and
  * anything that projects off-screen / behind the camera is hidden.
  *
+ * The board is presented to the screen annotations store, whose view renders
+ * the SVG overlay; each mark's parts are plain attribute records here, and the
+ * view hands back the elements this measures (callout text and mark groups).
+ *
  * Screen-renderer contract (update is used by the hybrid outline-upgrade path):
  *   add(anno) / update(anno) / remove(anno) / sync(map) / destroy()
  */
 
-const SVGNS = 'http://www.w3.org/2000/svg';
+// Keys each mark, so a mark re-added while its predecessor fades out never
+// reuses the fading one's elements.
+let marks = 0;
 const PALETTE = {
   primary: '#8be9ff',
   amber: '#ffb547',
@@ -62,18 +71,26 @@ export function createScreenAnnotationRenderer(
   {
     overlayPaintRect = getOverlayPaintRect,
     activeTrackedReadoutId = getActiveTrackedReadoutId,
+    store = useScreenAnnotationsStore(applicationPinia()),
   } = {},
 ) {
-  injectStyles();
-  const { layer, svg, defs } = buildOverlay();
-  document.body.appendChild(layer);
+  // The arrowhead markers the board's defs hold, in the order first used.
+  const arrowMarkers = new Map();
+  let viewBox = null;
 
   const scene = viewer.scene;
   const occluder = new Cesium.EllipsoidalOccluder(
     Cesium.Ellipsoid.WGS84,
     scene.camera.positionWC,
   );
-  const records = new Map(); // anno.id -> { anno, group, parts }
+  const records = new Map(); // anno.id -> { key, anno, group, parts }
+  const leaving = new Map(); // key -> a removed mark's record while it fades out
+  const byKey = new Map(); // key -> record, live or fading
+  const timers = new Set();
+  const owner = {};
+  let published = '';
+  // Only the renderer whose board the store shows may change or remove it.
+  const shown = () => store.board?.owner === owner;
   const scratch = new Cesium.Cartesian2();
   const scratchDir = new Cesium.Cartesian3();
   // Per-point ground height cache. Marks must sit on the real surface, not at
@@ -151,13 +168,13 @@ export function createScreenAnnotationRenderer(
 
   function add(anno) {
     const c = color(anno);
-    const group = svgEl('g', { class: 'gev-anno', opacity: '0' });
+    const group = { opacity: '0', display: '', entered: false };
     const parts = {};
 
     if (anno.type === 'area' && anno.ring && anno.ring.length >= 3) {
       // Synthesized (buffered/approximate) areas render DASHED + fainter, with no
       // "draw-on" gesture, so they never masquerade as an authoritative boundary.
-      parts.poly = svgEl('polygon', {
+      parts.poly = svgPart('polygon', {
         class: anno.synthesized ? 'gev-anno-area' : 'gev-anno-area gev-draw',
         fill: c,
         stroke: c,
@@ -166,16 +183,14 @@ export function createScreenAnnotationRenderer(
         ...(anno.synthesized ? { 'stroke-dasharray': '9 7' } : {}),
         filter: 'url(#gev-sketch)',
       });
-      group.appendChild(parts.poly);
       parts.label = makeCallout(
         anno.outlineUnavailable
           ? outlineUnavailableLabel(anno.label)
           : anno.label,
         c,
       );
-      if (parts.label) group.appendChild(parts.label.node);
     } else if (anno.type === 'arrow' && anno.to) {
-      parts.path = svgEl('path', {
+      parts.path = svgPart('path', {
         class: 'gev-anno-arrow gev-draw',
         fill: 'none',
         stroke: c,
@@ -183,22 +198,20 @@ export function createScreenAnnotationRenderer(
         'marker-end': `url(#gev-arrow-${anno.color || 'primary'})`,
         filter: 'url(#gev-sketch)',
       });
-      ensureArrowMarker(defs, anno.color || 'primary', c);
-      group.appendChild(parts.path);
+      ensureArrowMarker(arrowMarkers, anno.color || 'primary', c);
       parts.label = makeCallout(
         anno.outlineUnavailable
           ? outlineUnavailableLabel(anno.label)
           : anno.label,
         c,
       );
-      if (parts.label) group.appendChild(parts.label.node);
     } else if (
       anno.type === 'route' &&
       Array.isArray(anno.path) &&
       anno.path.length >= 2
     ) {
       // Multi-waypoint path: a drawn-on polyline with a dot at each waypoint.
-      parts.poly = svgEl('polyline', {
+      parts.poly = svgPart('polyline', {
         class: 'gev-anno-arrow gev-draw',
         fill: 'none',
         stroke: c,
@@ -206,37 +219,33 @@ export function createScreenAnnotationRenderer(
         'marker-end': `url(#gev-arrow-${anno.color || 'primary'})`,
         filter: 'url(#gev-sketch)',
       });
-      ensureArrowMarker(defs, anno.color || 'primary', c);
-      group.appendChild(parts.poly);
-      parts.dots = anno.path.map(() => {
-        const dot = svgEl('circle', {
+      ensureArrowMarker(arrowMarkers, anno.color || 'primary', c);
+      parts.dots = anno.path.map(() =>
+        svgPart('circle', {
           class: 'gev-anno-dot',
           fill: c,
           stroke: '#06121c',
           'stroke-width': '2',
           r: '4',
-        });
-        group.appendChild(dot);
-        return dot;
-      });
+        }),
+      );
       parts.label = makeCallout(
         anno.outlineUnavailable
           ? outlineUnavailableLabel(anno.label)
           : anno.label,
         c,
       );
-      if (parts.label) group.appendChild(parts.label.node);
     } else {
       // pin / highlight / label — pulsing target rings + a marker dot + callout
       if (anno.type !== 'label') {
-        parts.ringOuter = svgEl('circle', {
+        parts.ringOuter = svgPart('circle', {
           class: 'gev-anno-ring gev-pulse',
           fill: 'none',
           stroke: c,
           'stroke-width': '2',
           r: '34',
         });
-        parts.ringInner = svgEl('circle', {
+        parts.ringInner = svgPart('circle', {
           class: 'gev-anno-ring',
           fill: c,
           'fill-opacity': '0.12',
@@ -245,70 +254,57 @@ export function createScreenAnnotationRenderer(
           r: '18',
           filter: 'url(#gev-sketch)',
         });
-        group.appendChild(parts.ringOuter);
-        group.appendChild(parts.ringInner);
       }
-      parts.dot = svgEl('circle', {
+      parts.dot = svgPart('circle', {
         class: 'gev-anno-dot',
         fill: c,
         stroke: '#06121c',
         'stroke-width': '2',
         r: anno.type === 'label' ? '4' : '5',
       });
-      group.appendChild(parts.dot);
-      parts.leader = svgEl('line', {
+      parts.leader = svgPart('line', {
         class: 'gev-anno-leader',
         stroke: c,
         'stroke-width': '1.5',
         'stroke-opacity': '0.7',
       });
-      group.appendChild(parts.leader);
       parts.label = makeCallout(
         anno.outlineUnavailable
           ? outlineUnavailableLabel(anno.label)
           : anno.label,
         c,
       );
-      if (parts.label) group.appendChild(parts.label.node);
     }
 
-    // Record the mark BEFORE it touches the live document, then unwind on any
-    // throw from here down (projectAll reaches into Cesium and can fail on a
-    // lost context). Previously a throw past the DOM insert left an ORPHANED
-    // <g>: the engine's rollback only deletes its own map entry, so the next
-    // annotate of the same geometry stacked a fresh mark on top of the corpse.
-    records.set(anno.id, { anno, group, parts });
+    // Record the mark BEFORE it reaches the board, then unwind on any throw
+    // from here down (projectAll reaches into Cesium and can fail on a lost
+    // context). Previously a throw past the insert left an ORPHANED mark: the
+    // engine's rollback only deletes its own map entry, so the next annotate
+    // of the same geometry stacked a fresh mark on top of the corpse.
+    const rec = { key: ++marks, anno, group, parts, drawn: false };
+    records.set(anno.id, rec);
+    byKey.set(rec.key, rec);
     try {
-      svg.appendChild(group);
-      // trigger draw-on / fade-in on the next frame
-      requestAnimationFrame(() => group.classList.add('gev-in'));
-      // The draw-on effect uses a fixed stroke-dasharray of 1400 (see CSS). Any
-      // stroke longer than 1400px (a long arrow/route on a wide window) would keep
-      // a permanent dash gap — the arrowhead detaches from the truncated line (H6).
-      // Once the dashoffset transition finishes the stroke is meant to be fully
-      // drawn, so drop the dasharray entirely then and the stroke reads solid at
-      // any length. Guarded on the specific property so an unrelated transition
-      // (none here, but defensive) doesn't clear it early.
-      for (const drawEl of group.querySelectorAll('.gev-draw')) {
-        drawEl.addEventListener(
-          'transitionend',
-          (e) => {
-            if (e.propertyName === 'stroke-dashoffset') {
-              drawEl.style.strokeDasharray = 'none';
-            }
-          },
-          { once: true },
-        );
-      }
+      publish({ force: true });
+      // Trigger draw-on / fade-in on the next frame, once the view has the
+      // mark in the document. The draw-on effect uses a fixed
+      // stroke-dasharray of 1400 (see CSS); the view reports the end of the
+      // dashoffset transition, after which the stroke drops its dasharray so
+      // a stroke longer than 1400px reads solid (H6).
+      requestAnimationFrame(() => {
+        group.entered = true;
+        publish();
+      });
       projectAll();
     } catch (error) {
       // Hard, immediate unwind — a mark that never finished has nothing to
       // fade out, and the caller (engine rollback) must find a clean board.
       records.delete(anno.id);
+      byKey.delete(rec.key);
       try {
-        group.remove();
+        publish({ force: true });
       } catch {
-        /* never inserted */
+        /* the board is unreachable */
       }
       if (records.size === 0) heightCache.clear();
       throw error;
@@ -328,12 +324,18 @@ export function createScreenAnnotationRenderer(
     }
     rec.anno = anno;
     if (anno.outlineUnavailable && rec.parts.label) {
-      rec.parts.label.text.textContent = outlineUnavailableLabel(anno.label);
-      sizeCallout(rec.parts.label);
+      rec.parts.label.text = outlineUnavailableLabel(anno.label);
+      // Re-measure once the view shows the new text.
+      const label = rec.parts.label;
+      publish();
+      void nextTick(() => {
+        if (rec.parts.label !== label || !sizeCallout(label)) return;
+        projectAll();
+        publish();
+      });
     }
 
     if (empty) {
-      for (const child of Array.from(rec.group.children)) child.remove();
       rec.parts = {};
       rec.hidden = true;
       projectAll();
@@ -346,11 +348,9 @@ export function createScreenAnnotationRenderer(
     // label, whose dot/leader/callout already exist; remove the two reticle rings and
     // keep every remaining node (especially the group and callout) alive.
     if (anno.type === 'label' && rec.parts.dot) {
-      rec.parts.ringOuter?.remove();
-      rec.parts.ringInner?.remove();
       delete rec.parts.ringOuter;
       delete rec.parts.ringInner;
-      rec.parts.dot.setAttribute('r', String(LABEL_DOT_R));
+      rec.parts.dot.set.r = String(LABEL_DOT_R);
       projectAll();
       return;
     }
@@ -466,13 +466,16 @@ export function createScreenAnnotationRenderer(
   }
 
   function projectAll() {
-    if (!records.size) return;
+    if (!records.size) {
+      publish();
+      return;
+    }
     projGen += 1; // new frame: entries touched below are "hot" and survive trimming
     const trackedRect = trackedEntityRect();
     occluder.cameraPosition = scene.camera.positionWC;
     const h = scene.canvas.clientHeight || scene.canvas.height;
     const w = scene.canvas.clientWidth || scene.canvas.width;
-    svg.setAttribute('viewBox', `0 0 ${w} ${h}`);
+    viewBox = `0 0 ${w} ${h}`;
     // Shrink point-marker geometry as the camera pulls back (declutter the blob).
     const mScale = markScale(
       viewer.camera.positionCartographic?.height ?? 1000,
@@ -481,10 +484,16 @@ export function createScreenAnnotationRenderer(
     for (const rec of records.values()) {
       const { anno, group, parts } = rec;
       if (rec.hidden) {
-        group.style.display = 'none';
+        group.display = 'none';
         continue;
       }
-      group.setAttribute('opacity', String(anno.alpha ?? 1));
+      // The last frame's tracked fade holds until this frame's is measured.
+      group.opacity = String(
+        (anno.alpha ?? 1) *
+          (rec._trackedFade !== undefined && rec._trackedFade !== 1
+            ? rec._trackedFade
+            : 1),
+      );
 
       if (anno.type === 'area' && parts.poly) {
         const pts = [];
@@ -500,12 +509,12 @@ export function createScreenAnnotationRenderer(
           n++;
         }
         if (pts.length >= 3) {
-          parts.poly.setAttribute('points', pts.join(' '));
-          group.style.display = '';
+          parts.poly.set.points = pts.join(' ');
+          group.display = '';
           if (parts.label)
             positionCallout(parts.label, cx / n, cy / n - 6, true);
         } else {
-          group.style.display = 'none';
+          group.display = 'none';
         }
       } else if (anno.type === 'arrow' && parts.path) {
         const a = project(anno.anchor.lon, anno.anchor.lat);
@@ -520,11 +529,8 @@ export function createScreenAnnotationRenderer(
           const bow = Math.min(60, len * 0.18);
           const ctrlX = mx - (dy / len) * bow;
           const ctrlY = my + (dx / len) * bow;
-          parts.path.setAttribute(
-            'd',
-            `M ${a.x.toFixed(1)} ${a.y.toFixed(1)} Q ${ctrlX.toFixed(1)} ${ctrlY.toFixed(1)} ${b.x.toFixed(1)} ${b.y.toFixed(1)}`,
-          );
-          group.style.display = '';
+          parts.path.set.d = `M ${a.x.toFixed(1)} ${a.y.toFixed(1)} Q ${ctrlX.toFixed(1)} ${ctrlY.toFixed(1)} ${b.x.toFixed(1)} ${b.y.toFixed(1)}`;
+          group.display = '';
           // Anchor the label to the (stable) endpoint midpoint, lifted toward the bow.
           if (parts.label)
             positionCallout(
@@ -534,7 +540,7 @@ export function createScreenAnnotationRenderer(
               true,
             );
         } else {
-          group.style.display = 'none';
+          group.display = 'none';
         }
       } else if (anno.type === 'route' && parts.poly) {
         const projected = anno.path.map((pt) => project(pt.lon, pt.lat));
@@ -543,19 +549,19 @@ export function createScreenAnnotationRenderer(
           if (p) pts.push(`${p.x.toFixed(1)},${p.y.toFixed(1)}`);
         }
         if (pts.length >= 2) {
-          parts.poly.setAttribute('points', pts.join(' '));
+          parts.poly.set.points = pts.join(' ');
           // dots at each resolvable waypoint; hide the rest
           parts.dots.forEach((dot, i) => {
             const p = projected[i];
             if (p) {
-              dot.setAttribute('cx', p.x.toFixed(1));
-              dot.setAttribute('cy', p.y.toFixed(1));
-              dot.style.display = '';
+              dot.set.cx = p.x.toFixed(1);
+              dot.set.cy = p.y.toFixed(1);
+              dot.display = '';
             } else {
-              dot.style.display = 'none';
+              dot.display = 'none';
             }
           });
-          group.style.display = '';
+          group.display = '';
           // label at the middle waypoint
           const mid =
             projected.filter(Boolean)[
@@ -564,33 +570,22 @@ export function createScreenAnnotationRenderer(
           if (parts.label && mid)
             positionCallout(parts.label, mid.x, mid.y - 12, true);
         } else {
-          group.style.display = 'none';
+          group.display = 'none';
         }
       } else {
         const p = project(anno.anchor.lon, anno.anchor.lat);
         if (p) {
-          group.style.display = '';
+          group.display = '';
           const baseDotR = anno.type === 'label' ? LABEL_DOT_R : DOT_R;
-          if (parts.dot) {
-            parts.dot.setAttribute('cx', p.x.toFixed(1));
-            parts.dot.setAttribute('cy', p.y.toFixed(1));
-            parts.dot.setAttribute('r', (baseDotR * mScale).toFixed(1));
-          }
-          if (parts.ringOuter) {
-            parts.ringOuter.setAttribute('cx', p.x.toFixed(1));
-            parts.ringOuter.setAttribute('cy', p.y.toFixed(1));
-            parts.ringOuter.setAttribute(
-              'r',
-              (RING_OUTER_R * mScale).toFixed(1),
-            );
-          }
-          if (parts.ringInner) {
-            parts.ringInner.setAttribute('cx', p.x.toFixed(1));
-            parts.ringInner.setAttribute('cy', p.y.toFixed(1));
-            parts.ringInner.setAttribute(
-              'r',
-              (RING_INNER_R * mScale).toFixed(1),
-            );
+          for (const [part, radius] of [
+            [parts.dot, baseDotR],
+            [parts.ringOuter, RING_OUTER_R],
+            [parts.ringInner, RING_INNER_R],
+          ]) {
+            if (!part) continue;
+            part.set.cx = p.x.toFixed(1);
+            part.set.cy = p.y.toFixed(1);
+            part.set.r = (radius * mScale).toFixed(1);
           }
           if (parts.label) {
             // Keep the callout tucked near the (now smaller) reticle by scaling its offset.
@@ -598,18 +593,15 @@ export function createScreenAnnotationRenderer(
             const ly = p.y - 34 * mScale;
             positionCallout(parts.label, lx, ly, false);
             if (parts.leader) {
-              parts.leader.setAttribute('x1', p.x.toFixed(1));
-              parts.leader.setAttribute('y1', p.y.toFixed(1));
-              parts.leader.setAttribute('x2', lx.toFixed(1));
-              parts.leader.setAttribute(
-                'y2',
-                (ly + parts.label.height).toFixed(1),
-              );
+              parts.leader.set.x1 = p.x.toFixed(1);
+              parts.leader.set.y1 = p.y.toFixed(1);
+              parts.leader.set.x2 = lx.toFixed(1);
+              parts.leader.set.y2 = (ly + parts.label.height).toFixed(1);
               parts.label._leader = parts.leader; // so de-collision can re-point it
             }
           }
         } else {
-          group.style.display = 'none';
+          group.display = 'none';
         }
       }
     }
@@ -621,7 +613,7 @@ export function createScreenAnnotationRenderer(
       if (
         cal &&
         cal.sized &&
-        rec.group.style.display !== 'none' &&
+        rec.group.display !== 'none' &&
         Number.isFinite(cal._x)
       ) {
         placed.push(cal);
@@ -629,23 +621,44 @@ export function createScreenAnnotationRenderer(
     }
     if (placed.length > 1) decollideCallouts(placed);
 
-    // Tracked-entity z-order — runs AFTER all geometry + callout de-collision so each
-    // group's bbox reflects its final on-screen extent. Any mark whose bbox INTERSECTS
-    // the tracked entity's screen footprint is faded toward FULLY HIDDEN (target 0, not a
-    // partial dim) so the tracked plane/ship reads as genuinely ON TOP. The fade is EASED
-    // per frame (no abrupt pop as the entity crosses a mark) and reverses smoothly when
-    // it moves off. Every screen mark here is point-like (pins/labels/reticles/arrows) —
-    // the big area/route footprints live in the world layer — so fully hiding an
-    // overlapped one is safe and not jarring.
+    publish();
+    // Tracked-entity z-order — measured once the view shows this frame's
+    // geometry (still before the browser paints it).
+    const fading = [...records.values()].some(
+      (rec) => rec._trackedFade !== undefined && rec._trackedFade !== 1,
+    );
+    if ((trackedRect || fading) && !trackedPending) {
+      trackedPending = true;
+      void nextTick(() => {
+        trackedPending = false;
+        fadeTracked(trackedRect);
+      });
+    }
+  }
+
+  let trackedPending = false;
+
+  // Runs AFTER all geometry + callout de-collision are in the document so each
+  // group's bbox reflects its final on-screen extent. Any mark whose bbox
+  // INTERSECTS the tracked entity's screen footprint is faded toward FULLY
+  // HIDDEN (target 0, not a partial dim) so the tracked plane/ship reads as
+  // genuinely ON TOP. The fade is EASED per frame (no abrupt pop as the entity
+  // crosses a mark) and reverses smoothly when it moves off. Every screen mark
+  // here is point-like (pins/labels/reticles/arrows) — the big area/route
+  // footprints live in the world layer — so fully hiding an overlapped one is
+  // safe and not jarring.
+  function fadeTracked(trackedRect) {
+    if (!shown()) return;
+    let changed = false;
     for (const rec of records.values()) {
       const { anno, group } = rec;
-      if (group.style.display === 'none') continue;
+      if (group.display === 'none') continue;
       const cur = rec._trackedFade ?? 1;
       let overlapping = false;
       if (trackedRect) {
         let bb = null;
         try {
-          bb = group.getBBox();
+          bb = rec.element?.getBBox() ?? null;
         } catch {
           bb = null;
         }
@@ -666,32 +679,109 @@ export function createScreenAnnotationRenderer(
       const target = overlapping ? 0 : 1;
       const next = cur + (target - cur) * TRACKED_FADE_EASE;
       rec._trackedFade = Math.abs(next - target) < 0.02 ? target : next;
-      // Only override when faded — otherwise leave the base alpha (set above) intact.
-      // (The CSS `transition: opacity` was removed from .gev-anno so this per-frame JS ease
-      // is the ONLY easing — previously the two fought and produced an opacity oscillation.)
-      if (rec._trackedFade !== 1) {
-        group.setAttribute(
-          'opacity',
-          String((anno.alpha ?? 1) * rec._trackedFade),
-        );
+      // The base alpha applies unless faded. (The CSS `transition: opacity` was
+      // removed from .gev-anno so this per-frame JS ease is the ONLY easing —
+      // previously the two fought and produced an opacity oscillation.)
+      const opacity = String(
+        (anno.alpha ?? 1) * (rec._trackedFade !== 1 ? rec._trackedFade : 1),
+      );
+      if (opacity !== group.opacity) {
+        group.opacity = opacity;
+        changed = true;
       }
     }
+    if (changed) publish();
+  }
+
+  /** The board as its view renders it: one entry per live or fading mark. */
+  function boardView() {
+    const view = (rec, fading) => ({
+      key: rec.key,
+      className: fading
+        ? 'gev-anno gev-out'
+        : rec.group.entered
+          ? 'gev-anno gev-in'
+          : 'gev-anno',
+      opacity: rec.group.opacity,
+      display: rec.group.display,
+      drawn: rec.drawn,
+      children: partViews(rec.parts),
+    });
+    return {
+      owner,
+      viewBox,
+      markers: [...arrowMarkers].map(([key, fill]) => ({ key, fill })),
+      // In the order the marks were added, fading ones where they were.
+      marks: [
+        ...[...records.values()].map((rec) => view(rec, false)),
+        ...[...leaving.values()].map((rec) => rec.view),
+      ].sort((a, b) => a.key - b.key),
+    };
+  }
+
+  /** Present the board; an unchanged one is not sent again unless forced. */
+  function publish({ force = false } = {}) {
+    if (!shown()) return;
+    const board = boardView();
+    const signature = JSON.stringify(board, (name, value) =>
+      name === 'owner' ? undefined : value,
+    );
+    if (!force && signature === published) return;
+    published = signature;
+    store.publish(board);
+  }
+
+  /** Take (or, with null, drop) an element the view rendered for a mark. */
+  function attach(key, kind, element) {
+    const rec = byKey.get(key);
+    if (!rec) return;
+    if (kind === 'group') {
+      rec.element = element;
+      // Lay the new mark out before its next-frame `gev-in`, so the draw-on
+      // transition starts from the undrawn stroke.
+      try {
+        element?.getBBox();
+      } catch {
+        /* not laid out */
+      }
+    } else if (kind === 'text' && rec.parts.label) {
+      rec.parts.label.element = element;
+      // Size the card to its text once the text is in the document.
+      if (element && sizeCallout(rec.parts.label) && records.has(rec.anno.id))
+        projectAll();
+    }
+  }
+
+  /** The draw-on stroke finished: it reads solid from now on. */
+  function drawn(key) {
+    const rec = byKey.get(key);
+    if (!rec || rec.drawn) return;
+    rec.drawn = true;
+    publish();
   }
 
   function remove(anno) {
     const rec = records.get(anno.id);
     if (!rec) return;
-    rec.group.classList.remove('gev-in');
-    rec.group.classList.add('gev-out');
-    const node = rec.group;
-    window.setTimeout(() => {
-      try {
-        node.remove();
-      } catch {
-        /* gone */
-      }
-    }, 360);
+    // The fading mark keeps the look it had; it leaves the board after 360 ms.
+    rec.view = { ...boardView().marks.find((mark) => mark.key === rec.key) };
+    rec.view.className = 'gev-anno gev-out';
+    leaving.set(rec.key, rec);
+    let timer;
+    try {
+      timer = window.setTimeout(() => {
+        timers.delete(timer);
+        leaving.delete(rec.key);
+        byKey.delete(rec.key);
+        publish();
+      }, 360);
+    } catch (error) {
+      leaving.delete(rec.key);
+      throw error;
+    }
+    if (leaving.has(rec.key)) timers.add(timer);
     records.delete(anno.id);
+    publish();
     // Board emptied → drop accumulated height samples (natural reset point).
     if (records.size === 0) heightCache.clear();
   }
@@ -707,87 +797,104 @@ export function createScreenAnnotationRenderer(
     } catch {
       /* torn down */
     }
-    try {
-      layer.remove();
-    } catch {
-      /* gone */
+    for (const timer of timers) clearTimeout(timer);
+    timers.clear();
+    if (shown()) {
+      store.connect(null);
+      store.publish(null);
     }
     records.clear();
+    leaving.clear();
+    byKey.clear();
     heightCache.clear();
   }
 
+  // Claim the board; from here on only this renderer's own board changes.
+  store.publish(boardView());
+  store.connect({
+    attach: (from, key, kind, element) => {
+      if (from === owner && shown()) attach(key, kind, element);
+    },
+    drawn: (from, key) => {
+      if (from === owner && shown()) drawn(key);
+    },
+  });
+
   return { add, update, remove, sync, destroy };
 }
 
 // --- SVG helpers ------------------------------------------------------------
 
-function buildOverlay() {
-  const layer = document.createElement('div');
-  layer.className = 'gev-screen-whiteboard';
-  const svg = document.createElementNS(SVGNS, 'svg');
-  svg.setAttribute('class', 'gev-screen-whiteboard-svg');
-  svg.setAttribute('preserveAspectRatio', 'none');
-  const defs = document.createElementNS(SVGNS, 'defs');
-  // subtle hand-drawn wobble for strokes
-  defs.innerHTML = `
-    <filter id="gev-sketch" x="-20%" y="-20%" width="140%" height="140%">
-      <feTurbulence type="fractalNoise" baseFrequency="0.014" numOctaves="2" seed="7" result="n"/>
-      <feDisplacementMap in="SourceGraphic" in2="n" scale="2.2" xChannelSelector="R" yChannelSelector="G"/>
-    </filter>`;
-  svg.appendChild(defs);
-  layer.appendChild(svg);
-  return { layer, svg, defs };
+/**
+ * One SVG element of a mark as plain data: the attributes it starts with, the
+ * ones each frame sets, and whether it is shown.
+ */
+function svgPart(tag, attrs) {
+  return { tag, attrs, set: {}, display: '' };
+}
+
+/** A mark's parts in document order, as the view renders them. */
+function partViews(parts) {
+  const views = [];
+  const element = (key, part) =>
+    views.push({
+      key,
+      tag: part.tag,
+      attrs: { ...part.attrs, ...part.set },
+      display: part.display,
+    });
+  if (parts.poly) element('poly', parts.poly);
+  if (parts.path) element('path', parts.path);
+  parts.dots?.forEach((dot, index) => element(`dot-${index}`, dot));
+  if (parts.ringOuter) element('ring-outer', parts.ringOuter);
+  if (parts.ringInner) element('ring-inner', parts.ringInner);
+  if (parts.dot) element('dot', parts.dot);
+  if (parts.leader) element('leader', parts.leader);
+  const label = parts.label;
+  if (label)
+    views.push({
+      key: 'callout',
+      tag: 'callout',
+      text: label.text,
+      fill: label.fill,
+      transform: label.transform,
+      // The card is sized to its text once the text has been measured.
+      card: label.sized
+        ? { width: String(label.width), height: String(label.height) }
+        : {},
+      accent: label.sized
+        ? { height: String(label.height - 8), x: '0', y: '4' }
+        : {},
+    });
+  return views;
 }
 
 function makeCallout(text, c) {
   if (!text) return null;
-  const node = document.createElementNS(SVGNS, 'g');
-  node.setAttribute('class', 'gev-anno-callout');
-  const rect = document.createElementNS(SVGNS, 'rect');
-  rect.setAttribute('rx', '5');
-  rect.setAttribute('class', 'gev-anno-card');
-  const t = document.createElementNS(SVGNS, 'text');
-  t.setAttribute('class', 'gev-anno-text');
-  t.setAttribute('x', '9');
-  t.setAttribute('y', '16');
-  t.textContent = text;
-  const accent = document.createElementNS(SVGNS, 'rect');
-  accent.setAttribute('class', 'gev-anno-accent');
-  accent.setAttribute('width', '3');
-  accent.setAttribute('rx', '1.5');
-  accent.setAttribute('fill', c);
-  node.appendChild(rect);
-  node.appendChild(accent);
-  node.appendChild(t);
-  const callout = {
-    node,
-    rect,
-    text: t,
-    accent,
+  return {
+    text,
+    fill: c,
+    element: null,
+    transform: null,
     width: 0,
     height: 26,
     sized: false,
   };
-  // size the card to the text once it is in the DOM
-  requestAnimationFrame(() => sizeCallout(callout));
-  return callout;
 }
 
+/** Size a callout to its rendered text; false until the text is laid out. */
 function sizeCallout(callout) {
   try {
-    const bbox = callout.text.getBBox();
+    const bbox = callout.element.getBBox();
     const w = Math.max(24, bbox.width + 18);
     const h = Math.max(22, bbox.height + 10);
-    callout.rect.setAttribute('width', String(w));
-    callout.rect.setAttribute('height', String(h));
-    callout.accent.setAttribute('height', String(h - 8));
-    callout.accent.setAttribute('x', '0');
-    callout.accent.setAttribute('y', '4');
     callout.width = w;
     callout.height = h;
     callout.sized = true;
+    return true;
   } catch {
     /* not laid out yet */
+    return false;
   }
 }
 
@@ -796,10 +903,7 @@ function positionCallout(callout, x, y, center) {
   const tx = center ? x - callout.width / 2 : x;
   callout._x = tx;
   callout._y = y;
-  callout.node.setAttribute(
-    'transform',
-    `translate(${tx.toFixed(1)}, ${y.toFixed(1)})`,
-  );
+  callout.transform = `translate(${tx.toFixed(1)}, ${y.toFixed(1)})`;
 }
 
 /**
@@ -817,71 +921,17 @@ function decollideCallouts(callouts) {
       const overlapY = a._y < b._y + b.height && a._y + a.height > b._y;
       if (overlapX && overlapY) {
         a._y = b._y + b.height + 5;
-        a.node.setAttribute(
-          'transform',
-          `translate(${a._x.toFixed(1)}, ${a._y.toFixed(1)})`,
-        );
+        a.transform = `translate(${a._x.toFixed(1)}, ${a._y.toFixed(1)})`;
         if (a._leader) {
-          a._leader.setAttribute('x2', a._x.toFixed(1));
-          a._leader.setAttribute('y2', a._y.toFixed(1));
+          a._leader.set.x2 = a._x.toFixed(1);
+          a._leader.set.y2 = a._y.toFixed(1);
         }
       }
     }
   }
 }
 
-function ensureArrowMarker(defs, key, c) {
-  if (defs.querySelector(`#gev-arrow-${key}`)) return;
-  const marker = document.createElementNS(SVGNS, 'marker');
-  marker.setAttribute('id', `gev-arrow-${key}`);
-  marker.setAttribute('viewBox', '0 0 10 10');
-  marker.setAttribute('refX', '8');
-  marker.setAttribute('refY', '5');
-  marker.setAttribute('markerWidth', '7');
-  marker.setAttribute('markerHeight', '7');
-  marker.setAttribute('orient', 'auto-start-reverse');
-  const path = document.createElementNS(SVGNS, 'path');
-  path.setAttribute('d', 'M 0 0 L 10 5 L 0 10 z');
-  path.setAttribute('fill', c);
-  marker.appendChild(path);
-  defs.appendChild(marker);
-}
-
-function svgEl(tag, attrs) {
-  const el = document.createElementNS(SVGNS, tag);
-  for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, v);
-  return el;
-}
-
-function injectStyles() {
-  if (document.getElementById('gev-screen-whiteboard-styles')) return;
-  const style = document.createElement('style');
-  style.id = 'gev-screen-whiteboard-styles';
-  style.textContent = `
-  .gev-screen-whiteboard { position: fixed; inset: 0; pointer-events: none; z-index: 90; }
-  .gev-screen-whiteboard-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
-  /* No CSS opacity transition here on purpose: group opacity is driven per-frame in JS
-     (the 260ms fade-in via computeAlpha, and the tracked-entity z-order ease). A CSS
-     transition fought those per-frame writes and made the tracked-fade opacity oscillate
-     (flicker). Fade-OUT keeps its own transition via .gev-anno.gev-out below. */
-  .gev-anno-ring { filter: drop-shadow(0 0 6px currentColor); }
-  .gev-anno-dot { filter: drop-shadow(0 0 5px rgba(255,255,255,0.6)); }
-  .gev-anno-area { filter: drop-shadow(0 0 5px currentColor); }
-  .gev-anno-arrow { filter: drop-shadow(0 0 4px currentColor); stroke-linecap: round; }
-  .gev-anno-leader { stroke-dasharray: 2 3; }
-  .gev-anno-card { fill: rgba(8,18,28,0.78); stroke: rgba(255,255,255,0.14); stroke-width: 1; }
-  .gev-anno-text { fill: #eaf6ff; font: 600 13px "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.02em; }
-  /* draw-on: outlined shapes reveal their stroke */
-  .gev-draw { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
-  .gev-anno.gev-in .gev-draw { transition: stroke-dashoffset 900ms ease-out; stroke-dashoffset: 0; }
-  /* opacity-only fade-in: a CSS transform here would override the SVG transform
-     attribute used to POSITION the callout and snap it to 0,0. */
-  .gev-anno-callout { opacity: 0; }
-  .gev-anno.gev-in .gev-anno-callout { animation: gev-pop 320ms ease-out both; }
-  .gev-anno.gev-out { opacity: 0 !important; transition: opacity 320ms ease; }
-  .gev-pulse { animation: gev-ring-pulse 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
-  @keyframes gev-ring-pulse { 0%,100% { opacity: 0.9; stroke-width: 2; } 50% { opacity: 0.35; stroke-width: 3.5; } }
-  @keyframes gev-pop { from { opacity: 0; } to { opacity: 1; } }
-  `;
-  document.head.appendChild(style);
+/** Record the arrowhead marker for a color, unless one is already defined. */
+function ensureArrowMarker(markers, key, c) {
+  if (!markers.has(key)) markers.set(key, c);
 }

src/annotations/screenAnnotationRenderer.test.mjs

@@ -1,164 +1,177 @@
+import '../testSupport/registerDom.mjs';
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
 import * as Cesium from 'cesium';
+import { createApp, nextTick } from 'vue';
+import { createPinia } from 'pinia';
+import { useScreenAnnotationsStore } from '../ui/stores/screenAnnotations.js';
+import ScreenAnnotations from '../ui/views/panels/ScreenAnnotations.vue';
 import { createScreenAnnotationRenderer } from './screenAnnotationRenderer.js';
 
-class FakeClassList {
-  constructor(owner) {
-    this.owner = owner;
-    this.names = new Set();
-  }
-
-  reset(value) {
-    this.names = new Set(String(value || '').split(/\s+/).filter(Boolean));
-  }
-
-  add(...names) {
-    for (const name of names) this.names.add(name);
-    this.owner.attributes.set('class', Array.from(this.names).join(' '));
-  }
-
-  remove(...names) {
-    for (const name of names) this.names.delete(name);
-    this.owner.attributes.set('class', Array.from(this.names).join(' '));
-  }
-
-  contains(name) {
-    return this.names.has(name);
-  }
+// happy-dom does not lay out SVG; every element measures as a 40 x 16 box.
+for (const type of [globalThis.SVGElement, globalThis.SVGGraphicsElement]) {
+  if (type) type.prototype.getBBox = () => ({ x: 0, y: 0, width: 40, height: 16 });
 }
 
-class FakeElement {
-  constructor(tagName) {
-    this.tagName = tagName;
-    this.attributes = new Map();
-    this.children = [];
-    this.parentNode = null;
-    this.style = {};
-    this.classList = new FakeClassList(this);
-    this.textContent = '';
-  }
+const settle = async () => {
+  for (let flush = 0; flush < 4; flush += 1) await nextTick();
+};
 
-  setAttribute(name, value) {
-    this.attributes.set(name, String(value));
-    if (name === 'class') this.classList.reset(value);
-  }
-
-  getAttribute(name) {
-    return this.attributes.get(name) ?? null;
-  }
-
-  set className(value) {
-    this.setAttribute('class', value);
-  }
-
-  get className() {
-    return this.getAttribute('class') || '';
-  }
-
-  set id(value) {
-    this.setAttribute('id', value);
-  }
-
-  get id() {
-    return this.getAttribute('id') || '';
-  }
-
-  appendChild(child) {
-    child.parentNode = this;
-    this.children.push(child);
-    return child;
-  }
-
-  removeChild(child) {
-    const index = this.children.indexOf(child);
-    if (index >= 0) this.children.splice(index, 1);
-    child.parentNode = null;
-    return child;
-  }
-
-  remove() {
-    this.parentNode?.removeChild(this);
-  }
-
-  querySelector(selector) {
-    return this.querySelectorAll(selector)[0] || null;
-  }
-
-  querySelectorAll(selector) {
-    const className = selector.startsWith('.') ? selector.slice(1) : null;
-    const matches = [];
-    const visit = (node) => {
-      for (const child of node.children) {
-        if (className && child.classList.contains(className)) matches.push(child);
-        visit(child);
-      }
-    };
-    visit(this);
-    return matches;
-  }
-
-  addEventListener() {}
-
-  getBBox() {
-    return { x: 0, y: 0, width: 40, height: 16 };
-  }
-
-  set innerHTML(value) {
-    this._innerHTML = value;
-  }
-}
-
-function fakeDocument() {
-  const head = new FakeElement('head');
-  const body = new FakeElement('body');
-  const roots = [head, body];
-  return {
-    head,
-    body,
-    createElement: (tag) => new FakeElement(tag),
-    createElementNS: (_namespace, tag) => new FakeElement(tag),
-    getElementById(id) {
-      let found = null;
-      const visit = (node) => {
-        if (node.getAttribute('id') === id) found = node;
-        for (const child of node.children) visit(child);
-      };
-      for (const root of roots) visit(root);
-      return found;
-    },
-  };
-}
-
-function findAnnotationGroup(document) {
-  const layer = document.body.children.find((child) => child.classList.contains('gev-screen-whiteboard'));
-  const svg = layer.children.find((child) => child.classList.contains('gev-screen-whiteboard-svg'));
-  return {
-    svg,
-    group: svg.children.find((child) => child.classList.contains('gev-anno')),
-  };
-}
-
-test('outline upgrade preserves the existing SVG group identity', (t) => {
-  const originalDocument = globalThis.document;
+/** Mount the board's view; animation frames run when `frames()` is called. */
+function board(t) {
+  document.body.replaceChildren();
+  const pinia = createPinia();
+  const store = useScreenAnnotationsStore(pinia);
+  const app = createApp(ScreenAnnotations).use(pinia);
+  app.mount(document.body.appendChild(document.createElement('div')));
+  const queued = [];
   const originalRequestAnimationFrame = globalThis.requestAnimationFrame;
-  globalThis.document = fakeDocument();
-  globalThis.requestAnimationFrame = (callback) => { callback(); return 1; };
+  globalThis.requestAnimationFrame = (callback) => queued.push(callback);
   t.after(() => {
-    if (originalDocument === undefined) delete globalThis.document;
-    else globalThis.document = originalDocument;
-    if (originalRequestAnimationFrame === undefined) delete globalThis.requestAnimationFrame;
-    else globalThis.requestAnimationFrame = originalRequestAnimationFrame;
+    globalThis.requestAnimationFrame = originalRequestAnimationFrame;
+    app.unmount();
   });
+  const frames = () => {
+    for (const callback of queued.splice(0)) callback();
+  };
+  const svg = () => document.querySelector('.gev-screen-whiteboard-svg');
+  const groups = () => [...(svg()?.querySelectorAll('g.gev-anno') ?? [])];
+  return { store, frames, svg, groups };
+}
 
+function cameraOver(lon, lat) {
+  const positionWC = Cesium.Cartesian3.fromDegrees(lon, lat, 1000);
+  const directionWC = Cesium.Cartesian3.normalize(
+    Cesium.Cartesian3.negate(positionWC, new Cesium.Cartesian3()),
+    new Cesium.Cartesian3(),
+  );
+  // Low enough that point marks keep their full size.
+  return { positionWC, directionWC, positionCartographic: { height: 500 } };
+}
+
+function sceneFor(camera, extra = {}) {
+  return {
+    camera,
+    canvas: { clientWidth: 800, clientHeight: 600, width: 800, height: 600 },
+    clampToHeightSupported: false,
+    postRender: { addEventListener() {}, removeEventListener() {} },
+    ...extra,
+  };
+}
+
+/** Project every point to the given window position for the test's length. */
+function projectTo(t, at) {
+  const original = Cesium.SceneTransforms.worldToWindowCoordinates;
+  Cesium.SceneTransforms.worldToWindowCoordinates = typeof at === 'function' ? at : () => at;
+  t.after(() => {
+    Cesium.SceneTransforms.worldToWindowCoordinates = original;
+  });
+}
+
+test('a pin renders its reticle, leader and callout on the page board', async (t) => {
+  const { store, frames, svg, groups } = board(t);
+  projectTo(t, { x: 200, y: 300 });
+  const camera = cameraOver(0, 0);
+  const renderer = createScreenAnnotationRenderer(
+    { scene: sceneFor(camera), camera, trackedEntity: null },
+    { store, activeTrackedReadoutId: () => null },
+  );
+  t.after(() => renderer.destroy());
+  renderer.add({
+    id: 'pin',
+    type: 'pin',
+    color: 'amber',
+    label: 'Capitol',
+    alpha: 1,
+    anchor: { lon: 0, lat: 0, height: 0 },
+  });
+  await settle();
+  const layer = document.body.querySelector(':scope > .gev-screen-whiteboard');
+  assert.ok(layer);
+  assert.equal(svg().getAttribute('preserveAspectRatio'), 'none');
+  assert.equal(svg().getAttribute('viewBox'), '0 0 800 600');
+  assert.ok(svg().querySelector('defs > filter#gev-sketch > feTurbulence'));
+  const [group] = groups();
+  assert.equal(group.getAttribute('class'), 'gev-anno');
+  assert.equal(group.getAttribute('opacity'), '1');
+  assert.deepEqual(
+    [...group.children].map((child) => [child.tagName.toLowerCase(), child.getAttribute('class')]),
+    [
+      ['circle', 'gev-anno-ring gev-pulse'],
+      ['circle', 'gev-anno-ring'],
+      ['circle', 'gev-anno-dot'],
+      ['line', 'gev-anno-leader'],
+      ['g', 'gev-anno-callout'],
+    ],
+  );
+  const [outer, inner, dot, leader, callout] = group.children;
+  assert.equal(outer.getAttribute('stroke'), '#ffb547');
+  assert.equal(outer.getAttribute('cx'), '200.0');
+  assert.equal(outer.getAttribute('r'), '34.0');
+  assert.equal(inner.getAttribute('fill-opacity'), '0.12');
+  assert.equal(inner.getAttribute('filter'), 'url(#gev-sketch)');
+  assert.equal(dot.getAttribute('r'), '5.0');
+  assert.equal(leader.getAttribute('x1'), '200.0');
+  assert.equal(leader.getAttribute('x2'), '218.0');
+  // The card is sized to its measured text, and the leader meets its bottom.
+  const [card, accent, text] = callout.children;
+  assert.equal(text.textContent, 'Capitol');
+  assert.equal(text.getAttribute('x'), '9');
+  assert.equal(card.getAttribute('width'), '58');
+  assert.equal(card.getAttribute('height'), '26');
+  assert.equal(accent.getAttribute('height'), '18');
+  assert.equal(accent.getAttribute('fill'), '#ffb547');
+  assert.equal(callout.getAttribute('transform'), 'translate(218.0, 266.0)');
+  assert.equal(leader.getAttribute('y2'), '292.0');
+  frames();
+  await settle();
+  assert.equal(group.getAttribute('class'), 'gev-anno gev-in');
+});
+
+test('an arrow defines its arrowhead and drops the dash once drawn on', async (t) => {
+  const { store, frames, svg, groups } = board(t);
+  let calls = 0;
+  projectTo(t, () => (calls++ % 2 ? { x: 400, y: 100 } : { x: 100, y: 100 }));
+  const camera = cameraOver(0, 0);
+  const renderer = createScreenAnnotationRenderer(
+    { scene: sceneFor(camera), camera, trackedEntity: null },
+    { store, activeTrackedReadoutId: () => null },
+  );
+  t.after(() => renderer.destroy());
+  renderer.add({
+    id: 'arrow',
+    type: 'arrow',
+    color: 'green',
+    alpha: 1,
+    anchor: { lon: 0, lat: 0 },
+    to: { lon: 0.01, lat: 0 },
+  });
+  await settle();
+  const marker = svg().querySelector('defs > marker#gev-arrow-green');
+  assert.equal(marker.getAttribute('orient'), 'auto-start-reverse');
+  assert.equal(marker.querySelector('path').getAttribute('fill'), '#5dff9f');
+  const path = groups()[0].querySelector('path');
+  assert.equal(path.getAttribute('class'), 'gev-anno-arrow gev-draw');
+  assert.equal(path.getAttribute('marker-end'), 'url(#gev-arrow-green)');
+  assert.match(path.getAttribute('d'), /^M 100\.0 100\.0 Q /);
+  frames();
+  await settle();
+  const ended = new Event('transitionend', { bubbles: true });
+  ended.propertyName = 'stroke-dashoffset';
+  path.dispatchEvent(ended);
+  await settle();
+  assert.equal(path.style.strokeDasharray, 'none');
+});
+
+test('outline upgrade preserves the existing SVG group identity', async (t) => {
+  const { store, svg, groups } = board(t);
   const camera = {
     positionWC: Cesium.Cartesian3.ZERO,
     directionWC: Cesium.Cartesian3.ZERO,
     positionCartographic: { height: 1000 },
   };
   const sampledAnchors = [];
-  const scene = {
-    camera,
+  const scene = sceneFor(camera, {
     canvas: { clientWidth: 1280, clientHeight: 720, width: 1280, height: 720 },
     clampToHeightSupported: true,
     clampToHeight(world) {
@@ -169,9 +182,12 @@ test('outline upgrade preserves the existing SVG group identity', (t) => {
       ]);
       return world;
     },
-    postRender: { addEventListener() {}, removeEventListener() {} },
-  };
-  const renderer = createScreenAnnotationRenderer({ scene, camera, trackedEntity: null });
+  });
+  const renderer = createScreenAnnotationRenderer(
+    { scene, camera, trackedEntity: null },
+    { store, activeTrackedReadoutId: () => null },
+  );
+  t.after(() => renderer.destroy());
   const anno = {
     id: 'anno-fb3',
     type: 'area',
@@ -182,8 +198,11 @@ test('outline upgrade preserves the existing SVG group identity', (t) => {
     ring: null,
   };
   renderer.add(anno);
-  const before = findAnnotationGroup(globalThis.document);
-  assert.ok(before.group.querySelector('.gev-anno-ring'), 'pending area starts as a reticle');
+  await settle();
+  const [before] = groups();
+  assert.ok(before.querySelector('.gev-anno-ring'), 'pending area starts as a reticle');
+  const callout = before.querySelector('.gev-anno-callout');
+  const dot = before.querySelector('.gev-anno-dot');
 
   const labelProxy = Object.assign(Object.create(anno), {
     type: 'label',
@@ -191,47 +210,65 @@ test('outline upgrade preserves the existing SVG group identity', (t) => {
     anchor: { lon: -97.5, lat: 31.2, height: 0 },
   });
   renderer.update(labelProxy);
-  const after = findAnnotationGroup(globalThis.document);
+  await settle();
+  const [after] = groups();
 
-  assert.equal(after.group, before.group, 'the rendered group is mutated, not replaced');
+  assert.ok(after === before, 'the rendered group is mutated, not replaced');
   assert.deepEqual(sampledAnchors.at(-1), [-97.5, 31.2], 'the existing group projects from the re-seated anchor');
-  assert.equal(after.svg.children.filter((child) => child.classList.contains('gev-anno')).length, 1);
-  assert.equal(after.group.querySelector('.gev-anno-ring'), null, 'reticle rings are removed in place');
-  assert.ok(after.group.querySelector('.gev-anno-callout'), 'the original callout remains in the group');
-  renderer.destroy();
+  assert.equal(groups().length, 1);
+  assert.equal(after.querySelector('.gev-anno-ring'), null, 'reticle rings are removed in place');
+  assert.ok(after.querySelector('.gev-anno-callout') === callout, 'the original callout remains in the group');
+  assert.ok(after.querySelector('.gev-anno-dot') === dot, 'the anchor dot remains in the group');
+  assert.ok(svg());
 });
 
-test('annotation fade consumes the actual tracked host paint rectangle after layout', (t) => {
-  const originalDocument = globalThis.document;
-  const originalRequestAnimationFrame = globalThis.requestAnimationFrame;
-  const originalProjection = Cesium.SceneTransforms.worldToWindowCoordinates;
-  globalThis.document = fakeDocument();
-  globalThis.requestAnimationFrame = (callback) => { callback(); return 1; };
-  Cesium.SceneTransforms.worldToWindowCoordinates = () => ({ x: 0, y: 0 });
-  t.after(() => {
-    Cesium.SceneTransforms.worldToWindowCoordinates = originalProjection;
-    if (originalDocument === undefined) delete globalThis.document;
-    else globalThis.document = originalDocument;
-    if (originalRequestAnimationFrame === undefined) delete globalThis.requestAnimationFrame;
-    else globalThis.requestAnimationFrame = originalRequestAnimationFrame;
-  });
-
-  const positionWC = Cesium.Cartesian3.fromDegrees(0, 0, 1000);
-  const directionWC = Cesium.Cartesian3.normalize(
-    Cesium.Cartesian3.negate(positionWC, new Cesium.Cartesian3()),
-    new Cesium.Cartesian3(),
-  );
-  const camera = { positionWC, directionWC, positionCartographic: { height: 1000 } };
-  const scene = {
-    camera,
-    canvas: { clientWidth: 800, clientHeight: 600, width: 800, height: 600 },
-    clampToHeightSupported: false,
-    postRender: { addEventListener() {}, removeEventListener() {} },
+test('a callout whose text changes is sized to the new text', async (t) => {
+  const { store, groups } = board(t);
+  projectTo(t, { x: 100, y: 100 });
+  // Text measures 7px a character; everything else keeps the shared box.
+  const original = globalThis.SVGGraphicsElement.prototype.getBBox;
+  globalThis.SVGGraphicsElement.prototype.getBBox = function () {
+    return this.tagName.toLowerCase() === 'text'
+      ? { x: 0, y: 0, width: this.textContent.length * 7, height: 16 }
+      : original.call(this);
   };
+  t.after(() => {
+    globalThis.SVGGraphicsElement.prototype.getBBox = original;
+  });
+  const camera = cameraOver(0, 0);
+  const renderer = createScreenAnnotationRenderer(
+    { scene: sceneFor(camera), camera, trackedEntity: null },
+    { store, activeTrackedReadoutId: () => null },
+  );
+  t.after(() => renderer.destroy());
+  const anno = {
+    id: 'upgrade',
+    type: 'label',
+    color: 'primary',
+    label: 'Texas',
+    alpha: 1,
+    anchor: { lon: 0, lat: 0 },
+  };
+  renderer.add(anno);
+  await settle();
+  const card = () => groups()[0].querySelector('.gev-anno-card');
+  assert.equal(card().getAttribute('width'), String(5 * 7 + 18));
+  renderer.update({ ...anno, outlineUnavailable: true });
+  await settle();
+  const text = 'Texas · Detailed outline unavailable';
+  assert.equal(groups()[0].querySelector('text').textContent, text);
+  assert.equal(card().getAttribute('width'), String(text.length * 7 + 18));
+});
+
+test('annotation fade consumes the actual tracked host paint rectangle after layout', async (t) => {
+  const { store, groups } = board(t);
+  projectTo(t, { x: 0, y: 0 });
+  const camera = cameraOver(0, 0);
   const paintRectCalls = [];
   const renderer = createScreenAnnotationRenderer(
-    { scene, camera, trackedEntity: null },
+    { scene: sceneFor(camera), camera, trackedEntity: null },
     {
+      store,
       activeTrackedReadoutId: () => 'installations:test',
       overlayPaintRect(sourceId, entryId) {
         paintRectCalls.push({ sourceId, entryId });
@@ -239,6 +276,7 @@ test('annotation fade consumes the actual tracked host paint rectangle after lay
       },
     },
   );
+  t.after(() => renderer.destroy());
   renderer.add({
     id: 'anno-overlap',
     type: 'label',
@@ -247,7 +285,8 @@ test('annotation fade consumes the actual tracked host paint rectangle after lay
     alpha: 1,
     anchor: { lon: 0, lat: 0, height: 0 },
   });
-  const { group } = findAnnotationGroup(globalThis.document);
+  await settle();
+  const [group] = groups();
   assert.deepEqual(paintRectCalls.at(-1), {
     sourceId: 'tracked',
     entryId: 'installations:test',
@@ -256,44 +295,59 @@ test('annotation fade consumes the actual tracked host paint rectangle after lay
     Number(group.getAttribute('opacity')) < 1,
     'final annotation bbox fades against the complete painted card rectangle',
   );
+});
+
+test('a removed mark fades out, then leaves the board', async (t) => {
+  const { store, groups } = board(t);
+  projectTo(t, { x: 100, y: 100 });
+  const camera = cameraOver(0, 0);
+  const renderer = createScreenAnnotationRenderer(
+    { scene: sceneFor(camera), camera, trackedEntity: null },
+    { store, activeTrackedReadoutId: () => null },
+  );
+  t.after(() => renderer.destroy());
+  const anno = {
+    id: 'fading',
+    type: 'label',
+    color: 'primary',
+    label: 'Gone soon',
+    alpha: 1,
+    anchor: { lon: 0, lat: 0 },
+  };
+  renderer.add(anno);
+  await settle();
+  const [group] = groups();
+  renderer.remove(anno);
+  // A new mark for the same place gets its own group beside the fading one.
+  renderer.add(anno);
+  await settle();
+  assert.equal(group.getAttribute('class'), 'gev-anno gev-out');
+  assert.equal(groups().length, 2);
+  assert.ok(groups()[1] !== group);
+  await new Promise((resolve) => setTimeout(resolve, 400));
+  await settle();
+  assert.deepEqual(groups().length, 1);
+  assert.equal(group.isConnected, false);
   renderer.destroy();
+  await settle();
+  assert.equal(document.querySelector('.gev-screen-whiteboard'), null);
 });
 
 // ── Partial-add unwind (review round 2) ───────────────────────────────────────
 //
-// add() inserts the group and records it, then does more live-document work
-// (draw-on wiring, the first projection pass). A throw in that tail used to
-// leave an ORPHANED <g> plus a record nobody owned — the engine's rollback only
-// deletes its own map entry — so re-annotating the same place stacked a second
-// mark over the corpse.
+// add() records the mark, then does more work (presenting it, the first
+// projection pass). A throw in that tail used to leave an ORPHANED mark plus a
+// record nobody owned — the engine's rollback only deletes its own map entry —
+// so re-annotating the same place stacked a second mark over the corpse.
 
-test('an add that throws after inserting its group unwinds instead of orphaning it', (t) => {
-  const originalDocument = globalThis.document;
-  const originalRequestAnimationFrame = globalThis.requestAnimationFrame;
-  const originalProjection = Cesium.SceneTransforms.worldToWindowCoordinates;
-  globalThis.document = fakeDocument();
-  globalThis.requestAnimationFrame = (callback) => { callback(); return 1; };
-  t.after(() => {
-    Cesium.SceneTransforms.worldToWindowCoordinates = originalProjection;
-    if (originalDocument === undefined) delete globalThis.document;
-    else globalThis.document = originalDocument;
-    if (originalRequestAnimationFrame === undefined) delete globalThis.requestAnimationFrame;
-    else globalThis.requestAnimationFrame = originalRequestAnimationFrame;
-  });
-
-  const positionWC = Cesium.Cartesian3.fromDegrees(0, 0, 1000);
-  const directionWC = Cesium.Cartesian3.normalize(
-    Cesium.Cartesian3.negate(positionWC, new Cesium.Cartesian3()),
-    new Cesium.Cartesian3(),
+test('an add that throws after inserting its group unwinds instead of orphaning it', async (t) => {
+  const { store, groups } = board(t);
+  const camera = cameraOver(0, 0);
+  const renderer = createScreenAnnotationRenderer(
+    { scene: sceneFor(camera, { canvas: { clientWidth: 1280, clientHeight: 720, width: 1280, height: 720 } }), camera, trackedEntity: null },
+    { store, activeTrackedReadoutId: () => null },
   );
-  const camera = { positionWC, directionWC, positionCartographic: { height: 1000 } };
-  const scene = {
-    camera,
-    canvas: { clientWidth: 1280, clientHeight: 720, width: 1280, height: 720 },
-    clampToHeightSupported: false,
-    postRender: { addEventListener() {}, removeEventListener() {} },
-  };
-  const renderer = createScreenAnnotationRenderer({ scene, camera, trackedEntity: null });
+  t.after(() => renderer.destroy());
   const anno = {
     id: 'anno-partial-screen',
     type: 'pin',
@@ -303,26 +357,36 @@ test('an add that throws after inserting its group unwinds instead of orphaning
     anchor: { lon: 0, lat: 0, height: 0 },
   };
 
-  // The group is in the document and recorded by the time add() reaches its
-  // first projection pass — so a throw there is real partial state, not a
-  // clean bail-out.
-  Cesium.SceneTransforms.worldToWindowCoordinates = () => { throw new Error('projection failed'); };
+  // The mark is on the board by the time add() reaches its first projection
+  // pass — so a throw there is real partial state, not a clean bail-out.
+  projectTo(t, () => {
+    throw new Error('projection failed');
+  });
   assert.throws(() => renderer.add(anno), /projection failed/);
   Cesium.SceneTransforms.worldToWindowCoordinates = () => ({ x: 0, y: 0 });
-  const { svg } = findAnnotationGroup(globalThis.document);
-  assert.equal(
-    svg.children.filter((child) => child.classList.contains('gev-anno')).length,
-    0,
-    'the half-built group must not stay in the document',
-  );
+  await settle();
+  assert.equal(groups().length, 0, 'the half-built group must not stay in the document');
 
   // The id is free again: a retry draws exactly one mark, and remove() still
   // owns it (a leaked record would leave a second group behind).
   renderer.add(anno);
-  assert.equal(
-    svg.children.filter((child) => child.classList.contains('gev-anno')).length,
-    1,
-    'the retry must draw one mark, not stack over an orphan',
-  );
-  renderer.destroy();
+  await settle();
+  assert.equal(groups().length, 1, 'the retry must draw one mark, not stack over an orphan');
+});
+
+test("an earlier renderer leaves a later renderer's board alone", async (t) => {
+  const { store, groups } = board(t);
+  projectTo(t, { x: 100, y: 100 });
+  const camera = cameraOver(0, 0);
+  const viewer = { scene: sceneFor(camera), camera, trackedEntity: null };
+  const options = { store, activeTrackedReadoutId: () => null };
+  const earlier = createScreenAnnotationRenderer(viewer, options);
+  const later = createScreenAnnotationRenderer(viewer, options);
+  t.after(() => later.destroy());
+  later.add({ id: 'kept', type: 'label', label: 'Kept', alpha: 1, anchor: { lon: 0, lat: 0 } });
+  earlier.add({ id: 'ignored', type: 'label', label: 'Ignored', alpha: 1, anchor: { lon: 0, lat: 0 } });
+  earlier.destroy();
+  await settle();
+  assert.equal(groups().length, 1);
+  assert.equal(groups()[0].querySelector('text').textContent, 'Kept');
 });

src/app/application.js

@@ -1,3 +1,4 @@
+import { mountApplicationViews } from '../ui/views/index.js';
 const START_ORDER = ['scene', 'controls', 'data', 'tools'];
 // Controls cancel restoration while the data manager and viewer still exist.
 const STOP_ORDER = ['tools', 'controls', 'data', 'scene'];
@@ -6,7 +7,9 @@ const STOP_ORDER = ['tools', 'controls', 'data', 'scene'];
  * Own application startup and teardown without importing an application entry.
  * Constructors receive earlier components, an AbortSignal and defer(cleanup).
  * Register cleanup immediately after acquiring each resource, before any await.
- * @param {{createScene:Function,createControls:Function,createData:Function,createTools:Function}} constructors
+ * The page's views render first; `omitViews` names the ones this application
+ * leaves out (see mountApplicationViews).
+ * @param {{createScene:Function,createControls:Function,createData:Function,createTools:Function,omitViews?:string[]}} constructors
  * @returns {{start:Function,destroy:Function,subscribe:Function,getState:Function,getComponents:Function}}
  */
 export function createApplication({
@@ -14,7 +17,10 @@ export function createApplication({
   createControls,
   createData,
   createTools,
+  omitViews = [],
 }) {
+  // A host's page needs its views before any phase reads the markup.
+  mountApplicationViews(globalThis.document, { omit: omitViews });
   const factories = {
     scene: createScene,
     controls: createControls,

src/app/application.test.mjs

@@ -31,6 +31,8 @@ test('importing and constructing the package is inactive without browser globals
   const result = spawnSync(
     process.execPath,
     [
+      // Views are single-file components; Node needs the loader hosts use.
+      '--import=gods-eye-view/build/register-vue',
       '--input-type=module',
       '-e',
       `

src/app/controls.js

@@ -7,7 +7,8 @@ import { t } from '../i18n/index.js';
 /**
  * Construct the existing controls and camera presentation. `initialShareCode`
  * opens a share code (the `<code>` of `/share/<code>`) at start-up, for a host
- * whose address does not carry one.
+ * whose address does not carry one. `localePicker: false` removes the language
+ * picker, for a host that does not initialize Core's locale.
  */
 export function createApplicationControls({
   scene: { viewer, mapStackController, operations },
@@ -18,6 +19,7 @@ export function createApplicationControls({
   placeSearch,
   defer,
   initialShareCode = null,
+  localePicker = true,
 }) {
   // Initialize the style manager (post-processing, HUD, locations, share links)
   const styleManager = new Controls(viewer, {
@@ -34,6 +36,7 @@ export function createApplicationControls({
     placeSearch,
     // A share code to open at start-up instead of the page's address.
     initialShareCode,
+    localePicker,
   });
   defer(() => styleManager.orbitController.stop());
   defer(() => styleManager.hud.destroy());

src/app/layers/aisLiveVessels.js

@@ -9,6 +9,7 @@ import * as sprites from '../../data/spriteOrder.js';
 import * as focus from '../../data/focusDeemphasis.js';
 import * as worldFocus from '../../worldFocus.js';
 import * as render from '../../renderGovernor.js';
+import * as readouts from '../../hudReadouts.js';
 
 /** Construct one layer using the application scene owners and a supplied source. */
 export function createApplicationVessels({ source, options = {} }) {
@@ -26,6 +27,7 @@ export function createApplicationVessels({ source, options = {} }) {
       focus,
       worldFocus,
       render,
+      readouts,
     },
   });
 }

src/app/scene.js

@@ -14,7 +14,7 @@ import {
   governorRequestRender,
 } from '../renderGovernor.js';
 import { describeError } from './errors.js';
-import { t } from '../i18n/index.js';
+import { onLocaleChange, t } from '../i18n/index.js';
 
 /** Construct the application globe using the caller's local configuration. */
 export async function createApplicationScene({
@@ -60,6 +60,7 @@ export async function createApplicationScene({
   defer(installTrackpadPinchZoom(viewer));
   registerDataCredits(viewer, credits);
   configureCreditKeyboardAccess(document);
+  defer(onLocaleChange(() => configureCreditKeyboardAccess(document)));
   loaderStatus.textContent =
     googleApiKey || googleTokens || cesiumToken
       ? t('Loading Google 3D Tiles...')

src/app/tools.js

@@ -2,6 +2,8 @@ import { SceneDirector } from '../scenes/director.js';
 import { initAnnotations } from '../annotations/index.js';
 import { initDrawTool } from '../annotations/drawTool.js';
 import { initGeoFileImport } from '../ui/geoFileImport.js';
+import { useDisplayStore } from '../ui/stores/display.js';
+import { applicationPinia } from '../ui/vueRuntime.js';
 import { initImageryBoxTool } from '../ui/imageryBoxTool.js';
 import { createRecentImageryPanel } from '../ui/recentImagery.js';
 import { initGevVoiceCommands } from '../voice/gevRealtime.js';
@@ -53,10 +55,22 @@ export function createApplicationTools({
     if (window.__gevAnnotations === annotations) delete window.__gevAnnotations;
     annotations.destroy();
   });
+  const displayStore = useDisplayStore(applicationPinia());
+  // The Display panel's controls answer through the store; returns the
+  // disconnect.
+  const connectDisplay = (actions) => {
+    const token = displayStore.connect(actions);
+    return () => displayStore.detach(token);
+  };
   // DISPLAY ▸ Draw: the same whiteboard, drawn by hand. It claims the pointer
   // while a session is open, so its teardown belongs to the application
   // lifetime rather than to whoever last pressed the button.
-  const drawTool = initDrawTool({ viewer, annotations });
+  const drawTool = initDrawTool({
+    viewer,
+    annotations,
+    publish: (view) => displayStore.publishDraw(view),
+    connect: connectDisplay,
+  });
   defer(() => drawTool?.destroy());
   // DISPLAY ▸ Import: the person's own GeoJSON/KML/KMZ/GPX files, each its
   // own data source. They live for the page session, so the application
@@ -66,6 +80,8 @@ export function createApplicationTools({
     navigation: styleManager,
     ground: operations.surface?.groundFloor,
     subscribeMapSource: (listener) => mapStackController?.subscribe?.(listener),
+    publish: (view) => displayStore.publishGeoImport(view),
+    connect: connectDisplay,
   });
   defer(() => geoFileImport?.destroy());
   // DATA ▸ Recent Imagery: the box tool claims the pointer like Draw and the

src/cameraGlobeRotation.test.mjs

@@ -831,10 +831,37 @@ test('orbit-toggle controller stops globe motion before toggling', async (t) =>
         return true;
       },
     },
-    _orbitIndicator: { classList: { toggle() {} } },
+    _locationControls: { showOrbit() {} },
   });
   assert.equal(toggled, true);
 });
+test('the voice orbit switch lights and clears the ORBIT indicator', async () => {
+  const { LocationNavigation } = await import('./ui/locationNavigation.js');
+  const shown = [];
+  let active = false;
+  const nav = Object.assign(Object.create(LocationNavigation.prototype), {
+    services: {},
+    _currentTarget: {},
+    _currentPoi: {},
+    orbitController: {
+      get active() {
+        return active;
+      },
+      toggle() {
+        active = !active;
+        return active;
+      },
+      stop() {
+        active = false;
+      },
+    },
+    _locationControls: { showOrbit: (value) => shown.push(value) },
+  });
+  assert.deepEqual(nav.setOrbit(true), { ok: true, orbiting: true });
+  assert.deepEqual(nav.setOrbit(true), { ok: true, orbiting: true });
+  assert.deepEqual(nav.setOrbit(false), { ok: true, orbiting: false });
+  assert.deepEqual(shown, [true, false]);
+});
 for (const owner of ['tracking', 'cockpit', 'close-up'])
   test(`actual voice runner refuses ${owner} without releasing or repositioning`, async (t) => {
     const { createGevActionRunner } = await import('./voice/gevActions.js');

src/cameraHandoff.test.mjs

@@ -353,7 +353,7 @@ test('teardown refuses deferred location work before geocoding begins', () => {
     'if (!query || this.destroyed) return;',
     'const authority = this.begin();',
     'if (authority === false)',
-    'this.input.blur();',
+    'this.input?.blur();',
     'this.onStart?.(authority);',
     'await this.search(query',
   ], 'disposed search refusal');

src/celestialRing.js

@@ -379,15 +379,23 @@ function drawMoonHaze(ctx, cx, cy, radius, angle) {
   ctx.restore();
 }
 
+// Keys each ring's overlay, so a new ring never reuses an old one's canvases.
+let rings = 0;
+
 /**
  * Screen-space ring and celestial direction overlay for the full-globe view.
+ * The overlay is presented to the celestial ring store, whose view renders it
+ * inside the viewer's container and hands back the two canvases this paints.
  */
 export class CelestialRing {
   /**
    * @param {Cesium.Viewer} viewer
-   * @param {{enabled?:boolean,onAutoDisable?:Function}} [options]
+   * @param {{enabled?:boolean,onAutoDisable?:Function,store:object}} options
+   *   `store` is the celestial ring store (src/ui/stores/celestialRing.js);
+   *   the keyhole helpers here stay free of Vue for the packages that use
+   *   them.
    */
-  constructor(viewer, { enabled = true, onAutoDisable = null } = {}) {
+  constructor(viewer, { enabled = true, onAutoDisable = null, store }) {
     this.viewer = viewer;
     this.enabled = !!enabled;
     this.visible = false;
@@ -406,6 +414,10 @@ export class CelestialRing {
     this._sunRenderKey = '';
     this._moonRenderKey = '';
     this._outlineRenderKey = '';
+    this._sunCanvas = null;
+    this._sunCtx = null;
+    this._moonCanvas = null;
+    this._moonCtx = null;
 
     this._sunInertial = new Cesium.Cartesian3();
     this._moonInertial = new Cesium.Cartesian3();
@@ -415,7 +427,7 @@ export class CelestialRing {
     this._screenCenter = new Cesium.Cartesian2();
     this._fixedMatrix = new Cesium.Matrix3();
 
-    this._buildDOM();
+    this._initView(store);
     this._removePostRender = viewer.scene.postRender.addEventListener(() =>
       this._draw(),
     );
@@ -436,48 +448,68 @@ export class CelestialRing {
     this.setEnabled(this.enabled);
   }
 
-  /** Construct cached effect layers and Material Symbols celestial markers. */
-  _buildDOM() {
-    this._root = document.createElement('div');
-    this._root.id = 'celestial-ring-overlay';
-    this._root.className = 'celestial-ring-overlay';
-    this._root.setAttribute('aria-hidden', 'true');
-
-    this._ringOutline = document.createElement('div');
-    this._ringOutline.className = 'celestial-ring-outline';
-
-    this._sunCanvas = document.createElement('canvas');
-    this._sunCanvas.className = 'celestial-ring-canvas celestial-sun-canvas';
-    this._sunCtx = this._sunCanvas.getContext('2d', {
-      alpha: true,
-      desynchronized: true,
+  /** Present the overlay and take the canvases its view hands back. */
+  _initView(store) {
+    const owner = {};
+    this._store = store;
+    this._owner = owner;
+    this._view = {
+      id: ++rings,
+      owner,
+      container: this.viewer.container,
+      enabled: this.enabled,
+      visible: false,
+      globeVisible: null,
+      ephemerisUpdates: null,
+      size: null,
+      outline: null,
+      sun: null,
+      moon: null,
+      sunMarker: null,
+      moonMarker: null,
+    };
+    this._viewKey = '';
+    store.publish(this._view);
+    store.connect({
+      attach: (from, kind, canvas) => {
+        if (from === owner && this._shown()) this._attach(kind, canvas);
+      },
     });
+  }
 
-    this._moonCanvas = document.createElement('canvas');
-    this._moonCanvas.className = 'celestial-ring-canvas celestial-moon-canvas';
-    this._moonCtx = this._moonCanvas.getContext('2d', {
-      alpha: true,
-      desynchronized: true,
-    });
+  /** Whether the store still shows this ring's overlay. */
+  _shown() {
+    return this._store.ring?.owner === this._owner;
+  }
 
-    this._sunMarker = document.createElement('span');
-    this._sunMarker.className =
-      'celestial-marker celestial-sun material-symbols-outlined';
-    this._sunMarker.textContent = 'light_mode';
-
-    this._moonMarker = document.createElement('span');
-    this._moonMarker.className =
-      'celestial-marker celestial-moon material-symbols-outlined';
-    this._moonMarker.textContent = 'dark_mode';
-
-    this._root.append(
-      this._ringOutline,
-      this._sunCanvas,
-      this._moonCanvas,
-      this._sunMarker,
-      this._moonMarker,
+  /** Publish a change to the overlay, skipping one that changes nothing. */
+  _present(patch) {
+    if (!this._shown()) return;
+    const next = { ...this._view, ...patch };
+    const key = JSON.stringify(next, (name, value) =>
+      name === 'owner' || name === 'container' ? undefined : value,
     );
-    this.viewer.container.appendChild(this._root);
+    if (key === this._viewKey) return;
+    this._view = next;
+    this._viewKey = key;
+    this._store.publish(next);
+  }
+
+  /** Take (or, with null, drop) the canvas the view rendered for one layer. */
+  _attach(kind, canvas) {
+    const ctx =
+      canvas?.getContext('2d', { alpha: true, desynchronized: true }) ?? null;
+    // A new canvas starts blank, so the next frame repaints its layer.
+    if (kind === 'sun') {
+      this._sunCanvas = canvas;
+      this._sunCtx = ctx;
+      this._sunRenderKey = '';
+    } else if (kind === 'moon') {
+      this._moonCanvas = canvas;
+      this._moonCtx = ctx;
+      this._moonRenderKey = '';
+    } else return;
+    if (canvas && this.enabled) governorRequestRender('celestial-ring');
   }
 
   /** Enable or disable the user preference for the effect. */
@@ -491,12 +523,14 @@ export class CelestialRing {
     // all. Camera motion covers every later repaint; the 60 s ephemeris
     // timer requests its own. (perf wave 2 fix — owner playtest finding)
     if (this.enabled !== wasEnabled) governorRequestRender('celestial-ring');
-    this._root.classList.toggle('disabled', !this.enabled);
     if (!this.enabled) {
       this.visible = false;
-      this._root.classList.remove('visible');
       this._clear();
     }
+    this._present({
+      enabled: this.enabled,
+      ...(!this.enabled && { visible: false }),
+    });
   }
 
   /** Whether the current camera already frames the complete globe inside the keyhole. */
@@ -577,7 +611,7 @@ export class CelestialRing {
     ]) {
       if (canvas && ctx) ctx.clearRect(0, 0, canvas.width, canvas.height);
     }
-    this._ringOutline?.style.setProperty('display', 'none');
+    this._present({ outline: { ...this._view.outline, hidden: true } });
     this._sunRenderKey = '';
     this._moonRenderKey = '';
     this._outlineRenderKey = '';
@@ -607,10 +641,9 @@ export class CelestialRing {
         canvas.width = bw;
         canvas.height = bh;
       }
-      canvas.style.width = `${width}px`;
-      canvas.style.height = `${height}px`;
       ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
     }
+    this._present({ size: { width, height } });
     this._renderScale = dpr;
   }
 
@@ -665,8 +698,8 @@ export class CelestialRing {
     );
   }
 
-  /** Position one icon-library marker along the keyhole circumference. */
-  _positionMarker(marker, cx, cy, radius, angle, opacity) {
+  /** Where one icon-library marker sits along the keyhole circumference. */
+  _markerPosition(cx, cy, radius, angle, opacity) {
     const cos = Math.cos(angle);
     const sin = Math.sin(angle);
     const margin = 14;
@@ -679,20 +712,26 @@ export class CelestialRing {
         ? (cy - margin) / Math.abs(sin)
         : Number.POSITIVE_INFINITY;
     const markerRadius = Math.min(radius, maxRadiusX, maxRadiusY);
-    marker.style.left = `${cx + cos * markerRadius}px`;
-    marker.style.top = `${cy + sin * markerRadius}px`;
-    marker.style.opacity = String(opacity);
+    return {
+      left: cx + cos * markerRadius,
+      top: cy + sin * markerRadius,
+      opacity: String(opacity),
+    };
   }
 
   /** Update the cached effect geometry only when camera distance or viewport changes. */
   _renderEffectLayers(cx, cy, radius, rayInnerRadius) {
     const outlineKey = `${cx}:${cy}:${radius}`;
     if (outlineKey !== this._outlineRenderKey) {
-      this._ringOutline.style.display = '';
-      this._ringOutline.style.left = `${cx - radius}px`;
-      this._ringOutline.style.top = `${cy - radius}px`;
-      this._ringOutline.style.width = `${radius * 2}px`;
-      this._ringOutline.style.height = `${radius * 2}px`;
+      this._present({
+        outline: {
+          hidden: false,
+          left: cx - radius,
+          top: cy - radius,
+          width: radius * 2,
+          height: radius * 2,
+        },
+      });
       this._outlineRenderKey = outlineKey;
     }
 
@@ -724,7 +763,11 @@ export class CelestialRing {
 
   /** Per-frame camera projection with GPU-composited cached effect layers. */
   _draw() {
-    if (!this.enabled || !this._sunCtx || !this._moonCtx) return;
+    // A ring the store no longer shows has handed its overlay to a later one.
+    if (!this.enabled || !this._shown()) return;
+    // Without its canvases (no view rendered them) the ring still tracks
+    // whether the globe is framed, so it turns itself off as before.
+    const painted = !!(this._sunCtx && this._moonCtx);
     const now = performance.now();
     if (now < this._nextDrawAt) return;
     this._nextDrawAt = now + 1000 / CELESTIAL_MAX_FRAME_RATE;
@@ -732,7 +775,7 @@ export class CelestialRing {
     const width = canvas.clientWidth || canvas.width;
     const height = canvas.clientHeight || canvas.height;
     if (!(width > 0 && height > 0)) return;
-    this._resize(width, height);
+    if (painted) this._resize(width, height);
 
     const disc = this._projectedEarthDisc(width, height);
     const wasVisible = this.visible;
@@ -740,9 +783,11 @@ export class CelestialRing {
       ? isFullGlobeInsideKeyhole(disc, wasVisible)
       : false;
     this.visible = nextVisible;
-    this._root.classList.toggle('visible', nextVisible);
-    this._root.dataset.globeVisible = String(nextVisible);
-    this._root.dataset.ephemerisUpdates = String(this._ephemerisUpdateCount);
+    this._present({
+      visible: nextVisible,
+      globeVisible: String(nextVisible),
+      ephemerisUpdates: String(this._ephemerisUpdateCount),
+    });
     if (!nextVisible || !disc) {
       this._clear();
       this._debug = { enabled: true, visible: false, disc };
@@ -751,10 +796,14 @@ export class CelestialRing {
     }
 
     if (!wasVisible) this._ephemerisDirty = true;
+    if (!painted) {
+      this._debug = { enabled: true, visible: true, disc };
+      return;
+    }
 
     const time = Cesium.JulianDate.now();
     if (!this._updateEphemeris(time)) return;
-    this._root.dataset.ephemerisUpdates = String(this._ephemerisUpdateCount);
+    this._present({ ephemerisUpdates: String(this._ephemerisUpdateCount) });
     const camera = this.viewer.camera;
     const sunProjection = celestialScreenAngle(
       Cesium.Cartesian3.dot(this._sunFixed, camera.rightWC),
@@ -779,10 +828,6 @@ export class CelestialRing {
       disc.earthRadius + Math.max(38, radius * 0.065),
     );
     this._renderEffectLayers(cx, cy, radius, rayInnerRadius);
-    this._sunCanvas.style.transform = `rotate(${this._sunAngle}rad)`;
-    this._sunCanvas.style.opacity = String(this._sunOpacity);
-    this._moonCanvas.style.transform = `rotate(${this._moonAngle}rad)`;
-    this._moonCanvas.style.opacity = String(this._moonOpacity);
 
     // Markers sit inside the illuminated band rather than straddling its outer
     // stroke. Near conjunction (such as a new moon), keep the true bearings but
@@ -791,22 +836,30 @@ export class CelestialRing {
     const markersCollide =
       circularAngleDistance(this._sunAngle, this._moonAngle) <
       MARKER_COLLISION_ANGLE;
-    this._positionMarker(
-      this._sunMarker,
-      cx,
-      cy,
-      markerRadius,
-      this._sunAngle,
-      this._sunOpacity,
-    );
-    this._positionMarker(
-      this._moonMarker,
-      cx,
-      cy,
-      markerRadius - (markersCollide ? COLLIDING_MARKER_EXTRA_INSET_PX : 0),
-      this._moonAngle,
-      this._moonOpacity,
-    );
+    this._present({
+      sun: {
+        transform: `rotate(${this._sunAngle}rad)`,
+        opacity: String(this._sunOpacity),
+      },
+      moon: {
+        transform: `rotate(${this._moonAngle}rad)`,
+        opacity: String(this._moonOpacity),
+      },
+      sunMarker: this._markerPosition(
+        cx,
+        cy,
+        markerRadius,
+        this._sunAngle,
+        this._sunOpacity,
+      ),
+      moonMarker: this._markerPosition(
+        cx,
+        cy,
+        markerRadius - (markersCollide ? COLLIDING_MARKER_EXTRA_INSET_PX : 0),
+        this._moonAngle,
+        this._moonOpacity,
+      ),
+    });
     this._debug = {
       enabled: true,
       visible: true,
@@ -831,7 +884,7 @@ export class CelestialRing {
       : null;
   }
 
-  /** Detach the render hook and remove all overlay DOM. */
+  /** Detach the render hook and withdraw the overlay. */
   destroy() {
     if (this._ephemerisTimer) {
       clearInterval(this._ephemerisTimer);
@@ -839,6 +892,10 @@ export class CelestialRing {
     }
     if (this._removePostRender) this._removePostRender();
     this._removePostRender = null;
-    this._root?.remove();
+    if (this._shown()) {
+      this._store.connect(null);
+      this._store.publish(null);
+    }
+    this._sunCanvas = this._sunCtx = this._moonCanvas = this._moonCtx = null;
   }
 }

src/celestialRingView.test.mjs

@@ -0,0 +1,251 @@
+// src/celestialRingView.test.mjs — the full-globe ring renders in the
+// viewer's container from what the ring owner presents, and the owner paints
+// the canvases the view hands back.
+import './testSupport/registerDom.mjs';
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { createApp, nextTick } from 'vue';
+import { createPinia } from 'pinia';
+import { useCelestialRingStore } from './ui/stores/celestialRing.js';
+import CelestialRingView from './ui/views/panels/CelestialRing.vue';
+import * as Cesium from 'cesium';
+import { CelestialRing } from './celestialRing.js';
+
+// happy-dom has no 2D context; a stand-in takes every drawing call.
+const context = new Proxy(
+  {},
+  { get: (target, name) => target[name] ?? (() => context), set: () => true },
+);
+globalThis.HTMLCanvasElement.prototype.getContext = () => context;
+
+function fakeViewer(container) {
+  return {
+    container,
+    camera: {
+      rightWC: new Cesium.Cartesian3(1, 0, 0),
+      upWC: new Cesium.Cartesian3(0, 1, 0),
+    },
+    scene: {
+      canvas: { clientWidth: 400, clientHeight: 300, width: 400, height: 300 },
+      postRender: { addEventListener: () => () => {} },
+      requestRender() {},
+    },
+  };
+}
+
+function fixture(t) {
+  document.body.replaceChildren();
+  const container = document.body.appendChild(document.createElement('div'));
+  const pinia = createPinia();
+  const store = useCelestialRingStore(pinia);
+  const app = createApp(CelestialRingView).use(pinia);
+  app.mount(document.body.appendChild(document.createElement('div')));
+  const rings = [];
+  const create = (options = {}) => {
+    const ring = new CelestialRing(fakeViewer(container), {
+      enabled: false,
+      store,
+      ...options,
+    });
+    rings.push(ring);
+    return ring;
+  };
+  t.after(() => {
+    for (const ring of rings) ring.destroy();
+    app.unmount();
+  });
+  const $ = (selector) => container.querySelector(selector);
+  const settle = async () => {
+    for (let flush = 0; flush < 4; flush += 1) await nextTick();
+  };
+  return { container, store, create, $, settle };
+}
+
+test('the ring renders its overlay in the viewer container', async (t) => {
+  const { create, $, settle } = fixture(t);
+  const ring = create();
+  await settle();
+  const root = $('#celestial-ring-overlay');
+  assert.equal(root.className, 'celestial-ring-overlay disabled');
+  assert.equal(root.getAttribute('aria-hidden'), 'true');
+  assert.equal(root.hasAttribute('data-globe-visible'), false);
+  assert.deepEqual(
+    [...root.children].map((child) => [child.tagName, child.className]),
+    [
+      ['DIV', 'celestial-ring-outline'],
+      ['CANVAS', 'celestial-ring-canvas celestial-sun-canvas'],
+      ['CANVAS', 'celestial-ring-canvas celestial-moon-canvas'],
+      ['SPAN', 'celestial-marker celestial-sun material-symbols-outlined'],
+      ['SPAN', 'celestial-marker celestial-moon material-symbols-outlined'],
+    ],
+  );
+  assert.equal(root.children[0].style.display, 'none');
+  assert.equal(root.children[3].textContent, 'light_mode');
+  assert.equal(root.children[4].textContent, 'dark_mode');
+  assert.ok(ring._sunCanvas === root.children[1]);
+  assert.ok(ring._moonCanvas === root.children[2]);
+  ring.setEnabled(true);
+  await settle();
+  assert.equal(root.className, 'celestial-ring-overlay');
+  ring.destroy();
+  await settle();
+  assert.equal($('#celestial-ring-overlay'), null);
+  assert.equal(ring._sunCanvas, null);
+});
+
+test('a drawn frame places the outline, layers and markers', async (t) => {
+  const { create, $, settle } = fixture(t);
+  const ring = create({ enabled: true });
+  await settle();
+  ring._present({ visible: true, globeVisible: 'true', ephemerisUpdates: '1' });
+  ring._resize(400, 300);
+  ring._renderEffectLayers(200, 150, 120, 80);
+  ring._present({
+    sun: { transform: 'rotate(1rad)', opacity: '0.5' },
+    sunMarker: ring._markerPosition(200, 150, 100, 0, 1),
+  });
+  await settle();
+  const root = $('#celestial-ring-overlay');
+  assert.equal(root.className, 'celestial-ring-overlay visible');
+  assert.equal(root.dataset.globeVisible, 'true');
+  assert.equal(root.dataset.ephemerisUpdates, '1');
+  const [outline, sun, moon, sunMarker] = root.children;
+  assert.equal(outline.style.display, '');
+  assert.equal(outline.style.left, '80px');
+  assert.equal(outline.style.width, '240px');
+  assert.equal(sun.style.width, '400px');
+  assert.equal(sun.style.transform, 'rotate(1rad)');
+  assert.equal(sun.style.opacity, '0.5');
+  assert.equal(moon.style.height, '300px');
+  assert.equal(sunMarker.style.left, '300px');
+  assert.equal(sunMarker.style.top, '150px');
+  ring.setEnabled(false);
+  await settle();
+  assert.equal(root.className, 'celestial-ring-overlay disabled');
+  assert.equal(outline.style.display, 'none');
+});
+
+test("an earlier ring leaves a later ring's overlay alone", async (t) => {
+  const { create, store, $, settle } = fixture(t);
+  const earlier = create();
+  await settle();
+  const later = create();
+  await settle();
+  const root = $('#celestial-ring-overlay');
+  assert.ok(later._sunCanvas === root.children[1]);
+  earlier.setEnabled(true);
+  earlier.destroy();
+  await settle();
+  assert.ok(store.ring.owner === later._owner);
+  assert.equal(
+    $('#celestial-ring-overlay').className,
+    'celestial-ring-overlay disabled',
+  );
+  assert.ok(later._sunCanvas === $('.celestial-sun-canvas'));
+});
+
+// A globe framed well inside the keyhole of a 400 x 300 view.
+const FRAMED = {
+  earthCenterX: 200,
+  earthCenterY: 150,
+  earthRadius: 40,
+  keyholeCenterX: 200,
+  keyholeCenterY: 150,
+  keyholeRadius: 140,
+};
+
+/** Run one rendered frame, past the frame-rate throttle. */
+function frame(ring, disc) {
+  ring._projectedEarthDisc = () => disc;
+  // Fixed sun and moon directions; Cesium's own model would fetch its
+  // orientation data.
+  ring._updateEphemeris = () => {
+    if (ring._ephemerisDirty) {
+      Cesium.Cartesian3.clone(new Cesium.Cartesian3(1, 0, 0), ring._sunFixed);
+      Cesium.Cartesian3.clone(new Cesium.Cartesian3(0, 1, 0), ring._moonFixed);
+      ring._ephemerisDirty = false;
+      ring._ephemerisUpdateCount += 1;
+    }
+    return true;
+  };
+  ring._nextDrawAt = 0;
+  ring._draw();
+}
+
+test('a rendered frame publishes the layers and markers it painted', async (t) => {
+  const { create, $, settle } = fixture(t);
+  const ring = create({ enabled: true });
+  await settle();
+  frame(ring, FRAMED);
+  await settle();
+  const root = $('#celestial-ring-overlay');
+  assert.equal(root.className, 'celestial-ring-overlay visible');
+  assert.equal(root.dataset.globeVisible, 'true');
+  assert.equal(root.dataset.ephemerisUpdates, '1');
+  const [outline, sun, moon, sunMarker, moonMarker] = root.children;
+  const debug = ring.getDebugState();
+  assert.equal(debug.visible, true);
+  assert.equal(outline.style.display, '');
+  // The outline is the keyhole circle, a fixed inset inside its radius.
+  const diameter = parseFloat(outline.style.width);
+  assert.ok(diameter > 0 && diameter < 280);
+  assert.equal(outline.style.height, outline.style.width);
+  assert.equal(outline.style.left, `${200 - diameter / 2}px`);
+  assert.equal(outline.style.top, `${150 - diameter / 2}px`);
+  assert.equal(sun.style.width, '400px');
+  assert.equal(moon.style.height, '300px');
+  assert.equal(sun.style.transform, `rotate(${debug.sunAngle}rad)`);
+  assert.equal(moon.style.transform, `rotate(${debug.moonAngle}rad)`);
+  assert.equal(sun.style.opacity, String(debug.sunOpacity));
+  assert.equal(moon.style.opacity, String(debug.moonOpacity));
+  assert.ok(sunMarker.style.left.endsWith('px'));
+  assert.ok(moonMarker.style.top.endsWith('px'));
+  assert.equal(moonMarker.style.opacity, String(debug.moonOpacity));
+});
+
+test('a frame without the globe framed turns the ring off', async (t) => {
+  const { create, $, settle } = fixture(t);
+  let disabled = 0;
+  const ring = create({ enabled: true, onAutoDisable: () => (disabled += 1) });
+  await settle();
+  frame(ring, FRAMED);
+  frame(ring, null);
+  await settle();
+  assert.equal(ring.enabled, false);
+  assert.equal(disabled, 1);
+  assert.equal(
+    $('#celestial-ring-overlay').className,
+    'celestial-ring-overlay disabled',
+  );
+});
+
+test('without a rendered view the ring still tracks the globe and turns off', () => {
+  const pinia = createPinia();
+  let disabled = 0;
+  const ring = new CelestialRing(fakeViewer({}), {
+    enabled: true,
+    store: useCelestialRingStore(pinia),
+    onAutoDisable: () => (disabled += 1),
+  });
+  frame(ring, FRAMED);
+  assert.equal(ring.visible, true);
+  frame(ring, null);
+  assert.equal(ring.enabled, false);
+  assert.equal(disabled, 1);
+  ring.destroy();
+});
+
+test('a ring the store no longer shows stops drawing', async (t) => {
+  const { create, settle } = fixture(t);
+  let disabled = 0;
+  const earlier = create({
+    enabled: true,
+    onAutoDisable: () => (disabled += 1),
+  });
+  await settle();
+  create();
+  await settle();
+  frame(earlier, null);
+  assert.equal(earlier.enabled, true);
+  assert.equal(disabled, 0);
+});

src/cockpitMarkup.test.mjs

@@ -2,7 +2,7 @@ import {
   readShellSource,
   shellMethod,
 } from './testSupport/readShellSource.mjs';
-import { expandApplicationHtml } from '../build/application-html.js';
+import { renderApplicationHtml } from './testSupport/applicationHtml.mjs';
 import { readLayerSource } from './testSupport/readLayerSource.mjs';
 import { PanelLayoutController } from './ui/panelLayoutController.js';
 import { readShellElements } from './ui/shellElements.js';
@@ -16,14 +16,20 @@ import {
   readAircraftInfo,
   _adoptTrackedEntity,
 } from './ui/cockpitTrackingController.js';
-import { setVisionMode, cycleVisionMode } from './ui/cockpitInstruments.js';
+import { cycleVisionMode } from './ui/cockpitInstruments.js';
+import { createVisionState } from './ui/cockpitInstrumentState.js';
+import { COCKPIT_VISION_MODES } from './cockpitVisionPolicy.js';
 import { updateContext as cockpitContext } from './ui/cockpitContext.js';
 import {
   syncSignalLayout,
   setContextCollapsed,
   setSignalCollapsed,
 } from './ui/cockpitLayout.js';
-import { setBriefAutoRotate } from './ui/cockpitBriefing.js';
+import { createBriefState } from './ui/cockpitBriefPages.js';
+import {
+  publishBriefView,
+  setBriefAutoRotate,
+} from './ui/cockpitBriefing.js';
 import { CockpitDisplayPortal } from './ui/cockpitDisplayPortal.js';
 import { _handleContextLayerChange } from './ui/contextLayerChanges.js';
 import { clearSelectedLayers } from './ui/contextActions.js';
@@ -46,7 +52,7 @@ import { fileURLToPath } from 'node:url';
 
 const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 
-const html = expandApplicationHtml(
+const html = await renderApplicationHtml(
   fs.readFileSync(path.join(ROOT, 'index.html'), 'utf8'),
 );
 const ui = readShellSource();
@@ -149,11 +155,10 @@ test('Cockpit vision cycle exposes every map preset exactly once', () => {
     cycleVisionMode.toString(),
     /const modes = COCKPIT_VISION_MODES;/,
   );
-  assert.match(
-    setVisionMode.toString(),
-    /const labels = \{\s*optical: t\('NORMAL'\),\s*crt: t\('CRT'\),\s*nvg: t\('NVG'\),\s*thermal: t\('FLIR'\),\s*anime: t\('ANIME'\),\s*noir: t\('NOIR'\),?\s*\};/,
+  assert.deepEqual(
+    COCKPIT_VISION_MODES.map((mode) => createVisionState(mode).label),
+    ['NORMAL', 'CRT', 'NVG', 'FLIR', 'ANIME', 'NOIR'],
   );
-  assert.doesNotMatch(setVisionMode.toString(), /none: 'NONE'/);
   assert.doesNotMatch(ui, /getInheritedVisionLabel/);
   assert.match(html, /id="cockpit-vision-current-label"[^>]*>NORMAL<\/strong>/);
   assert.match(
@@ -230,7 +235,7 @@ test('Cockpit Escape handling precedes form-control shortcut suppression and foc
 test('Cockpit shortcut failures do not leak and open utilities own the first Escape', () => {
   const keydown = cockpitKeyDown.toString();
   assert.ok(keydown, 'Cockpit keyboard handler is missing');
-  assert.match(keydown, /#cockpit-utility-controls \[aria-expanded="true"\]/);
+  assert.match(keydown, /if \(this\.isUtilityDisclosureOpen\?\.\(\)\) return;/);
   assert.match(
     keydown,
     /const cockpitAttempt = !!\(\s*this\.readAircraftInfo\(\) && this\.viewer\.trackedEntity\?\.position\s*\);[\s\S]*?event\.preventDefault\(\);[\s\S]*?event\.stopImmediatePropagation\(\);[\s\S]*?!this\.isEntryAllowed\(\)/,
@@ -246,10 +251,10 @@ test('the Contact panel never hides itself out from under its own NEXT button',
   assert.match(body, /resolveCockpitContextReadout\(\{ snapshot, info \}\)/);
   assert.match(
     body,
-    /if \(!readout\.visible\) \{[\s\S]*?this\.context\.hidden = true;/,
+    /if \(!readout\.visible\) \{[\s\S]*?this\.showContextCard\(false\);/,
   );
   assert.equal(
-    (body.match(/this\.context\.hidden = true/g) || []).length,
+    (body.match(/this\.showContextCard\(false\)/g) || []).length,
     1,
     'the panel has exactly one hide path, and it is the no-snapshot standby case',
   );
@@ -264,7 +269,7 @@ test('the Contact panel never hides itself out from under its own NEXT button',
   // A culled subject holds last-known content behind the CONTACT LOST cue.
   assert.match(body, /readout\.contactLost/);
   assert.match(body, /CONTACT LOST/);
-  assert.match(body, /this\.context\.dataset\.state = 'lost'/);
+  assert.match(body, /view\.state = 'lost'/);
   assert.match(
     body,
     /if \(readout\.contactLost\) \{/,
@@ -272,14 +277,14 @@ test('the Contact panel never hides itself out from under its own NEXT button',
   );
   // PREVIOUS/NEXT must be written before any early return, so the operator can
   // always step off the current contact — including a lost one.
-  const navIndex = body.indexOf('this.contextNext.disabled');
+  const navIndex = body.indexOf('view.canNext =');
   const lostIndex = body.indexOf('if (readout.contactLost)');
   assert.ok(
     navIndex >= 0 && lostIndex > navIndex,
     'nav state must be written before the CONTACT LOST return',
   );
   assert.equal(
-    (body.match(/this\.contextNext\.disabled/g) || []).length,
+    (body.match(/view\.canNext =/g) || []).length,
     1,
     'one owner for the NEXT enabled state, reached by every visible path',
   );
@@ -471,14 +476,6 @@ test('Cockpit owns a focused shared Display portal and compact Radio controls',
     css,
     /\.cockpit-utility-control\.is-expanded \.cockpit-utility-divider\s*\{[\s\S]*?linear-gradient\(\s*90deg,\s*rgb\(0 212 255 \/ 28%\),\s*rgba\(0, 212, 255, 0\.18\) 58%,\s*transparent\s*\)[\s\S]*?box-shadow:\s*0 0 7px rgba\(0, 212, 255, 0\.22\);/,
   );
-  assert.match(
-    radioBindings,
-    /this\._cockpitDisplayToggleBtn\.textContent = displayOpen \? '▶' : '◀';/,
-  );
-  assert.match(
-    radioBindings,
-    /this\._cockpitRadioToggleBtn\.textContent = radioOpen \? '▶' : '◀';/,
-  );
   assert.match(
     css,
     /#cockpit-display-panel\s*\{[\s\S]*?display:\s*flex;[\s\S]*?gap:\s*7px;[\s\S]*?padding:\s*0;[\s\S]*?border-top:\s*0;/,
@@ -530,7 +527,7 @@ test('Cockpit owns a focused shared Display portal and compact Radio controls',
   );
   assert.match(
     syncSignalLayout.toString(),
-    /setAttribute\('aria-hidden', String\(hiddenSibling\)\)/,
+    /primaryOnly: utilityLayout\.primaryOnly,\s*hideCollapsed: utilityLayout\.primaryOnly,/,
   );
 });
 
@@ -546,9 +543,14 @@ test('Display orders 3D above Celestial, Clean UI below it, and Parameters below
     1,
     'Parameters must have one DOM owner',
   );
+  // The markup places Parameters below Detection; nothing re-homes it.
   assert.match(
+    html,
+    /id="detection-toggle"[\s\S]*?id="param-slider-panel"[\s\S]*?id="models3d-toggle"/,
+  );
+  assert.doesNotMatch(
     PanelLayoutController.prototype._initRightPanelAdaptiveLayout.toString(),
-    /const detectionGroup = this\._detectionBtn\?\.closest\('\.pp-toggle-group'\);[\s\S]*?detectionGroup\.after\(this\._sliderPanel\)/,
+    /_sliderPanel/,
   );
   assert.match(
     ui,
@@ -699,7 +701,7 @@ test('fresh Cockpit entry temporarily collapses map panels and exit restores the
   );
   assert.match(
     callback[1],
-    /_cockpitPanelRestore\.set\(\s*panelId,\s*panel\.classList\.contains\('collapsed'\),?\s*\)/,
+    /_cockpitPanelRestore\.set\(\s*panelId,\s*this\._shownPanel\(panel\)\.collapsed,?\s*\)/,
     "entry must remember each panel's exact collapsed state before hiding it",
   );
   assert.match(
@@ -760,7 +762,7 @@ test('real disclosure changes reconsider only their own temporary panel lane', (
   );
   assert.match(
     collapse,
-    /classList\.contains\('collapsed'\) === nextCollapsed\s*&&\s*!wasAutoCollapsed[\s\S]*?return;/,
+    /this\._shownPanel\(panelEl\)\.collapsed === nextCollapsed\s*&&\s*!wasAutoCollapsed[\s\S]*?return;/,
   );
   assert.match(
     collapse,
@@ -798,35 +800,29 @@ test('Reset releases Contact camera ownership through its selection-preserving r
   assert.ok(resetStart >= 0);
   assert.ok(contextRelease > resetStart);
   assert.ok(satelliteRelease > contextRelease);
-  assert.match(
-    readShellElements.toString(),
-    /_cockpitResetGlobeBtn: document\.getElementById\('cockpit-reset-globe'\)/,
-  );
   const controls = fs.readFileSync(
     path.join(ROOT, 'src', 'ui', 'locationControls.js'),
     'utf8',
   );
-  assert.match(
-    ui,
-    /resetButtons: \[this\._resetGlobeBtn, this\._cockpitResetGlobeBtn\]/,
-  );
   assert.match(ui, /onReset: \(\) => this\.resetToGlobeView\(\)/);
-  assert.match(
-    controls,
-    /for \(const button of elements\.resetButtons\)[\s\S]*?this\.bind\(button, 'click', onReset\)/,
-    'both reset controls delegate to the same supplied reset action',
+  assert.match(ui, /this\._connectGlobeReset\?\.\(this\._locationControls\)/);
+  assert.match(controls, /reset\(\) \{\s*if \(!this\.destroyed\) return this\.onReset\(\);/);
+  // Both reset buttons ask the one reset owner.
+  const globeActions = fs.readFileSync(
+    path.join(ROOT, 'src', 'ui', 'views', 'panels', 'GlobeActions.vue'),
+    'utf8',
   );
+  assert.match(globeActions, /id="reset-globe-view"[^>]*@click="act\('reset'\)"/);
+  const cockpitView = readRadioSource(
+    new URL('./ui/views/CockpitView.vue', import.meta.url),
+    'utf8',
+  );
+  assert.match(cockpitView, /id="cockpit-reset-globe"[^>]*@click="globe\.act\('reset'\)"/);
   assert.match(
     cockpitEnter.toString(),
-    /if \(this\.resetGlobeButton\) this\.resetGlobeButton\.hidden = false;/,
-  );
-  assert.match(
-    readRadioSource(
-      new URL('./ui/cockpitTrackingController.js', import.meta.url),
-      'utf8',
-    ),
-    /if \(this\.resetGlobeButton\) this\.resetGlobeButton\.hidden = true;/,
+    /Object\.assign\(this\.presence, \{\s*active: true,/,
   );
+  assert.match(cockpitView, /id="cockpit-reset-globe"[^>]*:hidden="!active"/);
 });
 
 test('Location navigation releases immediate routes before flight and deferred routes after resolution', () => {
@@ -888,21 +884,24 @@ test('Cockpit Radio station changes preserve first-person camera ownership', ()
   );
   assert.ok(cycleHelper, 'shared Radio cycle helper is missing');
   assert.match(cycleHelper[1], /cycleStation\(direction, \{[\s\S]*?rotate,/);
+  assert.match(radioBindings, /\n    cycleRadio,\n/);
+  const panel = fs.readFileSync(
+    new URL('./ui/views/panels/RadioPanel.vue', import.meta.url),
+    'utf8',
+  );
+  const cockpit = fs.readFileSync(
+    new URL('./ui/views/panels/CockpitUtilityControls.vue', import.meta.url),
+    'utf8',
+  );
+  assert.match(panel, /id="radio-prev-btn" @click="act\('cycleRadio', -1\)"/);
+  assert.match(panel, /id="radio-next-btn" @click="act\('cycleRadio', 1\)"/);
   assert.match(
-    radioBindings,
-    /listen\(this\._radioPrevBtn, 'click', \(\) => cycleRadio\(-1\)\)/,
+    cockpit,
+    /id="cockpit-radio-prev-btn" @click="act\('cycleRadio', -1, \{ rotate: false \}\)"/,
   );
   assert.match(
-    radioBindings,
-    /listen\(this\._radioNextBtn, 'click', \(\) => cycleRadio\(1\)\)/,
-  );
-  assert.match(
-    radioBindings,
-    /listen\(this\._cockpitRadioPrevBtn, 'click', \(\) =>\s*cycleRadio\(-1, \{ rotate: false \}\),?\s*\)/,
-  );
-  assert.match(
-    radioBindings,
-    /listen\(this\._cockpitRadioNextBtn, 'click', \(\) =>\s*cycleRadio\(1, \{ rotate: false \}\),?\s*\)/,
+    cockpit,
+    /id="cockpit-radio-next-btn" @click="act\('cycleRadio', 1, \{ rotate: false \}\)"/,
   );
 });
 
@@ -940,7 +939,7 @@ test('Cockpit panel corridors reserve the owned topline readouts', () => {
   assert.ok(signalLayout, 'Cockpit signal layout method is missing');
   assert.match(
     signalLayout,
-    /setProperty\(\s*'--cockpit-utility-top',\s*`\$\{utilityAnchor\.top\.toFixed\(1\)\}px`,?\s*\)/,
+    /publishUtilityLayout\([\s\S]*?top: `\$\{utilityAnchor\.top\.toFixed\(1\)\}px`,/,
     'Cockpit owns the utility strip anchor and republishes it every layout tick',
   );
   assert.match(
@@ -976,7 +975,7 @@ test('Cockpit panel corridors reserve the owned topline readouts', () => {
   );
   assert.match(
     signalLayout,
-    /cockpit-utility-controls[\s\S]*?--cockpit-utility-max-height/,
+    /maxHeight: `\$\{availableHeight\.toFixed\(2\)\}px`,/,
   );
   assert.match(
     css,
@@ -1061,15 +1060,16 @@ test('Cockpit Display portals shared HUD, Detection, Parameters, and 3D controls
   assert.doesNotMatch(ui, /\['presets',/);
   assert.match(
     CockpitDisplayPortal.toString(),
-    /group\.before\(anchor\)[\s\S]*?window\.addEventListener\(\s*'gev:cockpit-mode-changed'/,
+    /window\.addEventListener\(\s*'gev:cockpit-mode-changed'/,
   );
+  // The portal publishes the slots; the Display panel teleports its groups.
   assert.match(
     CockpitDisplayPortal.prototype.setActive.toString(),
-    /record\.slot\.append\(record\.group\)[\s\S]*?record\.anchor\.after\(record\.group\)/,
+    /this\.publish\(nextActive \? this\.slots : null\)/,
   );
   assert.match(
     CockpitDisplayPortal.prototype.destroy.toString(),
-    /this\.stop\(\)[\s\S]*?record\.anchor\.after\(record\.group\)[\s\S]*?record\.anchor\.remove\(\)/,
+    /this\.stop\(\)[\s\S]*?this\.publish\(null\)/,
   );
   assert.doesNotMatch(
     ui,
@@ -1091,7 +1091,7 @@ test('Cockpit Display portals shared HUD, Detection, Parameters, and 3D controls
   );
   assert.match(
     ui,
-    /_revealCockpitStyleParameters\(\{ openDisplay = false \} = \{\}\) \{[\s\S]*?openDisplay[\s\S]*?_setCockpitDisclosure\?\.\('display', true\)[\s\S]*?aria-expanded'\) !== 'true'[\s\S]*?classList\.remove\('collapsed'\)/,
+    /_revealCockpitStyleParameters\(\{ openDisplay = false \} = \{\}\) \{[\s\S]*?openDisplay[\s\S]*?_setCockpitDisclosure\?\.\('display', true\)[\s\S]*?!this\._cockpitDisclosureOpen\?\.\('display'\)[\s\S]*?_presentPanel\(this\._sliderPanel, \{ collapsed: false \}\)/,
   );
   assert.match(
     radioBindings,
@@ -1176,7 +1176,7 @@ test('cockpit aircraft handoff invalidates the prior world-position anchor', ()
 
 test('cockpit weather control is off before JavaScript restores an explicit opt-in', () => {
   const match = html.match(
-    /<button\s+id="cockpit-weather-toggle"[\s\S]*?<\/button>/,
+    /<button[^>]*\sid="cockpit-weather-toggle"[\s\S]*?<\/button>/,
   );
   assert.ok(match, 'cockpit weather toggle markup is missing');
   assert.match(match[0], /aria-label="Enable cockpit weather effects"/);
@@ -1188,7 +1188,7 @@ test('cockpit summary presents the focused item as Contact', () => {
   const match = html.match(/<aside id="cockpit-context"[\s\S]*?<\/aside>/);
   assert.ok(match, 'cockpit Contact summary is missing');
   assert.match(match[0], /aria-label="Contact cockpit summary"/);
-  assert.match(match[0], /class="cockpit-context-kicker">CONTACT</);
+  assert.match(match[0], /class="cockpit-card-kicker cockpit-context-kicker">CONTACT</);
   assert.match(match[0], /aria-label="Contact navigation"/);
   assert.match(
     match[0],
@@ -1200,9 +1200,13 @@ test('cockpit summary presents the focused item as Contact', () => {
   );
   assert.match(match[0], /aria-label="Collapse Contact panel"/);
   assert.doesNotMatch(match[0], />GLOBAL CONTEXT</);
+  // The toggle renders the collapse the controller presents.
   assert.match(
-    setContextCollapsed.toString(),
-    /expanded \? t\('Collapse Contact panel'\) : t\('Expand Contact panel'\)/,
+    fs.readFileSync(
+      new URL('./ui/views/panels/CockpitContext.vue', import.meta.url),
+      'utf8',
+    ),
+    /collapsed \? t\('Expand Contact panel'\) : t\('Collapse Contact panel'\)/,
   );
 });
 
@@ -1258,7 +1262,7 @@ test('Global Context standby describes both chooser modes', () => {
 
 test('cockpit briefing cycle control keeps its state as the accessible name', () => {
   const match = html.match(
-    /<button\s+id="cockpit-brief-auto"[\s\S]*?<\/button>/,
+    /<button[^>]*\sid="cockpit-brief-auto"[\s\S]*?<\/button>/,
   );
   assert.ok(match, 'cockpit briefing cycle toggle is missing');
   assert.match(match[0], /aria-label="CYCLE OFF"/);
@@ -1269,15 +1273,22 @@ test('cockpit briefing cycle control keeps its state as the accessible name', ()
     /title="Cycle briefing pages automatically every 9 seconds \(Signals → News → Local\)\./,
   );
 
-  const update = setBriefAutoRotate.toString();
-  assert.ok(update, 'cockpit briefing cycle state updater is missing');
-  assert.match(
-    update,
-    /const label = this\.briefAutoRotateEnabled \? 'CYCLE ON' : 'CYCLE OFF';/,
-  );
-  assert.match(update, /setAttribute\('aria-label', label\)/);
-  assert.match(update, /\.title = help;/);
-  assert.doesNotMatch(update, /setAttribute\('aria-label', help\)/);
+  // The presented label is the state; the help is only the tooltip.
+  const views = [];
+  const owner = {
+    brief: createBriefState(),
+    publishBrief: (view) => views.push(view),
+    publishBriefView,
+    startBriefRotation() {},
+    stopBriefRotation() {},
+  };
+  setBriefAutoRotate.call(owner, true);
+  assert.equal(views.at(-1).autoLabel, 'CYCLE ON');
+  assert.equal(views.at(-1).autoRotate, true);
+  assert.match(views.at(-1).autoHelp, /^Stop automatic page cycling\./);
+  setBriefAutoRotate.call(owner, false);
+  assert.equal(views.at(-1).autoLabel, 'CYCLE OFF');
+  assert.match(views.at(-1).autoHelp, /^Cycle briefing pages automatically/);
 });
 
 test('voice Cockpit entry honours a requested contact layer before it enters', () => {

src/cockpitSignalFocus.test.mjs

@@ -1,187 +1,119 @@
+// src/cockpitSignalFocus.test.mjs — the Cockpit signal rows keep keyboard
+// focus while they refresh and reorder, over happy-dom with the real view.
+import './testSupport/registerDom.mjs';
 import test from 'node:test';
 import assert from 'node:assert/strict';
-import { afterEach } from 'node:test';
+import { createPinia } from 'pinia';
+import { createApp, nextTick } from 'vue';
 import { formatAwarenessLabel } from './data/militaryAwarenessEngine.js';
-import { CockpitViewController } from './ui/cockpitController.js';
-const previousDocument = globalThis.document;
-afterEach(() => {
-  globalThis.document = previousDocument;
-});
+import { createBriefState } from './ui/cockpitBriefPages.js';
+import {
+  handleSignalClick,
+  publishCockpitSignals,
+  pushCockpitSignal,
+  updateCockpitSignals,
+} from './ui/cockpitSignals.js';
+import { useCockpitStore } from './ui/stores/cockpit.js';
+import CockpitBriefing from './ui/views/panels/CockpitBriefing.vue';
 
-// Model native focus loss on removal AND on ordinary DOM moves. Keeping an
-// object reference alone is insufficient if reconciliation disconnects it.
-function fixture() {
-  const document = { activeElement: null };
-  let focusLosses = 0;
-  let focusCalls = 0;
-  class Node {
-    constructor(tagName) {
-      this.tagName = tagName.toUpperCase();
-      this.children = [];
-      this.parentNode = null;
-      this.dataset = {};
-      this.attributes = new Map();
-      this.className = '';
-      this._text = '';
-      this.classList = {
-        add: (...names) => {
-          this.className = [
-            ...new Set([
-              ...this.className.split(/\s+/).filter(Boolean),
-              ...names,
-            ]),
-          ].join(' ');
-        },
-      };
+/**
+ * A browser blurs an element it removes or moves. happy-dom only models the
+ * removal, so count both: any insert or removal of a node that holds focus
+ * is a loss, and a moved node gives its focus up as a browser's would.
+ */
+function trackFocus(t) {
+  const counts = { losses: 0, focusCalls: 0 };
+  const holdsFocus = (node) =>
+    node.isConnected && node.contains(document.activeElement);
+  const insertBefore = Node.prototype.insertBefore;
+  t.mock.method(Node.prototype, 'insertBefore', function (node, anchor) {
+    const lost = holdsFocus(node);
+    const result = insertBefore.call(this, node, anchor);
+    if (lost) {
+      counts.losses += 1;
+      document.activeElement.blur();
     }
-    get isConnected() {
-      return this === document.body || Boolean(this.parentNode?.isConnected);
-    }
-    get firstElementChild() {
-      return this.children[0] || null;
-    }
-    get nextElementSibling() {
-      return (
-        this.parentNode?.children[this.parentNode.children.indexOf(this) + 1] ||
-        null
-      );
-    }
-    get textContent() {
-      return (
-        this._text + this.children.map((node) => node.textContent).join('')
-      );
-    }
-    set textContent(value) {
-      this.replaceChildren();
-      this._text = String(value);
-    }
-    setAttribute(name, value) {
-      this.attributes.set(name, String(value));
-    }
-    getAttribute(name) {
-      return this.attributes.get(name) ?? null;
-    }
-    contains(node) {
-      return (
-        this === node || this.children.some((child) => child.contains(node))
-      );
-    }
-    append(...nodes) {
-      for (const node of nodes) this.insertBefore(node, null);
-    }
-    insertBefore(node, anchor) {
-      assert.ok(
-        anchor === null || anchor.parentNode === this,
-        'insert anchor belongs to its parent',
-      );
-      if (node === anchor) return node;
-      node.remove();
-      const index =
-        anchor === null ? this.children.length : this.children.indexOf(anchor);
-      this.children.splice(index, 0, node);
-      node.parentNode = this;
-      return node;
-    }
-    remove() {
-      if (!this.parentNode) return;
-      if (this.contains(document.activeElement)) {
-        document.activeElement = document.body;
-        focusLosses += 1;
-      }
-      this.parentNode.children.splice(
-        this.parentNode.children.indexOf(this),
-        1,
-      );
-      this.parentNode = null;
-    }
-    replaceChildren(...nodes) {
-      for (const child of [...this.children]) child.remove();
-      this._text = '';
-      this.append(...nodes);
-    }
-    matches(selector) {
-      if (selector === 'button[data-signal-layer][data-signal-id]') {
-        return (
-          this.tagName === 'BUTTON' &&
-          this.dataset.signalLayer != null &&
-          this.dataset.signalId != null
-        );
-      }
-      return selector.startsWith('.')
-        ? this.className.split(/\s+/).includes(selector.slice(1))
-        : this.tagName === selector.toUpperCase();
-    }
-    closest(selector) {
-      for (let node = this; node; node = node.parentNode)
-        if (node.matches(selector)) return node;
-      return null;
-    }
-    querySelectorAll(selector) {
-      return this.children.flatMap((child) => [
-        ...(child.matches(selector) ? [child] : []),
-        ...child.querySelectorAll(selector),
-      ]);
-    }
-    focus() {
-      assert.ok(
-        this.isConnected,
-        'a focus destination must still be connected',
-      );
-      focusCalls += 1;
-      document.activeElement = this;
-    }
-  }
-  document.body = new Node('body');
-  document.createElement = (tag) => new Node(tag);
-  document.activeElement = document.body;
-  globalThis.document = document;
-  const controller = Object.create(CockpitViewController.prototype);
-  controller.services = { formatAwarenessLabel };
-  controller.signalList = new Node('ol');
-  controller.signalToggle = new Node('button');
-  controller.briefTabs = [
-    new Node('button'),
-    new Node('button'),
-    new Node('button'),
-  ];
-  controller.briefPageIndex = 0;
-  controller.signalItems = [];
-  controller.signalSignatures = new Map();
-  controller.scheduleContextLayout = () => {};
-  const display = new Node('button');
-  const radio = new Node('button');
-  const outside = new Node('button');
-  document.body.append(
-    controller.signalToggle,
-    controller.signalList,
-    ...controller.briefTabs,
-    display,
-    radio,
-    outside,
-  );
+    return result;
+  });
+  const removeChild = Node.prototype.removeChild;
+  t.mock.method(Node.prototype, 'removeChild', function (node) {
+    if (holdsFocus(node)) counts.losses += 1;
+    return removeChild.call(this, node);
+  });
+  const focus = HTMLElement.prototype.focus;
+  t.mock.method(HTMLElement.prototype, 'focus', function (...args) {
+    assert.ok(this.isConnected, 'a focus destination must still be connected');
+    counts.focusCalls += 1;
+    return focus.apply(this, args);
+  });
+  return counts;
+}
+
+function fixture(t) {
+  document.body.replaceChildren();
+  const host = document.body.appendChild(document.createElement('div'));
+  const pinia = createPinia();
+  const app = createApp(CockpitBriefing).use(pinia);
+  app.mount(host);
+  const store = useCockpitStore(pinia);
+  const button = () => {
+    const element = document.createElement('button');
+    element.type = 'button';
+    return document.body.appendChild(element);
+  };
+  const display = button();
+  const radio = button();
+  const outside = button();
+  const counts = trackFocus(t);
+  t.after(() => app.unmount());
   const selected = [];
-  controller.services.militaryAwarenessLayer = {
-    focusTarget: (...args) => selected.push(args),
+  // The signal presenters need only this much of the controller.
+  const owner = {
+    destroyed: false,
+    brief: createBriefState(),
+    signalItems: [],
+    signalSignatures: new Map(),
+    publishSignals: (rows) => store.publishSignals(rows),
+    publishCockpitSignals,
+    scheduleContextLayout() {},
+    services: {
+      formatAwarenessLabel,
+      militaryAwarenessLayer: {
+        focusTarget: (...args) => selected.push(args),
+      },
+    },
   };
-  const click = (event) => controller.handleSignalClick(event);
-  const buttons = () => controller.signalList.querySelectorAll('button');
+  // The controller shows the card on entering Cockpit.
+  document.getElementById('cockpit-signal-stream').hidden = false;
+  const list = document.getElementById('cockpit-signal-list');
+  list.addEventListener('click', (event) =>
+    handleSignalClick.call(owner, event),
+  );
+  const buttons = () => [...list.querySelectorAll('button')];
+  // Tab visits the enabled buttons no hidden ancestor removes from view.
   const tab = () => {
-    const nodes = document.body.querySelectorAll('button');
-    const index = nodes.indexOf(document.activeElement);
-    nodes[(index + 1) % nodes.length].focus();
+    const nodes = [...document.querySelectorAll('button')].filter(
+      (node) => !node.disabled && !node.closest('[hidden]'),
+    );
+    nodes[(nodes.indexOf(document.activeElement) + 1) % nodes.length].focus();
   };
+  const pageTab = (index) =>
+    document.querySelector(`[data-cockpit-brief-index="${index}"]`);
+  const signalTab = () => pageTab(0);
   return {
-    controller,
-    document,
+    owner,
+    list,
     buttons,
     display,
     radio,
     outside,
     selected,
-    click,
     tab,
-    losses: () => focusLosses,
-    focusCalls: () => focusCalls,
+    pageTab,
+    signalTab,
+    store,
+    losses: () => counts.losses,
+    focusCalls: () => counts.focusCalls,
   };
 }
 
@@ -194,9 +126,14 @@ const item = (id, overrides = {}) => ({
   timestamp: 1_700_000_000_000,
   ...overrides,
 });
-const render = (f, items) => {
-  f.controller.signalItems = items;
-  f.controller.renderCockpitSignals();
+const render = async (f, items) => {
+  f.owner.signalItems = items;
+  publishCockpitSignals.call(f.owner);
+  await nextTick();
+};
+const refresh = async (f, distanceM) => {
+  updateCockpitSignals.call(f.owner, snapshot(distanceM), 0);
+  await nextTick();
 };
 const snapshot = (distanceM = 2000) => ({
   evaluatedAt: 1_700_000_000_000,
@@ -210,31 +147,61 @@ const snapshot = (distanceM = 2000) => ({
   ],
 });
 
-test('actual Context refresh retains the focused signal button across unchanged and changed details', () => {
-  const f = fixture();
-  f.controller.updateCockpitSignals(snapshot(), 0);
+test('rows render the signals the controller presents', async (t) => {
+  const f = fixture(t);
+  await render(f, [
+    item('a'),
+    item('status', { tone: 'warning', target: null, title: 'UNKNOWN' }),
+  ]);
+  const [action, status] = f.list.children;
+  assert.equal(action.className, 'nearby actionable');
+  assert.equal(action.querySelector('time').textContent, '22:13:20Z');
+  const button = action.querySelector('button.cockpit-signal-target');
+  assert.equal(button.type, 'button');
+  assert.equal(button.dataset.signalLayer, 'flights');
+  assert.equal(button.dataset.signalId, 'a');
+  assert.equal(button.getAttribute('aria-label'), 'Select flight Flight a');
+  assert.equal(
+    button.querySelector('.cockpit-signal-target-label').textContent,
+    'Flight a',
+  );
+  assert.equal(
+    button.querySelector('.cockpit-signal-target-chevron').textContent,
+    'chevron_right',
+  );
+  assert.equal(
+    action.querySelector('div > span').textContent,
+    'COMMERCIAL FLIGHT · 2 KM',
+  );
+  assert.equal(status.className, 'warning');
+  assert.equal(status.querySelector('div > strong').textContent, 'UNKNOWN');
+  assert.equal(status.querySelector('button'), null);
+});
+
+test('actual Context refresh retains the focused signal button across unchanged and changed details', async (t) => {
+  const f = fixture(t);
+  await refresh(f);
   const target = f.buttons()[1];
   target.focus();
   const calls = f.focusCalls();
-  for (let tick = 0; tick < 8; tick += 1)
-    f.controller.updateCockpitSignals(snapshot(2500), 0);
-  assert.equal(f.buttons()[1], target);
-  assert.equal(f.document.activeElement, target);
+  for (let tick = 0; tick < 8; tick += 1) await refresh(f, 2500);
+  assert.equal(f.buttons()[1] === target, true);
+  assert.equal(document.activeElement === target, true);
   assert.equal(f.losses(), 0);
   assert.equal(
     f.focusCalls(),
     calls,
     'refresh must preserve focus without repeatedly restoring it',
   );
-  assert.match(f.controller.signalList.textContent, /2\.5\u00a0KM/);
+  assert.match(f.list.textContent, /2\.5\u00a0KM/);
 });
 
-test('signal content and accessible name update without replacing the active target', () => {
-  const f = fixture();
-  render(f, [item('a')]);
+test('signal content and accessible name update without replacing the active target', async (t) => {
+  const f = fixture(t);
+  await render(f, [item('a')]);
   const target = f.buttons()[0];
   target.focus();
-  render(f, [
+  await render(f, [
     item('a', {
       title: 'RENAMED',
       tone: 'track',
@@ -242,21 +209,18 @@ test('signal content and accessible name update without replacing the active tar
       timestamp: 1_700_000_001_000,
     }),
   ]);
-  assert.equal(f.buttons()[0], target);
+  assert.equal(f.buttons()[0] === target, true);
   assert.equal(target.getAttribute('aria-label'), 'Select flight RENAMED');
   assert.match(target.textContent, /RENAMED/);
-  assert.match(f.controller.signalList.textContent, /CURRENT/);
-  assert.equal(
-    f.controller.signalList.children[0].className,
-    'track actionable',
-  );
-  assert.equal(f.document.activeElement, target);
+  assert.match(f.list.textContent, /CURRENT/);
+  assert.equal(f.list.children[0].className, 'track actionable');
+  assert.equal(document.activeElement === target, true);
   assert.equal(f.losses(), 0);
 });
 
-test('signal ranking changes move surrounding rows without disconnecting the focused row', () => {
-  const f = fixture();
-  render(
+test('signal ranking changes move surrounding rows without disconnecting the focused row', async (t) => {
+  const f = fixture(t);
+  await render(
     f,
     ['a', 'b', 'c', 'd'].map((id) => item(id)),
   );
@@ -267,8 +231,10 @@ test('signal ranking changes move surrounding rows without disconnecting the foc
     ['d', 'c', 'b', 'a'],
     ['b', 'c', 'd', 'a'],
     ['a', 'd', 'c', 'b'],
+    ['c', 'a', 'b', 'd'],
+    ['b', 'a', 'd', 'c'],
   ]) {
-    render(
+    await render(
       f,
       order.map((id) => item(id)),
     );
@@ -276,97 +242,152 @@ test('signal ranking changes move surrounding rows without disconnecting the foc
       f.buttons().map((button) => button.dataset.signalId),
       order,
     );
-    assert.equal(f.document.activeElement, target);
+    assert.equal(document.activeElement === target, true);
     assert.equal(f.losses(), 0);
   }
   assert.equal(f.focusCalls(), calls);
 });
 
-test('a new pushed signal preserves existing focus and delegated selection reads the current target', () => {
-  const f = fixture();
-  render(f, [item('a'), item('b')]);
+test('a new pushed signal preserves existing focus and delegated selection reads the current target', async (t) => {
+  const f = fixture(t);
+  await render(f, [item('a'), item('b')]);
   const target = f.buttons()[1];
   target.focus();
-  f.controller.pushCockpitSignal(
+  pushCockpitSignal.call(
+    f.owner,
     'status',
     'warning',
     'INPUT UNKNOWN',
     'SOURCE UNAVAILABLE',
   );
-  assert.equal(f.document.activeElement, target);
+  await nextTick();
+  assert.equal(f.list.children.length, 3);
+  assert.equal(document.activeElement === target, true);
   assert.equal(f.losses(), 0);
-  const event = {
-    target: target.children[0],
-    prevented: false,
-    preventDefault() {
-      this.prevented = true;
-    },
-  };
-  f.click(event);
-  assert.equal(event.prevented, true);
+  const click = new MouseEvent('click', { bubbles: true, cancelable: true });
+  target.querySelector('.cockpit-signal-target-label').dispatchEvent(click);
+  assert.equal(click.defaultPrevented, true);
   assert.deepEqual(f.selected, [['flights', 'b', { origin: 'user' }]]);
 });
 
-test('removing the focused identity uses the existing briefing tab once and permits forward traversal', () => {
-  const f = fixture();
-  render(f, [item('a'), item('b')]);
+test('removing the focused identity uses the shown briefing tab once and permits forward traversal', async (t) => {
+  const f = fixture(t);
+  await render(f, [item('a'), item('b')]);
   const removed = f.buttons()[1];
   removed.focus();
   const calls = f.focusCalls();
-  render(f, [item('a')]);
+  await render(f, [item('a')]);
   assert.equal(removed.isConnected, false);
-  assert.equal(f.document.activeElement, f.controller.briefTabs[0]);
+  assert.equal(document.activeElement === f.signalTab(), true);
   assert.equal(f.focusCalls(), calls + 1);
+  assert.equal(f.losses(), 0);
+  assert.equal(f.signalTab().closest('[hidden]'), null);
+  // Traversal carries on forward from the footer tab.
   f.tab();
-  f.tab();
-  f.tab();
-  assert.equal(f.document.activeElement, f.display);
-  render(f, [item('a', { detail: 'UPDATED' })]);
+  assert.equal(document.activeElement === f.pageTab(1), true);
+  while (document.activeElement !== f.display) f.tab();
+  await render(f, [item('a', { detail: 'UPDATED' })]);
   assert.equal(
-    f.document.activeElement,
-    f.display,
+    document.activeElement === f.display,
+    true,
     'later refresh must not pull focus back',
   );
   f.tab();
-  assert.equal(f.document.activeElement, f.radio);
+  assert.equal(document.activeElement === f.radio, true);
 });
 
-test('a changed target cannot reuse a focused action for another flight', () => {
-  const f = fixture();
-  render(f, [item('a', { key: 'shared-status-key' })]);
+test('a changed target cannot reuse a focused action for another flight', async (t) => {
+  const f = fixture(t);
+  await render(f, [item('a', { key: 'shared-status-key' })]);
   const removed = f.buttons()[0];
   removed.focus();
-  render(f, [
+  await render(f, [
     item('b', {
       key: 'shared-status-key',
       target: { layerId: 'military', id: 'b' },
     }),
   ]);
   const target = f.buttons()[0];
-  assert.notEqual(target, removed);
+  assert.equal(target === removed, false);
   assert.equal(removed.isConnected, false);
-  assert.equal(f.document.activeElement, f.controller.briefTabs[0]);
-  f.click({ target, preventDefault() {} });
+  assert.equal(document.activeElement === f.signalTab(), true);
+  target.click();
   assert.deepEqual(f.selected, [['military', 'b', { origin: 'user' }]]);
 });
 
-test('empty, informational and duplicate-key rows have no stale or aliased actions', () => {
-  const f = fixture();
-  render(f, [item('a'), item('a')]);
+test('empty, informational and duplicate-key rows have no stale or aliased actions', async (t) => {
+  const f = fixture(t);
+  await render(f, [item('a'), item('a')]);
   const [first, second] = f.buttons();
-  assert.notEqual(first, second);
+  assert.equal(first === second, false);
   second.focus();
-  render(f, [item('a'), item('a')]);
-  assert.deepEqual(f.buttons(), [first, second]);
-  assert.equal(f.document.activeElement, second);
-  render(f, [item('status', { target: null, title: 'UNKNOWN' })]);
+  await render(f, [item('a'), item('a')]);
+  const again = f.buttons();
+  assert.equal(again[0] === first && again[1] === second, true);
+  assert.equal(document.activeElement === second, true);
+  await render(f, [item('status', { target: null, title: 'UNKNOWN' })]);
   assert.equal(f.buttons().length, 0);
-  assert.match(f.controller.signalList.textContent, /UNKNOWN/);
-  assert.equal(f.document.activeElement, f.controller.briefTabs[0]);
+  assert.match(f.list.textContent, /UNKNOWN/);
+  assert.equal(document.activeElement === f.signalTab(), true);
   f.outside.focus();
-  render(f, []);
-  assert.equal(f.controller.signalList.children.length, 0);
-  render(f, [item('a')]);
-  assert.notEqual(f.buttons()[0], first);
-  assert.equal(f.document.activeElement, f.outside);
+  await render(f, []);
+  assert.equal(f.list.children.length, 0);
+  await render(f, [item('a')]);
+  assert.equal(f.buttons()[0] === first, false);
+  assert.equal(document.activeElement === f.outside, true);
+  assert.equal(f.losses(), 0);
+});
+
+test('any reordering of five rows keeps focus wherever it sits', async (t) => {
+  const f = fixture(t);
+  const ids = ['a', 'b', 'c', 'd', 'e'];
+  // A fixed pseudo-random sequence, so a failure reproduces.
+  let seed = 7;
+  const random = () => {
+    seed = (seed * 48271) % 2147483647;
+    return seed / 2147483647;
+  };
+  const shuffle = (list) => {
+    const next = [...list];
+    for (let index = next.length - 1; index > 0; index -= 1) {
+      const swap = Math.floor(random() * (index + 1));
+      [next[index], next[swap]] = [next[swap], next[index]];
+    }
+    return next;
+  };
+  await render(
+    f,
+    ids.map((id) => item(id)),
+  );
+  for (let round = 0; round < 60; round += 1) {
+    const target = f.buttons()[round % ids.length];
+    target.focus();
+    const order = shuffle(ids);
+    await render(
+      f,
+      order.map((id) => item(id)),
+    );
+    assert.deepEqual(
+      f.buttons().map((button) => button.dataset.signalId),
+      order,
+    );
+    assert.equal(document.activeElement === target, true);
+  }
+  assert.equal(f.losses(), 0);
+});
+
+test('the fallback follows the shown page, and the collapse toggle without tabs', async (t) => {
+  const f = fixture(t);
+  f.store.publishBrief({ ...createBriefState(), pageIndex: 2 });
+  await render(f, [item('a'), item('b')]);
+  f.buttons()[1].focus();
+  await render(f, [item('a')]);
+  assert.equal(document.activeElement === f.pageTab(2), true);
+  for (const index of [0, 1, 2]) f.pageTab(index).remove();
+  f.buttons()[0].focus();
+  await render(f, []);
+  assert.equal(
+    document.activeElement === document.getElementById('cockpit-signal-toggle'),
+    true,
+  );
 });

src/contextSessionOrdering.test.mjs

@@ -168,7 +168,7 @@ test('every user-facing Context exit route settles through the failure surface',
 test('the Radio chip catches lifecycle rejection and semantic false through the toast wrapper', () => {
   const radioControls = radioBindings.slice(
     radioBindings.indexOf('const toggleRadio = async (trigger) => {'),
-    radioBindings.indexOf("this.listen(this._radioFilter, 'change'"),
+    radioBindings.indexOf('this._storeToken = this.store?.connect?.('),
   );
   assert.match(radioControls, /await this\.actions\.runUserAction\(/);
   assert.match(radioControls, /Radio could not \$\{enabling \? 'start' : 'stop'\} cleanly/);
@@ -178,7 +178,7 @@ test('the Radio chip catches lifecycle rejection and semantic false through the
 test('only the expanded Radio Enable gesture requests the contained post-enable reveal', () => {
   const radioControls = radioBindings.slice(
     radioBindings.indexOf('const toggleRadio = async (trigger) => {'),
-    radioBindings.indexOf("this.listen(this._radioFilter, 'change'"),
+    radioBindings.indexOf('this._storeToken = this.store?.connect?.('),
   );
   assert.match(radioControls, /revealAfterEnable = enabling && trigger === this\._radioEnableBtn/);
   assert.match(radioControls, /if \(revealAfterEnable\)\s*await this\._revealRadioControlsAfterExplicitEnable\(trigger\)/);

src/contextTabKeyboard.test.mjs

@@ -1,17 +1,16 @@
-import { expandApplicationHtml } from '../build/application-html.js';
+import { renderApplicationHtml } from './testSupport/applicationHtml.mjs';
 import { readStylesheet } from './testSupport/readStylesheet.mjs';
 import { _selectContextMode } from './ui/contextTransactions.js';
-import { _syncContextModeButtons } from './ui/contextPresentation.js';
 import { _initGlobalContextPanel } from './ui/contextBindings.js';
 import { clearSelectedLayers } from './ui/contextActions.js';
 import { readFileSync as readRadioSource } from 'node:fs';
 const radioBindings = readRadioSource(new URL('./ui/radioBindings.js', import.meta.url), 'utf8');
-const radioPresentation = readRadioSource(new URL('./ui/radioPresentation.js', import.meta.url), 'utf8');
+const contextView = readRadioSource(new URL('./ui/views/ContextView.vue', import.meta.url), 'utf8');
 import { readFileSync } from 'node:fs';
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
 
-const html = expandApplicationHtml(readFileSync(new URL('../index.html', import.meta.url), 'utf8'));
+const html = await renderApplicationHtml(readFileSync(new URL('../index.html', import.meta.url), 'utf8'));
 const css = readStylesheet(new URL('../style.css', import.meta.url));
 
 test('Contacts and Space Missions both participate in the ordinary Tab sequence', () => {
@@ -22,75 +21,12 @@ test('Contacts and Space Missions both participate in the ordinary Tab sequence'
     assert.match(button[0], /tabindex="0"/);
   }
 
-  const syncSource = _syncContextModeButtons.toString();
-  assert.match(syncSource, /\[\s*this\._globalContextFlightsBtn,\s*this\._globalContextMissionsBtn,?\s*\]/);
-  assert.match(syncSource, /button\.tabIndex = 0/);
-  assert.doesNotMatch(syncSource, /tabIndex\s*=\s*[^;]*\?\s*-1/);
-});
-
-test('Context transition state preserves focus and Tab availability until settle', () => {
-  const attributes = () => new Map();
-  const makeButton = () => {
-    const attrs = attributes();
-    let disabled = false;
-    const button = {
-      attrs,
-      tabIndex: -1,
-      classList: { toggle() {} },
-      setAttribute(name, value) { attrs.set(name, String(value)); },
-      get disabled() { return disabled; },
-      set disabled(value) {
-        disabled = Boolean(value);
-        // Model the browser behavior that exposed this regression: native
-        // disabled drops focus immediately.
-        if (disabled && globalThis.document?.activeElement === button) {
-          globalThis.document.activeElement = null;
-        }
-      },
-    };
-    return button;
-  };
-  const contacts = makeButton();
-  const missions = makeButton();
-  const panel = { classList: { toggle() {} }, setAttribute() {} };
-  const priorDocument = globalThis.document;
-  globalThis.document = { activeElement: missions, getElementById: () => panel };
-  const owner = {
-    _globalContextPanel: panel,
-    actions: { syncDetection() {}, scheduleLayout() {} },
-    _contextMode: null,
-    _contextModeChanging: true,
-    _globalContextFlightsBtn: contacts,
-    _globalContextMissionsBtn: missions,
-    _contextModeStandby: {},
-    _contextFlightsView: {},
-    _contextMissionsView: {},
-    cockpitView: { syncEntry() {} },
-    _syncContactsDetection() {},
-    _scheduleRightPanelLayout() {},
-  };
-  try {
-    _syncContextModeButtons.call(owner);
-    assert.equal(globalThis.document.activeElement, missions, 'busy sync retains focused Space Missions');
-    for (const button of [contacts, missions]) {
-      assert.equal(button.disabled, false);
-      assert.equal(button.tabIndex, 0);
-      assert.equal(button.attrs.get('aria-disabled'), 'true');
-      assert.equal(button.attrs.get('aria-busy'), 'true');
-    }
-
-    owner._contextModeChanging = false;
-    owner._contextMode = 'space-missions';
-    _syncContextModeButtons.call(owner);
-    assert.equal(globalThis.document.activeElement, missions, 'settled sync retains focused Space Missions');
-    for (const button of [contacts, missions]) {
-      assert.equal(button.disabled, false);
-      assert.equal(button.tabIndex, 0);
-      assert.equal(button.attrs.get('aria-disabled'), 'false');
-      assert.equal(button.attrs.get('aria-busy'), 'false');
-    }
-  } finally {
-    globalThis.document = priorDocument;
+  // The view keeps both tabs' tabindex static and never disables them; the
+  // transition itself is covered over happy-dom in ui/contextPanel.test.mjs.
+  for (const id of ['global-context-flights-btn', 'global-context-missions-btn']) {
+    const tag = contextView.match(new RegExp(`<button id="${id}"[^>]*>`))?.[0];
+    assert.ok(tag, `${id} is missing from the view`);
+    assert.doesNotMatch(tag, /:tabindex|:disabled|\sdisabled/);
   }
 });
 
@@ -129,30 +65,45 @@ test('Context tabs draw a visible keyboard-focus outline including active tabs',
 
 test('Context async action buttons remain focused while busy', () => {
   const init = _initGlobalContextPanel.toString();
-  const radio = radioBindings.slice(radioBindings.indexOf('const toggleRadio = async (trigger) => {'), radioBindings.indexOf('this.listen(this._cockpitRadioToggleBtn,'));
-  const radioSync = radioPresentation.slice(0, radioPresentation.indexOf('if (this._radioFilter)'));
+  const radio = radioBindings.slice(radioBindings.indexOf('const toggleRadio = async (trigger) => {'), radioBindings.indexOf('this._storeToken = this.store?.connect?.('));
+  const radioPanel = readFileSync(new URL('./ui/views/panels/RadioPanel.vue', import.meta.url), 'utf8');
   const clear = clearSelectedLayers.toString();
 
-  assert.match(init, /button\.getAttribute\('aria-busy'\) === 'true'/);
-  assert.doesNotMatch(init, /button\.disabled\s*=\s*true/);
+  assert.match(init, /if \(this\._installationsSearchBusy\) return;/);
+  assert.doesNotMatch(init, /\.disabled\s*=\s*true/);
+  const search = contextView.match(/<button id="installations-search-btn"[^>]*>/)?.[0];
+  assert.ok(search, 'nearby sites search is missing');
+  assert.doesNotMatch(search, /:disabled|\sdisabled/);
+  assert.match(search, /:aria-busy=/);
   assert.match(radio, /trigger\.getAttribute\('aria-busy'\) === 'true'/);
   assert.doesNotMatch(radio, /trigger\.disabled\s*=\s*true/);
-  for (const name of ['_radioEnableBtn', '_cockpitRadioEnableBtn']) {
-    assert.match(radioSync, new RegExp(`${name}\\.disabled = false`));
-  }
-  assert.doesNotMatch(clear, /_clearSelectedLayersBtn\.disabled\s*=\s*true/);
+  const cockpitRadio = readFileSync(new URL('./ui/views/panels/CockpitUtilityControls.vue', import.meta.url), 'utf8');
+  const cockpitEnable = cockpitRadio.match(/<UiButton id="cockpit-radio-enable-btn"[^>]*>/)?.[0];
+  assert.ok(cockpitEnable, 'Cockpit Radio Enable button is missing');
+  assert.doesNotMatch(cockpitEnable, /disabled(?!=")|:disabled/);
+  assert.match(cockpitEnable, /:aria-busy=/);
+  // The Radio view never disables its Enable button; it marks it busy.
+  const enable = radioPanel.match(/<UiButton id="radio-enable-btn"[^>]*>/)?.[0];
+  assert.ok(enable, 'Radio Enable button is missing');
+  assert.doesNotMatch(enable, /disabled(?!=")|:disabled/);
+  assert.match(enable, /:aria-busy=/);
   assert.match(clear, /this\.setClearBusy\(true\)/);
-  const control = readFileSync(new URL('./ui/clearLayersControl.js', import.meta.url), 'utf8');
-  assert.match(control, /button\.setAttribute\('aria-busy', String\(busy\)\)/);
-  assert.doesNotMatch(control, /button\.disabled\s*=/);
+  // The globe actions view marks the clear button busy, never disabled.
+  const globeActions = readFileSync(new URL('./ui/views/panels/GlobeActions.vue', import.meta.url), 'utf8');
+  const clearButton = globeActions.match(/<button id="clear-selected-layers"[^>]*>/)?.[0];
+  assert.ok(clearButton, 'Clear selected layers button is missing');
+  assert.doesNotMatch(clearButton, /disabled(?!=")|:disabled=/);
+  assert.match(clearButton, /:aria-busy=/);
 });
 
 test('Context header holds only its title and collapse control', () => {
-  const panel = html.match(/<div id="global-context-panel"[\s\S]*?<div class="cyber-panel-body"/);
+  const panel = html.match(/<div id="global-context-panel"[\s\S]*?<div class="cyber-panel-body[ "]/);
   assert.ok(panel, 'Global Context panel is missing');
-  const header = panel[0].match(/<div class="panel-header">([\s\S]*?)<\/div>\s*<div class="cyber-panel-body"/);
+  const header = panel[0].match(/<div class="ui-panel__head panel-header">([\s\S]*?)<\/div>\s*<div class="cyber-panel-body[ "]/);
   assert.ok(header, 'Global Context header is missing');
-  const tags = [...header[1].matchAll(/<(\w+)\s+class="([^"]+)"/g)].map(([, tag, cls]) => `${tag}.${cls}`);
+  // The kit's own ui-* classes carry no Core styles.
+  const tags = [...header[1].matchAll(/<(\w+)\s+(?:type="button"\s+)?class="([^"]+)"/g)].map(([, tag, cls]) =>
+    `${tag}.${cls.split(' ').filter((name) => !/^ui-/.test(name)).join(' ')}`);
   assert.deepEqual(tags, ['span.panel-title', 'span.panel-divider', 'button.panel-collapse-btn']);
 });
 

src/creditKeyboard.js

@@ -2,7 +2,7 @@
  * Adds the keyboard semantics omitted by Cesium's href-less attribution links.
  * Cesium retains ownership of showing and hiding its required credit lightbox.
  */
-import { getLocale, t } from './i18n/index.js';
+import { t } from './i18n/index.js';
 
 export function configureCreditKeyboardAccess(root = document) {
   const expand = root?.querySelector?.(
@@ -14,19 +14,19 @@ export function configureCreditKeyboardAccess(root = document) {
   const overlay = lightbox.parentElement;
 
   // Cesium writes these two texts in English once, when it builds the credit
-  // display, and never rewrites them; English keeps Cesium's own text.
-  if (getLocale() !== 'en') {
-    expand.textContent = t('Data attribution');
-    const title = lightbox.querySelector?.('.cesium-credit-lightbox-title');
-    if (title) title.textContent = t('Data provided by:');
-  }
+  // display, and never rewrites them; English is Cesium's own text. Called
+  // again after a locale change, this words them again.
+  expand.textContent = t('Data attribution');
+  const title = lightbox.querySelector?.('.cesium-credit-lightbox-title');
+  if (title) title.textContent = t('Data provided by:');
 
   if (!lightbox.id) lightbox.id = 'cesium-credit-lightbox';
   expand.setAttribute('role', 'button');
   expand.setAttribute('tabindex', '0');
   expand.setAttribute('aria-haspopup', 'dialog');
   expand.setAttribute('aria-controls', lightbox.id);
-  expand.setAttribute('aria-expanded', 'false');
+  if (!expand.hasAttribute?.('aria-expanded'))
+    expand.setAttribute('aria-expanded', 'false');
   close.setAttribute('role', 'button');
   close.setAttribute('tabindex', '0');
   close.setAttribute('aria-label', t('Close data attribution'));

src/creditKeyboard.test.mjs

@@ -221,3 +221,16 @@ for (const [locale, link, title] of [
       setLocale('en');
     }
   });
+
+test('setting up again after a switch back to English restores the English texts', () => {
+  const f = textFixture();
+  setLocale('ru');
+  try {
+    configureCreditKeyboardAccess(f.root);
+  } finally {
+    setLocale('en');
+  }
+  configureCreditKeyboardAccess(f.root);
+  assert.equal(f.expand.textContent, 'Data attribution');
+  assert.equal(f.title.textContent, 'Data provided by:');
+});

src/cyberSonar.js

@@ -480,11 +480,16 @@ export function setCyberSonarEnabled(
   return enabled;
 }
 
-/** Whether the map-mode sweep should alter flight presentation. */
+/**
+ * Whether the map-mode sweep should alter flight presentation. `hudActive`
+ * is the HUD's visibility from its owner, which a caller acting on it in the
+ * same turn passes; otherwise the rendered `#intel-hud` class answers.
+ */
 export function isCyberSonarActive({
   root = globalThis.document?.documentElement,
   body = globalThis.document?.body,
   hud,
+  hudActive,
   reducedMotion,
 } = {}) {
   // Keep optional method calls in the body: production downleveling of nested
@@ -498,7 +503,7 @@ export function isCyberSonarActive({
   return !!(
     root?.dataset?.uiTheme === 'cyber' &&
     isCyberSonarEnabled(root) &&
-    hud?.classList?.contains?.('active') &&
+    (hudActive ?? hud?.classList?.contains?.('active')) &&
     !body?.classList?.contains?.('cockpit-mode') &&
     !reducedMotion
   );
@@ -508,12 +513,13 @@ export function isCyberMapThemeActive({
   root = globalThis.document?.documentElement,
   body = globalThis.document?.body,
   hud,
+  hudActive,
 } = {}) {
   if (hud === undefined)
     hud = globalThis.document?.getElementById?.('intel-hud');
   return !!(
     root?.dataset?.uiTheme === 'cyber' &&
-    hud?.classList?.contains?.('active') &&
+    (hudActive ?? hud?.classList?.contains?.('active')) &&
     !body?.classList?.contains?.('cockpit-mode')
   );
 }

src/data/aisLiveVessels.test.mjs

@@ -35,6 +35,10 @@ import { ensureGeoidReady, geoidHeight } from './geoid.js';
 import { registerPickOwner, unregisterPickOwner } from './pickRegistry.js';
 import { applyVesselOverlayPolicy } from './vesselLabels.js';
 import { layerFeedState } from './manager.js';
+import {
+  presentSelectedVessel,
+  subscribeSelectedVessel,
+} from '../hudReadouts.js';
 
 test('open feed with vessels is healthy (null)', () => {
   assert.equal(deriveAisFeedError({ status: 'open', lastMessageAt: 1, error: null }, 42), null);
@@ -856,15 +860,6 @@ function makeTrailSpy() {
   };
 }
 
-function makeClassList(...initial) {
-  const classes = new Set(initial);
-  return {
-    add(value) { classes.add(value); },
-    remove(value) { classes.delete(value); },
-    contains(value) { return classes.has(value); },
-  };
-}
-
 function makeInteractionHandler() {
   return {
     click: null,
@@ -934,14 +929,20 @@ function installWireHarness(picked, stateOverrides = {}) {
   };
   const record = makeRecord();
   const trail = makeTrailSpy();
+  presentSelectedVessel({ text: `AIS: ${record.name}` });
+  let vesselReadout;
+  const stopReadout = subscribeSelectedVessel(
+    (readout) => (vesselReadout = readout),
+  );
   const hud = {
-    textContent: `AIS: ${record.name}`,
-    classList: makeClassList('active'),
+    get readout() {
+      return vesselReadout;
+    },
   };
 
   globalThis.window = windowTarget;
   globalThis.document = {
-    getElementById: (id) => (id === 'hud-ais-vessel' ? hud : null),
+    getElementById: () => null,
   };
   _setVesselStateForTest({
     records: [record],
@@ -966,6 +967,7 @@ function installWireHarness(picked, stateOverrides = {}) {
     reinstalledHandlers,
     interactionHandlerFactory,
     cleanup() {
+      stopReadout();
       aisLiveVesselsLayer.destroy();
       if (hadWindow) globalThis.window = priorWindow;
       else delete globalThis.window;
@@ -1091,8 +1093,7 @@ test('vessel interaction wire: id-less 3D Tiles pick deselects and resets the HU
     harness.handler.click({ position: { x: 10, y: 20 } });
 
     assert.equal(aisLiveVesselsLayer.getSelectedInfo(), null);
-    assert.equal(harness.hud.textContent, 'AIS: --');
-    assert.equal(harness.hud.classList.contains('active'), false);
+    assert.equal(harness.hud.readout, null);
     // Clicking away is a deliberate deselect, not the vessel aging out of the
     // feed. Consumers that keep a readout on screen (the Cockpit Contact
     // panel) tear down on 'deliberate' and hold last-known on 'evicted'.
@@ -1119,8 +1120,7 @@ test('vessel interaction wire: empty pick deselects and emits gev:entity-selecti
     harness.handler.click({ position: { x: 10, y: 20 } });
 
     assert.equal(aisLiveVesselsLayer.getSelectedInfo(), null);
-    assert.equal(harness.hud.textContent, 'AIS: --');
-    assert.equal(harness.hud.classList.contains('active'), false);
+    assert.equal(harness.hud.readout, null);
     // Empty pick is a deliberate deselect — see the note above.
     assert.deepEqual(cleared, [{ layerId: 'ais-live-vessels', reason: 'deliberate' }]);
   } finally {
@@ -1133,8 +1133,7 @@ test('vessel interaction wire: Escape deselects the selected vessel', () => {
   try {
     harness.keyTarget.dispatch({ key: 'Escape' });
     assert.equal(aisLiveVesselsLayer.getSelectedInfo(), null);
-    assert.equal(harness.hud.textContent, 'AIS: --');
-    assert.equal(harness.hud.classList.contains('active'), false);
+    assert.equal(harness.hud.readout, null);
   } finally {
     harness.cleanup();
   }

src/data/bhoteKoshiEmbeddedMedia.js

@@ -1,5 +1,5 @@
 import * as Cesium from 'cesium';
-import { t, msg } from '../i18n/index.js';
+import { t, msg, onLocaleChange } from '../i18n/index.js';
 
 const YOUTUBE_HOSTS = new Set([
   'youtube.com',
@@ -674,6 +674,30 @@ export function createBhoteKoshiEmbeddedMedia({
   let record = null;
   let warmRecord = null;
   let generation = 0;
+  // Text the cards show, kept as the calls that word it so a locale change
+  // words it again. A node is forgotten once it has left the page.
+  const worded = new Map();
+  function forgetDetached() {
+    for (const node of worded.keys())
+      if (!node.isConnected) worded.delete(node);
+  }
+  function word(node, property, text) {
+    let properties = worded.get(node);
+    if (!properties) worded.set(node, (properties = new Map()));
+    properties.set(property, text);
+    writeWord(node, property, text());
+  }
+  function writeWord(node, property, value) {
+    if (property === 'textContent' || property === 'title')
+      node[property] = value;
+    else node.setAttribute(property, value);
+  }
+  const offLocale = onLocaleChange(() => {
+    forgetDetached();
+    for (const [node, properties] of worded)
+      for (const [property, text] of properties)
+        writeWord(node, property, text());
+  });
   const leavingRecords = new Set();
 
   const prefersReducedMotion = () =>
@@ -818,6 +842,7 @@ export function createBhoteKoshiEmbeddedMedia({
     current.youtubeSession?.destroy();
     current.card?.remove?.();
     leavingRecords.delete(current);
+    forgetDetached();
   }
 
   const position = () => {
@@ -871,6 +896,7 @@ export function createBhoteKoshiEmbeddedMedia({
       destroyFacebookSession(warmRecord.facebookSession);
     else warmRecord.iframe?.remove?.();
     warmRecord = null;
+    forgetDetached();
   }
 
   function takeWarmFacebook(key, host) {
@@ -917,9 +943,11 @@ export function createBhoteKoshiEmbeddedMedia({
       startAtSec,
       endAtSec,
     });
-    iframe.title = t('Preloading {provider} media', {
-      provider: providerLabel(source.provider),
-    });
+    word(iframe, 'title', () =>
+      t('Preloading {provider} media', {
+        provider: providerLabel(source.provider),
+      }),
+    );
     iframe.tabIndex = -1;
     iframe.setAttribute('aria-hidden', 'true');
     iframe.loading = 'eager';
@@ -930,7 +958,7 @@ export function createBhoteKoshiEmbeddedMedia({
   }
 
   async function mountX(current, token) {
-    current.status.textContent = t('LOADING X POST…');
+    word(current.status, 'textContent', () => t('LOADING X POST…'));
     try {
       const api = await xLoader(documentRef, globalRef);
       if (token !== generation || record !== current) return;
@@ -950,14 +978,18 @@ export function createBhoteKoshiEmbeddedMedia({
         throw new Error(
           msg('The X post is unavailable or cannot be embedded.'),
         );
-      current.status.textContent = t('X POST · PROVIDER CONTROLS');
+      word(current.status, 'textContent', () =>
+        t('X POST · PROVIDER CONTROLS'),
+      );
       position();
     } catch (error) {
       if (token !== generation || record !== current) return;
       current.card.classList.add('is-unavailable');
-      current.status.textContent = t('{reason} OPEN ORIGINAL.', {
-        reason: t(String(error?.message || msg('X embed unavailable'))),
-      });
+      word(current.status, 'textContent', () =>
+        t('{reason} OPEN ORIGINAL.', {
+          reason: t(String(error?.message || msg('X embed unavailable'))),
+        }),
+      );
       position();
     }
   }
@@ -970,22 +1002,28 @@ export function createBhoteKoshiEmbeddedMedia({
     session.shouldPlay = autoplay === true;
     session.onReady = () => {
       if (token !== generation || record !== current) return;
-      current.status.textContent = t('FACEBOOK · PROVIDER CONTROLS');
+      word(current.status, 'textContent', () =>
+        t('FACEBOOK · PROVIDER CONTROLS'),
+      );
       current.card.classList.remove('is-unavailable');
       position();
     };
     session.onError = (error) => {
       if (token !== generation || record !== current) return;
       current.card.classList.add('is-unavailable');
-      current.status.textContent = t('{reason} OPEN ORIGINAL.', {
-        reason: t(String(error?.message || msg('Facebook embed unavailable'))),
-      });
+      word(current.status, 'textContent', () =>
+        t('{reason} OPEN ORIGINAL.', {
+          reason: t(
+            String(error?.message || msg('Facebook embed unavailable')),
+          ),
+        }),
+      );
       position();
     };
     session.onPlaybackBlocked = () => {
       if (token !== generation || record !== current) return;
-      current.status.textContent = t(
-        'AUTOPLAY BLOCKED · USE PROVIDER CONTROLS',
+      word(current.status, 'textContent', () =>
+        t('AUTOPLAY BLOCKED · USE PROVIDER CONTROLS'),
       );
     };
     if (session.ready) session.onReady();
@@ -1036,8 +1074,7 @@ export function createBhoteKoshiEmbeddedMedia({
     const portraitClass = isPortraitMedia(media) ? ' is-portrait' : '';
     card.className = `bhote-embedded-callout is-${source.provider}${portraitClass}`;
     card.dataset.provider = source.provider;
-    card.setAttribute(
-      'aria-label',
+    word(card, 'aria-label', () =>
       t('Embedded {provider} media for {source}', {
         provider: providerLabel(source.provider),
         source: observation?.title
@@ -1054,22 +1091,26 @@ export function createBhoteKoshiEmbeddedMedia({
     leader.innerHTML =
       '<path pathLength="1" fill="none" stroke="rgba(147,213,228,.72)" stroke-width="1.5"/><circle r="4" fill="#6be8ff" stroke="#ffffff" stroke-width="1.5"/>';
     const player = documentRef.createElement('div');
-    player.className = 'bhote-embedded-callout-player';
+    player.className = 'bhote-embedded-callout-player ui-scroll';
     const footer = documentRef.createElement('footer');
     const title = documentRef.createElement('strong');
-    title.textContent = bhoteEventText(
-      observation?.shortTitle || observation?.title || t('Witness source'),
-    ).toUpperCase();
+    word(title, 'textContent', () =>
+      bhoteEventText(
+        observation?.shortTitle || observation?.title || t('Witness source'),
+      ).toUpperCase(),
+    );
     const status = documentRef.createElement('small');
     status.setAttribute('role', 'status');
-    status.textContent = t('{provider} · EMBEDDED SOURCE', {
-      provider: providerLabel(source.provider),
-    });
+    word(status, 'textContent', () =>
+      t('{provider} · EMBEDDED SOURCE', {
+        provider: providerLabel(source.provider),
+      }),
+    );
     const link = documentRef.createElement('a');
     link.href = source.url;
     link.target = '_blank';
     link.rel = 'noopener noreferrer';
-    link.textContent = t('OPEN ORIGINAL ↗');
+    word(link, 'textContent', () => t('OPEN ORIGINAL ↗'));
     footer.append(title, status, link);
     const body = documentRef.createElement('div');
     body.className = 'bhote-embedded-callout-body';
@@ -1109,12 +1150,14 @@ export function createBhoteKoshiEmbeddedMedia({
           url.searchParams.set('origin', globalRef.location.origin);
         iframe.src = url.href;
       }
-      iframe.title = t('{provider} media: {source}', {
-        provider: providerLabel(source.provider),
-        source: observation?.title
-          ? bhoteEventText(observation.title)
-          : t('witness source'),
-      });
+      word(iframe, 'title', () =>
+        t('{provider} media: {source}', {
+          provider: providerLabel(source.provider),
+          source: observation?.title
+            ? bhoteEventText(observation.title)
+            : t('witness source'),
+        }),
+      );
       iframe.allow =
         'autoplay; encrypted-media; picture-in-picture; fullscreen';
       iframe.allowFullscreen = true;
@@ -1131,9 +1174,11 @@ export function createBhoteKoshiEmbeddedMedia({
               record.youtubeSession.getState().phase,
             )
           ) {
-            status.textContent = t('{provider} · PROVIDER CONTROLS', {
-              provider: providerLabel(source.provider),
-            });
+            word(status, 'textContent', () =>
+              t('{provider} · PROVIDER CONTROLS', {
+                provider: providerLabel(source.provider),
+              }),
+            );
           }
           position();
         },
@@ -1151,11 +1196,13 @@ export function createBhoteKoshiEmbeddedMedia({
           isCurrent: () => token === generation && record === current,
           onStatus: (phase) => {
             if (phase !== 'completed')
-              status.textContent = t('YOUTUBE {state} · OPEN ORIGINAL', {
-                state: YOUTUBE_PHASE_LABELS[phase]
-                  ? t(YOUTUBE_PHASE_LABELS[phase])
-                  : phase.toUpperCase(),
-              });
+              word(status, 'textContent', () =>
+                t('YOUTUBE {state} · OPEN ORIGINAL', {
+                  state: YOUTUBE_PHASE_LABELS[phase]
+                    ? t(YOUTUBE_PHASE_LABELS[phase])
+                    : phase.toUpperCase(),
+                }),
+              );
           },
         });
       }
@@ -1165,6 +1212,8 @@ export function createBhoteKoshiEmbeddedMedia({
   }
 
   function destroy() {
+    offLocale();
+    worded.clear();
     hide({ immediate: true });
     for (const current of [...leavingRecords]) removeRecord(current);
     clearWarm();

src/data/bhoteKoshiEmbeddedMedia.test.mjs

@@ -348,7 +348,7 @@ test('camera updates retain a preload until the visible player loads', () => {
   assert.equal(frame.parent, root, 'keep the preload while the visible player starts');
   const card = root.children.find(node => node.tag === 'section');
   const body = card.children.find(node => node.className === 'bhote-embedded-callout-body');
-  const player = body.children.find(node => node.className === 'bhote-embedded-callout-player');
+  const player = body.children.find(node => node.className.split(' ').includes('bhote-embedded-callout-player'));
   player.children.find(node => node.tag === 'iframe').dispatchEvent(new Event('load'));
   assert.equal(frame.parent, null, 'visible player readiness releases the preload');
   media.destroy();

src/data/bhoteKoshiEvent.js

@@ -25,7 +25,9 @@ import {
 } from './bhoteKoshiEmbeddedMedia.js';
 import { acquireImageryComparison } from '../maps/imageryComparison.js';
 import { createImagerySplit } from '../ui/imagerySplit.js';
-import { formatDate, t, tn, msg } from '../i18n/index.js';
+import { formatDate, t, tn, msg, onLocaleChange } from '../i18n/index.js';
+import { useBhoteKoshiPanelStore } from '../ui/stores/bhoteKoshiPanel.js';
+import { applicationPinia } from '../ui/vueRuntime.js';
 
 export const BHOTE_KOSHI_LAYER_ID = 'bhote-koshi-2026';
 export const BHOTE_KOSHI_OVERLAY_SOURCE_ID = 'bhote-koshi-witnesses';
@@ -449,18 +451,6 @@ function imageryEndpointText(entry) {
   return [name, date].filter(Boolean).join(' · ');
 }
 
-/** Name, then the date kept on one line so the year never wraps alone. */
-function renderImageryEndpoint(element, entry) {
-  if (!element) return;
-  const { name, date } = imageryEndpointLabel(entry);
-  element.textContent = date ? `${name} · ` : name;
-  if (!date) return;
-  const dateElement = document.createElement('span');
-  dateElement.className = 'bhote-event-date';
-  dateElement.textContent = date;
-  element.appendChild(dateElement);
-}
-
 /** Compact, source-bounded disclosure for multi-source geolocation beats. */
 export function evidenceCorroborationLabel(observation) {
   const count = Math.max(
@@ -929,185 +919,70 @@ function setElementProperty(element, property, value) {
 }
 
 function setElementAttribute(element, attribute, value) {
-  if (!element || element.getAttribute?.(attribute) === value) return false;
-  element.setAttribute(attribute, value);
+  if (!element || element.attributes[attribute] === value) return false;
+  element.attributes[attribute] = value;
   return true;
 }
 
-function collectPanelReferences(panel) {
+/** One panel control's state, as the panel view renders it. */
+function panelRecord(initial = {}) {
+  return {
+    textContent: '',
+    hidden: false,
+    disabled: false,
+    value: '',
+    ...initial,
+    attributes: { ...initial.attributes },
+  };
+}
+
+/**
+ * The panel's controls as the layer writes them, starting from the panel's
+ * markup. The panel view renders what the layer publishes from them.
+ */
+function createPanelRecords(event) {
   return Object.freeze({
-    imagerySection: panel.querySelector('[data-role="imagery-comparison"]'),
-    observedStatus: panel.querySelector('.bhote-event-status.observed'),
-    beforeDate: panel.querySelector('[data-role="before-date"]'),
-    afterDate: panel.querySelector('[data-role="after-date"]'),
-    time: panel.querySelector('[data-role="time"]'),
-    caveat: panel.querySelector('[data-role="caveat"]'),
-    imageryCloudNote: panel.querySelector('[data-role="imagery-cloud-note"]'),
-    reportList: panel.querySelector('.bhote-event-report-list'),
-    playButton: panel.querySelector('[data-action="play"]'),
-    playSceneButton: panel.querySelector('[data-action="play-scene"]'),
-    cinematicButton: panel.querySelector('[data-action="cinematic"]'),
-    storyReplayButton: panel.querySelector('[data-action="story-replay"]'),
-    corridorButton: panel.querySelector('[data-action="corridor"]'),
-    previousButton: panel.querySelector('[data-action="previous-beat"]'),
-    nextButton: panel.querySelector('[data-action="next-beat"]'),
-    openSourceButton: panel.querySelector('[data-action="open-source"]'),
-    progressInput: panel.querySelector('[data-role="progress"]'),
-    splitInput: panel.querySelector('[data-role="split"]'),
-    splitReadout: panel.querySelector('[data-role="split-readout"]'),
-    timelineLabel: panel.querySelector('[data-role="timeline-label"]'),
-    beatIndex: panel.querySelector('[data-role="beat-index"]'),
-    beatTitle: panel.querySelector('[data-role="beat-title"]'),
-    beatMeta: panel.querySelector('[data-role="beat-meta"]'),
+    root: { sceneBeat: false },
+    imagerySection: panelRecord(),
+    observedStatus: panelRecord(),
+    time: panelRecord({
+      textContent: `~0:00 / ${elapsedLabel(1, event.reconstruction.elapsedSeconds)}`,
+    }),
+    caveat: panelRecord({
+      textContent: bhoteEventText(event.reconstruction.caveat),
+    }),
+    imageryCloudNote: panelRecord(),
+    playButton: panelRecord({ textContent: t('▶ PLAY') }),
+    playSceneButton: panelRecord({
+      textContent: t('▶ PLAY SCENE'),
+      hidden: true,
+    }),
+    cinematicButton: panelRecord({
+      textContent: t('◉ CINEMATIC'),
+      attributes: { 'aria-pressed': 'false' },
+    }),
+    storyReplayButton: panelRecord({ textContent: t('↺ FULL STORY') }),
+    corridorButton: panelRecord(),
+    previousButton: panelRecord({
+      attributes: { 'aria-label': t('Previous story beat') },
+    }),
+    nextButton: panelRecord({
+      attributes: { 'aria-label': t('Next story beat') },
+    }),
+    openSourceButton: panelRecord(),
+    progressInput: panelRecord({
+      value: '0',
+      attributes: { 'aria-label': t('Schematic downstream progression') },
+    }),
+    splitInput: panelRecord({ value: '50' }),
+    splitReadout: panelRecord({ textContent: '50 / 50' }),
+    timelineLabel: panelRecord({ textContent: t('RECONSTRUCTION CLOCK') }),
+    beatIndex: panelRecord({ textContent: '01 / 06' }),
+    beatTitle: panelRecord({ textContent: t('CAUSE') }),
+    beatMeta: panelRecord({ textContent: t('CAPTURE TIME UNVERIFIED') }),
   });
 }
 
-/** Escape translated text for the panel markup template. */
-function escapeMarkup(text) {
-  return String(text)
-    .replace(/&/g, '&')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;');
-}
-
-function createPanel(event, handlers) {
-  const panel = document.createElement('aside');
-  panel.id = 'bhote-koshi-event-panel';
-  panel.setAttribute(
-    'aria-label',
-    t('Bhote Koshi flood reconstruction controls'),
-  );
-  panel.innerHTML = `
-    <div class="bhote-event-header">
-      <div>
-        <div class="bhote-event-kicker">${escapeMarkup(t('EVENT RECONSTRUCTION · 26 AUG 2026'))}</div>
-        <div class="bhote-event-title">${escapeMarkup(t('BHOTE KOSHI OUTBURST FLOOD'))}</div>
-      </div>
-      <button class="bhote-event-icon-btn" type="button" data-action="close" title="${escapeMarkup(t('Close event layer'))}" aria-label="${escapeMarkup(t('Close event layer'))}">×</button>
-    </div>
-    <div class="bhote-event-status-row">
-      <span class="bhote-event-status observed">${escapeMarkup(t('OBSERVED IMAGERY'))}</span>
-      <span class="bhote-event-status reconstructed">${escapeMarkup(t('SCHEMATIC CORRIDOR'))}</span>
-    </div>
-    <section class="bhote-event-section" data-role="imagery-comparison">
-      <div class="bhote-event-section-head">
-        <span>${escapeMarkup(t('2021 HISTORICAL REFERENCE / 2026 POST-EVENT'))}</span>
-        <span data-role="split-readout">50 / 50</span>
-      </div>
-      <input class="bhote-event-range" data-role="split" type="range" min="0" max="100" value="50" aria-label="${escapeMarkup(t('Historical reference and post-event image split'))}" />
-      <div class="bhote-event-dates">
-        <span data-role="before-date"></span>
-        <span data-role="after-date"></span>
-      </div>
-    </section>
-    <section class="bhote-event-section">
-      <div class="bhote-event-section-head">
-        <span data-role="timeline-label">${escapeMarkup(t('RECONSTRUCTION CLOCK'))}</span>
-        <span data-role="time"></span>
-      </div>
-      <input class="bhote-event-range flood" data-role="progress" type="range" min="0" max="1000" value="0" aria-label="${escapeMarkup(t('Schematic downstream progression'))}" />
-      <div class="bhote-event-story-nav" aria-label="${escapeMarkup(t('Story beat navigation'))}">
-        <button type="button" data-action="previous-beat" title="${escapeMarkup(t('Previous story beat'))}" aria-label="${escapeMarkup(t('Previous story beat'))}">‹</button>
-        <div class="bhote-event-story-current">
-          <span data-role="beat-index">01 / 06</span>
-          <strong data-role="beat-title" aria-live="polite">${escapeMarkup(t('CAUSE'))}</strong>
-          <small data-role="beat-meta">${escapeMarkup(t('CAPTURE TIME UNVERIFIED'))}</small>
-        </div>
-        <button type="button" data-action="next-beat" title="${escapeMarkup(t('Next story beat'))}" aria-label="${escapeMarkup(t('Next story beat'))}">›</button>
-      </div>
-      <div class="bhote-event-actions">
-        <button type="button" data-action="play">${escapeMarkup(t('▶ PLAY'))}</button>
-        <button type="button" data-action="play-scene" hidden title="${escapeMarkup(t('Play the next shot and continue through this scene'))}">${escapeMarkup(t('▶ PLAY SCENE'))}</button>
-        <button type="button" data-action="cinematic" aria-pressed="false">${escapeMarkup(t('◉ CINEMATIC'))}</button>
-        <button type="button" data-action="story-replay">${escapeMarkup(t('↺ FULL STORY'))}</button>
-        <button type="button" data-action="open-source">${escapeMarkup(t('↗ OPEN ORIGINAL'))}</button>
-        <button type="button" data-action="corridor">${escapeMarkup(t('⌖ LOWER GORGE'))}</button>
-      </div>
-    </section>
-    <details class="bhote-event-evidence">
-      <summary>${escapeMarkup(t('FIELD REPORTS · {count}', { count: event.fieldReports.length }))}</summary>
-      <div class="bhote-event-report-list"></div>
-    </details>
-    <div class="bhote-event-credit">
-      <span>${escapeMarkup(t('GEOLOCATIONS · {credit}', { credit: 'GEO GEORGE SHADRACH' }))}</span>
-      <button type="button" data-action="geolocation-map">${escapeMarkup(t('↗ OPEN PUBLIC MAP'))}</button>
-    </div>
-    <p class="bhote-event-caveat"><span data-role="caveat"></span><span data-role="imagery-cloud-note">${escapeMarkup(t(' Clouds are preserved from the source imagery.'))}</span></p>
-  `;
-
-  const refs = collectPanelReferences(panel);
-  renderImageryEndpoint(refs.beforeDate, event.imagery.before);
-  renderImageryEndpoint(refs.afterDate, event.imagery.after);
-  refs.time.textContent = `~0:00 / ${elapsedLabel(1, event.reconstruction.elapsedSeconds)}`;
-  refs.caveat.textContent = bhoteEventText(event.reconstruction.caveat);
-
-  for (const report of event.fieldReports) {
-    const button = document.createElement('button');
-    const label = document.createElement('span');
-    const status = document.createElement('small');
-    button.type = 'button';
-    button.className = 'bhote-event-report';
-    label.textContent = bhoteEventText(report.label);
-    status.textContent = bhoteEventText(report.status);
-    button.append(label, status);
-    button.addEventListener('click', () => openExternal(report.url));
-    refs.reportList.appendChild(button);
-  }
-
-  panel
-    .querySelector('[data-action="close"]')
-    .addEventListener('click', handlers.close);
-  panel
-    .querySelector('[data-action="play"]')
-    .addEventListener('click', handlers.play);
-  panel
-    .querySelector('[data-action="play-scene"]')
-    .addEventListener('click', handlers.playScene);
-  panel
-    .querySelector('[data-action="cinematic"]')
-    .addEventListener('click', handlers.toggleCinematic);
-  panel
-    .querySelector('[data-action="previous-beat"]')
-    .addEventListener('click', handlers.previousBeat);
-  panel
-    .querySelector('[data-action="next-beat"]')
-    .addEventListener('click', handlers.nextBeat);
-  panel
-    .querySelector('[data-action="story-replay"]')
-    .addEventListener('click', handlers.replayCinematic);
-  panel
-    .querySelector('[data-action="open-source"]')
-    .addEventListener('click', handlers.openActiveSource);
-  panel
-    .querySelector('[data-action="geolocation-map"]')
-    .addEventListener('click', handlers.openGeolocationMap);
-  panel
-    .querySelector('[data-action="corridor"]')
-    .addEventListener('click', handlers.focusCorridor);
-  panel
-    .querySelector('[data-role="split"]')
-    .addEventListener('input', (inputEvent) => {
-      handlers.setSplit(Number(inputEvent.target.value) / 100);
-    });
-  panel
-    .querySelector('[data-role="progress"]')
-    .addEventListener('input', (inputEvent) => {
-      handlers.previewProgress(Number(inputEvent.target.value) / 1000);
-    });
-  panel
-    .querySelector('[data-role="progress"]')
-    .addEventListener('change', (inputEvent) => {
-      handlers.commitProgress(Number(inputEvent.target.value) / 1000, {
-        final: true,
-      });
-    });
-  const rightRail = document.getElementById?.('right-context-rail');
-  rightRail?.classList.add('bhote-event-active');
-  (rightRail || document.body).appendChild(panel);
-  return { panel, refs };
-}
-
 export function createBhoteKoshiEventLayer({
   overlayHost = DEFAULT_OVERLAY_HOST,
   renderHost = DEFAULT_RENDER_HOST,
@@ -1119,14 +994,22 @@ export function createBhoteKoshiEventLayer({
   evidenceFrameUpdater = updateEvidenceFrame,
   videoFactory = DEFAULT_VIDEO_FACTORY,
   embeddedMediaFactory = createBhoteKoshiEmbeddedMedia,
+  panelStore = useBhoteKoshiPanelStore(applicationPinia()),
 } = {}) {
   let _viewer = null;
   let _dataManager = null;
   let _mapStackController = null;
   let _event = null;
   let _enabled = false;
-  let _panel = null;
+  // The panel's controls; null while the layer is off. Their state is
+  // published to the panel store, which the context rail renders.
   let _panelRefs = null;
+  let _panelOwner = null;
+  let _panelPublished = '';
+  // The dates and field reports, which stay as they were when the panel
+  // opened, until a locale change words them again.
+  let _panelFixed = null;
+  let _offPanelLocale = null;
   let _splitControl = null;
   let _beforeLayer = null;
   let _afterLayer = null;
@@ -2723,9 +2606,9 @@ export function createBhoteKoshiEventLayer({
       id: 'bhote-koshi-split-line',
       handleClass: 'bhote-koshi-split-handle',
       cssProperty: '--bhote-koshi-split',
-      beforeTitle: imageryEndpointText(event.imagery.before),
-      afterTitle: imageryEndpointText(event.imagery.after),
-      ariaLabel: t('Historical reference and post-event image divider'),
+      beforeTitle: () => imageryEndpointText(event.imagery.before),
+      afterTitle: () => imageryEndpointText(event.imagery.after),
+      ariaLabel: () => t('Historical reference and post-event image divider'),
       formatValueText: (beforePercent, afterPercent) =>
         t(
           'A historical reference {before} percent, B post-event {after} percent',
@@ -2756,15 +2639,63 @@ export function createBhoteKoshiEventLayer({
     _lastCinematicProgress = _progress;
   }
 
+  /** Present the panel's controls as they stand; an unchanged panel is not sent again. */
+  function publishPanel() {
+    if (!_panelRefs) return;
+    const { root, ...controls } = _panelRefs;
+    const refs = Object.fromEntries(
+      Object.entries(controls).map(([key, record]) => [
+        key,
+        { ...record, attributes: { ...record.attributes } },
+      ]),
+    );
+    const signature = JSON.stringify([root.sceneBeat, refs]);
+    if (signature === _panelPublished) return;
+    _panelPublished = signature;
+    _panelFixed ??= {
+      beforeDate: imageryEndpointLabel(_event.imagery.before),
+      afterDate: imageryEndpointLabel(_event.imagery.after),
+      reports: _event.fieldReports.map((report) => ({
+        label: bhoteEventText(report.label),
+        status: bhoteEventText(report.status),
+      })),
+    };
+    panelStore.publish({
+      owner: _panelOwner,
+      sceneBeat: root.sceneBeat,
+      refs,
+      ..._panelFixed,
+    });
+  }
+
+  /**
+   * Word the panel again in the current locale: fresh records, written by
+   * the same syncs that keep them current.
+   */
+  function relocalizePanel() {
+    if (!_panelRefs || !_event) return;
+    _panelRefs = createPanelRecords(_event);
+    _panelFixed = null;
+    writeCinematicButton();
+    syncPanel();
+    syncPresentationMode();
+  }
+
   function syncCinematicButton() {
+    if (writeCinematicButton()) publishPanel();
+  }
+
+  /** Write the cinematic button's label and state; false without a panel. */
+  function writeCinematicButton() {
     const button = _panelRefs?.cinematicButton;
-    if (!button) return;
+    if (!button) return false;
     setElementProperty(
       button,
       'textContent',
       _cinematicActive ? t('■ RELEASE CAMERA') : t('◉ CINEMATIC'),
     );
     setElementAttribute(button, 'aria-pressed', String(_cinematicActive));
+    return true;
   }
 
   function claimCinematicCamera() {
@@ -3029,6 +2960,7 @@ export function createBhoteKoshiEventLayer({
       'textContent',
       `~${elapsedLabel(_sceneScrubProgress, sceneDurationSec)} / ${elapsedLabel(1, sceneDurationSec)}`,
     );
+    publishPanel();
     if (_sceneSeekFrame != null) return;
     const schedule =
       globalThis.requestAnimationFrame ||
@@ -3302,7 +3234,7 @@ export function createBhoteKoshiEventLayer({
       'disabled',
       !observation?.media?.sourceUrl,
     );
-    syncCinematicButton();
+    writeCinematicButton();
     setElementProperty(
       _panelRefs.splitInput,
       'value',
@@ -3314,6 +3246,7 @@ export function createBhoteKoshiEventLayer({
       'textContent',
       `${beforePercent} / ${100 - beforePercent}`,
     );
+    publishPanel();
   }
 
   function syncPresentationMode() {
@@ -3330,7 +3263,7 @@ export function createBhoteKoshiEventLayer({
     const evidenceAvailable =
       !sceneDirected ||
       (_sceneSurface === BHOTE_KOSHI_SCENE_EVIDENCE_BEAT && knownSceneBeat);
-    _panel?.classList?.toggle('bhote-event-scene-beat', sceneDirected);
+    if (_panelRefs) _panelRefs.root.sceneBeat = sceneDirected;
     if (_panelRefs?.playSceneButton)
       _panelRefs.playSceneButton.hidden = !sceneDirected;
     if (_panelRefs?.imagerySection)
@@ -3364,6 +3297,7 @@ export function createBhoteKoshiEventLayer({
     }
     if (_panelRefs?.openSourceButton)
       _panelRefs.openSourceButton.hidden = !evidenceAvailable;
+    publishPanel();
     overlayHost.setVisible(BHOTE_KOSHI_OVERLAY_SOURCE_ID, evidenceAvailable);
   }
 
@@ -3561,7 +3495,12 @@ export function createBhoteKoshiEventLayer({
       throwIfEnableCancelled(signal, _enabled);
       createFloodDataSource();
       createSplitControl(event);
-      const panelView = createPanel(event, {
+      _panelRefs = createPanelRecords(event);
+      _panelOwner = {};
+      _panelPublished = '';
+      _panelFixed = null;
+      const owner = _panelOwner;
+      const controls = {
         close: () =>
           _dataManager?.setEnabled(BHOTE_KOSHI_LAYER_ID, false, {
             origin: 'user',
@@ -3578,9 +3517,23 @@ export function createBhoteKoshiEventLayer({
         commitProgress,
         setSplit,
         focusCorridor,
-      });
-      _panel = panelView.panel;
-      _panelRefs = panelView.refs;
+        openReport: (index) => {
+          const url = event.fieldReports[index]?.url;
+          if (url) openExternal(url);
+        },
+      };
+      // Only the panel this enable published may act.
+      panelStore.connect(
+        Object.fromEntries(
+          Object.entries(controls).map(([name, control]) => [
+            name,
+            (...args) => (_panelOwner === owner ? control(...args) : undefined),
+          ]),
+        ),
+      );
+      publishPanel();
+      _offPanelLocale?.();
+      _offPanelLocale = onLocaleChange(relocalizePanel);
       syncPresentationMode();
       overlayHost.setVisible(
         BHOTE_KOSHI_OVERLAY_SOURCE_ID,
@@ -3673,12 +3626,16 @@ export function createBhoteKoshiEventLayer({
     _surgePoint = null;
     _lastSurgePosition = null;
     _lastSurgeVisible = null;
-    _panel?.remove();
-    document
-      .getElementById?.('right-context-rail')
-      ?.classList.remove('bhote-event-active');
-    _panel = null;
+    if (_panelOwner && panelStore.panel?.owner === _panelOwner) {
+      panelStore.connect(null);
+      panelStore.publish(null);
+    }
+    _offPanelLocale?.();
+    _offPanelLocale = null;
+    _panelOwner = null;
     _panelRefs = null;
+    _panelPublished = '';
+    _panelFixed = null;
     _splitControl?.destroy();
     _splitControl = null;
     _progress = 0;

src/data/bhoteKoshiEvent.test.mjs

@@ -3,6 +3,9 @@ import { readFile } from 'node:fs/promises';
 import test from 'node:test';
 import { claimPointer, releasePointer } from './inputOwnership.js';
 import * as Cesium from 'cesium';
+import { useBhoteKoshiPanelStore } from '../ui/stores/bhoteKoshiPanel.js';
+import { useImagerySplitStore } from '../ui/stores/imagerySplit.js';
+import { applicationPinia } from '../ui/vueRuntime.js';
 import { SOURCE_PATH_BEAT_IDS } from './bhoteKoshiShotPaths.js';
 import {
   BHOTE_KOSHI_LAYER_ID,
@@ -36,6 +39,95 @@ import { SceneDirector } from '../scenes/director.js';
 const eventUrl = new URL('../../public/events/bhote-koshi-2026/event.json', import.meta.url);
 const eventModuleUrl = new URL('./bhoteKoshiEvent.js', import.meta.url);
 
+/** The event's divider as the imagery split store holds it, or undefined. */
+const eventSplit = () =>
+  useImagerySplitStore(applicationPinia()).splits.findLast(
+    (split) => split.view.id === 'bhote-koshi-split-line',
+  );
+
+// The panel controls the layer presents, by the selector the panel view gives each.
+const PANEL_REFS = {
+  '[data-role="imagery-comparison"]': 'imagerySection',
+  '[data-role="time"]': 'time',
+  '[data-role="caveat"]': 'caveat',
+  '[data-role="imagery-cloud-note"]': 'imageryCloudNote',
+  '[data-role="progress"]': 'progressInput',
+  '[data-role="split"]': 'splitInput',
+  '[data-role="timeline-label"]': 'timelineLabel',
+  '[data-role="beat-index"]': 'beatIndex',
+  '[data-role="beat-title"]': 'beatTitle',
+  '[data-role="beat-meta"]': 'beatMeta',
+  '[data-action="play"]': 'playButton',
+  '[data-action="play-scene"]': 'playSceneButton',
+  '[data-action="cinematic"]': 'cinematicButton',
+  '[data-action="story-replay"]': 'storyReplayButton',
+  '[data-action="corridor"]': 'corridorButton',
+  '[data-action="previous-beat"]': 'previousButton',
+  '[data-action="next-beat"]': 'nextButton',
+  '[data-action="open-source"]': 'openSourceButton',
+};
+// What each control calls, as the panel view wires it.
+const PANEL_EVENTS = {
+  playButton: { click: 'play' },
+  playSceneButton: { click: 'playScene' },
+  cinematicButton: { click: 'toggleCinematic' },
+  storyReplayButton: { click: 'replayCinematic' },
+  corridorButton: { click: 'focusCorridor' },
+  previousButton: { click: 'previousBeat' },
+  nextButton: { click: 'nextBeat' },
+  openSourceButton: { click: 'openActiveSource' },
+  progressInput: {
+    input: (controls, value) => controls.previewProgress(Number(value) / 1000),
+    change: (controls, value) => controls.commitProgress(Number(value) / 1000, { final: true }),
+  },
+  splitInput: { input: (controls, value) => controls.setSplit(Number(value) / 100) },
+};
+
+/**
+ * The event panel as the layer presents it to the panel store, or undefined
+ * while it is off. Controls read the latest presentation, and dispatching an
+ * event calls the connected controls as the panel view does.
+ */
+function eventPanel() {
+  const store = useBhoteKoshiPanelStore(applicationPinia());
+  if (!store.panel) return undefined;
+  const control = (key) => {
+    let typed = null;
+    const record = () => store.panel.refs[key];
+    return {
+      get textContent() { return record().textContent; },
+      get hidden() { return record().hidden; },
+      get disabled() { return record().disabled; },
+      get value() { return typed ?? record().value; },
+      set value(value) { typed = value; },
+      getAttribute: (name) => record().attributes[name] ?? null,
+      dispatch(type) {
+        const value = typed ?? record().value;
+        typed = null;
+        const handler = PANEL_EVENTS[key]?.[type];
+        return typeof handler === 'function'
+          ? handler(store.controls, value)
+          : store.controls[handler]?.();
+      },
+    };
+  };
+  const named = (name) => ({ dispatch: () => store.controls[name]() });
+  return {
+    querySelector(selector) {
+      if (selector === '.bhote-event-report-list') {
+        return {
+          children: store.panel.reports.map((_, index) => ({
+            dispatch: () => store.controls.openReport(index),
+          })),
+        };
+      }
+      if (selector === '[data-action="geolocation-map"]') return named('openGeolocationMap');
+      if (selector === '[data-action="close"]') return named('close');
+      return control(PANEL_REFS[selector]);
+    },
+  };
+}
+
 class FakeElement {
   constructor(tagName = 'div') {
     this.tagName = tagName;
@@ -840,6 +932,7 @@ test('Bhote Koshi disable preserves an operator-selected map and tears down ever
   const originalDocument = globalThis.document;
   const originalWindow = globalThis.window;
   const { body, removedProperties } = installEventDom();
+  assert.equal(eventSplit(), undefined, 'no divider is left from an earlier test');
   const clearedTimeouts = [];
   globalThis.window = {
     setTimeout: () => 71,
@@ -879,7 +972,8 @@ test('Bhote Koshi disable preserves an operator-selected map and tears down ever
     assert.equal(await layer.enable(viewer, { origin: 'scene' }), true);
     assert.equal(viewer._test.imagery.length, 2);
     assert.equal(viewer._test.dataSources.length, 1);
-    assert.equal(body.children.length, 2);
+    assert.ok(eventPanel());
+    assert.ok(eventSplit());
 
     activeMap = 'operator-choice';
     generation += 1;
@@ -888,7 +982,8 @@ test('Bhote Koshi disable preserves an operator-selected map and tears down ever
     assert.deepEqual(mapCalls, ['esri-imagery']);
     assert.equal(viewer._test.removedImagery.length, 2);
     assert.equal(viewer._test.removedDataSources.length, 1);
-    assert.ok(body.children.every((element) => element.removed));
+    assert.equal(eventPanel(), undefined);
+    assert.equal(eventSplit(), undefined);
     assert.equal(viewer.scene.splitPosition, 0.37);
     assert.deepEqual(clearedTimeouts, [71]);
     assert.ok(overlayCalls.some(([kind]) => kind === 'clear'));
@@ -934,7 +1029,7 @@ test('Bhote Koshi disable stops active playback and releases its global render h
 
   try {
     await layer.enable(viewer, { origin: 'scene' });
-    const panel = body.children.find((element) => element.tagName === 'aside');
+    const panel = eventPanel();
     assert.equal(panel.querySelector('[data-action="play-scene"]').hidden, true);
     assert.equal(await panel.querySelector('[data-action="play-scene"]').dispatch('click'), false);
     panel.querySelector('[data-action="play"]').dispatch('click');
@@ -1075,6 +1170,7 @@ test('Bhote Koshi scene beats preserve photoreal and never take camera ownership
   const originalRequestAnimationFrame = globalThis.requestAnimationFrame;
   const originalCancelAnimationFrame = globalThis.cancelAnimationFrame;
   const { body } = installEventDom();
+  assert.equal(eventSplit(), undefined, 'no divider is left from an earlier test');
   const timers = [];
   const openedUrls = [];
   const cancelledFrames = [];
@@ -1181,11 +1277,10 @@ test('Bhote Koshi scene beats preserve photoreal and never take camera ownership
     assert.deepEqual(timers, []);
     assert.equal(viewer._test.imagery.length, 2, 'the event surface keeps its cached imagery pair');
     assert.ok(viewer._test.imagery.every((imageryLayer) => imageryLayer.show === false));
-    const panel = body.children.find((element) => element.tagName === 'aside');
+    const panel = eventPanel();
     assert.ok(panel);
-    const splitLine = body.children.find((element) => element.id === 'bhote-koshi-split-line');
-    assert.ok(splitLine);
-    assert.equal(splitLine.hidden, true);
+    assert.ok(eventSplit());
+    assert.equal(eventSplit().view.hidden, true);
     assert.equal(panel.querySelector('[data-role="imagery-comparison"]').hidden, true);
     assert.match(panel.querySelector('[data-role="caveat"]').textContent, /SCHEMATIC CORRIDOR/i);
     assert.doesNotMatch(panel.querySelector('[data-role="caveat"]').textContent, /historical/i);
@@ -1220,8 +1315,6 @@ test('Bhote Koshi scene beats preserve photoreal and never take camera ownership
     assert.equal(panel.querySelector('[data-action="cinematic"]').disabled, true);
     assert.equal(panel.querySelector('[data-action="corridor"]').hidden, false);
     assert.equal(panel.querySelector('[data-action="corridor"]').disabled, false);
-    assert.doesNotMatch(panel.innerHTML, /data-action="witness"|◎ WITNESS/);
-    assert.match(panel.innerHTML, /data-action="open-source"/);
     const fullStory = panel.querySelector('[data-action="story-replay"]');
     assert.equal(fullStory.textContent, '↺ FULL STORY');
     assert.equal(fullStory.hidden, true, 'PLAY SCENE owns authored scene playback');
@@ -1240,30 +1333,27 @@ test('Bhote Koshi scene beats preserve photoreal and never take camera ownership
       beatId: 'timure-cluster',
       sceneControls: { imageryComparison: true },
     }, { origin: 'scene' });
-    assert.equal(splitLine.hidden, false);
+    assert.equal(eventSplit().view.hidden, false);
     assert.equal(panel.querySelector('[data-role="imagery-comparison"]').hidden, false);
     assert.ok(viewer._test.imagery.every((imageryLayer) => imageryLayer.show === true));
-    const splitHandle = splitLine.children.find(
-      (element) => element.className === 'bhote-koshi-split-handle',
-    );
-    assert.ok(splitHandle);
-    assert.equal(splitHandle.textContent, '↔');
-    assert.equal(splitHandle.getAttribute('aria-valuenow'), '62');
-    splitHandle.dispatch('pointerdown', {
+    assert.equal(eventSplit().view.handleClass, 'bhote-koshi-split-handle');
+    assert.equal(eventSplit().view.valueNow, 62);
+    const splitHandle = eventSplit().controls;
+    splitHandle.pointerdown({
       button: 0,
       clientX: 250,
       pointerId: 4,
       preventDefault() {},
     });
-    splitHandle.dispatch('pointermove', {
+    splitHandle.pointermove({
       clientX: 750,
       pointerId: 4,
       preventDefault() {},
     });
-    splitHandle.dispatch('pointerup', { pointerId: 4 });
+    splitHandle.pointerup({ pointerId: 4 });
     assert.equal(viewer.scene.splitPosition, 0.75);
-    assert.equal(splitHandle.getAttribute('aria-valuenow'), '75');
-    splitHandle.dispatch('keydown', {
+    assert.equal(eventSplit().view.valueNow, 75);
+    splitHandle.keydown({
       key: 'ArrowLeft',
       shiftKey: true,
       preventDefault() {},
@@ -1276,7 +1366,7 @@ test('Bhote Koshi scene beats preserve photoreal and never take camera ownership
       split: 0.62,
       sceneControls: {},
     }, { origin: 'scene' });
-    assert.equal(splitLine.hidden, true);
+    assert.equal(eventSplit().view.hidden, true);
     assert.ok(viewer._test.imagery.every((imageryLayer) => imageryLayer.show === false));
     assert.equal(viewer.scene.splitPosition, 0.62);
     assert.equal(overlayVisibility.at(-1).visible, false);
@@ -1347,7 +1437,7 @@ test('Bhote Koshi scene beats preserve photoreal and never take camera ownership
     assert.equal(layer.getCinematicState().active, false);
     assert.equal(viewer._test.cameraLooks.length, 0);
     assert.deepEqual(mapCalls, []);
-    assert.equal(body.children.filter((element) => element.tagName === 'aside').length, 1);
+    assert.ok(eventPanel());
     assert.equal(viewer.scene.splitPosition, 0.62);
     for (const beatId of [
       'debris-dammed-lake',
@@ -1594,7 +1684,7 @@ test('Bhote Koshi publishes the evidence spine once and scrubs through cards and
     assert.equal(breadcrumbs.filter((entry) => entry.position()).length, 0);
     assert.ok(cards.every((entry) => entry.requireImage && entry.image.stamp === 1));
 
-    const panel = body.children.find((element) => element.tagName === 'aside');
+    const panel = eventPanel();
     const progress = panel.querySelector('[data-role="progress"]');
     progress.value = '285';
     progress.dispatch('input');
@@ -1685,7 +1775,7 @@ test('Bhote Koshi keeps one local fallback video active and unloads it on beat c
     videos[0].dispatch('loadeddata');
     assert.equal(layer.getCinematicState().mediaReady, true);
 
-    const panel = body.children.find((element) => element.tagName === 'aside');
+    const panel = eventPanel();
     const progress = panel.querySelector('[data-role="progress"]');
     progress.value = '285';
     progress.dispatch('input');
@@ -1808,7 +1898,7 @@ test('Upper Valley Collapse autoplays its muted local fallback without starting
     assert.ok(video.pauseCalls >= 1);
     assert.ok(video.cancelledFrameHandles.length >= 1);
     assert.equal(layer.getCinematicState().mediaEvidenceId, null);
-    assert.equal(body.children.find((element) => element.tagName === 'aside')?.removed, false);
+    assert.ok(eventPanel());
     await layer.disable();
   } finally {
     globalThis.document = originalDocument;
@@ -2121,10 +2211,8 @@ test('Bhote Koshi beat controls keep cards, flood, camera, and panel on the one
 
   try {
     await layer.enable(viewer, { origin: 'local-restore' });
-    const panel = body.children.find((element) => element.tagName === 'aside');
-    assert.match(panel.innerHTML, /2021 HISTORICAL REFERENCE \/ 2026 POST-EVENT/);
-    assert.match(panel.innerHTML, /RECONSTRUCTION CLOCK/);
-    assert.match(panel.innerHTML, /OPEN PUBLIC MAP/);
+    const panel = eventPanel();
+    assert.equal(panel.querySelector('[data-role="timeline-label"]').textContent, 'RECONSTRUCTION CLOCK');
     const entries = publications[0].entries;
     const cards = entries.filter((entry) => entry.variant === 'thumbnail');
     const breadcrumbs = entries.filter((entry) => entry.variant === 'label');
@@ -2203,7 +2291,7 @@ test('Bhote Koshi beat controls keep cards, flood, camera, and panel on the one
   }
 });
 
-test('Bhote Koshi repeated event frames perform no panel lookup, DOM write, or camera churn', async () => {
+test('Bhote Koshi repeated event frames republish no panel and churn no camera', async () => {
   const event = JSON.parse(await readFile(eventUrl, 'utf8'));
   const originalDocument = globalThis.document;
   const originalWindow = globalThis.window;
@@ -2238,26 +2326,19 @@ test('Bhote Koshi repeated event frames perform no panel lookup, DOM write, or c
 
   try {
     await layer.enable(viewer, { origin: 'local-restore' });
-    const panel = body.children.find((element) => element.tagName === 'aside');
+    const panel = eventPanel();
     const cinematic = panel.querySelector('[data-action="cinematic"]');
     const progress = panel.querySelector('[data-role="progress"]');
     cinematic.dispatch('click');
     progress.value = '500';
     progress.dispatch('input');
 
-    const queryCount = panel._queryCount;
-    const writeCount = [...panel._selectors.values()].reduce((sum, element) => (
-      sum + element._writeCount
-    ), 0);
+    const panelStore = useBhoteKoshiPanelStore(applicationPinia());
+    const published = panelStore.panel;
     const cameraLookCount = viewer._test.cameraLooks.length;
     for (let index = 0; index < 20; index += 1) progress.dispatch('input');
 
-    assert.equal(panel._queryCount, queryCount, 'hot path uses cached panel references');
-    assert.equal(
-      [...panel._selectors.values()].reduce((sum, element) => sum + element._writeCount, 0),
-      writeCount,
-      'unchanged frames do not rewrite panel state',
-    );
+    assert.ok(panelStore.panel === published, 'unchanged frames do not republish the panel');
     assert.equal(
       viewer._test.cameraLooks.length,
       cameraLookCount,
@@ -2328,7 +2409,7 @@ test('Bhote Koshi cinematic camera stays synchronized through pause and determin
 
   try {
     await layer.enable(viewer, { origin: 'local-restore' });
-    const panel = body.children.find((element) => element.tagName === 'aside');
+    const panel = eventPanel();
     panel.querySelector('[data-action="cinematic"]').dispatch('click');
     assert.equal(layer.getCinematicState().active, true);
     assert.equal(layer.getPlaybackState().playing, true);
@@ -2413,7 +2494,7 @@ test('Bhote Koshi replay restores cinematic ownership unless the operator releas
 
   try {
     await layer.enable(viewer, { origin: 'local-restore' });
-    const panel = body.children.find((element) => element.tagName === 'aside');
+    const panel = eventPanel();
     panel.querySelector('[data-action="cinematic"]').dispatch('click');
     animationCallbacks[0](91001);
     assert.equal(layer.getPlaybackState().progress, 1);

src/data/bhoteKoshiPanelView.test.mjs

@@ -0,0 +1,212 @@
+// src/data/bhoteKoshiPanelView.test.mjs — the context rail renders the Bhote
+// Koshi reconstruction panel the event layer presents and sends its clicks
+// and slider moves back.
+import '../testSupport/registerDom.mjs';
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { createApp, nextTick } from 'vue';
+import { createPinia } from 'pinia';
+import { useBhoteKoshiPanelStore } from '../ui/stores/bhoteKoshiPanel.js';
+import ContextView from '../ui/views/ContextView.vue';
+
+const record = (initial = {}) => ({
+  textContent: '',
+  hidden: false,
+  disabled: false,
+  value: '',
+  attributes: {},
+  ...initial,
+});
+
+function presentation(patch = {}) {
+  return {
+    owner: {},
+    sceneBeat: false,
+    beforeDate: { name: 'Historical reference', date: '2021-05-01' },
+    afterDate: { name: 'Post-event', date: '' },
+    reports: [
+      { label: 'Report A', status: 'Verified' },
+      { label: 'Report B', status: 'Unverified' },
+    ],
+    refs: {
+      imagerySection: record(),
+      observedStatus: record(),
+      time: record({ textContent: '~0:00 / 2:00' }),
+      caveat: record({ textContent: 'Schematic only.' }),
+      imageryCloudNote: record(),
+      playButton: record({ textContent: '▶ PLAY' }),
+      playSceneButton: record({ textContent: '▶ PLAY SCENE', hidden: true }),
+      cinematicButton: record({
+        textContent: '◉ CINEMATIC',
+        attributes: { 'aria-pressed': 'false' },
+      }),
+      storyReplayButton: record({ textContent: '↺ FULL STORY' }),
+      corridorButton: record(),
+      previousButton: record({
+        disabled: true,
+        attributes: { 'aria-label': 'Previous story beat' },
+      }),
+      nextButton: record({ attributes: { 'aria-label': 'Next story beat' } }),
+      openSourceButton: record(),
+      progressInput: record({
+        value: '0',
+        attributes: { 'aria-label': 'Schematic downstream progression' },
+      }),
+      splitInput: record({ value: '50' }),
+      splitReadout: record({ textContent: '50 / 50' }),
+      timelineLabel: record({ textContent: 'RECONSTRUCTION CLOCK' }),
+      beatIndex: record({ textContent: '01 / 06' }),
+      beatTitle: record({ textContent: 'CAUSE' }),
+      beatMeta: record({ textContent: 'CAPTURE TIME UNVERIFIED' }),
+    },
+    ...patch,
+  };
+}
+
+function fixture(t) {
+  document.body.replaceChildren();
+  const pinia = createPinia();
+  const app = createApp(ContextView).use(pinia);
+  app.mount(document.body.appendChild(document.createElement('div')));
+  t.after(() => app.unmount());
+  const store = useBhoteKoshiPanelStore(pinia);
+  const calls = [];
+  store.connect(
+    new Proxy(
+      {},
+      {
+        get:
+          (_, name) =>
+          (...args) =>
+            calls.push([name, ...args]),
+      },
+    ),
+  );
+  const rail = document.getElementById('right-context-rail');
+  const $ = (selector) => rail.querySelector(selector);
+  return { store, calls, rail, $ };
+}
+
+test('the panel renders last in the context rail and marks the rail while on', async (t) => {
+  const { store, rail, $ } = fixture(t);
+  assert.equal($('#bhote-koshi-event-panel'), null);
+  assert.equal(rail.classList.contains('bhote-event-active'), false);
+  store.publish(presentation());
+  await nextTick();
+  const panel = $('#bhote-koshi-event-panel');
+  assert.equal(panel.tagName, 'ASIDE');
+  assert.ok(rail.lastElementChild === panel);
+  assert.ok(rail.classList.contains('ui-scroll'));
+  assert.ok(rail.classList.contains('bhote-event-active'));
+  assert.equal(
+    panel.getAttribute('aria-label'),
+    'Bhote Koshi flood reconstruction controls',
+  );
+  assert.match(
+    panel.textContent,
+    /2021 HISTORICAL REFERENCE \/ 2026 POST-EVENT/,
+  );
+  assert.match(panel.textContent, /RECONSTRUCTION CLOCK/);
+  assert.match(panel.textContent, /OPEN PUBLIC MAP/);
+  assert.equal(
+    $('[data-role="before-date"]').textContent,
+    'Historical reference · 2021-05-01',
+  );
+  assert.equal(
+    $('[data-role="before-date"] .bhote-event-date').textContent,
+    '2021-05-01',
+  );
+  assert.equal($('[data-role="after-date"]').textContent, 'Post-event');
+  assert.equal($('[data-role="after-date"] .bhote-event-date'), null);
+  assert.equal($('[data-action="play-scene"]').hidden, true);
+  assert.ok($('[data-action="open-source"]'));
+  assert.equal($('[data-action="witness"]'), null);
+  assert.doesNotMatch(panel.innerHTML, /witness/i);
+  assert.equal($('[data-action="previous-beat"]').disabled, true);
+  assert.equal($('[data-action="previous-beat"]').title, 'Previous story beat');
+  assert.equal(
+    $('[data-action="cinematic"]').getAttribute('aria-pressed'),
+    'false',
+  );
+  assert.equal($('[data-action="play"]').hasAttribute('aria-label'), false);
+  assert.equal($('[data-role="progress"]').value, '0');
+  assert.equal($('[data-role="split"]').value, '50');
+  assert.equal($('summary').textContent, 'FIELD REPORTS · 2');
+  assert.deepEqual(
+    [...$('.bhote-event-report-list').children].map(
+      (button) => button.textContent,
+    ),
+    ['Report AVerified', 'Report BUnverified'],
+  );
+  store.publish(null);
+  await nextTick();
+  assert.equal($('#bhote-koshi-event-panel'), null);
+  assert.equal(rail.classList.contains('bhote-event-active'), false);
+  assert.ok(rail.classList.contains('ui-scroll'));
+});
+
+test('a later presentation updates the controls in place', async (t) => {
+  const { store, $ } = fixture(t);
+  store.publish(presentation());
+  await nextTick();
+  const play = $('[data-action="play"]');
+  const next = presentation({ sceneBeat: true });
+  next.refs.playButton = record({
+    textContent: '▶ PLAY SHOT',
+    disabled: true,
+    attributes: { 'aria-label': 'Play Global context' },
+  });
+  next.refs.progressInput = record({ value: '250', hidden: true });
+  next.refs.imagerySection = record({ hidden: true });
+  store.publish(next);
+  await nextTick();
+  assert.ok($('[data-action="play"]') === play);
+  assert.equal(play.textContent, '▶ PLAY SHOT');
+  assert.equal(play.disabled, true);
+  assert.equal(play.getAttribute('aria-label'), 'Play Global context');
+  assert.ok(
+    $('#bhote-koshi-event-panel').classList.contains('bhote-event-scene-beat'),
+  );
+  assert.equal($('[data-role="progress"]').value, '250');
+  assert.equal($('[data-role="progress"]').hidden, true);
+  assert.equal($('[data-role="imagery-comparison"]').hidden, true);
+});
+
+test('buttons, sliders and reports call the connected controls', async (t) => {
+  const { store, calls, $ } = fixture(t);
+  store.publish(presentation());
+  await nextTick();
+  for (const action of [
+    'close',
+    'play',
+    'cinematic',
+    'story-replay',
+    'open-source',
+    'corridor',
+    'next-beat',
+    'geolocation-map',
+  ])
+    $(`[data-action="${action}"]`).click();
+  $('.bhote-event-report-list').children[1].click();
+  const progress = $('[data-role="progress"]');
+  progress.value = '500';
+  progress.dispatchEvent(new Event('input'));
+  progress.dispatchEvent(new Event('change'));
+  const split = $('[data-role="split"]');
+  split.value = '25';
+  split.dispatchEvent(new Event('input'));
+  assert.deepEqual(calls, [
+    ['close'],
+    ['play'],
+    ['toggleCinematic'],
+    ['replayCinematic'],
+    ['openActiveSource'],
+    ['focusCorridor'],
+    ['nextBeat'],
+    ['openGeolocationMap'],
+    ['openReport', 1],
+    ['previewProgress', 0.5],
+    ['commitProgress', 0.5, { final: true }],
+    ['setSplit', 0.25],
+  ]);
+});

src/data/cctv.test.mjs

@@ -25,9 +25,6 @@ function componentFunctionSource(fn) {
     .replace(/\(\s+/g, '(');
 }
 import assert from 'node:assert/strict';
-import fs from 'node:fs';
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
 import * as Cesium from 'cesium';
 import cctvLayer, {
   CCTV_PROJECTION_OVERLAY_SOURCE_OPTIONS,
@@ -83,16 +80,6 @@ import {
   LIVE_CAMERA_COLOR,
 } from '../layers/cctv/policy.js';
 
-const CCTV_PRESENTATION_SOURCE = fs.readFileSync(
-  path.join(
-    path.dirname(fileURLToPath(import.meta.url)),
-    '..',
-    'ui',
-    'cctvPresentation.js',
-  ),
-  'utf8',
-);
-
 const ASPECT = 16 / 9;
 const toRad = (deg) => (deg * Math.PI) / 180;
 const GESTURE_TYPES = {
@@ -1302,20 +1289,6 @@ test('CCTV null-active coverage, auto-hop, cycling, and panel targets stay hones
     assert.equal(cctvCycleIndex(-1, -1, records.length), records.length - 1);
     assert.equal(cctvCycleIndex(2, 1, records.length), 0);
     assert.equal(cctvCycleIndex(0, -1, records.length), records.length - 1);
-
-    const renderer = CCTV_PRESENTATION_SOURCE.match(
-      /_renderCctvState\(state\) \{[\s\S]*?\n\}\n/,
-    );
-    assert.ok(renderer, '_renderCctvState is missing');
-    assert.match(
-      renderer[0],
-      // Nothing active clears the pick; only the outside-view note may show.
-      /else if \(!activeId\)[\s\S]*?selectedIndex =[^;]*\? 0 : -1;/,
-    );
-    assert.match(
-      renderer[0],
-      /_cctvFocusBtn\.disabled\s*=\s*!enabled\s*\|\|\s*catalogCount === 0\s*\|\|\s*!activeId/,
-    );
   } finally {
     cctvLayer.setParams({ autoHop: false });
     _setCctvOverlayHostForTest();

src/data/detectionPolicy.test.mjs

@@ -1,4 +1,4 @@
-import { expandApplicationHtml } from '../../build/application-html.js';
+import { renderApplicationHtml } from '../testSupport/applicationHtml.mjs';
 import test from 'node:test';
 import assert from 'node:assert/strict';
 import fs from 'node:fs';
@@ -19,7 +19,7 @@ import {
 } from './detectionPolicy.js';
 import { KEYHOLE_OUTSIDE_OPACITY_DEFAULT } from '../celestialRing.js';
 
-const indexHtml = expandApplicationHtml(fs.readFileSync(new URL('../../index.html', import.meta.url), 'utf8'));
+const indexHtml = await renderApplicationHtml(fs.readFileSync(new URL('../../index.html', import.meta.url), 'utf8'));
 
 test('side aircraft brackets stay readable without changing zero-opacity intent', () => {
   assert.equal(detectionBracketAlpha('AIR', 0), 0);

src/data/layerState.test.mjs

@@ -1,6 +1,6 @@
 import { encodeParams, decodeParams } from '../layers/streetLevel/params.js';
 import { readShellSource } from '../testSupport/readShellSource.mjs';
-import { expandApplicationHtml } from '../../build/application-html.js';
+import { renderApplicationHtml } from '../testSupport/applicationHtml.mjs';
 import { readLayerSource } from '../testSupport/readLayerSource.mjs';
 import test from 'node:test';
 import assert from 'node:assert/strict';
@@ -734,18 +734,27 @@ test('a fresh boot starts 3D aircraft ON in proximity — codec, both layers, an
     /this\.(?:flightState\.)?_models3dMode = 'proximity';/,
     'ui.js: and believes the mode is proximity',
   );
-  const html = expandApplicationHtml(
+  const html = await renderApplicationHtml(
     await readFile(new URL('../../index.html', import.meta.url), 'utf8'),
   );
   assert.match(
     html,
-    /class="pp-toggle-btn active" id="models3d-toggle" aria-pressed="true"/,
+    /<button(?=[^>]*\sid="models3d-toggle")(?=[^>]*\sclass="(?=[^"]*\bpp-toggle-btn\b)(?=[^"]*\bactive\b))(?=[^>]*\saria-pressed="true")/,
     'index.html: the 3D button paints lit on first paint, before ui.js runs — and says so',
   );
   assert.match(
     ui,
-    /this\._models3dBtn\?\.setAttribute\(\s*'aria-pressed',\s*String\(this\.(?:flightState\.)?_models3dEnabled\),?\s*\)/,
-    'ui.js: and keeps aria-pressed synchronized, so the lit state is not colour-only',
+    /this\._models3dPressedShown = this\._models3dEnabled;/,
+    'ui.js: and keeps the pressed state synchronized, so the lit state is not colour-only',
+  );
+  const panel = await readFile(
+    new URL('../ui/views/panels/DisplayPanel.vue', import.meta.url),
+    'utf8',
+  );
+  assert.match(
+    panel,
+    /:pressed="models3dOn" pressed-class="active" id="models3d-toggle"/,
+    'DisplayPanel.vue: the view renders aria-pressed with the lit state',
   );
   assert.match(
     html,

src/data/manager.js

@@ -28,9 +28,6 @@ export class DataLayerManager extends LayerLifecycle {
   _buildMetaText(layer) {
     return this._presentation.panel._buildMetaText(layer);
   }
-  _syncToggleButton(button, layer) {
-    return this._presentation.panel._syncToggleButton(button, layer);
-  }
   get _layerPanel() {
     return this._presentation._panel;
   }

src/data/manager.test.mjs

@@ -12,6 +12,7 @@
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
 import { DataLayerManager, layerFeedState } from './manager.js';
+import { presentLayerToggle } from '../ui/layerPanel.js';
 import {
   contextSnapshotLayerIds,
   shouldCaptureContextSession,
@@ -90,68 +91,6 @@ test('adopts settled visibility without re-running lifecycle work', async () =>
   assert.equal(manager.adoptLayerVisibility('flights', false, { origin: 'user' }), false);
 });
 
-test('renders ordinary layer rows without recreating a panel-hidden coordinator', async () => {
-  const originalDocument = globalThis.document;
-  const makeElement = () => {
-    const element = {
-      children: [],
-      className: '',
-      dataset: {},
-      textContent: '',
-      disabled: false,
-      attributes: {},
-      classList: {
-        toggle() {},
-      },
-      appendChild(child) { this.children.push(child); return child; },
-      addEventListener() {},
-      removeEventListener() {},
-      setAttribute(name, value) { this.attributes[name] = String(value); },
-      querySelector(selector) {
-        if (selector.startsWith('[data-layer-id="')) {
-          const id = selector.slice(16, -2);
-          return this.children.find((child) => child.dataset.layerId === id) || null;
-        }
-        const className = selector.startsWith('.') ? selector.slice(1) : '';
-        const visit = (node) => {
-          if (String(node.className).split(/\s+/).includes(className)) return node;
-          for (const child of node.children || []) {
-            const found = visit(child);
-            if (found) return found;
-          }
-          return null;
-        };
-        return visit(this);
-      },
-      set innerHTML(value) { if (value === '') this.children = []; },
-      get innerHTML() { return ''; },
-    };
-    return element;
-  };
-  globalThis.document = { createElement: makeElement };
-  const mgr = new DataLayerManager({});
-  const ordinary = makeSlowLayer('flights', { updateInterval: -1 });
-  const coordinator = makeSlowLayer('military-awareness', { updateInterval: -1 });
-  coordinator.module.showInTogglePanel = false;
-  mgr.register(ordinary.module);
-  mgr.register(coordinator.module);
-  const container = makeElement();
-
-  try {
-    mgr.buildTogglePanel(container);
-    assert.ok(container.querySelector('[data-layer-id="flights"]'));
-    assert.equal(container.querySelector('[data-layer-id="military-awareness"]'), null);
-    assert.equal(await mgr.setEnabled('military-awareness', true), true);
-    mgr._refreshTogglePanel();
-    assert.equal(container.querySelector('[data-layer-id="military-awareness"]'), null);
-    assert.equal(mgr.getAll().find(({ id }) => id === 'military-awareness').enabled, true);
-  } finally {
-    await mgr.destroyAll();
-    if (originalDocument === undefined) delete globalThis.document;
-    else globalThis.document = originalDocument;
-  }
-});
-
 test('clearSelectedLayers includes hidden coordinators and preserves newer dependency restoration', async () => {
   const mgr = new DataLayerManager({});
   const order = [];
@@ -1861,17 +1800,6 @@ test('layer metadata names degraded state instead of presenting an ordinary age'
 
 test('uncertain lifecycle state overrides ordinary feed status without disabling reconciliation', () => {
   const mgr = new DataLayerManager({});
-  const classes = new Map();
-  const attributes = new Map();
-  const button = {
-    classList: {
-      toggle(name, active) { classes.set(name, Boolean(active)); },
-    },
-    dataset: {},
-    disabled: false,
-    textContent: '',
-    setAttribute(name, value) { attributes.set(name, String(value)); },
-  };
   const layer = {
     name: 'Radio',
     source: 'Radio Browser',
@@ -1881,14 +1809,14 @@ test('uncertain lifecycle state overrides ordinary feed status without disabling
     stats: { count: 750, lastUpdate: Date.now() },
   };
 
-  mgr._syncToggleButton(button, layer);
+  const toggle = presentLayerToggle(layer);
 
-  assert.equal(button.textContent, 'UNCERTAIN');
-  assert.equal(button.dataset.feedState, 'uncertain');
-  assert.equal(button.disabled, false, 'the lifecycle toggle remains available to reconcile authority');
-  assert.equal(attributes.get('aria-label'), 'Radio: UNCERTAIN');
-  assert.equal(classes.get('lifecycle-uncertain'), true);
-  assert.equal(classes.get('feed-nominal'), false);
+  assert.equal(toggle.text, 'UNCERTAIN');
+  assert.equal(toggle.feedState, 'uncertain');
+  assert.equal(toggle.ariaDisabled, false, 'the lifecycle toggle remains available to reconcile authority');
+  assert.equal(toggle.ariaLabel, 'Radio: UNCERTAIN');
+  assert.equal(toggle.classes['lifecycle-uncertain'], true);
+  assert.equal(toggle.classes['feed-nominal'], false);
   assert.equal(
     mgr._buildMetaText(layer),
     'UNCERTAIN · Radio Browser · lifecycle state requires reconciliation',
@@ -2729,549 +2657,6 @@ test('destroy settles an explicit refresh waiting behind invalidated periodic wo
   assert.equal(await destroy, true);
 });
 
-// ── Per-layer row controls (chips + color legend) ───────────────────────────
-// The satellites layer is the first consumer: a DENSE catalog chip and a class
-// legend rendered under its row. The manager owns the DOM and the param write;
-// the layer only declares what it wants, so the chip can never disagree with
-// the layer's real state.
-
-/** DOM double rich enough for the row-controls render path. */
-function makeControlElement() {
-  const element = {
-    children: [],
-    className: '',
-    dataset: {},
-    style: {},
-    attributes: {},
-    listeners: {},
-    textContent: '',
-    hidden: false,
-    disabled: false,
-    title: '',
-    type: '',
-    classList: { toggle() {} },
-    appendChild(child) { child.parent = this; this.children.push(child); return child; },
-    append(...nodes) { for (const n of nodes) n.parent = this; this.children.push(...nodes); },
-    insertBefore(child, anchor) {
-      child.parent = this;
-      const index = anchor ? this.children.indexOf(anchor) : this.children.length;
-      this.children.splice(index, 0, child);
-      return child;
-    },
-    replaceChildren(...nodes) { this.children = [...nodes]; },
-    remove() {
-      const siblings = this.parent?.children;
-      if (siblings) this.parent.children = siblings.filter((n) => n !== this);
-      // Browsers blur a node the moment it leaves the document. Modelling that
-      // is the whole point: it is exactly what in-place chip reconciliation
-      // exists to avoid, so a regression to rebuild-everything must fail here.
-      if (globalThis.document?.activeElement === this) globalThis.document.activeElement = null;
-    },
-    focus() { if (globalThis.document) globalThis.document.activeElement = this; },
-    addEventListener(name, handler) { this.listeners[name] = handler; },
-    removeEventListener(name, handler) { if (this.listeners[name] === handler) delete this.listeners[name]; },
-    setAttribute(name, value) { this.attributes[name] = String(value); },
-    getAttribute(name) { return this.attributes[name] ?? null; },
-    closest(selector) {
-      const className = selector.slice(1);
-      return String(this.className).split(/\s+/).includes(className) ? this : null;
-    },
-    querySelector(selector) {
-      if (selector.startsWith('[data-layer-id="')) {
-        const id = selector.slice(16, -2);
-        return this.children.find((child) => child.dataset.layerId === id) || null;
-      }
-      const className = selector.startsWith('.') ? selector.slice(1) : '';
-      const visit = (node) => {
-        if (String(node.className).split(/\s+/).includes(className)) return node;
-        for (const child of node.children || []) {
-          const found = visit(child);
-          if (found) return found;
-        }
-        return null;
-      };
-      return visit(this);
-    },
-    set innerHTML(value) { if (value === '') this.children = []; },
-    get innerHTML() { return ''; },
-  };
-  return element;
-}
-
-test('keyboard focus survives Data Layer enabling and disabling transitions', async () => {
-  const originalDocument = globalThis.document;
-  globalThis.document = { createElement: makeControlElement, activeElement: null };
-  const mgr = new DataLayerManager({});
-  let releaseEnable;
-  let releaseDisable;
-  const calls = { enable: 0, disable: 0 };
-  mgr.register({
-    id: 'focus-layer',
-    name: 'Focus layer',
-    icon: '',
-    source: 'Local focus fixture',
-    updateInterval: -1,
-    init() {},
-    enable() {
-      calls.enable += 1;
-      return new Promise((resolve) => { releaseEnable = resolve; });
-    },
-    disable() {
-      calls.disable += 1;
-      return new Promise((resolve) => { releaseDisable = resolve; });
-    },
-    update() {},
-    destroy() {},
-    getStats() { return { count: 1, lastUpdate: Date.now() }; },
-  });
-  const container = makeControlElement();
-
-  const waitFor = async (predicate, label) => {
-    for (let attempt = 0; attempt < 20; attempt += 1) {
-      if (predicate()) return;
-      await Promise.resolve();
-    }
-    assert.fail(`timed out waiting for ${label}`);
-  };
-
-  try {
-    mgr.buildTogglePanel(container);
-    const row = container.querySelector('[data-layer-id="focus-layer"]');
-    const button = row.querySelector('.data-toggle-btn');
-    button.focus();
-
-    const enablingClick = button.listeners.click();
-    await waitFor(() => typeof releaseEnable === 'function', 'enable transition');
-    assert.equal(globalThis.document.activeElement, button);
-    assert.equal(button.disabled, false, 'ENABLING never uses native disabled');
-    assert.equal(button.getAttribute('aria-disabled'), 'true');
-    assert.equal(button.getAttribute('aria-busy'), 'true');
-    assert.equal(button.textContent, 'ENABLING');
-    await button.listeners.click();
-    assert.equal(calls.enable, 1, 'repeat activation is inert while enabling');
-    assert.equal(mgr.layers.get('focus-layer').visibilityIntentEpoch, 1);
-
-    releaseEnable();
-    await enablingClick;
-    assert.equal(globalThis.document.activeElement, button);
-    assert.equal(button.disabled, false);
-    assert.equal(button.getAttribute('aria-disabled'), 'false');
-    assert.equal(button.getAttribute('aria-busy'), 'false');
-    assert.equal(mgr.isEnabled('focus-layer'), true);
-
-    const disablingClick = button.listeners.click();
-    await waitFor(() => typeof releaseDisable === 'function', 'disable transition');
-    assert.equal(globalThis.document.activeElement, button);
-    assert.equal(button.disabled, false, 'DISABLING never uses native disabled');
-    assert.equal(button.getAttribute('aria-disabled'), 'true');
-    assert.equal(button.getAttribute('aria-busy'), 'true');
-    assert.equal(button.textContent, 'DISABLING');
-    await button.listeners.click();
-    assert.equal(calls.disable, 1, 'repeat activation is inert while disabling');
-    assert.equal(mgr.layers.get('focus-layer').visibilityIntentEpoch, 2);
-
-    releaseDisable();
-    await disablingClick;
-    assert.equal(globalThis.document.activeElement, button);
-    assert.equal(button.disabled, false);
-    assert.equal(button.getAttribute('aria-disabled'), 'false');
-    assert.equal(button.getAttribute('aria-busy'), 'false');
-    assert.equal(mgr.isEnabled('focus-layer'), false);
-  } finally {
-    releaseEnable?.();
-    releaseDisable?.();
-    await mgr.destroyAll();
-    if (originalDocument === undefined) delete globalThis.document;
-    else globalThis.document = originalDocument;
-  }
-});
-
-test('a failed Data Layer transition clears busy state without losing keyboard focus', async () => {
-  const originalDocument = globalThis.document;
-  const originalWarn = console.warn;
-  globalThis.document = { createElement: makeControlElement, activeElement: null };
-  console.warn = () => {};
-  const mgr = new DataLayerManager({});
-  let rejectEnable;
-  let enableCalls = 0;
-  mgr.register({
-    id: 'focus-failure-layer',
-    name: 'Focus failure layer',
-    icon: '',
-    source: 'Local focus fixture',
-    updateInterval: -1,
-    init() {},
-    enable() {
-      enableCalls += 1;
-      if (enableCalls > 1) return true;
-      return new Promise((resolve, reject) => { rejectEnable = reject; });
-    },
-    disable() { return true; },
-    update() {},
-    destroy() {},
-    getStats() { return { count: 0, lastUpdate: null }; },
-  });
-  const container = makeControlElement();
-
-  try {
-    mgr.buildTogglePanel(container);
-    const button = container
-      .querySelector('[data-layer-id="focus-failure-layer"]')
-      .querySelector('.data-toggle-btn');
-    button.focus();
-
-    const failedClick = button.listeners.click();
-    for (let attempt = 0; attempt < 20 && typeof rejectEnable !== 'function'; attempt += 1) {
-      await Promise.resolve();
-    }
-    assert.equal(typeof rejectEnable, 'function');
-    assert.equal(globalThis.document.activeElement, button);
-    assert.equal(button.getAttribute('aria-disabled'), 'true');
-    assert.equal(button.getAttribute('aria-busy'), 'true');
-
-    rejectEnable(new Error('QA enable rejected'));
-    await failedClick;
-    assert.equal(globalThis.document.activeElement, button, 'failure settlement preserves focus');
-    assert.equal(button.disabled, false);
-    assert.equal(button.getAttribute('aria-disabled'), 'false');
-    assert.equal(button.getAttribute('aria-busy'), 'false');
-    assert.equal(button.textContent, 'OFF');
-    assert.deepEqual(mgr.getLayerLifecycleState('focus-failure-layer'), {
-      enabled: false,
-      lifecycleState: 'disabled',
-      uncertain: false,
-    });
-
-    await button.listeners.click();
-    assert.equal(enableCalls, 2, 'the settled control accepts a later retry');
-    assert.equal(globalThis.document.activeElement, button);
-    assert.equal(mgr.isEnabled('focus-failure-layer'), true);
-  } finally {
-    rejectEnable?.(new Error('test cleanup'));
-    console.warn = originalWarn;
-    await mgr.destroyAll();
-    if (originalDocument === undefined) delete globalThis.document;
-    else globalThis.document = originalDocument;
-  }
-});
-
-/** Collect every node in a rendered subtree carrying `className`. */
-function collectByClass(node, className) {
-  const found = [];
-  const visit = (current) => {
-    if (String(current.className).split(/\s+/).includes(className)) found.push(current);
-    for (const child of current.children || []) visit(child);
-  };
-  visit(node);
-  return found;
-}
-
-/** A layer that declares a two-state chip plus a legend, like satellites. */
-function makeRowControlLayer() {
-  let mode = 'core';
-  return {
-    get mode() { return mode; },
-    module: {
-      id: 'satellites',
-      name: 'Satellites',
-      icon: '',
-      source: 'CelesTrak',
-      updateInterval: -1,
-      async init() {},
-      enable() {},
-      disable() {},
-      async update() {},
-      getStats() { return { count: 3, lastUpdate: Date.now() }; },
-      setParams(params) { if (params.catalog) mode = params.catalog; },
-      getParams() { return { catalog: mode }; },
-      getRowControls() {
-        const dense = mode === 'dense';
-        return {
-          chips: [{
-            id: 'catalog',
-            label: 'DENSE',
-            active: dense,
-            title: 'toggle the dense catalog',
-            params: { catalog: dense ? 'core' : 'dense' },
-          }],
-          legend: [
-            { klass: 'nav', label: 'NAV', color: '#4fd8ff', blurb: 'GNSS', count: 2 },
-            { klass: 'geo', label: 'GEO', color: '#c89bff', blurb: 'belt', count: 5 },
-          ],
-        };
-      },
-    },
-  };
-}
-
-test('a layer that declares row controls renders its chips and color legend', async () => {
-  const originalDocument = globalThis.document;
-  globalThis.document = { createElement: makeControlElement };
-  const mgr = new DataLayerManager({});
-  const layer = makeRowControlLayer();
-  mgr.register(layer.module);
-  const container = makeControlElement();
-
-  try {
-    mgr.buildTogglePanel(container);
-    const row = container.querySelector('[data-layer-id="satellites"]');
-    const controls = row.querySelector('.data-toggle-controls');
-    assert.ok(controls, 'the row gained a controls block');
-    // Disabled layers stay quiet — no chip, no legend.
-    assert.equal(controls.hidden, true);
-
-    assert.equal(await mgr.setEnabled('satellites', true), true);
-    mgr._refreshTogglePanel();
-    assert.equal(controls.hidden, false);
-
-    const chips = collectByClass(controls, 'data-toggle-chip');
-    assert.equal(chips.length, 1);
-    assert.equal(chips[0].textContent, 'DENSE');
-    assert.equal(chips[0].dataset.chipId, 'catalog');
-    assert.equal(chips[0].attributes['aria-pressed'], 'false');
-    assert.equal(chips[0].title, 'toggle the dense catalog');
-
-    const swatches = collectByClass(controls, 'data-toggle-legend-swatch');
-    assert.deepEqual(swatches.map((s) => s.style.background), ['#4fd8ff', '#c89bff'],
-      'each legend swatch is painted the exact class color');
-    const items = collectByClass(controls, 'data-toggle-legend-item');
-    assert.deepEqual(items.map((i) => i.title), ['GNSS', 'belt']);
-    assert.equal(items.length, 2);
-  } finally {
-    await mgr.destroyAll();
-    if (originalDocument === undefined) delete globalThis.document;
-    else globalThis.document = originalDocument;
-  }
-});
-
-test('clicking a row chip applies the params it declared and re-renders', async () => {
-  const originalDocument = globalThis.document;
-  globalThis.document = { createElement: makeControlElement };
-  const mgr = new DataLayerManager({});
-  const layer = makeRowControlLayer();
-  mgr.register(layer.module);
-  const container = makeControlElement();
-
-  try {
-    mgr.buildTogglePanel(container);
-    assert.equal(await mgr.setEnabled('satellites', true), true);
-    const row = container.querySelector('[data-layer-id="satellites"]');
-    const controls = row.querySelector('.data-toggle-controls');
-    const chip = collectByClass(controls, 'data-toggle-chip')[0];
-
-    controls.listeners.click({ target: chip });
-    assert.equal(layer.mode, 'dense', 'the chip wrote the params it declared');
-    // setLayerParams refreshes the panel, so the chip already reflects the flip.
-    const afterOn = collectByClass(controls, 'data-toggle-chip')[0];
-    assert.equal(afterOn.attributes['aria-pressed'], 'true');
-    assert.equal(afterOn.className.includes('active'), true);
-
-    controls.listeners.click({ target: afterOn });
-    assert.equal(layer.mode, 'core', 'the chip toggles back rather than latching');
-    assert.equal(collectByClass(controls, 'data-toggle-chip')[0].attributes['aria-pressed'], 'false');
-  } finally {
-    await mgr.destroyAll();
-    if (originalDocument === undefined) delete globalThis.document;
-    else globalThis.document = originalDocument;
-  }
-});
-
-test('a click outside a chip is inert, and a throwing layer cannot blank the panel', async () => {
-  const originalDocument = globalThis.document;
-  globalThis.document = { createElement: makeControlElement };
-  const warn = console.warn;
-  console.warn = () => {};
-  const mgr = new DataLayerManager({});
-  const layer = makeRowControlLayer();
-  mgr.register(layer.module);
-  const container = makeControlElement();
-
-  try {
-    mgr.buildTogglePanel(container);
-    assert.equal(await mgr.setEnabled('satellites', true), true);
-    const row = container.querySelector('[data-layer-id="satellites"]');
-    const controls = row.querySelector('.data-toggle-controls');
-
-    const legendItem = collectByClass(controls, 'data-toggle-legend-item')[0];
-    controls.listeners.click({ target: legendItem });
-    assert.equal(layer.mode, 'core', 'the legend is not a control');
-    controls.listeners.click({ target: { closest: () => null } });
-    assert.equal(layer.mode, 'core');
-
-    layer.module.getRowControls = () => { throw new Error('boom'); };
-    mgr._refreshTogglePanel();
-    assert.equal(controls.hidden, true, 'a throwing layer collapses to an empty block');
-    assert.ok(container.querySelector('[data-layer-id="satellites"]'), 'the row itself survives');
-  } finally {
-    console.warn = warn;
-    await mgr.destroyAll();
-    if (originalDocument === undefined) delete globalThis.document;
-    else globalThis.document = originalDocument;
-  }
-});
-
-test('keyboard focus on a chip survives the refresh its own click triggers', async () => {
-  // _syncRowControls runs on EVERY panel refresh, including the one the chip's
-  // own click triggers. Rebuilding the button would blur it every time, so a
-  // keyboard user loses their place on activation.
-  const originalDocument = globalThis.document;
-  globalThis.document = { createElement: makeControlElement, activeElement: null };
-  const mgr = new DataLayerManager({});
-  const layer = makeRowControlLayer();
-  mgr.register(layer.module);
-  const container = makeControlElement();
-
-  try {
-    mgr.buildTogglePanel(container);
-    assert.equal(await mgr.setEnabled('satellites', true), true);
-    const controls = container
-      .querySelector('[data-layer-id="satellites"]')
-      .querySelector('.data-toggle-controls');
-    const chip = collectByClass(controls, 'data-toggle-chip')[0];
-
-    chip.focus();
-    assert.equal(globalThis.document.activeElement, chip, 'the chip starts focused');
-
-    controls.listeners.click({ target: chip });
-    assert.equal(globalThis.document.activeElement, chip,
-      'activating the chip does not blur it');
-    assert.equal(collectByClass(controls, 'data-toggle-chip')[0], chip,
-      'the SAME button node is reused across the click-driven refresh');
-
-    mgr._refreshTogglePanel();
-    mgr._refreshTogglePanel();
-    assert.equal(globalThis.document.activeElement, chip,
-      'repeated refreshes never steal focus');
-    // Legend entries hold no focus, so they may be replaced — never duplicated.
-    assert.equal(collectByClass(controls, 'data-toggle-legend-item').length, 2);
-
-    // ...and a chip that genuinely goes away still releases focus.
-    layer.module.getRowControls = () => ({ chips: [], legend: [] });
-    mgr._refreshTogglePanel();
-    assert.equal(globalThis.document.activeElement, null);
-  } finally {
-    await mgr.destroyAll();
-    if (originalDocument === undefined) delete globalThis.document;
-    else globalThis.document = originalDocument;
-  }
-});
-
-test('an async layer pushes its own row refresh, and a busy chip refuses clicks', async () => {
-  const originalDocument = globalThis.document;
-  globalThis.document = { createElement: makeControlElement };
-  const mgr = new DataLayerManager({});
-
-  let settled = false;
-  let writes = 0;
-  const module = {
-    id: 'satellites',
-    name: 'Satellites',
-    icon: '',
-    source: 'CelesTrak',
-    updateInterval: -1,
-    async init() {},
-    enable() {},
-    disable() {},
-    async update() {},
-    getStats() { return { count: 1, lastUpdate: Date.now() }; },
-    setParams() { writes += 1; },
-    getRowControls() {
-      return {
-        chips: [{
-          id: 'catalog',
-          label: settled ? 'DENSE' : 'DENSE ···',
-          active: settled,
-          busy: !settled,
-          disabled: !settled,
-          state: settled ? 'active' : 'loading',
-          title: 'x',
-          params: { catalog: 'core' },
-        }],
-        legend: [],
-      };
-    },
-    setRowControlsListener(fn) { module._listener = fn; },
-  };
-  mgr.register(module);
-  const container = makeControlElement();
-
-  try {
-    mgr.buildTogglePanel(container);
-    assert.equal(await mgr.setEnabled('satellites', true), true);
-    assert.equal(typeof module._listener, 'function', 'the manager installed its listener');
-
-    const controls = container
-      .querySelector('[data-layer-id="satellites"]')
-      .querySelector('.data-toggle-controls');
-    const chip = collectByClass(controls, 'data-toggle-chip')[0];
-    assert.equal(chip.textContent, 'DENSE ···');
-    assert.equal(chip.disabled, true);
-    assert.equal(chip.attributes['aria-busy'], 'true');
-    assert.equal(chip.attributes['aria-pressed'], 'false', 'busy is never reported as active');
-    assert.equal(chip.className.includes('chip-loading'), true);
-
-    controls.listeners.click({ target: chip });
-    assert.equal(writes, 0, 'a disabled chip is inert');
-
-    // The layer settles and pushes its own refresh — no panel poll involved.
-    settled = true;
-    module._listener();
-    mgr._layerPanel._flushRowControlsRefresh();
-    assert.equal(chip.textContent, 'DENSE');
-    assert.equal(chip.disabled, false);
-    assert.equal(chip.attributes['aria-pressed'], 'true');
-    assert.equal(chip.attributes['aria-busy'], 'false');
-
-    controls.listeners.click({ target: chip });
-    assert.equal(writes, 1, 'the settled chip writes again');
-  } finally {
-    await mgr.destroyAll();
-    if (originalDocument === undefined) delete globalThis.document;
-    else globalThis.document = originalDocument;
-  }
-});
-
-test('a layer that surrenders its row controls hides the block entirely', async () => {
-  // Space Missions borrows the satellite layer with showPoints:false; the row
-  // must not advertise a legend for an empty sky or offer a chip whose write
-  // the dependency owner will silently revert.
-  const originalDocument = globalThis.document;
-  globalThis.document = { createElement: makeControlElement };
-  const mgr = new DataLayerManager({});
-  let surrendered = false;
-  const layer = makeRowControlLayer();
-  const inner = layer.module.getRowControls;
-  layer.module.getRowControls = () => (surrendered ? { chips: [], legend: [] } : inner());
-  mgr.register(layer.module);
-  const container = makeControlElement();
-
-  try {
-    mgr.buildTogglePanel(container);
-    assert.equal(await mgr.setEnabled('satellites', true), true);
-    const controls = container
-      .querySelector('[data-layer-id="satellites"]')
-      .querySelector('.data-toggle-controls');
-    assert.equal(controls.hidden, false);
-    assert.equal(collectByClass(controls, 'data-toggle-chip').length, 1);
-
-    surrendered = true;
-    mgr._refreshTogglePanel();
-    assert.equal(controls.hidden, true);
-    assert.equal(collectByClass(controls, 'data-toggle-chip').length, 0,
-      'the chip is removed, not merely hidden behind a style');
-    assert.equal(collectByClass(controls, 'data-toggle-legend-item').length, 0);
-
-    surrendered = false;
-    mgr._refreshTogglePanel();
-    assert.equal(controls.hidden, false, 'the row returns when the owner releases it');
-    assert.equal(collectByClass(controls, 'data-toggle-chip').length, 1);
-  } finally {
-    await mgr.destroyAll();
-    if (originalDocument === undefined) delete globalThis.document;
-    else globalThis.document = originalDocument;
-  }
-});
-
 test('layer metadata shows a guidance prompt without reporting it as a fault', () => {
   const mgr = new DataLayerManager({});
   const text = mgr._buildMetaText({
@@ -3283,207 +2668,6 @@ test('layer metadata shows a guidance prompt without reporting it as a fault', (
   assert.doesNotMatch(text, /UNAVAILABLE|DEGRADED/);
 });
 
-
-test('panel remount releases old listeners and destruction revokes retained controls', async () => {
-  const originalDocument = globalThis.document;
-  globalThis.document = { createElement: makeControlElement, activeElement: null };
-  const manager = new DataLayerManager({});
-  const layer = makeSlowLayer('lifecycle-panel', { updateInterval: -1 });
-  let rowListener;
-  layer.module.getRowControls = () => ({ chips: [] });
-  layer.module.setRowControlsListener = (listener) => { rowListener = listener; };
-  manager.register(layer.module);
-  try {
-    const first = makeControlElement();
-    manager.buildTogglePanel(first);
-    const oldButton = first.querySelector('.data-toggle-btn');
-    const retainedClick = oldButton.listeners.click;
-    const second = makeControlElement();
-    manager.buildTogglePanel(second);
-    assert.equal(oldButton.listeners.click, undefined);
-    await retainedClick();
-    assert.equal(layer.calls.enable, 0, 'a revoked generation cannot issue actions');
-    const currentButton = second.querySelector('.data-toggle-btn');
-    assert.equal(typeof currentButton.listeners.click, 'function');
-    assert.equal(typeof rowListener, 'function');
-    await manager.destroyAll();
-    assert.equal(currentButton.listeners.click, undefined);
-    assert.equal(rowListener, null);
-  } finally {
-    await manager.destroyAll();
-    if (originalDocument === undefined) delete globalThis.document;
-    else globalThis.document = originalDocument;
-  }
-});
-
-test('row action chips use live disabled state and descriptive counts without writing parameters', async () => {
-  const originalDocument = globalThis.document;
-  globalThis.document = { createElement: makeControlElement };
-  const mgr = new DataLayerManager({});
-  const layer = makeRowControlLayer();
-  let calls = 0, blocked = false;
-  layer.module.getStats = () => ({ count: 3, countLabel: '3 nearby' });
-  layer.module.getRowControls = () => ({ chips: [{ id: 'find', label: 'SHOW NEAREST', disabled: blocked, onClick: () => calls++ }] });
-  layer.module.setParams = () => { throw new Error('navigation must not write persistent params'); };
-  mgr.register(layer.module);
-  const container = makeControlElement();
-  try {
-    mgr.buildTogglePanel(container);
-    await mgr.setEnabled('satellites', true);
-    const row = container.querySelector('[data-layer-id="satellites"]');
-    assert.equal(row.querySelector('.data-count').textContent, '3 nearby');
-    const controls = row.querySelector('.data-toggle-controls');
-    const chip = collectByClass(controls, 'data-toggle-chip')[0];
-    controls.listeners.click({ target: chip });
-    assert.equal(calls, 1);
-    blocked = true;
-    controls.listeners.click({ target: chip });
-    assert.equal(calls, 1, 'live disabled descriptor wins before row repaint');
-    blocked = false;
-    await mgr.setEnabled('satellites', false);
-    controls.listeners.click({ target: chip });
-    assert.equal(calls, 1, 'disabled layer cannot navigate');
-  } finally {
-    await mgr.destroyAll();
-    if (originalDocument === undefined) delete globalThis.document;
-    else globalThis.document = originalDocument;
-  }
-});
-
-for (const scheduler of ['animation frame', 'timeout']) {
-  test(`row notifications coalesce with ${scheduler} and stop after destroy`, async (t) => {
-    t.mock.timers.enable({ apis: ['setTimeout'] });
-    const frames = new Map();
-    let nextFrame = 0;
-    const originalRaf = globalThis.requestAnimationFrame;
-    const originalCancel = globalThis.cancelAnimationFrame;
-    globalThis.requestAnimationFrame = scheduler === 'animation frame'
-      ? (callback) => { frames.set(++nextFrame, callback); return nextFrame; }
-      : undefined;
-    globalThis.cancelAnimationFrame = (id) => frames.delete(id);
-    const originalDocument = globalThis.document;
-    globalThis.document = { createElement: makeControlElement };
-    const manager = new DataLayerManager({});
-    const layer = makeSlowLayer('wind', { updateInterval: -1 });
-    let notify;
-    layer.module.getRowControls = () => ({ chips: [] });
-    layer.module.setRowControlsListener = (listener) => { if (listener) notify = listener; };
-    manager.register(layer.module);
-    try {
-      manager.buildTogglePanel(makeControlElement());
-      const panel = manager._layerPanel;
-      let refreshes = 0;
-      const refresh = panel._refreshTogglePanel.bind(panel);
-      panel._refreshTogglePanel = () => { refreshes++; refresh(); };
-      for (let i = 0; i < 10; i++) notify();
-      assert.equal(refreshes, 0, 'notifications defer refresh');
-      if (scheduler === 'animation frame') assert.equal(frames.size, 1);
-      panel._flushRowControlsRefresh();
-      assert.equal(refreshes, 1);
-      panel._flushRowControlsRefresh();
-      t.mock.timers.tick(0);
-      assert.equal(frames.size, 0, 'flush cancels the pending frame');
-      assert.equal(refreshes, 1, 'flush does not leave duplicate work');
-      notify();
-      notify();
-      if (scheduler === 'animation frame') {
-        const [id, callback] = frames.entries().next().value;
-        frames.delete(id);
-        callback();
-      } else t.mock.timers.tick(0);
-      assert.equal(refreshes, 2, 'scheduled callback refreshes once');
-      notify();
-      panel.destroy();
-      assert.equal(frames.size, 0, 'destroy cancels pending work');
-      notify();
-      panel._flushRowControlsRefresh();
-      t.mock.timers.tick(0);
-      assert.equal(refreshes, 2, 'retained notifications after destroy are inert');
-    } finally {
-      await manager.destroyAll();
-      if (originalDocument === undefined) delete globalThis.document;
-      else globalThis.document = originalDocument;
-      if (originalRaf === undefined) delete globalThis.requestAnimationFrame;
-      else globalThis.requestAnimationFrame = originalRaf;
-      if (originalCancel === undefined) delete globalThis.cancelAnimationFrame;
-      else globalThis.cancelAnimationFrame = originalCancel;
-    }
-  });
-}
-
-test('row info and legends reconcile in place while chips retain focus and order', async () => {
-  const originalDocument = globalThis.document;
-  globalThis.document = { createElement: makeControlElement, activeElement: null };
-  const manager = new DataLayerManager({});
-  const layer = makeSlowLayer('wind', { updateInterval: -1 });
-  let controls = {
-    chips: [{ id: 'one', label: 'One' }],
-    legend: [{ label: 'Low', color: '#0000ff', count: 1, blurb: 'Low values' }],
-    info: 'Forecast',
-    infoTitle: 'Source time',
-  };
-  layer.module.getRowControls = () => controls;
-  manager.register(layer.module);
-  try {
-    const container = makeControlElement();
-    manager.buildTogglePanel(container);
-    await manager.setEnabled('wind', true);
-    const row = container.querySelector('.data-toggle-controls');
-    const chip = row.children[0];
-    let legend = row.children[1];
-    const info = row.children[2];
-    chip.focus();
-    let writes = 0;
-    for (const key of ['textContent', 'title']) {
-      let value = info[key];
-      Object.defineProperty(info, key, {
-        get: () => value,
-        set: (next) => { writes++; value = next; },
-      });
-    }
-    controls = structuredClone(controls);
-    manager._refreshTogglePanel();
-    assert.equal(row.children[1], legend);
-    assert.equal(row.children[2], info);
-    assert.equal(writes, 0);
-    for (const change of [{ label: 'High' }, { color: '#ff0000' }, { count: 2 }, { blurb: 'High values' }]) {
-      Object.assign(controls.legend[0], change);
-      manager._refreshTogglePanel();
-      assert.notEqual(row.children[1], legend);
-      legend = row.children[1];
-      assert.equal(row.children[2], info);
-      assert.equal(globalThis.document.activeElement, chip);
-    }
-    controls.info = '<img onerror=alert(1)>';
-    controls.infoTitle = '';
-    controls.chips.push({ id: 'two', label: 'Two' });
-    manager._refreshTogglePanel();
-    assert.deepEqual(row.children.map(node => node.className), [
-      'data-toggle-chip chip-idle', 'data-toggle-chip chip-idle',
-      'data-toggle-legend-item', 'data-toggle-controls-info',
-    ]);
-    assert.equal(row.children[2], legend);
-    assert.equal(row.children[3], info);
-    assert.equal(info.textContent, controls.info);
-    assert.equal(info.title, '');
-    assert.equal(info.children.length, 0, 'info remains plain text');
-    controls = { chips: [], legend: [] };
-    manager._refreshTogglePanel();
-    assert.equal(row.hidden, true);
-    assert.equal(info.hidden, true);
-    assert.deepEqual(row.children, [info]);
-    controls = { info: 'Restored', legend: [{ label: 'New', color: '#ffffff' }] };
-    manager._refreshTogglePanel();
-    assert.equal(row.children.at(-1), info);
-    assert.equal(info.hidden, false);
-    assert.equal(info.textContent, 'Restored');
-  } finally {
-    await manager.destroyAll();
-    if (originalDocument === undefined) delete globalThis.document;
-    else globalThis.document = originalDocument;
-  }
-});
-
 test('refreshLayerStats reaches presentation through the bare lifecycle', async () => {
   const { LayerLifecycle } = await import('./lifecycle.js');
   const lifecycle = new LayerLifecycle({});

src/data/managerPanel.test.mjs

@@ -0,0 +1,933 @@
+// src/data/managerPanel.test.mjs — the manager's layer rows, rendered into a
+// real DOM: toggles keep keyboard focus through transitions, row chips write
+// the params they declare, and legends, info lines and lists follow the layer.
+import '../testSupport/registerDom.mjs';
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { DataLayerManager } from './manager.js';
+import { assertSameNode } from '../testSupport/domAssert.mjs';
+
+/** Build a mock layer whose init/update resolve on the next microtask. */
+function makeSlowLayer(id, { updateInterval = 1000 } = {}) {
+  const calls = { enable: 0, disable: 0, update: 0, init: 0 };
+  return {
+    calls,
+    module: {
+      id,
+      name: id,
+      icon: '',
+      source: 'test',
+      updateInterval,
+      async init() {
+        calls.init++;
+        await Promise.resolve();
+      },
+      enable() {
+        calls.enable++;
+      },
+      disable() {
+        calls.disable++;
+      },
+      async update() {
+        calls.update++;
+        await Promise.resolve();
+      },
+      getStats() {
+        return { count: 0, lastUpdate: null };
+      },
+    },
+  };
+}
+
+/** A layer that declares a two-state chip plus a legend, like satellites. */
+function makeRowControlLayer() {
+  let mode = 'core';
+  return {
+    get mode() {
+      return mode;
+    },
+    module: {
+      id: 'satellites',
+      name: 'Satellites',
+      icon: '',
+      source: 'CelesTrak',
+      updateInterval: -1,
+      async init() {},
+      enable() {},
+      disable() {},
+      async update() {},
+      getStats() {
+        return { count: 3, lastUpdate: Date.now() };
+      },
+      setParams(params) {
+        if (params.catalog) mode = params.catalog;
+      },
+      getParams() {
+        return { catalog: mode };
+      },
+      getRowControls() {
+        const dense = mode === 'dense';
+        return {
+          chips: [
+            {
+              id: 'catalog',
+              label: 'DENSE',
+              active: dense,
+              title: 'toggle the dense catalog',
+              params: { catalog: dense ? 'core' : 'dense' },
+            },
+          ],
+          legend: [
+            {
+              klass: 'nav',
+              label: 'NAV',
+              color: '#4fd8ff',
+              blurb: 'GNSS',
+              count: 2,
+            },
+            {
+              klass: 'geo',
+              label: 'GEO',
+              color: '#c89bff',
+              blurb: 'belt',
+              count: 5,
+            },
+          ],
+        };
+      },
+    },
+  };
+}
+
+function panelHost(t) {
+  document.body.replaceChildren();
+  const container = document.body.appendChild(document.createElement('div'));
+  container.id = 'data-toggles';
+  t.after(() => document.body.replaceChildren());
+  return container;
+}
+
+const row = (container, id) =>
+  container.querySelector(`[data-layer-id="${id}"]`);
+const chipsIn = (node) => [...node.querySelectorAll('.data-toggle-chip')];
+const macrotask = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+async function waitFor(predicate, label) {
+  for (let attempt = 0; attempt < 50; attempt += 1) {
+    if (predicate()) return;
+    await macrotask();
+  }
+  assert.fail(`timed out waiting for ${label}`);
+}
+
+test('renders ordinary layer rows without recreating a panel-hidden coordinator', async (t) => {
+  const container = panelHost(t);
+  const mgr = new DataLayerManager({});
+  const ordinary = makeSlowLayer('flights', { updateInterval: -1 });
+  const coordinator = makeSlowLayer('military-awareness', {
+    updateInterval: -1,
+  });
+  coordinator.module.showInTogglePanel = false;
+  mgr.register(ordinary.module);
+  mgr.register(coordinator.module);
+  try {
+    mgr.buildTogglePanel(container);
+    assert.ok(row(container, 'flights'));
+    assert.ok(!row(container, 'military-awareness'));
+    assert.equal(await mgr.setEnabled('military-awareness', true), true);
+    mgr._refreshTogglePanel();
+    assert.ok(!row(container, 'military-awareness'));
+    assert.equal(
+      mgr.getAll().find(({ id }) => id === 'military-awareness').enabled,
+      true,
+    );
+  } finally {
+    await mgr.destroyAll();
+  }
+});
+
+test('keyboard focus survives Data Layer enabling and disabling transitions', async (t) => {
+  const container = panelHost(t);
+  const mgr = new DataLayerManager({});
+  let releaseEnable;
+  let releaseDisable;
+  const calls = { enable: 0, disable: 0 };
+  mgr.register({
+    id: 'focus-layer',
+    name: 'Focus layer',
+    icon: '',
+    source: 'Local focus fixture',
+    updateInterval: -1,
+    init() {},
+    enable() {
+      calls.enable += 1;
+      return new Promise((resolve) => {
+        releaseEnable = resolve;
+      });
+    },
+    disable() {
+      calls.disable += 1;
+      return new Promise((resolve) => {
+        releaseDisable = resolve;
+      });
+    },
+    update() {},
+    destroy() {},
+    getStats() {
+      return { count: 1, lastUpdate: Date.now() };
+    },
+  });
+
+  try {
+    mgr.buildTogglePanel(container);
+    const button = row(container, 'focus-layer').querySelector(
+      '.data-toggle-btn',
+    );
+    button.focus();
+
+    button.click();
+    await waitFor(
+      () => typeof releaseEnable === 'function',
+      'enable transition',
+    );
+    assertSameNode(document.activeElement, button);
+    assert.equal(button.disabled, false, 'ENABLING never uses native disabled');
+    assert.equal(button.getAttribute('aria-disabled'), 'true');
+    assert.equal(button.getAttribute('aria-busy'), 'true');
+    assert.equal(button.textContent, 'ENABLING');
+    button.click();
+    await macrotask();
+    assert.equal(calls.enable, 1, 'repeat activation is inert while enabling');
+    assert.equal(mgr.layers.get('focus-layer').visibilityIntentEpoch, 1);
+
+    releaseEnable();
+    await waitFor(
+      () =>
+        mgr.isEnabled('focus-layer') &&
+        button.getAttribute('aria-busy') === 'false',
+      'enabled',
+    );
+    assertSameNode(document.activeElement, button);
+    assertSameNode(
+      row(container, 'focus-layer').querySelector('.data-toggle-btn'),
+      button,
+      'the SAME button node is reused across the transition',
+    );
+    assert.equal(button.disabled, false);
+    assert.equal(button.getAttribute('aria-disabled'), 'false');
+
+    button.click();
+    await waitFor(
+      () => typeof releaseDisable === 'function',
+      'disable transition',
+    );
+    assertSameNode(document.activeElement, button);
+    assert.equal(
+      button.disabled,
+      false,
+      'DISABLING never uses native disabled',
+    );
+    assert.equal(button.getAttribute('aria-disabled'), 'true');
+    assert.equal(button.getAttribute('aria-busy'), 'true');
+    assert.equal(button.textContent, 'DISABLING');
+    button.click();
+    await macrotask();
+    assert.equal(
+      calls.disable,
+      1,
+      'repeat activation is inert while disabling',
+    );
+    assert.equal(mgr.layers.get('focus-layer').visibilityIntentEpoch, 2);
+
+    releaseDisable();
+    await waitFor(
+      () =>
+        !mgr.isEnabled('focus-layer') &&
+        button.getAttribute('aria-busy') === 'false',
+      'disabled',
+    );
+    assertSameNode(document.activeElement, button);
+    assert.equal(button.disabled, false);
+    assert.equal(button.getAttribute('aria-disabled'), 'false');
+  } finally {
+    releaseEnable?.();
+    releaseDisable?.();
+    await mgr.destroyAll();
+  }
+});
+
+test('a failed Data Layer transition clears busy state without losing keyboard focus', async (t) => {
+  const container = panelHost(t);
+  const originalWarn = console.warn;
+  console.warn = () => {};
+  const mgr = new DataLayerManager({});
+  let rejectEnable;
+  let enableCalls = 0;
+  mgr.register({
+    id: 'focus-failure-layer',
+    name: 'Focus failure layer',
+    icon: '',
+    source: 'Local focus fixture',
+    updateInterval: -1,
+    init() {},
+    enable() {
+      enableCalls += 1;
+      if (enableCalls > 1) return true;
+      return new Promise((resolve, reject) => {
+        rejectEnable = reject;
+      });
+    },
+    disable() {
+      return true;
+    },
+    update() {},
+    destroy() {},
+    getStats() {
+      return { count: 0, lastUpdate: null };
+    },
+  });
+
+  try {
+    mgr.buildTogglePanel(container);
+    const button = row(container, 'focus-failure-layer').querySelector(
+      '.data-toggle-btn',
+    );
+    button.focus();
+
+    button.click();
+    await waitFor(
+      () => typeof rejectEnable === 'function',
+      'enable transition',
+    );
+    assertSameNode(document.activeElement, button);
+    assert.equal(button.getAttribute('aria-disabled'), 'true');
+    assert.equal(button.getAttribute('aria-busy'), 'true');
+
+    rejectEnable(new Error('QA enable rejected'));
+    await waitFor(
+      () => button.getAttribute('aria-busy') === 'false',
+      'failure settlement',
+    );
+    assertSameNode(
+      document.activeElement,
+      button,
+      'failure settlement preserves focus',
+    );
+    assert.equal(button.disabled, false);
+    assert.equal(button.getAttribute('aria-disabled'), 'false');
+    assert.equal(button.textContent, 'OFF');
+    assert.deepEqual(mgr.getLayerLifecycleState('focus-failure-layer'), {
+      enabled: false,
+      lifecycleState: 'disabled',
+      uncertain: false,
+    });
+
+    button.click();
+    await waitFor(() => mgr.isEnabled('focus-failure-layer'), 'retry');
+    assert.equal(enableCalls, 2, 'the settled control accepts a later retry');
+    assertSameNode(document.activeElement, button);
+  } finally {
+    rejectEnable?.(new Error('test cleanup'));
+    console.warn = originalWarn;
+    await mgr.destroyAll();
+  }
+});
+
+test('a layer that declares row controls renders its chips and color legend', async (t) => {
+  const container = panelHost(t);
+  const mgr = new DataLayerManager({});
+  const layer = makeRowControlLayer();
+  mgr.register(layer.module);
+  try {
+    mgr.buildTogglePanel(container);
+    const controls = row(container, 'satellites').querySelector(
+      '.data-toggle-controls',
+    );
+    assert.ok(controls, 'the row gained a controls block');
+    // Disabled layers stay quiet — no chip, no legend.
+    assert.equal(controls.hidden, true);
+
+    assert.equal(await mgr.setEnabled('satellites', true), true);
+    mgr._refreshTogglePanel();
+    assert.equal(controls.hidden, false);
+
+    const chips = chipsIn(controls);
+    assert.equal(chips.length, 1);
+    assert.equal(chips[0].textContent, 'DENSE');
+    assert.equal(chips[0].dataset.chipId, 'catalog');
+    assert.equal(chips[0].getAttribute('aria-pressed'), 'false');
+    assert.equal(chips[0].title, 'toggle the dense catalog');
+
+    const swatches = [
+      ...controls.querySelectorAll('.data-toggle-legend-swatch'),
+    ];
+    assert.deepEqual(
+      swatches.map((s) => s.style.background),
+      ['#4fd8ff', '#c89bff'],
+      'each legend swatch is painted the exact class color',
+    );
+    const items = [...controls.querySelectorAll('.data-toggle-legend-item')];
+    assert.deepEqual(
+      items.map((i) => i.title),
+      ['GNSS', 'belt'],
+    );
+    assert.deepEqual(
+      items.map((i) => i.textContent),
+      ['NAV 2', 'GEO 5'],
+    );
+  } finally {
+    await mgr.destroyAll();
+  }
+});
+
+test('clicking a row chip applies the params it declared and re-renders', async (t) => {
+  const container = panelHost(t);
+  const mgr = new DataLayerManager({});
+  const layer = makeRowControlLayer();
+  mgr.register(layer.module);
+  try {
+    mgr.buildTogglePanel(container);
+    assert.equal(await mgr.setEnabled('satellites', true), true);
+    const controls = row(container, 'satellites').querySelector(
+      '.data-toggle-controls',
+    );
+    const chip = chipsIn(controls)[0];
+
+    chip.click();
+    assert.equal(layer.mode, 'dense', 'the chip wrote the params it declared');
+    // setLayerParams refreshes the panel, so the chip already reflects the flip.
+    assert.equal(chip.getAttribute('aria-pressed'), 'true');
+    assert.equal(chip.classList.contains('active'), true);
+
+    chip.click();
+    assert.equal(
+      layer.mode,
+      'core',
+      'the chip toggles back rather than latching',
+    );
+    assert.equal(chip.getAttribute('aria-pressed'), 'false');
+  } finally {
+    await mgr.destroyAll();
+  }
+});
+
+test('a click outside a chip is inert, and a throwing layer cannot blank the panel', async (t) => {
+  const container = panelHost(t);
+  const warn = console.warn;
+  console.warn = () => {};
+  const mgr = new DataLayerManager({});
+  const layer = makeRowControlLayer();
+  mgr.register(layer.module);
+  try {
+    mgr.buildTogglePanel(container);
+    assert.equal(await mgr.setEnabled('satellites', true), true);
+    const controls = row(container, 'satellites').querySelector(
+      '.data-toggle-controls',
+    );
+
+    controls.querySelector('.data-toggle-legend-item').click();
+    assert.equal(layer.mode, 'core', 'the legend is not a control');
+    controls.click();
+    assert.equal(layer.mode, 'core');
+
+    layer.module.getRowControls = () => {
+      throw new Error('boom');
+    };
+    mgr._refreshTogglePanel();
+    assert.equal(
+      controls.hidden,
+      true,
+      'a throwing layer collapses to an empty block',
+    );
+    assert.ok(row(container, 'satellites'), 'the row itself survives');
+  } finally {
+    console.warn = warn;
+    await mgr.destroyAll();
+  }
+});
+
+test('keyboard focus on a chip survives the refresh its own click triggers', async (t) => {
+  // The panel repaints on EVERY refresh, including the one the chip's own
+  // click triggers. Rebuilding the button would blur it every time, so a
+  // keyboard user loses their place on activation.
+  const container = panelHost(t);
+  const mgr = new DataLayerManager({});
+  const layer = makeRowControlLayer();
+  mgr.register(layer.module);
+  try {
+    mgr.buildTogglePanel(container);
+    assert.equal(await mgr.setEnabled('satellites', true), true);
+    const controls = row(container, 'satellites').querySelector(
+      '.data-toggle-controls',
+    );
+    const chip = chipsIn(controls)[0];
+
+    chip.focus();
+    assertSameNode(document.activeElement, chip, 'the chip starts focused');
+
+    chip.click();
+    assertSameNode(
+      document.activeElement,
+      chip,
+      'activating the chip does not blur it',
+    );
+    assertSameNode(
+      chipsIn(controls)[0],
+      chip,
+      'the SAME button node is reused across the click-driven refresh',
+    );
+
+    mgr._refreshTogglePanel();
+    mgr._refreshTogglePanel();
+    assertSameNode(
+      document.activeElement,
+      chip,
+      'repeated refreshes never steal focus',
+    );
+    assert.equal(
+      controls.querySelectorAll('.data-toggle-legend-item').length,
+      2,
+    );
+
+    // ...and a chip that genuinely goes away is removed from the row.
+    layer.module.getRowControls = () => ({ chips: [], legend: [] });
+    mgr._refreshTogglePanel();
+    assert.equal(chip.isConnected, false);
+  } finally {
+    await mgr.destroyAll();
+  }
+});
+
+test('an async layer pushes its own row refresh, and a busy chip refuses clicks', async (t) => {
+  const container = panelHost(t);
+  const mgr = new DataLayerManager({});
+  let settled = false;
+  let writes = 0;
+  const module = {
+    id: 'satellites',
+    name: 'Satellites',
+    icon: '',
+    source: 'CelesTrak',
+    updateInterval: -1,
+    async init() {},
+    enable() {},
+    disable() {},
+    async update() {},
+    getStats() {
+      return { count: 1, lastUpdate: Date.now() };
+    },
+    setParams() {
+      writes += 1;
+    },
+    getRowControls() {
+      return {
+        chips: [
+          {
+            id: 'catalog',
+            label: settled ? 'DENSE' : 'DENSE ···',
+            active: settled,
+            busy: !settled,
+            disabled: !settled,
+            state: settled ? 'active' : 'loading',
+            title: 'x',
+            params: { catalog: 'core' },
+          },
+        ],
+        legend: [],
+      };
+    },
+    setRowControlsListener(fn) {
+      module._listener = fn;
+    },
+  };
+  mgr.register(module);
+  try {
+    mgr.buildTogglePanel(container);
+    assert.equal(await mgr.setEnabled('satellites', true), true);
+    assert.equal(
+      typeof module._listener,
+      'function',
+      'the manager installed its listener',
+    );
+
+    const controls = row(container, 'satellites').querySelector(
+      '.data-toggle-controls',
+    );
+    const chip = chipsIn(controls)[0];
+    assert.equal(chip.textContent, 'DENSE ···');
+    assert.equal(chip.disabled, true);
+    assert.equal(chip.getAttribute('aria-busy'), 'true');
+    assert.equal(
+      chip.getAttribute('aria-pressed'),
+      'false',
+      'busy is never reported as active',
+    );
+    assert.equal(chip.classList.contains('chip-loading'), true);
+
+    chip.click();
+    assert.equal(writes, 0, 'a disabled chip is inert');
+
+    // The layer settles and pushes its own refresh — no panel poll involved.
+    settled = true;
+    module._listener();
+    mgr._layerPanel._flushRowControlsRefresh();
+    assert.equal(chip.textContent, 'DENSE');
+    assert.equal(chip.disabled, false);
+    assert.equal(chip.getAttribute('aria-pressed'), 'true');
+    assert.equal(chip.getAttribute('aria-busy'), 'false');
+
+    chip.click();
+    assert.equal(writes, 1, 'the settled chip writes again');
+  } finally {
+    await mgr.destroyAll();
+  }
+});
+
+test('a layer that surrenders its row controls hides the block entirely', async (t) => {
+  // Space Missions borrows the satellite layer with showPoints:false; the row
+  // must not advertise a legend for an empty sky or offer a chip whose write
+  // the dependency owner will silently revert.
+  const container = panelHost(t);
+  const mgr = new DataLayerManager({});
+  let surrendered = false;
+  const layer = makeRowControlLayer();
+  const inner = layer.module.getRowControls;
+  layer.module.getRowControls = () =>
+    surrendered ? { chips: [], legend: [] } : inner();
+  mgr.register(layer.module);
+  try {
+    mgr.buildTogglePanel(container);
+    assert.equal(await mgr.setEnabled('satellites', true), true);
+    const controls = row(container, 'satellites').querySelector(
+      '.data-toggle-controls',
+    );
+    assert.equal(controls.hidden, false);
+    assert.equal(chipsIn(controls).length, 1);
+
+    surrendered = true;
+    mgr._refreshTogglePanel();
+    assert.equal(controls.hidden, true);
+    assert.equal(
+      chipsIn(controls).length,
+      0,
+      'the chip is removed, not merely hidden behind a style',
+    );
+    assert.equal(
+      controls.querySelectorAll('.data-toggle-legend-item').length,
+      0,
+    );
+
+    surrendered = false;
+    mgr._refreshTogglePanel();
+    assert.equal(
+      controls.hidden,
+      false,
+      'the row returns when the owner releases it',
+    );
+    assert.equal(chipsIn(controls).length, 1);
+  } finally {
+    await mgr.destroyAll();
+  }
+});
+
+test('panel remount releases old listeners and destruction revokes retained controls', async (t) => {
+  panelHost(t);
+  const manager = new DataLayerManager({});
+  const layer = makeSlowLayer('lifecycle-panel', { updateInterval: -1 });
+  let rowListener;
+  layer.module.getRowControls = () => ({ chips: [] });
+  layer.module.setRowControlsListener = (listener) => {
+    rowListener = listener;
+  };
+  manager.register(layer.module);
+  try {
+    const first = document.body.appendChild(document.createElement('div'));
+    manager.buildTogglePanel(first);
+    const oldButton = first.querySelector('.data-toggle-btn');
+    const second = document.body.appendChild(document.createElement('div'));
+    manager.buildTogglePanel(second);
+    assert.equal(first.children.length, 0, 'the old container is emptied');
+    oldButton.click();
+    await macrotask();
+    assert.equal(
+      layer.calls.enable,
+      0,
+      'a revoked generation cannot issue actions',
+    );
+    const currentButton = second.querySelector('.data-toggle-btn');
+    assert.ok(currentButton);
+    assert.equal(typeof rowListener, 'function');
+    await manager.destroyAll();
+    assert.equal(second.children.length, 0, 'destruction removes the rows');
+    currentButton.click();
+    await macrotask();
+    assert.equal(
+      layer.calls.enable,
+      0,
+      'a retained control cannot act after destruction',
+    );
+    assert.equal(rowListener, null);
+  } finally {
+    await manager.destroyAll();
+  }
+});
+
+test('a retained chip from a remounted or destroyed panel writes nothing', async (t) => {
+  panelHost(t);
+  const mgr = new DataLayerManager({});
+  const layer = makeRowControlLayer();
+  mgr.register(layer.module);
+  try {
+    const first = document.body.appendChild(document.createElement('div'));
+    mgr.buildTogglePanel(first);
+    assert.equal(await mgr.setEnabled('satellites', true), true);
+    const oldChip = chipsIn(first)[0];
+    const second = document.body.appendChild(document.createElement('div'));
+    mgr.buildTogglePanel(second);
+    oldChip.click();
+    assert.equal(
+      layer.mode,
+      'core',
+      'a released generation cannot write params',
+    );
+    const chip = chipsIn(second)[0];
+    mgr._layerPanel.destroy();
+    chip.click();
+    assert.equal(layer.mode, 'core', 'a destroyed panel cannot write params');
+  } finally {
+    await mgr.destroyAll();
+  }
+});
+
+test('a toggle that settles after a remount repaints the new row idle', async (t) => {
+  panelHost(t);
+  const mgr = new DataLayerManager({});
+  let releaseEnable;
+  mgr.register({
+    id: 'remount-layer',
+    name: 'Remount layer',
+    icon: '',
+    source: 'Local fixture',
+    updateInterval: -1,
+    init() {},
+    enable() {
+      return new Promise((resolve) => {
+        releaseEnable = resolve;
+      });
+    },
+    disable() {},
+    update() {},
+    destroy() {},
+    getStats() {
+      return { count: 1, lastUpdate: Date.now() };
+    },
+  });
+  try {
+    const first = document.body.appendChild(document.createElement('div'));
+    mgr.buildTogglePanel(first);
+    first.querySelector('.data-toggle-btn').click();
+    await waitFor(
+      () => typeof releaseEnable === 'function',
+      'enable transition',
+    );
+    const second = document.body.appendChild(document.createElement('div'));
+    mgr.buildTogglePanel(second);
+    releaseEnable();
+    await waitFor(() => mgr.isEnabled('remount-layer'), 'enabled');
+    await macrotask();
+    const button = second.querySelector('.data-toggle-btn');
+    assert.equal(button.getAttribute('aria-busy'), 'false');
+    assert.equal(button.getAttribute('aria-disabled'), 'false');
+    assert.equal(button.textContent, 'ON');
+  } finally {
+    releaseEnable?.();
+    await mgr.destroyAll();
+  }
+});
+
+test('row action chips use live disabled state and descriptive counts without writing parameters', async (t) => {
+  const container = panelHost(t);
+  const mgr = new DataLayerManager({});
+  const layer = makeRowControlLayer();
+  let calls = 0,
+    blocked = false;
+  layer.module.getStats = () => ({ count: 3, countLabel: '3 nearby' });
+  layer.module.getRowControls = () => ({
+    chips: [
+      {
+        id: 'find',
+        label: 'SHOW NEAREST',
+        disabled: blocked,
+        onClick: () => calls++,
+      },
+    ],
+  });
+  layer.module.setParams = () => {
+    throw new Error('navigation must not write persistent params');
+  };
+  mgr.register(layer.module);
+  try {
+    mgr.buildTogglePanel(container);
+    await mgr.setEnabled('satellites', true);
+    const layerRow = row(container, 'satellites');
+    assert.equal(layerRow.querySelector('.data-count').textContent, '3 nearby');
+    const chip = chipsIn(layerRow)[0];
+    chip.click();
+    assert.equal(calls, 1);
+    blocked = true;
+    chip.click();
+    assert.equal(calls, 1, 'live disabled descriptor wins before row repaint');
+    blocked = false;
+    await mgr.setEnabled('satellites', false);
+    assert.equal(chip.isConnected, false, 'the off row drops its chips');
+    mgr._layerPanel._selectChip('satellites', 'find');
+    assert.equal(calls, 1, 'disabled layer cannot navigate');
+  } finally {
+    await mgr.destroyAll();
+  }
+});
+
+for (const scheduler of ['animation frame', 'timeout']) {
+  test(`row notifications coalesce with ${scheduler} and stop after destroy`, async (t) => {
+    const container = panelHost(t);
+    const frames = new Map();
+    let nextFrame = 0;
+    const originalRaf = globalThis.requestAnimationFrame;
+    const originalCancel = globalThis.cancelAnimationFrame;
+    globalThis.requestAnimationFrame =
+      scheduler === 'animation frame'
+        ? (callback) => {
+            frames.set(++nextFrame, callback);
+            return nextFrame;
+          }
+        : undefined;
+    globalThis.cancelAnimationFrame = (id) => frames.delete(id);
+    const manager = new DataLayerManager({});
+    const layer = makeSlowLayer('wind', { updateInterval: -1 });
+    let notify;
+    layer.module.getRowControls = () => ({ chips: [] });
+    layer.module.setRowControlsListener = (listener) => {
+      if (listener) notify = listener;
+    };
+    manager.register(layer.module);
+    try {
+      manager.buildTogglePanel(container);
+      const panel = manager._layerPanel;
+      let refreshes = 0;
+      const refresh = panel._refreshTogglePanel.bind(panel);
+      panel._refreshTogglePanel = () => {
+        refreshes++;
+        refresh();
+      };
+      for (let i = 0; i < 10; i++) notify();
+      assert.equal(refreshes, 0, 'notifications defer refresh');
+      if (scheduler === 'animation frame') assert.equal(frames.size, 1);
+      panel._flushRowControlsRefresh();
+      assert.equal(refreshes, 1);
+      panel._flushRowControlsRefresh();
+      await macrotask();
+      assert.equal(frames.size, 0, 'flush cancels the pending frame');
+      assert.equal(refreshes, 1, 'flush does not leave duplicate work');
+      notify();
+      notify();
+      if (scheduler === 'animation frame') {
+        const [id, callback] = frames.entries().next().value;
+        frames.delete(id);
+        callback();
+      } else await macrotask();
+      assert.equal(refreshes, 2, 'scheduled callback refreshes once');
+      notify();
+      panel.destroy();
+      assert.equal(frames.size, 0, 'destroy cancels pending work');
+      notify();
+      panel._flushRowControlsRefresh();
+      await macrotask();
+      assert.equal(
+        refreshes,
+        2,
+        'retained notifications after destroy are inert',
+      );
+    } finally {
+      await manager.destroyAll();
+      globalThis.requestAnimationFrame = originalRaf;
+      globalThis.cancelAnimationFrame = originalCancel;
+    }
+  });
+}
+
+test('row info and legends reconcile in place while chips retain focus and order', async (t) => {
+  const container = panelHost(t);
+  const manager = new DataLayerManager({});
+  const layer = makeSlowLayer('wind', { updateInterval: -1 });
+  let controls = {
+    chips: [{ id: 'one', label: 'One' }],
+    legend: [{ label: 'Low', color: '#0000ff', count: 1, blurb: 'Low values' }],
+    info: 'Forecast',
+    infoTitle: 'Source time',
+  };
+  layer.module.getRowControls = () => controls;
+  manager.register(layer.module);
+  try {
+    manager.buildTogglePanel(container);
+    await manager.setEnabled('wind', true);
+    const block = container.querySelector('.data-toggle-controls');
+    const chip = block.children[0];
+    const info = block.children[2];
+    assert.equal(info.className, 'data-toggle-controls-info');
+    assert.equal(info.textContent, 'Forecast');
+    assert.equal(info.title, 'Source time');
+    chip.focus();
+    for (const change of [
+      { label: 'High' },
+      { color: '#ff0000' },
+      { count: 2 },
+      { blurb: 'High values' },
+    ]) {
+      controls = structuredClone(controls);
+      Object.assign(controls.legend[0], change);
+      manager._refreshTogglePanel();
+      assertSameNode(block.children[2], info);
+      assertSameNode(document.activeElement, chip);
+    }
+    const legend = block.children[1];
+    assert.equal(legend.title, 'High values');
+    assert.equal(legend.textContent, 'High 2');
+    assert.equal(legend.firstElementChild.style.background, '#ff0000');
+    controls.info = '<img onerror=alert(1)>';
+    controls.infoTitle = '';
+    controls.chips.push({ id: 'two', label: 'Two' });
+    manager._refreshTogglePanel();
+    assert.deepEqual(
+      [...block.children].map((node) =>
+        [...node.classList].filter((name) => !name.startsWith('ui-')).join(' '),
+      ),
+      [
+        'data-toggle-chip chip-idle',
+        'data-toggle-chip chip-idle',
+        'data-toggle-legend-item',
+        'data-toggle-controls-info',
+      ],
+    );
+    assertSameNode(block.children[0], chip);
+    assertSameNode(block.children[3], info);
+    assert.equal(info.textContent, controls.info);
+    assert.equal(info.title, '');
+    assert.equal(info.children.length, 0, 'info remains plain text');
+    controls = { chips: [], legend: [] };
+    manager._refreshTogglePanel();
+    assert.equal(block.hidden, true);
+    assert.equal(info.hidden, true);
+    assert.equal(block.children.length, 1);
+    assertSameNode(block.children[0], info);
+    controls = {
+      info: 'Restored',
+      legend: [{ label: 'New', color: '#ffffff' }],
+    };
+    manager._refreshTogglePanel();
+    assertSameNode(block.lastElementChild, info);
+    assert.equal(info.hidden, false);
+    assert.equal(info.textContent, 'Restored');
+  } finally {
+    await manager.destroyAll();
+  }
+});

src/data/militaryAwareness.js

@@ -25,12 +25,11 @@ export const collectAircraftProximityWindow =
   layer.collectAircraftProximityWindow;
 export const _getAwarenessNavigationStateForTest =
   layer._getAwarenessNavigationStateForTest;
+export const _getAwarenessPanelRendersForTest =
+  layer._getAwarenessPanelRendersForTest;
 export const canNavigateAwarenessNext = layer.canNavigateAwarenessNext;
 export const historySubjectSnapshot = layer.historySubjectSnapshot;
 export const findCompatibleHistoryIndex = layer.findCompatibleHistoryIndex;
-export const awarenessPanelControlKey = layer.awarenessPanelControlKey;
-export const captureAwarenessPanelFocus = layer.captureAwarenessPanelFocus;
-export const restoreAwarenessPanelFocus = layer.restoreAwarenessPanelFocus;
 export const awarenessResultsAreLive = layer.awarenessResultsAreLive;
 export const awarenessNeedsContinuousRender =
   layer.awarenessNeedsContinuousRender;

src/data/militaryAwareness.test.mjs

@@ -1,26 +1,25 @@
+import { readFileSync } from 'node:fs';
 import { readLayerSource } from '../testSupport/readLayerSource.mjs';
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
 import * as Cesium from 'cesium';
 import militaryAwarenessLayer, {
   _getAwarenessNavigationStateForTest,
+  _getAwarenessPanelRendersForTest,
   awarenessClearMatchesSubject,
   awarenessNeedsContinuousRender,
   awarenessRefreshDecision,
   awarenessRefreshIntervalMs,
   awarenessRefreshRequired,
   awarenessResultsAreLive,
-  awarenessPanelControlKey,
   buildAwarenessContextSnapshot,
   canNavigateAwarenessNext,
   contactsWindowFromSnapshot,
   contextTargetFlyToAllowed,
-  captureAwarenessPanelFocus,
   summarizeInstallationViewport,
   findCompatibleHistoryIndex,
   AWARENESS_QUERY_LIMIT,
   historySubjectSnapshot,
-  restoreAwarenessPanelFocus,
 } from './militaryAwareness.js';
 import flightsLayer, {
   _setTrackedFlightRefreshStateForTest,
@@ -52,6 +51,10 @@ const militaryAwarenessSource = readLayerSource(
   new URL('./militaryAwareness.js', import.meta.url),
   'utf8',
 );
+const awarenessPanelSource = readFileSync(
+  new URL('../ui/views/panels/AwarenessPanel.vue', import.meta.url),
+  'utf8',
+);
 
 const AWARENESS_DEPENDENCIES = [
   'flights',
@@ -98,27 +101,12 @@ function installAwarenessRuntime({
   const listeners = new Map();
   let nextTimer = 1;
   let preRenderListener = null;
-  const createdElements = [];
 
   class FakeElement {
     constructor() {
       this.classList = { contains: () => false };
       this.style = { setProperty() {} };
-      this._hidden = false;
-      // renderResults() writes `hidden = false` on EVERY call, ahead of its
-      // markup diff, so counting these writes observes "was the panel
-      // repaint path entered?" independently of whether the markup changed.
-      this.hiddenWrites = 0;
-      this.innerHTML = '';
-    }
-
-    get hidden() {
-      return this._hidden;
-    }
-
-    set hidden(value) {
-      this._hidden = value;
-      this.hiddenWrites += 1;
+      this.hidden = false;
     }
 
     setAttribute() {}
@@ -213,9 +201,7 @@ function installAwarenessRuntime({
       return null;
     },
     createElement() {
-      const element = new FakeElement();
-      createdElements.push(element);
-      return element;
+      return new FakeElement();
     },
     addEventListener() {},
     removeEventListener() {},
@@ -229,6 +215,10 @@ function installAwarenessRuntime({
   });
   militaryAwarenessLayer.setParams({ passive: true });
   militaryAwarenessLayer.init(viewer);
+  const panelViews = [];
+  const unsubscribePanel = militaryAwarenessLayer.subscribePanel((view) =>
+    panelViews.push(view),
+  );
   militaryAwarenessLayer.enable();
 
   return {
@@ -248,15 +238,16 @@ function installAwarenessRuntime({
       );
       return taken;
     },
-    /** The standalone Context panel element renderResults() paints into. */
+    /** The Contacts panel as the layer publishes it to the view. */
     panel() {
-      return (
-        createdElements.find(
-          (element) => element.id === 'military-awareness-panel',
-        ) || null
-      );
+      return {
+        view: panelViews.at(-1) ?? null,
+        publishes: panelViews.length,
+        renders: _getAwarenessPanelRendersForTest(),
+      };
     },
     restore() {
+      unsubscribePanel();
       militaryAwarenessLayer.destroy();
       globalThis.window = originalWindow;
       globalThis.document = originalDocument;
@@ -264,144 +255,24 @@ function installAwarenessRuntime({
   };
 }
 
-function awarenessControl(dataset, { disabled = false } = {}) {
-  return {
-    dataset,
-    disabled,
-    focusCalls: 0,
-    closest(selector) {
-      if (selector === '[data-awareness-focus-continuation]') {
-        return this.isContinuation ? this : null;
-      }
-      return selector.includes('button') && !this.isContinuation ? this : null;
-    },
-    matches(selector) {
-      return (
-        selector === '[data-awareness-focus-continuation]' &&
-        this.isContinuation
-      );
-    },
-    focus(options) {
-      this.focusCalls += 1;
-      this.focusOptions = options;
-    },
-  };
+/** The count a published Contacts panel shows for one cohort row. */
+function panelCount(runtime, label) {
+  return runtime.panel().view?.rows?.find((row) => row.label === label)?.count;
 }
 
-function awarenessPanel(controls) {
-  const continuation = awarenessControl({});
-  continuation.isContinuation = true;
-  return {
-    controls,
-    continuation,
-    contains(element) {
-      return controls.includes(element) || element === continuation;
-    },
-    querySelectorAll() {
-      return this.controls;
-    },
-    querySelector(selector) {
-      return selector === '[data-awareness-focus-continuation]'
-        ? continuation
-        : null;
-    },
-  };
-}
-
-test('Contacts live repaint restores only stable identity and never retargets another contact', () => {
-  const previous = awarenessControl({ awarenessAction: 'previous' });
-  const focus = awarenessControl({ awarenessAction: 'focus' });
-  const next = awarenessControl({ awarenessAction: 'next' });
-  const alpha = awarenessControl({
-    awarenessLayer: 'flights',
-    awarenessId: 'abc123',
-  });
-  const bravo = awarenessControl({
-    awarenessLayer: 'military',
-    awarenessId: 'def456',
-  });
-  const before = awarenessPanel([previous, focus, next, alpha, bravo]);
-  const alphaSnapshot = captureAwarenessPanelFocus(before, alpha);
-
-  assert.deepEqual(alphaSnapshot, { key: 'target:flights:abc123' });
-  assert.equal(awarenessPanelControlKey(next), 'action:next');
-
-  const retainedAlpha = awarenessControl({
-    awarenessLayer: 'flights',
-    awarenessId: 'abc123',
-  });
-  const retained = awarenessPanel([
-    previous,
-    focus,
-    next,
-    bravo,
-    retainedAlpha,
-  ]);
-  assert.equal(
-    restoreAwarenessPanelFocus(retained, alphaSnapshot),
-    retainedAlpha,
-  );
-  assert.equal(
-    retainedAlpha.focusCalls,
-    1,
-    'identity wins even when live distance reorders rows',
-  );
-  assert.deepEqual(retainedAlpha.focusOptions, { preventScroll: true });
-
-  const forward = awarenessControl({
-    awarenessLayer: 'ais-live-vessels',
-    awarenessId: '789',
-  });
-  const departed = awarenessPanel([previous, focus, next, forward]);
-  assert.equal(
-    restoreAwarenessPanelFocus(departed, alphaSnapshot),
-    departed.continuation,
-  );
-  assert.equal(
-    forward.focusCalls,
-    0,
-    'automatic paging must not transfer focus to another contact',
-  );
-  assert.equal(departed.continuation.focusCalls, 1);
-
-  const bravoSnapshot = captureAwarenessPanelFocus(before, bravo);
-  const noRemainingRow = awarenessPanel([previous, focus, next, alpha]);
-  assert.equal(
-    restoreAwarenessPanelFocus(noRemainingRow, bravoSnapshot),
-    noRemainingRow.continuation,
-  );
-  assert.equal(
-    noRemainingRow.continuation.focusCalls,
-    1,
-    'the end sentinel continues Tab beyond the list',
-  );
-
-  const continuationSnapshot = captureAwarenessPanelFocus(
-    departed,
-    departed.continuation,
-  );
-  assert.deepEqual(continuationSnapshot, { key: 'continuation' });
-  const repaintedAgain = awarenessPanel([previous, focus, next, forward]);
-  assert.equal(
-    restoreAwarenessPanelFocus(repaintedAgain, continuationSnapshot),
-    repaintedAgain.continuation,
-  );
-  assert.equal(
-    repaintedAgain.continuation.focusCalls,
-    1,
-    'later live repaints keep focus on the continuation point until the user tabs onward',
-  );
-});
-
 test('Contacts continuation target is the visible explanatory note', () => {
-  const source = readLayerSource(
-    new URL('./militaryAwareness.js', import.meta.url),
+  assert.match(
+    awarenessPanelSource,
+    /<p class="military-awareness-note" tabindex="-1" data-awareness-focus-continuation>\{\{ view\.note \}\}<\/p>/,
+  );
+  assert.doesNotMatch(
+    awarenessPanelSource,
+    /<span[^>]*data-awareness-focus-continuation/,
   );
   assert.match(
-    source,
-    /<p class="military-awareness-note" tabindex="-1" data-awareness-focus-continuation>\$\{t\('Open-source mapped\/observed context\.[^']*'\)\}<\/p>/,
+    militaryAwarenessSource,
+    /'Open-source mapped\/observed context\./,
   );
-  assert.doesNotMatch(source, /<span[^>]*data-awareness-focus-continuation/);
 });
 
 test('awareness disable settles every owned dependency release before resolving', async () => {
@@ -599,9 +470,9 @@ test('pending mapped installations render as unknown instead of a false zero', a
       'loading is not an observed empty cohort',
     );
     assert.match(installations?.reason || '', /unavailable/i);
-    assert.match(
-      runtime.panel()?.innerHTML || '',
-      /Mapped installations<\/strong><b aria-live="polite">\?<\/b>/,
+    assert.equal(
+      panelCount(runtime, 'Mapped installations'),
+      '?',
       'the operator sees ? rather than an all-clear 0 while installations load',
     );
   } finally {
@@ -741,15 +612,10 @@ test('a vessel feed still connecting after the lifecycle settles reads as unknow
       'a source that has never answered has told us nothing — 0 would be a fabricated all-clear',
     );
     assert.match(vessels?.reason || '', /unavailable/i);
-    assert.match(
-      runtime.panel()?.innerHTML || '',
-      /AIS vessels<\/strong><b aria-live="polite">\?<\/b>/,
-      'the panel prints ? for the whole settled-but-connecting window',
-    );
-    assert.doesNotMatch(
-      runtime.panel()?.innerHTML || '',
-      /AIS vessels<\/strong><b aria-live="polite">0<\/b>/,
-      'the panel must never print an all-clear 0 before the feed has answered once',
+    assert.equal(
+      panelCount(runtime, 'AIS vessels'),
+      '?',
+      'the panel prints ? for the whole settled-but-connecting window, never an all-clear 0',
     );
   } finally {
     restoreCollections();
@@ -789,9 +655,9 @@ test('a settled vessel feed reporting a real empty viewport recovers to 0', asyn
       0,
       'an answered empty viewport is a real observation',
     );
-    assert.match(
-      runtime.panel()?.innerHTML || '',
-      /AIS vessels<\/strong><b aria-live="polite">0<\/b>/,
+    assert.equal(
+      panelCount(runtime, 'AIS vessels'),
+      '0',
       'the operator sees the real count once the feed answers',
     );
   } finally {
@@ -1254,17 +1120,23 @@ test('a cached Context subject re-reads its label when enrichment lands after se
       id,
     );
     const panel = runtime.panel();
-    assert.ok(panel, 'the Context panel must exist');
-    assert.match(panel.innerHTML, /ae1fa4/, 'panel starts on the hex');
+    assert.equal(panel.view?.kind, 'results', 'the Context panel must exist');
+    assert.match(panel.view.subject, /ae1fa4/, 'panel starts on the hex');
 
     // A refresh that changes NOTHING must not repaint (no per-refresh storm).
-    const settledWrites = panel.hiddenWrites;
+    const settledRenders = runtime.panel().renders;
+    const settledPublishes = runtime.panel().publishes;
     await militaryAwarenessLayer.update();
     assert.equal(
-      panel.hiddenWrites,
-      settledWrites,
+      runtime.panel().renders,
+      settledRenders,
       'an unchanged label must not trigger a panel repaint',
     );
+    assert.equal(
+      runtime.panel().publishes,
+      settledPublishes,
+      'an unchanged refresh publishes no new panel, results or standby',
+    );
 
     // Enrichment answers. The contact has NOT moved and no source revision
     // changed, so the label is the only thing making this render-worthy.
@@ -1283,17 +1155,18 @@ test('a cached Context subject re-reads its label when enrichment lands after se
       'subject identity must stay the ICAO hex',
     );
     // The RENDERED panel is the surface the operator actually reads.
+    const repainted = runtime.panel();
     assert.ok(
-      panel.hiddenWrites > settledWrites,
+      repainted.publishes > settledPublishes,
       'a changed label must repaint the standalone Context panel',
     );
     assert.match(
-      panel.innerHTML,
+      repainted.view.subject,
       /N123AB/,
       'the rendered Context panel must show the registration without a position change',
     );
     assert.doesNotMatch(
-      panel.innerHTML,
+      JSON.stringify(repainted.view),
       /ae1fa4/,
       'the hex must be gone from the panel',
     );
@@ -2240,9 +2113,10 @@ test('expanded Context results omit the redundant status heading', () => {
     militaryAwarenessSource,
     /GLOBAL CONTEXT <span>CONTEXT ONLY<\/span>/,
   );
-  assert.match(militaryAwarenessSource, /military-awareness-subject/);
+  assert.doesNotMatch(awarenessPanelSource, /military-awareness-heading/);
+  assert.match(awarenessPanelSource, /military-awareness-subject/);
   assert.match(militaryAwarenessSource, /FLIGHT \/ VESSEL WINDOW/);
-  assert.match(militaryAwarenessSource, /military-awareness-controls/);
+  assert.match(awarenessPanelSource, /military-awareness-controls/);
 });
 
 test('Context entry tracks a nearer civilian aircraft over a farther military aircraft', async () => {
@@ -4229,7 +4103,7 @@ test('a moving camera refreshes Contacts more than once inside one parked interv
   }
 });
 
-test('a selected installation card keeps every member name and escapes source text', () => {
+test('a selected installation card keeps every member name as text', () => {
   const runtime = installAwarenessRuntime();
   const restores = [];
   try {
@@ -4252,16 +4126,15 @@ test('a selected installation card keeps every member name and escapes source te
       },
     });
     militaryAwarenessLayer.update();
-    const html = runtime.panel().innerHTML;
-    assert.match(html, /Named areas \(4\)/);
-    for (const name of [
+    // The view renders names as text; ui/awarenessPanel.test.mjs covers it.
+    const names = runtime.panel().view?.subjectNames;
+    assert.equal(names?.summary, 'Named areas (4)');
+    assert.deepEqual(names?.names, [
       'Area one',
       'Area two',
       'Area three',
-      '&lt;Area four&gt;',
-    ])
-      assert.ok(html.includes(name));
-    assert.ok(!html.includes('<Area four>'));
+      '<Area four>',
+    ]);
   } finally {
     restores.reverse().forEach((restore) => restore());
     runtime.restore();

src/data/rocketLaunches.js

@@ -39,10 +39,6 @@ export const missionRosterEntries = layer.missionRosterEntries;
 export const missionHoverPreviewRange = layer.missionHoverPreviewRange;
 export const createMissionRosterPreviewOwnership =
   layer.createMissionRosterPreviewOwnership;
-export const bindMissionRosterItemKeyboardPreview =
-  layer.bindMissionRosterItemKeyboardPreview;
-export const captureMissionRosterFocus = layer.captureMissionRosterFocus;
-export const restoreMissionRosterFocus = layer.restoreMissionRosterFocus;
 export const resolveMissionRosterPreviewLaunch =
   layer.resolveMissionRosterPreviewLaunch;
 export const formatMissionEventTime = layer.formatMissionEventTime;

src/data/rocketLaunches.test.mjs

@@ -7,8 +7,6 @@ import rocketLaunchesLayer, {
   _setRocketMissionOverlayHostForTest,
   _setSelectedRocketMissionForTest,
   approximateOrbitPath,
-  bindMissionRosterItemKeyboardPreview,
-  captureMissionRosterFocus,
   buildMissionPaths,
   cameraHeadingForPath,
   compactLaunchSiteName,
@@ -46,7 +44,6 @@ import rocketLaunchesLayer, {
   replayStartAfterPause,
   replayVehicleScreenRotation,
   resolveMissionRosterPreviewLaunch,
-  restoreMissionRosterFocus,
   releaseAircraftTracking,
   ROCKET_MISSION_AMBIENT_OVERLAY_COHORT_LIMIT,
   ROCKET_MISSION_AMBIENT_OVERLAY_COLLISION_CAPACITY,
@@ -514,42 +511,6 @@ test('keyboard focus previews roster missions and clears without selecting them'
   ]);
 });
 
-test('rendered mission row focus and blur drive the preview ownership controller', () => {
-  const listeners = new Map();
-  const calls = [];
-  const button = {
-    addEventListener(type, listener) {
-      listeners.set(type, listener);
-    },
-  };
-  const nextButton = {
-    dataset: { missionRosterIndex: '4' },
-    closest: () => nextButton,
-  };
-  const roster = { contains: (candidate) => candidate === nextButton };
-  const ownership = {
-    pointerEnter: (index) => calls.push(['pointer-enter', index]),
-    pointerLeave: () => calls.push(['pointer-leave']),
-    focus: (index) => calls.push(['focus', index]),
-    blur: (index) => calls.push(['blur', index]),
-  };
-
-  bindMissionRosterItemKeyboardPreview(button, 2, ownership, roster);
-  listeners.get('mouseenter')();
-  listeners.get('mouseleave')();
-  listeners.get('focus')();
-  listeners.get('blur')({ relatedTarget: nextButton });
-  listeners.get('blur')({ relatedTarget: null });
-
-  assert.deepEqual(calls, [
-    ['pointer-enter', 2],
-    ['pointer-leave'],
-    ['focus', 2],
-    ['blur', 4],
-    ['blur', null],
-  ]);
-});
-
 test('leaving a hovered row for an internal roster gap restores keyboard preview', () => {
   const calls = [];
   const ownership = createMissionRosterPreviewOwnership({
@@ -568,50 +529,6 @@ test('leaving a hovered row for an internal roster gap restores keyboard preview
   ]);
 });
 
-test('mission roster refresh restores keyboard focus by stable mission identity after reorder', () => {
-  const focused = {
-    dataset: { missionRosterId: 'mission-b' },
-    closest: () => focused,
-  };
-  let restored = false;
-  const replacement = {
-    dataset: { missionRosterId: 'mission-b' },
-    focus: ({ preventScroll }) => { restored = preventScroll; },
-  };
-  const list = {
-    contains: (candidate) => candidate === focused,
-    querySelectorAll: () => [
-      { dataset: { missionRosterId: 'mission-c' } },
-      replacement,
-      { dataset: { missionRosterId: 'mission-a' } },
-    ],
-  };
-
-  const snapshot = captureMissionRosterFocus(list, focused);
-  assert.deepEqual(snapshot, { launchId: 'mission-b' });
-  assert.equal(restoreMissionRosterFocus(list, snapshot, null), 'restored');
-  assert.equal(restored, true);
-});
-
-test('mission roster refresh continues after the list when the focused mission departed', () => {
-  const focused = {
-    dataset: { missionRosterId: 'departed' },
-    closest: () => focused,
-  };
-  let continuationFocused = false;
-  const list = {
-    contains: (candidate) => candidate === focused,
-    querySelectorAll: () => [{ dataset: { missionRosterId: 'remaining' } }],
-  };
-  const continuation = {
-    focus: ({ preventScroll }) => { continuationFocused = preventScroll; },
-  };
-
-  const snapshot = captureMissionRosterFocus(list, focused);
-  assert.equal(restoreMissionRosterFocus(list, snapshot, continuation), 'continued');
-  assert.equal(continuationFocused, true);
-});
-
 test('pending mission preview resolves the current refreshed record by identity', () => {
   const stale = { id: 'mission-a', name: 'Stale' };
   const current = { id: 'mission-a', name: 'Current' };

src/firstRunCopy.js

@@ -0,0 +1,32 @@
+// The first-run launcher's owner-chosen copy, shared by the launcher and the
+// welcome view that renders it.
+import { msg, t } from './i18n/index.js';
+
+/**
+ * Owner-selectable name for the fires/quakes mission. Flip this ONE constant to
+ * re-label the tile; the alternates are pre-written so the choice is a taste
+ * call at review time, not an edit.
+ * @type {'ENVIRONMENTAL'|'EARTH_WATCH'|'ACTIVE_EVENTS'}
+ */
+export const ENVIRONMENTAL_LABEL_CHOICE = 'ENVIRONMENTAL';
+
+const ENVIRONMENTAL_LABEL_KEYS = Object.freeze({
+  ENVIRONMENTAL: msg('ENVIRONMENTAL'),
+  EARTH_WATCH: msg('EARTH WATCH'),
+  ACTIVE_EVENTS: msg('ACTIVE EVENTS'),
+});
+
+/**
+ * @param {string} [choice]
+ * @returns {{title: string}} The label set the constant above selects.
+ */
+export function environmentalLabel(choice = ENVIRONMENTAL_LABEL_CHOICE) {
+  const key =
+    ENVIRONMENTAL_LABEL_KEYS[choice] || ENVIRONMENTAL_LABEL_KEYS.ENVIRONMENTAL;
+  return { title: t(key) };
+}
+
+/** The status line between missions. */
+export const FIRST_RUN_TIP = msg(
+  'Tip: the GEV MIC button in the dock lets you talk to the map.',
+);

src/firstRunExperience.js

@@ -23,36 +23,24 @@ import { createSurfaceKeyboard } from './ui/surfaceKeyboard.js';
 
 import { t, msg } from './i18n/index.js';
 import { EXCLUSIVE_SURFACE_CLASSES } from './exclusiveSurfaces.js';
+import { FIRST_RUN_TIP, environmentalLabel } from './firstRunCopy.js';
+import { useFirstRunStore } from './ui/stores/firstRun.js';
+import { applicationPinia } from './ui/vueRuntime.js';
+
+export {
+  ENVIRONMENTAL_LABEL_CHOICE,
+  FIRST_RUN_TIP,
+  environmentalLabel,
+} from './firstRunCopy.js';
+
+/** Launchers already wired, so a second call is a no-op. */
+const initializedLaunchers = new WeakSet();
 
 /** Durable suppression. Written ONLY by the "Don't show this again" checkbox. */
 export const FIRST_RUN_STORAGE_KEY = 'gev:first-run-mission:v1';
 /** Per-session dismissal. Written by every close path; scoped to sessionStorage. */
 export const FIRST_RUN_SESSION_KEY = 'gev:first-run-mission-session:v1';
 
-/**
- * Owner-selectable name for the fires/quakes mission. Flip this ONE constant to
- * re-label the tile; the alternates are pre-written so the choice is a taste
- * call at review time, not an edit.
- * @type {'ENVIRONMENTAL'|'EARTH_WATCH'|'ACTIVE_EVENTS'}
- */
-export const ENVIRONMENTAL_LABEL_CHOICE = 'ENVIRONMENTAL';
-
-const ENVIRONMENTAL_LABEL_KEYS = Object.freeze({
-  ENVIRONMENTAL: msg('ENVIRONMENTAL'),
-  EARTH_WATCH: msg('EARTH WATCH'),
-  ACTIVE_EVENTS: msg('ACTIVE EVENTS'),
-});
-
-/**
- * @param {string} [choice]
- * @returns {{title: string}} The label set the constant above selects.
- */
-export function environmentalLabel(choice = ENVIRONMENTAL_LABEL_CHOICE) {
-  const key =
-    ENVIRONMENTAL_LABEL_KEYS[choice] || ENVIRONMENTAL_LABEL_KEYS.ENVIRONMENTAL;
-  return { title: t(key) };
-}
-
 /*
  * MISSION → APP STATE, AND WHAT IT IS ALLOWED TO PERSIST
  * ─────────────────────────────────────────────────────────────────────────────
@@ -328,6 +316,7 @@ export function exclusiveSurfaceActive(documentRef = globalThis.document) {
  * @param {Storage} [input.storage]
  * @param {Storage} [input.sessionStorageRef]
  * @param {Location} [input.location]
+ * @param {object} [input.store] The welcome view's `gev-first-run` store.
  * @returns {null|{dismiss: Function}}
  */
 export function initFirstRunExperience({
@@ -337,10 +326,42 @@ export function initFirstRunExperience({
   storage,
   sessionStorageRef,
   location = globalThis.location,
+  store = useFirstRunStore(applicationPinia()),
 } = {}) {
+  // The welcome view renders the card; it is read here for its geometry, the
+  // keyboard and focus.
   const root = documentRef?.getElementById?.('first-run-launcher');
-  if (!root || root.dataset.initialized === 'true') return null;
-  root.dataset.initialized = 'true';
+  if (!root || initializedLaunchers.has(root)) return null;
+  initializedLaunchers.add(root);
+
+  const view = {
+    removed: false,
+    shown: false,
+    visible: false,
+    closing: false,
+    state: null,
+    busy: null,
+    status: t(FIRST_RUN_TIP),
+    // The tile name is owner-switchable from one constant, so paint it from
+    // the module rather than trusting the markup to match.
+    environmentalTitle: environmentalLabel().title,
+    environmentalSub: t(
+      'Live earthquakes and active fires, from USGS and NASA',
+    ),
+    description: t(
+      'It feels like a forbidden cockpit—then you realize the sources are public and the data is real.',
+    ),
+    scrollable: null,
+  };
+  let signature = '';
+  const present = (patch) => {
+    Object.assign(view, patch);
+    // A resize that changes nothing re-renders nothing.
+    const next = JSON.stringify(view);
+    if (next === signature) return;
+    signature = next;
+    store.publish({ ...view });
+  };
 
   if (
     !shouldShowFirstRun({
@@ -350,35 +371,14 @@ export function initFirstRunExperience({
       location,
     })
   ) {
-    root.remove();
+    present({ removed: true });
     return null;
   }
+  present({});
 
-  // The tile name is owner-switchable from one constant, so paint it from the
-  // module rather than trusting the markup to match. The description and the
-  // tile subcopy are data-i18n-runtime in welcome.html and translated here.
-  const environmentalTitle = root.querySelector(
-    '[data-first-run-environmental-title]',
-  );
-  if (environmentalTitle)
-    environmentalTitle.textContent = environmentalLabel().title;
-  const environmentalSub = root.querySelector(
-    '[data-first-run-environmental-title] + small',
-  );
-  if (environmentalSub)
-    environmentalSub.textContent = t(
-      'Live earthquakes and active fires, from USGS and NASA',
-    );
-  const description = root.querySelector('#first-run-description');
-  if (description)
-    description.textContent = t(
-      'It feels like a forbidden cockpit—then you realize the sources are public and the data is real.',
-    );
-
-  const status = root.querySelector('[data-first-run-status]');
-  const suppressBox = root.querySelector('[data-first-run-suppress]');
-  const buttons = [...root.querySelectorAll('[data-first-run-choice]')];
-  const defaultStatus = status?.textContent || '';
+  const defaultStatus = view.status;
+  // An error or refused save stays on the status line until the next choice.
+  let stickyStatus = false;
   let busy = false;
   let closing = false;
 
@@ -424,7 +424,7 @@ export function initFirstRunExperience({
    */
   const isTopmost = () =>
     root.isConnected &&
-    root.classList.contains('visible') &&
+    view.visible &&
     root.getClientRects().length > 0 &&
     !coveredByOverlay();
 
@@ -432,11 +432,13 @@ export function initFirstRunExperience({
     if (closing) return;
     closing = true;
     rememberFirstRunSessionDismissed(sessionStorageRef);
-    root.classList.remove('visible');
-    root.setAttribute('aria-hidden', 'true');
+    present({ visible: false, closing: true });
     globalThis.removeEventListener?.('resize', onViewportResize);
     surfaceObserver?.disconnect();
-    const remove = () => root.remove();
+    const remove = () => {
+      store.connect(null);
+      present({ removed: true });
+    };
     root.addEventListener('transitionend', remove, { once: true });
     // `transitionend` never fires under prefers-reduced-motion (no transition),
     // so a bounded fallback is what actually removes the node there.
@@ -448,26 +450,20 @@ export function initFirstRunExperience({
 
   const setBusy = (next, choice = '') => {
     busy = next;
-    root.dataset.state = next ? 'loading' : 'ready';
-    root.setAttribute('aria-busy', String(next));
-    // aria-disabled, not `disabled`: disabling the focused button drops focus to
-    // <body> mid-flight and strands a keyboard visitor outside the launcher.
-    for (const button of buttons)
-      button.setAttribute('aria-disabled', String(next));
-    if (!status) return;
+    // `busy` is also aria-disabled on the choices, not `disabled`: disabling
+    // the focused button drops focus to <body> mid-flight and strands a
+    // keyboard visitor outside the launcher.
+    const patch = { state: next ? 'loading' : 'ready', busy: String(next) };
     if (next)
-      status.textContent = t(
-        FIRST_RUN_MISSIONS[choice]?.busyKey || msg('Working…'),
-      );
-    else if (status.dataset.sticky !== 'true')
-      status.textContent = defaultStatus;
+      patch.status = t(FIRST_RUN_MISSIONS[choice]?.busyKey || msg('Working…'));
+    else if (!stickyStatus) patch.status = defaultStatus;
+    present(patch);
   };
 
-  const onChoice = async (event) => {
+  const onChoice = async (choice) => {
     if (busy || closing) return;
-    const choice = event.currentTarget?.dataset?.firstRunChoice;
     if (!FIRST_RUN_MISSIONS[choice]) return;
-    if (status) delete status.dataset.sticky;
+    stickyStatus = false;
     setBusy(true, choice);
     let outcome = null;
     try {
@@ -506,30 +502,31 @@ export function initFirstRunExperience({
       : outcome?.result?.failedLayerIds;
     const detail =
       Array.isArray(failed) && failed.length ? ` (${failed.join(', ')})` : '';
-    if (status) {
-      status.dataset.sticky = 'true';
-      status.textContent = t(
+    stickyStatus = true;
+    present({
+      status: t(
         'Could not open that mission{detail}. Retry or explore manually.',
         { detail },
-      );
-    }
+      ),
+    });
     setBusy(false);
   };
 
-  const onSuppressChange = (event) => {
-    const box = event.currentTarget;
-    const wanted = Boolean(box?.checked);
-    if (setFirstRunSuppressed(wanted, storage)) return;
+  /** @returns {boolean} Whether the tick may stay as the visitor set it. */
+  const onSuppressChange = (wanted) => {
+    if (setFirstRunSuppressed(Boolean(wanted), storage)) return true;
     // The write is best-effort; the TICK is not. A box left checked after a
     // refused write tells the visitor "never again" about a launcher that is
-    // already guaranteed to come back next session. Put the box back where the
-    // truth is, and say why rather than leaving a control that undoes itself.
-    if (box) box.checked = !wanted;
-    if (!status) return;
-    status.dataset.sticky = 'true';
-    status.textContent = t(
-      'This browser is blocking storage, so that could not be saved.',
-    );
+    // already guaranteed to come back next session. The view puts the box back
+    // where the truth is; say why rather than leaving a control that undoes
+    // itself.
+    stickyStatus = true;
+    present({
+      status: t(
+        'This browser is blocking storage, so that could not be saved.',
+      ),
+    });
+    return false;
   };
 
   const keyboard = createSurfaceKeyboard({
@@ -542,12 +539,12 @@ export function initFirstRunExperience({
     fallbackFocus: () => documentRef.body,
   });
 
-  for (const button of buttons) button.addEventListener('click', onChoice);
-  // The same dismissal as ESC, for screens without a keyboard.
-  root
-    .querySelector('[data-first-run-dismiss]')
-    ?.addEventListener('click', () => dismiss());
-  suppressBox?.addEventListener('change', onSuppressChange);
+  store.connect({
+    choose: (choice) => void onChoice(choice),
+    // The same dismissal as ESC, for screens without a keyboard.
+    dismiss: () => dismiss(),
+    suppress: onSuppressChange,
+  });
   // Capture phase: the app binds its own global hotkeys (including bare letters
   // that cycle detection and styles), and the launcher owns the keyboard first.
   keyboard.activate();
@@ -559,19 +556,21 @@ export function initFirstRunExperience({
   const syncScrollAffordance = () => {
     if (!choiceList) return;
     const overflows = choiceList.scrollHeight > choiceList.clientHeight + 1;
-    choiceList.dataset.scrollable = String(overflows);
+    present({ scrollable: String(overflows) });
   };
 
   let revealed = false;
   const reveal = () => {
     if (revealed || closing) return;
     revealed = true;
-    root.hidden = false;
+    present({ shown: true });
     globalThis.requestAnimationFrame?.(() => {
       if (closing) return;
-      root.classList.add('visible');
+      present({ visible: true });
       syncScrollAffordance();
-      buttons[0]?.focus?.({ preventScroll: true });
+      root
+        .querySelector('[data-first-run-choice]')
+        ?.focus?.({ preventScroll: true });
     });
   };
 
@@ -659,7 +658,8 @@ export function initFirstRunExperience({
     keyboard.destroy();
     globalThis.removeEventListener?.('resize', onViewportResize);
     surfaceObserver?.disconnect();
-    root.remove();
+    store.connect(null);
+    present({ visible: false, removed: true });
   };
   return { dismiss, isTopmost, destroy };
 }

src/firstRunExperience.test.mjs

@@ -1,4 +1,4 @@
-import { expandApplicationHtml } from '../build/application-html.js';
+import { renderApplicationHtml } from './testSupport/applicationHtml.mjs';
 import { readStylesheet } from './testSupport/readStylesheet.mjs';
 import { GEV_REALTIME_TOOLS } from '../server/providers/openai/tools.js';
 import test from 'node:test';
@@ -413,11 +413,6 @@ test('one ESC does one thing — a Cockpit utility disclosure stops later docume
 });
 
 test('a refused write takes the tick back instead of promising "never again"', () => {
-  const module = fs.readFileSync(
-    new URL('./firstRunExperience.js', import.meta.url),
-    'utf8',
-  );
-
   // The write stays best-effort; the OUTCOME is now reported, because a box left
   // ticked after a refused write tells the visitor the launcher is gone for good
   // while it is already guaranteed to return next session.
@@ -442,20 +437,7 @@ test('a refused write takes the tick back instead of promising "never again"', (
   assert.equal(working.read(), 'suppressed');
   assert.equal(setFirstRunSuppressed(false, working), true);
   assert.equal(working.read(), null);
-
-  const handler = module.slice(
-    module.indexOf('const onSuppressChange = (event) => {'),
-    module.indexOf('  const keyboard = createSurfaceKeyboard({'),
-  );
-  assert.match(
-    handler,
-    /if \(setFirstRunSuppressed\(wanted, storage\)\) return;/,
-  );
-  assert.match(
-    handler,
-    /box\.checked = !wanted;/,
-    'a refused write must revert the tick',
-  );
+  // The rendered checkbox reverting is firstRunLauncherView.test.mjs.
 });
 
 test('a surface class that never clears is an ACCEPTED no-show, not a timer', () => {
@@ -506,16 +488,8 @@ test('the scroll fade only appears when the list really overflows', () => {
   );
   const css = readStylesheet(new URL('../style.css', import.meta.url));
   // A fade on a card where all five tiles fit promises a sixth mission that does
-  // not exist, which is worse than no affordance at all.
-  assert.match(
-    module,
-    /const overflows = choiceList\.scrollHeight > choiceList\.clientHeight \+ 1;/,
-  );
-  assert.match(
-    module,
-    /choiceList\.dataset\.scrollable = String\(overflows\);/,
-  );
-  // ...and the CSS must be gated on that flag, never on the media query alone.
+  // not exist, which is worse than no affordance at all. The measured flag is
+  // firstRunLauncherView.test.mjs; the CSS must be gated on that flag, never on the media query alone.
   assert.match(
     css,
     /\.first-run-choices\[data-scrollable='true'\] \{[\s\S]*?mask-image/,
@@ -797,8 +771,8 @@ test('the decision table is written down where the next editor will read it', ()
 
 // ── Markup, startup ordering, accessibility ─────────────────────────────────
 
-test('markup, startup ordering and accessibility remain pinned', () => {
-  const html = expandApplicationHtml(
+test('markup, startup ordering and accessibility remain pinned', async () => {
+  const html = await renderApplicationHtml(
     fs.readFileSync(new URL('../index.html', import.meta.url), 'utf8'),
   );
   const startup = fs.readFileSync(
@@ -816,7 +790,7 @@ test('markup, startup ordering and accessibility remain pinned', () => {
     html,
     /data-first-run-status[^>]*role="status"[^>]*aria-live="polite"/,
   );
-  assert.match(html, /<input type="checkbox" data-first-run-suppress \/>/);
+  assert.match(html, /<input type="checkbox" data-first-run-suppress\s*\/?>/);
   assert.match(html, /<strong data-first-run-environmental-title>/);
   // Subcopy must name BOTH feeds the tile turns on — a tile that promised only
   // half of what it does is the defect this replaced. Only the VISIBLE <small>
@@ -840,7 +814,7 @@ test('markup, startup ordering and accessibility remain pinned', () => {
   // passing edit — changing it needs the owner, not a nicer-sounding rewrite.
   assert.ok(
     html.includes(
-      '<p id="first-run-description" data-i18n-runtime>It feels like a forbidden cockpit' +
+      '<p id="first-run-description">It feels like a forbidden cockpit' +
         '—then you realize the sources are public and the data is real.</p>',
     ),
     'the owner-authored first-run line must ship exactly as written',
@@ -915,14 +889,10 @@ test('markup, startup ordering and accessibility remain pinned', () => {
   assert.match(choicesBlock, /overflow-y: auto;/);
 });
 
-test('the card closes without a keyboard: the ESC hint is a button, kept on phones', () => {
-  const html = expandApplicationHtml(
+test('the card closes without a keyboard: the ESC hint is a button, kept on phones', async () => {
+  const html = await renderApplicationHtml(
     fs.readFileSync(new URL('../index.html', import.meta.url), 'utf8'),
   );
-  const module = fs.readFileSync(
-    new URL('./firstRunExperience.js', import.meta.url),
-    'utf8',
-  );
   // The whole stylesheet, so a hide rule added in any other file is caught too.
   const css = readStylesheet(new URL('../style.css', import.meta.url));
   const footer = html.slice(
@@ -933,14 +903,10 @@ test('the card closes without a keyboard: the ESC hint is a button, kept on phon
     footer,
     /<button type="button" class="first-run-dismiss" data-first-run-dismiss>/,
   );
-  assert.match(footer, /data-i18n>ESC to dismiss</);
-  assert.match(footer, /data-i18n>DISMISS</);
+  assert.match(footer, />ESC to dismiss</);
+  assert.match(footer, />DISMISS</);
   // It closes the way ESC does, through the one dismiss path, so the session
-  // flag and focus handling are the same.
-  assert.match(
-    module,
-    /querySelector\('\[data-first-run-dismiss\]'\)\s*\?\.addEventListener\('click', \(\) => dismiss\(\)\)/,
-  );
+  // flag and focus handling are the same: firstRunLauncherView.test.mjs.
   // Phones used to hide the hint, leaving no way out but picking a mission.
   assert.doesNotMatch(css, /first-run-footer > span:last-child/);
   assert.doesNotMatch(css, /\.first-run-dismiss\s*\{[^}]*display:\s*none/);
@@ -963,12 +929,9 @@ test('the launcher keeps focus, restores it, and never disables the focused butt
     'utf8',
   );
   // aria-disabled, never the `disabled` property: disabling a focused button
-  // drops the keyboard to <body> and strands the visitor outside the launcher.
-  assert.match(
-    module,
-    /button\.setAttribute\('aria-disabled', String\(next\)\)/,
-  );
-  assert.doesNotMatch(module, /button\.disabled = /);
+  // drops the keyboard to <body> and strands the visitor outside the launcher
+  // (firstRunLauncherView.test.mjs renders it).
+  assert.doesNotMatch(module, /\.disabled = /);
   // Tab is confined to the launcher, and ESC always releases it.
   const keyboard = fs.readFileSync(
     new URL('./ui/surfaceKeyboard.js', import.meta.url),

src/firstRunLauncherView.test.mjs

@@ -0,0 +1,195 @@
+// src/firstRunLauncherView.test.mjs — the welcome view renders the mission
+// launcher initFirstRunExperience presents, and its buttons and checkbox call
+// the launcher's controls.
+import './testSupport/registerDom.mjs';
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { createApp, nextTick } from 'vue';
+import { createPinia } from 'pinia';
+import {
+  FIRST_RUN_SESSION_KEY,
+  FIRST_RUN_STORAGE_KEY,
+  initFirstRunExperience,
+} from './firstRunExperience.js';
+import { useFirstRunStore } from './ui/stores/firstRun.js';
+import WelcomeView from './ui/views/WelcomeView.vue';
+
+function memoryStorage(key, { refuse = false } = {}) {
+  const values = new Map();
+  return {
+    getItem: (name) => values.get(name) ?? null,
+    setItem: (name, next) => {
+      if (refuse) throw new Error('blocked');
+      values.set(name, next);
+    },
+    removeItem: (name) => {
+      if (refuse) throw new Error('blocked');
+      values.delete(name);
+    },
+    read: () => values.get(key) ?? null,
+  };
+}
+
+/** The welcome view and an initialized launcher, revealed and painted. */
+async function launch(t, { styleManager = {}, refuse = false } = {}) {
+  document.body.replaceChildren();
+  // Where focus was before the launcher opened.
+  const opener = document.body.appendChild(document.createElement('button'));
+  opener.focus();
+  const frames = [];
+  const previousFrame = globalThis.requestAnimationFrame;
+  globalThis.requestAnimationFrame = (callback) => frames.push(callback);
+  const pinia = createPinia();
+  const store = useFirstRunStore(pinia);
+  const app = createApp(WelcomeView).use(pinia);
+  app.mount(document.body.appendChild(document.createElement('div')));
+  const storage = memoryStorage(FIRST_RUN_STORAGE_KEY, { refuse });
+  const sessionStorageRef = memoryStorage(FIRST_RUN_SESSION_KEY);
+  const launcher = initFirstRunExperience({
+    styleManager,
+    dataManager: { setEnabled: async () => true },
+    documentRef: document,
+    storage,
+    sessionStorageRef,
+    location: { search: '' },
+    store,
+  });
+  t.after(() => {
+    launcher?.destroy();
+    app.unmount();
+    globalThis.requestAnimationFrame = previousFrame;
+  });
+  await nextTick();
+  const root = document.getElementById('first-run-launcher');
+  // The list overflows its box until a test resizes it.
+  const list = root.querySelector('.first-run-choices');
+  const box = { scrollHeight: 400, clientHeight: 200 };
+  Object.defineProperty(list, 'scrollHeight', { get: () => box.scrollHeight });
+  Object.defineProperty(list, 'clientHeight', { get: () => box.clientHeight });
+  for (const frame of frames.splice(0)) frame();
+  await nextTick();
+  return { launcher, root, list, box, opener, storage, sessionStorageRef };
+}
+
+test('the card is hidden until initialized, then revealed with its copy', async (t) => {
+  document.body.replaceChildren();
+  const pinia = createPinia();
+  const app = createApp(WelcomeView).use(pinia);
+  app.mount(document.body.appendChild(document.createElement('div')));
+  const hidden = document.getElementById('first-run-launcher');
+  assert.equal(hidden.hidden, true);
+  assert.equal(hidden.className, '');
+  app.unmount();
+
+  const { root, list } = await launch(t);
+  assert.equal(root.hidden, false);
+  assert.equal(root.classList.contains('visible'), true);
+  assert.equal(root.hasAttribute('aria-hidden'), false);
+  assert.equal(list.dataset.scrollable, 'true');
+  assert.equal(
+    root.querySelector('[data-first-run-status]').textContent,
+    'Tip: the GEV MIC button in the dock lets you talk to the map.',
+  );
+  assert.equal(
+    root.querySelector('[data-first-run-environmental-title]').textContent,
+    'ENVIRONMENTAL',
+  );
+  assert.ok(
+    document.activeElement === root.querySelector('[data-first-run-choice]'),
+    'the first mission has focus',
+  );
+});
+
+test('a busy mission marks the choices aria-disabled, never disabled', async (t) => {
+  let finish;
+  const { root } = await launch(t, {
+    styleManager: {
+      setContextMode: () => new Promise((resolve) => (finish = resolve)),
+    },
+  });
+  const contacts = root.querySelector('[data-first-run-choice="contacts"]');
+  contacts.focus();
+  contacts.click();
+  await nextTick();
+  assert.equal(root.dataset.state, 'loading');
+  assert.equal(root.getAttribute('aria-busy'), 'true');
+  for (const button of root.querySelectorAll('[data-first-run-choice]')) {
+    assert.equal(button.getAttribute('aria-disabled'), 'true');
+    assert.equal(button.disabled, false);
+  }
+  assert.ok(document.activeElement === contacts, 'focus stays on the choice');
+  assert.equal(
+    root.querySelector('[data-first-run-status]').textContent,
+    'Starting live contacts…',
+  );
+  // A failed mission says so and stays on the card.
+  finish({ ok: false });
+  await new Promise((resolve) => setTimeout(resolve));
+  await nextTick();
+  assert.equal(root.dataset.state, 'ready');
+  assert.equal(contacts.getAttribute('aria-disabled'), 'false');
+  assert.match(
+    root.querySelector('[data-first-run-status]').textContent,
+    /^Could not open that mission/,
+  );
+});
+
+test('a refused write takes the tick back and says why', async (t) => {
+  const { root, storage } = await launch(t, { refuse: true });
+  const box = root.querySelector('[data-first-run-suppress]');
+  box.click();
+  await nextTick();
+  assert.equal(box.checked, false, 'the tick is taken back');
+  assert.equal(storage.read(), null);
+  assert.equal(
+    root.querySelector('[data-first-run-status]').textContent,
+    'This browser is blocking storage, so that could not be saved.',
+  );
+});
+
+test('a saved tick stays ticked', async (t) => {
+  const { root, storage } = await launch(t);
+  const box = root.querySelector('[data-first-run-suppress]');
+  box.click();
+  await nextTick();
+  assert.equal(box.checked, true);
+  assert.equal(storage.read(), 'suppressed');
+});
+
+test('the DISMISS button closes the card the way ESC does', async (t) => {
+  const { root, sessionStorageRef } = await launch(t);
+  root.querySelector('[data-first-run-dismiss]').click();
+  await nextTick();
+  assert.equal(root.classList.contains('visible'), false);
+  assert.equal(root.getAttribute('aria-hidden'), 'true');
+  assert.notEqual(sessionStorageRef.read(), null, 'dismissed for the session');
+  root.dispatchEvent(new Event('transitionend'));
+  await nextTick();
+  assert.equal(document.getElementById('first-run-launcher'), null);
+});
+
+test('the scroll fade clears when the tiles fit after a resize', async (t) => {
+  const { list, box } = await launch(t);
+  assert.equal(list.dataset.scrollable, 'true');
+  box.scrollHeight = 200;
+  window.dispatchEvent(new Event('resize'));
+  await nextTick();
+  assert.equal(list.dataset.scrollable, 'false');
+});
+
+test('ESC closes the card, returns focus, and removes it without a transition', async (t) => {
+  t.mock.timers.enable({ apis: ['setTimeout'] });
+  const { root, opener, sessionStorageRef } = await launch(t);
+  assert.ok(document.activeElement !== opener, 'the launcher took focus');
+  document.activeElement.dispatchEvent(
+    new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }),
+  );
+  await nextTick();
+  assert.equal(root.getAttribute('aria-hidden'), 'true');
+  assert.notEqual(sessionStorageRef.read(), null);
+  assert.ok(document.activeElement === opener, 'focus returns where it was');
+  // Reduced motion: no transitionend, so the bounded fallback removes it.
+  t.mock.timers.tick(400);
+  await nextTick();
+  assert.equal(document.getElementById('first-run-launcher'), null);
+});

src/hud.js

@@ -37,9 +37,10 @@ import {
   DEFAULT_HUD_LAYOUT,
   normalizeHudLayout,
 } from './hudLayouts.js';
-import { formatNumber, msg, t } from './i18n/index.js';
+import { formatNumber, msg, onLocaleChange, t } from './i18n/index.js';
 import { localizeLayerName } from './ui/layerPanel.js';
 import { isEmbeddedInline } from './app/embed.js';
+import { subscribeSelectedVessel } from './hudReadouts.js';
 
 /** Color palettes keyed by shader mode; applied as CSS custom properties. */
 const HUD_COLORS = {
@@ -179,8 +180,10 @@ export class IntelHUD {
       summaryPolicy = {},
       basemapContext = {},
       summaryService = applicationServices.summary,
+      publish = () => {},
     } = {},
   ) {
+    this._publish = publish;
     this.summaryService = summaryService;
     this.summaryPolicy = summaryPolicy;
     this.basemapContext = basemapContext;
@@ -189,7 +192,9 @@ export class IntelHUD {
     this._visible = false;
     this._autoMode = true; // auto show/hide based on style
     this._currentStyle = 'normal';
-    this._el = null;
+    /** The presented HUD; see {@link IntelHUD#_initView}. */
+    this._view = null;
+    this._viewSignature = '';
     this._variant = DEFAULT_HUD_LAYOUT;
     this._recBlinkState = true;
     this._updateInterval = null;
@@ -268,79 +273,83 @@ export class IntelHUD {
     this._orbitNum = 47000 + Math.floor(Math.random() * 1000);
     this._passNum = 100 + Math.floor(Math.random() * 200);
 
-    this._buildDOM();
+    this._initView();
+    this._vesselUnsubscribe = subscribeSelectedVessel((readout) =>
+      this._present({
+        vessel: readout
+          ? { active: true, text: readout.text }
+          : { active: false, text: t('AIS: --') },
+      }),
+    );
     this.viewer.camera.moveStart.addEventListener(this._onCameraMoveStart);
     this.viewer.camera.moveEnd.addEventListener(this._onCameraMoveEnd);
+    this._offLocale = onLocaleChange(() => this._relocalize());
     this._startTimers();
   }
 
   /**
-   * Construct the HUD DOM structure inside the existing `#intel-hud` element.
-   * Populates corner brackets, classification banners, sensor readouts,
-   * edge metadata strips, and the bottom summary bar.
+   * Show the HUD's own words in the new locale. The deterministic summary
+   * is composed again; the AI reply does not depend on the locale, so the
+   * next tick shows the one already received rather than asking again.
    */
-  _buildDOM() {
-    this._el = document.getElementById('intel-hud');
-    if (!this._el) return;
+  _relocalize() {
+    this._present({
+      mode: MODE_LABELS[this._currentStyle]
+        ? t(MODE_LABELS[this._currentStyle])
+        : this._currentStyle.toUpperCase(),
+      summaryLabel: t('SUMMARY'),
+      rec: t('REC'),
+      ...(this._view.vessel.active
+        ? {}
+        : { vessel: { active: false, text: t('AIS: --') } }),
+    });
+    if (this._visible && this._latestMetrics) this._updateCameraData();
+    this._setSummaryText(this._composeSummary(), false);
+  }
 
+  /**
+   * Present the HUD's first view: corner brackets, classification banners,
+   * sensor readouts, edge metadata strips and the bottom summary bar, which
+   * the Intel HUD view renders in `#intel-hud`.
+   */
+  _initView() {
     // i18n-ignore: sensor codes and a classification banner; the rest uses t()
-    this._el.innerHTML = `
-      <div class="hud-sonar" aria-hidden="true"></div>
+    this._view = {
+      active: false,
+      variant: this._variant,
+      colors: null,
+      classification: 'TOP SECRET // SI-TK // NOFORN',
+      system: `${this._missionId}  ${this._sensorId}`,
+      mode: t(MODE_LABELS.normal),
+      summaryLabel: t('SUMMARY'),
+      summary: t('Awaiting telemetry...'),
+      rec: t('REC'),
+      recShown: null,
+      timestamp: '2026-01-01 00:00:00Z',
+      orbital: `ORB: ${this._orbitNum}  PASS: DESC-${this._passNum}`,
+      mgrs: 'MGRS: ---',
+      latlon: `--°--'--"N ---°--'--"W`,
+      gsd: 'GSD: --m  NIIRS: --',
+      alt: 'ALT: --m   SUN: --° EL',
+      vessel: { active: false, text: t('AIS: --') },
+      coll: 'COLL: --:--:--Z',
+      ona: 'ONA: --°',
+      sensor: ['BAND: PAN', 'BITS: 11', 'LVL: 1A'],
+      bottom: 'LAT: --  LON: --  MGRS: ---',
+    };
+    this._present({});
+  }
 
-      <div class="hud-corner hud-top-left">
-        <div class="hud-bracket">┌</div>
-        <div class="hud-content">
-          <div class="hud-readout"><div class="hud-classification">TOP SECRET // SI-TK // NOFORN</div></div>
-          <div class="hud-readout"><div class="hud-system">${this._missionId}  ${this._sensorId}</div></div>
-          <div class="hud-readout"><div class="hud-mode" id="hud-mode">${t(MODE_LABELS.normal)}</div></div>
-          <div class="hud-summary-wrap">
-            <div class="hud-readout"><div class="hud-summary-label">${t('SUMMARY')}</div></div>
-            <div class="hud-readout"><div class="hud-summary" id="hud-summary">${t('Awaiting telemetry...')}</div></div>
-          </div>
-        </div>
-      </div>
-
-      <div class="hud-corner hud-top-right">
-        <div class="hud-content" style="text-align:right">
-          <div class="hud-readout"><div class="hud-rec"><span id="hud-rec-dot">●</span> ${t('REC')}  <span id="hud-timestamp">2026-01-01 00:00:00Z</span></div></div>
-          <div class="hud-readout"><div class="hud-orbital">ORB: ${this._orbitNum}  PASS: DESC-${this._passNum}</div></div>
-        </div>
-        <div class="hud-bracket">┐</div>
-      </div>
-
-      <div class="hud-corner hud-bottom-left">
-        <div class="hud-bracket">└</div>
-        <div class="hud-content">
-          <div class="hud-readout"><div id="hud-mgrs">MGRS: ---</div></div>
-          <div class="hud-readout"><div id="hud-latlon">--°--'--"N ---°--'--"W</div></div>
-        </div>
-      </div>
-
-      <div class="hud-corner hud-bottom-right">
-        <div class="hud-content" style="text-align:right">
-          <div class="hud-readout"><div id="hud-gsd">GSD: --m  NIIRS: --</div></div>
-          <div class="hud-readout"><div id="hud-alt">ALT: --m   SUN: --° EL</div></div>
-          <div class="hud-readout"><div id="hud-ais-vessel" class="hud-ais-vessel">${t('AIS: --')}</div></div>
-        </div>
-        <div class="hud-bracket">┘</div>
-      </div>
-
-      <div class="hud-edge hud-left-edge">
-        <div class="hud-readout"><div id="hud-coll">COLL: --:--:--Z</div></div>
-        <div class="hud-readout"><div id="hud-ona">ONA: --°</div></div>
-      </div>
-
-      <div class="hud-edge hud-right-edge">
-        <div class="hud-readout"><div>BAND: PAN</div></div>
-        <div class="hud-readout"><div>BITS: 11</div></div>
-        <div class="hud-readout"><div>LVL: 1A</div></div>
-      </div>
-
-      <div class="hud-bottom-bar">
-        <span class="hud-readout"><span id="hud-bottom-line">LAT: --  LON: --  MGRS: ---</span></span>
-      </div>
-    `;
-    this._el.dataset.variant = this._variant;
+  /**
+   * Merge `patch` into the view and publish it when anything changed.
+   * @param {object} patch
+   */
+  _present(patch) {
+    Object.assign(this._view, patch);
+    const signature = JSON.stringify(this._view);
+    if (signature === this._viewSignature) return;
+    this._viewSignature = signature;
+    this._publish(Object.freeze({ ...this._view }));
   }
 
   /**
@@ -351,16 +360,13 @@ export class IntelHUD {
   _startTimers() {
     // Timestamp — every second
     this._timestampInterval = setInterval(() => {
-      const el = document.getElementById('hud-timestamp');
-      if (el) el.textContent = this._formatUTC();
+      this._present({ timestamp: this._formatUTC() });
     }, 1000);
 
     // REC blink — every 800ms
     this._recBlinkInterval = setInterval(() => {
       this._recBlinkState = !this._recBlinkState;
-      const dot = document.getElementById('hud-rec-dot');
-      if (dot)
-        dot.style.visibility = this._recBlinkState ? 'visible' : 'hidden';
+      this._present({ recShown: this._recBlinkState });
     }, 800);
 
     // Camera-derived data — 4 updates/second (250ms). Skipped in a hidden
@@ -449,23 +455,16 @@ export class IntelHUD {
       // Format: 18SUJ23370716 → 18S UJ 2337 0716
       const formatted = this._formatMGRS(mgrsStr);
       mgrsLabel = formatted;
-      const el = document.getElementById('hud-mgrs');
-      // i18n-ignore: sensor codes
-      if (el) el.textContent = `MGRS: ${formatted}`;
     } catch {
-      const el = document.getElementById('hud-mgrs');
-      // i18n-ignore: sensor codes
-      if (el) el.textContent = 'MGRS: ---';
+      /* the readout keeps its dashes */
     }
+    // i18n-ignore: sensor codes
+    const readouts = { mgrs: `MGRS: ${mgrsLabel}` };
 
     // Lat/Lon DMS
-    const llEl = document.getElementById('hud-latlon');
-    if (llEl) llEl.textContent = `${latDMS} ${lonDMS}`;
-    const bottomEl = document.getElementById('hud-bottom-line');
-    if (bottomEl) {
-      // i18n-ignore: sensor codes
-      bottomEl.textContent = `MGRS: ${mgrsLabel}  LAT: ${latDMS}  LON: ${lonDMS}`;
-    }
+    readouts.latlon = `${latDMS} ${lonDMS}`;
+    // i18n-ignore: sensor codes
+    readouts.bottom = `MGRS: ${mgrsLabel}  LAT: ${latDMS}  LON: ${lonDMS}`;
 
     // GSD (Ground Sample Distance): approximate resolution in meters per pixel
     // derived from camera altitude. NIIRS (National Imagery Interpretability
@@ -477,42 +476,35 @@ export class IntelHUD {
       0,
       Math.min(9, 10.25 - 3.32 * Math.log10(gsdInches)),
     );
-    const gsdEl = document.getElementById('hud-gsd');
-    if (gsdEl)
-      // i18n-ignore: sensor codes
-      gsdEl.textContent = `GSD: ${gsd.toFixed(2)}m  NIIRS: ${niirs.toFixed(1)}`;
+    // i18n-ignore: sensor codes
+    readouts.gsd = `GSD: ${gsd.toFixed(2)}m  NIIRS: ${niirs.toFixed(1)}`;
 
     // Altitude — reported as height above MEAN SEA LEVEL. `altM` is the raw
     // ellipsoidal camera height, which reads far below zero wherever the geoid
     // sits under the ellipsoid: a cockpit parked on the SFO deck (N ≈ -32 m)
     // showed "ALT: -15m", and JFK "ALT: -18m". Subtracting N restores the
     // number a viewer expects without touching the camera or any render path.
-    const altEl = document.getElementById('hud-alt');
     const geoidN = this._geoidUndulationM(latDeg, lonDeg);
     const altMslM = ellipsoidalToMslDisplayM(altM, geoidN);
     const sunEl = this._estimateSunElevation(latDeg, lonDeg);
-    if (altEl)
-      // i18n-ignore: sensor codes
-      altEl.textContent = `ALT: ${Math.round(altMslM)}m   SUN: ${sunEl.toFixed(1)}° EL`;
+    // i18n-ignore: sensor codes
+    readouts.alt = `ALT: ${Math.round(altMslM)}m   SUN: ${sunEl.toFixed(1)}° EL`;
 
     // Collection timestamp
-    const collEl = document.getElementById('hud-coll');
-    if (collEl) {
-      const now = new Date();
-      const h = String(now.getUTCHours()).padStart(2, '0');
-      const m = String(now.getUTCMinutes()).padStart(2, '0');
-      const s = String(now.getUTCSeconds()).padStart(2, '0');
-      // i18n-ignore: sensor codes
-      collEl.textContent = `COLL: ${h}:${m}:${s}Z`;
-    }
+    const now = new Date();
+    const h = String(now.getUTCHours()).padStart(2, '0');
+    const m = String(now.getUTCMinutes()).padStart(2, '0');
+    const s = String(now.getUTCSeconds()).padStart(2, '0');
+    // i18n-ignore: sensor codes
+    readouts.coll = `COLL: ${h}:${m}:${s}Z`;
 
     // Off-nadir angle (ONA): camera pitch of -90 deg is nadir (straight down),
     // so ONA = 90 + pitch gives 0 at nadir and increases toward the horizon.
     const pitchDeg = Cesium.Math.toDegrees(camera.pitch);
     const ona = Math.max(0, 90 + pitchDeg);
-    const onaEl = document.getElementById('hud-ona');
     // i18n-ignore: sensor codes
-    if (onaEl) onaEl.textContent = `ONA: ${ona.toFixed(1)}°`;
+    readouts.ona = `ONA: ${ona.toFixed(1)}°`;
+    this._present(readouts);
 
     // `altM` stays the raw ellipsoidal camera height the sensor model reads
     // (GSD/NIIRS, view band). `altMslM` is the ADDITIVE display datum — the
@@ -733,8 +725,7 @@ export class IntelHUD {
     const m = this._latestMetrics;
     if (!m) return t('Awaiting telemetry...');
 
-    const modeEl = document.getElementById('hud-mode');
-    const modeLabel = modeEl?.textContent || t(MODE_LABELS.normal);
+    const modeLabel = this._view.mode || t(MODE_LABELS.normal);
     const region = this._regionLabel(m.latDeg, m.lonDeg);
     const nearest = this._nearestKnownPoint(m.latDeg, m.lonDeg);
     const band = this._viewBand(m.altM);
@@ -796,20 +787,18 @@ export class IntelHUD {
    * @param {string} text - Full summary string to type out.
    */
   _typeSummary(text) {
-    const el = document.getElementById('hud-summary');
-    if (!el) return;
     clearInterval(this._summaryTypingInterval);
     let index = 0;
-    el.textContent = '';
+    this._present({ summary: '' });
     this._summaryTypingInterval = setInterval(() => {
       index += 2;
       if (index >= text.length) {
-        el.textContent = text;
+        this._present({ summary: text });
         clearInterval(this._summaryTypingInterval);
         this._summaryTypingInterval = null;
         return;
       }
-      el.textContent = text.slice(0, index);
+      this._present({ summary: text.slice(0, index) });
     }, 24);
   }
 
@@ -924,8 +913,7 @@ export class IntelHUD {
     }
     // A plain paint replaces any reply still typing.
     this._stopSummaryTyping();
-    const el = document.getElementById('hud-summary');
-    if (el) el.textContent = text;
+    this._present({ summary: text });
   }
 
   /**
@@ -984,20 +972,18 @@ export class IntelHUD {
   onStyleChange(styleName) {
     this._currentStyle = styleName;
 
-    // Update mode label
-    const modeEl = document.getElementById('hud-mode');
-    if (modeEl) {
-      modeEl.textContent = MODE_LABELS[styleName]
-        ? t(MODE_LABELS[styleName])
-        : styleName.toUpperCase();
-    }
-    // Update color scheme
+    // Mode label and color scheme
     const colors = HUD_COLORS[styleName] || HUD_COLORS._default;
-    if (this._el) {
-      this._el.style.setProperty('--hud-color', colors.main);
-      this._el.style.setProperty('--hud-glow', colors.glow);
-      this._el.style.setProperty('--hud-border', colors.border);
-    }
+    this._present({
+      mode: MODE_LABELS[styleName]
+        ? t(MODE_LABELS[styleName])
+        : styleName.toUpperCase(),
+      colors: {
+        '--hud-color': colors.main,
+        '--hud-glow': colors.glow,
+        '--hud-border': colors.border,
+      },
+    });
 
     // Auto show/hide
     if (this._autoMode) {
@@ -1012,7 +998,7 @@ export class IntelHUD {
   /** Make the HUD visible and immediately refresh all readouts. */
   show() {
     this._visible = true;
-    if (this._el) this._el.classList.add('active');
+    this._present({ active: true });
     this._updateCameraData(); // immediate update
     this._markSummaryDirty();
     void this._updateSummary(false, true);
@@ -1021,7 +1007,7 @@ export class IntelHUD {
   /** Hide the HUD overlay. */
   hide() {
     this._visible = false;
-    if (this._el) this._el.classList.remove('active');
+    this._present({ active: false });
   }
 
   /** Toggle HUD visibility and disable auto-mode (user override). */
@@ -1060,9 +1046,7 @@ export class IntelHUD {
    */
   setVariant(variantName) {
     this._variant = normalizeHudLayout(variantName);
-    if (this._el) {
-      this._el.dataset.variant = this._variant;
-    }
+    this._present({ variant: this._variant });
     applyHudUiTheme(document.documentElement, this._variant);
   }
 
@@ -1116,6 +1100,8 @@ export class IntelHUD {
     this.viewer.camera.moveStart.removeEventListener(this._onCameraMoveStart);
     this.viewer.camera.moveEnd.removeEventListener(this._onCameraMoveEnd);
     this._dataManagerUnsubscribe?.();
+    this._vesselUnsubscribe?.();
     this._summaryRequest?.abort();
+    this._offLocale();
   }
 }

src/hudA11y.test.mjs

@@ -1,9 +1,9 @@
-import { expandApplicationHtml } from '../build/application-html.js';
+import { renderApplicationHtml } from './testSupport/applicationHtml.mjs';
 import test from 'node:test';
 import assert from 'node:assert/strict';
 import { readFileSync } from 'node:fs';
 
-const html = expandApplicationHtml(readFileSync(new URL('../index.html', import.meta.url), 'utf8'));
+const html = await renderApplicationHtml(readFileSync(new URL('../index.html', import.meta.url), 'utf8'));
 const parameters = readFileSync(new URL('./ui/styleParameters.js', import.meta.url), 'utf8');
 
 // Focused markup guards; actual computed names are checked in Chromium.
@@ -24,10 +24,11 @@ test('HUD sliders and location search have descriptive explicit names', () => {
 test('the first-run checkbox keeps its native visible label', () => {
   // The span may carry a data-i18n extraction attribute; the native wrapping
   // label contract is what this guards.
-  assert.match(html, /<label\b[^>]*class="first-run-suppress"[^>]*>\s*<input type="checkbox" data-first-run-suppress \/>\s*<span\b[^>]*>Don't show this again<\/span>\s*<\/label>/);
+  assert.match(html, /<label\b[^>]*class="first-run-suppress"[^>]*>\s*<input type="checkbox" data-first-run-suppress\s*\/?>\s*<span\b[^>]*>Don't show this again<\/span>\s*<\/label>/);
 });
 
 test('generated style sliders use the visible parameter label as their name', () => {
-  assert.match(parameters, /label\.textContent\s*=\s*t\(metadata\.label\);/);
-  assert.match(parameters, /ariaLabel:\s*t\(metadata\.label\)/);
+  assert.match(parameters, /label:\s*t\(metadata\.label\),/);
+  assert.match(parameters, /h\('span', \{ class: 'param-label' \}, row\.label\)/);
+  assert.match(parameters, /'aria-label': row\.label,/);
 });

src/hudAltitudeDatum.test.mjs

@@ -21,6 +21,7 @@
 // one file that can construct a real IntelHUD.
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
+import { hudReadouts } from './testSupport/hudReadouts.mjs';
 import { readFileSync } from 'node:fs';
 import { registerHooks } from 'node:module';
 import { ensureGeoidReady } from './data/geoid.js';
@@ -62,19 +63,7 @@ const SFO_ELLIPSOIDAL_M = -15;
  * text sinks this test reads.
  */
 function installHudEnvironment() {
-  const elements = new Map(
-    [
-      'hud-alt',
-      'hud-summary',
-      'hud-mgrs',
-      'hud-latlon',
-      'hud-bottom-line',
-      'hud-gsd',
-      'hud-coll',
-      'hud-ona',
-      'hud-mode',
-    ].map((id) => [id, { textContent: '' }]),
-  );
+  const { elements, publish, view } = hudReadouts();
   const previousDocument = globalThis.document;
   const cameraListeners = {};
   globalThis.document = {
@@ -109,6 +98,8 @@ function installHudEnvironment() {
   return {
     elements,
     viewer,
+    publish,
+    view,
     cameraListeners,
     restore() {
       if (previousDocument === undefined) delete globalThis.document;
@@ -213,7 +204,7 @@ test('a cold tick paints both readouts uncorrected, and resolving flips both in
   const env = installHudEnvironment();
   let hud;
   try {
-    hud = new IntelHUD(env.viewer);
+    hud = new IntelHUD(env.viewer, { publish: env.publish });
     const alt = () => env.elements.get('hud-alt').textContent;
     const summary = () => env.elements.get('hud-summary').textContent;
 
@@ -267,7 +258,7 @@ test('the corrected readouts are the MSL datum, not a coincidence of the SFO sig
   env.viewer.camera.positionCartographic.height = 100;
   let hud;
   try {
-    hud = new IntelHUD(env.viewer);
+    hud = new IntelHUD(env.viewer, { publish: env.publish });
     hud._updateCameraData(); // cold: requests the grid, paints uncorrected
     assert.match(env.elements.get('hud-alt').textContent, /^ALT: 100m/);
     await ensureGeoidReady();
@@ -302,7 +293,7 @@ test('a summary asked for one view is dropped once the camera moves', async () =
   };
   let hud;
   try {
-    hud = new IntelHUD(env.viewer, { summaryService });
+    hud = new IntelHUD(env.viewer, { summaryService, publish: env.publish });
     let place = 'Yellowstone';
     hud._summaryContext = async () => ({ place });
     const summary = () => env.elements.get('hud-summary').textContent;
@@ -362,7 +353,7 @@ test('a request the camera leaves paints nothing: aborted, failed, or its contex
   };
   let hud;
   try {
-    hud = new IntelHUD(env.viewer, { summaryService });
+    hud = new IntelHUD(env.viewer, { summaryService, publish: env.publish });
     hud._summaryContext = async () => ({ place: 'Yellowstone' });
     const element = env.elements.get('hud-summary');
     const settle = () => new Promise((resolve) => setImmediate(resolve));
@@ -371,7 +362,7 @@ test('a request the camera leaves paints nothing: aborted, failed, or its contex
     // The move aborts the request in flight, and the abort paints nothing.
     let update = hud._updateSummary(false, true);
     await settle();
-    element.textContent = 'shown before the move';
+    hud._present({ summary: 'shown before the move' });
     env.cameraListeners.moveStart();
     assert.equal(pending[0].signal.aborted, true, 'the request is aborted');
     await update;
@@ -382,7 +373,7 @@ test('a request the camera leaves paints nothing: aborted, failed, or its contex
     ignoreAbort = true;
     update = hud._updateSummary(false, true);
     await settle();
-    element.textContent = 'shown before the move';
+    hud._present({ summary: 'shown before the move' });
     env.cameraListeners.moveStart();
     pending[1].reject(new Error('network'));
     await update;
@@ -393,7 +384,7 @@ test('a request the camera leaves paints nothing: aborted, failed, or its contex
       env.cameraListeners.moveStart();
       throw new Error('view target unavailable');
     };
-    element.textContent = 'shown before the move';
+    hud._present({ summary: 'shown before the move' });
     await hud._updateSummary(false, true);
     assert.equal(element.textContent, 'shown before the move');
   } finally {
@@ -424,7 +415,7 @@ test('a cancelled summary retries the same context but completed answers stay re
   };
   let hud;
   try {
-    hud = new IntelHUD(env.viewer, { summaryService });
+    hud = new IntelHUD(env.viewer, { summaryService, publish: env.publish });
     hud._summaryContext = async () => ({ place: 'San Francisco' });
     hud._updateCameraData();
     const settle = () => new Promise((resolve) => setImmediate(resolve));
@@ -481,7 +472,7 @@ test('after a dropped or timed-out request the next tick asks again, and a move
   };
   let hud;
   try {
-    hud = new IntelHUD(env.viewer, { summaryService });
+    hud = new IntelHUD(env.viewer, { summaryService, publish: env.publish });
     // The same place before and after: a slow follow camera, a small pan.
     hud._summaryContext = async () => ({ place: 'Lisboa' });
     const element = env.elements.get('hud-summary');
@@ -544,7 +535,7 @@ test('a summary interrupted while typing can retry unchanged context', async (t)
   };
   let hud;
   try {
-    hud = new IntelHUD(env.viewer, { summaryService });
+    hud = new IntelHUD(env.viewer, { summaryService, publish: env.publish });
     hud._summaryContext = async () => ({ place: 'San Francisco' });
     hud._updateCameraData();
     await hud._updateSummary(true);
@@ -585,13 +576,12 @@ test('a retired Operator layout falls back to Tactical in the live HUD', () => {
   const env = installHudEnvironment();
   let hud;
   try {
-    hud = new IntelHUD(env.viewer);
-    hud._el = { dataset: {} };
+    hud = new IntelHUD(env.viewer, { publish: env.publish });
     hud.setVariant('minimal');
     assert.equal(hud.getVariant(), 'minimal');
     hud.setVariant('operator');
     assert.equal(hud.getVariant(), 'tactical');
-    assert.equal(hud._el.dataset.variant, 'tactical');
+    assert.equal(env.view().variant, 'tactical');
   } finally {
     hud?.destroy();
     env.restore();

src/hudDms.test.mjs

@@ -9,6 +9,7 @@
 // hudAltitudeDatum.test.mjs before importing it.
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
+import { hudReadouts } from './testSupport/hudReadouts.mjs';
 import { registerHooks } from 'node:module';
 
 const MGRS_STUB_URL = 'gev-test-stub:mgrs';
@@ -56,19 +57,7 @@ test('ordinary values keep their existing format', () => {
 });
 
 test('the telemetry tick paints the carried value into both readouts', () => {
-  const elements = new Map(
-    [
-      'hud-alt',
-      'hud-summary',
-      'hud-mgrs',
-      'hud-latlon',
-      'hud-bottom-line',
-      'hud-gsd',
-      'hud-coll',
-      'hud-ona',
-      'hud-mode',
-    ].map((id) => [id, { textContent: '' }]),
-  );
+  const { elements, publish } = hudReadouts();
   const previousDocument = globalThis.document;
   globalThis.document = {
     getElementById: (id) => elements.get(id) ?? null,
@@ -91,7 +80,7 @@ test('the telemetry tick paints the carried value into both readouts', () => {
   };
   let hud;
   try {
-    hud = new IntelHUD(viewer);
+    hud = new IntelHUD(viewer, { publish });
     hud._updateCameraData();
     const latlon = elements.get('hud-latlon').textContent;
     const bottom = elements.get('hud-bottom-line').textContent;

src/hudPageVisibility.test.mjs

@@ -6,6 +6,7 @@
 // setup as hudAltitudeDatum.test.mjs).
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
+import { hudReadouts } from './testSupport/hudReadouts.mjs';
 import { registerHooks } from 'node:module';
 
 const MGRS_STUB_URL = 'gev-test-stub:mgrs';
@@ -29,10 +30,7 @@ registerHooks({
 const { IntelHUD } = await import('./hud.js');
 
 function installHiddenPage() {
-  const elements = new Map(
-    ['hud-alt', 'hud-summary', 'hud-mgrs', 'hud-latlon', 'hud-bottom-line', 'hud-gsd', 'hud-coll', 'hud-ona', 'hud-mode']
-      .map((id) => [id, { textContent: '' }]),
-  );
+  const { elements, publish } = hudReadouts();
   const previousDocument = globalThis.document;
   globalThis.document = {
     hidden: true,
@@ -54,6 +52,7 @@ function installHiddenPage() {
   return {
     alt: () => elements.get('hud-alt').textContent,
     viewer,
+    publish,
     restore() {
       if (previousDocument === undefined) delete globalThis.document;
       else globalThis.document = previousDocument;
@@ -66,11 +65,15 @@ test('the HUD readout pauses in a hidden page but keeps updating in an inline pa
   const page = installHiddenPage();
   let hud;
   try {
-    hud = new IntelHUD(page.viewer);
+    hud = new IntelHUD(page.viewer, { publish: page.publish });
     hud._visible = true;
 
     t.mock.timers.tick(250);
-    assert.equal(page.alt(), '', 'a hidden page skips the telemetry tick');
+    assert.equal(
+      page.alt(),
+      'ALT: --m   SUN: --° EL',
+      'a hidden page skips the telemetry tick',
+    );
 
     globalThis.GEV_EMBED_INLINE = true;
     t.mock.timers.tick(250);

src/hudReadouts.js

@@ -0,0 +1,29 @@
+/**
+ * Readouts other owners show in the Intel HUD. The vessel layer presents the
+ * selected vessel here and the HUD subscribes, so neither reaches into the
+ * other's markup.
+ */
+
+/** @type {?{text: string}} The selected vessel's lines, or null for none. */
+let selectedVessel = null;
+const vesselListeners = new Set();
+
+/**
+ * Show the selected vessel's readout, or clear it.
+ * @param {?{text: string}} readout Its lines joined by newlines, or null.
+ */
+export function presentSelectedVessel(readout) {
+  selectedVessel = readout ? Object.freeze({ text: readout.text }) : null;
+  for (const listener of vesselListeners) listener(selectedVessel);
+}
+
+/**
+ * Follow the selected vessel's readout; the current one is replayed at once.
+ * @param {(readout: ?{text: string}) => void} listener
+ * @returns {() => void} Stop following.
+ */
+export function subscribeSelectedVessel(listener) {
+  vesselListeners.add(listener);
+  listener(selectedVessel);
+  return () => vesselListeners.delete(listener);
+}

src/hudSummaryGate.test.mjs

@@ -6,6 +6,7 @@
 // setup as hudPageVisibility.test.mjs).
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
+import { hudReadouts } from './testSupport/hudReadouts.mjs';
 import { registerHooks } from 'node:module';
 
 const MGRS_STUB_URL = 'gev-test-stub:mgrs';
@@ -30,19 +31,7 @@ registerHooks({
 const { IntelHUD } = await import('./hud.js');
 
 function installPage() {
-  const elements = new Map(
-    [
-      'hud-alt',
-      'hud-summary',
-      'hud-mgrs',
-      'hud-latlon',
-      'hud-bottom-line',
-      'hud-gsd',
-      'hud-coll',
-      'hud-ona',
-      'hud-mode',
-    ].map((id) => [id, { textContent: '' }]),
-  );
+  const { elements, publish } = hudReadouts();
   const previous = { document: globalThis.document, window: globalThis.window };
   globalThis.document = {
     hidden: false,
@@ -69,6 +58,7 @@ function installPage() {
   };
   return {
     viewer,
+    publish,
     restore() {
       for (const [key, value] of Object.entries(previous)) {
         if (value === undefined) delete globalThis[key];
@@ -82,7 +72,10 @@ function installPage() {
 function createHud(t, summaryService) {
   t.mock.timers.enable({ apis: ['setInterval'] });
   const page = installPage();
-  const hud = new IntelHUD(page.viewer, { summaryService });
+  const hud = new IntelHUD(page.viewer, {
+    summaryService,
+    publish: page.publish,
+  });
   t.after(() => {
     hud.destroy();
     page.restore();

src/i18n/catalog.test.mjs

@@ -5,6 +5,7 @@ import {
   checkCatalog,
   extractMessages,
   findUnmarked,
+  markedTemplate,
   readCatalog,
   shippedLocales,
   unmarkedMarkup,
@@ -111,6 +112,32 @@ test('unmarkedMarkup finds text and attributes without data-i18n*', () => {
   assert.deepEqual(texts('<!-- Note --><span>— 42 —</span>'), []);
 });
 
+test('markedTemplate rejects data-i18n* attributes in a Vue template', () => {
+  const view = [
+    '<script setup>',
+    "const note = 'data-i18n';",
+    '</script>',
+    '<template>',
+    '  <!-- no data-i18n here -->',
+    '  <span data-i18n>Normal</span>',
+    '  <b title="Explains data-i18n" data-i18n-title>{{ t(\'Go\') }}</b>',
+    '  <i :data-i18n="true" />',
+    '</template>',
+  ].join('\n');
+  assert.deepEqual(markedTemplate('View.vue', view), [
+    { where: 'View.vue:6', text: 'data-i18n: use t() in a Vue template' },
+    { where: 'View.vue:7', text: 'data-i18n-title: use t() in a Vue template' },
+    { where: 'View.vue:8', text: 'data-i18n: use t() in a Vue template' },
+  ]);
+  assert.deepEqual(
+    markedTemplate(
+      'View.vue',
+      '<template><b :title="t(\'Pin\')">x</b></template>',
+    ),
+    [],
+  );
+});
+
 test('unmarkedScript finds literals that reach the page without t/tn/msg', () => {
   const texts = (js) => unmarkedScript('f.js', js).map((f) => f.text);
   assert.deepEqual(texts("el.textContent = 'Saved';"), ['Saved']);

src/i18n/i18n.test.mjs

@@ -7,7 +7,8 @@ import {
   formatNumber,
   formatRelativeTime,
   msg,
-  persistLocaleAndReload,
+  onLocaleChange,
+  persistLocale,
   setLocale,
   t,
   tn,
@@ -258,6 +259,40 @@ test('applyDocumentTranslations translates opted-in text and attributes in place
   assert.equal(label.textContent, t('POWERED UP'));
   assert.equal(pin.attrs.get('title'), t('POWERED UP'));
   assert.equal(unknown.textContent, 'No such message');
+  // A later pass starts from the English source, so every switch applies.
+  setLocale('de');
+  applyDocumentTranslations(doc);
+  assert.equal(label.textContent, t('POWERED UP'));
+  setLocale('en');
+  assert.equal(applyDocumentTranslations(doc), 2, 'English restores');
+  assert.equal(label.textContent, 'POWERED UP');
+  assert.equal(pin.attrs.get('title'), 'POWERED UP');
+  // Text that code wrote since is the new source; a pass leaves it alone.
+  label.textContent = 'Error: offline';
+  setLocale('ru');
+  applyDocumentTranslations(doc);
+  assert.equal(label.textContent, 'Error: offline');
+});
+
+test('onLocaleChange listeners hear each change until removed', () => {
+  const heard = [];
+  const off = onLocaleChange(() => heard.push(t('POWERED UP')));
+  const broken = onLocaleChange(() => {
+    throw new Error('broken listener');
+  });
+  const error = console.error;
+  console.error = () => {};
+  try {
+    setLocale('ru');
+    setLocale('ru');
+    assert.deepEqual(heard, [t('POWERED UP')], 'once, in the new locale');
+    off();
+    setLocale('en');
+    assert.equal(heard.length, 1);
+  } finally {
+    console.error = error;
+    broken();
+  }
 });
 
 test('applyDocumentTranslations reads data-i18n-context for element text', () => {
@@ -275,13 +310,9 @@ test('applyDocumentTranslations reads data-i18n-context for element text', () =>
   assert.notEqual(option.textContent, t('All'));
 });
 
-test('persistLocaleAndReload keeps the choice in ?lang when storage is blocked', () => {
+test('persistLocale keeps the choice in ?lang when storage is blocked', () => {
   const calls = [];
-  const location = {
-    href: 'https://gev.local/?x=1#scene=a',
-    assign: (url) => calls.push(['assign', url]),
-    reload: () => calls.push(['reload']),
-  };
+  const location = { href: 'https://gev.local/?x=1#scene=a' };
   const history = {
     replaceState: (_s, _t, url) => calls.push(['replace', url]),
   };
@@ -290,36 +321,30 @@ test('persistLocaleAndReload keeps the choice in ?lang when storage is blocked',
       throw new Error('blocked');
     },
   };
-  assert.equal(
-    persistLocaleAndReload('ru', { location, history, storage }),
-    true,
-  );
+  assert.equal(persistLocale('ru', { location, history, storage }), 'ru');
   assert.deepEqual(calls, [
     ['replace', 'https://gev.local/?x=1&lang=ru#scene=a'],
-    ['reload'],
   ]);
 });
 
-test('persistLocaleAndReload stores the choice, keeps the hash, strips ?lang', () => {
+test('persistLocale stores the choice, keeps the hash, strips ?lang', () => {
   const storage = memoryStorage();
   const calls = [];
-  const location = {
-    href: 'https://gev.local/?lang=en&x=1#scene=a',
-    assign: (url) => calls.push(['assign', url]),
-    reload: () => calls.push(['reload']),
-  };
+  const location = { href: 'https://gev.local/?lang=en&x=1#scene=a' };
   const history = {
     replaceState: (_s, _t, url) => calls.push(['replace', url]),
   };
-  assert.equal(
-    persistLocaleAndReload('ru', { location, history, storage }),
-    true,
-  );
+  assert.equal(persistLocale('ru', { location, history, storage }), 'ru');
   assert.equal(storage.data.get(LOCALE_STORAGE_KEY), 'ru');
-  assert.deepEqual(calls, [
-    ['replace', 'https://gev.local/?x=1#scene=a'],
-    ['reload'],
-  ]);
+  assert.deepEqual(calls, [['replace', 'https://gev.local/?x=1#scene=a']]);
+  // An address without ?lang is left as it is.
+  calls.length = 0;
+  persistLocale('de', {
+    location: { href: 'https://gev.local/#scene=a' },
+    history,
+    storage,
+  });
+  assert.deepEqual(calls, []);
 });
 
 test('tn() shows a caller-formatted count and still picks the form by number', () => {

src/i18n/index.js

@@ -40,37 +40,91 @@ const CATALOGS = Object.freeze({
   'zh-Hant': zhHant,
 });
 
-let currentLocale = DEFAULT_LOCALE;
+// The page's locale. The UI binds it to its vue-i18n instance's
+// (src/ui/i18n.js), so a Vue render that translates re-renders when it
+// changes; until then, and in portable code, it is plain state.
+let pageLocale = { value: DEFAULT_LOCALE };
+
+/**
+ * Keep the active locale in `locale`, a ref such as a vue-i18n composer's
+ * `locale`. It takes the current locale; switch with setLocale afterwards.
+ * @param {{value: string}} locale
+ */
+export function bindLocale(locale) {
+  locale.value = pageLocale.value;
+  pageLocale = locale;
+  bound = true;
+}
+
+let bound = false;
+const localeListeners = new Set();
+
+/**
+ * Call `listener` after the active locale changes, so code that shows text it
+ * translated itself (a status line, a count, a time) shows it again. Text a
+ * Vue view translates while rendering follows the locale without this.
+ * @param {() => void} listener
+ * @returns {() => void} Stops listening.
+ */
+export function onLocaleChange(listener) {
+  if (typeof listener !== 'function') return () => {};
+  localeListeners.add(listener);
+  return () => localeListeners.delete(listener);
+}
+
+/**
+ * Tell the listeners the locale changed. setLocale does this for an unbound
+ * locale; the owner of a bound ref calls it when the ref changes.
+ */
+export function notifyLocaleChange() {
+  for (const listener of [...localeListeners]) {
+    try {
+      listener();
+    } catch (error) {
+      console.error('[i18n] locale listener failed', error);
+    }
+  }
+}
 
 /** The catalog for a locale; null for English and unknown codes. */
 export function getCatalog(locale) {
   return CATALOGS[normalizeLocale(locale)] ?? null;
 }
 
-/** Active locale. */
+let boundValue = DEFAULT_LOCALE;
+let activeLocale = DEFAULT_LOCALE;
+
+/** Active locale, normalized: a bound ref may be set to any language tag. */
 export function getLocale() {
-  return currentLocale;
+  const value = pageLocale.value;
+  if (value !== boundValue) {
+    boundValue = value;
+    activeLocale = normalizeLocale(value) || DEFAULT_LOCALE;
+  }
+  return activeLocale;
 }
 
 /**
- * Switch the active locale. Pure state change: call applyDocumentLanguage /
- * applyDocumentTranslations to reflect it in the DOM.
+ * Switch the active locale. Views re-render and onLocaleChange listeners
+ * word their text again; the application keeps <html lang>/<html dir> and
+ * the page's data-i18n markup in step.
  * @returns {string} The locale actually applied (normalized).
  */
 export function setLocale(locale) {
   const normalized = normalizeLocale(locale) || DEFAULT_LOCALE;
-  if (normalized !== currentLocale) {
-    currentLocale = normalized;
+  if (normalized !== pageLocale.value) {
+    pageLocale.value = normalized;
     formatterCache.clear();
+    if (!bound) notifyLocaleChange();
   }
-  return currentLocale;
+  return normalized;
 }
 
 /** Development-only warning; silent under node:test and in production. */
 function warnMissing(text) {
   if (import.meta.env?.DEV !== true) return;
   console.warn(
-    `[i18n] no ${currentLocale} translation for ${JSON.stringify(text)}`,
+    `[i18n] no ${getLocale()} translation for ${JSON.stringify(text)}`,
   );
 }
 
@@ -89,7 +143,7 @@ function interpolate(pattern, values) {
 const filled = (value) => typeof value === 'string' && value.trim() !== '';
 
 function lookup(text) {
-  const catalog = CATALOGS[currentLocale];
+  const catalog = CATALOGS[getLocale()];
   if (!catalog) return undefined;
   const entry = Object.hasOwn(catalog, text) ? catalog[text] : undefined;
   if (filled(entry) || (entry && typeof entry === 'object')) return entry;
@@ -124,7 +178,7 @@ export function t(text, values) {
  */
 export function tn(count, one, other, values) {
   const entry = lookup(other);
-  const category = pluralRules(currentLocale).select(count);
+  const category = pluralRules(getLocale()).select(count);
   let pattern;
   const forms = entry && typeof entry === 'object' ? entry : null;
   if (forms && (filled(forms[category]) || filled(forms.other))) {
@@ -141,7 +195,7 @@ export function tn(count, one, other, values) {
  * missing-translation warning.
  */
 export function translateKnown(text) {
-  const catalog = CATALOGS[currentLocale];
+  const catalog = CATALOGS[getLocale()];
   if (!catalog || typeof text !== 'string') return text;
   const entry = Object.hasOwn(catalog, text) ? catalog[text] : undefined;
   return filled(entry) ? entry : text;
@@ -171,10 +225,10 @@ function pluralRules(locale) {
 const formatterCache = new Map();
 
 function cachedFormatter(kind, Constructor, options) {
-  const cacheKey = `${kind}|${currentLocale}|${options ? JSON.stringify(options) : ''}`;
+  const cacheKey = `${kind}|${getLocale()}|${options ? JSON.stringify(options) : ''}`;
   let formatter = formatterCache.get(cacheKey);
   if (!formatter) {
-    formatter = new Constructor(currentLocale, options);
+    formatter = new Constructor(getLocale(), options);
     formatterCache.set(cacheKey, formatter);
   }
   return formatter;
@@ -210,7 +264,7 @@ export function formatUtcDayMonth(value) {
     ? Date.UTC(Number(written[1]), Number(written[2]) - 1, Number(written[3]))
     : new Date(value).getTime();
   if (!Number.isFinite(time)) return '';
-  if (currentLocale === 'en') return new Date(time).toISOString().slice(5, 10);
+  if (getLocale() === 'en') return new Date(time).toISOString().slice(5, 10);
   return cachedFormatter('date', Intl.DateTimeFormat, UTC_DAY_MONTH).format(
     time,
   );
@@ -228,7 +282,7 @@ export function formatRelativeTime(value, unit = 'second', options) {
   }).format(value, unit);
   // CLDR spaces Japanese (5 分前); the ja catalog writes the number and its
   // unit together (5分前), so the two must not differ on one screen.
-  return currentLocale === 'ja'
+  return getLocale() === 'ja'
     ? text.replace(/(?<=\d) (?=\p{Script=Han})/gu, '')
     : text;
 }
@@ -255,75 +309,57 @@ const DOCUMENT_TRANSLATION_TARGETS = Object.freeze([
   ['data-i18n-placeholder', 'placeholder'],
 ]);
 
+// Per element, the English source a pass read and the text it wrote, so a
+// later pass in another locale, English included, starts from the source
+// rather than from that text. Text that code wrote since is the new source.
+const documentSources = new WeakMap();
+
 /**
- * Translate every opted-in element in `doc`. Runs once at boot; switching
- * locale reloads the page.
+ * Translate every opted-in element in `doc` into the active locale. Runs at
+ * boot and again after every locale change (the page's own markup, such as
+ * a host's, is not rendered by a view).
  * @param {Document|Element} doc
  * @returns {number} Count of element/attribute writes performed.
  */
 export function applyDocumentTranslations(doc) {
   if (typeof doc?.querySelectorAll !== 'function') return 0;
-  if (!CATALOGS[currentLocale]) return 0;
   let applied = 0;
   for (const [marker, attribute] of DOCUMENT_TRANSLATION_TARGETS) {
     for (const element of doc.querySelectorAll(`[${marker}]`)) {
-      const source = attribute
-        ? element.getAttribute(attribute)
-        : normalizeMarkupText(element.textContent);
+      const read = () =>
+        attribute
+          ? element.getAttribute(attribute)
+          : normalizeMarkupText(element.textContent);
+      let sources = documentSources.get(element);
+      if (!sources) documentSources.set(element, (sources = {}));
+      const shown = read();
+      const known = sources[marker];
+      const source = known && shown === known.written ? known.source : shown;
+      sources[marker] = { source, written: shown };
       if (!source) continue;
       const context = attribute
         ? null
         : element.getAttribute?.('data-i18n-context');
       const text = context ? t(source, { context }) : t(source);
-      if (text === source) continue;
+      if (text === shown) continue;
       if (attribute) element.setAttribute(attribute, text);
       else element.textContent = text;
+      sources[marker].written = read();
       applied += 1;
     }
   }
   return applied;
 }
 
-const unsavedWorkChecks = new Set();
-
 /**
- * Name work that switching language would lose: the switch reloads the page,
- * and the language switch asks first while any check reports something.
- * @param {() => string|null|undefined} check Returns a msg() label (e.g.
- *   msg('unsaved CCTV calibration')) while there is such work, else nothing.
- * @returns {() => void} Removes the check.
+ * Store a locale choice for the next visit and keep the address in step
+ * without reloading: ?lang is dropped once the choice is stored, or carries
+ * the choice where storage is blocked (share links drop it:
+ * ShareLinkManager.copyLink). The hash is kept exactly. setLocale applies
+ * the choice to the page.
+ * @returns {string} The normalized locale.
  */
-export function registerUnsavedWork(check) {
-  if (typeof check !== 'function') return () => {};
-  unsavedWorkChecks.add(check);
-  return () => unsavedWorkChecks.delete(check);
-}
-
-/**
- * What a reload would lose right now, translated, without repeats.
- * @returns {string[]}
- */
-export function describeUnsavedWork() {
-  const labels = new Set();
-  for (const check of unsavedWorkChecks) {
-    try {
-      const label = check();
-      if (typeof label === 'string' && label) labels.add(t(label));
-    } catch {
-      // A failing check must not block the switch.
-    }
-  }
-  return [...labels];
-}
-
-/**
- * Persist a locale choice, then reload preserving window.location.hash exactly
- * and stripping ?lang from the search string, so the stored choice applies.
- * Where storage is blocked, ?lang carries the choice instead (share links
- * drop it: ShareLinkManager.copyLink).
- * @returns {boolean} true when a reload was triggered.
- */
-export function persistLocaleAndReload(
+export function persistLocale(
   locale,
   {
     location = globalThis.location,
@@ -333,28 +369,13 @@ export function persistLocaleAndReload(
 ) {
   const normalized = normalizeLocale(locale) || DEFAULT_LOCALE;
   const stored = writeStoredLocale(normalized, storage);
-  if (!location || typeof location.assign !== 'function') return false;
-  let target = location.href;
   try {
-    // Without storage the choice only survives in the URL, so keep it there.
     const url = new URL(location.href);
     if (stored) url.searchParams.delete('lang');
     else url.searchParams.set('lang', normalized);
-    target = url.href;
+    if (url.href !== location.href) history?.replaceState?.(null, '', url.href);
   } catch {
-    // Keep the current href.
+    // Without a location or history the stored choice still applies.
   }
-  // location.assign() to the identical URL does not navigate, so strip ?lang
-  // in place and force a real reload instead.
-  try {
-    history?.replaceState?.(null, '', target);
-  } catch {
-    // replaceState is best-effort; the reload below still applies.
-  }
-  if (typeof location.reload === 'function') {
-    location.reload();
-  } else {
-    location.assign(target);
-  }
-  return true;
+  return normalized;
 }