From b02e815d721653a04d529880c916aaf4ba570d76 Mon Sep 17 00:00:00 2001
From: grabowski <berwn@buildfor.life>
Date: Thu, 13 Aug 2026 23:10:34 +0700
Subject: [PATCH] feat: Thai localisation and portrait-phone layout for the
 dashboard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Thai is the default unless the browser prefers English, chosen by first
match in navigator.languages order and remembered in localStorage. A
STRINGS table carries both languages (interpolated strings as functions),
applyTranslations() drives static markup via data-i18n attributes, and
setLang() rebuilds everything the JS renders — including map layers, so
popups render in the current language and sensor markers are replaced
rather than stacked. Thai dates use the Buddhist era, matching the
replay label; station names lead with the reader's language.

Portrait phones: the header overflowed a 412 px Android viewport by
64 px, so the page scrolled sideways and the Refresh button sat off
screen. The header now wraps into two deliberate rows (DOM order matches
visual order, so focus order is unaffected), the map description box is
hidden on phones, map height is capped by viewport — including a
height-gated rule for landscape phones, whose 850-960 px widths never
matched the width breakpoints — and the forecast grid goes single
column. Verified in a real browser at 412x915, 360x800, 915x412 and
1440x900: zero horizontal overflow, no desktop change.

Review-swarm fixes: a language switch no longer relabels a pinned
SIMULATION or the 2024 replay as LIVE DATA (it kept the mode from
state); Thai wording corrected where it asserted a rising trend the code
never checks, labelled every gauge 'critical', or used a malformed
compound; aria-labels, the Leaflet load failure and the flood-stage
chips are translated; the language toggle states its action instead of
an aria-pressed value that contradicted its label; and Thai font
families sit after the Latin stack so they cannot restyle English text.
---
 src/static/dashboard.html | 896 ++++++++++++++++++++++++++++++--------
 tests/test_dashboard.py   | 114 ++++-
 2 files changed, 823 insertions(+), 187 deletions(-)

diff --git a/src/static/dashboard.html b/src/static/dashboard.html
index 45551c3..7e21cac 100644
--- a/src/static/dashboard.html
+++ b/src/static/dashboard.html
@@ -36,19 +36,38 @@
         }
         * { box-sizing: border-box; }
         html, body { margin: 0; min-height: 100%; }
+        /* Nothing may push the page sideways on a phone: wide content scrolls
+           inside its own container instead (the map and chart already do). */
+        html { overflow-x: hidden; }
         body {
             color: var(--ink);
+            overflow-x: hidden;
             background:
                 radial-gradient(circle at 8% 0%, rgba(56, 180, 213, .12), transparent 25rem),
                 var(--paper);
-            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+            /* Thai families first so Thai text uses a proper Thai face where one
+               is installed (Android/iOS/Windows all ship one); Latin falls
+               through to Inter. No webfont download — this page is served over a
+               bandwidth-constrained uplink. */
+            /* Thai faces sit AFTER the Latin stack: a Thai family listed ahead
+               of system-ui would also claim the Latin glyphs and restyle the
+               whole English page. Latin resolves first, Thai falls through. */
+            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+                "Segoe UI", "Noto Sans Thai", "Sarabun", "Leelawadee UI", "Thonburi", sans-serif;
         }
