[calvind80]

Summary

Adds an optional modern web interface for Predbat, with responsive layouts, light and dark themes, and navigation between Overview, Dashboard, Plan, Charts, Compare, configuration and system pages.

Both interfaces run together: the classic pages keep their existing paths, and the modern interface is available under ./ui/. Select Try the new interface in the classic menu or Classic interface in the modern menu. The browser remembers the choice for this installation; no configuration change or restart is needed.

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 shipped as flat, fixed-name apps/predbat/predbat_ui* files.
• Existing apps.yaml configurations remain supported.
• Modern-only entities and settings are optional.
• Frontend source remains available under frontend/.

Configuration

Add the relevant settings to your existing pred_bat: section in apps.yaml. Replace the example entity IDs with your own.
No web_ui setting is needed. All additional Overview settings below are optional. Existing grid, solar, battery and household entities are reused automatically.

pred_bat:
  # OPTIONAL: weather conditions and outdoor temperature on Overview.
  # Also supplies the conditions used by the optional visual weather effects.
  weather: weather.forecast_home

  # OPTIONAL: total solar-generation forecast for today, in kWh.
  # Reuse your existing setting if already configured.
  pv_forecast_today: sensor.solar_forecast_today

  # OPTIONAL EV SETTINGS
  # Only add these if your existing charger integration has not configured them.
  # Keep one entry per car, in the same order across the per-car lists.

  # OPTIONAL: number of cars represented by your configuration.
  # Keep your existing value if already configured.
  num_cars: 1

  # OPTIONAL: live charger power; enables the EV power display.
  # The entity must report W, kW or another convertible power unit.
  car_charging_power:
    - sensor.ev_charger_power

  # OPTIONAL: charger state, such as unplugged, connected or charging.
  car_charging_status:
    - sensor.ev_charger_status

  # OPTIONAL: vehicle battery state of charge, as a percentage.
  car_charging_soc:
    - sensor.ev_battery_percentage

  # OPTIONAL: daily accumulated charger electricity use, in kWh.
  car_charging_energy:
    - sensor.ev_charger_energy_today

  # OPTIONAL ASHP SETTINGS
  # Enable the heat-pump card when not already enabled by PredHeat.
  ashp_enable: true

  # OPTIONAL: current heat-pump electrical power consumption.
  # The entity must report W or a convertible power unit.
  ashp_power: sensor.heat_pump_power

  # OPTIONAL: heat-pump operating state.
  # Use off, hot_water or heating for the corresponding Overview states.
  ashp_status: sensor.heat_pump_status

  # OPTIONAL: indoor temperature, in degrees Celsius.
  internal_temperature: sensor.living_room_temperature

  # OPTIONAL: daily heat-pump ELECTRICITY consumption, in kWh.
  # Use electrical input energy rather than heat output.
  heat_energy: sensor.heat_pump_electricity_today

  # OPTIONAL compatibility alternative to heat_energy.
  # Use this only if heat_energy is not configured.
  # ashp_energy_today: sensor.heat_pump_electricity_today

Existing integrations and defaults

• PredHeat: pump mode enables the ASHP card automatically and supplies its calculated indoor temperature and daily heating energy. Duplicate Overview settings are unnecessary.
• Weather: predheat.weather takes precedence over the top-level weather setting. If neither is configured, Overview tries weather.forecast_home. Unavailable weather information is hidden.
• EV integrations: retain automatically configured entities wherever available. Changing car settings can also affect Predbat’s existing charging configuration.
• Optional readings: missing entities do not prevent the core Overview page from working.
• Browser preferences: weather effects and device subtraction are controlled in the interface; they need no additional apps.yaml entries.

Packaging and delivery

• House images and the Overview documentation screenshot are committed as WebP; the PNG conversion step and sharp dependency are removed.
• CodeMirror 6 replaces Monaco, with YAML linting, schema help and entity completion, without web workers.
• Vite emits 28 flat predbat_ui* files with fixed names and rejects empty chunks/assets. No zip is shipped.
• The backend only serves prefixed assets with allowed extensions. FileResponse supplies ETag/Last-Modified and conditional responses, with Cache-Control: no-cache and compression for text assets.
• Frontend CI runs npm ci, tests and a build, then checks for changed or untracked generated files. coverage/deploy copies predbat_ui*.
• The obsolete UI selector, conditional routes, /legacy_* aliases and chart-path switch are removed. Modern UI guidance is in final sections of the web-interface and apps.yaml documentation.

Validation

• 91 frontend tests pass on the committed branch.
• Production build, lint and changed-file pre-commit checks pass.
• Tooltip positioning checked at both edges in a browser fixture.
• Production frontend files rebuilt; the build produces no differences from the committed assets.
• Previously tested through Home Assistant ingress on desktop and mobile; the new side-by-side routing has local ingress-prefix tests and still needs a live ingress smoke test.

Frontend CI passed on both fork repositories at a1c64357. The upstream pull request workflows are awaiting maintainer approval.

[calvind80]

Those changes all make sense to me, I’ve implemented them all:

• Replaced the house PNGs with WebP, removed the conversion step and sharp, and reduced the docs screenshot to about 183 KB.
• Replaced Monaco with CodeMirror 6, retaining YAML/schema validation, hover help and completion.
• Removed frontend.zip. The build now produces 28 flat, fixed-name predbat_ui* files, with restricted asset serving, cache revalidation and compression.
• Added CI to install dependencies, test, rebuild and verify that the committed assets match the source. Updated coverage/deploy accordingly.
• Made both interfaces available together, with the modern UI under /ui/, links between them and a browser-local preference. Removed the obsolete configuration and duplicate routes, and updated both documentation pages.

I’ve tested this in Home Assistant. All 100 frontend tests and the focused backend tests pass, and a clean build reproduces the committed assets exactly.