feat(i18n): translate the whole interface

Mark every UI string the unmarked-text check reported (534) plus text it cannot see (helpers, joined labels, runtime-built panels), and translate the result to Spanish and Russian: 1,679 messages each. - Kept on purpose, with the reason where the text lives: provider and product names, place and camera names, codes and units, dB values, the HUD terminal readouts, demo shot titles that saved projects look up by title, and text for AI tools and the voice model. - Modules shared with the server or AI tools stay free of the i18n import (local msg); the wind reading and voice session stay English and are translated where the page shows them. - npm test now runs the unmarked-text check. - Fixes on the way: a duplicated radio privacy paragraph, the contact panel toggle saying Expand while open, the CSS filter mistaking & for CSS. Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-11-05 10:53:59 +00:00 · 2026-10-12 19:24:42 +04:00
1 parent ee72133574
commit 3129e531e6
@@ -1,4 +1,5 @@
 import * as Cesium from 'cesium';
+import { t, msg } from '../i18n/index.js';

 const YOUTUBE_HOSTS = new Set([
  'youtube.com',
@@ -240,7 +241,7 @@ function loadFacebookSdk(documentRef, globalRef = globalThis) {
        prior?.();
      } finally {
        if (facebookSdkReady(globalRef.FB)) finish();
-        else finish(new Error('Facebook player API did not initialize.'));
+        else finish(new Error(msg('Facebook player API did not initialize.')));
      }
    };
    globalRef.fbAsyncInit = ready;
@@ -256,12 +257,12 @@ function loadFacebookSdk(documentRef, globalRef = globalThis) {
    }
    script.addEventListener?.(
      'error',
-      () => finish(new Error('Facebook player API could not load.')),
+      () => finish(new Error(msg('Facebook player API could not load.'))),
      { once: true },
    );
    timer =
      globalRef.setTimeout?.(
-        () => finish(new Error('Facebook player API timed out.')),
+        () => finish(new Error(msg('Facebook player API timed out.'))),
        EMBED_TIMEOUT_MS,
      ) ?? null;
  }).catch((error) => {
@@ -398,7 +399,7 @@ function loadXWidgets(documentRef, globalRef = globalThis) {
    };
    const ready = () => {
      if (xWidgetsReady(globalRef.twttr)) finish();
-      else finish(new Error('X embed API did not initialize.'));
+      else finish(new Error(msg('X embed API did not initialize.')));
    };
    let script = documentRef.querySelector?.(`script[src="${X_WIDGET_URL}"]`);
    if (!script) {
@@ -411,7 +412,7 @@ function loadXWidgets(documentRef, globalRef = globalThis) {
    }
    script.addEventListener?.(
      'error',
-      () => finish(new Error('X embed could not load.')),
+      () => finish(new Error(msg('X embed could not load.'))),
      {
        once: true,
      },
@@ -440,7 +441,7 @@ function loadXWidgets(documentRef, globalRef = globalThis) {
        },
      );
    timer = setTimeout(
-      () => finish(new Error('X embed timed out.')),
+      () => finish(new Error(msg('X embed timed out.'))),
      EMBED_TIMEOUT_MS,
    );
  }).catch((error) => {
@@ -450,9 +451,17 @@ function loadXWidgets(documentRef, globalRef = globalThis) {
  return _xWidgetsPromise;
 }

+// Outcomes a trimmed YouTube clip reports to the card status.
+const YOUTUBE_PHASE_LABELS = Object.freeze({
+  unavailable: msg('UNAVAILABLE'),
+  timeout: msg('TIMEOUT'),
+  blocked: msg('BLOCKED'),
+});
+
 function providerLabel(provider) {
  return (
-    { youtube: 'YOUTUBE', facebook: 'FACEBOOK', x: 'X' }[provider] || 'SOURCE'
+    { youtube: 'YOUTUBE', facebook: 'FACEBOOK', x: 'X' }[provider] ||
+    t('SOURCE')
  );
 }

@@ -737,7 +746,9 @@ export function createBhoteKoshiEmbeddedMedia({
          globalRef.setTimeout?.(() => {
            if (!session.active || session.ready) return;
            session.error = new Error(
-              'Facebook embed unavailable. The post may be private, removed, region-restricted, or blocked.',
+              msg(
+                'Facebook embed unavailable. The post may be private, removed, region-restricted, or blocked.',
+              ),
            );
            session.onError?.(session.error);
          }, EMBED_TIMEOUT_MS) ?? null;
@@ -857,7 +868,9 @@ export function createBhoteKoshiEmbeddedMedia({
      startAtSec,
      endAtSec,
    });
-    iframe.title = `Preloading ${providerLabel(source.provider)} media`;
+    iframe.title = t('Preloading {provider} media', {
+      provider: providerLabel(source.provider),
+    });
    iframe.tabIndex = -1;
    iframe.setAttribute('aria-hidden', 'true');
    iframe.loading = 'eager';
@@ -868,7 +881,7 @@ export function createBhoteKoshiEmbeddedMedia({
  }

  async function mountX(current, token) {
-    current.status.textContent = 'LOADING X POST…';
+    current.status.textContent = t('LOADING X POST…');
    try {
      const api = await xLoader(documentRef, globalRef);
      if (token !== generation || record !== current) return;
@@ -885,13 +898,17 @@ export function createBhoteKoshiEmbeddedMedia({
      );
      if (token !== generation || record !== current) return;
      if (!widget)
-        throw new Error('The X post is unavailable or cannot be embedded.');
-      current.status.textContent = 'X POST · PROVIDER CONTROLS';
+        throw new Error(
+          msg('The X post is unavailable or cannot be embedded.'),
+        );
+      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 = `${String(error?.message || 'X embed unavailable')} OPEN ORIGINAL.`;
+      current.status.textContent = t('{reason} OPEN ORIGINAL.', {
+        reason: t(String(error?.message || msg('X embed unavailable'))),
+      });
      position();
    }
  }
@@ -904,19 +921,23 @@ export function createBhoteKoshiEmbeddedMedia({
    session.shouldPlay = autoplay === true;
    session.onReady = () => {
      if (token !== generation || record !== current) return;
-      current.status.textContent = 'FACEBOOK · PROVIDER CONTROLS';
+      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 = `${String(error?.message || 'Facebook embed unavailable')} OPEN ORIGINAL.`;
+      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 = 'AUTOPLAY BLOCKED · USE PROVIDER CONTROLS';
+      current.status.textContent = t(
+        'AUTOPLAY BLOCKED · USE PROVIDER CONTROLS',
+      );
    };
    if (session.ready) session.onReady();
    else if (session.error) session.onError(session.error);
@@ -968,7 +989,10 @@ export function createBhoteKoshiEmbeddedMedia({
    card.dataset.provider = source.provider;
    card.setAttribute(
      'aria-label',
-      `Embedded ${providerLabel(source.provider)} media for ${observation?.title || 'witness source'}`,
+      t('Embedded {provider} media for {source}', {
+        provider: providerLabel(source.provider),
+        source: observation?.title || t('witness source'),
+      }),
    );
    const leader = documentRef.createElementNS(
      'http://www.w3.org/2000/svg',
@@ -983,16 +1007,18 @@ export function createBhoteKoshiEmbeddedMedia({
    const footer = documentRef.createElement('footer');
    const title = documentRef.createElement('strong');
    title.textContent = String(
-      observation?.shortTitle || observation?.title || 'Witness source',
+      observation?.shortTitle || observation?.title || t('Witness source'),
    ).toUpperCase();
    const status = documentRef.createElement('small');
    status.setAttribute('role', 'status');
-    status.textContent = `${providerLabel(source.provider)} · EMBEDDED SOURCE`;
+    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 = 'OPEN ORIGINAL ↗';
+    link.textContent = t('OPEN ORIGINAL ↗');
    footer.append(title, status, link);
    const body = documentRef.createElement('div');
    body.className = 'bhote-embedded-callout-body';
@@ -1032,7 +1058,10 @@ export function createBhoteKoshiEmbeddedMedia({
          url.searchParams.set('origin', globalRef.location.origin);
        iframe.src = url.href;
      }
-      iframe.title = `${providerLabel(source.provider)} media: ${observation?.title || 'witness source'}`;
+      iframe.title = t('{provider} media: {source}', {
+        provider: providerLabel(source.provider),
+        source: observation?.title || t('witness source'),
+      });
      iframe.allow =
        'autoplay; encrypted-media; picture-in-picture; fullscreen';
      iframe.allowFullscreen = true;
@@ -1049,7 +1078,9 @@ export function createBhoteKoshiEmbeddedMedia({
              record.youtubeSession.getState().phase,
            )
          ) {
-            status.textContent = `${providerLabel(source.provider)} · PROVIDER CONTROLS`;
+            status.textContent = t('{provider} · PROVIDER CONTROLS', {
+              provider: providerLabel(source.provider),
+            });
          }
          position();
        },
@@ -1067,7 +1098,11 @@ export function createBhoteKoshiEmbeddedMedia({
          isCurrent: () => token === generation && record === current,
          onStatus: (phase) => {
            if (phase !== 'completed')
-              status.textContent = `YOUTUBE ${phase.toUpperCase()} · OPEN ORIGINAL`;
+              status.textContent = t('YOUTUBE {state} · OPEN ORIGINAL', {
+                state: YOUTUBE_PHASE_LABELS[phase]
+                  ? t(YOUTUBE_PHASE_LABELS[phase])
+                  : phase.toUpperCase(),
+              });
          },
        });
      }
@@ -24,6 +24,7 @@ import {
 } from './bhoteKoshiEmbeddedMedia.js';
 import { acquireImageryComparison } from '../maps/imageryComparison.js';
 import { createImagerySplit } from '../ui/imagerySplit.js';
+import { 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';
@@ -384,13 +385,38 @@ export function adjacentEvidenceIndex(progress, timeline, direction) {
  return Math.max(0, Math.min(beats.length - 1, current + delta));
 }

+// Evidence phases from the event pack, shown as the beat meta prefix.
+const EVIDENCE_PHASE_LABELS = Object.freeze({
+  initiation: msg('INITIATION'),
+  damming: msg('DAMMING'),
+  'secondary failure': msg('SECONDARY FAILURE'),
+  'border arrival': msg('BORDER ARRIVAL'),
+  propagation: msg('PROPAGATION'),
+  'downstream passage': msg('DOWNSTREAM PASSAGE'),
+  consequence: msg('CONSEQUENCE'),
+  'downstream consequence': msg('DOWNSTREAM CONSEQUENCE'),
+});
+
+/** Display label for an evidence phase; unknown phases show as authored. */
+function evidencePhaseLabel(phase) {
+  const label = EVIDENCE_PHASE_LABELS[String(phase || '').toLowerCase()];
+  if (label) return t(label);
+  return phase ? String(phase).toUpperCase() : t('EVIDENCE');
+}
+
 /** Compact, source-bounded disclosure for multi-source geolocation beats. */
 export function evidenceCorroborationLabel(observation) {
  const count = Math.max(
    0,
    Math.floor(Number(observation?.corroboration?.sourceCount) || 0),
  );
-  return count > 1 ? `${count} GEOLOCATED SOURCE-MAP PLACEMENTS` : '';
+  return count > 1
+    ? tn(
+        count,
+        '{count} GEOLOCATED SOURCE-MAP PLACEMENT',
+        '{count} GEOLOCATED SOURCE-MAP PLACEMENTS',
+      )
+    : '';
 }

 /** Interpolate headings across north using the shortest angular path. */
@@ -641,7 +667,7 @@ function drawEvidenceFallback(ctx, observation, width, height) {
  }
  ctx.fillStyle = WORLD_OVERLAY_STYLE.accent;
  ctx.font = scaledOverlayFont(WORLD_OVERLAY_STYLE.fontLabel, 1.4);
-  ctx.fillText('NO PREVIEW', 20, 30);
+  ctx.fillText(t('NO PREVIEW'), 20, 30);
 }

 function ellipsizeEvidenceText(value, limit) {
@@ -713,10 +739,12 @@ export function updateEvidenceFrame(
  ctx.fillStyle = WORLD_OVERLAY_STYLE.detail;
  ctx.font = scaledOverlayFont(WORLD_OVERLAY_STYLE.fontDetail);
  const publisher = String(
-    observation.media?.publisher || 'SOURCE LINK',
+    observation.media?.publisher || t('SOURCE LINK'),
  ).toUpperCase();
  ctx.fillText(
-    `${ellipsizeEvidenceText(publisher, 24)} / OPEN`,
+    t('{publisher} / OPEN', {
+      publisher: ellipsizeEvidenceText(publisher, 24),
+    }),
    16,
    infoY + 53,
  );
@@ -813,28 +841,40 @@ function collectPanelReferences(panel) {
  });
 }

+/** Escape translated text for the panel markup template. */
+function escapeMarkup(text) {
+  return String(text)
+    .replace(/&/g, '&amp;')
+    .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', 'Bhote Koshi flood reconstruction controls');
+  panel.setAttribute(
+    'aria-label',
+    t('Bhote Koshi flood reconstruction controls'),
+  );
  panel.innerHTML = `
    <div class="bhote-event-header">
      <div>
-        <div class="bhote-event-kicker">EVENT RECONSTRUCTION · 26 AUG 2026</div>
-        <div class="bhote-event-title">BHOTE KOSHI OUTBURST FLOOD</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="Close event layer" aria-label="Close event layer">×</button>
+      <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">OBSERVED IMAGERY</span>
-      <span class="bhote-event-status reconstructed">SCHEMATIC CORRIDOR</span>
+      <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>2021 HISTORICAL REFERENCE / 2026 POST-EVENT</span>
+        <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="Historical reference and post-event image split" />
+      <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>
@@ -842,37 +882,37 @@ function createPanel(event, handlers) {
    </section>
    <section class="bhote-event-section">
      <div class="bhote-event-section-head">
-        <span data-role="timeline-label">RECONSTRUCTION CLOCK</span>
+        <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="Schematic downstream progression" />
-      <div class="bhote-event-story-nav" aria-label="Story beat navigation">
-        <button type="button" data-action="previous-beat" title="Previous story beat" aria-label="Previous story beat">‹</button>
+      <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">CAUSE</strong>
-          <small data-role="beat-meta">CAPTURE TIME UNVERIFIED</small>
+          <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="Next story beat" aria-label="Next story beat">›</button>
+        <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">▶ PLAY</button>
-        <button type="button" data-action="play-scene" hidden title="Play the next shot and continue through this scene">▶ PLAY SCENE</button>
-        <button type="button" data-action="cinematic" aria-pressed="false">◉ CINEMATIC</button>
-        <button type="button" data-action="story-replay">↺ FULL STORY</button>
-        <button type="button" data-action="open-source">↗ OPEN ORIGINAL</button>
-        <button type="button" data-action="corridor">⌖ LOWER GORGE</button>
+        <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>FIELD REPORTS · ${event.fieldReports.length}</summary>
+      <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>GEOLOCATIONS · GEO GEORGE SHADRACH</span>
-      <button type="button" data-action="geolocation-map">↗ OPEN PUBLIC MAP</button>
+      <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"> Clouds are preserved from the source imagery.</span></p>
+    <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);
@@ -1205,7 +1245,7 @@ export function createBhoteKoshiEventLayer({
      _embeddedMedia?.show?.({
        observation: {
          title: witness.title,
-          shortTitle: 'Rasuwagadhi witness',
+          shortTitle: t('Rasuwagadhi witness'),
          media: { sourceUrl: witness.sourceUrl },
        },
        anchor,
@@ -2320,7 +2360,10 @@ export function createBhoteKoshiEventLayer({
        collisionGroup: 'ambient-card',
        zIndex: 60,
        interactive: true,
-        accessibilityLabel: `Open original source for ${observation.title}; capture time unverified`,
+        accessibilityLabel: t(
+          'Open original source for {source}; capture time unverified',
+          { source: observation.title },
+        ),
        activate: () => openExternal(observation.media.sourceUrl),
        minDistance: 0,
        maxDistance: 220000,
@@ -2561,9 +2604,12 @@ export function createBhoteKoshiEventLayer({
      cssProperty: '--bhote-koshi-split',
      beforeTitle: event.imagery.before.label,
      afterTitle: event.imagery.after.label,
-      ariaLabel: 'Historical reference and post-event image divider',
+      ariaLabel: t('Historical reference and post-event image divider'),
      formatValueText: (beforePercent, afterPercent) =>
-        `A historical reference ${beforePercent} percent, B post-event ${afterPercent} percent`,
+        t(
+          'A historical reference {before} percent, B post-event {after} percent',
+          { before: beforePercent, after: afterPercent },
+        ),
      onChange: setSplit,
    });
  }
@@ -2595,7 +2641,7 @@ export function createBhoteKoshiEventLayer({
    setElementProperty(
      button,
      'textContent',
-      _cinematicActive ? '■ RELEASE CAMERA' : '◉ CINEMATIC',
+      _cinematicActive ? t('■ RELEASE CAMERA') : t('◉ CINEMATIC'),
    );
    setElementAttribute(button, 'aria-pressed', String(_cinematicActive));
  }
@@ -2961,13 +3007,13 @@ export function createBhoteKoshiEventLayer({
      _panelRefs.progressInput,
      'aria-label',
      sceneDirected
-        ? 'Seek Nepal scene clock'
-        : 'Schematic downstream progression',
+        ? t('Seek Nepal scene clock')
+        : t('Schematic downstream progression'),
    );
    setElementProperty(
      _panelRefs.timelineLabel,
      'textContent',
-      sceneDirected ? 'NEPAL SCENE CLOCK' : 'RECONSTRUCTION CLOCK',
+      sceneDirected ? t('NEPAL SCENE CLOCK') : t('RECONSTRUCTION CLOCK'),
    );
    const sceneDuration = Number(_sceneContext?.sceneDurationSec) || 0;
    setElementProperty(
@@ -2980,22 +3026,22 @@ export function createBhoteKoshiEventLayer({
    );
    const playLabel = sceneDirected
      ? _sceneActionPending && _sceneActionPending.type !== 'scene'
-        ? '… PLAYING SHOT'
-        : '▶ PLAY SHOT'
+        ? t('… PLAYING SHOT')
+        : t('▶ PLAY SHOT')
      : _playing
-        ? 'Ⅱ PAUSE'
+        ? t('Ⅱ PAUSE')
        : _progress >= 1
          ? _cinematicReplayArmed
-            ? '↺ REPLAY CINEMATIC'
-            : '↺ REPLAY'
-          : '▶ PLAY';
+            ? t('↺ REPLAY CINEMATIC')
+            : t('↺ REPLAY')
+          : t('▶ PLAY');
    setElementProperty(_panelRefs.playButton, 'textContent', playLabel);
    setElementProperty(
      _panelRefs.playSceneButton,
      'textContent',
      _sceneActionPending?.type === 'scene'
-        ? '… PLAYING SCENE'
-        : '▶ PLAY SCENE',
+        ? t('… PLAYING SCENE')
+        : t('▶ PLAY SCENE'),
    );
    setElementProperty(
      _panelRefs.playSceneButton,
@@ -3011,19 +3057,21 @@ export function createBhoteKoshiEventLayer({
    setElementAttribute(
      _panelRefs.playSceneButton,
      'aria-label',
-      `Continue ${_sceneContext?.sceneTitle || 'current scene'} from next shot`,
+      t('Continue {scene} from next shot', {
+        scene: _sceneContext?.sceneTitle || t('current scene'),
+      }),
    );
    setElementProperty(
      _panelRefs.storyReplayButton,
      'textContent',
-      '↺ FULL STORY',
+      t('↺ FULL STORY'),
    );
    if (!sceneDirected) {
      setElementProperty(_panelRefs.storyReplayButton, 'disabled', false);
      setElementAttribute(
        _panelRefs.storyReplayButton,
        'aria-label',
-        'Replay the full reconstruction',
+        t('Replay the full reconstruction'),
      );
    }
    const beatIndex = currentEvidenceIndex();
@@ -3047,18 +3095,22 @@ export function createBhoteKoshiEventLayer({
      _panelRefs.beatTitle,
      'textContent',
      sceneDirected
-        ? _sceneContext?.shotTitle || 'SCENE SHOT'
-        : observation?.shortTitle || observation?.title || 'EVIDENCE',
+        ? _sceneContext?.shotTitle || t('SCENE SHOT')
+        : observation?.shortTitle || observation?.title || t('EVIDENCE'),
    );
    const sourceCount = Math.max(
      0,
      Math.floor(Number(observation?.corroboration?.sourceCount) || 0),
    );
    const beatMeta = [
-      String(observation?.phase || 'EVIDENCE').toUpperCase(),
-      'TIME UNVERIFIED',
-      sourceCount > 1 ? `${sourceCount} SOURCES` : '',
-      observation?.imageryCoverage === 'outside' ? 'OUTSIDE IMAGERY SWIPE' : '',
+      evidencePhaseLabel(observation?.phase),
+      t('TIME UNVERIFIED'),
+      sourceCount > 1
+        ? tn(sourceCount, '{count} SOURCE', '{count} SOURCES')
+        : '',
+      observation?.imageryCoverage === 'outside'
+        ? t('OUTSIDE IMAGERY SWIPE')
+        : '',
    ]
      .filter(Boolean)
      .join(' / ');
@@ -3066,7 +3118,11 @@ export function createBhoteKoshiEventLayer({
      _panelRefs.beatMeta,
      'textContent',
      sceneDirected
-        ? `${String(_sceneContext?.sceneTitle || 'NEPAL FLOOD INCIDENT').toUpperCase()} / AUTHORED SHOT`
+        ? t('{scene} / AUTHORED SHOT', {
+            scene: String(
+              _sceneContext?.sceneTitle || t('NEPAL FLOOD INCIDENT'),
+            ).toUpperCase(),
+          })
        : beatMeta,
    );
    setElementProperty(
@@ -3093,18 +3149,20 @@ export function createBhoteKoshiEventLayer({
      _panelRefs.playButton,
      'aria-label',
      sceneDirected
-        ? `Play ${_sceneContext?.shotTitle || 'current scene shot'}`
-        : 'Play reconstruction',
+        ? t('Play {shot}', {
+            shot: _sceneContext?.shotTitle || t('current scene shot'),
+          })
+        : t('Play reconstruction'),
    );
    setElementAttribute(
      _panelRefs.previousButton,
      'aria-label',
-      sceneDirected ? 'Load previous scene shot' : 'Previous story beat',
+      sceneDirected ? t('Load previous scene shot') : t('Previous story beat'),
    );
    setElementAttribute(
      _panelRefs.nextButton,
      'aria-label',
-      sceneDirected ? 'Load next scene shot' : 'Next story beat',
+      sceneDirected ? t('Load next scene shot') : t('Next story beat'),
    );
    setElementProperty(
      _panelRefs.openSourceButton,
@@ -3154,7 +3212,7 @@ export function createBhoteKoshiEventLayer({
    if (_panelRefs?.caveat) {
      _panelRefs.caveat.textContent = imageryAvailable
        ? _event?.reconstruction?.caveat || ''
-        : 'SCHEMATIC CORRIDOR, NOT MODELED ARRIVAL TIME.';
+        : t('SCHEMATIC CORRIDOR, NOT MODELED ARRIVAL TIME.');
    }
    if (_panelRefs?.imageryCloudNote)
      _panelRefs.imageryCloudNote.hidden = !imageryAvailable;
@@ -3717,7 +3775,9 @@ export function createBhoteKoshiEventLayer({
        count: _enabled ? 1 : 0,
        status: _enabled ? 'nominal' : 'idle',
        source: 'Vantor + GeoPera',
-        coverage: _enabled ? 'Rasuwa · 26 Aug 2026' : 'Event reconstruction',
+        coverage: _enabled
+          ? t('Rasuwa · 26 Aug 2026')
+          : t('Event reconstruction'),
      };
    },
    getPlaybackState() {
@@ -12,6 +12,7 @@ import {
 } from './dataCredits.js';
 import { BHOTE_KOSHI_FLOOD_PATH } from './bhoteKoshiFloodPath.js';
 import { INCIDENT_OVERVIEW_PLACES } from './bhoteKoshiIncidentPlaces.js';
+import { t, msg } from '../i18n/index.js';

 export const BHOTE_KOSHI_LOCATOR_LAYER_ID = 'bhote-koshi-locator';
 export const BHOTE_KOSHI_LOCATOR_OVERLAY_SOURCE_ID =
@@ -55,19 +56,19 @@ const INCIDENT = Object.freeze({
  lat: 28.3632333,
  lon: 85.4423639,
  heightM: 5200,
-  title: 'BHOTE KOSHI FLOOD INCIDENT',
-  subtitle: 'NEPAL · 26 AUG 2026',
+  title: msg('BHOTE KOSHI FLOOD INCIDENT'),
+  subtitle: msg('NEPAL · 26 AUG 2026'),
 });
 const TRIGGER_RECORD = Object.freeze({
  lat: 28.271,
  lon: 85.515,
  heightM: 4200,
-  title: 'USGS INITIAL REPORT',
+  title: msg('USGS INITIAL REPORT'),
  details: Object.freeze([
-    '26 AUG 2026 · 08:37 NPT',
-    '28.2710° N · 85.5150° E',
-    'INITIAL M4.4 · RECLASSIFIED M5.2 LANDSLIDE',
-    'USGS EVENT us7000tbwb · OPEN SOURCE',
+    msg('26 AUG 2026 · 08:37 NPT'),
+    msg('28.2710° N · 85.5150° E'),
+    msg('INITIAL M4.4 · RECLASSIFIED M5.2 LANDSLIDE'),
+    msg('USGS EVENT us7000tbwb · OPEN SOURCE'),
  ]),
 });
 const TRIGGER_APPROACH_CAMERA = Object.freeze({
@@ -90,11 +91,13 @@ const NEPAL = Object.freeze({
  lat: 28.3949,
  lon: 84.124,
  heightM: 6800,
+  // i18n-ignore: country name, shown as is
  title: 'NEPAL',
 });
 const NEARBY_CITIES = Object.freeze([
  Object.freeze({
    id: 'kathmandu',
+    // i18n-ignore: city name
    title: 'KATHMANDU',
    lat: 27.7017,
    lon: 85.3206,
@@ -103,6 +106,7 @@ const NEARBY_CITIES = Object.freeze([
  }),
  Object.freeze({
    id: 'bhaktapur',
+    // i18n-ignore: city name
    title: 'BHAKTAPUR',
    lat: 27.673,
    lon: 85.43,
@@ -111,6 +115,7 @@ const NEARBY_CITIES = Object.freeze([
  }),
  Object.freeze({
    id: 'dhulikhel',
+    // i18n-ignore: city name
    title: 'DHULIKHEL',
    lat: 27.6221,
    lon: 85.5428,
@@ -394,8 +399,8 @@ export function createBhoteKoshiLocatorLayer({
        position,
        variant: 'card',
        paintLane: 'thumbnail',
-        title: subject.title,
-        details: [subject.subtitle],
+        title: t(subject.title),
+        details: [t(subject.subtitle)],
        accent: INCIDENT_ACCENT,
        sourceAlpha: () => presentation().alpha,
        presentationScale: () => presentation().scale,
@@ -536,8 +541,8 @@ export function createBhoteKoshiLocatorLayer({
      position,
      variant: 'card',
      paintLane: 'thumbnail',
-      title: TRIGGER_RECORD.title,
-      details: [...TRIGGER_RECORD.details],
+      title: t(TRIGGER_RECORD.title),
+      details: TRIGGER_RECORD.details.map((line) => t(line)),
      accent: INCIDENT_ACCENT,
      sourceAlpha: () => presentation().alpha,
      presentationScale: () => presentation().scale,
@@ -1121,57 +1126,67 @@ export function createBhoteKoshiLocatorLayer({
        chips: [
          {
            id: 'nepal-context',
+            // i18n-ignore: country name
            label: 'NEPAL',
            active: _presentation === NEPAL_CONTEXT_PRESENTATION,
-            title:
+            title: t(
              'Show the Nepal context callout without a border or country fill',
+            ),
            params: { presentation: NEPAL_CONTEXT_PRESENTATION },
          },
          {
            id: 'bhote-koshi-regional',
+            // i18n-ignore: river name (Bhote Koshi)
            label: 'BHOTE',
            active: _presentation === BHOTE_KOSHI_REGIONAL_PRESENTATION,
-            title:
+            title: t(
              'Introduce Nepal, draw its border, then reveal the Bhote Koshi incident',
+            ),
            params: { presentation: BHOTE_KOSHI_REGIONAL_PRESENTATION },
          },
          {
            id: 'bhote-koshi-city-context',
-            label: 'CITIES',
+            label: t('CITIES'),
            active: _presentation === BHOTE_KOSHI_CITY_CONTEXT_PRESENTATION,
-            title:
+            title: t(
              'Keep the regional incident context and introduce nearby city labels',
+            ),
            params: { presentation: BHOTE_KOSHI_CITY_CONTEXT_PRESENTATION },
          },
          {
            id: 'bhote-koshi-incident-places',
-            label: 'PLACES',
+            label: t('PLACES'),
            active: _presentation === BHOTE_KOSHI_INCIDENT_PLACES_PRESENTATION,
-            title:
+            title: t(
              'Introduce the reconstruction scene key places from trigger to downstream',
+            ),
            params: { presentation: BHOTE_KOSHI_INCIDENT_PLACES_PRESENTATION },
          },
          {
            id: 'bhote-koshi-flood-path',
-            label: 'PATH',
+            label: t('PATH'),
            active: _presentation === BHOTE_KOSHI_FLOOD_PATH_PRESENTATION,
-            title:
+            title: t(
              'Animate the sourced cyan river-centerline route to Trishuli Bazaar',
+            ),
            params: { presentation: BHOTE_KOSHI_FLOOD_PATH_PRESENTATION },
          },
          {
            id: 'bhote-koshi-path-overview',
-            label: 'OVERVIEW',
+            label: t('OVERVIEW'),
            active: _presentation === BHOTE_KOSHI_PATH_OVERVIEW_PRESENTATION,
-            title: 'Keep the completed flood path and location labels visible',
+            title: t(
+              'Keep the completed flood path and location labels visible',
+            ),
            params: { presentation: BHOTE_KOSHI_PATH_OVERVIEW_PRESENTATION },
          },
          {
            id: 'bhote-koshi-trigger-record',
-            label: 'RECORD',
+            label: t('RECORD'),
            active: _presentation === BHOTE_KOSHI_TRIGGER_RECORD_PRESENTATION,
-            title:
+            title: t(
              'Reveal the trigger record while making a slow camera approach',
+            ),
            params: {
              presentation: BHOTE_KOSHI_TRIGGER_RECORD_PRESENTATION,
              preview: true,
@@ -1,3 +1,6 @@
+// Marks restore labels for i18n extraction; shareRestoration translates them.
+// Kept local so this module stays free of the i18n import.
+const msg = (text) => text;
 import { normalizeIdSwitches, patchRequestedIdSwitches } from './idSwitches.js';
 import reservationRows from './layerStateTokenReservations.json' with { type: 'json' };

@@ -458,19 +461,19 @@ export const SHARE_TRACKING_RESTORE_POLICIES = Object.freeze({
    optionOwner: 'flights',
    optionKey: 'selectedFlightsTrackingId',
    expiryWindowMs: 90_000,
-    label: 'flight',
+    label: msg('flight'),
  }),
  military: Object.freeze({
    optionOwner: 'flights',
    optionKey: 'selectedMilitaryTrackingId',
    expiryWindowMs: 45_000,
-    label: 'military flight',
+    label: msg('military flight'),
  }),
  satellites: Object.freeze({
    optionOwner: 'satellites',
    optionKey: 'selectedSatTrackingId',
    expiryWindowMs: 300_000,
-    label: 'satellite',
+    label: msg('satellite'),
  }),
 });

@@ -26,47 +26,47 @@ import { t, msg } from '../i18n/index.js';
 */
 export const SATELLITE_CLASSES = Object.freeze({
  station: Object.freeze({
-    label: 'STATION',
+    label: 'STATION', // i18n-ignore: English token; shown through CLASS_DISPLAY_KEYS
    // Warm white — "crewed", and the brightest class in the sky. Deliberately
    // NOT amber: 40-48deg amber is the app's known-military convention
    // (flights.js MIL_TINT / militaryFlights.js MIL_ICON_COLOR) and must not
    // leak into another domain. Slightly warm so it also separates from the
    // pure white the civilian air fleet draws in.
    color: '#fff6e5',
-    blurb: 'Crewed stations and their visiting vehicles',
+    blurb: 'Crewed stations and their visiting vehicles', // i18n-ignore: shown through CLASS_DISPLAY_KEYS
  }),
  nav: Object.freeze({
-    label: 'NAV',
+    label: 'NAV', // i18n-ignore: English token; shown through CLASS_DISPLAY_KEYS
    // Cyan — the strongest accent goes to the class users actually name
    // ("how many GPS satellites are up?"). Takes over the slot the catch-all
    // VISUAL group used to occupy, so this adds no new hue to the app.
    color: '#4fd8ff',
-    blurb: 'GNSS navigation — GPS, GLONASS, Galileo',
+    blurb: 'GNSS navigation — GPS, GLONASS, Galileo', // i18n-ignore: shown through CLASS_DISPLAY_KEYS
  }),
  geo: Object.freeze({
-    label: 'GEO',
+    label: 'GEO', // i18n-ignore: English token; shown through CLASS_DISPLAY_KEYS
    // Violet, unchanged. Already the app's "space" semantic (the detection
    // overlay paints the SAT tier #bda4ff), and the geostationary belt draws
    // as one clean equatorial ring at globe scale.
    color: '#c89bff',
-    blurb: 'Geostationary belt — comms and weather, fixed over the equator',
+    blurb: 'Geostationary belt — comms and weather, fixed over the equator', // i18n-ignore: shown through CLASS_DISPLAY_KEYS
  }),
  visual: Object.freeze({
-    label: 'VISUAL',
+    label: 'VISUAL', // i18n-ignore: English token; shown through CLASS_DISPLAY_KEYS
    // Muted blue-gray. This is the catch-all bucket, so it gives up the bright
    // cyan it used to hold and recedes behind the three classes that mean
    // something. Still well clear of the dense shell by luminance.
    color: '#9fb3c4',
-    blurb: 'Brightest naked-eye objects — CelesTrak visual group',
+    blurb: 'Brightest naked-eye objects — CelesTrak visual group', // i18n-ignore: shown through CLASS_DISPLAY_KEYS
  }),
  comms: Object.freeze({
-    label: 'COMMS',
+    label: 'COMMS', // i18n-ignore: English token; shown through CLASS_DISPLAY_KEYS
    // Dim slate — thousands of these appear in DENSE mode. They must read as
    // texture behind the core catalog, never compete with it. Rec.601 luma
    // ~0.40 against VISUAL's ~0.69 keeps the two separable even when the
    // NVG/FLIR shaders collapse the scene to a single channel.
    color: '#54697f',
-    blurb: 'Broadband constellation shell — shown only in DENSE mode',
+    blurb: 'Broadband constellation shell — shown only in DENSE mode', // i18n-ignore: shown through CLASS_DISPLAY_KEYS
  }),
 });