+        /* Thai has no inter-word spaces: let the browser segment, and allow a
+           break anywhere rather than letting a long phrase force a scrollbar. */
+        html[lang="th"] body { line-break: normal; overflow-wrap: anywhere; }
+        html[lang="th"] .stat-value, html[lang="th"] .flow-value { overflow-wrap: normal; }
+        .lang-toggle { padding: 9px 12px; font-size: .78rem; font-weight: 800; white-space: nowrap; }
+        .lang-toggle[data-active-lang="th"] { background: var(--mint); border-color: #b6dfc9; color: #146644; }
         .shell { max-width: 1500px; margin: 0 auto; padding: 24px; }
         header {
             display: flex; align-items: center; justify-content: space-between; gap: 20px;
-            margin-bottom: 20px;
+            margin-bottom: 20px; flex-wrap: wrap;
         }
-        .brand { display: flex; align-items: center; gap: 14px; }
+        .brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
+        .brand > div { min-width: 0; }
         .brand-mark {
             width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center;
             color: white; font-size: 25px; background: linear-gradient(145deg, #0a91b9, #076787);
@@ -56,7 +75,7 @@
         }
         h1 { margin: 0; font-size: clamp(1.4rem, 2.5vw, 2rem); letter-spacing: -.035em; }
         .subtitle { margin: 4px 0 0; color: var(--muted); font-size: .92rem; }
-        .header-actions { display: flex; align-items: center; gap: 12px; }
+        .header-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
         .live-pill {
             display: flex; gap: 8px; align-items: center; padding: 9px 13px; border-radius: 999px;
             background: var(--mint); color: #146644; font-weight: 750; font-size: .8rem;
@@ -193,22 +212,52 @@
             /* No fixed cap: the sensors expander must stay reachable below the RID list */
             .side-card { max-height: 70vh; }
             #river-flow { min-height: 160px; }
+            /* Landscape phones are ~400 px tall: a fixed 640 px map filled more
+               than the screen and buried everything under it. */
+            #station-map { height: min(640px, 78vh); min-height: 320px; }
         }
         @media (max-width: 560px) {
             .shell { padding: 14px; }
-            header { align-items: flex-start; }
+            /* Portrait phones: brand on its own row, controls spread on the next.
+               Side by side the nowrap buttons overflowed the viewport (~64 px at
+               412 px wide) and squeezed the title into three lines. */
+            header { align-items: stretch; flex-direction: column; gap: 12px; margin-bottom: 16px; }
+            .brand-mark { width: 40px; height: 40px; border-radius: 13px; font-size: 21px; }
+            /* Two deliberate rows instead of a ragged wrap: the compact controls
+               share the first, the long replay label owns the second. The DOM
+               is already in this order, so focus order matches what is seen. */
+            .header-actions { width: 100%; justify-content: flex-start; gap: 8px; }
+            #refresh-button { flex: 1 1 auto; text-align: center; }
+            #replay-2024 { flex: 1 1 100%; text-align: center; }
             .subtitle { display: none; }
             .live-pill { padding: 8px; }
             #live-pill-text { display: none; } /* dot stays: live vs replay/simulation signal */
             #replay-2024 { white-space: nowrap; padding: 9px 11px; font-size: .72rem; }
             .stats { gap: 8px; }
             .stat { min-height: 96px; padding: 14px; }
-            .stat-value { font-size: 1.25rem; }
-            #station-map { height: 540px; }
+            .stat-value { font-size: 1.25rem; white-space: normal; }
+            #station-map { height: 62vh; min-height: 320px; max-height: 560px; }
+        }
+        /* Landscape phones are 380-430 px TALL but 850-960 px wide, so the width
+           breakpoints above never catch them and a 640 px map filled the screen.
+           Gate this one on height. */
+        @media (max-height: 520px) and (orientation: landscape) {
+            #station-map { height: 80vh; min-height: 0; max-height: none; }
+            .workspace { min-height: 0; }
+            .side-card { max-height: 80vh; }
             .map-overlay { left: 46px; }
+            /* The description box covered a quarter of the map on a phone */
+            .map-heading { display: none; }
             #legend-toggle { display: inline-flex; }
             .legend { display: none; }
             .legend.open { display: block; max-height: 42vh; overflow-y: auto; }
+            /* Range controls: dropdown on one row, the two dates sharing the next */
+            .history-controls { width: 100%; }
+            .history-controls select { flex: 1 1 100%; }
+            .history-controls input[type="date"] { flex: 1 1 0; min-width: 0; }
+            .forecast-grid { grid-template-columns: 1fr; }
+            .stage-chip { flex: 1 1 auto; min-width: 66px; }
+            footer { flex-direction: column; align-items: flex-start; gap: 10px; }
         }
     </style>
 </head>
@@ -218,14 +267,15 @@
         <div class="brand">
             <div class="brand-mark">≋</div>
             <div>
-                <h1>Ping River Live Monitor</h1>
-                <p class="subtitle">Current water level and discharge across Northern Thailand</p>
+                <h1 data-i18n="app.title">Ping River Live Monitor</h1>
+                <p class="subtitle" data-i18n="app.subtitle">Current water level and discharge across Northern Thailand</p>
             </div>
         </div>
         <div class="header-actions">
-            <div class="live-pill" id="live-pill"><span class="live-dot"></span> <span id="live-pill-text">LIVE DATA</span></div>
-            <button id="replay-2024" type="button">▶ Replay Oct 2024 flood</button>
-            <button id="refresh-button" type="button">↻ Refresh</button>
+            <div class="live-pill" id="live-pill"><span class="live-dot"></span> <span id="live-pill-text" data-i18n="pill.live">LIVE DATA</span></div>
+            <button id="refresh-button" type="button" data-i18n="action.refresh">↻ Refresh</button>
+            <button id="lang-toggle" class="lang-toggle" type="button" data-active-lang="en" aria-label="Switch to Thai">ไทย</button>
+            <button id="replay-2024" type="button" data-i18n="replay.start">▶ Replay Oct 2024 flood</button>
         </div>
     </header>
 
@@ -234,76 +284,76 @@
             <strong id="verdict-icon" style="font-size:1.2rem"></strong>
             <div style="min-width:0;flex:1">
                 <strong id="verdict-text" style="font-size:.95rem"></strong>
-                <div id="verdict-sub" style="font-size:.72rem;margin-top:3px;opacity:.85">Experimental model — not an official warning · official alerts: <a href="https://twa.thaiwater.net/" target="_blank" rel="noopener" style="color:inherit">ThaiWater ↗</a></div>
+                <div id="verdict-sub" style="font-size:.72rem;margin-top:3px;opacity:.85"><span data-i18n="verdict.disclaimer">Experimental model — not an official warning · official alerts:</span> <a href="https://twa.thaiwater.net/" target="_blank" rel="noopener" style="color:inherit">ThaiWater ↗</a></div>
             </div>
         </div>
     </section>
 
-    <section class="stats" aria-label="River summary">
-        <article class="stat"><div class="stat-label">Reporting stations</div><div class="stat-value" id="station-count">—</div><div class="stat-note" id="station-count-note">RID gauges with current readings</div></article>
-        <article class="stat" title="Discharge: the volume of water flowing past the gauge each second (cubic meters per second)"><div class="stat-label">Chiang Mai river flow</div><div class="stat-value" id="total-flow">—</div><div class="stat-note" id="cm-flow-note">P.1 Nawarat Bridge · m³/s</div></article>
-        <article class="stat" title="How full the river channel is at the busiest gauge — 100% means water reaches the top of the bank"><div class="stat-label">Most stressed gauge</div><div class="stat-value" id="peak-flow">—</div><div class="stat-note" id="peak-station">Awaiting station data</div></article>
-        <article class="stat"><div class="stat-label">Last updated</div><div class="stat-value" id="last-updated">—</div><div class="stat-note" id="data-age">Loading latest readings</div></article>
+    <section class="stats" data-i18n-aria="aria.summary" aria-label="River summary">
+        <article class="stat"><div class="stat-label" data-i18n="stat.stations">Reporting stations</div><div class="stat-value" id="station-count">—</div><div class="stat-note" id="station-count-note" data-i18n="stat.stations.note">RID gauges with current readings</div></article>
+        <article class="stat" data-i18n-title="stat.flow.tip" title="Discharge: the volume of water flowing past the gauge each second (cubic meters per second)"><div class="stat-label" data-i18n="stat.flow">Chiang Mai river flow</div><div class="stat-value" id="total-flow">—</div><div class="stat-note" id="cm-flow-note" data-i18n="stat.flow.note">P.1 Nawarat Bridge · m³/s</div></article>
+        <article class="stat" data-i18n-title="stat.stress.tip" title="How full the river channel is at the busiest gauge — 100% means water reaches the top of the bank"><div class="stat-label" data-i18n="stat.stress">Most stressed gauge</div><div class="stat-value" id="peak-flow">—</div><div class="stat-note" id="peak-station" data-i18n="stat.stress.note">Awaiting station data</div></article>
+        <article class="stat"><div class="stat-label" data-i18n="stat.updated">Last updated</div><div class="stat-value" id="last-updated">—</div><div class="stat-note" id="data-age" data-i18n="stat.updated.note">Loading latest readings</div></article>
     </section>
 
     <section class="workspace">
         <article class="map-card">
-            <div id="station-map" role="application" aria-label="Interactive map of Ping River monitoring stations"></div>
+            <div id="station-map" role="application" data-i18n-aria="aria.map" aria-label="Interactive map of Ping River monitoring stations"></div>
             <div class="map-overlay">
-                <div class="map-heading"><strong>Station flow map</strong><span>River width, colour &amp; dash speed follow live discharge</span></div>
+                <div class="map-heading"><strong data-i18n="map.title">Station flow map</strong><span data-i18n="map.subtitle">River width, colour &amp; dash speed follow live discharge</span></div>
                 <div style="display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:0">
-                <button type="button" id="legend-toggle" aria-expanded="false" aria-controls="map-legend">☰ Legend</button>
+                <button type="button" id="legend-toggle" aria-expanded="false" aria-controls="map-legend" data-i18n="legend.button">☰ Legend</button>
                 <div class="legend" id="map-legend">
-                    <div class="legend-title">Flow status</div>
-                    <div class="legend-row"><i class="swatch" style="background:#1e8b60"></i> Low &lt; 25 m³/s</div>
-                    <div class="legend-row"><i class="swatch" style="background:#087da5"></i> Moderate 25–100</div>
-                    <div class="legend-row"><i class="swatch" style="background:#d99018"></i> High 100–250</div>
-                    <div class="legend-row"><i class="swatch" style="background:#cc4b37"></i> Very high &gt; 250</div>
-                    <div class="legend-row"><i class="line-swatch" style="background:#69b7d0"></i> River · no nearby gauge</div>
-                    <div class="legend-row"><i class="line-swatch" style="background:linear-gradient(90deg,#1e8b60,#087da5,#d99018,#cc4b37)"></i> River · gauge colour, dashes = flow</div>
-                    <div class="legend-title" style="margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:8px">Rainfall · 24 h
-                        <label style="font-weight:650;color:var(--muted);display:flex;align-items:center;gap:4px;cursor:pointer"><input type="checkbox" id="rain-toggle" checked style="accent-color:#086b96">show</label>
+                    <div class="legend-title" data-i18n="legend.flow">Flow status</div>
+                    <div class="legend-row"><i class="swatch" style="background:#1e8b60"></i> <span data-i18n="legend.flow.low">Low &lt; 25 m³/s</span></div>
+                    <div class="legend-row"><i class="swatch" style="background:#087da5"></i> <span data-i18n="legend.flow.moderate">Moderate 25–100</span></div>
+                    <div class="legend-row"><i class="swatch" style="background:#d99018"></i> <span data-i18n="legend.flow.high">High 100–250</span></div>
+                    <div class="legend-row"><i class="swatch" style="background:#cc4b37"></i> <span data-i18n="legend.flow.veryhigh">Very high &gt; 250</span></div>
+                    <div class="legend-row"><i class="line-swatch" style="background:#69b7d0"></i> <span data-i18n="legend.river.nogauge">River · no nearby gauge</span></div>
+                    <div class="legend-row"><i class="line-swatch" style="background:linear-gradient(90deg,#1e8b60,#087da5,#d99018,#cc4b37)"></i> <span data-i18n="legend.river.gauge">River · gauge colour, dashes = flow</span></div>
+                    <div class="legend-title" style="margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:8px"><span data-i18n="legend.rain">Rainfall · 24 h</span>
+                        <label style="font-weight:650;color:var(--muted);display:flex;align-items:center;gap:4px;cursor:pointer"><input type="checkbox" id="rain-toggle" checked style="accent-color:#086b96"><span data-i18n="legend.rain.show">show</span></label>
                     </div>
-                    <div class="legend-row"><i class="swatch" style="background:#b7a6e3;border-radius:50%"></i> Light 0.1–10 mm</div>
-                    <div class="legend-row"><i class="swatch" style="background:#8f6fd2;border-radius:50%"></i> Moderate 10–35</div>
-                    <div class="legend-row"><i class="swatch" style="background:#6844b8;border-radius:50%"></i> Heavy 35–90</div>
-                    <div class="legend-row"><i class="swatch" style="background:#472a96;border-radius:50%"></i> Very heavy 90–150</div>
-                    <div class="legend-row"><i class="swatch" style="background:#2a1668;border-radius:50%"></i> Extreme &gt; 150</div>
-                    <div class="legend-title" style="margin-top:10px">Other markers</div>
-                    <div class="legend-row"><i class="swatch" style="background:#7b8f94"></i> Gauge · no recent data</div>
-                    <div class="legend-row"><span style="font-weight:800;color:#0f6844">+</span> Water-level sensor · colour = % of bank height</div>
+                    <div class="legend-row"><i class="swatch" style="background:#b7a6e3;border-radius:50%"></i> <span data-i18n="legend.rain.light">Light 0.1–10 mm</span></div>
+                    <div class="legend-row"><i class="swatch" style="background:#8f6fd2;border-radius:50%"></i> <span data-i18n="legend.rain.moderate">Moderate 10–35</span></div>
+                    <div class="legend-row"><i class="swatch" style="background:#6844b8;border-radius:50%"></i> <span data-i18n="legend.rain.heavy">Heavy 35–90</span></div>
+                    <div class="legend-row"><i class="swatch" style="background:#472a96;border-radius:50%"></i> <span data-i18n="legend.rain.veryheavy">Very heavy 90–150</span></div>
+                    <div class="legend-row"><i class="swatch" style="background:#2a1668;border-radius:50%"></i> <span data-i18n="legend.rain.extreme">Extreme &gt; 150</span></div>
+                    <div class="legend-title" style="margin-top:10px" data-i18n="legend.other">Other markers</div>
+                    <div class="legend-row"><i class="swatch" style="background:#7b8f94"></i> <span data-i18n="legend.other.nodata">Gauge · no recent data</span></div>
+                    <div class="legend-row"><span style="font-weight:800;color:#0f6844">+</span> <span data-i18n="legend.other.sensor">Water-level sensor · colour = % of bank height</span></div>
                 </div>
                 </div>
             </div>
-            <div class="loading-panel" id="loading"><div class="loading-card">Loading river conditions…</div></div>
-            <div class="error-panel" id="error"><div><strong>Map data could not be loaded.</strong><br><span id="error-message"></span></div></div>
+            <div class="loading-panel" id="loading"><div class="loading-card" data-i18n="loading">Loading river conditions…</div></div>
+            <div class="error-panel" id="error"><div><strong data-i18n="error.map">Map data could not be loaded.</strong><br><span id="error-message"></span></div></div>
             <div class="replay-clock" id="replay-clock"><strong id="replay-clock-time">—</strong><span id="replay-clock-sub"></span><span class="replay-alert" id="replay-alert"></span></div>
         </article>
 
         <aside class="side-card">
-            <div class="side-head"><h2>Current station flow</h2><p>Select a station to locate it and load its history</p>
-                <input type="search" id="station-search" placeholder="Search stations · code, name, river…" aria-label="Search stations" style="margin-top:10px;width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:white;font-size:.8rem">
+            <div class="side-head"><h2 data-i18n="side.title">Current station flow</h2><p data-i18n="side.subtitle">Select a station to locate it and load its history</p>
+                <input type="search" id="station-search" data-i18n-placeholder="search.placeholder" data-i18n-aria="search.aria" placeholder="Search stations · code, name, river…" aria-label="Search stations" style="margin-top:10px;width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:white;font-size:.8rem">
             </div>
             <div class="station-list" id="river-flow" aria-live="polite"></div>
-            <div class="side-head" id="sensors-head" style="cursor:pointer" role="button" tabindex="0" aria-expanded="false" aria-controls="thaiwater-sensors" title="Show / hide the ThaiWater/HII station list"><h2>Additional basin stations <span id="sensors-arrow" style="color:var(--muted);font-size:.8rem">▸</span></h2><p id="thaiwater-count">Loading ThaiWater/HII stations…</p></div>
+            <div class="side-head" id="sensors-head" style="cursor:pointer" role="button" tabindex="0" aria-expanded="false" aria-controls="thaiwater-sensors" data-i18n-title="sensors.tip" title="Show / hide the ThaiWater/HII station list"><h2><span data-i18n="sensors.title">Additional basin stations</span> <span id="sensors-arrow" style="color:var(--muted);font-size:.8rem">▸</span></h2><p id="thaiwater-count" data-i18n="sensors.loading">Loading ThaiWater/HII stations…</p></div>
             <div class="station-list" id="thaiwater-sensors" aria-live="polite" style="display:none"></div>
         </aside>
     </section>
 
     <section class="map-card" id="forecast-card" style="margin-top:14px;padding:20px;display:none">
         <div style="display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap">
-            <div><h2 style="margin:0;font-size:1rem">Flood risk outlook <span style="color:var(--muted);font-weight:650;font-size:.72rem">· experimental</span></h2>
-            <p id="forecast-status" class="subtitle">Model probability of reaching warning / danger levels within 6, 12 and 24 hours</p>
-            <p class="subtitle" style="margin-top:3px">Not an official warning — for official alerts see <a href="https://twa.thaiwater.net/" target="_blank" rel="noopener">ThaiWater</a> and <a href="https://www.tmd.go.th/" target="_blank" rel="noopener">TMD</a></p></div>
+            <div><h2 style="margin:0;font-size:1rem"><span data-i18n="forecast.title">Flood risk outlook</span> <span style="color:var(--muted);font-weight:650;font-size:.72rem" data-i18n="forecast.experimental">· experimental</span></h2>
+            <p id="forecast-status" class="subtitle" data-i18n="forecast.status">Model probability of reaching warning / danger levels within 6, 12 and 24 hours</p>
+            <p class="subtitle" style="margin-top:3px"><span data-i18n="forecast.disclaimer">Not an official warning — for official alerts see</span> <a href="https://twa.thaiwater.net/" target="_blank" rel="noopener">ThaiWater</a> <span data-i18n="common.and">and</span> <a href="https://www.tmd.go.th/" target="_blank" rel="noopener">TMD</a></p></div>
         </div>
         <div class="p1-outlook" id="p1-outlook" style="display:none">
             <div class="p1-outlook-head">
-                <div><strong>Chiang Mai city flood outlook · P.1 Nawarat Bridge</strong>
+                <div><strong data-i18n="outlook.title">Chiang Mai city flood outlook · P.1 Nawarat Bridge</strong>
                 <div class="p1-peak" id="p1-peak"></div></div>
-                <button type="button" class="zones-button" id="zones-toggle">Show flood zones on map</button>
+                <button type="button" class="zones-button" id="zones-toggle" data-i18n="zones.show">Show flood zones on map</button>
             </div>
             <div class="stage-strip" id="p1-stages"></div>
-            <div class="p1-peak" style="margin-top:7px">Chance the river reaches each official inundation stage within 24 h — city flooding begins at stage 1 (3.70 m); each stage floods additional districts.</div>
+            <div class="p1-peak" style="margin-top:7px" data-i18n="outlook.explainer">Chance the river reaches each official inundation stage within 24 h — city flooding begins at stage 1 (3.70 m); each stage floods additional districts.</div>
         </div>
         <button type="button" class="zones-button" id="forecast-expand" style="display:none;margin-top:12px">Show all station forecasts ▾</button>
         <div class="forecast-grid" id="forecast-grid" style="display:none"></div>
@@ -311,31 +361,31 @@
 
     <section class="map-card" id="history-card" style="margin-top:14px;padding:20px">
         <div style="display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap">
-            <div><h2 id="history-title" style="margin:0;font-size:1rem">Station history</h2><p id="history-status" class="subtitle">Select a station to load the last 7 days</p></div>
-            <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
-                <select id="history-range" style="padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:white"><option value="24">Last 24 hours</option><option value="168" selected>Last 7 days</option><option value="720">Last 30 days</option><option value="2160">Last 90 days</option><option value="876000">All time</option><option value="custom" hidden>Custom range</option></select>
-                <input type="date" id="history-start" title="From date" style="padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:white">
+            <div><h2 id="history-title" style="margin:0;font-size:1rem" data-i18n="history.title">Station history</h2><p id="history-status" class="subtitle" data-i18n="history.status">Select a station to load the last 7 days</p></div>
+            <div class="history-controls" style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
+                <select id="history-range" style="padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:white"><option value="24" data-i18n="range.24h">Last 24 hours</option><option value="168" selected data-i18n="range.7d">Last 7 days</option><option value="720" data-i18n="range.30d">Last 30 days</option><option value="2160" data-i18n="range.90d">Last 90 days</option><option value="876000" data-i18n="range.all">All time</option><option value="custom" hidden data-i18n="range.custom">Custom range</option></select>
+                <input type="date" id="history-start" data-i18n-title="range.from" title="From date" style="padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:white">
                 <span style="color:var(--muted)">–</span>
-                <input type="date" id="history-end" title="To date" style="padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:white">
+                <input type="date" id="history-end" data-i18n-title="range.to" title="To date" style="padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:white">
             </div>
         </div>
-        <div style="height:260px;margin-top:14px;overflow:hidden;position:relative"><canvas id="history-chart" aria-label="Historical water level and discharge chart" style="display:block"></canvas><div id="history-placeholder" style="position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:.85rem;text-align:center;padding:20px">Click any station on the map or in the list to see its history</div></div>
+        <div style="height:260px;margin-top:14px;overflow:hidden;position:relative"><canvas id="history-chart" data-i18n-aria="aria.chart" aria-label="Historical water level and discharge chart" style="display:block"></canvas><div id="history-placeholder" data-i18n="history.placeholder" style="position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:.85rem;text-align:center;padding:20px">Click any station on the map or in the list to see its history</div></div>
     </section>
 
-    <section class="stats" id="db-stats" aria-label="Database statistics" style="margin-top:14px;display:none;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))">
-        <article class="stat"><div class="stat-label">Total datapoints</div><div class="stat-value" id="db-total">—</div><div class="stat-note" id="db-total-note">measurements stored</div></article>
-        <article class="stat"><div class="stat-label">Date range</div><div class="stat-value" id="db-range" style="font-size:1.05rem;line-height:1.3;white-space:normal">—</div><div class="stat-note">first to last record</div></article>
-        <article class="stat"><div class="stat-label">Days spanned</div><div class="stat-value" id="db-days">—</div><div class="stat-note">between first and last</div></article>
-        <article class="stat"><div class="stat-label">Stations</div><div class="stat-value" id="db-stations">—</div><div class="stat-note" id="db-stations-note">distinct in database</div></article>
-        <article class="stat"><div class="stat-label">Coverage</div><div class="stat-value" id="db-coverage">—</div><div class="stat-note">of RID hourly slots recorded</div></article>
+    <section class="stats" id="db-stats" data-i18n-aria="aria.dbstats" aria-label="Database statistics" style="margin-top:14px;display:none;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))">
+        <article class="stat"><div class="stat-label" data-i18n="db.total">Total datapoints</div><div class="stat-value" id="db-total">—</div><div class="stat-note" id="db-total-note" data-i18n="db.total.note">measurements stored</div></article>
+        <article class="stat"><div class="stat-label" data-i18n="db.range">Date range</div><div class="stat-value" id="db-range" style="font-size:1.05rem;line-height:1.3;white-space:normal">—</div><div class="stat-note" data-i18n="db.range.note">first to last record</div></article>
+        <article class="stat"><div class="stat-label" data-i18n="db.days">Days spanned</div><div class="stat-value" id="db-days">—</div><div class="stat-note" data-i18n="db.days.note">between first and last</div></article>
+        <article class="stat"><div class="stat-label" data-i18n="db.stations">Stations</div><div class="stat-value" id="db-stations">—</div><div class="stat-note" id="db-stations-note" data-i18n="db.stations.note">distinct in database</div></article>
+        <article class="stat"><div class="stat-label" data-i18n="db.coverage">Coverage</div><div class="stat-value" id="db-coverage">—</div><div class="stat-note" data-i18n="db.coverage.note">of RID hourly slots recorded</div></article>
     </section>
 
     <footer style="margin:22px 0 10px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:.75rem">
-        <span>Open-source river monitoring for Northern Thailand · data from RID &amp; ThaiWater/HII</span>
-        <nav style="display:flex;gap:16px">
+        <span data-i18n="footer.tagline">Open-source river monitoring for Northern Thailand · data from RID &amp; ThaiWater/HII</span>
+        <nav style="display:flex;gap:16px;flex-wrap:wrap">
             <a href="https://buildfor.life" target="_blank" rel="noopener" style="color:var(--ink);font-weight:700;text-decoration:none">buildfor.life ↗</a>
-            <a href="https://git.b4l.co.th/B4L/Northern-Thailand-Ping-River-Monitor" target="_blank" rel="noopener" style="color:var(--ink);font-weight:700;text-decoration:none">Source code ↗</a>
-            <a href="/docs" target="_blank" rel="noopener" style="color:var(--ink);font-weight:700;text-decoration:none">API docs ↗</a>
+            <a href="https://git.b4l.co.th/B4L/Northern-Thailand-Ping-River-Monitor" target="_blank" rel="noopener" style="color:var(--ink);font-weight:700;text-decoration:none" data-i18n="footer.source">Source code ↗</a>
+            <a href="/docs" target="_blank" rel="noopener" style="color:var(--ink);font-weight:700;text-decoration:none" data-i18n="footer.docs">API docs ↗</a>
         </nav>
     </footer>
 </main>
@@ -348,6 +398,454 @@
     const state = { map: null, layers: [], markers: new Map(), hasFit: false, historyChart: null, selectedStation: null, historyRequestId: 0, p1Stages: null, p1Now: null, rainLayer: null, useDates: false, forecastExpanded: false };
     const $ = (id) => document.getElementById(id);
 
+    // ---- Localisation -----------------------------------------------------
+    // Thai first: this is a flood warning for people living on this river.
+    // Strings with runtime values are functions; everything else is a literal.
+    // Station names already arrive bilingual from the API and are not translated.
+    const STRINGS = {
+        en: {
+            'app.title': 'Ping River Live Monitor',
+            'app.subtitle': 'Current water level and discharge across Northern Thailand',
+            'pill.live': 'LIVE DATA',
+            'pill.replay': '⏪ 2024 REPLAY',
+            'pill.sim': '⚠ SIMULATION',
+            'action.refresh': '↻ Refresh',
+            'replay.start': '▶ Replay Oct 2024 flood',
+            'replay.stop': '⏹ Stop replay',
+            'replay.loading': 'Loading 2024 data…',
+            'replay.unavailable': (msg) => `Replay unavailable: ${msg}`,
+            'loading': 'Loading river conditions…',
+            'error.map': 'Map data could not be loaded.',
+            'error.leaflet': 'The map library did not load. Check the internet connection.',
+            'aria.summary': 'River summary',
+            'aria.map': 'Interactive map of Ping River monitoring stations',
+            'aria.chart': 'Historical water level and discharge chart',
+            'aria.dbstats': 'Database statistics',
+            'stage.chip': (n, lvl) => `S${n} · ${lvl} m`,
+            'common.and': 'and',
+            'common.nodata': 'No data',
+            'common.unknown': 'Unknown',
+            'stat.stations': 'Reporting stations',
+            'stat.stations.note': 'RID gauges with current readings',
+            'stat.stations.note.hii': (n) => `RID gauges · +${n} ThaiWater/HII reporting`,
+            'stat.flow': 'Chiang Mai river flow',
+            'stat.flow.note': 'P.1 Nawarat Bridge · m³/s',
+            'stat.flow.note.replay': 'P.1 Nawarat Bridge · m³/s · 2024 replay',
+            'stat.flow.tip': 'Discharge: the volume of water flowing past the gauge each second (cubic metres per second)',
+            'stat.stress': 'Most stressed gauge',
+            'stat.stress.note': 'Awaiting station data',
+            'stat.stress.capacity': (code) => `${code} · of channel capacity`,
+            'stat.stress.nodata': 'No capacity data',
+            'stat.stress.tip': 'How full the river channel is at the busiest gauge — 100% means water reaches the top of the bank',
+            'stat.updated': 'Last updated',
+            'stat.updated.note': 'Loading latest readings',
+            'stat.updated.ago': (date, mins) => `${date} · ${mins} min ago`,
+            'stat.updated.none': 'No timestamp available',
+            'map.title': 'Station flow map',
+            'map.subtitle': 'River width, colour & dash speed follow live discharge',
+            'legend.button': '☰ Legend',
+            'legend.flow': 'Flow status',
+            'legend.flow.low': 'Low < 25 m³/s',
+            'legend.flow.moderate': 'Moderate 25–100',
+            'legend.flow.high': 'High 100–250',
+            'legend.flow.veryhigh': 'Very high > 250',
+            'legend.river.nogauge': 'River · no nearby gauge',
+            'legend.river.gauge': 'River · gauge colour, dashes = flow',
+            'legend.rain': 'Rainfall · 24 h',
+            'legend.rain.show': 'show',
+            'legend.rain.light': 'Light 0.1–10 mm',
+            'legend.rain.moderate': 'Moderate 10–35',
+            'legend.rain.heavy': 'Heavy 35–90',
+            'legend.rain.veryheavy': 'Very heavy 90–150',
+            'legend.rain.extreme': 'Extreme > 150',
+            'legend.other': 'Other markers',
+            'legend.other.nodata': 'Gauge · no recent data',
+            'legend.other.sensor': 'Water-level sensor · colour = % of bank height',
+            'side.title': 'Current station flow',
+            'side.subtitle': 'Select a station to locate it and load its history',
+            'search.placeholder': 'Search stations · code, name, river…',
+            'search.aria': 'Search stations',
+            'sensors.title': 'Additional basin stations',
+            'sensors.tip': 'Show / hide the ThaiWater/HII station list',
+            'sensors.loading': 'Loading ThaiWater/HII stations…',
+            'sensors.count': (n) => `${n} Ping basin stations · ThaiWater/HII water level`,
+            'verdict.disclaimer': 'Experimental model — not an official warning · official alerts:',
+            'verdict.flooding': (lvl) => `Chiang Mai city flooding stage reached — river at ${lvl} m (flooding starts at 3.70 m)`,
+            'verdict.likely': (lvl) => `Flooding likely — the river may reach warning level within 24 h (now ${lvl}, warning at 3.70 m)`,
+            'unit.m': 'm',
+            'verdict.watch': (lvl, tail) => `Watch — river elevated at ${lvl}; ${tail}`,
+            'verdict.watch.chance': (pct) => `${pct}% chance of reaching the 3.70 m warning level within 24 h`,
+            'verdict.watch.monitor': 'monitor conditions',
+            'verdict.ok': (lvl) => `No Chiang Mai city flooding expected in the next 24 h — river at ${lvl}, flooding starts at 3.70 m`,
+            'forecast.title': 'Flood risk outlook',
+            'forecast.experimental': '· experimental',
+            'forecast.status': 'Model probability of reaching warning / danger levels within 6, 12 and 24 hours',
+            'forecast.status.full': (asOf, model) => `Probability of exceeding warning / danger level within 6, 12 and 24 h${asOf}${model}`,
+            'forecast.status.asof': (when) => ` · based on readings up to ${when}`,
+            'forecast.status.model': (version, trained) => ` · model ${version}${trained}`,
+            'forecast.status.trained': (when) => ` (trained ${when})`,
+            'forecast.disclaimer': 'Not an official warning — for official alerts see',
+            'forecast.peakrisk': (now) => `${now}peak risk next 24h`,
+            'forecast.now': (lvl) => `now ${lvl} m · `,
+            'forecast.chip.tip': (h, warn, danger, peak, heuristic) => `+${h}h · warning ${warn}% · danger ${danger}%${peak}${heuristic}`,
+            'forecast.chip.peak': (lvl) => ` · peak ~${lvl} m`,
+            'forecast.chip.heuristic': ' · heuristic fallback',
+            'forecast.expand': (n) => `Show all ${n} station forecasts ▾`,
+            'forecast.collapse': 'Hide station forecasts ▴',
+            'outlook.title': 'Chiang Mai city flood outlook · P.1 Nawarat Bridge',
+            'outlook.explainer': 'Chance the river reaches each official inundation stage within 24 h — city flooding begins at stage 1 (3.70 m); each stage floods additional districts.',
+            'outlook.now': (now, h, peak) => `Now ${now} m · predicted peak next ${h} h: ${peak} m`,
+            'outlook.sim': (demo, real) => `⚠ SIMULATION: P.1 at ${demo} m (real: ${real} m)`,
+            'outlook.sim.rising': (lvl, real) => `⚠ SIMULATION: rising water · P.1 at ${lvl} m (real: ${real} m)`,
+            'stage.tip': (stage, lvl, pct, h) => `Stage ${stage}: river at ${lvl} m — ${pct}% within ${h} h`,
+            'zones.show': 'Show flood zones on map',
+            'zones.hide': 'Hide flood zones',
+            'zones.unavailable': 'Flood zones unavailable',
+            'zone.title': (zone) => `Flood zone ${zone}`,
+            'zone.floods': (lvl) => `Floods when P.1 ≥ ${lvl} m`,
+            'zone.p1now': 'P.1 now',
+            'zone.chance24': 'Chance within 24 h',
+            'zone.reached': 'River is at or above this zone’s level now',
+            'zone.marker': 'Marker',
+            'zone.outside': 'Outside the mapped flood zones',
+            'zone.field': 'Flood zone',
+            'history.title': 'Station history',
+            'history.title.station': (code) => `${code} · station history`,
+            'history.status': 'Select a station to load the last 7 days',
+            'history.loading': 'Loading historical measurements…',
+            'history.placeholder': 'Click any station on the map or in the list to see its history',
+            'history.count': (n, extra) => `${n} measurements${extra}`,
+            'history.count.daily': (n) => ` (${n} daily averages)`,
+            'history.empty': 'No measurements in this period',
+            'history.unavailable': (msg) => `History unavailable: ${msg}`,
+            'history.selectfirst': 'Select a station first — click one on the map or in the list',
+            'chart.discharge': 'Discharge (m³/s)',
+            'chart.level': 'Water level (m)',
+            'chart.model': 'Model 24 h peak (as issued)',
+            'range.24h': 'Last 24 hours',
+            'range.7d': 'Last 7 days',
+            'range.30d': 'Last 30 days',
+            'range.90d': 'Last 90 days',
+            'range.all': 'All time',
+            'range.custom': 'Custom range',
+            'range.from': 'From date',
+            'range.to': 'To date',
+            'popup.discharge': 'Discharge',
+            'popup.level': 'Water level',
+            'popup.reading': (when) => `Reading: ${when}`,
+            'popup.noreading': 'No reading available',
+            'popup.bank': 'Bank status',
+            'popup.belowbank': (m) => `${m} m below bank`,
+            'popup.gauge': (m) => ` (${m} m on the gauge)`,
+            'popup.last24': 'Last 24 h',
+            'popup.lasthour': 'Last hour',
+            'popup.raingauge': 'Rain gauge',
+            'popup.raingauge.of': (agency) => `${agency} rain gauge · ThaiWater`,
+            'popup.basin': 'Ping basin',
+            'rain.none': 'No rain',
+            'rain.light': 'Light rain',
+            'rain.moderate': 'Moderate rain',
+            'rain.heavy': 'Heavy rain',
+            'rain.veryheavy': 'Very heavy rain',
+            'rain.extreme': 'Extreme rain',
+            'flow.bank': 'of bank height',
+            'replay.clock.sub': (lvl, flow) => `P.1 ${lvl} · basin flow ${flow} m³/s`,
+            'replay.peak': (when, lvl, flow) => `⏪ 2024 flood replay · ${when} · P.1 at ${lvl} · basin flow ${flow} m³/s`,
+            'replay.flooding': '🌊 FLOODING · river above stage 1 (3.70 m)',
+            'replay.alert': (peak) => `⚠ MODEL ALERT · flooding within 24 h likely${peak}`,
+            'replay.alert.peak': (lvl) => ` · predicted peak ${lvl} m`,
+            'replay.elevated': (pct) => `model: elevated flood risk (${pct}% within 24 h)`,
+            'replay.noflood': 'model: no flood expected',
+            'replay.stress': (code) => `${code} · strongest flow · m³/s · 2024 replay`,
+            'replay.nodischarge': 'No discharge reported',
+            'db.total': 'Total datapoints',
+            'db.total.note': 'measurements stored',
+            'db.total.breakdown': (rid, hii, rain, om) => `${rid} RID · ${hii} HII level · ${rain} rain${om}`,
+            'db.total.openmeteo': (n) => ` · ${n} forecast rain`,
+            'db.stations.breakdown': (rid, hii) => `${rid} RID · ${hii} ThaiWater/HII`,
+            'db.range': 'Date range',
+            'db.range.note': 'first to last record',
+            'db.days': 'Days spanned',
+            'db.days.note': 'between first and last',
+            'db.stations': 'Stations',
+            'db.stations.note': 'distinct in database',
+            'db.coverage': 'Coverage',
+            'db.coverage.note': 'of RID hourly slots recorded',
+            'footer.tagline': 'Open-source river monitoring for Northern Thailand · data from RID & ThaiWater/HII',
+            'footer.source': 'Source code ↗',
+            'footer.docs': 'API docs ↗',
+        },
+        th: {
+            'app.title': 'ติดตามระดับน้ำปิงแบบเรียลไทม์',
+            'app.subtitle': 'ระดับน้ำและอัตราการไหลปัจจุบันทั่วภาคเหนือของประเทศไทย',
+            'pill.live': 'ข้อมูลสด',
+            'pill.replay': '⏪ ย้อนเหตุการณ์ 2567',
+            'pill.sim': '⚠ การจำลอง',
+            'action.refresh': '↻ รีเฟรช',
+            'replay.start': '▶ ย้อนดูน้ำท่วม ต.ค. 2567',
+            'replay.stop': '⏹ หยุดการเล่นย้อนหลัง',
+            'replay.loading': 'กำลังโหลดข้อมูลปี 2567…',
+            'replay.unavailable': (msg) => `เล่นย้อนหลังไม่ได้: ${msg}`,
+            'loading': 'กำลังโหลดสถานการณ์น้ำ…',
+            'error.map': 'ไม่สามารถโหลดข้อมูลแผนที่ได้',
+            'error.leaflet': 'โหลดไลบรารีแผนที่ไม่สำเร็จ กรุณาตรวจสอบการเชื่อมต่ออินเทอร์เน็ต',
+            'aria.summary': 'สรุปสถานการณ์น้ำ',
+            'aria.map': 'แผนที่แบบโต้ตอบแสดงสถานีตรวจวัดแม่น้ำปิง',
+            'aria.chart': 'กราฟระดับน้ำและอัตราการไหลย้อนหลัง',
+            'aria.dbstats': 'สถิติฐานข้อมูล',
+            'stage.chip': (n, lvl) => `ระดับ ${n} · ${lvl} ม.`,
+            'common.and': 'และ',
+            'common.nodata': 'ไม่มีข้อมูล',
+            'common.unknown': 'ไม่ทราบ',
+            'stat.stations': 'สถานีที่รายงานผล',
+            'stat.stations.note': 'สถานีวัดของกรมชลประทานที่มีข้อมูลล่าสุด',
+            'stat.stations.note.hii': (n) => `สถานีกรมชลประทาน · เพิ่ม ${n} สถานีจาก ThaiWater/HII`,
+            'stat.flow': 'อัตราการไหลที่เชียงใหม่',
+            'stat.flow.note': 'P.1 สะพานนวรัฐ · ลบ.ม./วินาที',
+            'stat.flow.note.replay': 'P.1 สะพานนวรัฐ · ลบ.ม./วินาที · ย้อนหลังปี 2567',
+            'stat.flow.tip': 'อัตราการไหล: ปริมาณน้ำที่ไหลผ่านสถานีวัดในแต่ละวินาที (ลูกบาศก์เมตรต่อวินาที)',
+            'stat.stress': 'สถานีที่ลำน้ำเต็มที่สุด',
+            'stat.stress.note': 'รอข้อมูลจากสถานี',
+            'stat.stress.capacity': (code) => `${code} · ของความจุลำน้ำ`,
+            'stat.stress.nodata': 'ไม่มีข้อมูลความจุ',
+            'stat.stress.tip': 'ระดับความเต็มของลำน้ำที่สถานีที่มีน้ำมากที่สุด — 100% หมายถึงน้ำถึงระดับตลิ่ง',
+            'stat.updated': 'อัปเดตล่าสุด',
+            'stat.updated.note': 'กำลังโหลดข้อมูลล่าสุด',
+            'stat.updated.ago': (date, mins) => `${date} · ${mins} นาทีที่แล้ว`,
+            'stat.updated.none': 'ไม่มีข้อมูลเวลา',
+            'map.title': 'แผนที่การไหลของน้ำ',
+            'map.subtitle': 'ความกว้าง สี และความเร็วเส้นประของแม่น้ำแสดงอัตราการไหลจริง',
+            'legend.button': '☰ คำอธิบาย',
+            'legend.flow': 'สถานะการไหล',
+            'legend.flow.low': 'น้อย < 25 ลบ.ม./วินาที',
+            'legend.flow.moderate': 'ปานกลาง 25–100',
+            'legend.flow.high': 'สูง 100–250',
+            'legend.flow.veryhigh': 'สูงมาก > 250',
+            'legend.river.nogauge': 'แม่น้ำ · ไม่มีสถานีวัดใกล้เคียง',
+            'legend.river.gauge': 'แม่น้ำ · สีตามสถานีวัด เส้นประ = การไหล',
+            'legend.rain': 'ปริมาณฝน · 24 ชม.',
+            'legend.rain.show': 'แสดง',
+            'legend.rain.light': 'เล็กน้อย 0.1–10 มม.',
+            'legend.rain.moderate': 'ปานกลาง 10–35',
+            'legend.rain.heavy': 'หนัก 35–90',
+            'legend.rain.veryheavy': 'หนักมาก 90–150',
+            'legend.rain.extreme': 'รุนแรง > 150',
+            'legend.other': 'สัญลักษณ์อื่น ๆ',
+            'legend.other.nodata': 'สถานีวัด · ไม่มีข้อมูลล่าสุด',
+            'legend.other.sensor': 'เซ็นเซอร์ระดับน้ำ · สี = % ของความสูงตลิ่ง',
+            'side.title': 'การไหลของน้ำรายสถานี',
+            'side.subtitle': 'เลือกสถานีเพื่อดูตำแหน่งและข้อมูลย้อนหลัง',
+            'search.placeholder': 'ค้นหาสถานี · รหัส ชื่อ แม่น้ำ…',
+            'search.aria': 'ค้นหาสถานี',
+            'sensors.title': 'สถานีอื่นในลุ่มน้ำ',
+            'sensors.tip': 'แสดง / ซ่อนรายชื่อสถานี ThaiWater/HII',
+            'sensors.loading': 'กำลังโหลดสถานี ThaiWater/HII…',
+            'sensors.count': (n) => `${n} สถานีในลุ่มน้ำปิง · ระดับน้ำจาก ThaiWater/HII`,
+            'verdict.disclaimer': 'แบบจำลองทดลอง — ไม่ใช่การเตือนภัยอย่างเป็นทางการ · ประกาศทางการ:',
+            'verdict.flooding': (lvl) => `น้ำถึงระดับท่วมเมืองเชียงใหม่แล้ว — ระดับน้ำ ${lvl} ม. (เริ่มท่วมที่ 3.70 ม.)`,
+            'verdict.likely': (lvl) => `มีแนวโน้มน้ำท่วม — ระดับน้ำอาจถึงระดับเตือนภัยภายใน 24 ชม. (ขณะนี้ ${lvl} เตือนภัยที่ 3.70 ม.)`,
+            'unit.m': 'ม.',
+            'verdict.watch': (lvl, tail) => `เฝ้าระวัง — ระดับน้ำอยู่ในเกณฑ์สูง ขณะนี้ ${lvl} · ${tail}`,
+            'verdict.watch.chance': (pct) => `โอกาส ${pct}% ที่จะถึงระดับเตือนภัย 3.70 ม. ภายใน 24 ชม.`,
+            'verdict.watch.monitor': 'ติดตามสถานการณ์',
+            'verdict.ok': (lvl) => `ไม่คาดว่าจะเกิดน้ำท่วมในเมืองเชียงใหม่ใน 24 ชม. ข้างหน้า — ระดับน้ำ ${lvl} เริ่มท่วมที่ 3.70 ม.`,
+            'forecast.title': 'แนวโน้มความเสี่ยงน้ำท่วม',
+            'forecast.experimental': '· ทดลอง',
+            'forecast.status': 'ความน่าจะเป็นที่ระดับน้ำจะถึงระดับเตือนภัย / อันตราย ภายใน 6, 12 และ 24 ชั่วโมง',
+            'forecast.status.full': (asOf, model) => `แบบจำลองประเมินความน่าจะเป็นที่จะเกินระดับเตือนภัย / อันตราย ภายใน 6, 12 และ 24 ชม.${asOf}${model}`,
+            'forecast.status.asof': (when) => ` · จากข้อมูลถึง ${when}`,
+            'forecast.status.model': (version, trained) => ` · แบบจำลอง ${version}${trained}`,
+            'forecast.status.trained': (when) => ` (ฝึกเมื่อ ${when})`,
+            'forecast.disclaimer': 'ไม่ใช่การเตือนภัยอย่างเป็นทางการ — ประกาศทางการดูที่',
+            'forecast.peakrisk': (now) => `${now}ความเสี่ยงสูงสุดใน 24 ชม.`,
+            'forecast.now': (lvl) => `ขณะนี้ ${lvl} ม. · `,
+            'forecast.chip.tip': (h, warn, danger, peak, heuristic) => `+${h} ชม. · เตือนภัย ${warn}% · อันตราย ${danger}%${peak}${heuristic}`,
+            'forecast.chip.peak': (lvl) => ` · ระดับสูงสุดประมาณ ${lvl} ม.`,
+            'forecast.chip.heuristic': ' · ใช้การประมาณอย่างง่าย',
+            'forecast.expand': (n) => `แสดงพยากรณ์ทั้ง ${n} สถานี ▾`,
+            'forecast.collapse': 'ซ่อนพยากรณ์รายสถานี ▴',
+            'outlook.title': 'แนวโน้มน้ำท่วมเมืองเชียงใหม่ · P.1 สะพานนวรัฐ',
+            'outlook.explainer': 'โอกาสที่ระดับน้ำจะถึงแต่ละระดับการท่วมตามประกาศทางการภายใน 24 ชม. — น้ำเริ่มท่วมเมืองที่ระดับ 1 (3.70 ม.) และแต่ละระดับจะท่วมพื้นที่เพิ่มขึ้น',
+            'outlook.now': (now, h, peak) => `ขณะนี้ ${now} ม. · คาดการณ์ระดับสูงสุดใน ${h} ชม.: ${peak} ม.`,
+            'outlook.sim': (demo, real) => `⚠ การจำลอง: P.1 ที่ ${demo} ม. (จริง: ${real} ม.)`,
+            'outlook.sim.rising': (lvl, real) => `⚠ การจำลอง: น้ำกำลังสูงขึ้น · P.1 ที่ ${lvl} ม. (จริง: ${real} ม.)`,
+            'stage.tip': (stage, lvl, pct, h) => `ระดับ ${stage}: น้ำที่ ${lvl} ม. — ${pct}% ภายใน ${h} ชม.`,
+            'zones.show': 'แสดงพื้นที่น้ำท่วมบนแผนที่',
+            'zones.hide': 'ซ่อนพื้นที่น้ำท่วม',
+            'zones.unavailable': 'ไม่มีข้อมูลพื้นที่น้ำท่วม',
+            'zone.title': (zone) => `พื้นที่น้ำท่วมระดับ ${zone}`,
+            'zone.floods': (lvl) => `ท่วมเมื่อ P.1 ≥ ${lvl} ม.`,
+            'zone.p1now': 'P.1 ขณะนี้',
+            'zone.chance24': 'โอกาสภายใน 24 ชม.',
+            'zone.reached': 'ระดับน้ำถึงหรือเกินระดับของพื้นที่นี้แล้ว',
+            'zone.marker': 'หมุด',
+            'zone.outside': 'อยู่นอกพื้นที่น้ำท่วมที่ทำแผนที่ไว้',
+            'zone.field': 'พื้นที่น้ำท่วม',
+            'history.title': 'ข้อมูลย้อนหลังรายสถานี',
+            'history.title.station': (code) => `${code} · ข้อมูลย้อนหลัง`,
+            'history.status': 'เลือกสถานีเพื่อดูข้อมูล 7 วันล่าสุด',
+            'history.loading': 'กำลังโหลดข้อมูลย้อนหลัง…',
+            'history.placeholder': 'คลิกสถานีใดก็ได้บนแผนที่หรือในรายการเพื่อดูข้อมูลย้อนหลัง',
+            'history.count': (n, extra) => `${n} ค่าที่วัดได้${extra}`,
+            'history.count.daily': (n) => ` (เฉลี่ยรายวัน ${n} ค่า)`,
+            'history.empty': 'ไม่มีข้อมูลในช่วงเวลานี้',
+            'history.unavailable': (msg) => `ไม่สามารถโหลดข้อมูลย้อนหลัง: ${msg}`,
+            'history.selectfirst': 'กรุณาเลือกสถานีก่อน — คลิกบนแผนที่หรือในรายการ',
+            'chart.discharge': 'อัตราการไหล (ลบ.ม./วินาที)',
+            'chart.level': 'ระดับน้ำ (ม.)',
+            'chart.model': 'ค่าพยากรณ์สูงสุด 24 ชม. (ตามที่ออกในขณะนั้น)',
+            'range.24h': '24 ชั่วโมงล่าสุด',
+            'range.7d': '7 วันล่าสุด',
+            'range.30d': '30 วันล่าสุด',
+            'range.90d': '90 วันล่าสุด',
+            'range.all': 'ทั้งหมด',
+            'range.custom': 'กำหนดช่วงเอง',
+            'range.from': 'วันที่เริ่มต้น',
+            'range.to': 'วันที่สิ้นสุด',
+            'popup.discharge': 'อัตราการไหล',
+            'popup.level': 'ระดับน้ำ',
+            'popup.reading': (when) => `ข้อมูลเมื่อ: ${when}`,
+            'popup.noreading': 'ไม่มีข้อมูลการวัด',
+            'popup.bank': 'สถานะตลิ่ง',
+            'popup.belowbank': (m) => `ต่ำกว่าตลิ่ง ${m} ม.`,
+            'popup.gauge': (m) => ` (${m} ม. ตามระดับไม้วัด)`,
+            'popup.last24': '24 ชม. ล่าสุด',
+            'popup.lasthour': '1 ชม. ล่าสุด',
+            'popup.raingauge': 'สถานีวัดน้ำฝน',
+            'popup.raingauge.of': (agency) => `สถานีวัดน้ำฝน ${agency} · ThaiWater`,
+            'popup.basin': 'ลุ่มน้ำปิง',
+            'rain.none': 'ไม่มีฝน',
+            'rain.light': 'ฝนเล็กน้อย',
+            'rain.moderate': 'ฝนปานกลาง',
+            'rain.heavy': 'ฝนหนัก',
+            'rain.veryheavy': 'ฝนหนักมาก',
+            'rain.extreme': 'ฝนรุนแรง',
+            'flow.bank': 'ของความสูงตลิ่ง',
+            'replay.clock.sub': (lvl, flow) => `P.1 ${lvl} · การไหลรวมในลุ่มน้ำ ${flow} ลบ.ม./วินาที`,
+            'replay.peak': (when, lvl, flow) => `⏪ ย้อนเหตุการณ์น้ำท่วม 2567 · ${when} · P.1 ที่ ${lvl} · การไหลรวม ${flow} ลบ.ม./วินาที`,
+            'replay.flooding': '🌊 น้ำท่วม · ระดับน้ำเกินระดับ 1 (3.70 ม.)',
+            'replay.alert': (peak) => `⚠ แบบจำลองเตือน · มีแนวโน้มน้ำท่วมภายใน 24 ชม.${peak}`,
+            'replay.alert.peak': (lvl) => ` · คาดระดับสูงสุด ${lvl} ม.`,
+            'replay.elevated': (pct) => `แบบจำลอง: ความเสี่ยงน้ำท่วมสูงขึ้น (${pct}% ภายใน 24 ชม.)`,
+            'replay.noflood': 'แบบจำลอง: ไม่คาดว่าจะเกิดน้ำท่วม',
+            'replay.stress': (code) => `${code} · การไหลแรงที่สุด · ลบ.ม./วินาที · ย้อนหลัง 2567`,
+            'replay.nodischarge': 'ไม่มีรายงานอัตราการไหล',
+            'db.total': 'จำนวนข้อมูลทั้งหมด',
+            'db.total.note': 'ค่าที่จัดเก็บไว้',
+            'db.total.breakdown': (rid, hii, rain, om) => `${rid} กรมชลประทาน · ${hii} ระดับน้ำ HII · ${rain} น้ำฝน${om}`,
+            'db.total.openmeteo': (n) => ` · ${n} ฝนพยากรณ์`,
+            'db.stations.breakdown': (rid, hii) => `${rid} กรมชลประทาน · ${hii} ThaiWater/HII`,
+            'db.range': 'ช่วงวันที่',
+            'db.range.note': 'ข้อมูลแรกถึงข้อมูลล่าสุด',
+            'db.days': 'จำนวนวัน',
+            'db.days.note': 'ระหว่างข้อมูลแรกกับข้อมูลล่าสุด',
+            'db.stations': 'สถานี',
+            'db.stations.note': 'ที่มีอยู่ในฐานข้อมูล',
+            'db.coverage': 'ความครอบคลุม',
+            'db.coverage.note': 'ของช่วงเวลารายชั่วโมงที่บันทึกได้',
+            'footer.tagline': 'ระบบติดตามแม่น้ำแบบโอเพนซอร์สสำหรับภาคเหนือ · ข้อมูลจากกรมชลประทาน และ ThaiWater/HII',
+            'footer.source': 'ซอร์สโค้ด ↗',
+            'footer.docs': 'เอกสาร API ↗',
+        },
+    };
+
+    // Thai unless the visitor's browser says otherwise: most people at risk on
+    // this river read Thai. An explicit choice is remembered.
+    const LANG_KEY = 'ping-monitor-lang';
+    function initialLang() {
+        const saved = (() => { try { return localStorage.getItem(LANG_KEY); } catch (e) { return null; } })();
+        if (saved === 'th' || saved === 'en') return saved;
+        // First match wins, in the browser's own preference ORDER. Testing
+        // "is English anywhere in the list" would hand English to the very
+        // readers this exists for: Thai profiles routinely carry en-US behind th.
+        for (const entry of (navigator.languages || [navigator.language || ''])) {
+            const code = String(entry).toLowerCase();
+            if (code.startsWith('th')) return 'th';
+            if (code.startsWith('en')) return 'en';
+        }
+        return 'th';
+    }
+    state.lang = initialLang();
+
+    function t(key, ...args) {
+        const table = STRINGS[state.lang] || STRINGS.en;
+        const value = table[key] !== undefined ? table[key] : STRINGS.en[key];
+        if (value === undefined) return key; // visible, not silently blank
+        return typeof value === 'function' ? value(...args) : value;
+    }
+
+    function applyTranslations() {
+        document.documentElement.lang = state.lang;
+        document.querySelectorAll('[data-i18n]').forEach((el) => {
+            el.textContent = t(el.getAttribute('data-i18n'));
+        });
+        document.querySelectorAll('[data-i18n-placeholder]').forEach((el) => {
+            el.placeholder = t(el.getAttribute('data-i18n-placeholder'));
+        });
+        document.querySelectorAll('[data-i18n-title]').forEach((el) => {
+            el.title = t(el.getAttribute('data-i18n-title'));
+        });
+        document.querySelectorAll('[data-i18n-aria]').forEach((el) => {
+            el.setAttribute('aria-label', t(el.getAttribute('data-i18n-aria')));
+        });
+        const toggle = $('lang-toggle');
+        if (toggle) {
+            // The label names the language you'd switch TO. aria-pressed can't
+            // express that without contradicting the label, so the accessible
+            // name states the action outright and styling keys off the data attr.
+            const toEnglish = state.lang === 'th';
+            toggle.textContent = toEnglish ? 'EN' : 'ไทย';
+            toggle.lang = toEnglish ? 'en' : 'th';
+            toggle.setAttribute('data-active-lang', state.lang);
+            toggle.setAttribute('aria-label', toEnglish ? 'Switch to English' : 'เปลี่ยนเป็นภาษาไทย');
+        }
+    }
+
+    function setLang(lang) {
+        state.lang = lang;
+        try { localStorage.setItem(LANG_KEY, lang); } catch (e) { /* private mode */ }
+        applyTranslations();
+        // Re-render everything that builds strings in JS
+        if (state.lastRender) {
+            const { stations, readings } = state.lastRender;
+            // Rebuild the map layers too: markers bind popup text, and simply
+            // re-running renderThaiWaterSensors would stack a second full set
+            // of sensor markers on top of the existing ones.
+            if (state.map && !state.replayTimer) {
+                renderMap(stations, readings, state.lastRiverNetwork);
+                if (state.lastRainRecords) renderRainLayer(state.lastRainRecords);
+                if (state.lastSensors) renderThaiWaterSensors(state.lastSensors.sensors, state.lastSensors.codes);
+                loadCustomMarkers();
+            } else if (state.lastSensors) {
+                // During replay the map is mid-animation; only the list text
+                // is safe to rebuild (markers are restyled by the replay tick).
+                renderThaiWaterSensors(state.lastSensors.sensors, state.lastSensors.codes);
+            }
+            renderList(stations, readings);
+            if (!state.replayTimer) renderSummary(stations, readings);
+            applyStationSearch();
+        }
+        if (state.lastForecastRows) renderForecasts(state.lastForecastRows);
+        if (state.lastStats) renderDbStats(state.lastStats);
+        if (state.selectedStation) loadHistory(state.selectedStation);
+        const zonesButton = $('zones-toggle');
+        if (zonesButton) zonesButton.textContent = zoneLayer ? t('zones.hide') : t('zones.show');
+        // Keep whatever mode the page is actually in — relabelling a pinned
+        // simulation or a 2024 replay as "LIVE DATA" would present fabricated
+        // flood levels as real.
+        setLiveIndicator(state.liveMode || 'live', state.liveLabelKey);
+        if (state.replayTimer) $('replay-2024').textContent = t('replay.stop');
+    }
+
+    // Thai dates use the Buddhist era, which is what Thai readers expect and
+    // what the replay label ("ต.ค. 2567") already says — pinning Gregorian here
+    // put two different year systems on the same screen.
+    function loc() { return state.lang === 'th' ? 'th-TH' : 'en-GB'; }
+    // Metre abbreviation: "ม." reads as a unit in Thai, "m" mid-sentence does not.
+    function metres(value, digits = 2) {
+        return `${Number(value).toFixed(digits)} ${t('unit.m')}`;
+    }
+
     function flowColor(flow) {
         if (flow == null || Number.isNaN(flow)) return '#7b8f94';
         if (flow < 25) return '#1e8b60';
@@ -360,12 +858,12 @@
     // distinct from the flow palette so a map dot is never ambiguous between
     // "flow status" and "rainfall amount".
     function rainBin(mm) {
-        if (mm == null || Number.isNaN(mm) || mm <= 0) return { color: '#90a4a9', radius: 2.5, label: 'No rain', opacity: .45 };
-        if (mm <= 10) return { color: '#b7a6e3', radius: 4.5, label: 'Light rain' };
-        if (mm <= 35) return { color: '#8f6fd2', radius: 6, label: 'Moderate rain' };
-        if (mm <= 90) return { color: '#6844b8', radius: 7.5, label: 'Heavy rain' };
-        if (mm <= 150) return { color: '#472a96', radius: 9.5, label: 'Very heavy rain' };
-        return { color: '#2a1668', radius: 11.5, label: 'Extreme rain' };
+        if (mm == null || Number.isNaN(mm) || mm <= 0) return { color: '#90a4a9', radius: 2.5, label: t('rain.none'), opacity: .45 };
+        if (mm <= 10) return { color: '#b7a6e3', radius: 4.5, label: t('rain.light') };
+        if (mm <= 35) return { color: '#8f6fd2', radius: 6, label: t('rain.moderate') };
+        if (mm <= 90) return { color: '#6844b8', radius: 7.5, label: t('rain.heavy') };
+        if (mm <= 150) return { color: '#472a96', radius: 9.5, label: t('rain.veryheavy') };
+        return { color: '#2a1668', radius: 11.5, label: t('rain.extreme') };
     }
 
     // Chips that carry text need contrast-safe pairings: slightly darkened
@@ -378,6 +876,7 @@
     }
 
     function renderRainLayer(records) {
+        state.lastRainRecords = records;
         if (state.rainLayer) { state.map.removeLayer(state.rainLayer); state.rainLayer = null; }
         if (!records || !records.length) return;
         const group = L.layerGroup();
@@ -385,18 +884,18 @@
             if (!Number.isFinite(r.latitude) || !Number.isFinite(r.longitude)) return;
             const mm = r.rain_24h == null ? null : Number(r.rain_24h);
             const bin = rainBin(mm);
-            const name = r.name_en || r.name_th || r.oldcode || `Station ${r.station_id}`;
-            const time = r.timestamp ? new Date(r.timestamp).toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' }) : 'No reading';
+            const name = (state.lang === 'th' ? r.name_th || r.name_en : r.name_en || r.name_th) || r.oldcode || `Station ${r.station_id}`;
+            const time = r.timestamp ? new Date(r.timestamp).toLocaleString(loc(), { dateStyle: 'medium', timeStyle: 'short' }) : t('popup.noreading');
             L.circleMarker([r.latitude, r.longitude], {
                 radius: bin.radius, color: '#ffffff', weight: 1.5,
                 fillColor: bin.color, fillOpacity: bin.opacity ?? .85
-            }).bindPopup(`<div class="popup"><div class="popup-code">${escapeHtml(r.oldcode || 'Rain gauge')} · ${escapeHtml(bin.label)}</div>
-                <h3>${escapeHtml(name)}</h3><div class="popup-th">${escapeHtml(r.agency || 'HII')} rain gauge · ThaiWater</div>
+            }).bindPopup(() => `<div class="popup"><div class="popup-code">${escapeHtml(r.oldcode || t('popup.raingauge'))} · ${escapeHtml(rainBin(mm).label)}</div>
+                <h3>${escapeHtml(name)}</h3><div class="popup-th">${escapeHtml(t('popup.raingauge.of', r.agency || 'HII'))}</div>
                 <div class="popup-grid">
-                    <div class="popup-metric"><span>Last 24 h</span><strong>${mm == null ? 'No data' : mm.toFixed(1) + ' mm'}</strong></div>
-                    <div class="popup-metric"><span>Last hour</span><strong>${r.rain_1h == null ? '—' : Number(r.rain_1h).toFixed(1) + ' mm'}</strong></div>
+                    <div class="popup-metric"><span>${escapeHtml(t('popup.last24'))}</span><strong>${mm == null ? escapeHtml(t('common.nodata')) : mm.toFixed(1) + ' mm'}</strong></div>
+                    <div class="popup-metric"><span>${escapeHtml(t('popup.lasthour'))}</span><strong>${r.rain_1h == null ? '—' : Number(r.rain_1h).toFixed(1) + ' mm'}</strong></div>
                 </div>
-                <div class="popup-time">Reading: ${escapeHtml(time)}</div></div>`).addTo(group);
+                <div class="popup-time">${escapeHtml(t('popup.reading', time))}</div></div>`).addTo(group);
         });
         state.rainLayer = group;
         const toggle = $('rain-toggle');
@@ -419,7 +918,7 @@
     }
 
     function formatFlow(value) {
-        return value == null || Number.isNaN(Number(value)) ? 'No data' : `${Number(value).toFixed(1)} m³/s`;
+        return value == null || Number.isNaN(Number(value)) ? t('common.nodata') : `${Number(value).toFixed(1)} m³/s`;
     }
 
     function markerSize(flow) {
@@ -428,7 +927,7 @@
     }
 
     function initMap() {
-        if (!window.L) throw new Error('The map library did not load. Check the internet connection.');
+        if (!window.L) throw new Error(t('error.leaflet'));
         if (state.map) return;
         state.map = L.map('station-map', { zoomControl: true, attributionControl: true }).setView([18.78, 98.98], 8);
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
@@ -446,16 +945,19 @@
     function buildPopup(station, measurement) {
         const flow = measurement ? measurement.discharge : null;
         const level = measurement ? measurement.water_level : null;
-        const time = measurement ? new Date(measurement.timestamp).toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' }) : 'No reading available';
+        const time = measurement ? new Date(measurement.timestamp).toLocaleString(loc(), { dateStyle: 'medium', timeStyle: 'short' }) : t('popup.noreading');
+        // Station names are bilingual in the data: lead with the reader's language
+        const primary = state.lang === 'th' ? station.thai_name : station.english_name;
+        const secondary = state.lang === 'th' ? station.english_name : station.thai_name;
         return `<div class="popup">
             <div class="popup-code">${escapeHtml(station.station_code)}</div>
-            <h3>${escapeHtml(station.english_name)}</h3>
-            <div class="popup-th">${escapeHtml(station.thai_name)}</div>
+            <h3>${escapeHtml(primary || station.english_name)}</h3>
+            <div class="popup-th">${escapeHtml(secondary || '')}</div>
             <div class="popup-grid">
-                <div class="popup-metric"><span>Discharge</span><strong>${escapeHtml(formatFlow(flow))}</strong></div>
-                <div class="popup-metric"><span>Water level</span><strong>${level == null ? 'No data' : `${Number(level).toFixed(2)} m`}</strong></div>
+                <div class="popup-metric"><span>${escapeHtml(t('popup.discharge'))}</span><strong>${escapeHtml(formatFlow(flow))}</strong></div>
+                <div class="popup-metric"><span>${escapeHtml(t('popup.level'))}</span><strong>${level == null ? escapeHtml(t('common.nodata')) : escapeHtml(metres(level))}</strong></div>
             </div>
-            <div class="popup-time">Reading: ${escapeHtml(time)}</div>
+            <div class="popup-time">${escapeHtml(t('popup.reading', time))}</div>
         </div>`;
     }
 
@@ -558,10 +1060,13 @@
         }));
     }
 
