Show energy cost on dashboard

app/static/css/style.css

@@ -138,6 +138,9 @@
 .tile.hidden { display: none; }
 .tile.dragging { opacity: 0.5; border: 1px dashed var(--accent); }
 .tile.selected { outline: 2px solid var(--accent); }
+.tile .energy-summary { flex-direction: column; gap: 4px; text-align: center; }
+.tile .energy-summary .big-value { font-size: 18px; line-height: 1.2; }
+.tile .energy-cost { color: var(--success); font-size: 13px; font-weight: 700; }
 .tile-controls { position: absolute; top: 4px; right: 4px; display: flex; gap: 4px; }
 .tile-controls select {
   background: var(--surface-3);

app/static/js/dashboard.js

@@ -529,7 +529,7 @@ function initTilesFor(name, grid) {
     energyTile.dataset.tile = 'energy';
     energyTile.style.left = '12px';
     energyTile.style.top = '12px';
-    energyTile.innerHTML = `<h4>Energy Today</h4><div class="tile-body"><span class="big-value" data-energy-val>-- kWh</span></div>`;
+    energyTile.innerHTML = `<h4>Energy Today</h4><div class="tile-body energy-summary"><span class="big-value" data-energy-val>-- kWh</span><span class="energy-cost" data-energy-cost>--</span></div>`;
     const resizeHandle = document.createElement('div'); resizeHandle.className='tile-resize'; energyTile.appendChild(resizeHandle);
     grid.appendChild(energyTile);
   }
@@ -1194,11 +1194,19 @@ evtSource.onmessage = (e) => {
     }).catch(()=>{});
     if (uiCfg.show_energy) {
       fetch(apiUpsPath(meta.name, '/energy')).then(r => r.json()).then(data => {
-        if (!data || data.kwh_today == null) return;
         const card = getCard(meta.name);
         if (!card) return;
         const energyVal = card.querySelector('[data-energy-val]');
-        if (energyVal) energyVal.textContent = data.kwh_today.toFixed(2) + ' kWh';
+        const energyCost = card.querySelector('[data-energy-cost]');
+        if (!data || data.kwh_today == null) {
+          if (energyVal) energyVal.textContent = '-- kWh';
+          if (energyCost) energyCost.textContent = '--';
+          return;
+        }
+        if (energyVal) energyVal.textContent = `${Number(data.kwh_today).toFixed(4)} kWh`;
+        if (energyCost) {
+          energyCost.textContent = data.cost_today == null ? '--' : `$${Number(data.cost_today).toFixed(4)}`;
+        }
       }).catch(()=>{});
     }
   });

app/static/js/settings.js

@@ -1,5 +1,11 @@
 // Settings page
 (async function () {
+  function normalizeEnergyRate(value) {
+    const parsed = Number.parseFloat(value);
+    if (!Number.isFinite(parsed) || parsed < 0) return '0.0000';
+    return parsed.toFixed(4);
+  }
+
   async function loadUi() {
     const r = await window.apiFetch('/api/config/ui');
     if (!r.ok) return;
@@ -9,6 +15,7 @@
       const el = form.elements[k];
       if (!el) return;
       if (el.type === 'checkbox') el.checked = !!v;
+      else if (k === 'energy_cost_per_kwh') el.value = normalizeEnergyRate(v);
       else el.value = v;
     });
   }
@@ -37,7 +44,7 @@
       color_badges: f.color_badges.checked,
       enable_transfer_burst_alert: f.enable_transfer_burst_alert.checked,
       enable_voltage_deviation_alert: f.enable_voltage_deviation_alert.checked,
-      energy_cost_per_kwh: parseFloat(f.energy_cost_per_kwh.value) || 0,
+      energy_cost_per_kwh: Number.parseFloat(normalizeEnergyRate(f.energy_cost_per_kwh.value)),
     };
     const r = await window.apiFetch('/api/config/ui', {
       method: 'PUT', body: JSON.stringify(payload),