feat(portal): M1 pages — locations overview + read-only live location view

/portal overview: client's active sound locations as live tiles (current Lp +
Live/Stopped badge + "updated Xm ago", polled from the scoped cache every 15s)
plus a Leaflet map of locations with coordinates. /portal/location/{id}: 404-gated
read-only live panel — Lp/Leq/Lmax/L1/L10 cards + a 4-line Chart.js trace
(backfilled from /history) + measuring/freshness badge. Cache-only, 15s poll, no
device controls, no refresh-from-device. _client_locations() feeds the overview.

Verified: portal.py compiles; both inline scripts balance; all four portal
templates parse in Jinja2.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

templates/portal/overview.html

@@ -1,16 +1,29 @@
 {% extends "portal/base.html" %}
 {% block title %}Your locations{% endblock %}
+{% block head %}
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+{% endblock %}
 {% block content %}
 <h1 class="text-2xl font-semibold mb-1">Your monitoring locations</h1>
-<p class="text-gray-400 text-sm mb-6">Live sound levels for your active locations.</p>
+<p class="text-gray-400 text-sm mb-6">Live sound levels for your active locations. Read-only.</p>
 
-{# M1 task 4 fleshes this out into location tiles + a map. #}
 {% if locations %}
+<div id="loc-map" class="h-64 rounded-xl overflow-hidden mb-6 hidden border border-slate-700"></div>
+
 <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
     {% for loc in locations %}
-    <a href="/portal/location/{{ loc.id }}" class="block rounded-xl border border-slate-700 bg-slate-800/50 p-4 hover:border-seismo-orange transition-colors">
-        <div class="font-semibold">{{ loc.name }}</div>
-        <div class="text-xs text-gray-400 mt-1">{{ loc.address or loc.project_name }}</div>
+    <a href="/portal/location/{{ loc.id }}" data-loc="{{ loc.id }}"
+       class="loc-tile block rounded-xl border border-slate-700 bg-slate-800/50 p-4 hover:border-seismo-orange transition-colors">
+        <div class="flex items-start justify-between gap-2">
+            <div class="font-semibold">{{ loc.name }}</div>
+            <span class="loc-badge hidden shrink-0 px-2 py-0.5 text-xs rounded-full"></span>
+        </div>
+        <div class="text-xs text-gray-400 mt-0.5 truncate">{{ loc.address or loc.project_name or '' }}</div>
+        <div class="mt-3 flex items-baseline gap-1">
+            <span class="loc-lp text-3xl font-bold text-seismo-orange">--</span>
+            <span class="text-sm text-gray-400">dB Lp</span>
+        </div>
+        <div class="loc-fresh text-xs text-gray-500 mt-1">&nbsp;</div>
     </a>
     {% endfor %}
 </div>
@@ -20,3 +33,67 @@
 </div>
 {% endif %}
 {% endblock %}
+
+{% block scripts %}
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+<script>
+const LOCATIONS = {{ locations|tojson }};
+
+function fmtAgo(iso) {
+    if (!iso) return '';
+    const t = new Date(iso.endsWith('Z') ? iso : iso + 'Z');
+    const s = Math.max(0, Math.round((Date.now() - t.getTime()) / 1000));
+    if (s < 60) return 'updated just now';
+    if (s < 3600) return 'updated ' + Math.round(s / 60) + 'm ago';
+    return 'updated ' + Math.round(s / 3600) + 'h ago';
+}
+
+async function loadTile(loc) {
+    const el = document.querySelector(`.loc-tile[data-loc="${loc.id}"]`);
+    if (!el) return;
+    const lp = el.querySelector('.loc-lp'), badge = el.querySelector('.loc-badge'),
+          fresh = el.querySelector('.loc-fresh');
+    try {
+        const j = await (await fetch(`/portal/api/location/${encodeURIComponent(loc.id)}/live`)).json();
+        const d = j.data;
+        badge.classList.remove('hidden');
+        if (!d) {
+            badge.textContent = j.reason === 'no_device' ? 'No device' : 'Offline';
+            badge.className = 'loc-badge shrink-0 px-2 py-0.5 text-xs rounded-full bg-slate-700 text-gray-300';
+            lp.textContent = '--'; fresh.innerHTML = '&nbsp;';
+            return;
+        }
+        lp.textContent = (d.lp == null || d.lp === '') ? '--' : d.lp;
+        const measuring = d.measurement_state === 'Start' || d.measurement_state === 'Measure';
+        badge.textContent = measuring ? '● Live' : 'Stopped';
+        badge.className = 'loc-badge shrink-0 px-2 py-0.5 text-xs rounded-full ' +
+            (measuring ? 'bg-green-900/40 text-green-300' : 'bg-slate-700 text-gray-300');
+        fresh.textContent = fmtAgo(d.last_seen);
+    } catch (e) { /* leave placeholders */ }
+}
+
+function refreshTiles() { LOCATIONS.forEach(loadTile); }
+refreshTiles();
+setInterval(refreshTiles, 15000);
+
+// Map of locations that have coordinates
+const withCoords = LOCATIONS.filter(l => l.coordinates);
+if (withCoords.length) {
+    const mapEl = document.getElementById('loc-map');
+    mapEl.classList.remove('hidden');
+    const map = L.map('loc-map');
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+        { maxZoom: 19, attribution: '© OpenStreetMap' }).addTo(map);
+    const pts = [];
+    withCoords.forEach(l => {
+        const [la, lo] = (l.coordinates || '').split(',').map(Number);
+        if (!isNaN(la) && !isNaN(lo)) {
+            L.marker([la, lo]).addTo(map).bindPopup(l.name);
+            pts.push([la, lo]);
+        }
+    });
+    if (pts.length) map.fitBounds(pts, { padding: [30, 30], maxZoom: 15 });
+    else mapEl.classList.add('hidden');
+}
+</script>
+{% endblock %}