Skip to content

Add optional redesigned React based web interface - #5393

Open
calvind80 wants to merge 99 commits into
springfall2008:mainfrom
calvind80:feature/modern-web-ui
Open

calvind80 wants to merge 99 commits into
springfall2008:mainfrom
calvind80:feature/modern-web-ui

Conversation

@calvind80

Copy link
Copy Markdown

Summary

Adds an optional modern React interface while preserving the existing Predbat interface as the default.

Setting web_ui: modern in apps.yaml serves the bundled modern interface. If the option is omitted or set to legacy, Predbat continues to use the existing interface.

The new interface includes:

  • Responsive dashboard and energy overview
  • Plan timeline, table, history and debug views
  • Battery, power, cost, rates, solar, savings, degradation, marginal-cost and CO₂ charts
  • Apps configuration editor with schema help and Home Assistant entity autocomplete
  • Tariff helper with reviewable configuration suggestions
  • Entities, logs, compare, annual, discovery, cards, internals and documentation pages
  • Home Assistant ingress navigation and mobile layouts
  • Optional weather effects and configurable Overview integrations
  • PredHeat configuration reuse for weather and heat-pump data

Compatibility

  • The legacy interface remains the default.
  • Users do not need Node.js or Vite. The compiled interface is included in apps/predbat/frontend.zip.
  • Existing apps.yaml configurations remain supported.
  • Modern-only entities and settings are optional.
  • Frontend source remains available under frontend/.

Validation

  • 49 frontend tests passed
  • Frontend lint completed with no errors
  • TypeScript and Vite production build passed
  • Modern frontend bundle generated successfully
  • Focused power-flow and Overview backend tests passed
  • Full Predbat suite: 334 tests passed
  • All pre-commit checks passed
  • Tested through Home Assistant ingress on desktop and mobile

= and others added 30 commits September 26, 2026 09:11
Added instructions for testing the UI in Predbat.
Corrected typo in README regarding editing apps.yaml.
Add dashboard cards and improve plan timeline
@calvind80 calvind80 changed the title Add optional modern React web interface Add optional redesigned React based web interface Oct 10, 2026
@raldred

raldred commented Oct 10, 2026

Copy link
Copy Markdown
Contributor

Thanks for the PR, Can you share screenshots of the various features of the proposed dashboards?

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants