From 7efb2658c3aafad3cc0e4fc90d3f99bbb19c0b6b Mon Sep 17 00:00:00 2001
From: "Claude Opus 4.8" <noreply@anthropic.com>
Date: Fri, 26 Jun 2026 14:13:22 +0200
Subject: [PATCH 01/19] fix(ui): theme-aware charts + heat-pump card auto
 re-discovery
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The live charts hard-coded dark-theme colors for canvas chrome (axis
text, gridlines, both tooltips, the neutral load line), so they went
invisible/wrong on a light background. Add a resolver that reads the CSS
theme tokens into concrete canvas colors (cached, invalidated on
data-theme change) and use it for all chart chrome; saturated series
hues are unchanged.

heating.js cached heat-pump discovery once and never re-checked (and an
empty [] is truthy, so it stuck) — a pump added while the dashboard was
open never appeared without a reload. Re-discover on first load and
every 5 min.

Co-Authored-By: HuggeK <48095810+HuggeK@users.noreply.github.com>
---
 .changeset/dashboard-light-dark.md |  9 +++
 web/app.js                         | 95 +++++++++++++++++++++---------
 web/heating.js                     | 16 ++++-
 3 files changed, 90 insertions(+), 30 deletions(-)
 create mode 100644 .changeset/dashboard-light-dark.md

diff --git a/.changeset/dashboard-light-dark.md b/.changeset/dashboard-light-dark.md
new file mode 100644
index 00000000..f2bee8b6
--- /dev/null
+++ b/.changeset/dashboard-light-dark.md
@@ -0,0 +1,9 @@
+---
+"forty-two-watts": patch
+---
+
+Dashboard light-mode + heat-pump card fixes.
+
+The live power/energy **charts now render correctly in light mode**. The canvas chrome (axis labels, gridlines, zero/now/hover lines, both tooltips' background+border+text, and the neutral "Load" line + legend swatch) was hard-coded for the dark theme, so it went invisible or wrong on a light background. The charts now resolve the CSS theme tokens (`--fg`, `--fg-dim`, `--fg-muted`, `--line`, `--ink-raised`, `--accent-e`) into concrete canvas colors per draw — cached and re-read when `data-theme` changes. Saturated data-series hues are unchanged.
+
+The **heat-pump card now re-discovers newly-added drivers** without a manual reload. `heating.js` cached discovery once and never re-checked — and an empty result is truthy, so a site that discovered before its pump reported `hp_power_w` stayed blank. It now re-scans on first load and every 5 minutes, while steady-state polling still only touches already-known heat-pump drivers.
diff --git a/web/app.js b/web/app.js
index b16cbaea..0f24e04e 100644
--- a/web/app.js
+++ b/web/app.js
@@ -504,6 +504,8 @@
       ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
     }
 
+    var C = chartColors(); // theme-aware chrome colors, re-read each draw
+
     var pad = { top: 20, right: 10, bottom: 25, left: 55 };
     var plotW = w - pad.left - pad.right;
     var plotH = h - pad.top - pad.bottom;
@@ -529,13 +531,13 @@
         { data: toKwh(chartHistory.e_pv),         color: "#10b981", width: 2, dash: [], name: "PV",         fill: true },
         { data: toKwh(chartHistory.e_charged),    color: "#3b82f6", width: 2, dash: [], name: "Charged",    fill: false },
         { data: toKwh(chartHistory.e_discharged), color: "#f59e0b", width: 2, dash: [], name: "Discharged", fill: false },