-    function setLiveIndicator(mode, label) {
+    function setLiveIndicator(mode, labelKey) {
         const pill = $('live-pill');
-        $('live-pill-text').textContent = label || 'LIVE DATA';
-        pill.title = label || 'LIVE DATA'; // mobile shows the dot only
+        state.liveMode = mode;
+        state.liveLabelKey = labelKey || 'pill.live';
+        const label = t(state.liveLabelKey);
+        $('live-pill-text').textContent = label;
+        pill.title = label; // mobile shows the dot only
         pill.classList.toggle('demo', mode !== 'live');
     }
 
@@ -581,8 +1086,10 @@
                 html: `<div class="flow-marker" style="--marker-color:${color};--marker-size:${size}px">${escapeHtml(station.station_code.replace('P.', ''))}</div>`,
                 iconSize: [size, size], iconAnchor: [size / 2, size / 2], popupAnchor: [0, -size / 2]
             });
+            // Bind a FUNCTION, not a string: the popup then renders in the
+            // language current at open time instead of the one at map build.
             const marker = L.marker([station.latitude, station.longitude], { icon, title: `${station.station_code} ${station.english_name}` })
-                .bindPopup(buildPopup(station, measurement))
+                .bindPopup(() => buildPopup(station, measurement))
                 .on('click', () => loadHistory(station.station_code))
                 .addTo(state.map);
             state.layers.push(marker);
