fix(i18n): fix Russian layouts and the gaps the screenshot review found

A review of the Russian UI screenshots found ~90 places where longer words
broke the layout or text was still English. Fixed so they hold for any
language, then shortened where a control is short by design.

- Layout: label columns that size to their text (weather and wind settings,
  Recent Imagery slots and opacity, style sliders, display panel), layer
  list names and icons, buttons that wrap instead of overflowing (CCTV,
  scenes, Bhote Koshi), voice header that always shows the cost, styled
  EN | ES | RU chips, voice error tray above the dock.
- t() context: t('CLEAR', { context: 'action' }) is «СБРОСИТЬ» while the sky
  stays «ЯСНО»; also used for radio categories, voice states and directions.
- Units and dates follow the locale through src/ui/unitLabels.js
  (formatQuantity: localized number, translated unit, non-breaking space):
  wind, pressure, cyclones, directions, CCTV, SDR gain, scene timing, flight
  tooltip, Recent Imagery dates and resolution.
- Newly translated: directions turn-by-turn steps (built from the maneuver;
  English matches the server word for word), HUD mode and summary, voice
  card states, radio categories on the globe, CCTV status, layer source
  lines, scene dialogs (Cancel, file pickers), Bhote Koshi statuses, titles,
  comparison dates and caveat, Recent Imagery notices. Stored data and text
  for AI tools stay English.
- es and ru: 1,885 messages each.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

src/data/bhoteKoshiEmbeddedMedia.js

@@ -40,6 +40,57 @@ const MEDIA_PRECONNECT_ORIGINS = Object.freeze({
   facebook: Object.freeze(['https://www.facebook.com']),
 });
 
+// Authored English in public/events/bhote-koshi-2026/event.json. The pack is
+// data and stays English; these known strings translate at display. Anything
+// else (a newer pack, a credit, a source's own title) shows as authored. A
+// string that is not known whole translates by its " · " parts.
+const EVENT_PACK_TEXT = new Set([
+  // Field reports: our labels (credits after " · " stay) and their statuses.
+  msg('Rasuwagadhi witness video'),
+  msg('Bhote Koshi valley footage'),
+  msg('Flood footage'),
+  msg('Compilation and casualty claims'),
+  msg('SOURCE GEOCONFIRMED · WORLD-PINNED'),
+  msg('SOURCE CREDITED · LOCATION UNRESOLVED'),
+  msg('REFERENCE ONLY · CLAIMS UNVERIFIED'),
+  msg('SOURCE GEOCONFIRMED'),
+  // Reconstruction caveat.
+  msg(
+    '2021 historical reference versus 2026 post-event imagery; changes are cumulative and include the July 2025 Rasuwagadhi flood. Schematic downstream progression, not modeled arrival time; not an official hazard model.',
+  ),
+  // Evidence titles that are more than a place name.
+  msg('Immediate collapse viewpoint'),
+  msg('Collapse viewpoint'),
+  msg('Debris-dammed lake'),
+  msg('Dammed lake'),
+  msg('Second landslide'),
+  msg('Gyirong border gate'),
+  msg('Border gate'),
+  msg('Timure evidence cluster'),
+  msg('Mailung / Upper Trishuli bridge'),
+  msg('Dandagaun viewpoint restaurant'),
+  msg('Dandagaun viewpoint'),
+  msg('Bidur - Trishuli bridge'),
+  msg('Bidur bridge'),
+  msg('Devighat / Taadi Khola Bridge'),
+  msg('Devighat bridge'),
+]);
+
+/**
+ * Display text for an authored event-pack string.
+ * @param {unknown} value
+ * @returns {string}
+ */
+export function bhoteEventText(value) {
+  const text = value == null ? '' : String(value);
+  if (EVENT_PACK_TEXT.has(text)) return t(text);
+  if (!text.includes(' · ')) return text;
+  return text
+    .split(' · ')
+    .map((part) => (EVENT_PACK_TEXT.has(part) ? t(part) : part))
+    .join(' · ');
+}
+
 let _xWidgetsPromise = null;
 let _facebookSdkPromise = null;
 let _facebookEmbedSequence = 0;