-        { data: toKwh(chartHistory.e_load),       color: "#e2e8f0", width: 2, dash: [], name: "Load",       fill: false },
+        { data: toKwh(chartHistory.e_load),       color: C.load, width: 2, dash: [], name: "Load",       fill: false },
       ];
     } else {
       series = [
         { data: chartHistory.grid, color: "#ef4444", width: 2,   dash: [], name: "Grid", fill: true,  toggle: "grid" },
         { data: chartHistory.pv,   color: "#22c55e", width: 2,   dash: [], name: "PV",   fill: true,  toggle: "pv" },
-        { data: chartHistory.load, color: "#e2e8f0", width: 1.5, dash: [], name: "Load", fill: false, toggle: "load" },
+        { data: chartHistory.load, color: C.load, width: 1.5, dash: [], name: "Load", fill: false, toggle: "load" },
       ];
       // Append one actual/target pair per discovered battery driver.
       // Stable order so chart colors don't jump as the driver set grows.
@@ -567,7 +569,7 @@
     if (visibleVals.length === 0) {
       // Empty state — draw axes + "waiting for data" hint
       ctx.clearRect(0, 0, w, h);
-      ctx.fillStyle = "#666";
+      ctx.fillStyle = C.muted;
       ctx.font = "12px monospace";
       ctx.textAlign = "center";
       ctx.fillText("waiting for data...", w / 2, h / 2);
@@ -615,7 +617,7 @@
     // Grid lines (drawn inside clip so they only appear in the plot area).
     // Walk yMin..yMax in yStep increments so every line lands on a round
     // number — that's what lets the y-axis labels stay readable.
-    ctx.strokeStyle = "#2a2a2a";
+    ctx.strokeStyle = C.grid;
     ctx.lineWidth = 0.5;
     ctx.font = "11px monospace";
     var steps = Math.round(yRange / yStep);
@@ -630,7 +632,7 @@
     // Zero line
     if (yMin < 0 && yMax > 0) {
       var zeroY = pad.top + plotH * (1 - (0 - yMin) / yRange);
-      ctx.strokeStyle = "#444";
+      ctx.strokeStyle = C.muted;
       ctx.lineWidth = 1;
       ctx.setLineDash([4, 4]);
       ctx.beginPath();
@@ -795,7 +797,7 @@
 
     // Subtle vertical "now" line — anchor point so the eye knows where present is
     var nowX = pad.left + plotW;
-    ctx.strokeStyle = "rgba(255,255,255,0.12)";
+    ctx.strokeStyle = C.grid;
     ctx.lineWidth = 1;
     ctx.beginPath();
     ctx.moveTo(nowX, pad.top);
@@ -803,7 +805,7 @@
     ctx.stroke();
 
     // Y-axis labels (outside clip so they're fully visible)
-    ctx.fillStyle = "#888";
+    ctx.fillStyle = C.dim;
     ctx.font = "11px monospace";
     for (var i2 = 0; i2 <= steps; i2++) {
       var yVal = yMin + (yRange * i2 / steps);
@@ -812,7 +814,7 @@
     }
 
     // Time labels
-    ctx.fillStyle = "#666";
+    ctx.fillStyle = C.muted;
     ctx.fillText(chartRange + " ago", pad.left, h - 5);
     ctx.textAlign = "right";
     ctx.fillText("now", w - pad.right, h - 5);
@@ -838,7 +840,7 @@
       ctx.arc(w - pad.right - 78, pad.top + 4, 2.5, 0, Math.PI * 2);
       ctx.fill();
       ctx.font = "10px monospace";
-      ctx.fillStyle = fresh ? "#aaa" : "#f59e0b";
+      ctx.fillStyle = fresh ? C.dim : "#f59e0b";
       ctx.fillText(ageStr, w - pad.right - 70, pad.top + 8);
     }
 
@@ -870,8 +872,46 @@
     return "rgba(" + r + "," + g + "," + b + "," + alpha + ")";
   }
 
+  // Resolve a CSS custom property to a concrete color string for <canvas>,
+  // which can't read var(). Re-read per draw so the charts follow the active
+  // theme (html[data-theme]) without needing an explicit redraw on toggle —
+  // a hidden probe element inherits :root, and getComputedStyle resolves the
+  // var() + oklch token to a value canvas can paint.
+  var _colorProbe = null;
+  function cssColor(name, fallback) {
+    if (!_colorProbe) {
+      _colorProbe = document.createElement("span");
+      _colorProbe.style.cssText = "position:absolute;visibility:hidden;pointer-events:none";
+      document.body.appendChild(_colorProbe);
+    }
+    _colorProbe.style.color = "var(" + name + ", " + (fallback || "#888") + ")";
+    return getComputedStyle(_colorProbe).color || fallback || "#888";
+  }
+  // Theme-aware chart chrome colors. Series hues stay fixed (they read on
+  // both themes); only text / gridlines / tooltip surface / the neutral
+  // "load" line flip — those are what go invisible on a light background.
+  // Cached so the animation loop doesn't getComputedStyle every frame —
+  // only recomputed when the active theme actually changes.
+  var _chartColors = null, _chartColorsTheme = null;
+  function chartColors() {
+    var theme = document.documentElement.getAttribute("data-theme") || "";
+    if (_chartColors && _chartColorsTheme === theme) return _chartColors;
+    _chartColorsTheme = theme;
+    _chartColors = {
+      text:    cssColor("--fg", "#e6e6e6"),
+      dim:     cssColor("--fg-dim", "#aaaaaa"),
+      muted:   cssColor("--fg-muted", "#888888"),
+      grid:    cssColor("--line", "#2a2a2a"),
+      surface: cssColor("--ink-raised", "#14141f"),
+      accent:  cssColor("--accent-e", "#fbbf24"),
+      load:    cssColor("--fg", "#e2e8f0"),
+    };
+    return _chartColors;
+  }
+
   function drawHoverOverlay(ctx) {
     if (!chartLayout) return;
+    var C = chartColors();
     var l = chartLayout;
     var i = hoverIndex;
     // Map by timestamp (matches the time-anchored line drawing)
@@ -880,7 +920,7 @@
     var x = l.pad.left + l.plotW * (ts - l.windowStart) / l.totalMs;
 
     // Vertical line
-    ctx.strokeStyle = "rgba(255,255,255,0.3)";
+    ctx.strokeStyle = C.muted;
     ctx.lineWidth = 1;
     ctx.setLineDash([2, 2]);
     ctx.beginPath();
@@ -906,12 +946,12 @@
       { name: "PV",         data: chartHistory.e_pv,         color: "#10b981" },
       { name: "Charged",    data: chartHistory.e_charged,    color: "#3b82f6" },
       { name: "Discharged", data: chartHistory.e_discharged, color: "#f59e0b" },
-      { name: "Load",       data: chartHistory.e_load,       color: "#e2e8f0" },
+      { name: "Load",       data: chartHistory.e_load,       color: C.load },
     ] : (function () {
       var rows = [
         { name: "Grid", data: chartHistory.grid, color: "#ef4444" },
         { name: "PV",   data: chartHistory.pv,   color: "#22c55e" },
-        { name: "Load", data: chartHistory.load, color: "#e2e8f0" },
+        { name: "Load", data: chartHistory.load, color: C.load },
       ];
       // Battery rows render their target inline as "actual W (→ target W)"
       // so it's visually obvious the two numbers are the same metric — one
@@ -934,14 +974,14 @@
     if (boxX + boxW > l.w - 5) boxX = x - boxW - 10;
     var boxY = l.pad.top + 5;
 
-    ctx.fillStyle = "rgba(20,20,35,0.95)";
-    ctx.strokeStyle = "#444";
+    ctx.fillStyle = C.surface;
+    ctx.strokeStyle = C.grid;
     ctx.lineWidth = 1;
     ctx.fillRect(boxX, boxY, boxW, boxH);
     ctx.strokeRect(boxX, boxY, boxW, boxH);
 
     ctx.font = "10px monospace";
-    ctx.fillStyle = "#888";
+    ctx.fillStyle = C.dim;
     ctx.fillText(timeStr, boxX + 6, boxY + lineHeight - 2);
 
     labels.forEach(function (lab, idx) {
@@ -949,21 +989,21 @@
       var y = boxY + (idx + 2) * lineHeight - 4;
       ctx.fillStyle = lab.color;
       ctx.fillRect(boxX + 6, y - 8, 8, 8);
-      ctx.fillStyle = lab.dim ? "#888" : "#ddd";
+      ctx.fillStyle = lab.dim ? C.muted : C.text;
       ctx.fillText(lab.name, boxX + 18, y);
       ctx.textAlign = "right";
       if (chartView === "energy") {
-        ctx.fillStyle = "#fff";
+        ctx.fillStyle = C.text;
         ctx.fillText(lab.data[i].toFixed(2) + " kWh", boxX + boxW - 6, y);
       } else {
         var actual = formatW(lab.data[i]);
-        ctx.fillStyle = "#fff";
+        ctx.fillStyle = C.text;
         ctx.fillText(actual, boxX + boxW - 6, y);
         // Inline target as dim "(→ -674 W)" so user sees commanded vs actual
         // in one glance. Skip when target is 0 to reduce visual noise.
         if (lab.target && i < lab.target.length && Math.abs(lab.target[i]) > 1) {
           var actualW = ctx.measureText(actual).width;
-          ctx.fillStyle = "#888";
+          ctx.fillStyle = C.dim;
           ctx.font = "9px monospace";
           ctx.fillText("→ " + formatW(lab.target[i]), boxX + boxW - 10 - actualW, y);
           ctx.font = "10px monospace";
@@ -975,6 +1015,7 @@
 
   function drawForecastHoverOverlay(ctx) {
     if (!chartLayout || !hoverForecast) return;
+    var C = chartColors();
     var l = chartLayout;
     var a = hoverForecast.action;
     var ts = hoverForecast.ts;
@@ -1007,8 +1048,8 @@
     if (boxX + boxW > l.w - 5) boxX = x - boxW - 10;
     var boxY = l.pad.top + 5;
 
-    ctx.fillStyle = "rgba(20,20,35,0.96)";
-    ctx.strokeStyle = "rgba(251,191,36,0.6)";
+    ctx.fillStyle = C.surface;
+    ctx.strokeStyle = C.accent;
     ctx.lineWidth = 1;
     ctx.fillRect(boxX, boxY, boxW, boxH);
     ctx.strokeRect(boxX, boxY, boxW, boxH);
@@ -1016,16 +1057,16 @@
     ctx.font = "10px monospace";
     var d = new Date(ts);
     var hh = d.getHours().toString().padStart(2, "0") + ":" + d.getMinutes().toString().padStart(2, "0");
-    ctx.fillStyle = "#fbbf24";
+    ctx.fillStyle = C.accent;
     ctx.fillText(hh + "  predicted", boxX + 6, boxY + lineHeight - 2);
 
     labels.forEach(function (lab, idx) {
       var y = boxY + (idx + 2) * lineHeight - 4;
       ctx.fillStyle = lab.color;
       ctx.fillRect(boxX + 6, y - 8, 8, 8);
-      ctx.fillStyle = "#ddd";
+      ctx.fillStyle = C.text;
       ctx.fillText(lab.name, boxX + 18, y);
-      ctx.fillStyle = "#fff";
+      ctx.fillStyle = C.text;
       ctx.textAlign = "right";
       var val = lab.literal ? lab.val : formatW(lab.val);
       ctx.fillText(val, boxX + boxW - 6, y);
@@ -1034,7 +1075,7 @@
 
     if (a.reason) {
       var ry = boxY + (labels.length + 2) * lineHeight + 2;
-      ctx.fillStyle = "#86efac";
+      ctx.fillStyle = C.dim;
       ctx.font = "italic 10px monospace";
       // Truncate if too long for box
       var reason = a.reason.length > 28 ? a.reason.substring(0, 27) + "…" : a.reason;
@@ -2078,9 +2119,9 @@
     if (!legend) return;
     var items = chartView === "energy" ? [
       ["#ef4444", "Import"], ["#22c55e", "Export"], ["#10b981", "PV"],
-      ["#3b82f6", "Charged"], ["#f59e0b", "Discharged"], ["#e2e8f0", "Load"],
+      ["#3b82f6", "Charged"], ["#f59e0b", "Discharged"], ["var(--fg)", "Load"],
     ] : [
-      ["#ef4444", "Grid"], ["#22c55e", "PV"], ["#e2e8f0", "Load"],
+      ["#ef4444", "Grid"], ["#22c55e", "PV"], ["var(--fg)", "Load"],
       ["#f59e0b", "Ferroamp"], ["#8b5cf6", "Sungrow"],
     ];
     legend.innerHTML = items.map(function(it) {
diff --git a/web/heating.js b/web/heating.js
index 91c49535..5233a5fe 100644
--- a/web/heating.js
+++ b/web/heating.js
@@ -15,6 +15,8 @@
   var REFRESH_MS = 30000;
   var timer = null;
   var heatPumpDrivers = null; // cached after discovery: array of driver names
+  var lastDiscoverMs = 0;             // Date.now() of the last discovery scan
+  var DISCOVER_EVERY_MS = 300000;     // re-scan for newly-added heat pumps (5 min)
 
   // Route reads over the owner/P2P transport when present (remote home
   // route), else plain fetch (LAN / tests). Mirrors twins.js.
@@ -151,9 +153,17 @@
     var grid = document.getElementById('heating-grid');
     if (!section || !grid) return;
 
-    var ready = heatPumpDrivers
-      ? Promise.resolve(heatPumpDrivers)
-      : discover().then(function (names) { heatPumpDrivers = names; return names; });
+    // Re-run discovery on first call, then periodically — so a heat-pump
+    // driver added while the dashboard is open shows up without a manual
+    // reload. (The old code cached forever; an empty result is also truthy,
+    // so a site that discovered before its pump reported hp_power_w stayed
+    // blank.) Steady-state stays cheap: between scans we only touch the
+    // already-known heat-pump drivers.
+    var nowMs = Date.now();
+    var rediscover = heatPumpDrivers === null || (nowMs - lastDiscoverMs) >= DISCOVER_EVERY_MS;
+    var ready = rediscover
+      ? discover().then(function (names) { heatPumpDrivers = names; lastDiscoverMs = nowMs; return names; })
+      : Promise.resolve(heatPumpDrivers);
 
     ready.then(function (names) {
       if (!names || names.length === 0) {

From 6e306815d38ccd94e6bd582fd271198f612d8b12 Mon Sep 17 00:00:00 2001
From: "Claude Opus 4.8" <noreply@anthropic.com>
Date: Fri, 26 Jun 2026 14:44:02 +0200
Subject: [PATCH 02/19] fix(ui): theme the LIVE dashboard charts (next-app.js)
 for light mode + cache-bust
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The earlier fix only touched app.js, but index.html loads next-app.js —
app.js renders only on /legacy.html. So the live dashboard's charts kept
their hard-coded dark chrome and stayed dark/invisible in light mode.

Mirror the theme resolver (cssColor + cached chartColors) into next-app.js
and apply it to all canvas chrome: the power/energy chart (renderChart),
both hover tooltips, and the 24h battery+SoC live-history chart — axis
text, gridlines, zero/now/hover lines, tooltip bg+border+text, and the
neutral Load line. Saturated data-series hues are unchanged.

Bump the cache-bust tokens (next-app.js next19->next20, heating.js
heat1->heat2) so browsers actually re-fetch the updated next-app.js and
the already-shipped heating.js re-discovery fix instead of serving the
stale cached copies.

Co-Authored-By: HuggeK <48095810+HuggeK@users.noreply.github.com>
---
 web/index.html  |  4 +-
 web/next-app.js | 98 +++++++++++++++++++++++++++++++++++--------------
 2 files changed, 72 insertions(+), 30 deletions(-)

diff --git a/web/index.html b/web/index.html
index 263b3ce8..c08d36b8 100644
--- a/web/index.html
+++ b/web/index.html
@@ -780,7 +780,7 @@ <h3>Price bars (top of the chart)</h3>
   <script type="module" src="/owner-access/prf.js?v=prf1"></script>
   <script type="module" src="/owner-access/instance-sync.js?v=isync1"></script>
   <script src="/p2p.js?v=p2p14"></script>
-  <script src="/next-app.js?v=next19"></script>
+  <script src="/next-app.js?v=next20"></script>
   <script src="/settings.js?v=diag3"></script>
   <script src="/settings/tabs/control.js?v=tabsplit1"></script>
   <script src="/settings/tabs/access.js?v=access1"></script>
@@ -798,7 +798,7 @@ <h3>Price bars (top of the chart)</h3>
   <script src="/models.js?v=diag2"></script>
   <script src="/plan.js?v=diag2"></script>
   <script src="/twins.js?v=diag2"></script>
-  <script src="/heating.js?v=heat1"></script>
+  <script src="/heating.js?v=heat2"></script>
   <script src="/loadpoints.js?v=lp3"></script>
   <script src="/diagnose.js?v=diag2"></script>
   <script src="/update-badge.js?v=modal2" defer></script>
diff --git a/web/next-app.js b/web/next-app.js
index 6aa480db..395358ed 100644
--- a/web/next-app.js
+++ b/web/next-app.js
@@ -1176,6 +1176,8 @@
       ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
     }
 
+    var C = chartColors(); // theme-aware chrome colors, re-read each draw
+
     var pad = { top: 20, right: 10, bottom: 25, left: 55 };
     var plotW = w - pad.left - pad.right;
     var plotH = h - pad.top - pad.bottom;
@@ -1204,7 +1206,7 @@
         { data: toKwh(chartHistory.e_pv),         color: "#10b981", width: 2, dash: [], name: "PV",         fill: true },
         { data: toKwh(chartHistory.e_charged),    color: "#3b82f6", width: 2, dash: [], name: "Charged",    fill: false },
         { data: toKwh(chartHistory.e_discharged), color: "#f59e0b", width: 2, dash: [], name: "Discharged", fill: false },
-        { data: toKwh(chartHistory.e_load),       color: "#e2e8f0", width: 2, dash: [], name: "Load",       fill: false },
+        { data: toKwh(chartHistory.e_load),       color: C.load, width: 2, dash: [], name: "Load",       fill: false },
       ];
     } else {
       var smoothedGridSeries = smoothSeriesForChart(chartHistory.grid, chartHistory.timestamps, chartSmoothMs);
@@ -1213,7 +1215,7 @@
       series = [
         { data: smoothedGridSeries, color: "#ef4444", width: 2,   dash: [], name: "Grid", fill: true,  toggle: "grid" },
         { data: smoothedPVSeries,   color: "#22c55e", width: 2,   dash: [], name: "PV",   fill: true,  toggle: "pv" },
-        { data: smoothedLoadSeries, color: "#e2e8f0", width: 1.5, dash: [], name: "Load", fill: false, toggle: "load" },
+        { data: smoothedLoadSeries, color: C.load, width: 1.5, dash: [], name: "Load", fill: false, toggle: "load" },
       ];
       // Append one actual/target pair per discovered battery driver.
       // Stable order so chart colors don't jump as the driver set grows.
@@ -1257,7 +1259,7 @@
     if (visibleVals.length === 0) {
       // Empty state — draw axes + "waiting for data" hint
       ctx.clearRect(0, 0, w, h);
-      ctx.fillStyle = "#666";
+      ctx.fillStyle = C.muted;
       ctx.font = chartFontWaiting;
       ctx.textAlign = "center";
       ctx.fillText("waiting for data...", w / 2, h / 2);
@@ -1305,7 +1307,7 @@
     // Grid lines (drawn inside clip so they only appear in the plot area).
     // Walk yMin..yMax in yStep increments so every line lands on a round
     // number — that's what lets the y-axis labels stay readable.
-    ctx.strokeStyle = "#2a2a2a";
+    ctx.strokeStyle = C.grid;
     ctx.lineWidth = 0.5;
     ctx.font = chartFontAxis;
     var steps = Math.round(yRange / yStep);
@@ -1320,7 +1322,7 @@
     // Zero line
     if (yMin < 0 && yMax > 0) {
       var zeroY = pad.top + plotH * (1 - (0 - yMin) / yRange);
-      ctx.strokeStyle = "#444";
+      ctx.strokeStyle = C.muted;
       ctx.lineWidth = 1;
       ctx.setLineDash([4, 4]);
       ctx.beginPath();
@@ -1487,7 +1489,7 @@
     // where present is. Stroke width bumps on small screens so the
     // marker stays visible alongside the larger axis labels.
     var nowX = pad.left + plotW;
-    ctx.strokeStyle = smallScreen ? "rgba(255,255,255,0.30)" : "rgba(255,255,255,0.12)";
+    ctx.strokeStyle = C.grid;
     ctx.lineWidth = chartNowStrokeW;
     ctx.beginPath();
     ctx.moveTo(nowX, pad.top);
@@ -1495,7 +1497,7 @@
     ctx.stroke();
 
     // Y-axis labels (outside clip so they're fully visible)
-    ctx.fillStyle = "#888";
+    ctx.fillStyle = C.dim;
     ctx.font = chartFontAxis;
     for (var i2 = 0; i2 <= steps; i2++) {
       var yVal = yMin + (yRange * i2 / steps);
@@ -1504,7 +1506,7 @@
     }
 
     // Time labels
-    ctx.fillStyle = "#666";
+    ctx.fillStyle = C.muted;
     ctx.fillText(chartRange + " ago", pad.left, h - 5);
     ctx.textAlign = "right";
     ctx.fillText("now", w - pad.right, h - 5);
@@ -1530,7 +1532,7 @@
       ctx.arc(w - pad.right - 78, pad.top + 4, 2.5, 0, Math.PI * 2);
       ctx.fill();
       ctx.font = chartFontTooltip;
-      ctx.fillStyle = fresh ? "#aaa" : "#f59e0b";
+      ctx.fillStyle = fresh ? C.dim : "#f59e0b";
       ctx.fillText(ageStr, w - pad.right - 70, pad.top + 8);
     }
 
@@ -1564,8 +1566,46 @@
     return "rgba(" + r + "," + g + "," + b + "," + alpha + ")";
   }
 
+  // Resolve a CSS custom property to a concrete color string for <canvas>,
+  // which can't read var(). Re-read per draw so the charts follow the active
+  // theme (html[data-theme]) without needing an explicit redraw on toggle —
+  // a hidden probe element inherits :root, and getComputedStyle resolves the
+  // var() + oklch token to a value canvas can paint.
+  var _colorProbe = null;
+  function cssColor(name, fallback) {
+    if (!_colorProbe) {
+      _colorProbe = document.createElement("span");
+      _colorProbe.style.cssText = "position:absolute;visibility:hidden;pointer-events:none";
+      document.body.appendChild(_colorProbe);
+    }
+    _colorProbe.style.color = "var(" + name + ", " + (fallback || "#888") + ")";
+    return getComputedStyle(_colorProbe).color || fallback || "#888";
+  }
+  // Theme-aware chart chrome colors. Series hues stay fixed (they read on
+  // both themes); only text / gridlines / tooltip surface / the neutral
+  // "load" line flip — those are what go invisible on a light background.
+  // Cached so the animation loop doesn't getComputedStyle every frame —
+  // only recomputed when the active theme actually changes.
+  var _chartColors = null, _chartColorsTheme = null;
+  function chartColors() {
+    var theme = document.documentElement.getAttribute("data-theme") || "";
+    if (_chartColors && _chartColorsTheme === theme) return _chartColors;
+    _chartColorsTheme = theme;
+    _chartColors = {
+      text:    cssColor("--fg", "#e6e6e6"),
+      dim:     cssColor("--fg-dim", "#aaaaaa"),
+      muted:   cssColor("--fg-muted", "#888888"),
+      grid:    cssColor("--line", "#2a2a2a"),
+      surface: cssColor("--ink-raised", "#14141f"),
+      accent:  cssColor("--accent-e", "#fbbf24"),
+      load:    cssColor("--fg", "#e2e8f0"),
+    };
+    return _chartColors;
+  }
+
   function drawHoverOverlay(ctx) {
     if (!chartLayout) return;
+    var C = chartColors();
     var l = chartLayout;
     var i = hoverIndex;
     var fontTooltip = l.fontTooltip || "10px monospace";
@@ -1576,7 +1616,7 @@
     var x = l.pad.left + l.plotW * (ts - l.windowStart) / l.totalMs;
 
     // Vertical line
-    ctx.strokeStyle = "rgba(255,255,255,0.3)";
+    ctx.strokeStyle = C.muted;
     ctx.lineWidth = 1;
     ctx.setLineDash([2, 2]);
     ctx.beginPath();
@@ -1602,12 +1642,12 @@
       { name: "PV",         data: chartHistory.e_pv,         color: "#10b981" },
       { name: "Charged",    data: chartHistory.e_charged,    color: "#3b82f6" },
       { name: "Discharged", data: chartHistory.e_discharged, color: "#f59e0b" },
-      { name: "Load",       data: chartHistory.e_load,       color: "#e2e8f0" },
+      { name: "Load",       data: chartHistory.e_load,       color: C.load },
     ] : (function () {
       var rows = [
         { name: "Grid", data: chartHistory.grid, color: "#ef4444" },
         { name: "PV",   data: chartHistory.pv,   color: "#22c55e" },
-        { name: "Load", data: chartHistory.load, color: "#e2e8f0" },
+        { name: "Load", data: chartHistory.load, color: C.load },
       ];
       // Battery rows render their target inline as "actual W (→ target W)"
       // so it's visually obvious the two numbers are the same metric — one
@@ -1634,14 +1674,14 @@
     if (boxX + boxW > l.w - 5) boxX = x - boxW - 10;
     var boxY = l.pad.top + 5;
 
-    ctx.fillStyle = "rgba(20,20,35,0.95)";
-    ctx.strokeStyle = "#444";
+    ctx.fillStyle = C.surface;
+    ctx.strokeStyle = C.grid;
     ctx.lineWidth = 1;
     ctx.fillRect(boxX, boxY, boxW, boxH);
     ctx.strokeRect(boxX, boxY, boxW, boxH);
 
     ctx.font = fontTooltip;
-    ctx.fillStyle = "#888";
+    ctx.fillStyle = C.dim;
     ctx.fillText(timeStr, boxX + 6, boxY + lineHeight - 2);
 
     labels.forEach(function (lab, idx) {
@@ -1649,21 +1689,21 @@
       var y = boxY + (idx + 2) * lineHeight - 4;
       ctx.fillStyle = lab.color;
       ctx.fillRect(boxX + 6, y - 8, 8, 8);
-      ctx.fillStyle = lab.dim ? "#888" : "#ddd";
+      ctx.fillStyle = lab.dim ? C.muted : C.text;
       ctx.fillText(lab.name, boxX + 18, y);
       ctx.textAlign = "right";
       if (chartView === "energy") {
-        ctx.fillStyle = "#fff";
+        ctx.fillStyle = C.text;
         ctx.fillText(lab.data[i].toFixed(2) + " kWh", boxX + boxW - 6, y);
       } else {
         var actual = formatW(lab.data[i]);
-        ctx.fillStyle = "#fff";
+        ctx.fillStyle = C.text;
         ctx.fillText(actual, boxX + boxW - 6, y);
         // Inline target as dim "(→ -674 W)" so user sees commanded vs actual
         // in one glance. Skip when target is 0 to reduce visual noise.
         if (lab.target && i < lab.target.length && Math.abs(lab.target[i]) > 1) {
           var actualW = ctx.measureText(actual).width;
-          ctx.fillStyle = "#888";
+          ctx.fillStyle = C.dim;
           ctx.font = fontTooltipS;
           ctx.fillText("→ " + formatW(lab.target[i]), boxX + boxW - 10 - actualW, y);
           ctx.font = fontTooltip;
@@ -1675,6 +1715,7 @@
 
   function drawForecastHoverOverlay(ctx) {
     if (!chartLayout || !hoverForecast) return;
+    var C = chartColors();
     var l = chartLayout;
     var a = hoverForecast.action;
     var ts = hoverForecast.ts;
@@ -1708,8 +1749,8 @@
     if (boxX + boxW > l.w - 5) boxX = x - boxW - 10;
     var boxY = l.pad.top + 5;
 
-    ctx.fillStyle = "rgba(20,20,35,0.96)";
-    ctx.strokeStyle = "rgba(251,191,36,0.6)";
+    ctx.fillStyle = C.surface;
+    ctx.strokeStyle = C.accent;
     ctx.lineWidth = 1;
     ctx.fillRect(boxX, boxY, boxW, boxH);
     ctx.strokeRect(boxX, boxY, boxW, boxH);
@@ -1717,16 +1758,16 @@
     ctx.font = fontTooltip;
     var d = new Date(ts);
     var hh = d.getHours().toString().padStart(2, "0") + ":" + d.getMinutes().toString().padStart(2, "0");
-    ctx.fillStyle = "#fbbf24";
+    ctx.fillStyle = C.accent;
     ctx.fillText(hh + "  predicted", boxX + 6, boxY + lineHeight - 2);
 
     labels.forEach(function (lab, idx) {
       var y = boxY + (idx + 2) * lineHeight - 4;
       ctx.fillStyle = lab.color;
       ctx.fillRect(boxX + 6, y - 8, 8, 8);
-      ctx.fillStyle = "#ddd";
+      ctx.fillStyle = C.text;
       ctx.fillText(lab.name, boxX + 18, y);
-      ctx.fillStyle = "#fff";
+      ctx.fillStyle = C.text;
       ctx.textAlign = "right";
       var val = lab.literal ? lab.val : formatW(lab.val);
       ctx.fillText(val, boxX + boxW - 6, y);
@@ -1735,7 +1776,7 @@
 
     if (a.reason) {
       var ry = boxY + (labels.length + 2) * lineHeight + 2;
-      ctx.fillStyle = "#86efac";
+      ctx.fillStyle = C.dim;
       ctx.font = "italic 10px monospace";
       // Truncate if too long for box
       var reason = a.reason.length > 28 ? a.reason.substring(0, 27) + "…" : a.reason;
@@ -3811,6 +3852,7 @@
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
     ctx.clearRect(0, 0, cssW, cssH);
 
+    var C = chartColors();
     var pad = { left: 36, right: 36, top: 8, bottom: 18 };
     var plotW = cssW - pad.left - pad.right;
     var plotH = cssH - pad.top - pad.bottom;
@@ -3837,7 +3879,7 @@
     };
 
     // Zero baseline for battery
-    ctx.strokeStyle = "rgba(255,255,255,0.08)";
+    ctx.strokeStyle = C.grid;
     ctx.lineWidth = 1;
     ctx.beginPath();
     ctx.moveTo(pad.left, batMid);
@@ -3882,7 +3924,7 @@
     ctx.stroke();
 
     // Axis labels — small, mono, dim.
-    ctx.fillStyle = "rgba(255,255,255,0.5)";
+    ctx.fillStyle = C.dim;
     ctx.font = "10px ui-monospace, SFMono-Regular, Menlo, Monaco, monospace";
     ctx.textAlign = "right";
     ctx.textBaseline = "middle";
@@ -3894,7 +3936,7 @@
     ctx.fillText("100%", pad.left + plotW + 4, socTop + 6);
     ctx.fillText("0%", pad.left + plotW + 4, socTop + socH - 6);
     // time axis: 24h ago / now
-    ctx.fillStyle = "rgba(255,255,255,0.4)";
+    ctx.fillStyle = C.muted;
     ctx.textAlign = "left";
     ctx.fillText("24h ago", pad.left, cssH - 4);
     ctx.textAlign = "right";

From 62c0d4b23b6640c794cd27667e6c13276ceb65fe Mon Sep 17 00:00:00 2001
From: "Claude Opus 4.8" <noreply@anthropic.com>
Date: Fri, 26 Jun 2026 15:07:34 +0200
Subject: [PATCH 03/19] feat(ui): add a Register column to the heat-pump
 all-signals detail view
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Each row in the per-driver 'all signals' drill-in now shows the signal's
source Modbus register id (m.register from the driver detail metrics, supplied
by the NIBE driver / emit_metric register plumbing). Signals with no Modbus
mapping render '—'. Bumps heating.js cache token heat2->heat3 so browsers pick
up the new column.

Co-Authored-By: HuggeK <48095810+HuggeK@users.noreply.github.com>
---
 .changeset/dashboard-light-dark.md | 2 ++
 web/heating.js                     | 4 +++-
 web/index.html                     | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/.changeset/dashboard-light-dark.md b/.changeset/dashboard-light-dark.md
index f2bee8b6..fc82e0ec 100644
--- a/.changeset/dashboard-light-dark.md
+++ b/.changeset/dashboard-light-dark.md
@@ -7,3 +7,5 @@ Dashboard light-mode + heat-pump card fixes.
 The live power/energy **charts now render correctly in light mode**. The canvas chrome (axis labels, gridlines, zero/now/hover lines, both tooltips' background+border+text, and the neutral "Load" line + legend swatch) was hard-coded for the dark theme, so it went invisible or wrong on a light background. The charts now resolve the CSS theme tokens (`--fg`, `--fg-dim`, `--fg-muted`, `--line`, `--ink-raised`, `--accent-e`) into concrete canvas colors per draw — cached and re-read when `data-theme` changes. Saturated data-series hues are unchanged.
 
 The **heat-pump card now re-discovers newly-added drivers** without a manual reload. `heating.js` cached discovery once and never re-checked — and an empty result is truthy, so a site that discovered before its pump reported `hp_power_w` stayed blank. It now re-scans on first load and every 5 minutes, while steady-state polling still only touches already-known heat-pump drivers.
+
+The heat-pump **"all signals" detail view now shows a Register column** — each signal's source Modbus register id (read from the metric snapshot the driver reports). Signals with no Modbus mapping show "—".
diff --git a/web/heating.js b/web/heating.js
index 5233a5fe..0e95253b 100644
--- a/web/heating.js
+++ b/web/heating.js
@@ -232,8 +232,9 @@
       '.ftw-hpd-title{font-family:var(--mono);font-size:0.74rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--fg-muted)}',
       '.ftw-hpd-close{background:none;border:1px solid var(--line);color:var(--fg);border-radius:6px;cursor:pointer;font-size:1rem;line-height:1;padding:4px 9px}',
       '.ftw-hpd-group{margin:16px 0 4px;font-family:var(--mono);font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-e)}',
-      '.ftw-hpd-row{display:grid;grid-template-columns:1fr auto 120px;gap:10px 14px;align-items:center;padding:5px 0;border-bottom:1px solid var(--line-soft,var(--line))}',
+      '.ftw-hpd-row{display:grid;grid-template-columns:1fr auto auto 120px;gap:10px 14px;align-items:center;padding:5px 0;border-bottom:1px solid var(--line-soft,var(--line))}',
       '.ftw-hpd-label{color:var(--fg-muted);font-size:0.85rem}',
+      '.ftw-hpd-reg{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:0.76rem;color:var(--fg-muted);text-align:right;opacity:0.8}',
       '.ftw-hpd-val{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--fg);text-align:right}',
       '.ftw-hpd-spark svg{width:120px;height:24px;display:block}',
       '.ftw-hpd-empty{color:var(--fg-muted);font-family:var(--mono);font-size:0.82rem}',
@@ -287,6 +288,7 @@
         rows.forEach(function (m) {
           html += '<div class="ftw-hpd-row">' +
             '<span class="ftw-hpd-label">' + escapeHtml(prettyLabel(m.name)) + '</span>' +
+            '<span class="ftw-hpd-reg" title="Modbus register">' + (m.register ? escapeHtml(String(m.register)) : '—') + '</span>' +
             '<span class="ftw-hpd-val">' + escapeHtml(fmtValue(m.value, m.unit)) + '</span>' +
             '<span class="ftw-hpd-spark" data-spark-metric="' + escapeHtml(m.name) + '"></span>' +
             '</div>';
diff --git a/web/index.html b/web/index.html
index c08d36b8..bfae953a 100644
--- a/web/index.html
+++ b/web/index.html
@@ -798,7 +798,7 @@ <h3>Price bars (top of the chart)</h3>
   <script src="/models.js?v=diag2"></script>
   <script src="/plan.js?v=diag2"></script>
   <script src="/twins.js?v=diag2"></script>
-  <script src="/heating.js?v=heat2"></script>
+  <script src="/heating.js?v=heat3"></script>
   <script src="/loadpoints.js?v=lp3"></script>
   <script src="/diagnose.js?v=diag2"></script>
   <script src="/update-badge.js?v=modal2" defer></script>

From 39e99ec1a5b2ed781c4a475ca903fea0c4c93fcf Mon Sep 17 00:00:00 2001
From: "Claude Opus 4.8" <noreply@anthropic.com>
Date: Mon, 29 Jun 2026 10:48:42 +0200
Subject: [PATCH 04/19] fix(ui): theme the heat-pump card in light mode

The heat-pump card renders into a bare .card, whose base rule (style.css)
sets background:var(--surface). --surface is hard-coded dark in :root and is
NOT flipped by html[data-theme=light], so the card stayed dark on a light page
while the type-specific cards (.summary-card etc., themed via --ink-raised) went
light. Add a scoped next.css rule putting .heating-row .card on the --ink-raised
palette, and bump next.css cache token next6->next7.

Co-Authored-By: HuggeK <48095810+HuggeK@users.noreply.github.com>
---
 .changeset/dashboard-light-dark.md |  2 ++
 web/index.html                     |  2 +-
 web/next.css                       | 11 +++++++++++
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/.changeset/dashboard-light-dark.md b/.changeset/dashboard-light-dark.md
index fc82e0ec..3428cc7b 100644
--- a/.changeset/dashboard-light-dark.md
+++ b/.changeset/dashboard-light-dark.md
@@ -9,3 +9,5 @@ The live power/energy **charts now render correctly in light mode**. The canvas
 The **heat-pump card now re-discovers newly-added drivers** without a manual reload. `heating.js` cached discovery once and never re-checked — and an empty result is truthy, so a site that discovered before its pump reported `hp_power_w` stayed blank. It now re-scans on first load and every 5 minutes, while steady-state polling still only touches already-known heat-pump drivers.
 
 The heat-pump **"all signals" detail view now shows a Register column** — each signal's source Modbus register id (read from the metric snapshot the driver reports). Signals with no Modbus mapping show "—".
+
+The **heat-pump card itself now themes in light mode**. It renders into a bare `.card`, whose base style uses the `--surface` token — which the light theme doesn't flip — so the card stayed dark on a light page while every other dashboard card themed correctly. It now uses the same `--ink-raised` palette as the rest.
diff --git a/web/index.html b/web/index.html
index bfae953a..5c08019b 100644
--- a/web/index.html
+++ b/web/index.html
@@ -50,7 +50,7 @@
   <link rel="stylesheet" href="/style.css?v=lp2">
   <!-- /next-only visual redesign — layered on top of style.css and scoped
        to body.ftw-next so legacy /index.html is untouched. -->
-  <link rel="stylesheet" href="/next.css?v=next6">
+  <link rel="stylesheet" href="/next.css?v=next7">
   <!-- Three.js bare-specifier resolution. Three is vendored under
        /vendor/three/ (pinned 0.160.0) rather than pulled from a CDN
        so we have no supply-chain surface area and no SRI gap — an
diff --git a/web/next.css b/web/next.css
index 2e9d9a93..1e750f19 100644
--- a/web/next.css
+++ b/web/next.css
@@ -455,6 +455,17 @@ body.ftw-next .summary-card {
 body.ftw-next .summary-card:hover {
   border-color: oklch(0.35 0.02 250);
 }
+
+/* Heat-pump card. heating.js renders into a bare `.card`, whose base rule in
+   style.css uses `--surface` — a token that is NOT flipped by
+   html[data-theme="light"], so the card stayed dark on a light page while
+   every other dashboard card (.summary-card/.fuse-card/.control-card/…) themed
+   via --ink-raised. Bring it onto the next palette so it themes to light too. */
+body.ftw-next .heating-row .card {
+  background: var(--ink-raised);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+}
 body.ftw-next .summary-card .card-label {
   margin-bottom: 8px;
 }

From 45f352f0b79108fd911be9140ad8e544f1a23bd3 Mon Sep 17 00:00:00 2001
From: "Claude Opus 4.8" <noreply@anthropic.com>
Date: Mon, 29 Jun 2026 11:49:09 +0200
Subject: [PATCH 05/19] =?UTF-8?q?feat(ui):=20grouped=20heat-pump=20card=20?=
 =?UTF-8?q?=E2=80=94=2028=20signals,=20sensor=20IDs=20+=20info=20tooltips?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the 4-tile card with a grouped layout (Effekt & el · Temperaturer ·
Ventilation · Drift · Energi). Each tile shows the NIBE sensor designation in
parens (BT21, BE1, GP1 …) and an info icon whose hover tooltip explains the
term. Adds 'Total effekt nu' (whole-pump draw) distinct from compressor-only
power. Bumps heating.js heat3->heat4.

Co-Authored-By: HuggeK <48095810+HuggeK@users.noreply.github.com>
---
 web/heating.js | 113 +++++++++++++++++++++++++++++++++++++------------
 web/index.html |   2 +-
 2 files changed, 87 insertions(+), 28 deletions(-)

diff --git a/web/heating.js b/web/heating.js
index 0e95253b..a44b7879 100644
--- a/web/heating.js
+++ b/web/heating.js
@@ -25,38 +25,89 @@
     return fetch(path, opts);
   }
 
-  // hp_* metric → display label + formatter. Order here is render order.
-  var METRICS = [
-    { key: 'hp_power_w', label: 'Compressor', fmt: fmtPower },
-    { key: 'hp_hw_top_temp_c', label: 'Hot water', fmt: fmtTemp },
-    { key: 'hp_indoor_temp_c', label: 'Indoor', fmt: fmtTemp },
-    { key: 'hp_outdoor_temp_c', label: 'Outdoor', fmt: fmtTemp },
-  ];
-
+  // ── Card formatters ──────────────────────────────────────────────
   function fmtPower(v) {
     if (v == null) return '—';
     if (Math.abs(v) >= 1000) return (v / 1000).toFixed(2) + ' kW';
     return Math.round(v) + ' W';
   }
-  function fmtTemp(v) {
-    if (v == null) return '—';
-    return v.toFixed(1) + ' °C';
-  }
+  function fmtTemp(v)   { return v == null ? '—' : v.toFixed(1) + ' °C'; }
+  function fmtKW(v)     { return v == null ? '—' : v.toFixed(2) + ' kW'; }
+  function fmtHz(v)     { return v == null ? '—' : Math.round(v) + ' Hz'; }
+  function fmtAmp(v)    { return v == null ? '—' : v.toFixed(1) + ' A'; }
+  function fmtPct(v)    { return v == null ? '—' : Math.round(v) + ' %'; }
+  function fmtFlow(v)   { return v == null ? '—' : Math.round(v) + ' m³/h'; }
+  function fmtDM(v)     { return v == null ? '—' : Math.round(v) + ' DM'; }
+  function fmtKwh(v)    { return v == null ? '—' : Math.round(v).toLocaleString('sv-SE') + ' kWh'; }
+  function fmtRaw(v)    { return v == null ? '—' : String(Math.round(v * 100) / 100); }
+  function fmtOffset(v) { return v == null ? '—' : (v > 0 ? '+' : '') + Math.round(v); }
+  var PRIO = { 0: 'av', 10: 'av', 20: 'varmvatten', 30: 'värme', 40: 'pool', 60: 'kyla' };
+  function fmtPrio(v) { if (v == null) return '—'; var n = Math.round(v); return n + (PRIO[n] ? ' · ' + PRIO[n] : ''); }
+  function fmtVent(v) { if (v == null) return '—'; var n = Math.round(v); return n === 0 ? 'Normal' : String(n); }
+
+  // ── Card layout: grouped tiles. Each item = { key (hp_* metric), label,
+  // optional sensor designation (BT21 …), formatter, info (hover tooltip on
+  // the ⓘ icon) }. Render order = array order. The detail pop-up still lists
+  // ALL ~960 signals; this is the curated at-a-glance set.
+  var GROUPS = [
+    { title: 'Effekt & el', items: [
+      { key: 'hp_energy_log_current_power_consumption', label: 'Total effekt nu', fmt: fmtKW, info: 'Hela värmepumpens momentana elförbrukning just nu — kompressor + fläkt + cirkulationspumpar + elektronik.' },
+      { key: 'hp_power_w', label: 'Kompressor', fmt: fmtPower, info: 'Effekt till enbart kompressorn. 0 W när kompressorn står still — pumpen drar ändå el (se Total effekt nu).' },
+      { key: 'hp_power_internal_additional_heat', label: 'Intern tillsats', fmt: fmtKW, info: 'Effekt till den interna elpatronen (tillskottsvärme). 0 när bara kompressorn jobbar.' },
+      { key: 'hp_compressor_frequency_current', label: 'Kompr.frekvens', fmt: fmtHz, info: 'Kompressorns frekvens/varvtal just nu. 0 Hz = kompressorn står still.' },
+      { key: 'hp_current_be1', label: 'Ström', sensor: 'BE1', fmt: fmtAmp, info: 'Uppmätt ström på fas 1 (strömtransformator BE1). Används för effektvakt/säkringsskydd.' },
+      { key: 'hp_current_be2', label: 'Ström', sensor: 'BE2', fmt: fmtAmp, info: 'Uppmätt ström på fas 2 (BE2).' },
+      { key: 'hp_current_be3', label: 'Ström', sensor: 'BE3', fmt: fmtAmp, info: 'Uppmätt ström på fas 3 (BE3).' },
+    ] },
+    { title: 'Temperaturer', items: [
+      { key: 'hp_hw_top_temp_c', label: 'Varmvatten topp', sensor: 'BT7', fmt: fmtTemp, info: 'Temperatur högst upp i varmvattenberedaren — det du får först ur kranen.' },
+      { key: 'hp_hot_water_charging_bt6', label: 'VV laddning', sensor: 'BT6', fmt: fmtTemp, info: 'Styrande givare för varmvattenladdning — avgör när tanken är fulladdad.' },
+      { key: 'hp_hot_water_start_bt5', label: 'VV start', sensor: 'BT5', fmt: fmtTemp, info: 'Startgivare för varmvatten — startar ny laddning när den faller under startvärdet.' },
+      { key: 'hp_supply_line_bt2', label: 'Framledning', sensor: 'BT2', fmt: fmtTemp, info: 'Temperatur på vattnet UT till värmesystemet (framledning).' },
+      { key: 'hp_return_line_bt3', label: 'Returledning', sensor: 'BT3', fmt: fmtTemp, info: 'Temperatur på vattnet TILLBAKA från värmesystemet (retur).' },
+      { key: 'hp_calculated_supply_climate_system_1', label: 'Ber. framledning', fmt: fmtTemp, info: 'Beräknad (önskad) framledning som styrsystemet räknat fram ur värmekurvan.' },
+      { key: 'hp_fr_nluft_bt20', label: 'Frånluft', sensor: 'BT20', fmt: fmtTemp, info: 'Ventilationsluften som sugs ut från rummen — värmepumpens värmekälla (in i förångaren).' },
+      { key: 'hp_avluft_bt21', label: 'Avluft', sensor: 'BT21', fmt: fmtTemp, info: 'Luften efter värmeåtervinning, på väg ut ur huset. Frånluft − avluft = återvunnen värme.' },
+      { key: 'hp_outdoor_temp_c', label: 'Utomhus', sensor: 'BT1', fmt: fmtTemp, info: 'Utomhustemperatur (BT1) — styr värmekurvan.' },
+    ] },
+    { title: 'Ventilation', items: [
+      { key: 'hp_ventilation_mode', label: 'Ventilationsläge', fmt: fmtVent, info: 'Aktivt ventilationsläge. 0 = normal.' },
+      { key: 'hp_exhaust_air_fan_speed_gq2', label: 'Fläkthastighet', sensor: 'GQ2', fmt: fmtPct, info: 'Frånluftsfläktens varvtal just nu. Normal = 54 %; lägre (t.ex. 30 %) = reducerad ventilation (hastighet 2).' },
+      { key: 'hp_real_air_flow', label: 'Luftflöde', fmt: fmtFlow, info: 'Uppmätt luftflöde genom aggregatet.' },
+    ] },
+    { title: 'Drift', items: [
+      { key: 'hp_priority', label: 'Prio', fmt: fmtPrio, info: 'Vad kompressorn prioriterar just nu: 10 = av, 20 = varmvatten, 30 = värme, 40 = pool, 60 = kyla.' },
+      { key: 'hp_degree_minutes', label: 'Gradminuter', fmt: fmtDM, info: 'Värmeunderskott integrerat över tid. Når det startgränsen startar kompressorn. 0 = inget underskott (värme avstängd på sommaren).' },
+      { key: 'hp_heating_medium_pump_speed_gp1', label: 'Värmebärarpump', sensor: 'GP1', fmt: fmtPct, info: 'Cirkulationspumpens (GP1) varvtal i värmesystemet.' },
+      { key: 'hp_heating_curve_climate_system_1', label: 'Värmekurva', fmt: fmtRaw, info: 'Inställd värmekurva (lutning) för klimatsystem 1. Högre = varmare framledning när det är kallt ute.' },
+      { key: 'hp_heating_offset_climate_system_1', label: 'Kurvförskjutning', fmt: fmtOffset, info: 'Parallellförskjutning av värmekurvan — varmare (+) eller kallare (−) överlag.' },
+    ] },
+    { title: 'Energi (totalt)', items: [
+      { key: 'hp_energy_consumed_kwh', label: 'Total förbrukning', fmt: fmtKwh, info: 'Total tillförd el till värmepumpen sedan start (livstidsräknare).' },
+      { key: 'hp_energy_produced_kwh', label: 'Total produktion', fmt: fmtKwh, info: 'Total avgiven värmeenergi sedan start. Produktion ÷ förbrukning ≈ värmefaktor (SCOP).' },
+      { key: 'hp_heating_compressor_only', label: 'Värme (kompr.)', fmt: fmtKwh, info: 'Avgiven värme till uppvärmning, endast från kompressorn (exkl. elpatron).' },
+      { key: 'hp_hot_water_compressor_only', label: 'Varmvatten (kompr.)', fmt: fmtKwh, info: 'Avgiven värme till varmvatten, endast från kompressorn (exkl. elpatron).' },
+    ] },
+  ];
 
   function injectStyles() {
     if (document.getElementById('ftw-heating-styles')) return;
     var css = [
       '#heating-grid{display:flex;flex-direction:column;gap:18px}',
-      '.ftw-hp{display:flex;flex-direction:column;gap:12px}',
+      '.ftw-hp{display:flex;flex-direction:column;gap:16px}',
       '.ftw-hp-clickable{cursor:pointer;border-radius:8px;margin:-6px;padding:6px;transition:background 0.12s}',
       '.ftw-hp-clickable:hover,.ftw-hp-clickable:focus{background:var(--bg-hover,rgba(127,127,127,0.06));outline:none}',
       '.ftw-hp-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}',
       '.ftw-hp-more{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent-e)}',
       '.ftw-hp-name{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--fg-muted)}',
-      '.ftw-hp-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px 18px}',
+      '.ftw-hp-group{display:flex;flex-direction:column;gap:7px}',
+      '.ftw-hp-group-title{font-family:var(--mono);font-size:0.6rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-e)}',
+      '.ftw-hp-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px 18px}',
       '.ftw-hp-tile{display:flex;flex-direction:column;gap:3px}',
-      '.ftw-hp-tile-label{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-muted)}',
-      '.ftw-hp-tile-val{font-family:var(--mono);font-size:1.05rem;font-variant-numeric:tabular-nums;color:var(--fg)}',
+      '.ftw-hp-tile-label{font-family:var(--mono);font-size:0.64rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--fg-muted);display:flex;align-items:baseline;gap:3px;flex-wrap:wrap}',
+      '.ftw-hp-sensor{color:var(--fg-muted);opacity:0.6}',
+      '.ftw-hp-i{cursor:help;color:var(--fg-muted);opacity:0.5;align-self:center}',
+      '.ftw-hp-tile-val{font-family:var(--mono);font-size:1.02rem;font-variant-numeric:tabular-nums;color:var(--fg)}',
       '.ftw-hp-spark{display:flex;flex-direction:column;gap:4px}',
       '.ftw-hp-spark-label{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-muted)}',
       '.ftw-hp-spark svg{width:100%;height:48px;display:block}',
@@ -120,24 +171,32 @@
     });
   }
 
+  function tileHtml(def, m) {
+    var has = Object.prototype.hasOwnProperty.call(m, def.key);
+    var sensor = def.sensor ? ' <span class="ftw-hp-sensor">(' + escapeHtml(def.sensor) + ')</span>' : '';
+    var info = def.info ? ' <span class="ftw-hp-i" role="img" aria-label="info" title="' + escapeHtml(def.info) + '">ⓘ</span>' : '';
+    return '<div class="ftw-hp-tile">' +
+      '<span class="ftw-hp-tile-label">' + escapeHtml(def.label) + sensor + info + '</span>' +
+      '<span class="ftw-hp-tile-val">' + (has ? def.fmt(m[def.key]) : '—') + '</span>' +
+      '</div>';
+  }
+
   function renderPump(name, detail, sparkPoints) {
     var m = metricMap(detail && detail.metrics);
-    var tiles = METRICS.map(function (def) {
-      var has = Object.prototype.hasOwnProperty.call(m, def.key);
-      return '<div class="ftw-hp-tile">' +
-        '<span class="ftw-hp-tile-label">' + def.label + '</span>' +
-        '<span class="ftw-hp-tile-val">' + (has ? def.fmt(m[def.key]) : '—') + '</span>' +
-        '</div>';
+    var groups = GROUPS.map(function (g) {
+      var tiles = g.items.map(function (def) { return tileHtml(def, m); }).join('');
+      return '<div class="ftw-hp-group"><div class="ftw-hp-group-title">' + escapeHtml(g.title) + '</div>' +
+        '<div class="ftw-hp-tiles">' + tiles + '</div></div>';
     }).join('');
     var spark = sparkline(sparkPoints);
     var sparkBlock = spark
-      ? '<div class="ftw-hp-spark"><span class="ftw-hp-spark-label">Compressor power · 24h</span>' + spark + '</div>'
+      ? '<div class="ftw-hp-spark"><span class="ftw-hp-spark-label">Kompressoreffekt · 24h</span>' + spark + '</div>'
       : '';
-    // The whole card is a button into the detail view (all signals grouped).
-    return '<div class="ftw-hp ftw-hp-clickable" data-hp-driver="' + escapeHtml(name) + '" role="button" tabindex="0" title="View all heat-pump signals">' +
+    // The whole card is a button into the detail view (all signals + register).
+    return '<div class="ftw-hp ftw-hp-clickable" data-hp-driver="' + escapeHtml(name) + '" role="button" tabindex="0" title="Visa alla signaler">' +
       '<div class="ftw-hp-head"><span class="ftw-hp-name">' + escapeHtml(name) + '</span>' +
-      '<span class="ftw-hp-more">All signals →</span></div>' +
-      '<div class="ftw-hp-tiles">' + tiles + '</div>' +
+      '<span class="ftw-hp-more">Alla signaler →</span></div>' +
+      groups +
       sparkBlock +
       '</div>';
   }
diff --git a/web/index.html b/web/index.html
index 5c08019b..1a68cba4 100644
--- a/web/index.html
+++ b/web/index.html
@@ -798,7 +798,7 @@ <h3>Price bars (top of the chart)</h3>
   <script src="/models.js?v=diag2"></script>
   <script src="/plan.js?v=diag2"></script>
   <script src="/twins.js?v=diag2"></script>
-  <script src="/heating.js?v=heat3"></script>
+  <script src="/heating.js?v=heat4"></script>
   <script src="/loadpoints.js?v=lp3"></script>
   <script src="/diagnose.js?v=diag2"></script>
   <script src="/update-badge.js?v=modal2" defer></script>

From 8f910714df318687c1573f95759b7275b38a3d39 Mon Sep 17 00:00:00 2001
From: "Claude Opus 4.8" <noreply@anthropic.com>
Date: Mon, 29 Jun 2026 13:03:48 +0200
Subject: [PATCH 06/19] feat(ui): heat-pump card to English + word priority,
 '?' help icons, power-limit tiles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Card labels, tooltips and group titles are now English. Priority shows a word
(Off / Hot water / Heating / …) instead of the raw code. The per-tile help
icon is a '?' circle matching the existing .plan-help-btn style (border, sizing,
accent hover) instead of the custom ⓘ. Adds Power limit / Fuse / Max add. heat
tiles. heat4->heat5.

Co-Authored-By: HuggeK <48095810+HuggeK@users.noreply.github.com>
---
 web/heating.js | 92 +++++++++++++++++++++++++++-----------------------
 web/index.html |  2 +-
 2 files changed, 50 insertions(+), 44 deletions(-)

diff --git a/web/heating.js b/web/heating.js
index a44b7879..995519a2 100644
--- a/web/heating.js
+++ b/web/heating.js
@@ -38,55 +38,60 @@
   function fmtPct(v)    { return v == null ? '—' : Math.round(v) + ' %'; }
   function fmtFlow(v)   { return v == null ? '—' : Math.round(v) + ' m³/h'; }
   function fmtDM(v)     { return v == null ? '—' : Math.round(v) + ' DM'; }
-  function fmtKwh(v)    { return v == null ? '—' : Math.round(v).toLocaleString('sv-SE') + ' kWh'; }
+  function fmtKwh(v)    { return v == null ? '—' : Math.round(v).toLocaleString('en-US') + ' kWh'; }
   function fmtRaw(v)    { return v == null ? '—' : String(Math.round(v * 100) / 100); }
   function fmtOffset(v) { return v == null ? '—' : (v > 0 ? '+' : '') + Math.round(v); }
-  var PRIO = { 0: 'av', 10: 'av', 20: 'varmvatten', 30: 'värme', 40: 'pool', 60: 'kyla' };
-  function fmtPrio(v) { if (v == null) return '—'; var n = Math.round(v); return n + (PRIO[n] ? ' · ' + PRIO[n] : ''); }
-  function fmtVent(v) { if (v == null) return '—'; var n = Math.round(v); return n === 0 ? 'Normal' : String(n); }
+  function fmtOnOff(v)  { return v == null ? '—' : (Math.round(v) ? 'On' : 'Off'); }
+  // Compressor priority code → word (0/10 idle, 20 hot water, 30 heating, …).
+  var PRIO = { 0: 'Off', 10: 'Off', 20: 'Hot water', 30: 'Heating', 40: 'Pool', 60: 'Cooling' };
+  function fmtPrio(v) { if (v == null) return '—'; var n = Math.round(v); return PRIO[n] || ('Mode ' + n); }
+  function fmtVent(v) { if (v == null) return '—'; var n = Math.round(v); return n === 0 ? 'Normal' : ('Mode ' + n); }
 
   // ── Card layout: grouped tiles. Each item = { key (hp_* metric), label,
   // optional sensor designation (BT21 …), formatter, info (hover tooltip on
-  // the ⓘ icon) }. Render order = array order. The detail pop-up still lists
-  // ALL ~960 signals; this is the curated at-a-glance set.
+  // the "?" help icon) }. Render order = array order. The detail pop-up still
+  // lists ALL ~960 signals; this is the curated at-a-glance set.
   var GROUPS = [
-    { title: 'Effekt & el', items: [
-      { key: 'hp_energy_log_current_power_consumption', label: 'Total effekt nu', fmt: fmtKW, info: 'Hela värmepumpens momentana elförbrukning just nu — kompressor + fläkt + cirkulationspumpar + elektronik.' },
-      { key: 'hp_power_w', label: 'Kompressor', fmt: fmtPower, info: 'Effekt till enbart kompressorn. 0 W när kompressorn står still — pumpen drar ändå el (se Total effekt nu).' },
-      { key: 'hp_power_internal_additional_heat', label: 'Intern tillsats', fmt: fmtKW, info: 'Effekt till den interna elpatronen (tillskottsvärme). 0 när bara kompressorn jobbar.' },
-      { key: 'hp_compressor_frequency_current', label: 'Kompr.frekvens', fmt: fmtHz, info: 'Kompressorns frekvens/varvtal just nu. 0 Hz = kompressorn står still.' },
-      { key: 'hp_current_be1', label: 'Ström', sensor: 'BE1', fmt: fmtAmp, info: 'Uppmätt ström på fas 1 (strömtransformator BE1). Används för effektvakt/säkringsskydd.' },
-      { key: 'hp_current_be2', label: 'Ström', sensor: 'BE2', fmt: fmtAmp, info: 'Uppmätt ström på fas 2 (BE2).' },
-      { key: 'hp_current_be3', label: 'Ström', sensor: 'BE3', fmt: fmtAmp, info: 'Uppmätt ström på fas 3 (BE3).' },
+    { title: 'Power & electrical', items: [
+      { key: 'hp_energy_log_current_power_consumption', label: 'Total power now', fmt: fmtKW, info: "The whole heat pump's instantaneous electrical draw right now — compressor + fan + circulation pumps + electronics." },
+      { key: 'hp_power_w', label: 'Compressor', fmt: fmtPower, info: 'Power to the compressor only. 0 W when the compressor is idle — the pump still draws power (see Total power now).' },
+      { key: 'hp_power_internal_additional_heat', label: 'Internal add. heat', fmt: fmtKW, info: 'Power to the internal immersion heater (supplementary heat). 0 when only the compressor runs.' },
+      { key: 'hp_compressor_frequency_current', label: 'Compr. freq.', fmt: fmtHz, info: 'Compressor speed/frequency right now. 0 Hz = compressor idle.' },
+      { key: 'hp_current_be1', label: 'Current', sensor: 'BE1', fmt: fmtAmp, info: 'Measured current on phase 1 (current transformer BE1). Used by the load monitor / fuse protection.' },
+      { key: 'hp_current_be2', label: 'Current', sensor: 'BE2', fmt: fmtAmp, info: 'Measured current on phase 2 (BE2).' },
+      { key: 'hp_current_be3', label: 'Current', sensor: 'BE3', fmt: fmtAmp, info: 'Measured current on phase 3 (BE3).' },
+      { key: 'hp_power_limitation_activation', label: 'Power limit', fmt: fmtOnOff, info: 'Whether the built-in power limitation (load monitor) is actively throttling to stay under the main fuse. Off = not limiting. Throttling only reduces output — it never damages the pump.' },
+      { key: 'hp_fuse', label: 'Fuse', sensor: null, fmt: fmtAmp, info: 'Main fuse size the pump is configured for. It limits compressor + immersion heater to stay under this.' },
+      { key: 'hp_max_internal_additional_heat', label: 'Max add. heat', fmt: fmtKW, info: 'Maximum permitted internal immersion-heater power. Lower this to cap the supplementary heat draw.' },
     ] },
-    { title: 'Temperaturer', items: [
-      { key: 'hp_hw_top_temp_c', label: 'Varmvatten topp', sensor: 'BT7', fmt: fmtTemp, info: 'Temperatur högst upp i varmvattenberedaren — det du får först ur kranen.' },
-      { key: 'hp_hot_water_charging_bt6', label: 'VV laddning', sensor: 'BT6', fmt: fmtTemp, info: 'Styrande givare för varmvattenladdning — avgör när tanken är fulladdad.' },
-      { key: 'hp_hot_water_start_bt5', label: 'VV start', sensor: 'BT5', fmt: fmtTemp, info: 'Startgivare för varmvatten — startar ny laddning när den faller under startvärdet.' },
-      { key: 'hp_supply_line_bt2', label: 'Framledning', sensor: 'BT2', fmt: fmtTemp, info: 'Temperatur på vattnet UT till värmesystemet (framledning).' },
-      { key: 'hp_return_line_bt3', label: 'Returledning', sensor: 'BT3', fmt: fmtTemp, info: 'Temperatur på vattnet TILLBAKA från värmesystemet (retur).' },
-      { key: 'hp_calculated_supply_climate_system_1', label: 'Ber. framledning', fmt: fmtTemp, info: 'Beräknad (önskad) framledning som styrsystemet räknat fram ur värmekurvan.' },
-      { key: 'hp_fr_nluft_bt20', label: 'Frånluft', sensor: 'BT20', fmt: fmtTemp, info: 'Ventilationsluften som sugs ut från rummen — värmepumpens värmekälla (in i förångaren).' },
-      { key: 'hp_avluft_bt21', label: 'Avluft', sensor: 'BT21', fmt: fmtTemp, info: 'Luften efter värmeåtervinning, på väg ut ur huset. Frånluft − avluft = återvunnen värme.' },
-      { key: 'hp_outdoor_temp_c', label: 'Utomhus', sensor: 'BT1', fmt: fmtTemp, info: 'Utomhustemperatur (BT1) — styr värmekurvan.' },
+    { title: 'Temperatures', items: [
+      { key: 'hp_hw_top_temp_c', label: 'Hot water top', sensor: 'BT7', fmt: fmtTemp, info: 'Temperature at the top of the hot-water tank — what you get first from the tap.' },
+      { key: 'hp_hot_water_charging_bt6', label: 'HW charging', sensor: 'BT6', fmt: fmtTemp, info: 'Controlling sensor for hot-water charging — decides when the tank is fully charged.' },
+      { key: 'hp_hot_water_start_bt5', label: 'HW start', sensor: 'BT5', fmt: fmtTemp, info: 'Hot-water start sensor — triggers a new charge when it drops below the start value.' },
+      { key: 'hp_supply_line_bt2', label: 'Supply', sensor: 'BT2', fmt: fmtTemp, info: 'Temperature of the water going OUT to the heating system (supply line).' },
+      { key: 'hp_return_line_bt3', label: 'Return', sensor: 'BT3', fmt: fmtTemp, info: 'Temperature of the water coming BACK from the heating system (return line).' },
+      { key: 'hp_calculated_supply_climate_system_1', label: 'Calc. supply', fmt: fmtTemp, info: 'Calculated (target) supply temperature the control derives from the heating curve.' },
+      { key: 'hp_fr_nluft_bt20', label: 'Extract air', sensor: 'BT20', fmt: fmtTemp, info: "Ventilation air drawn from the rooms — the heat pump's heat source (into the evaporator)." },
+      { key: 'hp_avluft_bt21', label: 'Exhaust air', sensor: 'BT21', fmt: fmtTemp, info: 'Air after heat recovery, on its way out of the house. Extract − exhaust = recovered heat.' },
+      { key: 'hp_outdoor_temp_c', label: 'Outdoor', sensor: 'BT1', fmt: fmtTemp, info: 'Outdoor temperature (BT1) — drives the heating curve.' },
     ] },
     { title: 'Ventilation', items: [
-      { key: 'hp_ventilation_mode', label: 'Ventilationsläge', fmt: fmtVent, info: 'Aktivt ventilationsläge. 0 = normal.' },
-      { key: 'hp_exhaust_air_fan_speed_gq2', label: 'Fläkthastighet', sensor: 'GQ2', fmt: fmtPct, info: 'Frånluftsfläktens varvtal just nu. Normal = 54 %; lägre (t.ex. 30 %) = reducerad ventilation (hastighet 2).' },
-      { key: 'hp_real_air_flow', label: 'Luftflöde', fmt: fmtFlow, info: 'Uppmätt luftflöde genom aggregatet.' },
+      { key: 'hp_ventilation_mode', label: 'Vent. mode', fmt: fmtVent, info: 'Active ventilation mode. 0 = normal.' },
+      { key: 'hp_exhaust_air_fan_speed_gq2', label: 'Fan speed', sensor: 'GQ2', fmt: fmtPct, info: 'Exhaust-air fan speed right now. Normal = 54 %; lower (e.g. 30 %) = reduced ventilation (speed 2).' },
+      { key: 'hp_real_air_flow', label: 'Air flow', fmt: fmtFlow, info: 'Measured air flow through the unit.' },
     ] },
-    { title: 'Drift', items: [
-      { key: 'hp_priority', label: 'Prio', fmt: fmtPrio, info: 'Vad kompressorn prioriterar just nu: 10 = av, 20 = varmvatten, 30 = värme, 40 = pool, 60 = kyla.' },
-      { key: 'hp_degree_minutes', label: 'Gradminuter', fmt: fmtDM, info: 'Värmeunderskott integrerat över tid. Når det startgränsen startar kompressorn. 0 = inget underskott (värme avstängd på sommaren).' },
-      { key: 'hp_heating_medium_pump_speed_gp1', label: 'Värmebärarpump', sensor: 'GP1', fmt: fmtPct, info: 'Cirkulationspumpens (GP1) varvtal i värmesystemet.' },
-      { key: 'hp_heating_curve_climate_system_1', label: 'Värmekurva', fmt: fmtRaw, info: 'Inställd värmekurva (lutning) för klimatsystem 1. Högre = varmare framledning när det är kallt ute.' },
-      { key: 'hp_heating_offset_climate_system_1', label: 'Kurvförskjutning', fmt: fmtOffset, info: 'Parallellförskjutning av värmekurvan — varmare (+) eller kallare (−) överlag.' },
+    { title: 'Operation', items: [
+      { key: 'hp_priority', label: 'Priority', fmt: fmtPrio, info: 'What the compressor is prioritising right now: Off / Hot water / Heating / Pool / Cooling.' },
+      { key: 'hp_degree_minutes', label: 'Degree minutes', fmt: fmtDM, info: 'Heating deficit integrated over time. When it reaches the start threshold the compressor starts. 0 = no deficit (heating off in summer).' },
+      { key: 'hp_heating_medium_pump_speed_gp1', label: 'Circ. pump', sensor: 'GP1', fmt: fmtPct, info: 'Heating circulation pump (GP1) speed.' },
+      { key: 'hp_heating_curve_climate_system_1', label: 'Heating curve', fmt: fmtRaw, info: 'Configured heating curve (slope) for climate system 1. Higher = warmer supply when it is cold outside.' },
+      { key: 'hp_heating_offset_climate_system_1', label: 'Curve offset', fmt: fmtOffset, info: 'Parallel offset of the heating curve — warmer (+) or cooler (−) overall.' },
     ] },
-    { title: 'Energi (totalt)', items: [
-      { key: 'hp_energy_consumed_kwh', label: 'Total förbrukning', fmt: fmtKwh, info: 'Total tillförd el till värmepumpen sedan start (livstidsräknare).' },
-      { key: 'hp_energy_produced_kwh', label: 'Total produktion', fmt: fmtKwh, info: 'Total avgiven värmeenergi sedan start. Produktion ÷ förbrukning ≈ värmefaktor (SCOP).' },
-      { key: 'hp_heating_compressor_only', label: 'Värme (kompr.)', fmt: fmtKwh, info: 'Avgiven värme till uppvärmning, endast från kompressorn (exkl. elpatron).' },
-      { key: 'hp_hot_water_compressor_only', label: 'Varmvatten (kompr.)', fmt: fmtKwh, info: 'Avgiven värme till varmvatten, endast från kompressorn (exkl. elpatron).' },
+    { title: 'Energy (lifetime)', items: [
+      { key: 'hp_energy_consumed_kwh', label: 'Total consumed', fmt: fmtKwh, info: 'Total electricity supplied to the heat pump since installation (lifetime counter).' },
+      { key: 'hp_energy_produced_kwh', label: 'Total produced', fmt: fmtKwh, info: 'Total heat energy delivered since installation. Produced ÷ consumed ≈ heat factor (SCOP).' },
+      { key: 'hp_heating_compressor_only', label: 'Heating (compr.)', fmt: fmtKwh, info: 'Heat delivered to heating, from the compressor only (excl. immersion heater).' },
+      { key: 'hp_hot_water_compressor_only', label: 'Hot water (compr.)', fmt: fmtKwh, info: 'Heat delivered to hot water, from the compressor only (excl. immersion heater).' },
     ] },
   ];
 
@@ -106,7 +111,8 @@
       '.ftw-hp-tile{display:flex;flex-direction:column;gap:3px}',
       '.ftw-hp-tile-label{font-family:var(--mono);font-size:0.64rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--fg-muted);display:flex;align-items:baseline;gap:3px;flex-wrap:wrap}',
       '.ftw-hp-sensor{color:var(--fg-muted);opacity:0.6}',
-      '.ftw-hp-i{cursor:help;color:var(--fg-muted);opacity:0.5;align-self:center}',
+      '.ftw-hp-i{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;border:1px solid var(--line);border-radius:50%;color:var(--fg-dim);font-family:var(--sans);font-size:9px;font-weight:600;line-height:1;cursor:help;transition:color 0.18s,border-color 0.18s}',
+      '.ftw-hp-i:hover{color:var(--accent-e);border-color:var(--accent-e)}',
       '.ftw-hp-tile-val{font-family:var(--mono);font-size:1.02rem;font-variant-numeric:tabular-nums;color:var(--fg)}',
       '.ftw-hp-spark{display:flex;flex-direction:column;gap:4px}',
       '.ftw-hp-spark-label{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-muted)}',
@@ -174,7 +180,7 @@
   function tileHtml(def, m) {
     var has = Object.prototype.hasOwnProperty.call(m, def.key);
     var sensor = def.sensor ? ' <span class="ftw-hp-sensor">(' + escapeHtml(def.sensor) + ')</span>' : '';
-    var info = def.info ? ' <span class="ftw-hp-i" role="img" aria-label="info" title="' + escapeHtml(def.info) + '">ⓘ</span>' : '';
+    var info = def.info ? ' <span class="ftw-hp-i" role="img" aria-label="info" title="' + escapeHtml(def.info) + '">?</span>' : '';
     return '<div class="ftw-hp-tile">' +
       '<span class="ftw-hp-tile-label">' + escapeHtml(def.label) + sensor + info + '</span>' +
       '<span class="ftw-hp-tile-val">' + (has ? def.fmt(m[def.key]) : '—') + '</span>' +
@@ -190,12 +196,12 @@
     }).join('');
     var spark = sparkline(sparkPoints);
     var sparkBlock = spark
-      ? '<div class="ftw-hp-spark"><span class="ftw-hp-spark-label">Kompressoreffekt · 24h</span>' + spark + '</div>'
+      ? '<div class="ftw-hp-spark"><span class="ftw-hp-spark-label">Compressor power · 24h</span>' + spark + '</div>'
       : '';
     // The whole card is a button into the detail view (all signals + register).
-    return '<div class="ftw-hp ftw-hp-clickable" data-hp-driver="' + escapeHtml(name) + '" role="button" tabindex="0" title="Visa alla signaler">' +
+    return '<div class="ftw-hp ftw-hp-clickable" data-hp-driver="' + escapeHtml(name) + '" role="button" tabindex="0" title="View all signals">' +
       '<div class="ftw-hp-head"><span class="ftw-hp-name">' + escapeHtml(name) + '</span>' +
-      '<span class="ftw-hp-more">Alla signaler →</span></div>' +
+      '<span class="ftw-hp-more">All signals →</span></div>' +
       groups +
       sparkBlock +
       '</div>';
diff --git a/web/index.html b/web/index.html
index 1a68cba4..cade30d8 100644
--- a/web/index.html
+++ b/web/index.html
@@ -798,7 +798,7 @@ <h3>Price bars (top of the chart)</h3>
   <script src="/models.js?v=diag2"></script>
   <script src="/plan.js?v=diag2"></script>
   <script src="/twins.js?v=diag2"></script>
-  <script src="/heating.js?v=heat4"></script>
+  <script src="/heating.js?v=heat5"></script>
   <script src="/loadpoints.js?v=lp3"></script>
   <script src="/diagnose.js?v=diag2"></script>
   <script src="/update-badge.js?v=modal2" defer></script>

From cb6878452af62a6b291b718cc81ce5d702b8eaa3 Mon Sep 17 00:00:00 2001
From: "Claude Opus 4.8" <noreply@anthropic.com>
Date: Mon, 29 Jun 2026 13:17:18 +0200
Subject: [PATCH 07/19] feat(ui): render heat-pump groups as grey sub-cards
 (--ink-sunken)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Each group (Power & electrical, Temperatures, …) is now a distinct grey
sunken sub-card matching the dashboard's in-card box pattern (--ink-sunken +
--line border + radius + padding), so the groups read as separate cards under
the heat-pump card. heat5->heat6.

Co-Authored-By: HuggeK <48095810+HuggeK@users.noreply.github.com>
---
 web/heating.js | 4 ++--
 web/index.html | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/heating.js b/web/heating.js
index 995519a2..a15f9fb7 100644
--- a/web/heating.js
+++ b/web/heating.js
@@ -105,8 +105,8 @@
       '.ftw-hp-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}',
       '.ftw-hp-more{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent-e)}',
       '.ftw-hp-name{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--fg-muted)}',
-      '.ftw-hp-group{display:flex;flex-direction:column;gap:7px}',
-      '.ftw-hp-group-title{font-family:var(--mono);font-size:0.6rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-e)}',
+      '.ftw-hp-group{display:flex;flex-direction:column;gap:9px;background:var(--ink-sunken);border:1px solid var(--line);border-radius:10px;padding:12px 14px}',
+      '.ftw-hp-group-title{font-family:var(--mono);font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-e)}',
       '.ftw-hp-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px 18px}',
       '.ftw-hp-tile{display:flex;flex-direction:column;gap:3px}',
       '.ftw-hp-tile-label{font-family:var(--mono);font-size:0.64rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--fg-muted);display:flex;align-items:baseline;gap:3px;flex-wrap:wrap}',
diff --git a/web/index.html b/web/index.html
index cade30d8..d581b888 100644
--- a/web/index.html
+++ b/web/index.html
@@ -798,7 +798,7 @@ <h3>Price bars (top of the chart)</h3>
   <script src="/models.js?v=diag2"></script>
   <script src="/plan.js?v=diag2"></script>
   <script src="/twins.js?v=diag2"></script>
-  <script src="/heating.js?v=heat5"></script>
+  <script src="/heating.js?v=heat6"></script>
   <script src="/loadpoints.js?v=lp3"></script>
   <script src="/diagnose.js?v=diag2"></script>
   <script src="/update-badge.js?v=modal2" defer></script>

From de8c6bdb347bb2effacaf457bd9ebaa6f7e61ce9 Mon Sep 17 00:00:00 2001
From: "Claude Opus 4.8" <noreply@anthropic.com>
Date: Mon, 29 Jun 2026 13:30:17 +0200
Subject: [PATCH 08/19] feat(ui): NIBE local-API driver fully configurable in
 the Add-driver form

The form treated NIBE as an OAuth (apicreds) driver and seeded
{client_id, client_secret}. Distinguish local basic-auth drivers (apicreds +
connection_defaults.port) and seed {host, username, password} instead. The HTTP
fieldset now renders Username + a Certificate fingerprint (tls_pin_sha256) field
for these drivers; password comes from config_secrets. allowed_hosts is
auto-derived from config.host by the backend (port-insensitive), so no manual
allowlist needed. devices.js tabsplit2->tabsplit3.

Co-Authored-By: HuggeK <48095810+HuggeK@users.noreply.github.com>
---
 web/index.html               |  2 +-
 web/settings/tabs/devices.js | 20 ++++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/web/index.html b/web/index.html
index d581b888..edb8ea27 100644
--- a/web/index.html
+++ b/web/index.html
@@ -784,7 +784,7 @@ <h3>Price bars (top of the chart)</h3>
   <script src="/settings.js?v=diag3"></script>
   <script src="/settings/tabs/control.js?v=tabsplit1"></script>
   <script src="/settings/tabs/access.js?v=access1"></script>
-  <script src="/settings/tabs/devices.js?v=tabsplit2"></script>
+  <script src="/settings/tabs/devices.js?v=tabsplit3"></script>
   <script src="/settings/tabs/loadpoints.js?v=lp2"></script>
   <script src="/settings/tabs/price.js?v=tabsplit1"></script>
   <script src="/settings/tabs/weather.js?v=tabsplit1"></script>
diff --git a/web/settings/tabs/devices.js b/web/settings/tabs/devices.js
index 5f8a11bb..dd4ac7a2 100644
--- a/web/settings/tabs/devices.js
+++ b/web/settings/tabs/devices.js
@@ -136,6 +136,12 @@
         }
         if (isLocalHTTP) {
           var lcfg = d.config || {};
+          // NIBE-style local-API drivers (catalog apicreds + a connection port)
+          // also need a username + an optional self-signed cert pin; plain
+          // local-HTTP gateways (e.g. a P1 meter) keep just the Host field.
+          // Backend auto-derives capabilities.http.allowed_hosts from config.host.
+          var localCreds = caps.indexOf('apicreds') >= 0;
+          var pin = (cap.http && cap.http.tls_pin_sha256) || '';
           // Render the Disable-PV checkbox for every HTTP driver; the
           // post-fetch pass in `after` hides it for drivers whose
           // catalog doesn't advertise BOTH meter + pv capabilities
@@ -145,12 +151,20 @@
           html += '<fieldset><legend>HTTP</legend>' +
             '<label>Host / IP ' + help('Hostname (e.g. zap.local) or IP address of the device. mDNS names work when your OS resolver supports them; otherwise use the LAN IP.') + '</label>' +
             '<input type="text" data-path="drivers.' + idx + '.config.host" value="' + escHtml(lcfg.host || '') + '" placeholder="zap.local">' +
+            (localCreds ?
+              '<label style="margin-top:8px">Username ' + help('Username for the device\'s local API (HTTP Basic auth). For NIBE this is the local-API account you set up in the myUplink app.') + '</label>' +
+              '<input type="text" autocomplete="off" data-path="drivers.' + idx + '.config.username" value="' + escHtml(lcfg.username || '') + '" placeholder="local-api-user">'
+              : '') +
             '<label class="drv-disable-pv" data-drv-lua="' + escHtml(d.lua || '') + '" style="margin-top:8px;display:none;align-items:center;gap:6px;font-weight:normal">' +
               '<input type="checkbox" data-checkbox-path="drivers.' + idx + '.config.disable_pv"' +
               (lcfg.disable_pv ? ' checked' : '') + '>' +
               'Disable PV readings ' +
               help('Use this gateway for the P1 meter only. When another driver already owns PV aggregation, set this so the two drivers don\'t double-count generation.') +
             '</label>' +
+            (localCreds ?
+              '<label style="margin-top:8px">Certificate fingerprint (SHA-256) ' + help('Pin the device\'s self-signed HTTPS certificate by its SHA-256 fingerprint (the "fingeravtryck" in the myUplink app, or from "openssl x509 -fingerprint -sha256"). 64 hex chars; colons and case are ignored. Leave empty for normal certificate verification.') + '</label>' +
+              '<input type="text" autocomplete="off" data-path="drivers.' + idx + '.capabilities.http.tls_pin_sha256" value="' + escHtml(pin) + '" placeholder="73d1ac81…bd9bf4eb (64 hex)" style="font-family:var(--mono);font-size:0.78rem">'
+              : '') +
             '</fieldset>';
         }
         if (isApiCredsDriver) {
@@ -429,6 +443,7 @@
           opt.dataset.id = e.id || "";
           opt.dataset.httpHosts = (e.http_hosts || []).join(",");
           opt.dataset.connectionHost = (e.connection_defaults && e.connection_defaults.host) || "";
+          opt.dataset.connPort = (e.connection_defaults && e.connection_defaults.port) || "";
           opt.dataset.verificationStatus = e.verification_status || "experimental";
           if (e.verification_notes) opt.title = e.verification_notes;
           sel.appendChild(opt);
@@ -462,6 +477,11 @@
             driver.config = { ip: "", vin: "" };
           } else if (connHost) {
             driver.config = { host: connHost };
+          } else if (entryCaps.indexOf("apicreds") >= 0 && (chosen.dataset.connPort || "")) {
+            // Local HTTP device with HTTP Basic auth (e.g. NIBE local REST API):
+            // host + username + password + an optional self-signed cert pin. The
+            // backend auto-derives capabilities.http.allowed_hosts from config.host.
+            driver.config = { host: "", username: "", password: "" };
           } else if (entryCaps.indexOf("apicreds") >= 0) {
             // OAuth2 client_credentials drivers (e.g. MyUplink).
             driver.config = { client_id: "", client_secret: "" };

From 58930994685e0be763f700940b457694ab0f1bb0 Mon Sep 17 00:00:00 2001
From: "Claude Opus 4.8" <noreply@anthropic.com>
Date: Mon, 29 Jun 2026 13:47:20 +0200
Subject: [PATCH 09/19] feat(ui): heat-pump month temp chart +
 energy-per-period on the card

Step 2: a 30-day multi-line SVG chart (outdoor BT1 / supply BT2 / return BT3,
distinct hues, themed axis) under the tiles. Step 3: an Energy-per-period box
(Today / This week / This month / This year, consumed vs produced) computed
client-side as counter deltas across calendar boundaries; periods without enough
logged history show 'accumulating'. Both fetch via /api/series (needs the
generic parseRange added in the nibe branch for 30d/366d windows). heat6->heat7.

Co-Authored-By: HuggeK <48095810+HuggeK@users.noreply.github.com>
---
 web/heating.js | 113 +++++++++++++++++++++++++++++++++++++++++++++++--
 web/index.html |   2 +-
 2 files changed, 110 insertions(+), 5 deletions(-)

diff --git a/web/heating.js b/web/heating.js
index a15f9fb7..4db9a7b7 100644
--- a/web/heating.js
+++ b/web/heating.js
@@ -117,6 +117,15 @@
       '.ftw-hp-spark{display:flex;flex-direction:column;gap:4px}',
       '.ftw-hp-spark-label{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-muted)}',
       '.ftw-hp-spark svg{width:100%;height:48px;display:block}',
+      '.ftw-hp-tchart{width:100%;height:150px;display:block}',
+      '.ftw-hp-legend{display:flex;gap:14px;flex-wrap:wrap}',
+      '.ftw-hp-leg{font-family:var(--mono);font-size:0.62rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--fg-muted);display:inline-flex;align-items:center;gap:4px}',
+      '.ftw-hp-leg-dot{width:8px;height:8px;border-radius:2px;display:inline-block}',
+      '.ftw-hp-erow{display:grid;grid-template-columns:1fr auto auto;gap:7px 18px;align-items:baseline}',
+      '.ftw-hp-ehead{font-size:0.58rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-muted);font-family:var(--mono)}',
+      '.ftw-hp-elabel{font-family:var(--mono);font-size:0.66rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--fg-muted)}',
+      '.ftw-hp-eval{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:0.92rem;color:var(--fg);text-align:right;min-width:72px}',
+      '.ftw-hp-acc{color:var(--fg-muted);opacity:0.7;font-size:0.74rem}',
       '.ftw-hp-empty{font-family:var(--mono);font-size:0.8rem;color:var(--fg-muted)}',
     ].join('');
     var el = document.createElement('style');
@@ -177,6 +186,89 @@
     });
   }
 
+  // ── Month temperature chart (outdoor / supply / return) ──────────
+  // Multi-line SVG; line hues are fixed (read on both themes), axis chrome
+  // uses theme tokens. Spans whatever history exists (fills toward a month).
+  var TCHART = [
+    { key: 'outdoor', label: 'Outdoor', color: '#38bdf8' },
+    { key: 'supply',  label: 'Supply',  color: '#ef4444' },
+    { key: 'ret',     label: 'Return',  color: '#22c55e' },
+  ];
+  function tempChartBlock(temps) {
+    if (!temps) return '';
+    var lines = TCHART.map(function (s) { return { color: s.color, points: temps[s.key] || [] }; });
+    var all = [];
+    lines.forEach(function (l) { l.points.forEach(function (p) { if (p && p.v != null) all.push(p); }); });
+    if (all.length < 2) return '';
+    var w = 600, h = 150, padL = 26, padR = 6, padT = 8, padB = 14;
+    var ts = all.map(function (p) { return p.ts; });
+    var vs = all.map(function (p) { return p.v; });
+    var t0 = Math.min.apply(null, ts), t1 = Math.max.apply(null, ts), tspan = (t1 - t0) || 1;
+    var vMin = Math.min.apply(null, vs), vMax = Math.max.apply(null, vs);
+    var vp = (vMax - vMin) * 0.1 || 1; vMin -= vp; vMax += vp;
+    var vspan = (vMax - vMin) || 1;
+    function X(t) { return (padL + (t - t0) / tspan * (w - padL - padR)).toFixed(1); }
+    function Y(v) { return (padT + (1 - (v - vMin) / vspan) * (h - padT - padB)).toFixed(1); }
+    var grid = '';
+    [vMin, (vMin + vMax) / 2, vMax].forEach(function (v) {
+      grid += '<line x1="' + padL + '" y1="' + Y(v) + '" x2="' + (w - padR) + '" y2="' + Y(v) + '" stroke="var(--line)" stroke-width="0.5"/>' +
+        '<text x="2" y="' + (parseFloat(Y(v)) + 3).toFixed(1) + '" fill="var(--fg-muted)" font-size="8" font-family="monospace">' + v.toFixed(0) + '</text>';
+    });
+    var paths = lines.map(function (l) {
+      var pp = l.points.filter(function (p) { return p && p.v != null; });
+      if (pp.length < 2) return '';
+      var d = pp.map(function (p, i) { return (i ? 'L' : 'M') + X(p.ts) + ',' + Y(p.v); }).join(' ');
+      return '<path d="' + d + '" fill="none" stroke="' + l.color + '" stroke-width="1.4" stroke-linejoin="round"/>';
+    }).join('');
+    var legend = TCHART.map(function (s) {
+      return '<span class="ftw-hp-leg"><span class="ftw-hp-leg-dot" style="background:' + s.color + '"></span>' + s.label + '</span>';
+    }).join('');
+    return '<div class="ftw-hp-group"><div class="ftw-hp-group-title">Temperatures · 30 days</div>' +
+      '<div class="ftw-hp-legend">' + legend + '</div>' +
+      '<svg viewBox="0 0 ' + w + ' ' + h + '" preserveAspectRatio="none" class="ftw-hp-tchart" aria-hidden="true">' + grid + paths + '</svg>' +
+      '</div>';
+  }
+
+  // ── Energy per calendar period, from the lifetime kWh counters ───
+  // delta = current − value at the period boundary; null when the logged
+  // history doesn't reach back that far (shown as "accumulating").
+  function energyDeltas(points) {
+    if (!points || points.length < 2) return {};
+    var last = points[points.length - 1].v;
+    var earliest = points[0].ts;
+    var now = new Date();
+    var startToday = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
+    var dow = (now.getDay() + 6) % 7; // Monday = 0
+    var startWeek = startToday - dow * 86400000;
+    var startMonth = new Date(now.getFullYear(), now.getMonth(), 1).getTime();
+    var startYear = new Date(now.getFullYear(), 0, 1).getTime();
+    function delta(b) {
+      if (earliest > b) return null;
+      var base = points[0].v;
+      for (var i = 0; i < points.length; i++) { if (points[i].ts <= b) base = points[i].v; else break; }
+      return Math.max(0, last - base);
+    }
+    return { today: delta(startToday), week: delta(startWeek), month: delta(startMonth), year: delta(startYear) };
+  }
+  function energyPeriodsBlock(energy) {
+    if (!energy || (energy.consumed || []).length < 2) return '';
+    var c = energyDeltas(energy.consumed), p = energyDeltas(energy.produced);
+    function cell(v) { return v == null ? '<span class="ftw-hp-acc">accumulating</span>' : (Math.round(v * 10) / 10).toLocaleString('en-US') + ' kWh'; }
+    var rows = [
+      { k: 'today', label: 'Today' },
+      { k: 'week', label: 'This week' },
+      { k: 'month', label: 'This month' },
+      { k: 'year', label: 'This year' },
+    ].map(function (r) {
+      return '<div class="ftw-hp-erow"><span class="ftw-hp-elabel">' + r.label + '</span>' +
+        '<span class="ftw-hp-eval">' + cell(c[r.k]) + '</span>' +
+        '<span class="ftw-hp-eval">' + cell(p[r.k]) + '</span></div>';
+    }).join('');
+    return '<div class="ftw-hp-group"><div class="ftw-hp-group-title">Energy per period</div>' +
+      '<div class="ftw-hp-erow ftw-hp-ehead"><span class="ftw-hp-elabel"></span><span class="ftw-hp-eval">Consumed</span><span class="ftw-hp-eval">Produced</span></div>' +
+      rows + '</div>';
+  }
+
   function tileHtml(def, m) {
     var has = Object.prototype.hasOwnProperty.call(m, def.key);
     var sensor = def.sensor ? ' <span class="ftw-hp-sensor">(' + escapeHtml(def.sensor) + ')</span>' : '';
@@ -187,7 +279,7 @@
       '</div>';
   }
 
-  function renderPump(name, detail, sparkPoints) {
+  function renderPump(name, detail, sparkPoints, temps, energy) {
     var m = metricMap(detail && detail.metrics);
     var groups = GROUPS.map(function (g) {
       var tiles = g.items.map(function (def) { return tileHtml(def, m); }).join('');
@@ -203,6 +295,8 @@
       '<div class="ftw-hp-head"><span class="ftw-hp-name">' + escapeHtml(name) + '</span>' +
       '<span class="ftw-hp-more">All signals →</span></div>' +
       groups +
+      energyPeriodsBlock(energy) +
+      tempChartBlock(temps) +
       sparkBlock +
       '</div>';
   }
@@ -237,11 +331,22 @@
       }
       // Fetch detail + 24h power series for each heat pump in parallel.
       return Promise.all(names.map(function (n) {
+        var ser = function (metric, range, pts) {
+          return fetchJSON('/api/series?driver=' + encodeURIComponent(n) + '&metric=' + metric + '&range=' + range + '&points=' + pts);
+        };
         return Promise.all([
           fetchJSON('/api/drivers/' + encodeURIComponent(n)),
-          fetchJSON('/api/series?driver=' + encodeURIComponent(n) + '&metric=hp_power_w&range=24h&points=200'),
+          ser('hp_power_w', '24h', 200),
+          ser('hp_outdoor_temp_c', '30d', 400),
+          ser('hp_supply_line_bt2', '30d', 400),
+          ser('hp_return_line_bt3', '30d', 400),
+          ser('hp_energy_consumed_kwh', '366d', 800),
+          ser('hp_energy_produced_kwh', '366d', 800),
         ]).then(function (parts) {
-          return { name: n, detail: parts[0], series: (parts[1] && parts[1].points) || [] };
+          var pp = function (r) { return (r && r.points) || []; };
+          return { name: n, detail: parts[0], series: pp(parts[1]),
+            temps: { outdoor: pp(parts[2]), supply: pp(parts[3]), ret: pp(parts[4]) },
+            energy: { consumed: pp(parts[5]), produced: pp(parts[6]) } };
         });
       })).then(function (pumps) {
         var live = pumps.filter(function (p) { return p.detail && isHeatPump(p.detail); });
@@ -249,7 +354,7 @@
         injectStyles();
         section.hidden = false;
         grid.innerHTML = live.map(function (p) {
-          return renderPump(p.name, p.detail, p.series);
+          return renderPump(p.name, p.detail, p.series, p.temps, p.energy);
         }).join('');
       });
     });
diff --git a/web/index.html b/web/index.html
index edb8ea27..b80a0bcc 100644
--- a/web/index.html
+++ b/web/index.html
@@ -798,7 +798,7 @@ <h3>Price bars (top of the chart)</h3>
   <script src="/models.js?v=diag2"></script>
   <script src="/plan.js?v=diag2"></script>
   <script src="/twins.js?v=diag2"></script>
-  <script src="/heating.js?v=heat6"></script>
+  <script src="/heating.js?v=heat7"></script>
   <script src="/loadpoints.js?v=lp3"></script>
   <script src="/diagnose.js?v=diag2"></script>
   <script src="/update-badge.js?v=modal2" defer></script>

From 84f37174cac1111312710d4650653f1b81b4b7a7 Mon Sep 17 00:00:00 2001
From: "Claude Opus 4.8" <noreply@anthropic.com>
Date: Mon, 29 Jun 2026 15:44:37 +0200
Subject: [PATCH 10/19] feat(ui): explain every signal in the heat-pump
 all-signals view

Each row in the All-signals detail now carries an always-visible sub-line
explaining what the signal is: the curated card-tile description when one exists,
otherwise the device's own point title (m.title, newly served by the API). Keeps
the 'All signals' button. heat7->heat8.

Co-Authored-By: HuggeK <48095810+HuggeK@users.noreply.github.com>
---
 web/heating.js | 24 ++++++++++++++++++++++--
 web/index.html |  2 +-
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/web/heating.js b/web/heating.js
index 4db9a7b7..1f288dd5 100644
--- a/web/heating.js
+++ b/web/heating.js
@@ -402,7 +402,10 @@
       '.ftw-hpd-title{font-family:var(--mono);font-size:0.74rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--fg-muted)}',
       '.ftw-hpd-close{background:none;border:1px solid var(--line);color:var(--fg);border-radius:6px;cursor:pointer;font-size:1rem;line-height:1;padding:4px 9px}',
       '.ftw-hpd-group{margin:16px 0 4px;font-family:var(--mono);font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-e)}',
-      '.ftw-hpd-row{display:grid;grid-template-columns:1fr auto auto 120px;gap:10px 14px;align-items:center;padding:5px 0;border-bottom:1px solid var(--line-soft,var(--line))}',
+      '.ftw-hpd-item{padding:6px 0;border-bottom:1px solid var(--line-soft,var(--line))}',
+      '.ftw-hpd-row{display:grid;grid-template-columns:1fr auto auto 120px;gap:10px 14px;align-items:center}',
+      '.ftw-hpd-explain{font-size:0.74rem;color:var(--fg-muted);line-height:1.35;margin-top:3px;max-width:66ch}',
+      '.ftw-hpd-explain::before{content:"↳ ";opacity:0.55}',
       '.ftw-hpd-label{color:var(--fg-muted);font-size:0.85rem}',
       '.ftw-hpd-reg{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:0.76rem;color:var(--fg-muted);text-align:right;opacity:0.8}',
       '.ftw-hpd-val{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--fg);text-align:right}',
@@ -422,6 +425,19 @@
   }
   function onDetailKey(e) { if (e.key === 'Escape') closeDetail(); }
 
+  // Curated explanations from the card GROUPS, keyed by metric name. Built
+  // once, lazily (GROUPS is defined above at module scope).
+  var _infoByKey = null;
+  function infoForKey(key) {
+    if (!_infoByKey) {
+      _infoByKey = {};
+      GROUPS.forEach(function (g) {
+        (g.items || []).forEach(function (it) { if (it.info) _infoByKey[it.key] = it.info; });
+      });
+    }
+    return _infoByKey[key] || '';
+  }
+
   function openDetail(name) {
     injectDetailStyles();
     closeDetail();
@@ -456,11 +472,15 @@
         rows.sort(function (a, b) { return a.name < b.name ? -1 : 1; });
         html += '<div class="ftw-hpd-group">' + escapeHtml(g) + '</div>';
         rows.forEach(function (m) {
-          html += '<div class="ftw-hpd-row">' +
+          var explain = infoForKey(m.name) || m.title || '';
+          html += '<div class="ftw-hpd-item">' +
+            '<div class="ftw-hpd-row">' +
             '<span class="ftw-hpd-label">' + escapeHtml(prettyLabel(m.name)) + '</span>' +
             '<span class="ftw-hpd-reg" title="Modbus register">' + (m.register ? escapeHtml(String(m.register)) : '—') + '</span>' +
             '<span class="ftw-hpd-val">' + escapeHtml(fmtValue(m.value, m.unit)) + '</span>' +
             '<span class="ftw-hpd-spark" data-spark-metric="' + escapeHtml(m.name) + '"></span>' +
+            '</div>' +
+            (explain ? '<div class="ftw-hpd-explain">' + escapeHtml(explain) + '</div>' : '') +
             '</div>';
         });
       });
diff --git a/web/index.html b/web/index.html
index b80a0bcc..8e4bff63 100644
--- a/web/index.html
+++ b/web/index.html
@@ -798,7 +798,7 @@ <h3>Price bars (top of the chart)</h3>
   <script src="/models.js?v=diag2"></script>
   <script src="/plan.js?v=diag2"></script>
   <script src="/twins.js?v=diag2"></script>
-  <script src="/heating.js?v=heat7"></script>
+  <script src="/heating.js?v=heat8"></script>
   <script src="/loadpoints.js?v=lp3"></script>
   <script src="/diagnose.js?v=diag2"></script>
   <script src="/update-badge.js?v=modal2" defer></script>

From 4fb25964f0f0d6a8621304c2e7f5716fd026974d Mon Sep 17 00:00:00 2001
From: "Claude Opus 4.8" <noreply@anthropic.com>
Date: Tue, 30 Jun 2026 08:23:45 +0200
Subject: [PATCH 11/19] fix(ui): heat-pump ? icons are tooltip-only + reveal
 local-API creds fields
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Card: clicking a ? help icon no longer navigates into the all-signals
detail (onGridClick ignores .ftw-hp-i); the native title tooltip explains the
metric in place. Devices tab: the local-HTTP Username + cert-fingerprint inputs
now use the same render-then-reveal pattern as the battery field, so they appear
for apicreds drivers (NIBE) even when the first render beats the async catalog
fetch — previously they were dropped. Tokens heat8->heat9, tabsplit3->tabsplit4.

Co-Authored-By: HuggeK <48095810+HuggeK@users.noreply.github.com>
---
 web/heating.js               |  3 +++
 web/index.html               |  4 ++--
 web/settings/tabs/devices.js | 21 +++++++++++++++------
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/web/heating.js b/web/heating.js
index 1f288dd5..19d42756 100644
--- a/web/heating.js
+++ b/web/heating.js
@@ -498,6 +498,9 @@
   }
 
   function onGridClick(e) {
+    // The ? help icons explain a metric in place (native tooltip) — a click on
+    // one must NOT navigate into the all-signals detail.
+    if (e.target.closest && e.target.closest('.ftw-hp-i')) return;
     var card = e.target.closest && e.target.closest('.ftw-hp-clickable');
     if (card && card.dataset.hpDriver) openDetail(card.dataset.hpDriver);
   }
diff --git a/web/index.html b/web/index.html
index 8e4bff63..e14fb0b6 100644
--- a/web/index.html
+++ b/web/index.html
@@ -784,7 +784,7 @@ <h3>Price bars (top of the chart)</h3>
   <script src="/settings.js?v=diag3"></script>
   <script src="/settings/tabs/control.js?v=tabsplit1"></script>
   <script src="/settings/tabs/access.js?v=access1"></script>
-  <script src="/settings/tabs/devices.js?v=tabsplit3"></script>
+  <script src="/settings/tabs/devices.js?v=tabsplit4"></script>
   <script src="/settings/tabs/loadpoints.js?v=lp2"></script>
   <script src="/settings/tabs/price.js?v=tabsplit1"></script>
   <script src="/settings/tabs/weather.js?v=tabsplit1"></script>
@@ -798,7 +798,7 @@ <h3>Price bars (top of the chart)</h3>
   <script src="/models.js?v=diag2"></script>
   <script src="/plan.js?v=diag2"></script>
   <script src="/twins.js?v=diag2"></script>
-  <script src="/heating.js?v=heat8"></script>
+  <script src="/heating.js?v=heat9"></script>
   <script src="/loadpoints.js?v=lp3"></script>
   <script src="/diagnose.js?v=diag2"></script>
   <script src="/update-badge.js?v=modal2" defer></script>
diff --git a/web/settings/tabs/devices.js b/web/settings/tabs/devices.js
index dd4ac7a2..08bb1add 100644
--- a/web/settings/tabs/devices.js
+++ b/web/settings/tabs/devices.js
@@ -151,20 +151,20 @@
           html += '<fieldset><legend>HTTP</legend>' +
             '<label>Host / IP ' + help('Hostname (e.g. zap.local) or IP address of the device. mDNS names work when your OS resolver supports them; otherwise use the LAN IP.') + '</label>' +
             '<input type="text" data-path="drivers.' + idx + '.config.host" value="' + escHtml(lcfg.host || '') + '" placeholder="zap.local">' +
-            (localCreds ?
+            '<div class="drv-local-creds" data-drv-lua="' + escHtml(d.lua || '') + '"' + (localCreds ? '' : ' hidden') + '>' +
               '<label style="margin-top:8px">Username ' + help('Username for the device\'s local API (HTTP Basic auth). For NIBE this is the local-API account you set up in the myUplink app.') + '</label>' +
-              '<input type="text" autocomplete="off" data-path="drivers.' + idx + '.config.username" value="' + escHtml(lcfg.username || '') + '" placeholder="local-api-user">'
-              : '') +
+              '<input type="text" autocomplete="off" data-path="drivers.' + idx + '.config.username" value="' + escHtml(lcfg.username || '') + '" placeholder="local-api-user">' +
+            '</div>' +
             '<label class="drv-disable-pv" data-drv-lua="' + escHtml(d.lua || '') + '" style="margin-top:8px;display:none;align-items:center;gap:6px;font-weight:normal">' +
               '<input type="checkbox" data-checkbox-path="drivers.' + idx + '.config.disable_pv"' +
               (lcfg.disable_pv ? ' checked' : '') + '>' +
               'Disable PV readings ' +
               help('Use this gateway for the P1 meter only. When another driver already owns PV aggregation, set this so the two drivers don\'t double-count generation.') +
             '</label>' +
-            (localCreds ?
+            '<div class="drv-local-creds" data-drv-lua="' + escHtml(d.lua || '') + '"' + (localCreds ? '' : ' hidden') + '>' +
               '<label style="margin-top:8px">Certificate fingerprint (SHA-256) ' + help('Pin the device\'s self-signed HTTPS certificate by its SHA-256 fingerprint (the "fingeravtryck" in the myUplink app, or from "openssl x509 -fingerprint -sha256"). 64 hex chars; colons and case are ignored. Leave empty for normal certificate verification.') + '</label>' +
-              '<input type="text" autocomplete="off" data-path="drivers.' + idx + '.capabilities.http.tls_pin_sha256" value="' + escHtml(pin) + '" placeholder="73d1ac81…bd9bf4eb (64 hex)" style="font-family:var(--mono);font-size:0.78rem">'
-              : '') +
+              '<input type="text" autocomplete="off" data-path="drivers.' + idx + '.capabilities.http.tls_pin_sha256" value="' + escHtml(pin) + '" placeholder="73d1ac81…bd9bf4eb (64 hex)" style="font-family:var(--mono);font-size:0.78rem">' +
+            '</div>' +
             '</fieldset>';
         }
         if (isApiCredsDriver) {
@@ -424,6 +424,15 @@
           wrap.hidden = !show;
           if (row) row.classList.toggle("field-row-single", !show);
         });
+        // Local-API credential fields (username + cert pin) reveal only for
+        // drivers whose catalog declares apicreds — done post-fetch so a first
+        // render before the catalog resolves doesn't drop them.
+        bodyEl.querySelectorAll(".drv-local-creds").forEach(function (wrap) {
+          var lua = wrap.getAttribute("data-drv-lua");
+          var entry = lua && byLua[lua];
+          var caps = (entry && entry.capabilities) || [];
+          wrap.hidden = caps.indexOf("apicreds") < 0;
+        });
         var sel = document.getElementById("driver-catalog-picker");
         if (!sel) return;
         sel.innerHTML = "";

From 4b27307eef0156e415f6299645db72d085306902 Mon Sep 17 00:00:00 2001
From: "Claude Opus 4.8" <noreply@anthropic.com>
Date: Tue, 30 Jun 2026 12:41:07 +0200
Subject: [PATCH 12/19] fix(ui): force-hide battery capacity for non-battery
 drivers

The battery field was relying on the [hidden] attribute, which any author
CSS rule on .field-row children can override. Switch to an inline display:none
(beats any selector) on both the initial render and the post-catalog toggle, so
the NIBE heat-pump (catalog caps: apicreds, no battery) never shows it. Token
tabsplit4->tabsplit5.

Co-Authored-By: HuggeK <48095810+HuggeK@users.noreply.github.com>
---
 web/index.html               | 2 +-
 web/settings/tabs/devices.js | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/web/index.html b/web/index.html
index e14fb0b6..66f945ea 100644
--- a/web/index.html
+++ b/web/index.html
@@ -784,7 +784,7 @@ <h3>Price bars (top of the chart)</h3>
   <script src="/settings.js?v=diag3"></script>
   <script src="/settings/tabs/control.js?v=tabsplit1"></script>
   <script src="/settings/tabs/access.js?v=access1"></script>
-  <script src="/settings/tabs/devices.js?v=tabsplit4"></script>
+  <script src="/settings/tabs/devices.js?v=tabsplit5"></script>
   <script src="/settings/tabs/loadpoints.js?v=lp2"></script>
   <script src="/settings/tabs/price.js?v=tabsplit1"></script>
   <script src="/settings/tabs/weather.js?v=tabsplit1"></script>
diff --git a/web/settings/tabs/devices.js b/web/settings/tabs/devices.js
index 08bb1add..7786de91 100644
--- a/web/settings/tabs/devices.js
+++ b/web/settings/tabs/devices.js
@@ -62,7 +62,7 @@
           '<div class="field-row device-core-row' + (supportsBattery ? '' : ' field-row-single') + '"><div>' +
           '<label>Driver file ' + help('Path to the .lua driver. Absolute or relative to the config file directory.') + '</label>' +
           '<input type="text" data-path="drivers.' + idx + '.lua" value="' + escHtml(driverFile) + '">' +
-          '</div><div class="driver-battery-capacity" data-drv-lua="' + escHtml(d.lua || '') + '"' + (supportsBattery ? '' : ' hidden') + '>' +
+          '</div><div class="driver-battery-capacity" data-drv-lua="' + escHtml(d.lua || '') + '"' + (supportsBattery ? '' : ' hidden style="display:none"') + '>' +
           '<label>Battery capacity (kWh) ' + help('Nameplate storage capacity in kilowatt-hours. Stored internally as Wh.') + '</label>' +
           '<input type="number" step="0.1" data-path="drivers.' + idx + '.battery_capacity_wh" data-unit-scale="1000" value="' + ((d.battery_capacity_wh || 0) / 1000) + '">' +
           '</div></div>' +
@@ -422,6 +422,7 @@
           var caps = (entry && entry.capabilities) || [];
           var show = caps.indexOf("battery") >= 0;
           wrap.hidden = !show;
+          wrap.style.display = show ? "" : "none";
           if (row) row.classList.toggle("field-row-single", !show);
         });
         // Local-API credential fields (username + cert pin) reveal only for

From d8e3ef209ab3407f8d1aab4423033b22e93eaf3e Mon Sep 17 00:00:00 2001
From: "Claude Opus 4.8" <noreply@anthropic.com>
Date: Tue, 30 Jun 2026 13:50:53 +0200
Subject: [PATCH 13/19] =?UTF-8?q?fix(ui):=20secret=20badge=20says=20'Set?=
 =?UTF-8?q?=20=E2=80=94=20not=20shown=20here'=20instead=20of=20'Not=20save?=
 =?UTF-8?q?d'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Pairs with the api fix that placeholders a set-but-blanked driver config
secret: /api/config now returns the masked placeholder for a saved password, so
the badge reads as set. Reworded so a masked secret isn't mistaken for missing.
Token tabsplit5->tabsplit6.

Co-Authored-By: HuggeK <48095810+HuggeK@users.noreply.github.com>
---
 web/index.html               | 2 +-
 web/settings/tabs/devices.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/index.html b/web/index.html
index 66f945ea..af39b1b0 100644
--- a/web/index.html
+++ b/web/index.html
@@ -784,7 +784,7 @@ <h3>Price bars (top of the chart)</h3>
   <script src="/settings.js?v=diag3"></script>
   <script src="/settings/tabs/control.js?v=tabsplit1"></script>
   <script src="/settings/tabs/access.js?v=access1"></script>
-  <script src="/settings/tabs/devices.js?v=tabsplit5"></script>
+  <script src="/settings/tabs/devices.js?v=tabsplit6"></script>
   <script src="/settings/tabs/loadpoints.js?v=lp2"></script>
   <script src="/settings/tabs/price.js?v=tabsplit1"></script>
   <script src="/settings/tabs/weather.js?v=tabsplit1"></script>
diff --git a/web/settings/tabs/devices.js b/web/settings/tabs/devices.js
index 7786de91..df7815a6 100644
--- a/web/settings/tabs/devices.js
+++ b/web/settings/tabs/devices.js
@@ -392,8 +392,8 @@
             // pattern instead: empty input + saved/missing badge.
             var saved = typeof dcfg[key] === "string" && dcfg[key] !== "";
             var badge = saved
-              ? '<span class="creds-badge creds-saved">✓ Saved</span>'
-              : '<span class="creds-badge creds-missing">⚠ Not saved</span>';
+              ? '<span class="creds-badge creds-saved">✓ Set — not shown here</span>'
+              : '<span class="creds-badge creds-missing">⚠ Not set</span>';
             var placeholder = saved
               ? "•••••••• (leave empty to keep)"
               : "Paste from device web UI";

From aa46accc6fcb4ef56138c23688e2fdf7bbad73e7 Mon Sep 17 00:00:00 2001
From: "Claude Opus 4.8" <noreply@anthropic.com>
Date: Tue, 30 Jun 2026 13:54:09 +0200
Subject: [PATCH 14/19] fix(ui): honour has_password flag so a saved password
 reads as set

The api blanks config.password but exposes a driver-level has_password
flag (config.go MaskSecrets). The Secrets badge only checked the blanked
config value, so a saved NIBE password showed as unset. Read has_password for
the password key. No backend change needed. Token tabsplit6->tabsplit7.

Co-Authored-By: HuggeK <48095810+HuggeK@users.noreply.github.com>
---
 web/index.html               | 2 +-
 web/settings/tabs/devices.js | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/web/index.html b/web/index.html
index af39b1b0..6f786afb 100644
--- a/web/index.html
+++ b/web/index.html
@@ -784,7 +784,7 @@ <h3>Price bars (top of the chart)</h3>
   <script src="/settings.js?v=diag3"></script>
   <script src="/settings/tabs/control.js?v=tabsplit1"></script>
   <script src="/settings/tabs/access.js?v=access1"></script>
-  <script src="/settings/tabs/devices.js?v=tabsplit6"></script>
+  <script src="/settings/tabs/devices.js?v=tabsplit7"></script>
   <script src="/settings/tabs/loadpoints.js?v=lp2"></script>
   <script src="/settings/tabs/price.js?v=tabsplit1"></script>
   <script src="/settings/tabs/weather.js?v=tabsplit1"></script>
diff --git a/web/settings/tabs/devices.js b/web/settings/tabs/devices.js
index df7815a6..064402bc 100644
--- a/web/settings/tabs/devices.js
+++ b/web/settings/tabs/devices.js
@@ -390,7 +390,12 @@
             // GET), but inserting any value into a `value=""` attribute
             // exposes it in the DOM/HTML. Mirror the cloud-password
             // pattern instead: empty input + saved/missing badge.
-            var saved = typeof dcfg[key] === "string" && dcfg[key] !== "";
+            // config_secrets come back masked: a non-empty value means the api
+            // sent the placeholder (e.g. api_token). For the "password" key the
+            // api blanks config.password but sets the driver-level has_password
+            // flag, so honour that too — otherwise a saved password reads as unset.
+            var saved = (typeof dcfg[key] === "string" && dcfg[key] !== "") ||
+                        (key === "password" && d.has_password === true);
             var badge = saved
               ? '<span class="creds-badge creds-saved">✓ Set — not shown here</span>'
               : '<span class="creds-badge creds-missing">⚠ Not set</span>';

From d296d07f542738310bc1cda1fc54d918f8a67494 Mon Sep 17 00:00:00 2001
From: "Claude Opus 4.8" <noreply@anthropic.com>
Date: Tue, 30 Jun 2026 15:49:11 +0200
Subject: [PATCH 15/19] feat(ui): add temperature + date axes to the heat-pump
 chart
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The 30-day temp chart had only faint gridlines (and the SVG text it did
have was stretched by preserveAspectRatio=none). Render a proper y-axis (°C,
top/mid/bottom) and x-axis (dates across the span) as HTML around the SVG so the
labels stay crisp. heat9->heat10.

Co-Authored-By: HuggeK <48095810+HuggeK@users.noreply.github.com>
---
 web/heating.js | 29 ++++++++++++++++++++---------
 web/index.html |  2 +-
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/web/heating.js b/web/heating.js
index 19d42756..b33ffd48 100644
--- a/web/heating.js
+++ b/web/heating.js
@@ -117,7 +117,10 @@
       '.ftw-hp-spark{display:flex;flex-direction:column;gap:4px}',
       '.ftw-hp-spark-label{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-muted)}',
       '.ftw-hp-spark svg{width:100%;height:48px;display:block}',
-      '.ftw-hp-tchart{width:100%;height:150px;display:block}',
+      '.ftw-hp-chartrow{display:flex;gap:6px;align-items:stretch}',
+      '.ftw-hp-tchart{flex:1;min-width:0;height:150px;display:block}',
+      '.ftw-hp-yax{display:flex;flex-direction:column;justify-content:space-between;text-align:right;min-width:26px;padding:6px 0;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:0.6rem;color:var(--fg-muted)}',
+      '.ftw-hp-xax{display:flex;justify-content:space-between;margin:3px 0 0 32px;font-family:var(--mono);font-size:0.6rem;color:var(--fg-muted)}',
       '.ftw-hp-legend{display:flex;gap:14px;flex-wrap:wrap}',
       '.ftw-hp-leg{font-family:var(--mono);font-size:0.62rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--fg-muted);display:inline-flex;align-items:center;gap:4px}',
       '.ftw-hp-leg-dot{width:8px;height:8px;border-radius:2px;display:inline-block}',
@@ -200,7 +203,7 @@
     var all = [];
     lines.forEach(function (l) { l.points.forEach(function (p) { if (p && p.v != null) all.push(p); }); });
     if (all.length < 2) return '';
-    var w = 600, h = 150, padL = 26, padR = 6, padT = 8, padB = 14;
+    var w = 600, h = 150, padR = 4, padL = 2, padT = 6, padB = 6;
     var ts = all.map(function (p) { return p.ts; });
     var vs = all.map(function (p) { return p.v; });
     var t0 = Math.min.apply(null, ts), t1 = Math.max.apply(null, ts), tspan = (t1 - t0) || 1;
@@ -209,11 +212,11 @@
     var vspan = (vMax - vMin) || 1;
     function X(t) { return (padL + (t - t0) / tspan * (w - padL - padR)).toFixed(1); }
     function Y(v) { return (padT + (1 - (v - vMin) / vspan) * (h - padT - padB)).toFixed(1); }
-    var grid = '';
-    [vMin, (vMin + vMax) / 2, vMax].forEach(function (v) {
-      grid += '<line x1="' + padL + '" y1="' + Y(v) + '" x2="' + (w - padR) + '" y2="' + Y(v) + '" stroke="var(--line)" stroke-width="0.5"/>' +
-        '<text x="2" y="' + (parseFloat(Y(v)) + 3).toFixed(1) + '" fill="var(--fg-muted)" font-size="8" font-family="monospace">' + v.toFixed(0) + '</text>';
-    });
+    // Gridlines only — axis labels are HTML (below/left) so they don't distort
+    // under preserveAspectRatio="none".
+    var grid = [vMin, (vMin + vMax) / 2, vMax].map(function (v) {
+      return '<line x1="' + padL + '" y1="' + Y(v) + '" x2="' + (w - padR) + '" y2="' + Y(v) + '" stroke="var(--line)" stroke-width="0.5"/>';
+    }).join('');
     var paths = lines.map(function (l) {
       var pp = l.points.filter(function (p) { return p && p.v != null; });
       if (pp.length < 2) return '';
@@ -223,9 +226,17 @@
     var legend = TCHART.map(function (s) {
       return '<span class="ftw-hp-leg"><span class="ftw-hp-leg-dot" style="background:' + s.color + '"></span>' + s.label + '</span>';
     }).join('');
-    return '<div class="ftw-hp-group"><div class="ftw-hp-group-title">Temperatures · 30 days</div>' +
+    var yax = [vMax, (vMin + vMax) / 2, vMin].map(function (v) {
+      return '<span>' + Math.round(v) + '°</span>';
+    }).join('');
+    var fmtDate = function (t) { return new Date(t).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }); };
+    var xticks = 4, xax = '';
+    for (var xi = 0; xi < xticks; xi++) { xax += '<span>' + escapeHtml(fmtDate(t0 + tspan * xi / (xticks - 1))) + '</span>'; }
+    return '<div class="ftw-hp-group"><div class="ftw-hp-group-title">Temperatures (°C)</div>' +
       '<div class="ftw-hp-legend">' + legend + '</div>' +
-      '<svg viewBox="0 0 ' + w + ' ' + h + '" preserveAspectRatio="none" class="ftw-hp-tchart" aria-hidden="true">' + grid + paths + '</svg>' +
+      '<div class="ftw-hp-chartrow"><div class="ftw-hp-yax">' + yax + '</div>' +
+      '<svg viewBox="0 0 ' + w + ' ' + h + '" preserveAspectRatio="none" class="ftw-hp-tchart" aria-hidden="true">' + grid + paths + '</svg></div>' +
+      '<div class="ftw-hp-xax">' + xax + '</div>' +
       '</div>';
   }
 
diff --git a/web/index.html b/web/index.html
index 6f786afb..b414448d 100644
--- a/web/index.html
+++ b/web/index.html
@@ -798,7 +798,7 @@ <h3>Price bars (top of the chart)</h3>
   <script src="/models.js?v=diag2"></script>
   <script src="/plan.js?v=diag2"></script>
   <script src="/twins.js?v=diag2"></script>
-  <script src="/heating.js?v=heat9"></script>
+  <script src="/heating.js?v=heat10"></script>
   <script src="/loadpoints.js?v=lp3"></script>
   <script src="/diagnose.js?v=diag2"></script>
   <script src="/update-badge.js?v=modal2" defer></script>

From 8d2e094482d567dc04b8e75264f4a4a1d3bd71f0 Mon Sep 17 00:00:00 2001
From: "Claude Opus 4.8" <noreply@anthropic.com>
Date: Tue, 30 Jun 2026 20:44:33 +0200
Subject: [PATCH 16/19] feat(ui): give the compressor 24h strip real axes (kW +
 time)

Replace the axis-less sparkline on the card with a dedicated powerChartBlock:
0-based kW y-axis + HH:MM time x-axis, reusing the temp chart's HTML-axis layout.
sparkline() is untouched so the ~937 tiny per-signal detail charts stay minimal.
heat10->heat11.

Co-Authored-By: HuggeK <48095810+HuggeK@users.noreply.github.com>
---
 web/heating.js | 39 +++++++++++++++++++++++++++++++++++----
 web/index.html |  2 +-
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/web/heating.js b/web/heating.js
index b33ffd48..c55ed847 100644
--- a/web/heating.js
+++ b/web/heating.js
@@ -119,6 +119,7 @@
       '.ftw-hp-spark svg{width:100%;height:48px;display:block}',
       '.ftw-hp-chartrow{display:flex;gap:6px;align-items:stretch}',
       '.ftw-hp-tchart{flex:1;min-width:0;height:150px;display:block}',
+      '.ftw-hp-pchart{flex:1;min-width:0;height:90px;display:block}',
       '.ftw-hp-yax{display:flex;flex-direction:column;justify-content:space-between;text-align:right;min-width:26px;padding:6px 0;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:0.6rem;color:var(--fg-muted)}',
       '.ftw-hp-xax{display:flex;justify-content:space-between;margin:3px 0 0 32px;font-family:var(--mono);font-size:0.6rem;color:var(--fg-muted)}',
       '.ftw-hp-legend{display:flex;gap:14px;flex-wrap:wrap}',
@@ -240,6 +241,39 @@
       '</div>';
   }
 
+  // Compressor power over 24h as its own mini-chart (0-based kW y-axis + time
+  // x-axis). Separate from sparkline() so the ~937 tiny detail sparklines stay
+  // axis-free.
+  function powerChartBlock(points) {
+    var pts = (points || []).filter(function (p) { return p && p.v != null; });
+    if (pts.length < 2) return '';
+    var w = 600, h = 90, padR = 4, padL = 2, padT = 6, padB = 6;
+    var ts = pts.map(function (p) { return p.ts; });
+    var t0 = Math.min.apply(null, ts), t1 = Math.max.apply(null, ts), tspan = (t1 - t0) || 1;
+    var vMax = Math.max.apply(null, pts.map(function (p) { return p.v; })) || 1;
+    var vspan = vMax || 1;
+    function X(t) { return (padL + (t - t0) / tspan * (w - padL - padR)).toFixed(1); }
+    function Y(v) { return (padT + (1 - v / vspan) * (h - padT - padB)).toFixed(1); }
+    var grid = [0, vMax / 2, vMax].map(function (v) {
+      return '<line x1="' + padL + '" y1="' + Y(v) + '" x2="' + (w - padR) + '" y2="' + Y(v) + '" stroke="var(--line)" stroke-width="0.5"/>';
+    }).join('');
+    var d = pts.map(function (p, i) { return (i ? 'L' : 'M') + X(p.ts) + ',' + Y(p.v); }).join(' ');
+    var area = 'M' + X(pts[0].ts) + ',' + Y(0) + ' ' +
+      pts.map(function (p) { return 'L' + X(p.ts) + ',' + Y(p.v); }).join(' ') +
+      ' L' + X(pts[pts.length - 1].ts) + ',' + Y(0) + ' Z';
+    var line = '<path d="' + area + '" fill="var(--accent-e)" fill-opacity="0.12"/>' +
+      '<path d="' + d + '" fill="none" stroke="var(--accent-e)" stroke-width="1.4" stroke-linejoin="round"/>';
+    var yax = [vMax, vMax / 2, 0].map(function (v) { return '<span>' + (v / 1000).toFixed(1) + '</span>'; }).join('');
+    var fmtTime = function (t) { return new Date(t).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false }); };
+    var xticks = 4, xax = '';
+    for (var xi = 0; xi < xticks; xi++) { xax += '<span>' + escapeHtml(fmtTime(t0 + tspan * xi / (xticks - 1))) + '</span>'; }
+    return '<div class="ftw-hp-group"><div class="ftw-hp-group-title">Compressor power (kW) · 24h</div>' +
+      '<div class="ftw-hp-chartrow"><div class="ftw-hp-yax">' + yax + '</div>' +
+      '<svg viewBox="0 0 ' + w + ' ' + h + '" preserveAspectRatio="none" class="ftw-hp-pchart" aria-hidden="true">' + grid + line + '</svg></div>' +
+      '<div class="ftw-hp-xax">' + xax + '</div>' +
+      '</div>';
+  }
+
   // ── Energy per calendar period, from the lifetime kWh counters ───
   // delta = current − value at the period boundary; null when the logged
   // history doesn't reach back that far (shown as "accumulating").
@@ -297,10 +331,7 @@
       return '<div class="ftw-hp-group"><div class="ftw-hp-group-title">' + escapeHtml(g.title) + '</div>' +
         '<div class="ftw-hp-tiles">' + tiles + '</div></div>';
     }).join('');
-    var spark = sparkline(sparkPoints);
-    var sparkBlock = spark
-      ? '<div class="ftw-hp-spark"><span class="ftw-hp-spark-label">Compressor power · 24h</span>' + spark + '</div>'
-      : '';
+    var sparkBlock = powerChartBlock(sparkPoints);
     // The whole card is a button into the detail view (all signals + register).
     return '<div class="ftw-hp ftw-hp-clickable" data-hp-driver="' + escapeHtml(name) + '" role="button" tabindex="0" title="View all signals">' +
       '<div class="ftw-hp-head"><span class="ftw-hp-name">' + escapeHtml(name) + '</span>' +
diff --git a/web/index.html b/web/index.html
index b414448d..cf00e3d9 100644
--- a/web/index.html
+++ b/web/index.html
@@ -798,7 +798,7 @@ <h3>Price bars (top of the chart)</h3>
   <script src="/models.js?v=diag2"></script>
   <script src="/plan.js?v=diag2"></script>
   <script src="/twins.js?v=diag2"></script>
-  <script src="/heating.js?v=heat10"></script>
+  <script src="/heating.js?v=heat11"></script>
   <script src="/loadpoints.js?v=lp3"></script>
   <script src="/diagnose.js?v=diag2"></script>
   <script src="/update-badge.js?v=modal2" defer></script>

From 354052582ccfa2908159c2bc5a4b25e5a9b5f2cc Mon Sep 17 00:00:00 2001
From: "Claude Opus 4.8" <noreply@anthropic.com>
Date: Wed, 1 Jul 2026 10:54:47 +0200
Subject: [PATCH 17/19] feat(ui): min/max value scale + 24h context on
 all-signals sparklines

The ~937 detail sparklines were unlabelled. Add a compact per-sparkline
min/max (its y-scale) beside each, widen the trend column to fit, and note the
shared 24h window in a modal subtitle. sparkline() stays shared/minimal.
heat11->heat12.

Co-Authored-By: HuggeK <48095810+HuggeK@users.noreply.github.com>
---
 web/heating.js | 26 +++++++++++++++++++++++---
 web/index.html |  2 +-
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/web/heating.js b/web/heating.js
index c55ed847..a846633f 100644
--- a/web/heating.js
+++ b/web/heating.js
@@ -445,13 +445,16 @@
       '.ftw-hpd-close{background:none;border:1px solid var(--line);color:var(--fg);border-radius:6px;cursor:pointer;font-size:1rem;line-height:1;padding:4px 9px}',
       '.ftw-hpd-group{margin:16px 0 4px;font-family:var(--mono);font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-e)}',
       '.ftw-hpd-item{padding:6px 0;border-bottom:1px solid var(--line-soft,var(--line))}',
-      '.ftw-hpd-row{display:grid;grid-template-columns:1fr auto auto 120px;gap:10px 14px;align-items:center}',
+      '.ftw-hpd-row{display:grid;grid-template-columns:1fr auto auto 150px;gap:10px 14px;align-items:center}',
+      '.ftw-hpd-sub{font-family:var(--mono);font-size:0.62rem;color:var(--fg-muted);margin:-6px 0 12px;letter-spacing:0.02em}',
       '.ftw-hpd-explain{font-size:0.74rem;color:var(--fg-muted);line-height:1.35;margin-top:3px;max-width:66ch}',
       '.ftw-hpd-explain::before{content:"↳ ";opacity:0.55}',
       '.ftw-hpd-label{color:var(--fg-muted);font-size:0.85rem}',
       '.ftw-hpd-reg{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:0.76rem;color:var(--fg-muted);text-align:right;opacity:0.8}',
       '.ftw-hpd-val{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--fg);text-align:right}',
-      '.ftw-hpd-spark svg{width:120px;height:24px;display:block}',
+      '.ftw-hpd-spark{display:flex;align-items:center;gap:5px}',
+      '.ftw-hpd-spark svg{flex:1;min-width:0;height:24px;display:block}',
+      '.ftw-hpd-yr{display:flex;flex-direction:column;justify-content:space-between;height:22px;min-width:30px;text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:0.52rem;line-height:1;color:var(--fg-muted)}',
       '.ftw-hpd-empty{color:var(--fg-muted);font-family:var(--mono);font-size:0.82rem}',
     ].join('');
     var el = document.createElement('style');
@@ -480,6 +483,15 @@
     return _infoByKey[key] || '';
   }
 
+  // Compact number for the sparkline min/max scale (keeps the 150px column tight).
+  function sparkNum(v) {
+    var a = Math.abs(v);
+    if (a >= 10000) return Math.round(v / 1000) + 'k';
+    if (a >= 1000) return (v / 1000).toFixed(1) + 'k';
+    if (a >= 10) return Math.round(v).toString();
+    return v.toFixed(1);
+  }
+
   function openDetail(name) {
     injectDetailStyles();
     closeDetail();
@@ -489,6 +501,7 @@
     backdrop.innerHTML = '<div class="ftw-hpd">' +
       '<div class="ftw-hpd-top"><span class="ftw-hpd-title">Heat pump · ' + escapeHtml(name) + '</span>' +
       '<button class="ftw-hpd-close" type="button" aria-label="Close">✕</button></div>' +
+      '<div class="ftw-hpd-sub">Trend column = last 24 h · the two small figures are its min / max over that window.</div>' +
       '<div id="ftw-hpd-body"><div class="ftw-hpd-empty">Loading signals…</div></div></div>';
     backdrop.addEventListener('click', function (e) { if (e.target === backdrop) closeDetail(); });
     backdrop.querySelector('.ftw-hpd-close').addEventListener('click', closeDetail);
@@ -533,7 +546,14 @@
         fetchJSON('/api/series?driver=' + encodeURIComponent(name) + '&metric=' + encodeURIComponent(m.name) + '&range=24h&points=120')
           .then(function (s) {
             var slot = body.querySelector('.ftw-hpd-spark[data-spark-metric="' + (window.CSS && CSS.escape ? CSS.escape(m.name) : m.name) + '"]');
-            if (slot) slot.innerHTML = sparkline((s && s.points) || []);
+            if (!slot) return;
+            var pp = (s && s.points) || [];
+            var vals = pp.map(function (p) { return p.v; }).filter(function (v) { return v != null; });
+            var yr = vals.length
+              ? '<span class="ftw-hpd-yr"><span>' + escapeHtml(sparkNum(Math.max.apply(null, vals))) + '</span>' +
+                '<span>' + escapeHtml(sparkNum(Math.min.apply(null, vals))) + '</span></span>'
+              : '';
+            slot.innerHTML = sparkline(pp) + yr;
           });
       });
     });
diff --git a/web/index.html b/web/index.html
index cf00e3d9..7165b2bd 100644
--- a/web/index.html
+++ b/web/index.html
@@ -798,7 +798,7 @@ <h3>Price bars (top of the chart)</h3>
   <script src="/models.js?v=diag2"></script>
   <script src="/plan.js?v=diag2"></script>
   <script src="/twins.js?v=diag2"></script>
-  <script src="/heating.js?v=heat11"></script>
+  <script src="/heating.js?v=heat12"></script>
   <script src="/loadpoints.js?v=lp3"></script>
   <script src="/diagnose.js?v=diag2"></script>
   <script src="/update-badge.js?v=modal2" defer></script>

From 61579e9d92c707b5f99effd5a856b682055d2323 Mon Sep 17 00:00:00 2001
From: "Claude Opus 4.8" <noreply@anthropic.com>
Date: Wed, 1 Jul 2026 11:01:44 +0200
Subject: [PATCH 18/19] feat(ui): power breakdown chart, extract-air line, BT
 labels + data timestamp

Heat-pump card: (1) the 24h power chart now plots Total drawn / Compressor /
Internal add. heat (kW, with legend) instead of compressor-only; (2) the temp
chart gains an Extract air (BT20) line and BT sensor codes in the legend
(Outdoor BT1 / Supply BT2 / Return BT3), plus a 'supply/return = the heating loop
(in-floor / radiators)' subtitle; (3) a 'data as of <time>' stamp under the card
header showing the latest poll. heat12->heat13.

Co-Authored-By: HuggeK <48095810+HuggeK@users.noreply.github.com>
---
 web/heating.js | 83 ++++++++++++++++++++++++++++++++++----------------
 web/index.html |  2 +-
 2 files changed, 58 insertions(+), 27 deletions(-)

diff --git a/web/heating.js b/web/heating.js
index a846633f..564ebfd0 100644
--- a/web/heating.js
+++ b/web/heating.js
@@ -123,6 +123,8 @@
       '.ftw-hp-yax{display:flex;flex-direction:column;justify-content:space-between;text-align:right;min-width:26px;padding:6px 0;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:0.6rem;color:var(--fg-muted)}',
       '.ftw-hp-xax{display:flex;justify-content:space-between;margin:3px 0 0 32px;font-family:var(--mono);font-size:0.6rem;color:var(--fg-muted)}',
       '.ftw-hp-legend{display:flex;gap:14px;flex-wrap:wrap}',
+      '.ftw-hp-chartsub{font-family:var(--sans);font-size:0.72rem;color:var(--fg-muted);margin:-2px 0 6px}',
+      '.ftw-hp-asof{font-family:var(--mono);font-size:0.62rem;letter-spacing:0.04em;color:var(--fg-muted);margin:-4px 0 10px}',
       '.ftw-hp-leg{font-family:var(--mono);font-size:0.62rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--fg-muted);display:inline-flex;align-items:center;gap:4px}',
       '.ftw-hp-leg-dot{width:8px;height:8px;border-radius:2px;display:inline-block}',
       '.ftw-hp-erow{display:grid;grid-template-columns:1fr auto auto;gap:7px 18px;align-items:baseline}',
@@ -194,9 +196,10 @@
   // Multi-line SVG; line hues are fixed (read on both themes), axis chrome
   // uses theme tokens. Spans whatever history exists (fills toward a month).
   var TCHART = [
-    { key: 'outdoor', label: 'Outdoor', color: '#38bdf8' },
-    { key: 'supply',  label: 'Supply',  color: '#ef4444' },
-    { key: 'ret',     label: 'Return',  color: '#22c55e' },
+    { key: 'outdoor', label: 'Outdoor (BT1)', color: '#38bdf8' },
+    { key: 'supply',  label: 'Supply (BT2)',  color: '#ef4444' },
+    { key: 'ret',     label: 'Return (BT3)',  color: '#22c55e' },
+    { key: 'extract', label: 'Extract air (BT20)', color: '#a78bfa' },
   ];
   function tempChartBlock(temps) {
     if (!temps) return '';
@@ -234,6 +237,7 @@
     var xticks = 4, xax = '';
     for (var xi = 0; xi < xticks; xi++) { xax += '<span>' + escapeHtml(fmtDate(t0 + tspan * xi / (xticks - 1))) + '</span>'; }
     return '<div class="ftw-hp-group"><div class="ftw-hp-group-title">Temperatures (°C)</div>' +
+      '<div class="ftw-hp-chartsub">Supply / return = the heating loop (in-floor / radiators)</div>' +
       '<div class="ftw-hp-legend">' + legend + '</div>' +
       '<div class="ftw-hp-chartrow"><div class="ftw-hp-yax">' + yax + '</div>' +
       '<svg viewBox="0 0 ' + w + ' ' + h + '" preserveAspectRatio="none" class="ftw-hp-tchart" aria-hidden="true">' + grid + paths + '</svg></div>' +
@@ -241,35 +245,50 @@
       '</div>';
   }
 
-  // Compressor power over 24h as its own mini-chart (0-based kW y-axis + time
-  // x-axis). Separate from sparkline() so the ~937 tiny detail sparklines stay
-  // axis-free.
-  function powerChartBlock(points) {
-    var pts = (points || []).filter(function (p) { return p && p.v != null; });
-    if (pts.length < 2) return '';
+  // Power over 24h — Total drawn / Compressor / Internal add. heat, all in kW.
+  // Separate from sparkline() so the ~937 tiny detail sparklines stay axis-free.
+  var PCHART = [
+    { key: 'total',      label: 'Total drawn',        color: 'var(--accent-e)', scale: 1 },
+    { key: 'compressor', label: 'Compressor',         color: '#38bdf8', scale: 0.001 },
+    { key: 'internal',   label: 'Internal add. heat', color: '#f472b6', scale: 1 },
+  ];
+  function powerChartBlock(power) {
+    if (!power) return '';
+    var lines = PCHART.map(function (s) {
+      return { color: s.color, points: (power[s.key] || []).map(function (p) {
+        return { ts: p.ts, v: p.v == null ? null : p.v * s.scale };
+      }) };
+    });
+    var all = [];
+    lines.forEach(function (l) { l.points.forEach(function (p) { if (p && p.v != null) all.push(p); }); });
+    if (all.length < 2) return '';
     var w = 600, h = 90, padR = 4, padL = 2, padT = 6, padB = 6;
-    var ts = pts.map(function (p) { return p.ts; });
+    var ts = all.map(function (p) { return p.ts; });
     var t0 = Math.min.apply(null, ts), t1 = Math.max.apply(null, ts), tspan = (t1 - t0) || 1;
-    var vMax = Math.max.apply(null, pts.map(function (p) { return p.v; })) || 1;
+    var vMax = Math.max(Math.max.apply(null, all.map(function (p) { return p.v; })) || 1, 0.1);
     var vspan = vMax || 1;
     function X(t) { return (padL + (t - t0) / tspan * (w - padL - padR)).toFixed(1); }
     function Y(v) { return (padT + (1 - v / vspan) * (h - padT - padB)).toFixed(1); }
     var grid = [0, vMax / 2, vMax].map(function (v) {
       return '<line x1="' + padL + '" y1="' + Y(v) + '" x2="' + (w - padR) + '" y2="' + Y(v) + '" stroke="var(--line)" stroke-width="0.5"/>';
     }).join('');
-    var d = pts.map(function (p, i) { return (i ? 'L' : 'M') + X(p.ts) + ',' + Y(p.v); }).join(' ');
-    var area = 'M' + X(pts[0].ts) + ',' + Y(0) + ' ' +
-      pts.map(function (p) { return 'L' + X(p.ts) + ',' + Y(p.v); }).join(' ') +
-      ' L' + X(pts[pts.length - 1].ts) + ',' + Y(0) + ' Z';
-    var line = '<path d="' + area + '" fill="var(--accent-e)" fill-opacity="0.12"/>' +
-      '<path d="' + d + '" fill="none" stroke="var(--accent-e)" stroke-width="1.4" stroke-linejoin="round"/>';
-    var yax = [vMax, vMax / 2, 0].map(function (v) { return '<span>' + (v / 1000).toFixed(1) + '</span>'; }).join('');
+    var paths = lines.map(function (l) {
+      var pp = l.points.filter(function (p) { return p && p.v != null; });
+      if (pp.length < 2) return '';
+      var d = pp.map(function (p, i) { return (i ? 'L' : 'M') + X(p.ts) + ',' + Y(p.v); }).join(' ');
+      return '<path d="' + d + '" fill="none" stroke="' + l.color + '" stroke-width="1.4" stroke-linejoin="round"/>';
+    }).join('');
+    var legend = PCHART.map(function (s) {
+      return '<span class="ftw-hp-leg"><span class="ftw-hp-leg-dot" style="background:' + s.color + '"></span>' + s.label + '</span>';
+    }).join('');
+    var yax = [vMax, vMax / 2, 0].map(function (v) { return '<span>' + v.toFixed(1) + '</span>'; }).join('');
     var fmtTime = function (t) { return new Date(t).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false }); };
     var xticks = 4, xax = '';
     for (var xi = 0; xi < xticks; xi++) { xax += '<span>' + escapeHtml(fmtTime(t0 + tspan * xi / (xticks - 1))) + '</span>'; }
-    return '<div class="ftw-hp-group"><div class="ftw-hp-group-title">Compressor power (kW) · 24h</div>' +
+    return '<div class="ftw-hp-group"><div class="ftw-hp-group-title">Power (kW) · 24h</div>' +
+      '<div class="ftw-hp-legend">' + legend + '</div>' +
       '<div class="ftw-hp-chartrow"><div class="ftw-hp-yax">' + yax + '</div>' +
-      '<svg viewBox="0 0 ' + w + ' ' + h + '" preserveAspectRatio="none" class="ftw-hp-pchart" aria-hidden="true">' + grid + line + '</svg></div>' +
+      '<svg viewBox="0 0 ' + w + ' ' + h + '" preserveAspectRatio="none" class="ftw-hp-pchart" aria-hidden="true">' + grid + paths + '</svg></div>' +
       '<div class="ftw-hp-xax">' + xax + '</div>' +
       '</div>';
   }
@@ -324,22 +343,30 @@
       '</div>';
   }
 
-  function renderPump(name, detail, sparkPoints, temps, energy) {
+  function renderPump(name, detail, sparkPoints, temps, energy, power) {
     var m = metricMap(detail && detail.metrics);
     var groups = GROUPS.map(function (g) {
       var tiles = g.items.map(function (def) { return tileHtml(def, m); }).join('');
       return '<div class="ftw-hp-group"><div class="ftw-hp-group-title">' + escapeHtml(g.title) + '</div>' +
         '<div class="ftw-hp-tiles">' + tiles + '</div></div>';
     }).join('');
-    var sparkBlock = powerChartBlock(sparkPoints);
+    var powerBlock = powerChartBlock(power);
+    // Freshness: newest updated_at across the reported metrics (one poll).
+    var latest = 0;
+    ((detail && detail.metrics) || []).forEach(function (x) {
+      var t = x.updated_at ? Date.parse(x.updated_at) : 0; if (t > latest) latest = t;
+    });
+    var asof = latest ? '<div class="ftw-hp-asof">data as of ' +
+      escapeHtml(new Date(latest).toLocaleString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false })) + '</div>' : '';
     // The whole card is a button into the detail view (all signals + register).
     return '<div class="ftw-hp ftw-hp-clickable" data-hp-driver="' + escapeHtml(name) + '" role="button" tabindex="0" title="View all signals">' +
       '<div class="ftw-hp-head"><span class="ftw-hp-name">' + escapeHtml(name) + '</span>' +
       '<span class="ftw-hp-more">All signals →</span></div>' +
+      asof +
       groups +
       energyPeriodsBlock(energy) +
       tempChartBlock(temps) +
-      sparkBlock +
+      powerBlock +
       '</div>';
   }
 
@@ -384,11 +411,15 @@
           ser('hp_return_line_bt3', '30d', 400),
           ser('hp_energy_consumed_kwh', '366d', 800),
           ser('hp_energy_produced_kwh', '366d', 800),
+          ser('hp_fr_nluft_bt20', '30d', 400),
+          ser('hp_energy_log_current_power_consumption', '24h', 200),
+          ser('hp_power_internal_additional_heat', '24h', 200),
         ]).then(function (parts) {
           var pp = function (r) { return (r && r.points) || []; };
           return { name: n, detail: parts[0], series: pp(parts[1]),
-            temps: { outdoor: pp(parts[2]), supply: pp(parts[3]), ret: pp(parts[4]) },
-            energy: { consumed: pp(parts[5]), produced: pp(parts[6]) } };
+            temps: { outdoor: pp(parts[2]), supply: pp(parts[3]), ret: pp(parts[4]), extract: pp(parts[7]) },
+            energy: { consumed: pp(parts[5]), produced: pp(parts[6]) },
+            power: { compressor: pp(parts[1]), total: pp(parts[8]), internal: pp(parts[9]) } };
         });
       })).then(function (pumps) {
         var live = pumps.filter(function (p) { return p.detail && isHeatPump(p.detail); });
@@ -396,7 +427,7 @@
         injectStyles();
         section.hidden = false;
         grid.innerHTML = live.map(function (p) {
-          return renderPump(p.name, p.detail, p.series, p.temps, p.energy);
+          return renderPump(p.name, p.detail, p.series, p.temps, p.energy, p.power);
         }).join('');
       });
     });