@@ -599,8 +1106,8 @@
         state.selectedStation = stationCode;
         state.historyRequestId++;
         const reqId = state.historyRequestId;
-        $('history-title').textContent = `${stationCode} · station history`;
-        $('history-status').textContent = 'Loading historical measurements…';
+        $('history-title').textContent = t('history.title.station', stationCode);
+        $('history-status').textContent = t('history.loading');
         $('history-placeholder').style.display = 'none';
         try {
             // Hand-edited dates win; dropdown-driven loads use the precise
@@ -670,11 +1177,11 @@
             state.historyChart = new Chart($('history-chart'), {
                 type: 'line',
                 data: {
-                    labels: sampled.map((row) => new Date(row.timestamp).toLocaleString('en-TH', { timeZone: 'Asia/Bangkok', month: 'short', day: 'numeric', year: '2-digit', hour: '2-digit' })),
+                    labels: sampled.map((row) => new Date(row.timestamp).toLocaleString(loc(), { timeZone: 'Asia/Bangkok', month: 'short', day: 'numeric', year: '2-digit', hour: '2-digit' })),
                     datasets: [
-                        { label: 'Discharge (m³/s)', data: sampled.map((row) => row.discharge), borderColor: '#087da5', backgroundColor: 'rgba(8,125,165,.12)', yAxisID: 'flow', pointRadius: 0, tension: .25 },
-                        { label: 'Water level (m)', data: sampled.map((row) => row.water_level), borderColor: '#d99018', yAxisID: 'level', pointRadius: 0, tension: .25 },
-                        ...(predSeries ? [{ label: 'Model 24 h peak (as issued)', data: predSeries, borderColor: '#7c4fd0', borderDash: [6, 4], yAxisID: 'level', pointRadius: 0, tension: .25, spanGaps: true }] : [])
+                        { label: t('chart.discharge'), data: sampled.map((row) => row.discharge), borderColor: '#087da5', backgroundColor: 'rgba(8,125,165,.12)', yAxisID: 'flow', pointRadius: 0, tension: .25 },
+                        { label: t('chart.level'), data: sampled.map((row) => row.water_level), borderColor: '#d99018', yAxisID: 'level', pointRadius: 0, tension: .25 },
+                        ...(predSeries ? [{ label: t('chart.model'), data: predSeries, borderColor: '#7c4fd0', borderDash: [6, 4], yAxisID: 'level', pointRadius: 0, tension: .25, spanGaps: true }] : [])
                     ]
                 },
                 options: {
@@ -722,9 +1229,12 @@
                     }
                 }]
             });
