feat(ui): humidity, CO2 pill per room and 24h pressure sparkline

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

public/app.js

@@ -1,6 +1,7 @@
 import {
   f1, fInt, fmm, markerPos, barHeights, wmoIcon, trendLabel,
   formatDate, formatTime, dayAbbr, monthName, isOlderThan, msUntil,
+  co2Level, fPct, fHpa, seriesRange, sparklinePath,
 } from './format.js';
 import { icon } from './icons.js';
 
@@ -57,6 +58,7 @@ function renderMeasurement(now) {
 
 function renderOutdoor(o) {
   setText('trend', trendLabel(o.trend));
+  setText('out-hum', o.humidity === null || o.humidity === undefined ? '' : `RV ${fPct(o.humidity)}`);
   setText('temp', `${f1(o.temp)}°`);
   $('mark').style.left = `${markerPos(o.temp, o.min, o.max).toFixed(1)}%`;
   setText('min', `${f1(o.min)}°`);
@@ -68,10 +70,12 @@ function renderOutdoor(o) {
 function renderRooms(rooms) {
   const html = rooms.map((r) => {
     const off = !r.reachable || r.temp === null;
+    const co2 = co2Level(off ? null : r.co2);
+    const pill = `<span class="pill ${co2.level} num" title="${co2.label}">${co2.level === 'unknown' ? '–' : r.co2 + ' ppm'}</span>`;
     return `<div class="a-room${off ? ' off' : ''}">
-      <p class="a-rname">${esc(r.name)}</p>
+      <p class="a-rname"><span>${esc(r.name)}</span>${pill}</p>
       <p class="a-rtemp num">${off ? '–' : f1(r.temp) + '°'}</p>
-      <p class="a-rmm num"><span class="cold">↓ ${off ? '–' : f1(r.min) + '°'}</span><span class="warm">↑ ${off ? '–' : f1(r.max) + '°'}</span></p>
+      <p class="a-rmm num"><span class="cold">↓ ${off ? '–' : f1(r.min) + '°'}</span><span class="warm">↑ ${off ? '–' : f1(r.max) + '°'}</span><span class="rv">RV ${off ? '–' : fPct(r.humidity)}</span></p>
     </div>`;
   });
   $('rooms').innerHTML = html.join('');
@@ -90,6 +94,15 @@ function renderRain(rain, now) {
     </div>`).join('');
 }
 
+function renderPressure(p) {
+  setText('press', fHpa(p.current));
+  setText('press-trend', trendLabel(p.trend));
+  const values = p.history.map((h) => h.hpa);
+  const range = seriesRange(values);
+  setText('press-range', range ? `${Math.round(range.min)} – ${Math.round(range.max)} hPa in 24 u` : '');
+  $('press-path').setAttribute('d', sparklinePath(values, 560, 56));
+}
+
 function renderForecast(days) {
   $('forecast').innerHTML = days.map((d) => `<div class="a-day">
       <p class="a-dname">${dayAbbr(d.date, state.tz)}</p>
@@ -131,6 +144,7 @@ function render() {
     renderOutdoor(d.outdoor);
     renderRooms(d.indoor);
     renderRain(d.rain, now);
+    renderPressure(d.pressure || { current: null, trend: null, history: [] });
     renderForecast(d.forecast);
   }
   renderBanner();