diff --git a/web/index.html b/web/index.html
index 7165b2bd..7534e1f2 100644
--- a/web/index.html
+++ b/web/index.html
@@ -798,7 +798,7 @@ <h3>Price bars (top of the chart)</h3>
   <script src="/models.js?v=diag2"></script>
   <script src="/plan.js?v=diag2"></script>
   <script src="/twins.js?v=diag2"></script>
-  <script src="/heating.js?v=heat12"></script>
+  <script src="/heating.js?v=heat13"></script>
   <script src="/loadpoints.js?v=lp3"></script>
   <script src="/diagnose.js?v=diag2"></script>
   <script src="/update-badge.js?v=modal2" defer></script>

From 125cbeb5b4b253d700fe5474a64974f54146bce3 Mon Sep 17 00:00:00 2001
From: Fredrik Ahlgren <fredrik@sourceful-labs.com>
Date: Fri, 10 Jul 2026 10:40:19 +0200
Subject: [PATCH 19/19] fix: bound heat-pump dashboard history requests

---
 web/heating-request-budget.test.mjs | 20 ++++++++
 web/heating.js                      | 74 ++++++++++++++++++++---------
 2 files changed, 71 insertions(+), 23 deletions(-)
 create mode 100644 web/heating-request-budget.test.mjs

