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

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.