@@ -991,7 +1042,9 @@ export function createBhoteKoshiEmbeddedMedia({
       'aria-label',
       t('Embedded {provider} media for {source}', {
         provider: providerLabel(source.provider),
-        source: observation?.title || t('witness source'),
+        source: observation?.title
+          ? bhoteEventText(observation.title)
+          : t('witness source'),
       }),
     );
     const leader = documentRef.createElementNS(
@@ -1006,7 +1059,7 @@ export function createBhoteKoshiEmbeddedMedia({
     player.className = 'bhote-embedded-callout-player';
     const footer = documentRef.createElement('footer');
     const title = documentRef.createElement('strong');
-    title.textContent = String(
+    title.textContent = bhoteEventText(
       observation?.shortTitle || observation?.title || t('Witness source'),
     ).toUpperCase();
     const status = documentRef.createElement('small');
@@ -1060,7 +1113,9 @@ export function createBhoteKoshiEmbeddedMedia({
       }
       iframe.title = t('{provider} media: {source}', {
         provider: providerLabel(source.provider),
-        source: observation?.title || t('witness source'),
+        source: observation?.title
+          ? bhoteEventText(observation.title)
+          : t('witness source'),
       });
       iframe.allow =
         'autoplay; encrypted-media; picture-in-picture; fullscreen';

src/data/bhoteKoshiEvent.js

@@ -19,12 +19,13 @@ import {
   SOURCE_PATH_BEAT_IDS,
 } from './bhoteKoshiShotPaths.js';
 import {
+  bhoteEventText,
   createBhoteKoshiEmbeddedMedia,
   resolveEmbeddedMediaSource,
 } from './bhoteKoshiEmbeddedMedia.js';
 import { acquireImageryComparison } from '../maps/imageryComparison.js';
 import { createImagerySplit } from '../ui/imagerySplit.js';
-import { t, tn, msg } from '../i18n/index.js';
+import { formatDate, t, tn, msg } from '../i18n/index.js';
 
 export const BHOTE_KOSHI_LAYER_ID = 'bhote-koshi-2026';
 export const BHOTE_KOSHI_OVERLAY_SOURCE_ID = 'bhote-koshi-witnesses';
@@ -404,6 +405,58 @@ function evidencePhaseLabel(phase) {
   return phase ? String(phase).toUpperCase() : t('EVIDENCE');
 }
 
+// Imagery endpoint names from the event pack ("2021 HISTORICAL REFERENCE ·
+// 16 OCT 2021"); unknown names and unparseable dates show as authored.
+const IMAGERY_LABEL_NAMES = Object.freeze([
+  [/^(\d{4}) HISTORICAL REFERENCE$/, msg('{year} HISTORICAL REFERENCE')],
+  [/^(\d{4}) POST-EVENT$/, msg('{year} POST-EVENT')],
+]);
+
+/** Day, short month and year in the active language: 16 OCT 2021, 16 ОКТ. 2021. */
+function imageryDateText(observedAt) {
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(String(observedAt || ''));
+  if (!match) return '';
+  const date = new Date(Date.UTC(+match[1], +match[2] - 1, +match[3]));
+  if (Number.isNaN(date.getTime())) return '';
+  const part = (options) => formatDate(date, { timeZone: 'UTC', ...options });
+  return `${part({ day: 'numeric' })} ${part({ month: 'short' })} ${part({ year: 'numeric' })}`.toUpperCase();
+}
+
+/**
+ * Localized name and date of an imagery endpoint for display.
+ * @param {{label?: string, observedAt?: string}} entry
+ * @returns {{name: string, date: string}}
+ */
+export function imageryEndpointLabel(entry) {
+  const label = String(entry?.label || '');
+  const split = label.lastIndexOf(' · ');
+  const authoredName = split >= 0 ? label.slice(0, split) : label;
+  const authoredDate = split >= 0 ? label.slice(split + 3) : '';
+  let name = authoredName;
+  for (const [pattern, message] of IMAGERY_LABEL_NAMES) {
+    const match = pattern.exec(authoredName);
+    if (match) name = t(message, { year: match[1] });
+  }
+  return { name, date: imageryDateText(entry?.observedAt) || authoredDate };
+}
+
+function imageryEndpointText(entry) {
+  const { name, date } = imageryEndpointLabel(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(
@@ -730,7 +783,7 @@ export function updateEvidenceFrame(
   ctx.font = scaledOverlayFont(WORLD_OVERLAY_STYLE.fontTitle);
   ctx.fillText(
     ellipsizeEvidenceText(
-      observation.shortTitle || observation.title,
+      bhoteEventText(observation.shortTitle || observation.title),
       layout.titleChars,
     ).toUpperCase(),
     16,
@@ -916,10 +969,10 @@ function createPanel(event, handlers) {
   `;
 
   const refs = collectPanelReferences(panel);
-  refs.beforeDate.textContent = event.imagery.before.label;
-  refs.afterDate.textContent = event.imagery.after.label;
+  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 = event.reconstruction.caveat;
+  refs.caveat.textContent = bhoteEventText(event.reconstruction.caveat);
 
   for (const report of event.fieldReports) {
     const button = document.createElement('button');
@@ -927,8 +980,8 @@ function createPanel(event, handlers) {
     const status = document.createElement('small');
     button.type = 'button';
     button.className = 'bhote-event-report';
-    label.textContent = report.label;
-    status.textContent = report.status;
+    label.textContent = bhoteEventText(report.label);
+    status.textContent = bhoteEventText(report.status);
     button.append(label, status);
     button.addEventListener('click', () => openExternal(report.url));
     refs.reportList.appendChild(button);
@@ -2362,7 +2415,7 @@ export function createBhoteKoshiEventLayer({
         interactive: true,
         accessibilityLabel: t(
           'Open original source for {source}; capture time unverified',
-          { source: observation.title },
+          { source: bhoteEventText(observation.title) },
         ),
         activate: () => openExternal(observation.media.sourceUrl),
         minDistance: 0,
@@ -2396,7 +2449,7 @@ export function createBhoteKoshiEventLayer({
         position: evidencePositionGetter(index, true),
         cullPosition: anchor,
         variant: 'label',
-        title: `${String(observation.sequence).padStart(2, '0')} · ${observation.shortTitle || observation.title}`,
+        title: `${String(observation.sequence).padStart(2, '0')} · ${bhoteEventText(observation.shortTitle || observation.title)}`,
         details: [],
         accent: WORLD_OVERLAY_STYLE.accent,
         priority: 80_000 - index,
@@ -2602,8 +2655,8 @@ export function createBhoteKoshiEventLayer({
       id: 'bhote-koshi-split-line',
       handleClass: 'bhote-koshi-split-handle',
       cssProperty: '--bhote-koshi-split',
-      beforeTitle: event.imagery.before.label,
-      afterTitle: event.imagery.after.label,
+      beforeTitle: imageryEndpointText(event.imagery.before),
+      afterTitle: imageryEndpointText(event.imagery.after),
       ariaLabel: t('Historical reference and post-event image divider'),
       formatValueText: (beforePercent, afterPercent) =>
         t(
@@ -3058,7 +3111,10 @@ export function createBhoteKoshiEventLayer({
       _panelRefs.playSceneButton,
       'aria-label',
       t('Continue {scene} from next shot', {
-        scene: _sceneContext?.sceneTitle || t('current scene'),
+        scene:
+          _sceneContext?.sceneDisplayTitle ||
+          _sceneContext?.sceneTitle ||
+          t('current scene'),
       }),
     );
     setElementProperty(
@@ -3095,8 +3151,12 @@ export function createBhoteKoshiEventLayer({
       _panelRefs.beatTitle,
       'textContent',
       sceneDirected
-        ? _sceneContext?.shotTitle || t('SCENE SHOT')
-        : observation?.shortTitle || observation?.title || t('EVIDENCE'),
+        ? _sceneContext?.shotDisplayTitle ||
+            _sceneContext?.shotTitle ||
+            t('SCENE SHOT')
+        : observation?.shortTitle || observation?.title
+          ? bhoteEventText(observation.shortTitle || observation.title)
+          : t('EVIDENCE'),
     );
     const sourceCount = Math.max(
       0,
@@ -3120,7 +3180,9 @@ export function createBhoteKoshiEventLayer({
       sceneDirected
         ? t('{scene} / AUTHORED SHOT', {
             scene: String(
-              _sceneContext?.sceneTitle || t('NEPAL FLOOD INCIDENT'),
+              _sceneContext?.sceneDisplayTitle ||
+                _sceneContext?.sceneTitle ||
+                t('NEPAL FLOOD INCIDENT'),
             ).toUpperCase(),
           })
         : beatMeta,
@@ -3150,7 +3212,10 @@ export function createBhoteKoshiEventLayer({
       'aria-label',
       sceneDirected
         ? t('Play {shot}', {
-            shot: _sceneContext?.shotTitle || t('current scene shot'),
+            shot:
+              _sceneContext?.shotDisplayTitle ||
+              _sceneContext?.shotTitle ||
+              t('current scene shot'),
           })
         : t('Play reconstruction'),
     );
@@ -3211,7 +3276,7 @@ export function createBhoteKoshiEventLayer({
     if (_afterLayer) _afterLayer.show = imageryAvailable;
     if (_panelRefs?.caveat) {
       _panelRefs.caveat.textContent = imageryAvailable
-        ? _event?.reconstruction?.caveat || ''
+        ? bhoteEventText(_event?.reconstruction?.caveat || '')
         : t('SCHEMATIC CORRIDOR, NOT MODELED ARRIVAL TIME.');
     }
     if (_panelRefs?.imageryCloudNote)

src/data/directions.test.mjs

@@ -27,6 +27,13 @@ import {
   createApplicationDirectionsLayer,
 } from './directions.js';
 import { GROUND_FLOOR_LIFT_M } from './groundFloor.js';
+import { instructionFor } from './routeSteps.js';
+import { setLocale } from '../i18n/index.js';
+import {
+  directionsInstruction,
+  routeDistanceText,
+  routeDurationText,
+} from '../layers/directions/index.js';
 import {
   claimPointer,
   isPointerFree,
@@ -222,10 +229,10 @@ test('stats guide the user, show progress, and summarize a route honestly', () =
     lastUpdate: 5,
   });
   assert.equal(ready.count, 3);
-  assert.equal(ready.coverage, '21 km · 25 min · Drive');
+  assert.equal(ready.coverage, '21\u00a0km · 25\u00a0min · Drive');
   assert.equal(
     ready.loadingLabel,
-    '21 km · 25 min · Drive',
+    '21\u00a0km · 25\u00a0min · Drive',
     'the summary is the row detail line',
   );
   assert.equal(ready.loading, undefined);
@@ -249,7 +256,7 @@ test('step cards name the maneuver, its leg, and what comes next', () => {
   const copy = directionsStepCopy(route.steps, 1);
   assert.equal(copy.title, 'Turn right onto Kansakoulukatu');
   assert.deepEqual(copy.details, [
-    'Step 2 of 3 · then 240 m · 39 s',
+    'Step 2 of 3 · then 240\u00a0m · 39\u00a0s',
     'Then: Arrive at your destination',
   ]);
   const last = directionsStepCopy(route.steps, 2);
@@ -354,7 +361,7 @@ test('the turn-by-turn list is ordered, labelled, and highlights the flown step'
   );
   assert.deepEqual(
     list.items.map((item) => item.lead),
-    ['8 m', '240 m', '0 m'],
+    ['8\u00a0m', '240\u00a0m', '0\u00a0m'],
   );
   assert.deepEqual(
     list.items.map((item) => item.params),
@@ -773,3 +780,90 @@ test('the refusal reaches the app toast, and a successful arming says nothing',
   assert.equal(toasts.length, 1, 'a successful arming is silent');
   assert.equal(pointerOwner(), DIRECTIONS_POINTER_OWNER);
 });
+
+test('maneuvers are phrased on the page, in English word for word as the proxy does', () => {
+  const types = [
+    'depart',
+    'arrive',
+    'turn',
+    'new name',
+    'continue',
+    'end of road',
+    'fork',
+    'merge',
+    'on ramp',
+    'off ramp',
+    'roundabout',
+    'rotary',
+    'roundabout turn',
+    'exit roundabout',
+    'exit rotary',
+    'use lane',
+    'notification',
+    'something new',
+  ];
+  const modifiers = [
+    null,
+    'left',
+    'right',
+    'slight left',
+    'slight right',
+    'sharp left',
+    'sharp right',
+    'straight',
+    'uturn',
+  ];
+  const roads = [
+    { name: '', ref: null },
+    { name: 'Congress Avenue', ref: null },
+    { name: 'Mannerheimintie', ref: 'E12' },
+    { name: '', ref: 'I 35' },
+  ];
+  for (const type of types)
+    for (const modifier of modifiers)
+      for (const road of roads)
+        for (const exit of [null, 1, 2, 3, 4, 11, 12, 13, 21, 22]) {
+          const step = { type, modifier, exit, ...road };
+          assert.equal(
+            directionsInstruction(step),
+            instructionFor(step),
+            JSON.stringify(step),
+          );
+        }
+  // An older payload without a maneuver type keeps the proxy's sentence.
+  assert.equal(
+    directionsInstruction({ instruction: 'Head out on Kaivokatu' }),
+    'Head out on Kaivokatu',
+  );
+});
+
+test('route numbers follow the page language and never break from their unit', (t) => {
+  t.after(() => setLocale('en'));
+  assert.equal(routeDistanceText(8.4), '8\u00a0m');
+  assert.equal(routeDistanceText(236), '240\u00a0m');
+  assert.equal(routeDistanceText(1500), '1.5\u00a0km');
+  assert.equal(routeDistanceText(2_345_000), '2345\u00a0km');
+  assert.equal(routeDurationText(39), '39\u00a0s');
+  assert.equal(routeDurationText(3900), '1\u00a0h\u00a05\u00a0min');
+  assert.equal(routeDurationText(7200), '2\u00a0h');
+  assert.equal(routeDistanceText(-1), '');
+  assert.equal(routeDurationText(Number.NaN), '');
+
+  setLocale('ru');
+  assert.equal(routeDistanceText(1500), '1,5\u00a0км');
+  assert.equal(routeDurationText(240), '4\u00a0мин');
+  assert.equal(
+    directionsInstruction({
+      type: 'turn',
+      modifier: 'right',
+      name: 'East 7th Street',
+    }),
+    'Поверните направо на East 7th Street',
+  );
+  assert.equal(
+    directionsInstruction({ type: 'roundabout', exit: 2, name: '' }),
+    'На кольце сверните на 2-й съезд',
+  );
+  const list = directionsStepList({ route });
+  assert.equal(list.items[1].lead, '240\u00a0м');
+});