Merge remote-tracking branch 'origin/main' into ux/context-panel-cleanup

src/ui/applicationShell.js

@@ -1318,7 +1318,7 @@ export class StyleManager extends ShellFacade {
 
   /**
    * Switches the HUD layout variant.
-   * @param {'tactical'|'operator'|'minimal'|'cyber'} variantName - Layout variant.
+   * @param {'tactical'|'minimal'|'cyber'} variantName - Layout variant.
    * @returns {{ok: boolean, layout?: string, visible?: boolean, error?: string}}
    */
   setHudLayout(variantName) {
@@ -1579,7 +1579,7 @@ export class StyleManager extends ShellFacade {
    * 2. Crossfades the new shader stage intensity to 1.
    * 3. Applies style preset defaults (bloom/sharpen/HUD) if applyPreset is true.
    * 4. Updates button highlights, style indicator, slider panel, HUD, and detection overlay.
-   * @param {string} styleName - Target style ('normal'|'retro'|'surveillance'|'thermal'|'anime'|'noir'|'snow').
+   * @param {string} styleName - Target style ('normal'|'retro'|'surveillance'|'thermal'|'anime'|'noir').
    * @param {object} [options]
    * @param {boolean} [options.applyPreset=true] - Whether to apply STYLE_PRESET_DEFAULTS for the new style.
    * @param {boolean} [options.userInitiated=false] - Whether a direct user preset choice owns the Cyber exit style.

src/ui/applicationShortcuts.js

@@ -5,7 +5,6 @@ const STYLE_KEYS = Object.freeze({
   4: 'thermal',
   5: 'anime',
   6: 'noir',
-  7: 'snow',
 });
 
 /**

src/ui/cockpitContext.js

@@ -1,6 +1,6 @@
 /** Contact readouts and nearby-signal presentation for the Cockpit controller. */
 import * as Cesium from 'cesium';
-import { formatNumber, getLocale, t, tn } from '../i18n/index.js';
+import { formatNumber, t, tn } from '../i18n/index.js';
 import { unitLabel } from './unitLabels.js';
 import {
   bearingBetweenCoordinates,
@@ -8,14 +8,17 @@ import {
   relativeBearing,
   resolveCockpitContextReadout,
 } from '../cockpitMath.js';
-import { formatCockpitDistance } from './cockpitPresentation.js';
+import {
+  cockpitUnitCase,
+  formatCockpitDistance,
+} from './cockpitPresentation.js';
 
 /** The Context scope line in the active language (see cockpitMath.js). */
 const LOCALIZED_CONTEXT_SCOPE = Object.freeze({
   window: ({ label, radiusKm }) =>
     t('{label} · {radius} AIR/SEA WINDOW', {
       label,
-      radius: `${radiusKm === null ? '—' : formatNumber(radiusKm)}\u00a0${getLocale().startsWith('zh-') ? unitLabel('km') : unitLabel('km').toUpperCase()}`,
+      radius: `${radiusKm === null ? '—' : formatNumber(radiusKm)}\u00a0${cockpitUnitCase(unitLabel('km'))}`,
     }),
   installations: ({ scope, coverage }) =>
     t('{scope} · INSTALLATIONS {coverage}', { scope, coverage }),

src/ui/cockpitInstruments.js

@@ -268,7 +268,6 @@ export function setVisionMode(mode, { revealParameters = false } = {}) {
     thermal: t('FLIR'),
     anime: t('ANIME'),
     noir: t('NOIR'),
-    snow: t('SNOW'),
   };
   const names = {
     optical: t('Normal'),
@@ -277,7 +276,6 @@ export function setVisionMode(mode, { revealParameters = false } = {}) {
     thermal: t('Thermal'),
     anime: t('Anime'),
     noir: t('Noir'),
-    snow: t('Snow'),
   };
   if (this.visionCurrent) {
     this.visionCurrent.dataset.cockpitVision = next;

src/ui/cockpitPresentation.js

@@ -149,7 +149,15 @@ export function formatCockpitDistance(distanceM) {
     minimumFractionDigits: digits,
     maximumFractionDigits: digits,
   });
-  return getLocale().startsWith('zh-') ? distance : distance.toUpperCase();
+  return cockpitUnitCase(distance);
+}
+
+/**
+ * Upper-case a cockpit unit the HUD way (`9.5 KM`), except in Chinese and
+ * Japanese, which have no case and keep units as the catalog writes them.
+ */
+export function cockpitUnitCase(text) {
+  return /^(zh|ja)(-|$)/.test(getLocale()) ? text : text.toUpperCase();
 }
 
 export function formatCockpitWindDirection(value) {

src/ui/cyberPanelDisclosure.test.mjs

@@ -72,7 +72,7 @@ test('opening already-expanded Radio reveals Context and closes Display', () =>
 });
 
 test('non-Cyber explicit panels and restored preferences retain their existing policy', () => {
-  for (const theme of ['tactical', 'operator', 'minimal', 'cyber']) {
+  for (const theme of ['tactical', 'minimal', 'cyber']) {
     const f = fixture(theme), prior = globalThis.document;
     globalThis.document = f.doc;
     try {

src/ui/cyberSonarControls.test.mjs

@@ -132,7 +132,7 @@ test('rejects the whole invalid request before any mutation', () => {
 });
 
 test('requires Cyber and preserves off state and every omitted setting', () => {
-  for (const theme of ['tactical', 'operator', 'minimal']) {
+  for (const theme of ['tactical', 'minimal']) {
     const f = fixture(theme);
     assert.equal(setCyberSonarControls(f.owner, { enabled: true }, f.doc).ok, false);
     assert.deepEqual(f.calls, []);

src/ui/cyberTheme.test.mjs

@@ -54,8 +54,9 @@ function styleOwner(t, initialVariant = 'cyber') {
   const hud = {
     getVariant: () => variant,
     setVariant: (value) => {
-      variant = value;
-      applyHudUiTheme(root, value);
+      // Normalize like the real HUD so retired layouts fall back.
+      variant = normalizeHudLayout(value);
+      applyHudUiTheme(root, variant);
     },
     setMode: (value) => calls.push(['mode', value]),
     onStyleChange: (value) => calls.push(['style', value]),
@@ -105,7 +106,6 @@ test('visual styles retain Cyber through real preset application without droppin
     'normal',
     'noir',
     'anime',
-    'snow',
     'thermal',
     'retro',
   ]) {
@@ -131,7 +131,7 @@ test('visual styles retain Cyber through real preset application without droppin
 
 test('non-Cyber style presets and explicit HUD choices remain authoritative', (t) => {
   const { owner, hud, root } = styleOwner(t);
-  for (const variant of ['tactical', 'operator', 'minimal']) {
+  for (const variant of ['tactical', 'minimal']) {
     owner._setHudVariant(variant);
     assert.equal(hud.getVariant(), variant);
     assert.equal(root.dataset.uiTheme, undefined);
@@ -150,8 +150,8 @@ test('leaving Cyber without a preset choice restores the prior visual preset', (
   assert.equal(owner._preCyberStyle, 'noir');
   assert.equal(owner._cyberStyleUserSelected, false);
 
-  owner._setHudVariant('operator', { applyVisualDefaults: true });
-  assert.equal(hud.getVariant(), 'operator');
+  owner._setHudVariant('minimal', { applyVisualDefaults: true });
+  assert.equal(hud.getVariant(), 'minimal');
   assert.equal(owner.activeStyle, 'noir');
   assert.equal(owner._preCyberStyle, null);
   assert.equal(owner._cyberStyleUserSelected, false);
@@ -162,26 +162,26 @@ test('a preset explicitly selected in Cyber survives exit and resets for re-entr
   owner.setStyle('noir');
 
   owner._setHudVariant('cyber', { applyVisualDefaults: true });
-  owner.setStyle('snow', { userInitiated: true });
-  assert.equal(owner.activeStyle, 'snow');
+  owner.setStyle('anime', { userInitiated: true });
+  assert.equal(owner.activeStyle, 'anime');
   assert.equal(owner._preCyberStyle, 'noir');
   assert.equal(owner._cyberStyleUserSelected, true);
 
   // Reselecting the active mode must not erase the user's preset intent.
   owner._setHudVariant('cyber', { applyVisualDefaults: true });
   assert.equal(owner._preCyberStyle, 'noir');
-  owner._setHudVariant('operator', { applyVisualDefaults: true });
-  assert.equal(hud.getVariant(), 'operator');
-  assert.equal(owner.activeStyle, 'snow');
+  owner._setHudVariant('minimal', { applyVisualDefaults: true });
+  assert.equal(hud.getVariant(), 'minimal');
+  assert.equal(owner.activeStyle, 'anime');
   assert.equal(owner._preCyberStyle, null);
   assert.equal(owner._cyberStyleUserSelected, false);
 
   // A later untouched Cyber round trip restores the new pre-Cyber preset.
   owner._setHudVariant('cyber', { applyVisualDefaults: true });
   assert.equal(owner.activeStyle, 'thermal');
-  assert.equal(owner._preCyberStyle, 'snow');
+  assert.equal(owner._preCyberStyle, 'anime');
   owner._setHudVariant('minimal', { applyVisualDefaults: true });
-  assert.equal(owner.activeStyle, 'snow');
+  assert.equal(owner.activeStyle, 'anime');
 });
 
 test('an explicit same-value FLIR choice is preserved on Cyber exit', (t) => {
@@ -192,7 +192,7 @@ test('an explicit same-value FLIR choice is preserved on Cyber exit', (t) => {
   owner.setStyle('thermal', { userInitiated: true });
   assert.equal(owner.activeStyle, 'thermal');
   assert.equal(owner._cyberStyleUserSelected, true);
-  owner._setHudVariant('operator', { applyVisualDefaults: true });
+  owner._setHudVariant('minimal', { applyVisualDefaults: true });
   assert.equal(owner.activeStyle, 'thermal');
 });
 
@@ -200,15 +200,15 @@ test('an authoritative same-Cyber reset clears local preset ownership', (t) => {
   const { owner } = styleOwner(t, 'tactical');
   owner.setStyle('noir');
   owner._setHudVariant('cyber', { applyVisualDefaults: true });
-  owner.setStyle('snow', { userInitiated: true });
+  owner.setStyle('anime', { userInitiated: true });
   assert.equal(owner._cyberStyleUserSelected, true);
 
   owner._setHudVariant('cyber');
-  assert.equal(owner.activeStyle, 'snow');
+  assert.equal(owner.activeStyle, 'anime');
   assert.equal(owner._preCyberStyle, null);
   assert.equal(owner._cyberStyleUserSelected, false);
-  owner._setHudVariant('operator', { applyVisualDefaults: true });
-  assert.equal(owner.activeStyle, 'snow');
+  owner._setHudVariant('minimal', { applyVisualDefaults: true });
+  assert.equal(owner.activeStyle, 'anime');
 });
 
 test('Display and voice HUD routes preserve explicit Cyber entry and exit authority', async (t) => {
@@ -226,10 +226,10 @@ test('Display and voice HUD routes preserve explicit Cyber entry and exit author
   const display = makeOwner();
   const hudLayout = new EventTarget();
   hudLayout.value = 'cyber';
-  const snowButton = new EventTarget();
-  snowButton.dataset = { style: 'snow' };
+  const animeButton = new EventTarget();
+  animeButton.dataset = { style: 'anime' };
   const controls = bindDisplayControls({
-    elements: { hudLayout, styleButtons: [snowButton] },
+    elements: { hudLayout, styleButtons: [animeButton] },
     actions: {
       setHudLayout: (value) => display.owner.setHudLayout(value),
       setStyle: (value) =>
@@ -239,12 +239,12 @@ test('Display and voice HUD routes preserve explicit Cyber entry and exit author
   hudLayout.dispatchEvent(new Event('change'));
   assert.equal(display.hud.getVariant(), 'cyber');
   assert.equal(display.owner.activeStyle, 'thermal');
-  snowButton.dispatchEvent(new Event('click'));
-  assert.equal(display.owner.activeStyle, 'snow');
-  hudLayout.value = 'operator';
+  animeButton.dispatchEvent(new Event('click'));
+  assert.equal(display.owner.activeStyle, 'anime');
+  hudLayout.value = 'minimal';
   hudLayout.dispatchEvent(new Event('change'));
-  assert.equal(display.hud.getVariant(), 'operator');
-  assert.equal(display.owner.activeStyle, 'snow');
+  assert.equal(display.hud.getVariant(), 'minimal');
+  assert.equal(display.owner.activeStyle, 'anime');
   controls.destroy();
 
   const voice = makeOwner();
@@ -263,13 +263,13 @@ test('Display and voice HUD routes preserve explicit Cyber entry and exit author
   assert.equal(entered.ok, true);
   assert.equal(voice.hud.getVariant(), 'cyber');
   assert.equal(voice.owner.activeStyle, 'thermal');
-  const selected = await runVoiceAction('set_visual_style', { style: 'snow' });
+  const selected = await runVoiceAction('set_visual_style', { style: 'anime' });
   assert.equal(selected.ok, true);
-  assert.equal(voice.owner.activeStyle, 'snow');
-  const exited = await runVoiceAction('set_hud', { layout: 'operator' });
+  assert.equal(voice.owner.activeStyle, 'anime');
+  const exited = await runVoiceAction('set_hud', { layout: 'minimal' });
   assert.equal(exited.ok, true);
-  assert.equal(voice.hud.getVariant(), 'operator');
-  assert.equal(voice.owner.activeStyle, 'snow');
+  assert.equal(voice.hud.getVariant(), 'minimal');
+  assert.equal(voice.owner.activeStyle, 'anime');
 });
 
 test('scope choice and expanded feather survive every HUD layout and both restore paths', async (t) => {
@@ -284,7 +284,7 @@ test('scope choice and expanded feather survive every HUD layout and both restor
   assert.equal(owner._scopeBtn.checked, false);
   assert.equal(owner._scopeFeatherSlider.disabled, true);
   assert.equal(owner._scopeFeatherSlider.value, '200');
-  for (const layout of ['minimal', 'operator', 'cyber', 'tactical']) {
+  for (const layout of ['minimal', 'cyber', 'tactical']) {
     owner._setHudVariant(layout, { applyVisualDefaults: true });
     assert.equal(isScopeMaskEnabled(), false, layout);
     assert.equal(getScopeMaskFeather(), 2, layout);
@@ -301,11 +301,18 @@ test('scope choice and expanded feather survive every HUD layout and both restor
   assert.equal(owner._scopeFeatherSlider.value, '200');
 });
 
+test('a scene shot saved with the retired Snow style plays on Normal', async (t) => {
+  const { owner } = styleOwner(t, 'tactical');
+  owner.setStyle('noir');
+  await owner.applyVisualState({ style: 'snow' });
+  assert.equal(owner.activeStyle, 'normal');
+});
+
 test('scene and share HUD transitions do not restore a local pre-Cyber preset', async (t) => {
   const { owner, hud } = styleOwner(t, 'tactical');
   owner.setStyle('noir');
   owner._setHudVariant('cyber', { applyVisualDefaults: true });
-  owner.setStyle('snow', { userInitiated: true });
+  owner.setStyle('anime', { userInitiated: true });
   assert.equal(owner._cyberStyleUserSelected, true);
 
   await owner.applyVisualState({ style: 'retro', hud: { variant: 'cyber' } });
@@ -313,13 +320,13 @@ test('scene and share HUD transitions do not restore a local pre-Cyber preset',
   assert.equal(owner.activeStyle, 'retro');
   assert.equal(owner._preCyberStyle, null);
   assert.equal(owner._cyberStyleUserSelected, false);
-  owner._setHudVariant('operator', { applyVisualDefaults: true });
+  owner._setHudVariant('minimal', { applyVisualDefaults: true });
   assert.equal(owner.activeStyle, 'retro');
 
   owner.setStyle('surveillance');
   owner._setHudVariant('cyber', { applyVisualDefaults: true });
   assert.equal(owner._preCyberStyle, 'surveillance');
-  owner.setStyle('snow', { userInitiated: true });
+  owner.setStyle('anime', { userInitiated: true });
   await owner.restoreShareState({
     style: 'thermal',
     hudVariant: 'cyber',
@@ -342,7 +349,8 @@ test('scene and share restoration override Cyber and preserve restored Cyber par
     style: 'surveillance',
     hudVariant: 'operator',
   });
-  assert.equal(hud.getVariant(), 'operator');
+  // A link saved with the retired Operator layout restores as Tactical.
+  assert.equal(hud.getVariant(), 'tactical');
   await owner.restoreShareState({
     style: 'thermal',
     hudVariant: 'cyber',
@@ -564,8 +572,9 @@ test('Cyber side panels share one width and one framed surface material', () =>
 });
 
 test('Cyber is a canonical HUD layout with a safe Tactical fallback', () => {
-  assert.deepEqual(HUD_LAYOUTS, ['tactical', 'operator', 'minimal', 'cyber']);
+  assert.deepEqual(HUD_LAYOUTS, ['tactical', 'minimal', 'cyber']);
   assert.equal(normalizeHudLayout('CYBER'), 'cyber');
+  assert.equal(normalizeHudLayout('operator'), 'tactical');
   assert.equal(normalizeHudLayout('unknown'), 'tactical');
 });
 
@@ -597,7 +606,7 @@ test('an explicit transition into Cyber selects FLIR with Ironbow 0.42 once', ()
   );
   assert.equal(cyberVisualDefaultsForHudTransition('tactical', 'cyber'), null);
   assert.equal(
-    cyberVisualDefaultsForHudTransition('cyber', 'operator', {
+    cyberVisualDefaultsForHudTransition('cyber', 'minimal', {
       explicit: true,
     }),
     null,
@@ -714,10 +723,7 @@ test('the Display selector, voice schema and final stylesheet expose Cyber', ()
   assert.match(cyberStyles, /\.hud-top-left/);
   assert.match(cyberStyles, /transparent 0 min\(40vw, 52vh\)/);
   assert.match(cyberStyles, /\.hud-bottom-bar \{\s*display: none;/);
-  assert.match(
-    cyberStyles,
-    /#intel-hud\[data-variant='cyber'\] \.hud-top-bar \{\s*display: none;/,
-  );
+  assert.doesNotMatch(cyberStyles, /\.hud-top-bar/);
   // Cyber shares the measured rail/credit keep-out rather than overriding it.
   assert.doesNotMatch(
     cyberStyles,

src/ui/layerPanel.js

@@ -136,9 +136,11 @@ export function layerKeyRequirementTooltip(layer = {}) {
 
 const ROW_TEXT_SEPARATOR = ' · ';
 
-// A short Latin code joined by hyphens. Longer runs (a URL, a token in an
-// error) keep their break opportunities so they cannot overflow the rail.
-const HYPHENATED_CODE = /[A-Za-z0-9]+(?:-[A-Za-z0-9]+)+/g;
+// A short Latin code joined by hyphens: every part after a hyphen is capitals
+// or digits (ADS-B, RTL-SDR, GTFS-RT). A compound such as "ALPR-Kameras" is a
+// word, not a code, and may break at its hyphen. Longer runs (a URL, a token
+// in an error) keep their break opportunities so they cannot overflow the rail.
+const HYPHENATED_CODE = /\b[A-Za-z0-9]+(?:-[A-Z0-9]+)+(?![A-Za-z0-9])/g;
 const HYPHENATED_CODE_MAX = 16;
 
 /** A span for one run of row text; `keep` stops the browser breaking inside it. */

src/ui/layerPanel.test.mjs

@@ -324,6 +324,15 @@ test('row text keeps a hyphenated code whole and never starts a line with the se
     assert.equal(plain.textContent, 'Satellites');
     assert.equal(plain.children.length, 0);
 
+    const compound = element();
+    setRowText(compound, 'Kartierte ALPR-Kameras · ADS-B-Flüge');
+    assert.equal(text(compound), 'Kartierte ALPR-Kameras · ADS-B-Flüge');
+    assert.deepEqual(
+      kept(compound),
+      [' ·', 'ADS-B'],
+      'a compound may break at its hyphen; the code inside it stays whole',
+    );
+
     const long = element();
     setRowText(long, 'see https-proxy-endpoint-config-x');
     assert.deepEqual(kept(long), [], 'a long hyphenated run may still wrap');

src/ui/localePicker.test.mjs

@@ -31,6 +31,9 @@ const MANY = Object.keys(NAMES);
 
 const codes = (rows) => rows.map((row) => row.code);
 
+// Few enough languages that the picker has no search field.
+const UNSEARCHED = ['en', 'es', 'ru', 'uk', 'zh-CN', 'zh-Hant'];
+
 test('the current language comes first, the rest by their own names', () => {
   assert.deepEqual(
     codes(
@@ -40,7 +43,7 @@ test('the current language comes first, the rest by their own names', () => {
         nativeNames: LOCALE_NAMES,
       }),
     ),
-    ['ru', 'en', 'es', 'zh-CN', 'zh-Hant'],
+    ['ru', 'uk', 'de', 'en', 'es', 'fr', 'it', 'pt', 'zh-CN', 'zh-Hant', 'ja'],
   );
   assert.deepEqual(
     codes(
@@ -50,7 +53,7 @@ test('the current language comes first, the rest by their own names', () => {
         nativeNames: LOCALE_NAMES,
       }),
     ),
-    ['es', 'en', 'ru', 'zh-CN', 'zh-Hant'],
+    ['es', 'de', 'en', 'fr', 'it', 'pt', 'ru', 'uk', 'zh-CN', 'zh-Hant', 'ja'],
   );
   assert.deepEqual(
     codes(
@@ -60,7 +63,7 @@ test('the current language comes first, the rest by their own names', () => {
         nativeNames: LOCALE_NAMES,
       }),
     ),
-    ['en', 'es', 'ru', 'zh-CN', 'zh-Hant'],
+    ['en', 'de', 'es', 'fr', 'it', 'pt', 'ru', 'uk', 'zh-CN', 'zh-Hant', 'ja'],
   );
   const rows = buildLocaleOptions({
     locales: MANY,
@@ -95,6 +98,8 @@ test('each row gets the interface-language name for search, unless it only repea
   const byCode = Object.fromEntries(rows.map((row) => [row.code, row]));
   assert.equal(byCode.en.localName, 'английский');
   assert.equal(byCode.es.localName, 'испанский');
+  assert.equal(byCode.de.localName, 'немецкий');
+  assert.equal(byCode.fr.localName, 'французский');
   assert.equal(byCode.ru.localName, '', 'русский only repeats Русский');
   const english = buildLocaleOptions({
     locales: LOCALES,
@@ -103,6 +108,7 @@ test('each row gets the interface-language name for search, unless it only repea
     localName: createLocalNameReader('en'),
   });
   assert.equal(english.find((row) => row.code === 'es').localName, 'Spanish');
+  assert.equal(english.find((row) => row.code === 'fr').localName, 'French');
 });
 
 test('without Intl.DisplayNames the interface-language name is simply left out', () => {
@@ -165,7 +171,10 @@ test('search folds case and diacritics, and matches either name or the code', ()
 
 test('the search field appears only above the threshold', () => {
   assert.equal(LOCALE_SEARCH_THRESHOLD, 8);
-  assert.equal(createLocalePickerModel({ current: 'en' }).searchable, false);
+  assert.equal(
+    createLocalePickerModel({ current: 'en' }).searchable,
+    LOCALES.length > LOCALE_SEARCH_THRESHOLD,
+  );
   const eight = MANY.slice(0, 8);
   assert.equal(
     createLocalePickerModel({
@@ -250,6 +259,7 @@ test('type-ahead cycles by first letter and refines with more letters', () => {
 
 test('keyboard model: open on the current language, move, choose, close', () => {
   const model = createLocalePickerModel({
+    locales: UNSEARCHED,
     current: 'ru',
     localName: createLocalNameReader('ru'),
   });
@@ -261,7 +271,8 @@ test('keyboard model: open on the current language, move, choose, close', () =>
   model.openList();
   assert.equal(model.activeOption.code, 'ru');
   assert.deepEqual(model.keydown({ key: 'ArrowDown' }), { handled: true });
-  assert.equal(model.activeOption.code, 'en');
+  // Russian collation puts the other Cyrillic name next.
+  assert.equal(model.activeOption.code, 'uk');
   model.keydown({ key: 'End' });
   assert.equal(model.activeOption.code, 'zh-Hant');
   model.keydown({ key: 'Home' });
@@ -275,7 +286,7 @@ test('keyboard model: open on the current language, move, choose, close', () =>
   model.keydown({ key: 'ArrowDown' });
   assert.deepEqual(model.keydown({ key: ' ' }), {
     handled: true,
-    choose: 'en',
+    choose: 'uk',
   });
   assert.deepEqual(model.keydown({ key: 'Escape' }), {
     handled: true,
@@ -292,7 +303,11 @@ test('keyboard model: open on the current language, move, choose, close', () =>
 
 test('keyboard model: type-ahead resets after a pause and ignores shortcuts', () => {
   let clock = 0;
-  const model = createLocalePickerModel({ current: 'en', now: () => clock });
+  const model = createLocalePickerModel({
+    locales: UNSEARCHED,
+    current: 'en',
+    now: () => clock,
+  });
   model.openList();
   assert.deepEqual(model.keydown({ key: 'e' }), { handled: true });
   assert.equal(model.activeOption.code, 'es');

src/ui/panelLayoutController.js

@@ -20,7 +20,6 @@ const LEFT_STACK_OBSTACLE_SELECTOR = [
   '#intel-hud .hud-top-right',
   '#intel-hud .hud-bottom-left',
   '#intel-hud .hud-bottom-right',
-  '#intel-hud .hud-top-bar',
   '#intel-hud .hud-bottom-bar',
   '#intel-hud .hud-left-edge',
   '#intel-hud .hud-right-edge',
@@ -50,7 +49,6 @@ const RIGHT_STACK_OBSTACLE_SELECTOR = [
   '#intel-hud .hud-top-right',
   '#intel-hud .hud-bottom-left',
   '#intel-hud .hud-bottom-right',
-  '#intel-hud .hud-top-bar',
   '#intel-hud .hud-bottom-bar',
   '#intel-hud .hud-left-edge',
   '#intel-hud .hud-right-edge',

src/ui/panelRails.test.mjs

@@ -39,7 +39,7 @@ test('Cyber restores one expanded owner, keeps launchers, and restores other the
       true,
       'layout does not reopen a peer',
     );
-    f.options.hud.variant = 'operator';
+    f.options.hud.variant = 'minimal';
     f.run();
     assert.equal(f.first.classList.contains('collapsed'), false);
     assert.equal(

src/ui/scenePresentation.js

@@ -12,7 +12,6 @@ const STYLE_LABELS = Object.freeze({
   thermal: msg('FLIR'),
   anime: msg('ANIME'),
   noir: msg('NOIR'),
-  snow: msg('SNOW'),
 });
 
 const DETECTION_MODE_LABELS = Object.freeze({

src/ui/styles/bhote-koshi.css

@@ -518,14 +518,15 @@ html:not([lang='en']) .bhote-event-story-current strong {
   -webkit-line-clamp: 2;
 }
 
-/* Phase / time / sources run long in translation: allow a second line. */
+/* Phase / time / sources / imagery note run long in translation: allow up to
+   three lines so the last status is not cut off. */
 html:not([lang='en']) .bhote-event-story-current small {
   display: -webkit-box;
   margin-top: 3px;
   text-overflow: clip;
   white-space: normal;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: 3;
 }
 
 .bhote-event-actions {

src/ui/styles/cjk.css

@@ -1,6 +1,7 @@
-/* Tight tracking keeps Chinese labels readable; preserve Latin tracking for
-   intel HUD readouts and content marked translate="no", including its containers. */
-html:lang(zh)
+/* Chinese and Japanese text. Tight tracking keeps CJK labels readable;
+   preserve Latin tracking for intel HUD readouts and content marked
+   translate="no", including its containers. */
+html:is(:lang(zh), :lang(ja))
   body
   :not(
     #intel-hud,
@@ -12,40 +13,67 @@ html:lang(zh)
   letter-spacing: 0.02em !important;
 }
 
-/* Keep small Chinese labels legible at a minimum of 9px. */
-html:lang(zh) #command-dock .gev-mic-label,
-html:lang(zh) #command-dock #gev-voice-detail,
-html:lang(zh) .gev-voice-tier-btn,
-html:lang(zh) .panel-layer-toggle {
+/* Japanese line breaking: never start a line with ー, a small kana or closing
+   punctuation (プレビュ / ー). */
+html:lang(ja) body {
+  line-break: strict;
+}
+
+/* Keep small CJK labels legible at a minimum of 9px. */
+html:is(:lang(zh), :lang(ja)) #command-dock .gev-mic-label,
+html:is(:lang(zh), :lang(ja)) #command-dock #gev-voice-detail,
+html:is(:lang(zh), :lang(ja)) .gev-voice-tier-btn,
+html:is(:lang(zh), :lang(ja)) .panel-layer-toggle {
   font-size: 9px;
 }
 
 /* A two-glyph button label must not break between its glyphs. */
-html:lang(zh) .pp-mode-btn {
+html:is(:lang(zh), :lang(ja)) .pp-mode-btn {
+  white-space: nowrap;
+}
+
+/* Japanese segment labels are short words (すべて, 平面): keep each whole. */
+html:lang(ja) .gev-segment {
   white-space: nowrap;
 }
 
 /* Keep unit symbols in their catalog case, including the cockpit readouts. */
-html:lang(zh) #intel-hud *,
-html:lang(zh) #cockpit-hud * {
+html:is(:lang(zh), :lang(ja)) #intel-hud *,
+html:is(:lang(zh), :lang(ja)) #cockpit-hud * {
   text-transform: none;
 }
 
-/* Move short travel modes (步行 / 骑行) to the next line as whole words. */
-html:lang(zh) [data-layer-id='directions'] .data-toggle-meta {
+/* Move short travel modes (步行 / 骑行, 徒歩 / 自転車) to the next line as
+   whole words. */
+html:is(:lang(zh), :lang(ja)) [data-layer-id='directions'] .data-toggle-meta {
   word-break: keep-all;
   overflow-wrap: break-word;
 }
 
 /* Leave room for the complete sensor name and resolution on two lines. */
-html:lang(zh) .recent-imagery-readout .ri-strip {
+html:is(:lang(zh), :lang(ja)) .recent-imagery-readout .ri-strip {
   height: 131px;
 }
-html:lang(zh) .recent-imagery-readout .ri-card {
+html:is(:lang(zh), :lang(ja)) .recent-imagery-readout .ri-card {
   height: 123px;
   grid-template-rows: 42px 13px 22px 11px 18px;
 }
-html:lang(zh) .recent-imagery-readout .ri-card-sensor {
+html:is(:lang(zh), :lang(ja)) .recent-imagery-readout .ri-card-sensor {
   white-space: normal;
   text-overflow: clip;
 }
+
+/* The Japanese imagery slot line wraps at its · separators, never inside a
+   word (プレ / ビュー); a run too long for the line still breaks. */
+html:lang(ja) .recent-imagery-readout .ri-slot-value {
+  word-break: keep-all;
+  overflow-wrap: break-word;
+}
+
+/* Japanese layer status lines wrap at their spaces and · separators, so an
+   age such as 1分以内 stays whole (更新 1 / 分以内); a run too long for the
+   line still breaks. */
+html:lang(ja) .data-toggle-meta {
+  word-break: keep-all;
+  overflow-wrap: break-word;
+}

src/ui/styles/cockpit.css

@@ -730,7 +730,8 @@ html:not([lang='en']) .cockpit-roll-token.is-separator {
 }
 .cockpit-vision-controls {
   display: grid;
-  grid-template-columns: 48px 58px 48px;
+  /* The current style grows for a long translated name (ЗВИЧАЙНИЙ). */
+  grid-template-columns: 48px minmax(58px, max-content) 48px;
   align-items: stretch;
   gap: 2px;
   margin-top: 2px;

src/ui/styles/command-dock-trays.css

@@ -463,17 +463,10 @@ body:not(.ui-clean-view):not(.recording-mode):has(
 }
 
 #intel-hud[data-variant='tactical'] .hud-bottom-left,
-#intel-hud[data-variant='tactical'] .hud-bottom-right,
-#intel-hud[data-variant='operator'] .hud-bottom-left,
-#intel-hud[data-variant='operator'] .hud-bottom-right {
+#intel-hud[data-variant='tactical'] .hud-bottom-right {
   bottom: calc(2vh + 6.5rem);
 }
 
-#intel-hud[data-variant='operator'] .hud-bottom-bar {
-  bottom: calc(2vh + 9.8rem);
-  width: min(48vw, 680px);
-}
-
 #intel-hud[data-variant='minimal'] .hud-bottom-left {
   bottom: calc(2vh + 5.4rem);
 }

src/ui/styles/cyber.css

@@ -747,12 +747,6 @@
   .btn-icon::before {
   content: '◐';
 }
-:root[data-ui-theme='cyber']
-  #command-dock
-  .style-btn[data-style='snow']
-  .btn-icon::before {
-  content: '❄︎';
-}
 
 :root[data-ui-theme='cyber'] :where(#bloom-toggle, #sharpen-toggle) {
   font-size: 0;
@@ -1567,10 +1561,6 @@
   clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
 }
 
-#intel-hud[data-variant='cyber'] .hud-top-bar {
-  display: none;
-}
-
 /* Cyber keeps the useful style and locality readouts, not fictional IDs. */
 #intel-hud[data-variant='cyber'] .hud-top-left .hud-classification,
 #intel-hud[data-variant='cyber'] .hud-top-left .hud-system {
@@ -1873,7 +1863,6 @@
     background-size: 78px 78px;
   }
 
-  #intel-hud[data-variant='cyber'] .hud-top-bar,
   #intel-hud[data-variant='cyber'] .hud-bottom-bar {
     display: none;
   }

src/ui/styles/mobile-shell.css

@@ -107,7 +107,6 @@ body.mobile-shell #top-center-actions {
 /* ── HUD: one compact readout under the top bar ────────────────────────── */
 body.mobile-shell #intel-hud .hud-edge,
 body.mobile-shell #intel-hud .hud-corner,
-body.mobile-shell #intel-hud .hud-top-bar,
 body.mobile-shell #intel-hud .hud-bottom-bar {
   display: none;
 }

src/ui/styles/overlays.css

@@ -124,7 +124,6 @@
   line-height: 1.6;
 }
 
-.hud-top-bar,
 .hud-bottom-bar {
   display: none;
   position: absolute;
@@ -141,24 +140,11 @@
   pointer-events: none;
 }
 
-.hud-top-bar {
-  top: 70px;
-}
-
 .hud-bottom-bar {
   bottom: 110px;
   justify-content: center;
 }
 
-.hud-top-bar-center {
-  opacity: 0.84;
-}
-
-.hud-top-bar-left,
-.hud-top-bar-right {
-  opacity: 0.6;
-}
-
 /* Corner blocks */
 .hud-corner {
   position: absolute;
@@ -298,54 +284,15 @@
   gap: 20px;
 }
 
-#intel-hud[data-variant='tactical'] .hud-top-bar,
 #intel-hud[data-variant='tactical'] .hud-bottom-bar {
   display: none;
 }
 
-#intel-hud[data-variant='operator'] .hud-top-bar,
-#intel-hud[data-variant='operator'] .hud-bottom-bar {
-  display: flex;
-}
-
-#intel-hud[data-variant='operator'] .hud-top-bar {
-  top: max(10vh, 90px);
-  left: 50%;
-  right: auto;
-  width: min(52vw, 720px);
-  transform: translateX(-50%);
-  border-color: rgba(255, 255, 255, 0.24);
-  background: linear-gradient(90deg, rgba(0, 0, 0, 0.56), rgba(8, 26, 34, 0.5));
-  box-shadow: 0 0 24px rgba(0, 255, 255, 0.08);
-}
-
 #intel-hud[data-variant='tactical'] .hud-top-left,
-#intel-hud[data-variant='tactical'] .hud-top-right,
-#intel-hud[data-variant='operator'] .hud-top-left,
-#intel-hud[data-variant='operator'] .hud-top-right {
+#intel-hud[data-variant='tactical'] .hud-top-right {
   top: max(14vh, 136px);
 }
 
-#intel-hud[data-variant='operator'] .hud-bottom-bar {
-  border-color: rgba(255, 255, 255, 0.2);
-  background: linear-gradient(
-    90deg,
-    rgba(0, 0, 0, 0.52),
-    rgba(8, 22, 18, 0.52)
-  );
-}
-
-#intel-hud[data-variant='operator'] .hud-corner {
-  padding: 8px 10px;
-  border: 1px solid rgba(255, 255, 255, 0.16);
-  border-radius: 8px;
-  background: rgba(0, 0, 0, 0.36);
-}
-
-#intel-hud[data-variant='operator'] .hud-bracket {
-  display: none;
-}
-
 #intel-hud[data-variant='minimal'] .hud-top-right,
 #intel-hud[data-variant='minimal'] .hud-bottom-right,
 #intel-hud[data-variant='minimal'] .hud-left-edge,
@@ -378,11 +325,7 @@
 }
 
 :root[data-scope-mask='off']
-  #intel-hud:is(
-    [data-variant='minimal'],
-    [data-variant='operator'],
-    [data-variant='tactical']
-  )
+  #intel-hud:is([data-variant='minimal'], [data-variant='tactical'])
   .hud-readout,
 :root[data-scope-mask='off']:not([data-ui-theme='cyber']) .scene-text-holdout {
   background: rgba(0, 0, 0, 0.7);
@@ -399,11 +342,7 @@
 }
 
 :root[data-scope-mask='off']
-  #intel-hud:is(
-    [data-variant='minimal'],
-    [data-variant='operator'],
-    [data-variant='tactical']
-  )
+  #intel-hud:is([data-variant='minimal'], [data-variant='tactical'])
   .hud-readout {
   display: block;
   width: max-content;
@@ -413,11 +352,7 @@
 }
 
 :root[data-scope-mask='off']
-  #intel-hud:is(
-    [data-variant='minimal'],
-    [data-variant='operator'],
-    [data-variant='tactical']
-  )
+  #intel-hud:is([data-variant='minimal'], [data-variant='tactical'])
   :is(.hud-top-right, .hud-bottom-right)
   .hud-readout,
 :root[data-scope-mask='off']:not([data-ui-theme='cyber'])
@@ -427,38 +362,35 @@
 }
 
 /* Preserve glyph opacity without dimming the vertical backplates. */
-:root[data-scope-mask='off']
-  #intel-hud:is([data-variant='operator'], [data-variant='tactical'])
-  .hud-edge {
+:root[data-scope-mask='off'] #intel-hud[data-variant='tactical'] .hud-edge {
   opacity: 1;
 }
 
 :root[data-scope-mask='off']
-  #intel-hud:is([data-variant='operator'], [data-variant='tactical'])
+  #intel-hud[data-variant='tactical']
   .hud-edge
   .hud-readout
   > * {
   opacity: 0.5;
 }
 
-:root[data-scope-mask='off'] #intel-hud[data-variant='operator'] .hud-corner,
 :root[data-scope-mask='off']
-  #intel-hud:is([data-variant='minimal'], [data-variant='operator'])
-  :is(.hud-top-bar, .hud-bottom-bar) {
+  #intel-hud[data-variant='minimal']
+  .hud-bottom-bar {
   background: transparent;
 }
 
 :root[data-scope-mask='off']
-  #intel-hud:is([data-variant='minimal'], [data-variant='operator'])
-  :is(.hud-top-bar, .hud-bottom-bar) {
+  #intel-hud[data-variant='minimal']
+  .hud-bottom-bar {
   width: fit-content;
   max-width: calc(100vw - 120px);
   gap: 24px;
 }
 
 :root[data-scope-mask='off']
-  #intel-hud:is([data-variant='minimal'], [data-variant='operator'])
-  :is(.hud-top-bar, .hud-bottom-bar)
+  #intel-hud[data-variant='minimal']
+  .hud-bottom-bar
   .hud-readout {
   overflow: hidden;
   white-space: nowrap;

src/ui/styles/radio.css

@@ -690,6 +690,12 @@ html:not([lang='en']) .data-count {
   text-wrap: balance;
 }
 
+/* The status column keeps its width, so a wide chip (WIRD AKTIVIERT) never
+   overlaps the name; the name wraps in the room left beside it. */
+html:not([lang='en']) .data-toggle-right {
+  flex: none;
+}
+
 /* Row text pieces that must not break inside: a hyphenated code (ADS-B) and
    the space before a " · " separator (see setRowText in layerPanel.js). */
 html:not([lang='en']) .data-keep {

src/ui/styles/responsive.css

@@ -98,25 +98,12 @@
     display: none;
   }
 
-  .hud-top-bar,
   .hud-bottom-bar {
     width: calc(100vw - 24px);
     left: 12px;
     transform: none;
   }
 
-  .hud-top-bar {
-    top: 54px;
-    font-size: 9px;
-  }
-
-  #intel-hud[data-variant='operator'] .hud-top-bar {
-    left: 12px;
-    right: auto;
-    width: calc(100vw - 24px);
-    transform: none;
-  }
-
   .hud-bottom-bar {
     bottom: 90px;
     font-size: 9px;

src/ui/templates/command-dock.html

@@ -43,11 +43,6 @@
           <span class="btn-label" data-i18n>Noir</span>
           <span class="btn-key">6</span>
         </button>
-        <button class="style-btn" data-style="snow" title="Add a cold, snowy whiteout treatment to the scene." data-i18n-title>
-          <span class="btn-icon">❄</span>
-          <span class="btn-label" data-i18n>Snow</span>
-          <span class="btn-key">7</span>
-        </button>
       </div>
       <section class="map-source-section" aria-labelledby="map-source-label">
         <div class="map-source-heading">

src/ui/templates/context.html

@@ -92,7 +92,7 @@
               <button id="radio-enable-btn" class="panel-layer-toggle" type="button" aria-pressed="false" data-i18n>ENABLE</button>
               <label class="radio-filter-label" for="radio-filter" data-i18n>STATION TAG</label>
               <select class="gev-field" id="radio-filter" aria-label="Filter stations by station tag" disabled data-i18n-aria-label>
-                <option value="all" data-i18n>All</option>
+                <option value="all" data-i18n data-i18n-context="radio tag">All</option>
               </select>
             </div>
             <div id="radio-station-card" class="radio-station-card" aria-live="polite">

src/ui/templates/display-controls.html

@@ -15,7 +15,6 @@
         <span class="pp-slider-mini-label" data-i18n>Layout</span>
         <select id="hud-layout-select" class="pp-select gev-field gev-field--compact" aria-label="HUD layout" data-i18n-aria-label>
           <option value="tactical" data-i18n>Tactical</option>
-          <option value="operator" data-i18n>Operator</option>
           <option value="minimal" data-i18n>Minimal</option>
           <option value="cyber" data-i18n>Cyber</option>
         </select>

src/ui/unitLabels.js

@@ -1,4 +1,4 @@
-import { formatNumber, msg, t } from '../i18n/index.js';
+import { formatNumber, getLocale, msg, t } from '../i18n/index.js';
 
 // Unit ids stay English in data, params and AI-tool readings; only the label
 // shown on the page is translated. dBZ and °C read the same in every language.
@@ -23,6 +23,17 @@ export function unitLabel(unit) {
   return Object.hasOwn(UNIT_LABELS, unit) ? t(UNIT_LABELS[unit]) : unit || '';
 }
 
+/**
+ * What goes between a number and its unit label: a no-break space, except
+ * before a Japanese unit word, which follows the number directly (5分, 1時間).
+ */
+export function quantitySeparator(label) {
+  return getLocale() === 'ja' &&
+    /^[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}]/u.test(label)
+    ? ''
+    : '\u00a0';
+}
+
 /**
  * A number and its unit that never break apart: "22,0 км/ч". Readings carry
  * no digit grouping ("1008 hPa"), as on weather charts.
@@ -30,7 +41,7 @@ export function unitLabel(unit) {
 export function formatQuantity(value, unit, options) {
   const label = unitLabel(unit);
   const number = formatNumber(value, { useGrouping: false, ...options });
-  return label ? `${number}\u00a0${label}` : number;
+  return label ? `${number}${quantitySeparator(label)}${label}` : number;
 }
 
 /**

src/ui/unitLabels.test.mjs

@@ -44,3 +44,14 @@ test('other languages get their decimal separator and no digit grouping', () =>
     setLocale('en');
   }
 });
+
+test('Japanese unit words follow the number directly; symbols keep the space', () => {
+  try {
+    setLocale('ja');
+    assert.equal(formatQuantity(5, 'min'), '5分');
+    assert.equal(formatQuantity(1, 'h'), '1時間');
+    assert.equal(formatQuantity(95, 'kt'), '95\u00a0kt');
+  } finally {
+    setLocale('en');
+  }
+});

src/ui/visualEffects.test.mjs

@@ -77,7 +77,7 @@ test('construction is inert and initialization creates one owned pipeline', () =
   assert.equal(f.frames.size, 0);
   f.effects.initStyles();
   f.effects.initPostProcess();
-  assert.equal(f.stages.size, 7);
+  assert.equal(f.stages.size, 6);
   assert.ok(
     Object.values(f.effects.stages).every(
       (stage) => !stage.enabled && stage.uniforms.intensity === 0,
@@ -85,7 +85,7 @@ test('construction is inert and initialization creates one owned pipeline', () =
   );
   f.effects.initStyles();
   f.effects.initPostProcess();
-  assert.equal(f.stages.size, 7);
+  assert.equal(f.stages.size, 6);
   f.effects.destroy();
 });
 
@@ -252,7 +252,7 @@ test('stop revokes pending work immediately but retains stages until final destr
   assert.equal(f.frames.size, 0);
   assert.equal(
     f.stages.size,
-    7,
+    6,
     'Context and Cockpit may still be releasing these stages',
   );
   const intensity = f.effects.stages.retro.uniforms.intensity;
@@ -281,7 +281,7 @@ test('destroying one instance does not remove another pipeline or clock', () =>
   a.effects.destroy();
   b.tick(250);
   assert.equal(a.stages.size, 0);
-  assert.equal(b.stages.size, 6);
+  assert.equal(b.stages.size, 5);
   assert.equal(b.effects.stages.retro.uniforms.intensity, 0.5);
   b.effects.destroy();
 });

src/ui/visualInput.test.mjs

@@ -73,13 +73,13 @@ function shortcuts() {
   return { documentRef, searchInput, calls, controller, press };
 }
 
-test('number keys retain the seven style mappings', () => {
+test('number keys retain the six style mappings', () => {
   const f = shortcuts();
   for (const key of ['1', '2', '3', '4', '5', '6', '7', '8', 'Space'])
     f.press(key);
   assert.deepEqual(
     f.calls,
-    ['normal', 'retro', 'surveillance', 'thermal', 'anime', 'noir', 'snow'].map(
+    ['normal', 'retro', 'surveillance', 'thermal', 'anime', 'noir'].map(
       (style) => ['setStyle', style],
     ),
   );

src/ui/visualPresets.js

@@ -1,7 +1,6 @@
 import { retroShader } from '../styles/retro.js';
 import { animeShader } from '../styles/anime.js';
 import { noirShader } from '../styles/noir.js';
-import { snowShader } from '../styles/snow.js';
 import { nightVisionShader } from '../styles/surveillance.js';
 import { thermalShader } from '../styles/thermal.js';
 import { BLOOM_INTENSITY_DEFAULT } from '../bloom.js';
@@ -16,7 +15,6 @@ export const STYLES = {
   thermal: thermalShader,
   anime: animeShader,
   noir: noirShader,
-  snow: snowShader,
 };
 
 /**
@@ -156,5 +154,4 @@ export const STYLE_STATUS_LABELS = {
   thermal: msg('FLIR'),
   anime: msg('ANIME'),
   noir: msg('NOIR'),
-  snow: msg('SNOW'),
 };

src/ui/visualSettings.js

@@ -1,6 +1,7 @@
 import { clampScopeFeatherPct } from '../scopeMaskPolicy.js';
 import { syncScopeControls } from './displayControls.js';
 import { STYLE_STATUS_LABELS } from './visualPresets.js';
+import { RETIRED_STYLES } from '../visualStylePolicy.js';
 import { syncSegmentedControl } from './segmentedControl.js';
 import { t } from '../i18n/index.js';
 import { UiLifetime } from './uiLifetime.js';
@@ -1272,8 +1273,9 @@ export class VisualSettings {
     const superseded = () => typeof isCurrent === 'function' && !isCurrent();
     if (superseded()) return false;
 
-    if (state.style && state.style !== this.activeStyle) {
-      this.setStyle(state.style, { applyPreset: false });
+    const style = RETIRED_STYLES.includes(state.style) ? 'normal' : state.style;
+    if (style && style !== this.activeStyle) {
+      this.setStyle(style, { applyPreset: false });
     }
 
     const bloomState = state.bloom || {};