webapp: Add visual indicator for stale data in webUI

[Copilot]

Overview

This PR implements visual indicators to make stale data immediately visible in the webUI for all components in InverterTotalInfo, as requested in #2229. All component cards (power meter, battery, grid charger, and solar charger) now change color from blue to red when data becomes stale (>30 seconds old), providing at-a-glance feedback for connectivity issues.

Problem

Previously, the component cards in the webUI always displayed with a blue header, regardless of whether the data was fresh or stale. This made it difficult to identify connectivity issues at a glance, requiring users to check logs or dig deeper to realize their components had stopped reporting.

Solution

The implementation follows the same pattern already used by the detailed Battery and Solar Charger views:

• Fresh data (< 30 seconds old): Blue header (text-bg-primary)
• Stale data (> 30 seconds old): Red header (text-bg-danger)

Changes

Backend (C++)

• src/WebApi_ws_live.cpp: Added isDataValid field to the WebSocket JSON response for all four components:
  • Power meter: utilizing the existing PowerMeter.isDataValid() method
  • Battery: using getAgeSeconds() < 30 check
  • Grid charger: using getLastUpdate() timestamp check
  • Solar charger: using getAgeMillis() < 30000 check

Frontend (TypeScript/Vue)

• webapp/src/types/LiveDataStatus.ts: Added optional isDataValid field to all four interfaces: PowerMeter, Battery, GridCharger, and SolarCharger
• webapp/src/components/InverterTotalInfo.vue: Modified all component cards (7 total) to conditionally change header color based on data validity:
  • 1 power meter card
  • 2 battery cards (charge and power)
  • 1 grid charger card
  • 3 solar charger cards (total yield, daily yield, power)

Technical Details

• Stale threshold: 30 seconds (consistent across all components)
• Backward compatible: Optional field won't break older firmware versions
• Consistent with existing patterns: Matches the visual feedback used by detailed Battery (20s) and Solar Charger (10s) views
• Minimal changes: 3 files changed, 23 insertions, 6 deletions

Testing

• ✅ Webapp linting passed (yarn lint)
• ✅ Code formatting passed (yarn prettier)
• ✅ Webapp build successful (yarn build)
• ✅ C++ linting passed (cpplint)

Fixes #2229

[!WARNING]

Fixes #2231

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Request] make stale powermeter visible in webUI</issue_title>
<issue_description>### Is your feature request related to a problem? Please describe.

as mentioned here, it would be helpfull if a stale powermeter was visible at the first glance

Describe the solution you'd like

make powermeter card yellow, red or use some other info (not "0.0W"), when powermeter becomes stale

Describe alternatives you've considered

No response

Additional context

No response</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #2231

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[AndreasBoehm]

@copilot do the same for battery, gridcharger and solarcharger

[Copilot]

@copilot do the same for battery, gridcharger and solarcharger

Done! I've extended the stale data indicator to battery, grid charger, and solar charger components. All cards in InverterTotalInfo now change from blue to red headers when data becomes stale (>30 seconds old). Changes committed in 7c7f4e1.

[AndreasBoehm]

@vaterlangen good find! After looking at what copilot built i very much want to align all classes that expose statistics to clean up the mess of „isOutdated“ checks