-            $('history-status').textContent = rows.length ? `${rows.length} measurements${sampled.length !== rows.length ? ` (${sampled.length} daily averages)` : ''}` : 'No measurements in this period';
+            $('history-status').textContent = rows.length
+                ? t('history.count', rows.length.toLocaleString(loc()),
+                    sampled.length !== rows.length ? t('history.count.daily', sampled.length.toLocaleString(loc())) : '')
+                : t('history.empty');
         } catch (error) {
-            $('history-status').textContent = `History unavailable: ${error.message}`;
+            $('history-status').textContent = t('history.unavailable', error.message);
         }
     }
 
@@ -749,6 +1259,7 @@
 
     function renderList(stations, readings) {
         const container = $('river-flow');
+        state.lastRender = { stations, readings };
         container.replaceChildren();
         const ordered = [...stations].sort((a, b) => {
             const af = readings.get(a.station_code)?.discharge;
@@ -760,8 +1271,10 @@
             const flow = measurement?.discharge == null ? null : Number(measurement.discharge);
             const row = document.createElement('button');
             row.type = 'button'; row.className = 'station-row';
+            const primary = state.lang === 'th' ? station.thai_name : station.english_name;
+            const secondary = state.lang === 'th' ? station.english_name : station.thai_name;
             row.innerHTML = `<span class="station-code" style="${chipStyle(flowColor(flow))}">${escapeHtml(station.station_code)}</span>
-                <span class="station-name"><strong>${escapeHtml(station.english_name)}</strong><span>${escapeHtml(station.thai_name)}</span></span>
+                <span class="station-name"><strong>${escapeHtml(primary || station.english_name)}</strong><span>${escapeHtml(secondary || '')}</span></span>
                 <span class="flow-value">${flow == null ? '—' : flow.toFixed(1)}<span>m³/s</span></span>`;
             row.addEventListener('click', () => {
                 const marker = state.markers.get(station.station_code);
@@ -774,12 +1287,13 @@
 
     function renderThaiWaterSensors(sensors, existingCodes) {
         const container = $('thaiwater-sensors');
+        state.lastSensors = { sensors, codes: existingCodes };
         container.replaceChildren();
         const additional = sensors
             .filter((sensor) => !existingCodes.has(sensor.station_code))
             .sort((a, b) => (Number(b.bank_percent) || -1) - (Number(a.bank_percent) || -1));
         state.hiiReportingCount = additional.length;
-        $('thaiwater-count').textContent = `${additional.length} Ping basin stations · ThaiWater/HII water level`;
+        $('thaiwater-count').textContent = t('sensors.count', additional.length);
         additional.forEach((sensor) => {
             const percent = sensor.bank_percent == null ? null : Number(sensor.bank_percent);
             // ThaiWater situation bands by % of bank capacity: over-bank red,
@@ -796,11 +1310,11 @@
                 iconSize: [22, 22], iconAnchor: [11, 11], popupAnchor: [0, -11]
             });
             const gauge = sensor.offset_msl != null && sensor.water_level_msl != null
-                ? ` (${(Number(sensor.water_level_msl) - Number(sensor.offset_msl)).toFixed(2)} m gauge)` : '';
-            const level = sensor.water_level_msl == null ? 'No data' : `${Number(sensor.water_level_msl).toFixed(2)} m MSL${gauge}`;
-            const bank = sensor.distance_to_bank == null ? 'Unknown' : `${Number(sensor.distance_to_bank).toFixed(2)} m below bank`;
+                ? t('popup.gauge', (Number(sensor.water_level_msl) - Number(sensor.offset_msl)).toFixed(2)) : '';
+            const level = sensor.water_level_msl == null ? t('common.nodata') : `${metres(sensor.water_level_msl)} MSL${gauge}`;
+            const bank = sensor.distance_to_bank == null ? t('common.unknown') : t('popup.belowbank', Number(sensor.distance_to_bank).toFixed(2));
             const marker = L.marker([sensor.latitude, sensor.longitude], { icon, title: `${sensor.station_code} ${sensor.station_name}` })
-                .bindPopup(`<div class="popup"><div class="popup-code">${escapeHtml(sensor.station_code)} · ThaiWater</div><h3>${escapeHtml(sensor.station_name)}</h3><div class="popup-th">${escapeHtml(sensor.river_name || 'Ping basin')} · ${escapeHtml(sensor.agency || '')}</div><div class="popup-grid"><div class="popup-metric"><span>Water level</span><strong>${escapeHtml(level)}</strong></div><div class="popup-metric"><span>Bank status</span><strong>${escapeHtml(bank)}</strong></div></div></div>`)
+                .bindPopup(() => `<div class="popup"><div class="popup-code">${escapeHtml(sensor.station_code)} · ThaiWater</div><h3>${escapeHtml(sensor.station_name)}</h3><div class="popup-th">${escapeHtml(sensor.river_name || t('popup.basin'))} · ${escapeHtml(sensor.agency || '')}</div><div class="popup-grid"><div class="popup-metric"><span>${escapeHtml(t('popup.level'))}</span><strong>${escapeHtml(level)}</strong></div><div class="popup-metric"><span>${escapeHtml(t('popup.bank'))}</span><strong>${escapeHtml(bank)}</strong></div></div></div>`)
                 .addTo(state.map);
             state.layers.push(marker);
             state.markers.set(`thaiwater:${sensor.station_code}`, marker);
@@ -808,7 +1322,7 @@
             const row = document.createElement('button');
             row.type = 'button'; row.className = 'station-row';
             const codeClass = sensor.station_code.length > 5 ? 'station-code long' : 'station-code';
-            row.innerHTML = `<span class="${codeClass}" style="${chipStyle(color)}">${escapeHtml(sensor.station_code)}</span><span class="station-name"><strong>${escapeHtml(sensor.station_name)}</strong><span>${escapeHtml(sensor.river_name || 'Ping basin')} · ThaiWater</span></span><span class="flow-value">${percent == null ? '—' : percent.toFixed(0) + '%'}<span>of bank height</span></span>`;
+            row.innerHTML = `<span class="${codeClass}" style="${chipStyle(color)}">${escapeHtml(sensor.station_code)}</span><span class="station-name"><strong>${escapeHtml(sensor.station_name)}</strong><span>${escapeHtml(sensor.river_name || t('popup.basin'))} · ThaiWater</span></span><span class="flow-value">${percent == null ? '—' : percent.toFixed(0) + '%'}<span>${escapeHtml(t('flow.bank'))}</span></span>`;
             row.addEventListener('click', () => { state.map.flyTo(marker.getLatLng(), Math.max(state.map.getZoom(), 11), { duration: .8 }); marker.openPopup(); });
             container.appendChild(row);
         });
@@ -821,19 +1335,21 @@
         const level = state.p1Now;
         const fc = state.p1Forecast24; // {p_warning, p_danger, predicted_max_level} or null
         if (level == null && !fc) { banner.style.display = 'none'; return; }
+        const levelText = level == null ? '—' : metres(level);
         let cls, icon, text;
         if (level != null && level >= 3.7) {
             cls = 'danger'; icon = '🛑';
-            text = `Chiang Mai city flooding stage reached — river at ${level.toFixed(2)} m (flooding starts at 3.70 m)`;
+            text = t('verdict.flooding', level.toFixed(2));
         } else if (fc && (fc.p_danger >= .5 || fc.p_warning >= .7)) {
             cls = 'danger'; icon = '🛑';
-            text = `Flooding likely — the river may reach warning level within 24 h (now ${level == null ? '—' : level.toFixed(2) + ' m'}, warning at 3.70 m)`;
+            text = t('verdict.likely', levelText);
         } else if ((fc && fc.p_warning >= .2) || (level != null && level >= 3.2)) {
             cls = 'watch'; icon = '⚠️';
-            text = `Watch — river elevated at ${level == null ? '—' : level.toFixed(2) + ' m'}; ${fc ? Math.round(fc.p_warning * 100) + '% chance of reaching the 3.70 m warning level within 24 h' : 'monitor conditions'}`;
+            text = t('verdict.watch', levelText,
+                fc ? t('verdict.watch.chance', Math.round(fc.p_warning * 100)) : t('verdict.watch.monitor'));
         } else {
             cls = 'ok'; icon = '✓';
-            text = `No Chiang Mai city flooding expected in the next 24 h — river at ${level == null ? '—' : level.toFixed(2) + ' m'}, flooding starts at 3.70 m`;
+            text = t('verdict.ok', levelText);
         }
         banner.className = cls;
         $('verdict-icon').textContent = icon;
@@ -847,7 +1363,7 @@
         const latest = timestamps.length ? new Date(Math.max(...timestamps.map((date) => date.getTime()))) : null;
         $('station-count').textContent = `${current.length} / ${stations.length}`;
         if (state.hiiReportingCount != null) {
-            $('station-count-note').textContent = `RID gauges · +${state.hiiReportingCount} ThaiWater/HII reporting`;
+            $('station-count-note').textContent = t('stat.stations.note.hii', state.hiiReportingCount);
         }
         // Flow at the basin anchor (summing sequential mainstem gauges would
         // double-count the same water, so no basin-wide total is shown).
@@ -855,19 +1371,20 @@
         if (p1?.water_level != null) state.p1Now = Number(p1.water_level);
         updateFloodVerdict();
         const p1Flow = p1?.discharge == null ? null : Number(p1.discharge);
-        $('total-flow').textContent = p1Flow == null ? '—' : p1Flow.toLocaleString(undefined, { maximumFractionDigits: 1 });
-        $('cm-flow-note').textContent = 'P.1 Nawarat Bridge · m³/s'; // capacity % lives in the next tile
+        $('total-flow').textContent = p1Flow == null ? '—' : p1Flow.toLocaleString(loc(), { maximumFractionDigits: 1 });
+        $('cm-flow-note').textContent = t('stat.flow.note'); // capacity % lives in the next tile
         const stressed = current
             .filter((m) => m.discharge_percent != null)
             .map((m) => ({ code: m.station_code, percent: Number(m.discharge_percent) }));
         const worst = stressed.length ? stressed.reduce((max, item) => item.percent > max.percent ? item : max) : null;
         $('peak-flow').textContent = worst ? `${worst.percent.toFixed(0)}%` : '—';
-        $('peak-station').textContent = worst ? `${worst.code} · of channel capacity` : 'No capacity data';
-        $('last-updated').textContent = latest ? latest.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '—';
+        $('peak-station').textContent = worst ? t('stat.stress.capacity', worst.code) : t('stat.stress.nodata');
+        $('last-updated').textContent = latest ? latest.toLocaleTimeString(loc(), { hour: '2-digit', minute: '2-digit' }) : '—';
         if (latest) {
             const minutes = Math.max(0, Math.round((Date.now() - latest.getTime()) / 60000));
-            $('data-age').textContent = `${latest.toLocaleDateString([], { day: 'numeric', month: 'short' })} · ${minutes} min ago`;
-        } else $('data-age').textContent = 'No timestamp available';
+            $('data-age').textContent = t('stat.updated.ago',
+                latest.toLocaleDateString(loc(), { day: 'numeric', month: 'short' }), minutes);
+        } else $('data-age').textContent = t('stat.updated.none');
     }
 
     async function loadDashboard() {
@@ -910,6 +1427,7 @@
                 sensors = thaiWaterResponse && thaiWaterResponse.ok ? await thaiWaterResponse.json() : [];
             }
             const readings = latestByStation(measurements);
+            state.lastRiverNetwork = riverNetwork; // reused when the language changes
             renderMap(stations, readings, riverNetwork);
             renderRainLayer(rainRecords);
             renderList(stations, readings);
@@ -973,13 +1491,13 @@
         const level = Number(feature.properties.level);
         const st = zoneStage(zone);
         const flooded = state.p1Now != null && state.p1Now >= level;
-        return `<div class="popup"><div class="popup-code">Flood zone ${zone}</div>
-            <h3>Floods when P.1 ≥ ${level.toFixed(2)} m</h3>
+        return `<div class="popup"><div class="popup-code">${escapeHtml(t('zone.title', zone))}</div>
+            <h3>${escapeHtml(t('zone.floods', level.toFixed(2)))}</h3>
             <div class="popup-grid">
-                <div class="popup-metric"><span>P.1 now</span><strong>${state.p1Now == null ? '—' : state.p1Now.toFixed(2) + ' m'}</strong></div>
-                <div class="popup-metric"><span>Chance within 24 h</span><strong>${st ? Math.round(st.p_exceed * 100) + '%' : '—'}</strong></div>
+                <div class="popup-metric"><span>${escapeHtml(t('zone.p1now'))}</span><strong>${state.p1Now == null ? '—' : escapeHtml(metres(state.p1Now))}</strong></div>
+                <div class="popup-metric"><span>${escapeHtml(t('zone.chance24'))}</span><strong>${st ? Math.round(st.p_exceed * 100) + '%' : '—'}</strong></div>
             </div>
-            ${flooded ? '<div class="popup-time" style="color:#8d2f22;font-weight:800">River is at or above this zone’s level now</div>' : ''}</div>`;
+            ${flooded ? `<div class="popup-time" style="color:#8d2f22;font-weight:800">${escapeHtml(t('zone.reached'))}</div>` : ''}</div>`;
     }
 
     async function showFloodZones(fly) {
@@ -994,13 +1512,13 @@
             zoneLayer = L.geoJSON(zoneData, { style: zoneStyle })
                 .bindPopup((layer) => zonePopupHtml(layer.feature))
                 .addTo(state.map);
-            if (button) button.textContent = 'Hide flood zones';
+            if (button) button.textContent = t('zones.hide');
             if (fly) {
                 state.map.flyToBounds(zoneLayer.getBounds(), { maxZoom: 13, duration: .8 });
                 document.getElementById('station-map').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
             }
         } catch (error) {
-            if (button) button.textContent = 'Flood zones unavailable';
+            if (button) button.textContent = t('zones.unavailable');
         }
     }
 
