feat: ML flood-event forecasting from 8 years of gauge history

Add src/ml/ package predicting, per station and per 6/12/24 h horizon,
the probability of exceeding warning (3.0 m) and danger (4.5 m) levels
plus expected peak level, trained on the 592k-row PostgreSQL history:

- features.py: hourly grid with coverage gating and no future leakage;
  upstream stations enter at empirically measured travel-time lags
  (P.20 +17h ... P.103 +1h vs P.1); hour-of-day deliberately excluded
  (it encodes the scrape schedule, not hydrology)
- train.py: HistGradientBoosting regression + warn/danger classifier
  heads per station x horizon, >=30-positives gate with calibrated
  sigmoid-on-regression fallback, strict temporal splits, per-event
  lead-time evaluation; guards against sklearn 1.9.0 crash on
  degenerate feature columns
- predict.py: bundle loading with feature-name checks, heuristic
  fallback tier, get_latest_forecasts() for the API; raises when no
  models are trained so the endpoint 503s instead of serving
  persistence output as forecasts
- data.py: Postgres-first loader (FLOOD_ML_DB_URL override), HTTP API
  fallback (flagged: that path backfills synthetic discharge), csv.gz
  cache
- /forecast endpoint (15-min TTL cache) + dashboard flood-risk panel
  (hidden until models exist)
- docs/FLOOD_FORECASTING.md: full system doc with measured deployment
  numbers (~335 MB RSS, CPU negligible, ~6 min full retrain) and
  retraining policy

Validation: out-of-sample backtest of the record 2024 flood season
(train <= Aug 2024) alerted 24-48 h ahead of the Oct 5 peak; 2025-26
test split: P.1 6h PR-AUC 0.974, recall 98.3% at 1% false-alarm rate.

Also: fix P.81 station coordinates (was Ban Pong/Ratchaburi, 493 km
out of basin; now 18.6936 N 99.0819 E per RID station page), pin
scikit-learn==1.9.0 and numpy<2, gitignore model artifacts (~100 MB,
train on the server via scripts/train_flood_model.py).

src/static/dashboard.html

@@ -123,6 +123,13 @@
         @keyframes riverMove { to { stroke-dashoffset: -40; } }
         @media (prefers-reduced-motion: reduce) { .flow-line, .flow-marker::before { animation: none; } }
         .line-swatch { width: 24px; height: 4px; border-radius: 2px; flex: none; }
+        .forecast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; margin-top: 14px; }
+        .forecast-station { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
+        .forecast-station strong { font-size: .8rem; }
+        .forecast-station .fc-name { color: var(--muted); font-size: .68rem; margin: 2px 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+        .risk-chips { display: flex; gap: 6px; }
+        .risk-chip { flex: 1; text-align: center; border-radius: 8px; padding: 5px 4px; font-size: .64rem; font-weight: 800; color: white; }
+        .risk-chip span { display: block; font-weight: 650; font-size: .58rem; opacity: .85; }
         .leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: 0 12px 35px rgba(14,45,54,.2); }
         .popup { min-width: 190px; }
         .popup-code { font-size: .7rem; color: var(--river); font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
@@ -201,6 +208,14 @@
         </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></div>
+        </div>
+        <div class="forecast-grid" id="forecast-grid"></div>
+    </section>
+
     <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">PostgreSQL history</h2><p id="history-status" class="subtitle">Select a RID flow station to load the last 7 days</p></div>
@@ -556,6 +571,7 @@
             renderThaiWaterSensors(thaiWaterSensors, new Set(stations.map((station) => station.station_code)));
             renderSummary(stations, readings);
             $('loading').style.display = 'none';
+            loadForecasts(); // non-blocking; the card stays hidden until models are deployed
         } catch (error) {
             $('loading').style.display = 'none';
             $('error').style.display = 'grid';
@@ -566,6 +582,57 @@
         }
     }
 
+    function riskColor(pWarning, pDanger) {
+        if (pDanger >= .5) return '#cc4b37';
+        if (pWarning >= .5 || pDanger >= .2) return '#d99018';
+        if (pWarning >= .2) return '#0a91b9';
+        return '#1e8b60';
+    }
+
+    async function loadForecasts() {
+        const card = $('forecast-card');
+        try {
+            const response = await fetch('/forecast');
+            if (!response.ok) { card.style.display = 'none'; return; }
+            const rows = await response.json();
+            if (!Array.isArray(rows) || !rows.length) { card.style.display = 'none'; return; }
+            const byStation = new Map();
+            rows.forEach((row) => {
+                if (!byStation.has(row.station_code)) byStation.set(row.station_code, []);
+                byStation.get(row.station_code).push(row);
+            });
+            const grid = $('forecast-grid');
+            grid.replaceChildren();
+            const stations = [...byStation.entries()].map(([code, list]) => ({
+                code, list: list.sort((a, b) => a.horizon_hours - b.horizon_hours),
+                worst: Math.max(...list.map((r) => Math.max(r.p_danger ?? 0, (r.p_warning ?? 0) * .5)))
+            })).sort((a, b) => b.worst - a.worst);
+            stations.forEach(({ code, list }) => {
+                const first = list[0];
+                const cardEl = document.createElement('div');
+                cardEl.className = 'forecast-station';
+                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' : '');
+                    return `<div class="risk-chip" style="background:${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="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;
+            $('forecast-status').textContent = `Probability of exceeding warning / danger level within 6, 12 and 24 h` +
+                (asOf ? ` · based on readings up to ${asOf}` : '');
+            card.style.display = 'block';
+        } catch (error) {
+            card.style.display = 'none';
+        }
+    }
+
     $('refresh-button').addEventListener('click', loadDashboard);
     $('history-range').addEventListener('change', () => { if (state.selectedStation) loadHistory(state.selectedStation); });
     loadDashboard();