diff --git a/web/heating-request-budget.test.mjs b/web/heating-request-budget.test.mjs
new file mode 100644
index 00000000..e7425ec3
--- /dev/null
+++ b/web/heating-request-budget.test.mjs
@@ -0,0 +1,20 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+
+const source = readFileSync(new URL('./heating.js', import.meta.url), 'utf8');
+
+test('heat-pump history is cached instead of range-scanned every live refresh', () => {
+  assert.match(source, /HISTORY_REFRESH_MS\s*=\s*300000/);
+  assert.match(source, /historyCache\[name\]\s*=\s*\{\s*at:/);
+  assert.match(source, /fetchPumpHistory\(n\)/);
+});
+
+test('all-signals view does not fetch one history series per NIBE point', () => {
+  assert.match(source, /metrics\.filter\(function \(m\) \{ return !!infoForKey\(m\.name\); \}\)\.forEach/);
+});
+
+test('overlapping dashboard refreshes are suppressed', () => {
+  assert.match(source, /if \(refreshInFlight\) return;/);
+  assert.match(source, /refreshInFlight = false;/);
+});
diff --git a/web/heating.js b/web/heating.js
index 564ebfd0..682676ed 100644
--- a/web/heating.js
+++ b/web/heating.js
@@ -17,6 +17,9 @@
   var heatPumpDrivers = null; // cached after discovery: array of driver names
   var lastDiscoverMs = 0;             // Date.now() of the last discovery scan
   var DISCOVER_EVERY_MS = 300000;     // re-scan for newly-added heat pumps (5 min)
+  var HISTORY_REFRESH_MS = 300000;    // long TS queries refresh at most every 5 min
+  var historyCache = Object.create(null);
+  var refreshInFlight = false;
 
   // Route reads over the owner/P2P transport when present (remote home
   // route), else plain fetch (LAN / tests). Mirrors twins.js.
@@ -343,7 +346,7 @@
       '</div>';
   }
 