@@ -1010,7 +1528,7 @@
             zoneLayer = null;
             state.zonesUserHidden = true; // don't auto-show again this session
             const button = $('zones-toggle');
-            if (button) button.textContent = 'Show flood zones on map';
+            if (button) button.textContent = t('zones.show');
         } else {
             state.zonesUserHidden = false;
             showFloodZones(true);
@@ -1049,21 +1567,21 @@
 
     function poiPopupHtml(poi) {
         const zone = zoneOfPoint(poi.lat, poi.lon);
-        let riskHtml = '<div class="popup-th">Outside the mapped flood zones</div>';
+        let riskHtml = `<div class="popup-th">${escapeHtml(t('zone.outside'))}</div>`;
         if (zone) {
             const st = zoneStage(zone.properties.zone);
             riskHtml = `<div class="popup-grid">
-                <div class="popup-metric"><span>Flood zone</span><strong>${zone.properties.zone} · P.1 ≥ ${Number(zone.properties.level).toFixed(2)} m</strong></div>
-                <div class="popup-metric"><span>Chance within 24 h</span><strong>${st ? Math.round(st.p_exceed * 100) + '%' : '—'}</strong></div>
+                <div class="popup-metric"><span>${escapeHtml(t('zone.field'))}</span><strong>${zone.properties.zone} · P.1 ≥ ${escapeHtml(metres(zone.properties.level))}</strong></div>
+                <div class="popup-metric"><span>${escapeHtml(t('zone.chance24'))}</span><strong>${st ? Math.round(st.p_exceed * 100) + '%' : '—'}</strong></div>
             </div>`;
         }
-        return `<div class="popup"><div class="popup-code">Marker</div><h3>${escapeHtml(poi.name)}</h3>${poi.note ? `<div class="popup-th">${escapeHtml(poi.note)}</div>` : ''}${riskHtml}</div>`;
+        return `<div class="popup"><div class="popup-code">${escapeHtml(t('zone.marker'))}</div><h3>${escapeHtml(poi.name)}</h3>${poi.note ? `<div class="popup-th">${escapeHtml(poi.note)}</div>` : ''}${riskHtml}</div>`;
     }
 
     function endReplay() {
         if (state.replayTimer) window.clearInterval(state.replayTimer);
         state.replayTimer = null;
-        $('replay-2024').textContent = '▶ Replay Oct 2024 flood';
+        $('replay-2024').textContent = t('replay.start');
         $('replay-clock').style.display = 'none';
         setLiveIndicator('live');
         loadDashboard();                                // restore live markers, river, zones
@@ -1072,7 +1590,7 @@
     async function replayFlood2024() {
         const button = $('replay-2024');
         if (state.replayTimer) { endReplay(); return; }
-        button.textContent = 'Loading 2024 data…';
+        button.textContent = t('replay.loading');
         try {
             const response = await fetch('/static/flood-2024-all.json');
             if (!response.ok) throw new Error(`HTTP ${response.status}`);
@@ -1081,8 +1599,8 @@
             if (n < 10) throw new Error('snapshot empty');
             state.zonesUserHidden = false;
             await showFloodZones(false);
-            button.textContent = '⏹ Stop replay';
-            setLiveIndicator('replay', '⏪ 2024 REPLAY');
+            button.textContent = t('replay.stop');
+            setLiveIndicator('replay', 'pill.replay');
             $('replay-clock').style.display = 'block';
             let i = 0;
             state.replayTimer = window.setInterval(() => {
@@ -1102,20 +1620,22 @@
                 });
                 // stat tiles follow the replay (restored by loadDashboard on finish)
                 const p1ReplayQ = data.stations['P.1'] ? data.stations['P.1'].discharge[frame] : null;
-                $('total-flow').textContent = p1ReplayQ == null ? '—' : Number(p1ReplayQ).toLocaleString(undefined, { maximumFractionDigits: 1 });
-                $('cm-flow-note').textContent = 'P.1 Nawarat Bridge · m³/s · 2024 replay';
+                $('total-flow').textContent = p1ReplayQ == null ? '—' : Number(p1ReplayQ).toLocaleString(loc(), { maximumFractionDigits: 1 });
+                $('cm-flow-note').textContent = t('stat.flow.note.replay');
                 $('peak-flow').textContent = peakFlow ? peakFlow.value.toFixed(0) : '—';
-                $('peak-station').textContent = peakFlow ? `${peakFlow.code} · strongest flow · m³/s · 2024 replay` : 'No discharge reported';
+                $('peak-station').textContent = peakFlow ? t('replay.stress', peakFlow.code) : t('replay.nodischarge');
                 restyleRiver(readings);
                 const p1Level = data.stations['P.1'] ? data.stations['P.1'].level[frame] : null;
                 if (p1Level != null) state.p1Now = Number(p1Level);
                 restyleFloodZones();
                 const ts = new Date(data.timestamps[frame]);
-                const when = ts.toLocaleString([], { day: 'numeric', month: 'short', hour: '2-digit' });
-                const p1Text = state.p1Now == null ? '—' : state.p1Now.toFixed(2) + ' m';
-                $('p1-peak').textContent = `⏪ 2024 flood replay · ${when} · P.1 at ${p1Text} · basin flow ${Math.round(totalFlow).toLocaleString()} m³/s`;
-                $('replay-clock-time').textContent = ts.toLocaleString([], { day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' });
-                $('replay-clock-sub').textContent = `P.1 ${p1Text} · basin flow ${Math.round(totalFlow).toLocaleString()} m³/s`;
+                // minute included: a lone "17" reads as a year in Thai output
+                const when = ts.toLocaleString(loc(), { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' });
+                const p1Text = state.p1Now == null ? '—' : metres(state.p1Now);
+                const basinFlow = Math.round(totalFlow).toLocaleString(loc());
+                $('p1-peak').textContent = t('replay.peak', when, p1Text, basinFlow);
+                $('replay-clock-time').textContent = ts.toLocaleString(loc(), { day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' });
+                $('replay-clock-sub').textContent = t('replay.clock.sub', p1Text, basinFlow);
                 // model track: what the forecast system (trained pre-flood) said at this moment
                 const model = data.model || {};
                 const pWarn = model.p_warn24 ? model.p_warn24[frame] : null;
@@ -1137,16 +1657,17 @@
                 }
                 const alertEl = $('replay-alert');
                 if (state.p1Now != null && state.p1Now >= 3.70) {
-                    alertEl.textContent = '🌊 FLOODING · river above stage 1 (3.70 m)';
+                    alertEl.textContent = t('replay.flooding');
                     alertEl.className = 'replay-alert flood';
                 } else if (pWarn != null && pWarn >= 0.5) {
-                    alertEl.textContent = `⚠ MODEL ALERT · flooding within 24 h likely${predMax != null ? ` · predicted peak ${predMax.toFixed(2)} m` : ''}`;
+                    alertEl.textContent = t('replay.alert',
+                        predMax != null ? t('replay.alert.peak', predMax.toFixed(2)) : '');
                     alertEl.className = 'replay-alert warn';
                 } else if (pWarn != null && pWarn >= 0.2) {
-                    alertEl.textContent = `model: elevated flood risk (${Math.round(pWarn * 100)}% within 24 h)`;
+                    alertEl.textContent = t('replay.elevated', Math.round(pWarn * 100));
                     alertEl.className = 'replay-alert note';
                 } else {
-                    alertEl.textContent = pWarn == null ? '' : 'model: no flood expected';
+                    alertEl.textContent = pWarn == null ? '' : t('replay.noflood');
                     alertEl.className = 'replay-alert note';
                 }
                 // Variable speed: race through quiet days, slow to hour-by-hour while
@@ -1158,7 +1679,7 @@
                 if (i >= n + 40) endReplay();           // hold the last frame briefly
             }, 120);
         } catch (error) {
-            button.textContent = `Replay unavailable: ${error.message}`;
+            button.textContent = t('replay.unavailable', error.message);
         }
     }
 
@@ -1203,8 +1724,8 @@
             const chip = document.createElement('div');
             chip.className = 'stage-chip';
             chip.setAttribute('style', chipStyle(stageColor(s.p_exceed)));
-            chip.title = `Stage ${s.stage}: river at ${s.level.toFixed(2)} m — ${Math.round(s.p_exceed * 100)}% within ${horizonHours} h`;
-            chip.innerHTML = `${Math.round(s.p_exceed * 100)}%<small>S${s.stage} · ${s.level.toFixed(2)} m</small>`;
+            chip.title = t('stage.tip', s.stage, s.level.toFixed(2), Math.round(s.p_exceed * 100), horizonHours);
+            chip.innerHTML = `${Math.round(s.p_exceed * 100)}%<small>${escapeHtml(t('stage.chip', s.stage, s.level.toFixed(2)))}</small>`;
             strip.appendChild(chip);
         });
     }
@@ -1222,20 +1743,22 @@
         const demoLevel = Number(params.get('demo_level'));
         const simulated = Number.isFinite(demoLevel) && demoLevel > 0;
         if (simulated) state.p1Now = demoLevel;
-        if ((simulated || params.has('demo_rise')) && !state.replayTimer) setLiveIndicator('sim', '⚠ SIMULATION');
+        if ((simulated || params.has('demo_rise')) && !state.replayTimer) setLiveIndicator('sim', 'pill.sim');
         if (params.has('demo_rise') && !state.demoRiseTimer) {
             let level = state.p1Now ?? 2.2;
             state.demoRiseTimer = window.setInterval(() => {
                 level = Math.min(level + 0.05, 5.30);
                 state.p1Now = level;
-                $('p1-peak').textContent = `⚠ SIMULATION: rising water · P.1 at ${level.toFixed(2)} m (real: ${Number(row.current_level).toFixed(2)} m)`;
+                $('p1-peak').textContent = t('outlook.sim.rising', level.toFixed(2), Number(row.current_level).toFixed(2));
                 restyleFloodZones();
                 if (level >= 5.30) window.clearInterval(state.demoRiseTimer);
             }, 700);
         }
         restyleFloodZones();
-        $('p1-peak').textContent = (simulated ? `⚠ SIMULATION: P.1 at ${demoLevel.toFixed(2)} m (real: ${Number(row.current_level).toFixed(2)} m)` :
-            `Now ${Number(row.current_level).toFixed(2)} m`) + ` · predicted peak next ${row.horizon_hours} h: ${Number(row.predicted_max_level).toFixed(2)} m`;
+        $('p1-peak').textContent = simulated
+            ? t('outlook.sim', demoLevel.toFixed(2), Number(row.current_level).toFixed(2))
+            : t('outlook.now', Number(row.current_level).toFixed(2), row.horizon_hours,
+                Number(row.predicted_max_level).toFixed(2));
         renderStageChips(row.stages, row.horizon_hours);
         card.style.display = 'block';
     }
@@ -1247,6 +1770,16 @@
             if (!response.ok) { card.style.display = 'none'; return; }
             const rows = await response.json();
             if (!Array.isArray(rows) || !rows.length) { card.style.display = 'none'; return; }
+            renderForecasts(rows);
+        } catch (error) {
+            card.style.display = 'none';
+        }
+    }
+
+    function renderForecasts(rows) {
+        const card = $('forecast-card');
+        try {
+            state.lastForecastRows = rows;
             const byStation = new Map();
             state.stationThresholds = {};
             rows.forEach((row) => {
@@ -1272,24 +1805,25 @@
                 const chips = list.map((r) => {
                     const pw = r.p_warning ?? 0, pd = r.p_danger ?? 0;
                     const pct = Math.round(Math.max(pw, pd) * 100);
-                    const title = `+${r.horizon_hours}h · warning ${Math.round(pw * 100)}% · danger ${Math.round(pd * 100)}%` +
-                        (r.predicted_max_level == null ? '' : ` · peak ~${Number(r.predicted_max_level).toFixed(2)} m`) +
-                        (r.source === 'heuristic' ? ' · heuristic fallback' : '');
+                    const title = t('forecast.chip.tip', r.horizon_hours,
+                        Math.round(pw * 100), Math.round(pd * 100),
+                        r.predicted_max_level == null ? '' : t('forecast.chip.peak', Number(r.predicted_max_level).toFixed(2)),
+                        r.source === 'heuristic' ? t('forecast.chip.heuristic') : '');
                     return `<div class="risk-chip" style="${chipStyle(riskColor(pw, pd))}" title="${escapeHtml(title)}">${pct}%<span>${r.horizon_hours}h</span></div>`;
                 }).join('');
                 cardEl.innerHTML = `<strong>${escapeHtml(code)}</strong>` +
-                    `<div class="fc-name">${first.current_level == null ? '' : `now ${Number(first.current_level).toFixed(2)} m · `}peak risk next 24h</div>` +
+                    `<div class="fc-name">${escapeHtml(t('forecast.peakrisk', first.current_level == null ? '' : t('forecast.now', Number(first.current_level).toFixed(2))))}</div>` +
                     `<div class="risk-chips">${chips}</div>`;
                 grid.appendChild(cardEl);
             });
-            const asOf = rows[0].as_of ? new Date(rows[0].as_of).toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' }) : null;
+            const asOf = rows[0].as_of ? new Date(rows[0].as_of).toLocaleString(loc(), { dateStyle: 'medium', timeStyle: 'short' }) : null;
             const modelRow = rows.find((r) => r.source === 'model');
-            const trainedAt = modelRow?.trained_at ? new Date(modelRow.trained_at).toLocaleDateString([], { day: 'numeric', month: 'short' }) : null;
+            const trainedAt = modelRow?.trained_at ? new Date(modelRow.trained_at).toLocaleDateString(loc(), { day: 'numeric', month: 'short' }) : null;
             const modelInfo = modelRow?.model_version
-                ? ` · model ${modelRow.model_version}${trainedAt ? ` (trained ${trainedAt})` : ''}`
+                ? t('forecast.status.model', modelRow.model_version, trainedAt ? t('forecast.status.trained', trainedAt) : '')
                 : '';
-            $('forecast-status').textContent = `Probability of exceeding warning / danger level within 6, 12 and 24 h` +
-                (asOf ? ` · based on readings up to ${asOf}` : '') + modelInfo;
+            $('forecast-status').textContent = t('forecast.status.full',
+                asOf ? t('forecast.status.asof', asOf) : '', modelInfo);
             // Only the P.1 city outlook is shown by default; the per-station
             // grid stays collapsed behind the expander.
             const expand = $('forecast-expand');
@@ -1297,8 +1831,8 @@
             expand.style.display = others ? 'inline-flex' : 'none';
             grid.style.display = state.forecastExpanded ? 'grid' : 'none';
             expand.textContent = state.forecastExpanded
-                ? 'Hide station forecasts ▴'
-                : `Show all ${stations.length} station forecasts ▾`;
+                ? t('forecast.collapse')
+                : t('forecast.expand', stations.length);
             card.style.display = 'block';
         } catch (error) {
             card.style.display = 'none';
@@ -1310,20 +1844,32 @@
         try {
             const response = await fetch('/api/stats');
             if (!response.ok) { strip.style.display = 'none'; return; }
-            const stats = await response.json();
-            const fmtDate = (value) => new Date(value).toLocaleDateString([], { day: 'numeric', month: 'short', year: 'numeric' });
+            renderDbStats(await response.json());
+        } catch (error) {
+            strip.style.display = 'none';
+        }
+    }
+
+    function renderDbStats(stats) {
+        const strip = $('db-stats');
+        try {
+            state.lastStats = stats;
+            const fmtDate = (value) => new Date(value).toLocaleDateString(loc(), { day: 'numeric', month: 'short', year: 'numeric' });
             state.dbFirstDate = String(stats.first_timestamp).slice(0, 10); // feeds the All-time date range
-            $('db-total').textContent = Number(stats.total_measurements).toLocaleString();
+            $('db-total').textContent = Number(stats.total_measurements).toLocaleString(loc());
             if (stats.rid_measurements != null) {
-                const fmtNum = (value) => Number(value || 0).toLocaleString();
+                const fmtNum = (value) => Number(value || 0).toLocaleString(loc());
                 const openmeteo = stats.openmeteo_rain_measurements
-                    ? ` · ${fmtNum(stats.openmeteo_rain_measurements)} forecast rain`
+                    ? t('db.total.openmeteo', fmtNum(stats.openmeteo_rain_measurements))
                     : '';
-                $('db-total-note').textContent = `${fmtNum(stats.rid_measurements)} RID · ${fmtNum(stats.hii_waterlevel_measurements)} HII level · ${fmtNum(stats.hii_rainfall_measurements)} rain${openmeteo}`;
-                $('db-stations-note').textContent = `${stats.rid_station_count} RID · ${stats.hii_station_count} ThaiWater/HII`;
+                $('db-total-note').textContent = t('db.total.breakdown',
+                    fmtNum(stats.rid_measurements), fmtNum(stats.hii_waterlevel_measurements),
+                    fmtNum(stats.hii_rainfall_measurements), openmeteo);
+                $('db-stations-note').textContent = t('db.stations.breakdown',
+                    stats.rid_station_count, stats.hii_station_count);
             }
             $('db-range').textContent = `${fmtDate(stats.first_timestamp)} – ${fmtDate(stats.last_timestamp)}`;
-            $('db-days').textContent = Number(stats.days_spanned).toLocaleString();
+            $('db-days').textContent = Number(stats.days_spanned).toLocaleString(loc());
             $('db-stations').textContent = String(stats.station_count);
             $('db-coverage').textContent = stats.coverage_percent == null ? '—' : `${Number(stats.coverage_percent).toFixed(1)}%`;
             strip.style.display = 'grid';
@@ -1340,9 +1886,10 @@
         $('forecast-expand').setAttribute('aria-expanded', String(state.forecastExpanded));
         const count = $('forecast-grid').children.length;
         $('forecast-expand').textContent = state.forecastExpanded
-            ? 'Hide station forecasts ▴'
-            : `Show all ${count} station forecasts ▾`;
+            ? t('forecast.collapse')
+            : t('forecast.expand', count);
     });
+    $('lang-toggle').addEventListener('click', () => setLang(state.lang === 'th' ? 'en' : 'th'));
     $('station-search').addEventListener('input', applyStationSearch);
     $('sensors-head').addEventListener('click', () => setSensorsOpen(!state.sensorsOpen));
     $('sensors-head').addEventListener('keydown', (event) => {
@@ -1366,18 +1913,19 @@
             ? (state.dbFirstDate || '2018-08-01') // All time: DB's first record
             : isoLocal(new Date(now.getTime() - hours * 3600 * 1000));
         if (state.selectedStation) loadHistory(state.selectedStation);
-        else $('history-status').textContent = 'Select a station first — click one on the map or in the list';
+        else $('history-status').textContent = t('history.selectfirst');
     });
     ['history-start', 'history-end'].forEach((id) => $(id).addEventListener('change', () => {
         state.useDates = true;
         $('history-range').value = 'custom'; // dropdown no longer describes the window
         if (state.selectedStation) loadHistory(state.selectedStation);
-        else $('history-status').textContent = 'Select a station first — click one on the map or in the list';
+        else $('history-status').textContent = t('history.selectfirst');
     }));
     $('legend-toggle').addEventListener('click', () => {
         const open = $('map-legend').classList.toggle('open');
         $('legend-toggle').setAttribute('aria-expanded', String(open));
     });
+    applyTranslations(); // before the first paint of any dynamic content
     loadDashboard();
     // Skip auto-refresh while the 2024 replay is running (it would clobber replay state)
     window.setInterval(() => { if (!state.replayTimer) loadDashboard(); }, 5 * 60 * 1000);
diff --git a/tests/test_dashboard.py b/tests/test_dashboard.py
index e0ad3ee..fe1723f 100644
--- a/tests/test_dashboard.py
+++ b/tests/test_dashboard.py
@@ -14,12 +14,18 @@ def test_dashboard_contains_live_map_and_flow_visualization():
     assert "leaflet" in html.lower()
 
 
-def test_dashboard_explains_flow_legend_and_refresh():
-    html = DASHBOARD_PATH.read_text(encoding="utf-8")
+def _body(html: str) -> str:
+    """Markup only. The STRINGS table repeats every English phrase, so a
+    whole-file search would pass even if an element were deleted."""
+    return html[html.index("<body>"):html.index("<script src=")]
 
-    assert "Flow status" in html
-    assert "Last updated" in html
-    assert "Refresh" in html
+
+def test_dashboard_explains_flow_legend_and_refresh():
+    body = _body(DASHBOARD_PATH.read_text(encoding="utf-8"))
+
+    assert 'data-i18n="legend.flow"' in body
+    assert 'data-i18n="stat.updated"' in body
+    assert 'data-i18n="action.refresh"' in body
 
 
 def test_dashboard_uses_mapped_river_network_instead_of_station_connections():
@@ -35,7 +41,7 @@ def test_dashboard_loads_additional_thaiwater_sensors():
     html = DASHBOARD_PATH.read_text(encoding="utf-8")
 
     assert "fetch('/sensors/thaiwater')" in html
-    assert "Additional basin stations" in html
+    assert 'data-i18n="sensors.title"' in _body(html)
     assert 'id="station-search"' in html
     assert "applyStationSearch" in html
 
@@ -67,23 +73,105 @@ def test_dashboard_shows_hii_rainfall_layer():
     assert "fetch('/api/hii/waterlevel/latest')" in html
     assert "renderRainLayer" in html
     assert "rain-toggle" in html
-    assert "Rainfall · 24 h" in html
+    body = _body(html)
+    assert 'data-i18n="legend.rain"' in body
     # TMD rain classes on the legend
-    assert "Heavy 35–90" in html
-    assert "Extreme &gt; 150" in html
+    assert 'data-i18n="legend.rain.heavy"' in body
+    assert 'data-i18n="legend.rain.extreme"' in body
 
 
 def test_dashboard_loads_station_history_chart():
     html = DASHBOARD_PATH.read_text(encoding="utf-8")
 
-    assert "Station history" in html
+    assert 'id="history-card"' in html
     assert "/api/forecast/history/" in html
-    assert "Model 24 h peak (as issued)" in html
+    assert "'chart.model'" in html
     assert "PostgreSQL" not in html
     assert "/measurements/history/" in html
     assert "history-chart" in html
     # Date-range picker alongside the quick-range dropdown
     assert 'id="history-start"' in html
     assert 'id="history-end"' in html
-    assert "Last 7 days" in html
-    assert "Last 90 days" in html
+    assert 'data-i18n="range.7d"' in _body(html)
+    assert 'data-i18n="range.90d"' in _body(html)
+
+
+def _extract_lang_tables(html: str) -> dict:
+    """Pull the `en:` / `th:` key sets out of the STRINGS literal.
+
+    Parsing the JS with a regex is crude, but it is enough to catch the failure
+    that matters: a key added to one language and forgotten in the other, which
+    silently falls back to English for Thai readers.
+    """
+    import re
+
+    start = html.index("const STRINGS = {")
+    end = html.index("// Thai unless the visitor's browser", start)
+    block = html[start:end]
+    tables = {}
+    for lang in ("en", "th"):
+        section = re.search(rf"\n        {lang}: {{\n(.*?)\n        }},\n", block, re.S)
+        assert section, f"{lang} table not found in STRINGS"
+        tables[lang] = set(re.findall(r"^\s{12}'([^']+)':", section.group(1), re.M))
+    return tables
+
+
+def test_dashboard_translations_cover_both_languages():
+    html = DASHBOARD_PATH.read_text(encoding="utf-8")
+    tables = _extract_lang_tables(html)
+
+    assert len(tables["en"]) > 100, "expected the full English string table"
+    missing_th = tables["en"] - tables["th"]
+    missing_en = tables["th"] - tables["en"]
+    assert not missing_th, f"keys missing a Thai translation: {sorted(missing_th)}"
+    assert not missing_en, f"Thai-only keys with no English fallback: {sorted(missing_en)}"
+
+
+def test_dashboard_i18n_markup_keys_exist():
+    """Every data-i18n attribute must resolve to a real string key."""
+    import re
+
+    html = DASHBOARD_PATH.read_text(encoding="utf-8")
+    keys = _extract_lang_tables(html)["en"]
+    used = set(re.findall(r'data-i18n(?:-placeholder|-title|-aria)?="([^"]+)"', html))
+    unknown = used - keys
+    assert not unknown, f"markup references undefined string keys: {sorted(unknown)}"
+
+
+def test_dashboard_is_mobile_portrait_safe():
+    html = DASHBOARD_PATH.read_text(encoding="utf-8")
+
+    # The header row overflowed a 412 px Android viewport by 64 px until it wrapped
+    assert "flex-wrap: wrap" in html
+    assert "overflow-x: hidden" in html
+    assert 'id="lang-toggle"' in html
+    assert "ping-monitor-lang" in html  # remembered language choice
+
+
+def test_dashboard_translates_user_visible_aria_labels():
+    """A Thai page must not hand screen-reader users English landmarks."""
+    import re
+
+    html = DASHBOARD_PATH.read_text(encoding="utf-8")
+    body = _body(html)
+    for match in re.finditer(r'<[^>]*\saria-label="[^"]+"[^>]*>', body):
+        tag = match.group(0)
+        if "data-i18n-aria" in tag or "id=\"lang-toggle\"" in tag:
+            continue  # the toggle sets its own label per language in JS
+        raise AssertionError(f"aria-label without a translation key: {tag[:120]}")
+
+
+def test_dashboard_keeps_simulation_and_replay_labels_on_language_switch():
+    """Relabelling a pinned simulation as LIVE would present fake flood data as real."""
+    html = DASHBOARD_PATH.read_text(encoding="utf-8")
+
+    assert "setLiveIndicator(state.liveMode || 'live', state.liveLabelKey)" in html
+    assert "if (!state.replayTimer) setLiveIndicator('live');" not in html
+
+
+def test_dashboard_default_language_respects_browser_order():
+    """navigator.languages = ['th-TH','en-US'] must resolve to Thai, not English."""
+    html = DASHBOARD_PATH.read_text(encoding="utf-8")
+
+    assert "langs.some" not in html  # the old any-English-wins test
+    assert "if (code.startsWith('th')) return 'th';" in html