-  function renderPump(name, detail, sparkPoints, temps, energy, power) {
+  function renderPump(name, detail, temps, energy, power) {
     var m = metricMap(detail && detail.metrics);
     var groups = GROUPS.map(function (g) {
       var tiles = g.items.map(function (def) { return tileHtml(def, m); }).join('');
@@ -376,10 +379,44 @@
     });
   }
 
+  // The live values are cheap and refresh every 30 s. Month/year history is
+  // comparatively expensive (SQLite/Parquet range scans, possibly over the
+  // owner relay), so cache those series for five minutes per heat pump.
+  function fetchPumpHistory(name) {
+    var cached = historyCache[name];
+    var now = Date.now();
+    if (cached && now - cached.at < HISTORY_REFRESH_MS) return Promise.resolve(cached.data);
+    var ser = function (metric, range, pts) {
+      return fetchJSON('/api/series?driver=' + encodeURIComponent(name) + '&metric=' + metric + '&range=' + range + '&points=' + pts);
+    };
+    return Promise.all([
+      ser('hp_power_w', '24h', 200),
+      ser('hp_outdoor_temp_c', '30d', 400),
+      ser('hp_supply_line_bt2', '30d', 400),
+      ser('hp_return_line_bt3', '30d', 400),
+      ser('hp_energy_consumed_kwh', '366d', 800),
+      ser('hp_energy_produced_kwh', '366d', 800),
+      ser('hp_fr_nluft_bt20', '30d', 400),
+      ser('hp_energy_log_current_power_consumption', '24h', 200),
+      ser('hp_power_internal_additional_heat', '24h', 200),
+    ]).then(function (parts) {
+      var pp = function (r) { return (r && r.points) || []; };
+      var data = {
+        temps: { outdoor: pp(parts[1]), supply: pp(parts[2]), ret: pp(parts[3]), extract: pp(parts[6]) },
+        energy: { consumed: pp(parts[4]), produced: pp(parts[5]) },
+        power: { compressor: pp(parts[0]), total: pp(parts[7]), internal: pp(parts[8]) },
+      };
+      historyCache[name] = { at: Date.now(), data: data };
+      return data;
+    });
+  }
+
   function refresh() {
     var section = document.getElementById('heating-section');
     var grid = document.getElementById('heating-grid');
     if (!section || !grid) return;
+    if (refreshInFlight) return;
+    refreshInFlight = true;
 
     // Re-run discovery on first call, then periodically — so a heat-pump
     // driver added while the dashboard is open shows up without a manual
@@ -398,28 +435,14 @@
         section.hidden = true;
         return;
       }
-      // Fetch detail + 24h power series for each heat pump in parallel.
+      // Refresh live detail every cycle; reuse bounded-age history.
       return Promise.all(names.map(function (n) {
-        var ser = function (metric, range, pts) {
-          return fetchJSON('/api/series?driver=' + encodeURIComponent(n) + '&metric=' + metric + '&range=' + range + '&points=' + pts);
-        };
         return Promise.all([
           fetchJSON('/api/drivers/' + encodeURIComponent(n)),
-          ser('hp_power_w', '24h', 200),
-          ser('hp_outdoor_temp_c', '30d', 400),
-          ser('hp_supply_line_bt2', '30d', 400),
-          ser('hp_return_line_bt3', '30d', 400),
-          ser('hp_energy_consumed_kwh', '366d', 800),
-          ser('hp_energy_produced_kwh', '366d', 800),
-          ser('hp_fr_nluft_bt20', '30d', 400),
-          ser('hp_energy_log_current_power_consumption', '24h', 200),
-          ser('hp_power_internal_additional_heat', '24h', 200),
+          fetchPumpHistory(n),
         ]).then(function (parts) {
-          var pp = function (r) { return (r && r.points) || []; };
-          return { name: n, detail: parts[0], series: pp(parts[1]),
-            temps: { outdoor: pp(parts[2]), supply: pp(parts[3]), ret: pp(parts[4]), extract: pp(parts[7]) },
-            energy: { consumed: pp(parts[5]), produced: pp(parts[6]) },
-            power: { compressor: pp(parts[1]), total: pp(parts[8]), internal: pp(parts[9]) } };
+          var h = parts[1] || {};
+          return { name: n, detail: parts[0], temps: h.temps, energy: h.energy, power: h.power };
         });
       })).then(function (pumps) {
         var live = pumps.filter(function (p) { return p.detail && isHeatPump(p.detail); });
@@ -427,9 +450,13 @@
         injectStyles();
         section.hidden = false;
         grid.innerHTML = live.map(function (p) {
-          return renderPump(p.name, p.detail, p.series, p.temps, p.energy, p.power);
+          return renderPump(p.name, p.detail, p.temps, p.energy, p.power);
         }).join('');
       });
+    }).then(function () {
+      refreshInFlight = false;
+    }, function () {
+      refreshInFlight = false;
     });
   }
 
@@ -571,9 +598,10 @@
         });
       });
       body.innerHTML = html;
-      // Lazily fill sparklines (one /api/series per metric) — values already
-      // shown, so a slow series fetch never blocks the table.
-      metrics.forEach(function (m) {
+      // Fetch trends only for the curated dashboard signals. A NIBE driver can
+      // expose ~980 points; issuing one series query per point here could flood
+      // a Pi (and the remote relay) with nearly a thousand concurrent requests.
+      metrics.filter(function (m) { return !!infoForKey(m.name); }).forEach(function (m) {
         fetchJSON('/api/series?driver=' + encodeURIComponent(name) + '&metric=' + encodeURIComponent(m.name) + '&range=24h&points=120')
           .then(function (s) {
             var slot = body.querySelector('.ftw-hpd-spark[data-spark-metric="' + (window.CSS && CSS.escape ? CSS.escape(m.name) : m.name) + '"]');