web.py

# -----------------------------------------------------------------------------
# Predbat Home Battery System
# Copyright Trefor Southwell 2026 - All Rights Reserved
# This application maybe used for personal use only and not for commercial use
# -----------------------------------------------------------------------------
# fmt off
# pylint: disable=consider-using-f-string
# pylint: disable=line-too-long
# pylint: disable=attribute-defined-outside-init
#
# This code creates a web server and serves up the Predbat web pages


"""Built-in web dashboard server.

Provides the PredBat web interface using aiohttp, serving dashboard pages,
configuration editors, entity browsers, plan visualisations, and REST API
endpoints. Includes 50+ HTTP routes for monitoring and control.
"""

from aiohttp import web
import asyncio
import os
import os.path
import sys
import re
from datetime import datetime, timedelta
import json
import shutil
import html as html_module
import urllib.parse
import traceback
import threading
import io
from io import StringIO
import hashlib
import copy
from ruamel.yaml import YAML
from ruamel.yaml.scalarstring import DoubleQuotedScalarString

from web_helper import (
    get_header_html,
    get_plan_css,
    get_plan_renderer_js,
    get_editor_js,
    get_editor_css,
    get_log_css,
    get_charts_css,
    get_apps_css,
    get_html_config_css,
    get_apps_js,
    get_components_css,
    get_entity_modal_css,
    get_component_edit_modal_css,
    get_entity_modal_js,
    get_component_edit_modal_js,
    get_logfile_js,
    get_entity_toggle_js,
    get_entity_control_css,
    get_entity_css,
    get_entity_js,
    get_refresh_inverter_js,
    get_restart_button_js,
    get_browse_css,
    get_entity_detailed_row_js,
    get_internals_css,
    get_internals_js,
    get_dashboard_css,
    get_dashboard_collapsible_js,
)

from utils import calc_percent_limit, str2time, dp0, dp2, dp4, format_time_ago, get_override_time_from_string, history_attribute, prune_today, mask_secret_args
from const import TIME_FORMAT, TIME_FORMAT_DAILY, TIME_FORMAT_HA
from predbat import THIS_VERSION_DISPLAY
from component_base import ComponentBase
from config import APPS_SCHEMA
from web_annual import AnnualPage
from web_metrics_dashboard import get_metrics_dashboard_css, get_metrics_dashboard_body
from predbat_metrics import metrics_handler, metrics_json_handler, metrics, PROMETHEUS_AVAILABLE
from marginal import MARGINAL_EXTRA_KWH_LEVEL_NAMES, MARGINAL_EXTRA_KWH_LEVELS, MARGINAL_TIME_OFFSETS

ROOT_YAML_KEY = "pred_bat"


def state_as_of_slots(records, slots):
    """
    Resolve each slot to the state in effect at it - the most recent record at or before the slot.

    records must be a list of (timestamp, value) ordered oldest first. Returns
    {slot: (value, changed, prev_value)} where value is "-" for slots preceding the first record and
    changed marks a slot whose value differs from the one shown at the previous slot.
    """
    filled = {}
    last_value = None
    previous = None
    index = 0

    for slot in sorted(slots):
        while index < len(records) and records[index][0] <= slot:
            last_value = records[index][1]
            index += 1
        value = last_value if last_value is not None else "-"
        filled[slot] = (value, value != "-" and value != previous, previous)
        previous = value

    return filled


def build_entity_history_table_data(entity_selections, entity_data_fetch):
    """
    Resolve the /entity history table's 30-minute rows and their 5-minute detail slots.

    entity_selections: list of {"entity_id": ..., "attribute": ...} (attribute may be None for state)
    entity_data_fetch: dict of entity_id -> history as returned by get_history_with_now(), i.e. [[record, ...]]

    Every slot reports the state as of its own timestamp. Summarising a window by the last sample
    taken inside it instead let a momentary blip stand for the whole window - one stray "Lost"
    record at 21:57 made the entire 21:30 row read "Lost" - and that value then carried forward
    into every later slot that had no sample of its own, turning a blip into hours of downtime.

    Returns (entity_filled_30min, entity_filled_5min, sorted_timestamps_30min, all_display_slots_5min):
      entity_filled_30min / entity_filled_5min: one dict per selection, {slot: (value, changed, prev_value)}
      sorted_timestamps_30min: the 30-min row timestamps, newest first
      all_display_slots_5min: the 5-min slots covering each 30-min row's own window (offsets 0 to +25)
    """
    entity_records = []
    all_timestamps_30min = set()

    for selection in entity_selections:
        entity_id = selection["entity_id"]
        attribute = selection["attribute"]
        history = entity_data_fetch[entity_id]
        records = []

        if history and len(history) >= 1:
            history = history[0]
            if history:
                for item in history:
                    if "last_updated" not in item:
                        continue
                    try:
                        last_updated_stamp = str2time(item["last_updated"])
                    except (ValueError, TypeError):
                        continue

                    # Get state or attribute value
                    if attribute:
                        state = item.get("attributes", {}).get(attribute, None)
                    else:
                        state = item.get("state", None)

                    if state is None:
                        state = "None"

                    records.append((last_updated_stamp, state))

                    # A record makes the window it landed in a row, so activity is always on screen
                    minutes = last_updated_stamp.hour * 60 + last_updated_stamp.minute
                    rounded_minutes_30 = (minutes // 30) * 30
                    all_timestamps_30min.add(last_updated_stamp.replace(minute=rounded_minutes_30 % 60, hour=rounded_minutes_30 // 60, second=0, microsecond=0))

        # str2time is only reliable for ordering once parsed - the raw strings mix UTC history with
        # the local-time "now" record get_history_with_now() appends
        records.sort(key=lambda record: record[0])
        entity_records.append(records)

    # Sort timestamps in reverse chronological order
    sorted_timestamps_30min = sorted(all_timestamps_30min, reverse=True)

    # Detail slots are the 5-min marks INSIDE each row's own half hour, so expanding a row explains
    # that row rather than describing the preceding half hour
    all_display_slots_5min = set()
    for ts_30 in sorted_timestamps_30min:
        for offset in range(0, 30, 5):
            all_display_slots_5min.add(ts_30 + timedelta(minutes=offset))

    entity_filled_30min = []
    entity_filled_5min = []
    for records in entity_records:
        entity_filled_30min.append(state_as_of_slots(records, sorted_timestamps_30min))
        entity_filled_5min.append(state_as_of_slots(records, all_display_slots_5min))

    return entity_filled_30min, entity_filled_5min, sorted_timestamps_30min, all_display_slots_5min


def is_data_numerical(history, attribute=None):
    """
    Check if history data is numerical (supports both state and attribute checking)
    Returns True if at least 10% of values are numeric or boolean
    """
    count_nums = 0
    count_total = 0

    if history and len(history) >= 1:
        for item in history[0]:
            if attribute:
                # Check attribute value
                attr_value = item.get("attributes", {}).get(attribute, None)
                if attr_value is None:
                    continue
                value = str(attr_value)
            else:
                # Check state value
                value = item.get("state", None)
                if value is None:
                    continue
                value = str(value)

            if value.lower() in ["on", "off", "true", "false"]:
                count_nums += 1
            else:
                try:
                    float(value)
                    count_nums += 1
                except (ValueError, TypeError):
                    pass
            count_total += 1

    if count_total > 0 and (count_nums / count_total) >= 0.1:
        return True
    elif count_total == 0:
        return True
    return False


def split_entities_for_charting(entities, entity_data_fetch):
    """
    Fetch each entity's history and split a unit group into numeric vs non-numeric entries.

    Deciding numeric-vs-timeline per entity (rather than once for the whole group, from
    whichever entity happened to be processed last) means a numeric entity doesn't end up
    silently rendered as a broken timeline chart just because another entity sharing the same
    unit group is non-numerical.

    entities: list of {"id": entity_id, "friendly_name": ..., "attribute": ...}
    entity_data_fetch: dict of entity_id -> history as returned by get_history_with_now()

    Returns (numeric_entries, timeline_entries), each a list of
    {"name": display_name, "friendly_name": ..., "entity_id": ..., "data": history_chart}.
    """
    numeric_entries = []
    timeline_entries = []

    for entity_info in entities:
        entity_id = entity_info["id"]
        friendly_name = entity_info["friendly_name"]
        attribute = entity_info.get("attribute")

        history = entity_data_fetch.get(entity_id)
        is_numerical = is_data_numerical(history, attribute=attribute)

        if attribute:
            history_chart = history_attribute(history, state_key=attribute, attributes=True, is_numerical=is_numerical)
            display_name = f"{friendly_name} ({attribute})"
        else:
            history_chart = history_attribute(history, is_numerical=is_numerical)
            display_name = friendly_name

        if not history_chart:
            continue

        entry = {"name": display_name, "friendly_name": friendly_name, "entity_id": entity_id, "data": history_chart}
        (numeric_entries if is_numerical else timeline_entries).append(entry)

    return numeric_entries, timeline_entries


def resolve_group_unit_and_name(entity_id, dashboard_values, live_unit=None, live_friendly_name=None):
    """
    Resolve the unit_of_measurement/friendly_name to group and label an entity by for the
    /entity charts.

    Prefers Predbat's own dashboard_values cache, falling back to a caller-supplied live HA
    lookup (mirroring html_get_entity_text's fallback) for entities Predbat doesn't track
    itself - e.g. inverter control entities that are selectable on this page but were never
    published via dashboard_item(), which otherwise silently grouped every such entity into
    "(no unit)" regardless of their real HA unit.

    live_unit/live_friendly_name should only be looked up by the caller when entity_id isn't
    in dashboard_values, since that's the only case they're used.
    """
    attributes = dashboard_values.get(entity_id, {}).get("attributes", {})
    if entity_id in dashboard_values:
        unit = attributes.get("unit_of_measurement") or ""
        friendly_name = attributes.get("friendly_name") or ""
    else:
        unit = live_unit or ""
        friendly_name = live_friendly_name or ""
    return unit or "(no unit)", friendly_name or entity_id


class WebInterface(ComponentBase):
    """Built-in web dashboard server using aiohttp.

    Serves the PredBat dashboard with 50+ HTTP routes for monitoring,
    configuration, entity browsing, plan visualisation, and REST API
    endpoints. Supports plugin endpoint registration.
    """

    def initialize(self, web_port):
        self.default_page = "./dash"
        self.web_port = web_port
        self.default_log = "warnings"

        # Plugin registration system
        self.registered_endpoints = []

        self.annual_page = AnnualPage(self)

    def register_endpoint(self, path, handler, method="GET"):
        """
        Register a new endpoint with the web interface

        Args:
            path (str): URL path for the endpoint (e.g., '/metrics')
            handler (callable): Async handler function
            method (str): HTTP method ('GET', 'POST', etc.)
        """
        self.registered_endpoints.append({"path": path, "handler": handler, "method": method.upper()})
        self.log(f"Registered endpoint: {method.upper()} {path}")

    def subtract_daily(self, hist1, hist2):
        """
        Subtract the values in hist2 from hist1
        """
        results = {}
        for key in hist1:
            if key in hist2:
                results[key] = hist1[key] - hist2[key]
            else:
                results[key] = hist1[key]
        return results

    def history_daily_at_hour(self, history_raw, hour_limit=3):
        """
        For each calendar day (local time), return the last recorded entity state
        whose local hour falls in [0, hour_limit).  This captures the result of
        the overnight compare run (which completes around 1am) without being
        influenced by any later manual re-runs during the day.
        Returns {YYYY-MM-DD: float} with values in the raw unit of the entity state.
        """
        results = {}
        if not isinstance(history_raw, list) or not history_raw:
            return results
        history = history_raw[0] if isinstance(history_raw[0], list) else history_raw
        for item in history:
            last_updated = item.get("last_updated")
            state = item.get("state")
            if not last_updated or state in (None, "unavailable", "unknown"):
                continue
            try:
                state = float(state)
            except (ValueError, TypeError):
                continue
            try:
                ts = str2time(last_updated).astimezone()
            except (ValueError, TypeError):
                continue
            if ts.hour >= hour_limit:
                continue
            day_str = ts.strftime(TIME_FORMAT_DAILY)
            # Keep the latest record within the overnight window for this day
            results[day_str] = state
        return results

    def average_cost_window(self, daily_pence, days):
        """
        Return the mean daily cost (in pence) and the number of days with data
        over the last `days` calendar days, excluding today.
        Returns (None, 0) when there are no data points in the window.
        """
        today = self.now_utc.astimezone().date()
        total = 0.0
        count = 0
        for d in range(1, days + 1):
            day_str = (today - timedelta(days=d)).strftime(TIME_FORMAT_DAILY)
            if day_str in daily_pence:
                total += daily_pence[day_str]
                count += 1
        return ((total / count), count) if count else (None, 0)

    def rolling_7d_average(self, daily_pence):
        """
        For every date that has a data point, compute the 7-day trailing average
        (the mean of that day and up to 6 preceding days that have data).
        Returns {YYYY-MM-DD: float} in the same unit as daily_pence (pence),
        only for days where at least one data point exists in the window.
        """
        if not daily_pence:
            return {}
        from datetime import date as date_cls

        # Sort dates so we can iterate chronologically
        sorted_days = sorted(daily_pence.keys())
        results = {}
        for day_str in sorted_days:
            try:
                anchor = date_cls.fromisoformat(day_str)
            except (ValueError, TypeError):
                continue
            total = 0.0
            count = 0
            for d in range(7):
                candidate = (anchor - timedelta(days=d)).strftime(TIME_FORMAT_DAILY)
                if candidate in daily_pence:
                    total += daily_pence[candidate]
                    count += 1
            if count:
                results[day_str] = dp2(total / count)
        return results

    def _register_annual_routes(self, app):
        """Register the Annual tab's routes on ``app``.

        Split out from start() so a test can register these onto a bare aiohttp
        Application and assert they exist, without booting a real TCP listener -
        the constructor for that Application performs no network I/O of its own.
        """
        app.router.add_get("/annual", self.annual_page.html_annual)
        app.router.add_post("/annual", self.annual_page.html_annual_post)
        app.router.add_post("/annual_reset", self.annual_page.html_annual_reset)
        app.router.add_post("/annual_array", self.annual_page.html_annual_array)
        app.router.add_post("/annual_delete", self.annual_page.html_annual_delete)
        app.router.add_get("/annual_cost_preview", self.annual_page.html_annual_cost_preview)
        app.router.add_post("/annual_run", self.annual_page.html_annual_run)
        app.router.add_get("/annual_status", self.annual_page.html_annual_status)
        app.router.add_post("/annual_cancel", self.annual_page.html_annual_cancel)
        app.router.add_get("/annual_download", self.annual_page.html_annual_download)
        app.router.add_get("/annual_plan", self.annual_page.html_annual_plan)
        app.router.add_get("/annual_view", self.annual_page.html_annual_view)
        app.router.add_get("/annual_compare", self.annual_page.html_annual_compare)

    async def start(self):
        # Start the web server
        app = web.Application()
        app.router.add_get("/", self.html_default)
        app.router.add_get("/plan", self.html_plan)
        app.router.add_get("/log", self.html_log)
        app.router.add_get("/apps", self.html_apps)
        app.router.add_post("/apps", self.html_apps_post)
        app.router.add_get("/charts", self.html_charts)
        app.router.add_get("/config", self.html_config)
        app.router.add_get("/entity", self.html_entity)
        app.router.add_post("/entity", self.html_entity_post)
        app.router.add_post("/config", self.html_config_post)
        app.router.add_get("/dash", self.html_dash)
        app.router.add_post("/dash", self.html_dash_post)
        app.router.add_get("/dash_content", self.html_dash_content)
        app.router.add_get("/components", self.html_components)
        app.router.add_get("/component_entities", self.html_component_entities)
        app.router.add_post("/component_restart", self.html_component_restart)
        app.router.add_get("/component_config", self.html_component_config)
        app.router.add_post("/component_config_save", self.html_component_config_save)
        app.router.add_get("/debug_yaml", self.html_debug_yaml)
        app.router.add_get("/debug_log", self.html_debug_log)
        app.router.add_get("/debug_apps", self.html_debug_apps)
        app.router.add_get("/debug_apps_live", self.html_debug_apps_live)
        app.router.add_get("/debug_plan", self.html_debug_plan)
        app.router.add_get("/compare", self.html_compare)
        app.router.add_post("/compare", self.html_compare_post)
        self._register_annual_routes(app)
        app.router.add_get("/apps_editor", self.html_apps_editor)
        app.router.add_post("/apps_editor", self.html_apps_editor_post)
        app.router.add_get("/apps_editor_checksum", self.html_apps_editor_checksum)
        app.router.add_post("/plan_override", self.html_plan_override)
        app.router.add_post("/rate_override", self.html_rate_override)
        app.router.add_post("/restart", self.html_restart)
        app.router.add_post("/inverter_refresh", self.html_inverter_refresh)
        app.router.add_get("/api/state", self.html_api_get_state)
        app.router.add_get("/api/ping", self.html_api_ping)
        app.router.add_post("/api/state", self.html_api_post_state)
        app.router.add_post("/api/service", self.html_api_post_service)
        app.router.add_get("/api/plan_data", self.html_api_plan_data)
        app.router.add_get("/api/log", self.html_api_get_log)
        app.router.add_get("/api/entities", self.html_api_get_entities)
        app.router.add_post("/api/login", self.html_api_login)
        app.router.add_get("/browse", self.html_browse)
        app.router.add_get("/download", self.html_download_file)
        app.router.add_get("/images/{filename}", self.html_logo_image)
        app.router.add_get("/internals", self.html_internals)
        app.router.add_get("/api/internals", self.html_api_internals)
        app.router.add_get("/api/internals/download", self.html_api_internals_download)
        app.router.add_get("/api/status", self.html_api_get_status)
        app.router.add_get("/metrics", metrics_handler)
        app.router.add_get("/metrics/json", metrics_json_handler)
        app.router.add_get("/metrics_dashboard", self.html_metrics_dashboard)

        # Notify plugin system that web interface is ready
        if hasattr(self.base, "plugin_system") and self.base.plugin_system:
            self.base.plugin_system.call_hooks("on_web_start")

        # Register any dynamically registered endpoints
        for endpoint in self.registered_endpoints:
            if endpoint["method"] == "GET":
                app.router.add_get(endpoint["path"], endpoint["handler"])
            elif endpoint["method"] == "POST":
                app.router.add_post(endpoint["path"], endpoint["handler"])
            # Add more methods as needed
            self.log(f"Added registered endpoint: {endpoint['method']} {endpoint['path']}")

        runner = web.AppRunner(app)
        await runner.setup()
        site = web.TCPSite(runner, "0.0.0.0", self.web_port)
        await site.start()

        print("Web interface started")
        self.api_started = True
        count = 0
        while not self.api_stop:
            await asyncio.sleep(1)
            if count % 60 == 0:
                self.update_success_timestamp()
            count += 1

        # Otherwise a restart mid-run leaves the annual engine's child process
        # orphaned - burning a CPU core for up to several minutes with nothing left
        # tracking it - while the fresh AnnualPage created on the next start() reports
        # idle and would happily let a second run be started alongside it.
        await self.annual_page.job.cancel()
        await runner.cleanup()

        self.api_started = False
        print("Web interface stopped")

    def get_attributes_html(self, entity, from_db=False):
        """
        Return the attributes of an entity as HTML
        """
        text = ""
        attributes = {}
        if from_db:
            history = self.get_history_wrapper(entity, 1, required=False)
            if history and len(history) >= 1:
                history = history[0]
                if history:
                    attributes = history[0].get("attributes", {})
        else:
            attributes = self.base.dashboard_values.get(entity, {}).get("attributes", {})
        if not attributes:
            return ""
        text += "<table>"
        for key in attributes:
            if key in ["icon", "device_class", "state_class", "unit_of_measurement", "friendly_name"]:
                continue
            value = attributes[key]
            full_value = str(value)[:16384]  # Limit to 16k
            full_value = full_value.replace("&", "&amp;").replace("<", "&lt;").replace(">", "&gt;").replace('"', "&quot;").replace("'", "&#39;")
            if len(str(value)) > 128:
                display_value = str(full_value)[:128] + " ... "
                # Escape HTML entities for tooltip
                text += '<tr><td>{}</td><td title="{}">{}</td></tr>'.format(key, full_value, display_value)
            else:
                # Also escape HTML entities for short values
                text += "<tr><td>{}</td><td>{}</td></tr>".format(key, full_value)
        text += "</table>"
        return text

    def icon2html(self, icon):
        if icon:
            icon = '<span class="mdi mdi-{}"></span>'.format(icon.replace("mdi:", ""))
        return icon

    def get_power_flow_diagram(self):
        """
        Generate a graphical power flow diagram showing energy movement between grid, battery, PV, and house load

        Each component (grid, battery, PV, House) will be represented with a circle
        arrows will run between the PV and Load, the Battery and Load and the House and Grid
        The energy the house consumes is called the Load Power
        The energy the PV generates is called the PV Power
        The energy the battery charges or discharges is called the Battery Power
        The energy the grid imports or exports is called the Grid Power

        The house will be a circle in the middle the PV will be top left, the battery bottom left and the grid bottom right
        """
        # Get power values
        grid_power = self.base.grid_power
        battery_power = self.base.battery_power
        pv_power = self.base.pv_power
        load_power = self.base.load_power

        # Determine flow directions
        grid_importing = grid_power <= -10  # Grid is importing power (negative value)
        grid_exporting = grid_power >= 10  # Grid is exporting power (positive value)

        battery_charging = battery_power >= 10  # Battery is charging (positive value)
        battery_discharging = battery_power <= -10  # Battery is discharging (negative value)

        pv_generating = pv_power > 0  # PV is generating power
        html = ""

        html += """
        <div style="text-align: left; margin: 0px;">
            <svg width="600" height="400" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg">

                <!-- Grid Circle -->
                <circle cx="450" cy="300" r="50" fill="#4CAF50" />
                <text x="450" y="300" text-anchor="middle" dy=".3em" fill="#fff">Grid</text>

                <!-- Battery Circle -->
                <circle cx="150" cy="300" r="50" fill="#FF9800" />
                <text x="150" y="300" text-anchor="middle" dy=".3em" fill="#fff">Battery</text>

                <!-- PV Circle -->
                <circle cx="150" cy="100" r="50" fill="#2196F3" />
                <text x="150" y="100" text-anchor="middle" dy=".3em" fill="#fff">PV</text>

                <!-- House Circle -->
                <circle cx="300" cy="200" r="50" fill="#9C27B0" />
                <text x="300" y="190" text-anchor="middle" dy=".3em" fill="#fff">House</text>
                <text x="300" y="215" text-anchor="middle" dy=".3em" fill="#fff">{} W</text>

                <!-- Define animation paths -->
                <defs>
                    <!-- PV to House path -->
                    <path id="pv-house-path" d="M200,100 L250,150" stroke="transparent" fill="none" />
                    <!-- House to PV path -->
                    <path id="house-pv-path" d="M250,150 L200,100" stroke="transparent" fill="none" />
                    <!-- Battery to House path -->
                    <path id="battery-house-path" d="M200,300 L250,250" stroke="transparent" fill="none" />
                    <!-- House to Battery path -->
                    <path id="house-battery-path" d="M265,235 L215,275" stroke="transparent" fill="none" />
                    <!-- Grid to House path -->
                    <path id="grid-house-path" d="M410,290 L355,240" stroke="transparent" fill="none" />
                    <!-- House to Grid path -->
                    <path id="house-grid-path" d="M340,230 L390,270" stroke="transparent" fill="none" />
                </defs>
        """.format(
            dp0(load_power)
        )
        # Draw arrows and labels
        if pv_generating:
            # Calculate animation speed based on power flow - faster for higher power
            pv_speed = max(0.5, min(3.0, 2.0 - (abs(pv_power) / 3000)))

            html += """
                <!-- PV to House Arrow -->
                <line x1="200" y1="100" x2="250" y2="150" stroke="#2196F3" stroke-width="2" marker-end="url(#pv-arrow)" />
                <text x="250" y="120" text-anchor="middle" fill="#2196F3">{} W</text>

                <!-- Moving dots for PV to House -->
                <circle r="4" fill="#2196F3" opacity="0.8">
                    <animateMotion dur="{}s" repeatCount="indefinite" path="M200,100 L250,150" />
                </circle>
                <circle r="3" fill="#2196F3" opacity="0.6">
                    <animateMotion dur="{}s" repeatCount="indefinite" begin="0.5s" path="M200,100 L250,150" />
                </circle>
                <circle r="2" fill="#2196F3" opacity="0.4">
                    <animateMotion dur="{}s" repeatCount="indefinite" begin="1.0s" path="M200,100 L250,150" />
                </circle>
            """.format(
                dp0(pv_power), pv_speed, pv_speed, pv_speed
            )
        else:
            # Make the PV to House line dashed if not generating
            html += """
                <!-- PV to House Arrow (dashed) -->
                <line x1="200" y1="100" x2="250" y2="150" stroke="#2196F3" stroke-width="2" stroke-dasharray="5,5" marker-end="url(#pv-arrow)" />
                <text x="250" y="120" text-anchor="middle" fill="#2196F3">{} W</text>
                <!-- No moving dot when PV is not generating -->
            """.format(
                dp0(pv_power)
            )
        if battery_charging:
            # Calculate animation speed based on power flow - faster for higher power
            battery_speed = max(0.5, min(3.0, 2.0 - (abs(battery_power) / 3000)))

            html += """
                <!-- Battery to House Arrow -->
                <line x1="200" y1="300" x2="250" y2="250" stroke="#FF9800" stroke-width="2" marker-end="url(#battery-arrow)" />
                <text x="260" y="280" text-anchor="middle" fill="#FF9800">{} W</text>

                <!-- Moving dots for Battery to House -->
                <circle r="4" fill="#FF9800" opacity="0.8">
                    <animateMotion dur="{}s" repeatCount="indefinite" path="M200,300 L250,250" />
                </circle>
                <circle r="3" fill="#FF9800" opacity="0.6">
                    <animateMotion dur="{}s" repeatCount="indefinite" begin="0.5s" path="M200,300 L250,250" />
                </circle>
                <circle r="2" fill="#FF9800" opacity="0.4">
                    <animateMotion dur="{}s" repeatCount="indefinite" begin="1.0s" path="M200,300 L250,250" />
                </circle>
            """.format(
                dp0(battery_power), battery_speed, battery_speed, battery_speed
            )
        else:
            # Calculate animation speed based on power flow - faster for higher power
            battery_speed = max(0.5, min(3.0, 2.0 - (abs(battery_power) / 3000)))

            html += """
                <!-- House to Battery Arrow -->
                <line x1="265" y1="235" x2="215" y2="275" stroke="#FF9800" stroke-width="2" marker-end="url(#battery-arrow)" />
                <text x="260" y="280" text-anchor="middle" fill="#FF9800">{} W</text>

                <!-- Moving dots for House to Battery -->
                <circle r="4" fill="#FF9800" opacity="0.8">
                    <animateMotion dur="{}s" repeatCount="indefinite" path="M265,235 L215,275" />
                </circle>
                <circle r="3" fill="#FF9800" opacity="0.6">
                    <animateMotion dur="{}s" repeatCount="indefinite" begin="0.5s" path="M265,235 L215,275" />
                </circle>
                <circle r="2" fill="#FF9800" opacity="0.4">
                    <animateMotion dur="{}s" repeatCount="indefinite" begin="1.0s" path="M265,235 L215,275" />
                </circle>
            """.format(
                dp0(battery_power), battery_speed, battery_speed, battery_speed
            )

        if grid_importing:
            # Calculate animation speed based on power flow - faster for higher power
            grid_speed = max(0.5, min(3.0, 2.0 - (abs(grid_power) / 3000)))

            html += """
                <!-- Grid to House Arrow -->
                <line x1="410" y1="290" x2="355" y2="240" stroke="#4CAF50" stroke-width="2" marker-end="url(#grid-arrow)" />
                <text x="350" y="280" text-anchor="middle" fill="#4CAF50">{} W</text>

                <!-- Moving dots for Grid to House -->
                <circle r="4" fill="#4CAF50" opacity="0.8">
                    <animateMotion dur="{}s" repeatCount="indefinite" path="M410,290 L355,240" />
                </circle>
                <circle r="3" fill="#4CAF50" opacity="0.6">
                    <animateMotion dur="{}s" repeatCount="indefinite" begin="0.5s" path="M410,290 L355,240" />
                </circle>
                <circle r="2" fill="#4CAF50" opacity="0.4">
                    <animateMotion dur="{}s" repeatCount="indefinite" begin="1.0s" path="M410,290 L355,240" />
                </circle>
            """.format(
                dp0(grid_power), grid_speed, grid_speed, grid_speed
            )
        else:
            # Calculate animation speed based on power flow - faster for higher power
            grid_speed = max(0.5, min(3.0, 2.0 - (abs(grid_power) / 3000)))

            html += """
                <!-- House to Grid Arrow -->
                <line x1="340" y1="230" x2="390" y2="270" stroke="#4CAF50" stroke-width="2" marker-end="url(#grid-arrow)" />
                <text x="340" y="280" text-anchor="middle" fill="#4CAF50">{} W</text>

                <!-- Moving dots for House to Grid -->
                <circle r="4" fill="#4CAF50" opacity="0.8">
                    <animateMotion dur="{}s" repeatCount="indefinite" path="M340,230 L390,270" />
                </circle>
                <circle r="3" fill="#4CAF50" opacity="0.6">
                    <animateMotion dur="{}s" repeatCount="indefinite" begin="0.5s" path="M340,230 L390,270" />
                </circle>
                <circle r="2" fill="#4CAF50" opacity="0.4">
                    <animateMotion dur="{}s" repeatCount="indefinite" begin="1.0s" path="M340,230 L390,270" />
                </circle>
            """.format(
                dp0(grid_power), grid_speed, grid_speed, grid_speed
            )
        html += """
                <!-- Arrowhead Marker -->
                <defs>
                    <marker id="pv-arrow" markerWidth="10" markerHeight="7" refX="0" refY="3.5" orient="auto">
                    <polygon points="0 0, 10 3.5, 0 7" fill="#2196F3"/>
                    </marker>
                    <marker id="battery-arrow" markerWidth="10" markerHeight="7" refX="0" refY="3.5" orient="auto">
                    <polygon points="0 0, 10 3.5, 0 7" fill="#FF9800"/>
                    </marker>
                    <marker id="grid-arrow" markerWidth="10" markerHeight="7" refX="0" refY="3.5" orient="auto">
                    <polygon points="0 0, 10 3.5, 0 7" fill="#4CAF50"/>
                    </marker>
                </defs>
            </svg>
        </div>

        <script>
        // Ensure the animations work correctly in both light and dark modes
        function adjustFlowAnimations() {
            const isDarkMode = document.body.classList.contains('dark-mode');

            // Could add additional animation adjustments here if needed for dark mode
            // This function is called when the page loads and can be extended for other special effects
        }

        // Run when page loads
        adjustFlowAnimations();
        </script>
        """

        return html

    def get_status_html(self, version):
        text = ""
        if not self.base.dashboard_index:
            text += "<h2>Loading please wait...</h2>"
            return text

        debug_enable, ignore = self.get_ha_config("debug_enable", None)
        read_only, ignore = self.get_ha_config("set_read_only", None)
        mode, ignore = self.get_ha_config("mode", None)

        # Create a two-column layout for Status and Debug tables
        text += '<div style="display: flex; gap: 5px; margin-bottom: 20px; max-width: 800px;">\n'

        # Left column - Status table
        text += '<div style="flex: 1;">\n'
        text += "<h2>Status</h2>\n"
        text += "<table>\n"

        try:
            is_running = self.base.is_running()
        except Exception as e:
            self.log("Error checking if Predbat is running: {}".format(e))
            is_running = False

        status_entity = self.prefix + ".status"
        last_updated = self.get_state_wrapper(status_entity, attribute="last_updated", default=None)
        if last_updated:
            try:
                last_updated = str2time(last_updated).replace(tzinfo=None, microsecond=0)
            except (ValueError, TypeError) as e:
                self.log("Warn: Failed to parse last_updated time {}: {}".format(last_updated, e))
        status = self.get_state_wrapper(status_entity, default="Unknown")
        detail = self.get_state_wrapper(status_entity, attribute="detail", default="")
        debug = self.get_state_wrapper(status_entity, attribute="debug", default="")
        status_full = status + " " + detail
        debug_escaped = str(debug).replace("&", "&amp;").replace("<", "&lt;").replace(">", "&gt;").replace('"', "&quot;")
        debug_title = ' title="{}"'.format(debug_escaped) if debug else ""
        if status and (("Warn:" in status) or ("Error:" in status)):
            text += "<tr><td>Status</td><td bgcolor=#ff7777{}>{}</td></tr>\n".format(debug_title, status_full)
        elif not is_running:
            text += "<tr><td colspan='2' bgcolor='#ff7777'{}>{} (unhealthy)</td></tr>\n".format(debug_title, status_full)
        else:
            text += "<tr><td>Status</td><td{}>{}</td></tr>\n".format(debug_title, status_full)
        text += "<tr><td>Last Updated</td><td>{}</td></tr>\n".format(last_updated)
        last_started = self.get_state_wrapper(self.prefix + ".last_started", default=None)
        if last_started:
            try:
                last_started = str2time(last_started).replace(tzinfo=None)
            except (ValueError, TypeError) as e:
                self.log("Warn: Failed to parse last_started time {}: {}".format(last_started, e))
        text += "<tr><td>Last Started</td><td>{}</td></tr>\n".format(last_started)
        text += "<tr><td>Version</td><td>{}</td></tr>\n".format(version)

        # Editable Mode field
        text += "<tr><td>Mode</td><td>"
        text += f'<form style="display: inline;" method="post" action="./dash">'
        text += f'<select name="mode" class="dashboard-select" onchange="this.form.submit()">'
        for option in self.base.config_index.get("mode", {}).get("options", []):
            selected = "selected" if option == mode else ""
            text += f'<option value="{option}" {selected}>{option}</option>'
        text += "</select></form></td></tr>\n"

        text += "<tr><td>SoC</td><td>{}</td></tr>\n".format(self.get_battery_status_icon())

        # Editable Debug Enable field
        text += "<tr><td>Debug Enable</td><td>"
        text += f'<form style="display: inline;" method="post" action="./dash">'
        toggle_class = "toggle-switch active" if debug_enable else "toggle-switch"
        text += f'<button class="{toggle_class}" type="button" onclick="toggleSwitch(this, \'debug_enable\')"></button>'
        text += "</form></td></tr>\n"

        # Editable Set Read Only field
        text += "<tr><td>Set Read Only</td><td>"
        text += f'<form style="display: inline;" method="post" action="./dash">'
        toggle_class = "toggle-switch active" if read_only else "toggle-switch"
        text += f'<button class="{toggle_class}" type="button" onclick="toggleSwitch(this, \'set_read_only\')"></button>'
        text += "</form></td></tr>\n"

        # Editable Predbat Active field
        predbat_active, ignore = self.get_ha_config("active", None)
        text += "<tr><td>Predbat Active</td><td>"
        text += f'<form style="display: inline;" method="post" action="./dash">'
        toggle_class = "toggle-switch active" if predbat_active else "toggle-switch"
        text += f'<button class="{toggle_class}" type="button" onclick="toggleSwitch(this, \'active\')" title="On during calculations, off otherwise"></button>'
        text += "</form></td></tr>\n"
        if self.arg_errors:
            count_errors = len(self.arg_errors)
            text += "<tr><td>Config</td><td bgcolor=#ff7777>apps.yaml has {} errors</td></tr>\n".format(count_errors)
        else:
            text += "<tr><td>Config</td><td>OK</td></tr>\n"
        text += "</table>\n"
        text += "</div>\n"

        # Right column - Debug table
        text += '<div style="flex: 1;">\n'
        text += "<h2>Debug</h2>\n"
        text += "<table>\n"
        text += "<tr><td>Download</td><td><a href='javascript:void(0)' onclick='downloadLiveApps()'>apps.yaml (live)</a> | <a href='./debug_apps'>apps.yaml (file)</a></td></tr>\n"
        text += "<tr><td>Create</td><td><a href='./debug_yaml'>predbat_debug.yaml</a></td></tr>\n"
        text += "<tr><td>Download</td><td><a href='./debug_log'>predbat.log</a></td></tr>\n"
        text += "<tr><td>Download</td><td><a href='./debug_plan'>predbat_plan.html</a></td></tr>\n"
        text += "<tr><td>Restart</td><td><button onclick='restartPredbat()' style='background-color: #ff4444; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-weight: bold;'>Restart Predbat</button></td></tr>\n"
        text += "</table>\n"
        text += "</div>\n"

        # Close the two-column layout
        text += "</div>\n"

        # Add power flow diagram
        text += "<h2>Power Flow</h2>\n"
        text += """<div style="margin-bottom: 8px; display: flex; align-items: center; gap: 10px;">
            <button id="inverterRefreshBtn" onclick="refreshInverterData()" style="background-color: #2196F3; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-weight: bold;">Refresh</button>
            <span id="inverterRefreshStatus" style="font-size: 13px; color: #666;"></span>
        </div>
        """
        text += get_refresh_inverter_js()
        text += self.get_power_flow_diagram()

        # Text description of the plan
        text += "<h2>Plan textual description</h2>\n"
        text += "<table>\n"
        text_plan = self.get_state_wrapper(entity_id=self.prefix + ".plan_html", attribute="text", default="No plan available")
        text += "<tr><td>{}</td></tr>\n".format(text_plan)
        text += "</table>\n"

        # Form the app list
        app_list = ["predbat"]
        for entity_id in self.base.dashboard_index_app.keys():
            app = self.base.dashboard_index_app[entity_id]
            if app not in app_list:
                app_list.append(app)

        # Add expand/collapse all button
        text += '<div style="margin: 20px 0;">\n'
        text += '<button id="expandAllBtn" class="expand-all-button" onclick="toggleAllSections()">Expand All</button>\n'
        text += "</div>\n"

        # Display per app
        for app in app_list:
            section_id = f"section-{app}"

            # Build entity list first to get count
            if app == "predbat":
                entity_list = self.base.dashboard_index
            else:
                entity_list = []
                for entity_id in self.base.dashboard_index_app.keys():
                    if self.base.dashboard_index_app[entity_id] == app:
                        entity_list.append(entity_id)

            entity_count = len(entity_list)
            entity_word = "entity" if entity_count == 1 else "entities"

            text += f'<div class="dashboard-section">\n'
            text += f'<h2 class="dashboard-section-header" onclick="toggleDashboardSection(\'{section_id}\')">\n'
            text += f'<span class="expand-icon" id="icon-{section_id}">+</span> {app[0].upper() + app[1:]} Entities ({entity_count} {entity_word})\n'
            text += "</h2>\n"
            text += f'<div id="{section_id}" class="dashboard-section-content collapsed">\n'
            text += "<table>\n"
            text += "<tr><th></th><th>Name</th><th>Entity</th><th>State</th><th>Attributes</th></tr>\n"

            for entity in entity_list:
                text += self.html_get_entity_text(entity)
            text += "</table>\n"
            text += "</div>\n"
            text += "</div>\n"

        return text

    def html_get_entity_text(self, entity):
        text = ""
        if entity in self.base.dashboard_values:
            state = self.base.dashboard_values.get(entity, {}).get("state", None)
            attributes = self.base.dashboard_values.get(entity, {}).get("attributes", {})
            unit_of_measurement = attributes.get("unit_of_measurement", "")
            icon = self.icon2html(attributes.get("icon", ""))
            if unit_of_measurement is None:
                unit_of_measurement = ""
            friendly_name = attributes.get("friendly_name", "")
            if state is None:
                state = "None"
            text += '<tr><td> {} </td><td> <a href="./entity?entity_id={}"> {} </a></td><td>{}</td><td>{} {}</td><td>{}</td></tr>\n'.format(icon, entity, friendly_name, entity, state, unit_of_measurement, self.get_attributes_html(entity))
        else:
            state = self.get_state_wrapper(entity_id=entity)
            unit_of_measurement = self.get_state_wrapper(entity_id=entity, attribute="unit_of_measurement")
            friendly_name = self.get_state_wrapper(entity_id=entity, attribute="friendly_name")
            text += '<tr><td> {} </td><td> <a href="./entity?entity_id={}"> {} </a></td><td>{}</td><td>{} {}</td><td>{}</td></tr>\n'.format("", entity, friendly_name, entity, state, unit_of_measurement, self.get_attributes_html(entity, from_db=True))
        return text

    def get_entity_list_data(self):
        """
        Generate entity list data for the entity selector
        """
        # Get app list
        app_list = ["predbat"]
        for entity_id in self.base.dashboard_index_app.keys():
            app = self.base.dashboard_index_app[entity_id]
            if app not in app_list:
                app_list.append(app)

        entity_data_list = []

        for app in app_list:
            if app == "predbat":
                entity_list = self.base.dashboard_index if hasattr(self.base, "dashboard_index") and self.base.dashboard_index else []
            else:
                entity_list = []
                if hasattr(self.base, "dashboard_index_app") and self.base.dashboard_index_app:
                    for entity_id in self.base.dashboard_index_app.keys():
                        if self.base.dashboard_index_app[entity_id] == app:
                            entity_list.append(entity_id)

            for entity_id in entity_list:
                if hasattr(self.base, "dashboard_values") and self.base.dashboard_values:
                    attributes = self.base.dashboard_values.get(entity_id, {}).get("attributes", {})
                    entity_friendly_name = attributes.get("friendly_name", entity_id)
                    unit = attributes.get("unit_of_measurement", "")
                    if unit:
                        entity_friendly_name = f"{entity_friendly_name} ({unit})"
                else:
                    entity_friendly_name = entity_id

                entity_data_list.append({"id": entity_id, "name": entity_friendly_name, "group": f"{app[0].upper() + app[1:]} Entities"})

        # Add config settings
        if hasattr(self.base, "CONFIG_ITEMS") and self.base.CONFIG_ITEMS:
            for item in self.base.CONFIG_ITEMS:
                if self.base.user_config_item_enabled(item):
                    entity_id = item.get("entity", "")
                    entity_friendly_name = item.get("friendly_name", "")
                    unit = self.base.convert_currency_unit(item.get("unit", ""))
                    if unit:
                        entity_friendly_name = f"{entity_friendly_name} ({unit})"
                    if entity_id:
                        entity_data_list.append({"id": entity_id, "name": entity_friendly_name, "group": "Config Settings"})

        return entity_data_list

    def get_all_entity_list_data(self):
        """
        Return all Home Assistant entities grouped by domain.
        """
        state_data = self.get_state_wrapper()
        entity_data_list = []
        if isinstance(state_data, dict):
            for entity_id in sorted(state_data.keys()):
                state_info = state_data[entity_id]
                if isinstance(state_info, dict):
                    attributes = state_info.get("attributes", {})
                    friendly_name = attributes.get("friendly_name", entity_id)
                    unit = attributes.get("unit_of_measurement", "")
                    if unit:
                        friendly_name = f"{friendly_name} ({unit})"
                else:
                    friendly_name = entity_id
                domain = entity_id.split(".")[0] if "." in entity_id else "other"
                group = domain[0].upper() + domain[1:] + " Entities"
                entity_data_list.append({"id": entity_id, "name": friendly_name, "group": group})
        return entity_data_list

    async def html_api_get_entities(self, request):
        """
        API endpoint to get entity list as JSON
        """
        try:
            show_all = request.query.get("all", "0") == "1"
            if show_all:
                entity_list = self.get_all_entity_list_data()
            else:
                entity_list = self.get_entity_list_data()
            return web.json_response(entity_list)
        except Exception as e:
            self.base.log(f"Error in html_api_get_entities: {e}")
            return web.json_response({"error": str(e)}, status=500)

    async def get_history_with_now(self, entity_id, days, attribute=None):
        """
        Get history for an entity including the current state
        """
        history = copy.deepcopy(self.get_history_wrapper(entity_id, days, required=False, tracked=False))  # Copy to avoid modifying original history
        current_value = self.get_state_wrapper(entity_id=entity_id, attribute=attribute)
        if current_value is not None:
            if not history:
                history = [[]]
                if attribute:
                    history[0].append({"attributes": {attribute: current_value}, "last_updated": (self.now_now_utc - timedelta(days=days)).strftime(TIME_FORMAT_HA)})
                else:
                    history[0].append({"state": current_value, "last_updated": (self.now_utc - timedelta(days=days)).strftime(TIME_FORMAT_HA)})
            if attribute:
                history[0].append({"attributes": {attribute: current_value}, "last_updated": self.now_utc.strftime(TIME_FORMAT_HA)})
            else:
                history[0].append({"state": current_value, "last_updated": self.now_utc.strftime(TIME_FORMAT_HA)})

        return history

    def get_history_with_now_attrs(self, entity_id, days):
        """
        Get history for an entity and append a record at now_utc containing all current
        attributes. This keeps chart series up-to-date when entities publish infrequently.

        Args:
            entity_id: HA entity ID
            days: Number of days of history to fetch

        Returns:
            History list [[records...]] with current attributes appended at self.now_utc
        """
        history = copy.deepcopy(self.get_history_wrapper(entity_id, days, required=False, tracked=False))
        current_state = self.get_state_wrapper(entity_id, raw=True)
        if current_state and isinstance(current_state, dict) and "attributes" in current_state:
            curr_record = {"state": current_state.get("state"), "attributes": current_state["attributes"], "last_updated": self.now_utc.strftime(TIME_FORMAT_HA)}
            if history and isinstance(history, list) and len(history) > 0:
                history[0].append(curr_record)
            else:
                history = [[curr_record]]
        return history

    def get_entity_attributes(self, entity_id):
        """
        get_entity_attributes returns a list of attribute names for the given entity_id
        """
        state_info = self.get_state_wrapper(entity_id=entity_id, raw=True)
        if state_info and ("attributes" in state_info) and isinstance(state_info["attributes"], dict):
            attr_list = sorted(list(state_info["attributes"].keys()))
            for attr in ["friendly_name", "icon", "unit_of_measurement", "device_class", "state_class"]:
                try:
                    attr_list.remove(attr)
                except ValueError:
                    pass
            return attr_list
        return []

    async def html_entity(self, request):
        """
        Return the Predbat entity as an HTML page
        """
        # Support multiple entity_id parameters
        entity_ids = request.query.getall("entity_id", [])
        if not entity_ids:
            # Fallback to single entity_id for backward compatibility
            single_entity = request.query.get("entity_id", "")
            entity_ids = [single_entity] if single_entity else []

        # Get attribute selections (parallel to entity_ids)
        entity_attributes = request.query.getall("entity_attribute", [])

        # Build entity_selections list pairing entity IDs with attributes
        # Each entity can have multiple attributes (comma-separated)
        entity_selections = []
        for i, entity_id in enumerate(entity_ids):
            if entity_id:
                attr_string = entity_attributes[i] if i < len(entity_attributes) else ""
                # Parse comma-separated attributes
                if attr_string:
                    # Keep empty strings (they represent state)
                    attrs = [a.strip() if a.strip() else None for a in attr_string.split(",")]
                else:
                    attrs = [None]  # Default to state

                # Create one selection per attribute
                for attr in attrs:
                    entity_selections.append({"entity_id": entity_id, "attribute": attr})

        days = int(request.query.get("days", 7))  # Default to 7 days if not specified

        text = self.get_header("Predbat Entity", refresh=0)

        # Include a back button to return the previous page, and a reload button in case the
        # entities selected weren't available yet when the page was first loaded
        text += """<div style="margin-bottom: 15px;">
            <a href="{}" class="button" style="display: inline-block; padding: 8px 15px; background-color: #4CAF50; color: white; text-decoration: none; border-radius: 4px; font-weight: bold;">
                <span class="mdi mdi-arrow-left" style="margin-right: 5px;"></span>Back
            </a>
            <button onclick="location.reload()" style="display: inline-block; margin-left: 10px; padding: 8px 15px; background-color: #2196F3; color: white; border: none; text-decoration: none; border-radius: 4px; font-weight: bold; cursor: pointer;">
                <span class="mdi mdi-refresh" style="margin-right: 5px;"></span>Reload
            </button>
        </div>""".format(
            self.default_page
        )

        # Collect available attributes for all selected entities
        entity_attributes_map = {}
        entity_data_fetch = {}
        for selection in entity_selections:
            entity_id = selection["entity_id"]
            attribute = selection["attribute"]
            history = await self.get_history_with_now(entity_id, days, attribute=None)
            entity_data_fetch[entity_id] = history
            available_attrs = self.get_entity_attributes(entity_id)
            entity_attributes_map[entity_id] = available_attrs

        # Build selected entities data structure with attributes grouped by entity
        entity_attr_groups = {}
        for selection in entity_selections:
            entity_id = selection["entity_id"]
            attr = selection["attribute"] or ""
            if entity_id not in entity_attr_groups:
                entity_attr_groups[entity_id] = []
            if attr not in entity_attr_groups[entity_id]:
                entity_attr_groups[entity_id].append(attr)

        # Convert to array format for JavaScript
        selected_entities_data = [{"entity": entity_id, "attributes": attrs} for entity_id, attrs in entity_attr_groups.items()]
        selected_entities_json = json.dumps(selected_entities_data)
        entity_attributes_json = json.dumps(entity_attributes_map)

        # Add entity multi-select dropdown with checkboxes
        text += """<div style="margin-bottom: 20px;">
            <form id="entitySelectForm" method="get" action="./entity">
                <label for="entitySearchInput" style="margin-right: 10px; font-weight: bold;">Select Entities: </label>
                <label style="margin-right: 15px; font-weight: normal; white-space: nowrap;"><input type="checkbox" id="showAllEntities" onchange="toggleShowAll(this.checked)" /> Show All</label>
                <div class="entity-search-container" style="position: relative; max-width: 800px;">
                    <input type="text" id="entitySearchInput" name="entity_search"
                           placeholder="Type to search entities... (click to show all)"
                           style="width: 100%; padding: 8px 30px 8px 8px; border-radius: 4px; border: 1px solid #ddd; box-sizing: border-box;"
                           autocomplete="off" />
                    <button type="button" id="clearEntitySearch"
                            style="position: absolute; right: 5px; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 16px; color: #999; cursor: pointer; padding: 2px 5px;"
                            title="Clear search">×</button>
                    <div id="entityDropdown" class="entity-dropdown"
                         style="position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #ddd; border-top: none; max-height: 400px; overflow-y: auto; z-index: 1000; display: none; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                    </div>
                </div>
                <div id="selectedEntitiesDisplay" style="margin-top: 10px; padding: 10px; border: 1px solid #ddd; border-radius: 4px; min-height: 40px; background-color: var(--background-secondary, #f9f9f9);"></div>
                <input type="hidden" name="days" value="{}" />
                <button type="submit" style="margin-top: 10px; padding: 8px 16px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold;">Update Chart</button>
            </form>
        </div>""".format(
            days
        )

        # Add days selector
        text += """<div style="margin-bottom: 20px;">
            <form id="daysSelectForm" style="display: flex; align-items: center;" method="get" action="./entity">
                <label for="daysSelect" style="margin-right: 10px; font-weight: bold;">History Days: </label>
                <select id="daysSelect" name="days" style="padding: 8px; border-radius: 4px; border: 1px solid #ddd;" onchange="document.getElementById('daysSelectForm').submit();">
        """

        # Add days options
        for option in [1, 2, 3, 4, 5, 7, 10, 14, 21, 30, 60, 90]:
            selected = "selected" if option == days else ""
            text += f'<option value="{option}" {selected}>{option} days</option>'

        text += """
                </select>
        """

        # Add hidden inputs for all selected entities with attributes
        for entity_id, attrs in entity_attr_groups.items():
            attr_string = ",".join(attrs)
            text += f'<input type="hidden" name="entity_id" value="{entity_id}" />'
            text += f'<input type="hidden" name="entity_attribute" value="{attr_string}" />'

        text += """
            </form>
        </div>"""
        # CSS
        text += get_entity_css()

        # Add JavaScript and CSS for entity list and search (with attribute selection support)
        text += get_entity_js(selected_entities_json, entity_attributes_json)

        if entity_selections:
            # Group entities by unit of measurement
            entity_groups = {}
            for selection in entity_selections:
                entity_id = selection["entity_id"]
                attribute = selection["attribute"]

                live_unit = live_friendly_name = None
                if entity_id not in self.base.dashboard_values:
                    live_unit = self.get_state_wrapper(entity_id=entity_id, attribute="unit_of_measurement")
                    live_friendly_name = self.get_state_wrapper(entity_id=entity_id, attribute="friendly_name")
                unit, friendly_name = resolve_group_unit_and_name(entity_id, self.base.dashboard_values, live_unit, live_friendly_name)

                if unit not in entity_groups:
                    entity_groups[unit] = []

                entity_groups[unit].append({"id": entity_id, "friendly_name": friendly_name, "unit": unit, "attribute": attribute, "available_attrs": entity_attributes_map.get(entity_id, [])})

            # Display entity details table for first selected entity
            if len(entity_selections) == 1:
                entity = entity_selections[0]["entity_id"]
                config_text = self.html_config_item_text(entity)
                if not config_text:
                    text += "<table>\n"
                    text += "<tr><th></th><th>Name</th><th>Entity</th><th>State</th><th>Attributes</th></tr>\n"
                    text += self.html_get_entity_text(entity)
                    text += "</table>\n"
                else:
                    text += config_text

                control_html = self.get_entity_control_html(entity, days)
                if control_html:
                    text += control_html
            else:
                # Show summary of selected entities
                text += "<h2>Selected Entities ({})</h2>\n".format(len(entity_selections))
                text += "<table>\n"
                text += "<tr><th>Name</th><th>Entity</th><th>Attribute</th><th>Current State</th><th>Unit</th></tr>\n"
                for selection in entity_selections:
                    entity_id = selection["entity_id"]
                    attribute = selection["attribute"]
                    if entity_id:
                        text += self.html_get_entity_text(entity_id)
                text += "</table>\n"

            # Create separate charts for each unit group
            now_str = self.now_utc.strftime(TIME_FORMAT)

            for unit, entities in entity_groups.items():
                # Numeric and non-numeric entities are split per-entity (not decided once for the
                # whole group) so a numeric entity sharing a unit with a non-numerical one still
                # gets a proper line chart instead of being dropped into a broken timeline chart.
                numeric_entries, timeline_entries = split_entities_for_charting(entities, entity_data_fetch)
                if not numeric_entries and not timeline_entries:
                    continue

                text += "<h2>History Chart - {}</h2>\n".format(unit if unit != "(no unit)" else "(no unit)")
                base_chart_id = "chart_{}".format(unit.replace("/", "_").replace(" ", "_").replace("(", "").replace(")", ""))

                if numeric_entries:
                    chart_id = base_chart_id
                    text += '<div id="{}"></div>'.format(chart_id)
                    series_data = [{"name": item["name"], "data": item["data"], "chart_type": "line", "stroke_width": "2", "stroke_curve": "stepline"} for item in numeric_entries]
                    chart_unit = unit if unit != "(no unit)" else ""
                    chart_title = "{} entities".format(len(numeric_entries)) if len(numeric_entries) > 1 else numeric_entries[0]["friendly_name"]
                    text += self.render_chart(series_data, chart_unit, chart_title, now_str, tagname=chart_id)

                if timeline_entries:
                    chart_id = base_chart_id + "_timeline" if numeric_entries else base_chart_id
                    text += '<div id="{}"></div>'.format(chart_id)
                    text += self.render_timeline_chart(timeline_entries, chart_id, days)

            # History table showing all selected entities
            if entity_selections:
                text += "<h2>History</h2>\n"
                text += """
                <style>
                .history-row { cursor: pointer; }
                .history-row:hover { background-color: var(--hover-color, #f5f5f5); }
                .detail-row { display: none; background-color: var(--detail-bg, #fafafa); }
                .detail-row td { padding-left: 30px; font-size: 0.9em; color: var(--text-secondary, #666); }
                .expanded { background-color: var(--expanded-bg, #e8f4f8) !important; }
                .changed-cell { font-weight: bold; background-color: #ffd6e0; }
                body.dark-mode .changed-cell { background-color: #5c1a2e; color: #ffb3c6; }
                .reverted-cell { font-weight: bold; background-color: #cce8ff; }
                body.dark-mode .reverted-cell { background-color: #0d2e4a; color: #90caff; }
                </style>
                """
                text += '<button onclick="downloadEntityCSV()" style="margin-bottom: 10px; padding: 7px 14px; background-color: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold;">&#11015; Download CSV</button>\n'
                text += "<table>\n"

                # Build header row
                text += "<tr><th>Time</th>"
                for selection in entity_selections:
                    entity_id = selection["entity_id"]
                    attribute = selection["attribute"]
                    attributes = self.base.dashboard_values.get(entity_id, {}).get("attributes", {})
                    friendly_name = attributes.get("friendly_name", entity_id)
                    unit = attributes.get("unit_of_measurement", "")
                    unit_display = f" ({unit})" if unit else ""
                    attr_display = f" - {attribute}" if attribute else ""
                    text += f"<th>{friendly_name}{attr_display}{unit_display}</th>"
                text += "</tr>\n"

                # Collect and bucket history data for all entities (both 30-min summary and 5-min detail)
                entity_filled_30min, entity_filled_5min, sorted_timestamps_30min, _ = build_entity_history_table_data(entity_selections, entity_data_fetch)

                # Pre-compute per-row cell classes so we can decide which rows to show
                num_cols = len(entity_selections)
                row_data = []  # list of (timestamp_30, [(value, cell_class), ...], has_highlight)
                for timestamp_30 in sorted_timestamps_30min:
                    cells = []
                    has_highlight = False
                    for filled_30, filled_5 in zip(entity_filled_30min, entity_filled_5min):
                        value, is_changed, prev_value = filled_30.get(timestamp_30, ("-", False, None))
                        if is_changed:
                            cell_class = ' class="changed-cell"'
                            has_highlight = True
                        else:
                            # Flag a row that held its value at both ends but moved somewhere inside its own half hour
                            sub_vals = [filled_5.get(timestamp_30 + timedelta(minutes=off), ("-", False, None))[0] for off in range(5, 30, 5)]
                            if any(v != value for v in sub_vals):
                                cell_class = ' class="reverted-cell"'
                                has_highlight = True
                            else:
                                cell_class = ""
                        cells.append((value, cell_class))
                    row_data.append((timestamp_30, cells, has_highlight))

                # Build table rows — skip unchanged rows (except the oldest), inserting gap rows on skips
                row_index = 0
                oldest_idx = len(row_data) - 1
                skipped_count = 0
                prev_row_ts = None  # Previous row_data entry (visible or skipped) — for detecting history gaps
                for i, (timestamp_30, cells, has_highlight) in enumerate(row_data):
                    is_oldest = i == oldest_idx

                    # Count slots absent from history entirely (gap between consecutive row_data entries).
                    # Using prev_row_ts (not prev visible ts) avoids double-counting rows already
                    # incremented via skipped_count += 1 below.
                    if prev_row_ts is not None:
                        gap_minutes = int((prev_row_ts - timestamp_30).total_seconds() / 60)
                        missing_slots = max(0, (gap_minutes // 30) - 1)
                        skipped_count += missing_slots

                    prev_row_ts = timestamp_30

                    if not has_highlight and not is_oldest:
                        skipped_count += 1
                        continue

                    # If we skipped rows (present-but-unchanged OR absent from history), emit a gap separator
                    if skipped_count > 0:
                        col_span = 1 + num_cols
                        text += f'<tr class="gap-row"><td colspan="{col_span}" style="text-align:center; font-style:italic; font-size:0.85em; color:var(--text-secondary,#888); border-top:2px dashed #aaa; border-bottom:2px dashed #aaa; padding:4px;">— {skipped_count} unchanged slot{"s" if skipped_count != 1 else ""} hidden —</td></tr>\n'
                        skipped_count = 0

                    # Main 30-minute row (clickable)
                    text += f'<tr class="history-row" onclick="toggleDetailRow({row_index})" id="row_{row_index}">'
                    text += f"<td>▶ {timestamp_30.strftime(TIME_FORMAT)}</td>"
                    for value, cell_class in cells:
                        text += f"<td{cell_class}>{value}</td>"
                    text += "</tr>\n"

                    # Detail rows: the remaining 5-minute slots inside this row's own half hour,
                    # newest first to match the table's ordering (the row itself covers offset 0)
                    for offset in range(25, 0, -5):
                        detail_time = timestamp_30 + timedelta(minutes=offset)
                        text += f'<tr class="detail-row" id="detail_{row_index}">'
                        text += f"<td>  {detail_time.strftime(TIME_FORMAT)}</td>"
                        for filled in entity_filled_5min:
                            value, is_changed, prev_value = filled.get(detail_time, ("-", False, None))
                            cell_class = ' class="changed-cell"' if is_changed else ""
                            text += f"<td{cell_class}>{value}</td>"
                        text += "</tr>\n"

                    row_index += 1

                text += "</table><br>\n"

                # Build CSV data for download (all 30-min slots, unfiltered, with carry-forward values)
                csv_col_headers = ["Time"]
                for sel in entity_selections:
                    sel_eid = sel["entity_id"]
                    sel_attr = sel["attribute"]
                    sel_attrs = self.base.dashboard_values.get(sel_eid, {}).get("attributes", {})
                    sel_friendly = sel_attrs.get("friendly_name", sel_eid)
                    sel_unit = sel_attrs.get("unit_of_measurement", "")
                    sel_unit_disp = f" ({sel_unit})" if sel_unit else ""
                    sel_attr_disp = f" - {sel_attr}" if sel_attr else ""
                    csv_col_headers.append(f"{sel_friendly}{sel_attr_disp}{sel_unit_disp}")
                csv_all_rows = []
                for ts in sorted_timestamps_30min:
                    row_vals = [ts.strftime(TIME_FORMAT)]
                    for filled_30 in entity_filled_30min:
                        val, _, _ = filled_30.get(ts, ("-", False, None))
                        row_vals.append(str(val))
                    csv_all_rows.append(row_vals)
                csv_data_json = json.dumps({"headers": csv_col_headers, "rows": csv_all_rows})
                text += f"<script>var csvData = {csv_data_json};\n"
                text += """function downloadEntityCSV() {
    var h = csvData.headers.map(function(v) { return '"' + String(v).replace(/"/g, '""') + '"'; });
    var lines = [h.join(',')];
    for (var i = 0; i < csvData.rows.length; i++) {
        var r = csvData.rows[i].map(function(v) { return '"' + String(v).replace(/"/g, '""') + '"'; });
        lines.push(r.join(','));
    }
    var blob = new Blob([lines.join('\\n')], {type: 'text/csv'});
    var a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = 'entity_history.csv';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(a.href);
}
</script>"""

                # Add JavaScript for toggling detail rows
                text += get_entity_detailed_row_js()
        else:
            text += "<h2>Select one or more entities</h2>\n"

        # Return web response
        text += "</body></html>\n"
        return web.Response(content_type="text/html", text=text)

    async def html_entity_post(self, request):
        """
        Handle POST request for entity value updates
        """
        try:
            postdata = await request.post()
            entity_id = postdata.get("entity_id", "")
            new_value = postdata.get("value", "")
            days = postdata.get("days", "7")
            attributes = self.base.dashboard_values.get(entity_id, {}).get("attributes", {})

            if entity_id:
                # Determine entity type from entity_id domain
                domain = entity_id.split(".")[0] if "." in entity_id else ""

                # Convert value based on entity type
                if domain in ["switch", "input_boolean"]:
                    # For toggle switches, check if value is 'on' or 'off'
                    new_value = new_value.lower() == "on"
                elif domain in ["number", "input_number"]:
                    try:
                        new_value = float(new_value) if new_value else 0.0
                    except ValueError:
                        new_value = 0.0
                elif domain in ["select", "input_select"]:
                    # Keep as string for select entities
                    pass

                # Set the entity state
                await self.set_state_external(entity_id, new_value, attributes=attributes)
                self.log(f"Entity {entity_id} updated to {new_value} via web interface")

        except Exception as e:
            self.log(f"Error updating entity value: {e}")

        # Redirect back to entity page with same parameters
        redirect_url = f"./entity?entity_id={entity_id}&days={days}"
        raise web.HTTPFound(redirect_url)

    def is_entity_writable(self, entity_id):
        """
        Determine if an entity is writable and return its control type
        Returns: (is_writable, control_type, options)
        """
        if not entity_id or "." not in entity_id:
            return False, None, None

        domain = entity_id.split(".")[0]

        # Check if it's a writable entity type
        if domain in ["switch", "input_boolean"]:
            return True, "toggle", None
        elif domain in ["number", "input_number"]:
            return True, "number", None
        elif domain in ["select", "input_select"]:
            options = self.get_state_wrapper(entity_id=entity_id, attribute="options", default=[])
            return True, "select", options

        return False, None, None

    def get_entity_control_html(self, entity_id, days):
        """
        Generate HTML control for writable entities
        """
        current_value = self.get_state_wrapper(entity_id=entity_id)

        is_writable, control_type, options = self.is_entity_writable(entity_id)

        if not is_writable:
            return ""

        html = '<div class="entity-edit-container" style="margin-top: 15px; padding: 15px; border: 1px solid var(--border-color, #ddd); border-radius: 5px; background-color: var(--background-secondary, #f9f9f9);">'

        # Add CSS for dark mode support
        html += get_entity_control_css()

        html += f'<form method="post" action="./entity" style="display: flex; align-items: center; gap: 10px;">'
        html += f'<input type="hidden" name="entity_id" value="{entity_id}">'
        html += f'<input type="hidden" name="days" value="{days}">'

        if control_type == "toggle":
            is_active = str(current_value).lower() in ["true", "on", "1"]
            toggle_class = "toggle-switch active" if is_active else "toggle-switch"

            html += f'<div style="display: flex; align-items: center; gap: 10px;">'
            html += f'<button class="{toggle_class}" type="button" onclick="toggleEntitySwitch(this, \'{entity_id}\', {days})"></button>'
            html += f"<span>Enable/Disable</span>"
            html += f"</div>"

            # Add JavaScript for toggle functionality
            html += get_entity_toggle_js()

        elif control_type == "number":
            min_val = self.get_state_wrapper(entity_id=entity_id, attribute="min", default=None)
            max_val = self.get_state_wrapper(entity_id=entity_id, attribute="max", default=None)
            step = self.get_state_wrapper(entity_id=entity_id, attribute="step", default=1)
            unit = self.get_state_wrapper(entity_id=entity_id, attribute="unit_of_measurement", default="")

            unit_display = f" {unit}" if unit else ""

            html += f'<input type="number" name="value" value="{current_value}" '
            if min_val is not None and max_val is not None and step is not None:
                html += f'min="{min_val}" max="{max_val}" step="{step}" '
            html += f'style="padding: 8px; border-radius: 4px; border: 1px solid var(--border-color, #ccc); width: 120px; background-color: var(--input-background, #fff); color: var(--text-color, #333);" '
            if unit_display:
                html += f'<span style="margin-left: 5px; color: var(--text-secondary, #666);">{unit}</span>'
            html += '<button type="submit" style="padding: 8px 16px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold;">Update</button>'

        elif control_type == "select" and options:
            html += f'<select name="value" style="padding: 8px; border-radius: 4px; border: 1px solid var(--border-color, #ccc); min-width: 150px; background-color: var(--input-background, #fff); color: var(--text-color, #333);">'
            for option in options:
                selected = "selected" if str(option) == str(current_value) else ""
                html += f'<option value="{option}" {selected}>{option}</option>'
            html += "</select>"
            html += '<button type="submit" style="padding: 8px 16px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold;">Update</button>'

        html += "</form>"
        html += "</div>"

        return html

    def get_entity_detailedForecast(self, entity, subitem="pv_estimate"):
        results = {}
        detailedForecast = self.base.dashboard_values.get(entity, {}).get("attributes", {}).get("detailedForecast", {})
        if detailedForecast:
            for item in detailedForecast:
                sub = item.get(subitem, None)
                start = item.get("period_start", None)
                if (sub is not None) and (start is not None):
                    results[start] = sub
        return results

    def get_entity_results(self, entity):
        results = self.base.dashboard_values.get(entity, {}).get("attributes", {}).get("results", {})
        return results

    def get_header(self, title, refresh=0, codemirror=False):
        calculating = self.get_arg("active", False)
        if self.base.update_pending:
            calculating = True
        self.update_success_timestamp()
        return get_header_html(title, calculating, self.default_page, self.arg_errors, THIS_VERSION_DISPLAY, self.get_battery_status_icon(), refresh, codemirror=codemirror)

    def get_chart_series(self, name, results, chart_type, color):
        """
        Return HTML for a chart series
        """
        text = ""
        text += "   {\n"
        text += "    name: '{}',\n".format(name)
        text += "    type: '{}',\n".format(chart_type)
        if color:
            text += "    color: '{}',\n".format(color)
        text += "    data: [\n"
        first = True
        for key in results:
            if not first:
                text += ","
            first = False
            text += "{"
            text += "x: new Date('{}').getTime(),".format(key)
            text += "y: {}".format(results[key])
            text += "}"
        text += "  ]\n"
        text += "  }\n"
        return text

    def render_chart(self, series_data, yaxis_name, chart_name, now_str, tagname="chart", daily_chart=True, extra_yaxis=None):
        """
        Render a chart
        """
        midnight_str = (self.midnight_utc + timedelta(days=1)).strftime(TIME_FORMAT)
        text = ""
        if daily_chart:
            text += """
<script>
window.onresize = function(){ location.reload(); };
var width = window.innerWidth;
var height = window.innerHeight;
if (width < 600) {
    width = 600
}
width = width - 50;
height = height - 120;

if (height * 1.68 > width) {
   height = width / 1.68;
}
else {
   width = height * 1.68;
}

var options = {
  chart: {
    type: 'line',
    width: width,
    height: height,
    animations: {
        enabled: false
    }
  },
  span: {
    start: 'minute', offset: '-12h'
  },
"""
        else:
            text += """
<script>
window.onresize = function(){ location.reload(); };
var width = window.innerWidth;
var height = window.innerHeight;
width = width / 3 * 2;
height = height / 3 * 2;

if (width < 600) {
    width = 600
}

if (height * 1.68 > width) {
   height = width / 1.68;
}
else {
   width = height * 1.68;
}

var options = {
  chart: {
    type: 'line',
    width: width,
    height: height
  },
  span: {
    start: 'day'
  },
"""

        text += "  series: [\n"
        first = True
        opacity = []
        stroke_width = []
        stroke_curve = []
        series_units = []
        for series in series_data:
            name = series.get("name")
            results = series.get("data")
            opacity_value = series.get("opacity", "1.0")
            stroke_width_value = series.get("stroke_width", "1")
            stroke_curve_value = series.get("stroke_curve", "smooth")
            chart_type = series.get("chart_type", "line")
            color = series.get("color", "")
            unit_name = series.get("unit", yaxis_name) or ""

            if results:
                if not first:
                    text += ","
                first = False
                text += self.get_chart_series(name, results, chart_type, color)
                opacity.append(opacity_value)
                stroke_width.append(stroke_width_value)
                stroke_curve.append("'{}'".format(stroke_curve_value))
                series_units.append(unit_name)

        units_array = ",".join("'{}'".format(unit) for unit in series_units)

        text += "  ],\n"
        text += "  fill: {\n"
        text += "     opacity: [{}]\n".format(",".join(opacity))
        text += "  },\n"
        text += "  stroke: {\n"
        text += "     width: [{}],\n".format(",".join(stroke_width))
        text += "     curve: [{}],\n".format(",".join(stroke_curve))
        text += "  },\n"
        text += "  xaxis: {\n"
        text += "    type: 'datetime',\n"
        text += "    labels: {\n"
        text += "           datetimeUTC: false\n"
        text += "       }\n"
        text += "  },\n"
        text += "  tooltip: {\n"
        text += "    x: {\n"
        text += "      format: 'dd/MMM HH:mm'\n"
        text += "    },\n"
        text += "    y: {\n"
        text += "      formatter: function(value, { seriesIndex }) {\n"
        text += "        if (value === null || typeof value === 'undefined') {\n"
        text += "          return value;\n"
        text += "        }\n"
        text += "        var units = [{}];\n".format(units_array)
        text += "        var unit = units[seriesIndex] !== undefined ? units[seriesIndex] : '{}';\n".format(yaxis_name)
        text += "        var rounded = (Math.round((value + Number.EPSILON) * 100) / 100).toFixed(2);\n"
        text += "        return unit ? rounded + ' ' + unit : rounded;\n"
        text += "      }\n"
        text += "    }\n"
        text += "  },"
        if extra_yaxis:
            axis_list = extra_yaxis if isinstance(extra_yaxis, list) else [extra_yaxis]
            primary_series_names = [series.get("name") for series in series_data if series.get("data") and series.get("unit", yaxis_name) == yaxis_name]

            primary_parts = [
                "      title: {{ text: '{}' }}".format(yaxis_name),
                "      decimalsInFloat: 2",
            ]
            if primary_series_names:
                names = ",".join("'{}'".format(name) for name in primary_series_names)
                primary_parts.append("      seriesName: [{}]".format(names))

            text += "  yaxis: [\n"
            text += "    {\n" + ",\n".join(primary_parts) + "\n    }"

            for axis in axis_list:
                title = axis.get("title", "")
                decimals = axis.get("decimals", 2)
                series_name = axis.get("series_name")
                series_names = axis.get("series_names")
                opposite = axis.get("opposite", False)
                labels_formatter = axis.get("labels_formatter")

                axis_parts = []
                if series_names:
                    names = ",".join("'{}'".format(name) for name in series_names)
                    axis_parts.append("      seriesName: [{}]".format(names))
                elif series_name:
                    axis_parts.append("      seriesName: '{}'".format(series_name))
                axis_parts.append("      title: {{ text: '{}' }}".format(title))
                axis_parts.append("      decimalsInFloat: {}".format(decimals))
                if opposite:
                    axis_parts.append("      opposite: true")
                if labels_formatter:
                    axis_parts.append("      labels: {{ formatter: function(val) {{ {} }} }}".format(labels_formatter))

                text += ",\n    {\n" + ",\n".join(axis_parts) + "\n    }"

            text += "\n  ],\n"
        else:
            text += "  yaxis: {\n"
            text += "    title: {{ text: '{}' }},\n".format(yaxis_name)
            text += "    decimalsInFloat: 2\n"
            text += "  },\n"
        text += "  title: {\n"
        text += "    text: '{}'\n".format(chart_name)
        text += "  },\n"
        text += "  legend: {\n"
        text += "    position: 'top',\n"
        text += "    formatter: function(seriesName, opts) {\n"
        text += "        var units = [{}];\n".format(units_array)
        text += "        var unit = units[opts.seriesIndex] !== undefined ? units[opts.seriesIndex] : '{}';\n".format(yaxis_name)
        text += "        return [opts.w.globals.series[opts.seriesIndex].at(-1), ' ', unit, ' <br> ', seriesName]\n"
        text += "    }\n"
        text += "  },\n"
        text += "  annotations: {\n"
        text += "   xaxis: [\n"
        text += "    {\n"
        text += "       x: new Date('{}').getTime(),\n".format(now_str)
        text += "       borderColor: '#775DD0',\n"
        text += "       textAnchor: 'middle',\n"
        text += "       label: {\n"
        text += "          text: 'now'\n"
        text += "       }\n"
        text += "    },\n"
        text += "    {\n"
        text += "       x: new Date('{}').getTime(),\n".format(midnight_str)
        text += "       borderColor: '#000000',\n"
        text += "       textAnchor: 'middle',\n"
        text += "       label: {\n"
        text += "          text: 'midnight'\n"
        text += "       }\n"
        text += "    }\n"
        text += "   ]\n"
        text += "  }\n"
        text += "}\n"
        # getElementById (not a '#id' CSS selector) - tagname can be unit-derived (e.g. "chart_%")
        # and '%' is not a valid unescaped CSS identifier character, which would throw in querySelector
        text += "var chart = new ApexCharts(document.getElementById('{}'), options);\n".format(tagname)
        text += "chart.render();\n"
        text += "</script>\n"
        return text

    def render_heatmap_chart(self, series_data, title, range_min, range_max, chart_id="chart", fixed_height=None):
        """
        Render a rounded heatmap chart using ApexCharts.

        series_data is a list of dicts: [{"name": str, "data": [{"x": str, "y": float}, ...]}, ...]
        range_min and range_max define the full colour scale (green -> red).
        chart_id is the DOM element id to render into.
        fixed_height overrides the responsive height calculation when set.
        """
        # Build a 5-stop green-to-red colour gradient across the value range
        span = max(range_max - range_min, 0.01)
        gradient_colors = ["#00B050", "#85C21A", "#FFFF00", "#FFA500", "#FF0000"]
        num_stops = len(gradient_colors)
        ranges_js = ""
        for i, color in enumerate(gradient_colors):
            from_val = round(range_min + span * i / num_stops, 4)
            to_val = round(range_min + span * (i + 1) / num_stops, 4)
            if i == num_stops - 1:
                to_val = round(range_max + 0.01, 4)
            name_str = "{:.1f}-{:.1f}".format(from_val, to_val)
            ranges_js += "            {{ from: {}, to: {}, color: '{}', name: '{}' }},\n".format(from_val, to_val, color, name_str)

        # Build series JSON inline
        series_js = ""
        for series in series_data:
            name = series.get("name", "")
            data_points = series.get("data", [])
            points_js = ", ".join("{{ x: '{}', y: {} }}".format(p["x"], "null" if p["y"] is None else p["y"]) for p in data_points)
            series_js += "    {{ name: '{}', data: [{}] }},\n".format(name, points_js)

        # chart_id is only safe to interpolate as a *string* (DOM id, inside quotes) - it may
        # contain characters (e.g. "%") that are invalid in a JS identifier, so a separate
        # sanitised name is used anywhere it needs to appear as a variable name
        js_id = re.sub(r"[^0-9A-Za-z_]", "_", chart_id)

        text = ""
        text += "<script>\n"
        text += "window.onresize = function(){ location.reload(); };\n"
        text += "var width = window.innerWidth;\n"
        text += "var height = window.innerHeight;\n"
        text += "if (width < 400) { width = 400; }\n"
        text += "width = width - 50;\n"
        if fixed_height is not None:
            text += "var height_{} = {};\n".format(js_id, fixed_height)
        else:
            num_rows = max(len(series_data), 1)
            text += "var height_{} = {};\n".format(js_id, num_rows * 80 + 80)
        text += "var options = {\n"
        text += "  chart: {{ type: 'heatmap', width: width, height: height_{}, animations: {{ enabled: false }} }},\n".format(js_id)
        text += "  plotOptions: {\n"
        text += "    heatmap: {\n"
        text += "      radius: 2,\n"
        text += "      enableShades: false,\n"
        text += "      colorScale: {\n"
        text += "        ranges: [\n"
        text += ranges_js
        text += "        ]\n"
        text += "      }\n"
        text += "    }\n"
        text += "  },\n"
        text += "  dataLabels: { enabled: true, style: { colors: ['#000'] } },\n"
        text += "  series: [\n"
        text += series_js
        text += "  ],\n"
        text += "  xaxis: { type: 'category' },\n"
        text += "  title: {{ text: '{}' }},\n".format(title)
        text += "  tooltip: { y: { formatter: function(val) { return val !== null ? val.toFixed(2) : 'N/A'; } } }\n"
        text += "};\n"
        # getElementById, not a '#id' CSS selector - chart_id may contain characters (e.g. "%") that
        # are invalid in an unescaped CSS identifier and would throw in querySelector
        text += "var chart_{jid} = new ApexCharts(document.getElementById('{cid}'), options);\n".format(jid=js_id, cid=chart_id)
        text += "chart_{}.render();\n".format(js_id)
        text += "</script>\n"
        return text

    def render_timeline_chart(self, timeline_data, tagname, days):
        """
        Render a timeline chart for non-numerical data (like on/off states)
        Shows horizontal bars with different states as colored segments
        """

        # Escape a value for embedding inside a JS single-quoted string literal
        def js_str(val):
            return str(val).replace("\\", "\\\\").replace("'", "\\'")

        # Build the initial template - use direct substitution, NOT .format(), to avoid
        # breakage when state values or entity names contain { or } characters
        series_count = len(timeline_data)
        text = (
            """
<script>
window.onresize = function() { location.reload(); };
var width = window.innerWidth;
var height = window.innerHeight;

// Use full width minus small margins
width = Math.max(800, width - 100);

// Calculate height based on number of series (compact timeline view)
var seriesCount = """
            + str(series_count)
            + """;
var baseHeight = Math.max(200, seriesCount * 50 + 100);
height = Math.min(400, baseHeight);

var options = {
  chart: {
    type: 'rangeBar',
    width: width,
    height: height,
    animations: {
      enabled: false
    },
    toolbar: {
      show: true
    }
  },
  plotOptions: {
    bar: {
      horizontal: true,
      barHeight: '70%',
      rangeBarGroupRows: false
    }
  },
  series: [
"""
        )

        # Process each entity's timeline data
        first_series = True
        all_states = set()

        # A rangeBar data point's "x" is the y-axis category, so entities whose friendly names
        # collide (every GivEnergy Cloud inverter publishes a "Status" sensor, for instance) would
        # otherwise share a single unlabelled row with no way to tell which bar is which inverter.
        name_counts = {}
        for entity_timeline in timeline_data:
            name_counts[entity_timeline["name"]] = name_counts.get(entity_timeline["name"], 0) + 1

        for entity_timeline in timeline_data:
            entity_name = entity_timeline["name"]
            if name_counts.get(entity_name, 0) > 1:
                entity_name = "{} ({})".format(entity_name, entity_timeline.get("entity_id", ""))
            history_chart = entity_timeline["data"]  # Dict with timestamp keys and state values

            # Sort by the instant each record represents rather than by its raw timestamp text:
            # HA/DB history is UTC while get_history_with_now() appends the current state stamped
            # in local time, so a string sort can order records by their offset instead of by time.
            sorted_items = []
            for timestamp_str, state in history_chart.items():
                try:
                    sorted_items.append((int(str2time(timestamp_str).timestamp() * 1000), str(state)))
                except (ValueError, TypeError):
                    continue
            sorted_items.sort(key=lambda item: item[0])

            # Convert history data to timeline ranges. Every sample is folded into a range: unlike a
            # numerical series, thinning a state series does not merely lower the resolution, it
            # rewrites history. Sampling the records by array index used to alias a flapping state
            # away entirely whenever the step kept landing on one phase of the flap, leaving the
            # chart asserting a single multi-day run that the history table flatly contradicted.
            # Only transitions produce a range, so an entity that rarely changes stays cheap.
            ranges = []
            current_state = None
            start_time = None
            last_timestamp_ms = None

            for timestamp_ms, state in sorted_items:
                all_states.add(state)
                last_timestamp_ms = timestamp_ms

                if current_state is None:
                    # First point
                    current_state = state
                    start_time = timestamp_ms
                elif current_state != state:
                    # State changed, save previous range and start new one
                    if start_time is not None:
                        ranges.append({"x": entity_name, "y": [start_time, timestamp_ms], "fillColor": self.get_state_color(current_state), "label": current_state})
                    current_state = state
                    start_time = timestamp_ms
                # else: state is the same, just extend the current range (don't create duplicate)

            # Add final range
            if start_time is not None and last_timestamp_ms is not None:
                ranges.append({"x": entity_name, "y": [start_time, last_timestamp_ms], "fillColor": self.get_state_color(current_state), "label": current_state})

            # Add series for this entity
            if not first_series:
                text += ","
            first_series = False

            text += "\n    {\n"
            text += f"      name: '{js_str(entity_name)}',\n"
            text += "      data: [\n"

            first_range = True
            for range_data in ranges:
                if not first_range:
                    text += ","
                first_range = False
                text += "        {\n"
                text += f"          x: '{js_str(range_data['x'])}',\n"
                text += f"          y: [{range_data['y'][0]}, {range_data['y'][1]}],\n"
                text += f"          fillColor: '{js_str(range_data['fillColor'])}',\n"
                text += f"          label: '{js_str(range_data['label'])}'\n"
                text += "        }\n"

            text += "      ]\n"
            text += "    }\n"

        text += (
            """
  ],
  xaxis: {
    type: 'datetime',
    labels: {
      datetimeUTC: false
    }
  },
  yaxis: {
    show: true,
    labels: {
      style: {
        fontSize: '14px'
      }
    }
  },
  tooltip: {
    custom: function({ seriesIndex, dataPointIndex, w }) {
      var data = w.config.series[seriesIndex].data[dataPointIndex];
      var start = new Date(data.y[0]);
      var end = new Date(data.y[1]);
      var duration = (data.y[1] - data.y[0]) / (1000 * 60); // minutes

      return '<div style="padding: 10px;">' +
        '<strong>' + data.x + '</strong><br/>' +
        'State: <strong>' + data.label + '</strong><br/>' +
        'From: ' + start.toLocaleString() + '<br/>' +
        'To: ' + end.toLocaleString() + '<br/>' +
        'Duration: ' + duration.toFixed(0) + ' minutes' +
        '</div>';
    }
  },
  legend: {
    show: false
  },
  dataLabels: {
    enabled: true,
    formatter: function(val, opts) {
      var label = opts.w.config.series[opts.seriesIndex].data[opts.dataPointIndex].label;
      return label;
    },
    style: {
      colors: ['#fff'],
      fontSize: '14px',
      fontWeight: 'bold'
    }
  }
};

var chart = new ApexCharts(document.getElementById('"""
            + tagname
            + """'), options);
chart.render();
</script>
"""
        )

        return text

    def get_state_color(self, state):
        """
        Get a color for a given state value
        """
        state_lower = str(state).lower()

        # Common state colors
        color_map = {
            "on": "#4CAF50",  # Green
            "off": "#9E9E9E",  # Gray
            "true": "#4CAF50",  # Green
            "false": "#9E9E9E",  # Gray
            "open": "#FF9800",  # Orange
            "closed": "#2196F3",  # Blue
            "active": "#4CAF50",  # Green
            "inactive": "#9E9E9E",  # Gray
            "home": "#4CAF50",  # Green
            "away": "#FF9800",  # Orange
            "charging": "#FFC107",  # Amber
            "discharging": "#03A9F4",  # Light Blue
            "idle": "#9E9E9E",  # Gray
        }

        if state_lower in color_map:
            return color_map[state_lower]

        # Generate a color based on hash of the state string
        hash_val = sum(ord(c) for c in str(state))
        hue = (hash_val * 137) % 360  # Use golden angle for better distribution
        return "hsl({}, 65%, 50%)".format(hue)

    async def html_api_get_log(self, request):
        """
        JSON API to get log data with filtering and search
        """

        def highlight_search_term(text, search_term):
            """
            Highlight search term in text with HTML markup, case-insensitive
            """
            if not search_term or not text:
                return text

            # Create case-insensitive pattern for the original text
            pattern = re.compile(re.escape(search_term), re.IGNORECASE)

            # Split text around matches, then escape and highlight each part
            parts = pattern.split(text)
            matches = pattern.findall(text)

            result_parts = []

            for i, part in enumerate(parts):
                # Escape the regular text part
                result_parts.append(html_module.escape(part))

                # Add highlighted match if there is one
                if i < len(matches):
                    escaped_match = html_module.escape(matches[i])
                    highlighted_match = f'<mark class="search-highlight" style="background-color: #ffff00; font-weight: bold;">{escaped_match}</mark>'
                    result_parts.append(highlighted_match)

            return "".join(result_parts)

        try:
            logfile = "predbat.log"
            logfile_1 = "predbat.1.log"
            logdata = ""

            if os.path.exists(logfile):
                with open(logfile, "r") as f:
                    logdata = f.read()
            if os.path.exists(logfile_1):
                with open(logfile_1, "r") as f:
                    logdata = f.read() + "\n" + logdata

            # Get query parameters
            args = request.query
            filter_type = args.get("filter", "warnings")  # all, info, warnings, errors
            since_line = int(args.get("since", 0))  # Line number to start from
            max_lines = int(args.get("max_lines", 1024))  # Maximum lines to return
            search_term = args.get("search", "").lower().strip()  # Search term

            loglines = logdata.split("\n")
            total_lines = len(loglines)

            # Process log lines with filtering and search
            result_lines = []
            count_lines = 0
            lineno = total_lines - 1
            matched_lines = 0  # Count of lines that match search criteria before limiting
            total_search_matches = 0  # Total matches in entire file (used when search is active)

            while lineno >= 0:
                line = loglines[lineno]
                line_lower = line.lower()

                # Skip empty lines
                if not line.strip():
                    lineno -= 1
                    continue

                # Apply log level filtering first
                include_line = False
                line_type = "log"

                if "error" in line_lower:  # any error log lines will appear on all, info, warning and error tabs
                    line_type = "error"
                    include_line = True
                elif "warn" in line_lower:  # warning log lines appear on all and warning tabs
                    line_type = "warning"
                    include_line = filter_type in ["all", "warnings"]
                elif "info" in line_lower:  # info log lines appear on all and info tabs
                    line_type = "info"
                    include_line = filter_type in ["all", "info"]
                else:  # all other log lines appear on just the all tab
                    line_type = "log"
                    include_line = filter_type == "all"

                # Apply search filter if search term is provided
                if include_line and search_term:
                    include_line = search_term in line_lower
                    if include_line:
                        total_search_matches += 1

                # Check if we've reached the max lines limit
                if count_lines >= max_lines:
                    include_line = False

                if include_line and (since_line == 0 or lineno > since_line):
                    matched_lines += 1
                    start_line = line[0:27] if len(line) >= 27 else line
                    rest_line = line[27:] if len(line) >= 27 else ""

                    # Apply highlighting if search term is present
                    if search_term:
                        highlighted_timestamp = highlight_search_term(start_line, search_term)
                        highlighted_message = highlight_search_term(rest_line, search_term)
                        highlighted_full_line = highlight_search_term(line, search_term)
                    else:
                        # Escape HTML characters even when no search highlighting
                        highlighted_timestamp = html_module.escape(start_line)
                        highlighted_message = html_module.escape(rest_line)
                        highlighted_full_line = html_module.escape(line)

                    result_lines.append(
                        {
                            "line_number": lineno,
                            "timestamp": highlighted_timestamp,
                            "message": highlighted_message,
                            "type": line_type,
                            "full_line": highlighted_full_line,
                            "raw_timestamp": start_line,  # Keep raw versions for any client-side processing
                            "raw_message": rest_line,
                            "raw_full_line": line,
                        }
                    )
                    count_lines += 1

                lineno -= 1

            # Reverse to get reverse chronological order (newest first)
            result_lines.reverse()

            response_data = {"status": "success", "total_lines": total_lines, "returned_lines": len(result_lines), "lines": result_lines, "filter": filter_type, "search_term": search_term}

            # If we have a search term, add information about total matches
            if search_term:
                response_data["search_matches"] = total_search_matches

            return web.json_response(response_data)

        except Exception as e:
            self.log(f"Error in html_api_get_log: {e}")
            return web.json_response({"status": "error", "message": str(e)}, status=500)

    async def html_api_post_state(self, request):
        """
        JSON API
        """
        json_data = await request.json()
        entity_id = json_data.get("entity_id", None)
        state = json_data.get("state", None)
        attributes = json_data.get("attributes", {})
        if entity_id:
            self.set_state_wrapper(entity_id, state, attributes=attributes)
            return web.Response(content_type="application/json", text='{"result": "ok"}')
        else:
            return web.Response(content_type="application/json", text='{"result": "error"}')

    async def html_api_get_status(self, request):
        """
        Get current Predbat status (calculating state and battery info)
        """
        try:
            calculating = self.get_arg("active", False)
            if self.base.update_pending:
                calculating = True

            battery_icon = self.get_battery_status_icon()

            status_data = {"calculating": calculating, "battery_html": battery_icon}

            return web.Response(content_type="application/json", text=json.dumps(status_data))
        except Exception as e:
            self.log("Error getting status: {}".format(e))
            return web.Response(status=500, content_type="application/json", text=json.dumps({"error": str(e)}))

    async def html_api_ping(self, request):
        """
        Check if Predbat is running
        return error 500 if not running
        """
        try:
            is_running = self.base.is_running()
        except Exception as e:
            self.log("Error checking if Predbat is running: {}".format(e))
            is_running = False

        if is_running:
            return web.Response(content_type="application/json", text='{"result": "ok"}')
        else:
            return web.Response(status=500, content_type="application/json", text='{"result": "error"}')

    async def html_api_get_state(self, request):
        """
        JSON API
        """
        args = request.query
        state_data = self.get_state_wrapper()
        if "entity_id" in args:
            text = json.dumps(state_data.get(args["entity_id"], {}))
            return web.Response(content_type="application/json", text=text)
        else:
            text = json.dumps(state_data)
            return web.Response(content_type="application/json", text=text)

    async def html_api_post_service(self, request):
        """
        JSON API
        """
        json_data = await request.json()
        service = json_data.get("service", None)
        service_data = json_data.get("data", {})
        if service:
            result = self.base.call_service_wrapper(service, **service_data)
            return web.Response(content_type="application/json", text=json.dumps(result))
        else:
            return web.Response(content_type="application/json", text='{"result": "error"}')

    async def html_api_plan_data(self, request):
        """
        JSON API - Return plan data for all three views
        Supports conditional fetch: if client's last_received is newer than all server data, returns {unchanged: true}
        """
        # Get client's newest data timestamp from query parameters
        client_newest_timestamp = request.rel_url.query.get("newest_timestamp")
        client_overrides_hash = request.rel_url.query.get("overrides_hash")

        # Fetch plan data
        plan_entity = self.prefix + ".plan_html"
        yesterday_entity = self.prefix + ".cost_yesterday"
        baseline_entity = self.prefix + ".savings_yesterday_predbat"

        # Get JSON data (with timestamps embedded in the JSON)
        plan_json = self.get_state_wrapper(entity_id=plan_entity, attribute="raw", default=None)
        plan_timestamp = plan_json.get("timestamp", None) if plan_json else None

        yesterday_json = self.get_state_wrapper(entity_id=yesterday_entity, attribute="json", default=None)
        yesterday_timestamp = yesterday_json.get("timestamp", None) if yesterday_json else None

        baseline_json = self.get_state_wrapper(entity_id=baseline_entity, attribute="json", default=None)
        baseline_timestamp = baseline_json.get("timestamp", None) if baseline_json else None

        # Get current manual overrides
        manual_charge_times = self.base.manual_times("manual_charge")
        manual_export_times = self.base.manual_times("manual_export")
        manual_freeze_charge_times = self.base.manual_times("manual_freeze_charge")
        manual_freeze_export_times = self.base.manual_times("manual_freeze_export")
        manual_demand_times = self.base.manual_times("manual_demand")
        manual_import_rates = self.base.manual_rates("manual_import_rates")
        manual_export_rates = self.base.manual_rates("manual_export_rates")
        manual_load_adjust = self.base.manual_rates("manual_load_adjust")
        manual_soc_keep = self.base.manual_rates("manual_soc")

        # Convert manual rates dicts to list format for JavaScript
        manual_import_rates_list = [{"minutes": k, "rate": v} for k, v in manual_import_rates.items()]
        manual_export_rates_list = [{"minutes": k, "rate": v} for k, v in manual_export_rates.items()]
        manual_load_adjust_list = [{"minutes": k, "adjustment": v} for k, v in manual_load_adjust.items()]
        manual_soc_list = [{"minutes": k, "target": v} for k, v in manual_soc_keep.items()]

        # Build overrides object
        overrides = {
            "manual_charge_times": manual_charge_times,
            "manual_export_times": manual_export_times,
            "manual_freeze_charge_times": manual_freeze_charge_times,
            "manual_freeze_export_times": manual_freeze_export_times,
            "manual_demand_times": manual_demand_times,
            "manual_import_rates": manual_import_rates_list,
            "manual_export_rates": manual_export_rates_list,
            "manual_load_adjust": manual_load_adjust_list,
            "manual_soc": manual_soc_list,
        }

        # Calculate hash of overrides for change detection
        overrides_json = json.dumps(overrides, sort_keys=True)
        overrides_hash = hashlib.md5(overrides_json.encode()).hexdigest()

        # Find the newest timestamp among all data sources
        newest_timestamp = None
        for ts in [plan_timestamp, yesterday_timestamp, baseline_timestamp]:
            if ts:
                if newest_timestamp is None or ts > newest_timestamp:
                    newest_timestamp = ts

        # Check if data has changed - compare client's newest timestamp with server's newest
        data_unchanged = False
        if client_newest_timestamp and newest_timestamp:
            # Client has data and server has data - compare timestamps
            # If client's newest is >= server's newest, and overrides match, nothing changed
            timestamp_match = client_newest_timestamp >= newest_timestamp
            overrides_match = client_overrides_hash == overrides_hash
            data_unchanged = timestamp_match and overrides_match
        elif not newest_timestamp:
            # No server data available yet
            data_unchanged = True

        if data_unchanged:
            return web.json_response({"unchanged": True, "overrides_hash": overrides_hash})

        # Build full response with data
        response_data = {"unchanged": False, "plan": plan_json, "yesterday": yesterday_json, "baseline": baseline_json, "overrides": overrides, "overrides_hash": overrides_hash}

        return web.json_response(response_data)

    async def html_plan(self, request):
        """
        Return the Predbat plan as an HTML page with client-side JSON rendering
        """
        self.default_page = "./plan"

        # Disable page refresh - JavaScript will handle updates
        text = self.get_header("Predbat Plan", refresh=5 * 60)  # Set a long refresh interval just in case, but JS will handle it

        # Add CSS
        text += get_plan_css()

        # Add warning/error divs
        text += '<div id="staleWarning" style="display:none; padding:10px; background:#fff3cd; color:#856404; border:1px solid #ffc107; margin-bottom:10px;">&#9888;&#65039; Plan data is stale (last updated >15 minutes ago)</div>'
        text += '<div id="planError" style="display:none; padding:10px; background:#fee; color:#c00; border:1px solid #c00; margin-bottom:10px;"></div>'

        # Add view switcher buttons
        text += '<div style="margin-bottom: 15px; display: flex; gap: 8px; align-items: center;">'
        text += '<button class="view-button" data-view="plan" onclick="switchView(\'plan\')" style="padding: 6px 12px; border-radius: 3px; font-size: 14px; border: 1px solid #ddd; background-color: #4CAF50; color: white; cursor: pointer;">Plan</button>'
        text += '<button class="view-button" data-view="yesterday" onclick="switchView(\'yesterday\')" style="padding: 6px 12px; border-radius: 3px; font-size: 14px; border: 1px solid #ddd; background-color: #f0f0f0; color: black; cursor: pointer;">History</button>'
        text += '<button class="view-button" data-view="baseline" onclick="switchView(\'baseline\')" style="padding: 6px 12px; border-radius: 3px; font-size: 14px; border: 1px solid #ddd; background-color: #f0f0f0; color: black; cursor: pointer;">Yesterday Without Predbat</button>'
        text += '<span id="planTimestamp" style="margin-left: 16px; font-size: 13px; color: #666;"></span>'
        text += '<label id="debugToggleLabel" style="margin-left: auto;"><input type="checkbox" id="debugToggle" onchange="onDebugToggleChange()"> Show Debug</label>'
        text += "</div>"

        # Add plan container
        text += '<div id="planContainer"></div>'

        # Fetch all three JSON datasets
        plan_json = self.get_state_wrapper(entity_id=self.prefix + ".plan_html", attribute="raw", default=None)
        yesterday_json = self.get_state_wrapper(entity_id=self.prefix + ".cost_yesterday", attribute="json", default=None)
        baseline_json = self.get_state_wrapper(entity_id=self.prefix + ".savings_yesterday_predbat", attribute="json", default=None)

        # Fetch override data
        manual_charge_times = self.base.manual_times("manual_charge")
        manual_export_times = self.base.manual_times("manual_export")
        manual_freeze_charge_times = self.base.manual_times("manual_freeze_charge")
        manual_freeze_export_times = self.base.manual_times("manual_freeze_export")
        manual_demand_times = self.base.manual_times("manual_demand")
        manual_import_rates = self.base.manual_rates("manual_import_rates")
        manual_export_rates = self.base.manual_rates("manual_export_rates")
        manual_load_adjust = self.base.manual_rates("manual_load_adjust")
        manual_soc_keep = self.base.manual_rates("manual_soc")

        # Convert manual rates dicts to list format for JavaScript
        manual_import_rates_list = [{"minutes": k, "rate": v} for k, v in manual_import_rates.items()]
        manual_export_rates_list = [{"minutes": k, "rate": v} for k, v in manual_export_rates.items()]
        manual_load_adjust_list = [{"minutes": k, "adjustment": v} for k, v in manual_load_adjust.items()]
        manual_soc_list = [{"minutes": k, "target": v} for k, v in manual_soc_keep.items()]

        # Build overrides object
        overrides = {
            "manual_charge_times": manual_charge_times,
            "manual_export_times": manual_export_times,
            "manual_freeze_charge_times": manual_freeze_charge_times,
            "manual_freeze_export_times": manual_freeze_export_times,
            "manual_demand_times": manual_demand_times,
            "manual_import_rates": manual_import_rates_list,
            "manual_export_rates": manual_export_rates_list,
            "manual_load_adjust": manual_load_adjust_list,
            "manual_soc": manual_soc_list,
        }

        # Calculate hash of overrides for change detection
        overrides_json = json.dumps(overrides, sort_keys=True)
        overrides_hash = hashlib.md5(overrides_json.encode()).hexdigest()

        # Embed initial data in script tags
        text += "<script>"
        text += f"window.planData = {json.dumps(plan_json)};"
        text += f"window.yesterdayData = {json.dumps(yesterday_json)};"
        text += f"window.baselineData = {json.dumps(baseline_json)};"
        text += f"window.overridesData = {json.dumps(overrides)};"
        text += f"window.overridesHash = {json.dumps(overrides_hash)};"
        text += "</script>"

        # Include renderer JavaScript (which declares newestDataTimestamp variable)
        text += get_plan_renderer_js()

        # Initialise newestDataTimestamp from the initial data loaded, and start automatic updates
        text += "<script>"
        text += "// Find newest timestamp from initial data\n"
        text += "const initialTimestamps = [];\n"
        text += "if (window.planData && window.planData.timestamp) initialTimestamps.push(window.planData.timestamp);\n"
        text += "if (window.yesterdayData && window.yesterdayData.timestamp) initialTimestamps.push(window.yesterdayData.timestamp);\n"
        text += "if (window.baselineData && window.baselineData.timestamp) initialTimestamps.push(window.baselineData.timestamp);\n"
        text += "if (initialTimestamps.length > 0) newestDataTimestamp = initialTimestamps.reduce((a, b) => a > b ? a : b);\n"
        text += "window.addEventListener('load', function() { updateTimestampDisplay(); startPlanUpdates(); });\n"
        text += "window.addEventListener('resize', adjustResponsiveSizes);\n"
        text += "</script>"

        text += "</body></html>\n"
        return web.Response(content_type="text/html", text=text)

    async def html_log(self, request):
        """
        Return the Predbat log as an HTML page with dynamic updates
        """
        self.default_page = "./log"

        # Decode method get arguments to determine filter type
        args = request.query
        errors = False
        warnings = False
        info = False

        if "errors" in args or (not args and self.default_log == "errors"):
            errors = True
            self.default_log = "errors"
        elif "warnings" in args or (not args and self.default_log == "warnings"):
            warnings = True
            self.default_log = "warnings"
        elif "info" in args or (not args and self.default_log == "info"):
            info = True
            self.default_log = "info"
        elif "all" in args or (not args and self.default_log == "all"):
            self.default_log = "all"
        else:  # if no log type parameter specified, open in warnings tab by default
            self.default_log = "warnings"
            warnings = True

        # Remove refresh from header since we'll update dynamically
        text = self.get_header("Predbat Log", refresh=0)
        text += """<body>"""
        text += get_log_css()

        if errors:
            active_all = ""
            active_info = ""
            active_warnings = ""
            active_errors = "active"
            filter_type = "errors"
        elif warnings:
            active_all = ""
            active_info = ""
            active_warnings = "active"
            active_errors = ""
            filter_type = "warnings"
        elif info:
            active_all = ""
            active_info = "active"
            active_warnings = ""
            active_errors = ""
            filter_type = "info"
        else:
            active_all = "active"
            active_info = ""
            active_warnings = ""
            active_errors = ""
            filter_type = "all"

        text += '<div class="log-menu">'
        text += "<h3>Logfile</h3> "
        text += f'<a href="./log?all" class="{active_all}">All</a>'
        text += f'<a href="./log?info" class="{active_info}">Info</a>'
        text += f'<a href="./log?warnings" class="{active_warnings}">Warnings</a>'
        text += f'<a href="./log?errors" class="{active_errors}">Errors</a>'
        text += '<a href="./debug_log">Download</a>'
        text += '<label class="auto-scroll-toggle"><input type="checkbox" id="autoScroll"> Auto-scroll to new</label>'
        text += '<button class="scroll-to-bottom" onclick="scrollToBottom()">Scroll to Bottom</button>'
        text += '<button id="pauseResumeBtn" onclick="toggleUpdates()" style="margin-left: 10px; padding: 4px 8px;">Pause</button>'
        text += "</div>"

        text += '<div class="log-search-container">'
        text += '<input type="text" id="logSearchInput" class="log-search-input" placeholder="Search entire log file..." oninput="filterLogEntries()" />'
        text += '<button id="clearSearchBtn" class="clear-search-button" onclick="clearLogSearch()">Clear</button>'
        text += '<div id="searchStatus" class="search-status"></div>'
        text += "</div>"

        text += '<div id="logStatus" class="log-status">Loading log data...</div>'
        text += "<table width=100% id='logTable'>\n"
        text += "<tbody id='logTableBody'>\n"
        text += "<!-- Log entries will be loaded dynamically via JavaScript -->\n"
        text += "</tbody>\n"
        text += "</table>"

        # Add JavaScript for dynamic updates
        text += get_logfile_js(filter_type)

        text += "</body></html>\n"
        return web.Response(content_type="text/html", text=text)

    async def html_config_post(self, request):
        """
        Save the Predbat config from an HTML page
        """
        postdata = await request.post()

        # Process only the submitted form data
        for pitem in postdata:
            new_value = postdata[pitem]
            if pitem:
                pitem = pitem.replace("__", ".")
            if new_value == "None":
                new_value = ""
            if pitem.startswith("switch"):
                if new_value == "on":
                    new_value = True
                else:
                    new_value = False
            elif pitem.startswith("input_number"):
                new_value = float(new_value)

            self.log("Web interface setting {} to {}".format(pitem, new_value))
            await self.set_state_external(pitem, new_value)

        raise web.HTTPFound("./config")

    def render_type(self, arg, value, parent_path="", row_counter=None):
        """
        Render a value based on its type with support for nested editing.

        Parameters:
        - arg (str): The name of the argument or key being rendered.
        - value (any): The value to render, which can be a list, dictionary, or other data type.
        - parent_path (str): The hierarchical path to the current value, used for nested structures.
          For example, "config[0]" for the first item in a list under the "config" key.
        - row_counter (int, optional): A counter to track the number of rows rendered, useful for
          indexing or applying alternating styles in tables.

        Returns:
        - str: The rendered HTML representation of the value.
        """
        text = ""
        if isinstance(value, list):
            text += "<table>"
            for idx, item in enumerate(value):
                nested_path = f"{parent_path}[{idx}]" if parent_path else f"{arg}[{idx}]"

                # Check if this list item is editable
                can_edit = self.is_editable_value(item)
                actions_cell = ""

                if can_edit and row_counter is not None:
                    row_counter[0] += 1
                    nested_row_id = row_counter[0]

                    if isinstance(item, bool):
                        toggle_class = "toggle-button active" if item else "toggle-button"
                        actions_cell = f'<button class="{toggle_class}" onclick="toggleNestedValue({nested_row_id})" data-value="{str(item).lower()}" data-path="{nested_path}"></button>'
                    else:
                        actions_cell = f'<button class="edit-button" onclick="editNestedValue({nested_row_id})" data-path="{nested_path}">Edit</button>'

                    # Store the nested value info for later processing
                    if not hasattr(self, "_nested_values"):
                        self._nested_values = {}
                    self._nested_values[nested_row_id] = {"path": nested_path, "value": item}

                raw_value = self.resolve_value_raw(arg, item)

                if actions_cell:
                    text += f"<tr id='nested_row_{row_counter[0] if can_edit else 'static'}' data-nested-path='{nested_path}' data-nested-original='{html_module.escape(str(raw_value))}'><td>- </td><td id='nested_value_{row_counter[0] if can_edit else 'static'}'>{self.render_type(arg, item, nested_path, row_counter)}</td><td>{actions_cell}</td></tr>\n"
                else:
                    text += "<tr><td>- {}</td></tr>\n".format(self.render_type(arg, item, nested_path, row_counter))
            text += "</table>"
        elif isinstance(value, dict):
            text += "<table>"
            for key in value:
                nested_path = f"{parent_path}.{key}" if parent_path else f"{arg}.{key}"
                nested_value = value[key]

                # Check if this nested value is editable
                can_edit = self.is_editable_value(nested_value)
                actions_cell = ""

                if can_edit and row_counter is not None:
                    row_counter[0] += 1
                    nested_row_id = row_counter[0]

                    if isinstance(nested_value, bool):
                        toggle_class = "toggle-button active" if nested_value else "toggle-button"
                        actions_cell = f'<button class="{toggle_class}" onclick="toggleNestedValue({nested_row_id})" data-value="{str(nested_value).lower()}" data-path="{nested_path}"></button>'
                    else:
                        actions_cell = f'<button class="edit-button" onclick="editNestedValue({nested_row_id})" data-path="{nested_path}">Edit</button>'

                    # Store the nested value info for later processing
                    if not hasattr(self, "_nested_values"):
                        self._nested_values = {}
                    self._nested_values[nested_row_id] = {"path": nested_path, "value": nested_value}

                raw_value = self.resolve_value_raw(key, nested_value)

                if actions_cell:
                    text += f"<tr id='nested_row_{row_counter[0] if can_edit else 'static'}' data-nested-path='{nested_path}' data-nested-original='{html_module.escape(str(raw_value))}'><td><b>{key}: </b></td><td id='nested_value_{row_counter[0] if can_edit else 'static'}'>{self.render_type(key, nested_value, nested_path, row_counter)}</td><td>{actions_cell}</td></tr>\n"
                else:
                    text += "<tr><td><b>{}: </b></td><td colspan='2'>{}</td></tr>\n".format(key, self.render_type(key, nested_value, nested_path, row_counter))
            text += "</table>"
        elif isinstance(value, str):
            pat = re.match(r"^[a-zA-Z_]+\.\S+", value)
            # Only try entity resolution if the schema type for this arg can be a sensor.
            # Pure string fields (e.g. gateway_mqtt_host = "mqtt.predbat.com") must not
            # be treated as HA entity IDs even though they contain a dot.
            schema_type = APPS_SCHEMA.get(arg, {}).get("type", "")
            is_pure_string = schema_type and not any(t.startswith("sensor") for t in schema_type.split("|"))
            if "{" in value:
                text = self.base.resolve_arg(arg, value, indirect=False, quiet=True)
                if text is None:
                    text = '<span style="background-color:#FFAAAA"> {} </p>'.format(value)
                else:
                    text = self.render_type(arg, text, parent_path, row_counter)
            elif pat and (arg != "service") and not is_pure_string:
                entity_id = value
                unit_of_measurement = ""
                if "$" in entity_id:
                    entity_id, attribute = entity_id.split("$")
                    state = self.get_state_wrapper(entity_id=entity_id, attribute=attribute, default=None)
                else:
                    state = self.get_state_wrapper(entity_id=entity_id, default=None)
                    unit_of_measurement = self.get_state_wrapper(entity_id=entity_id, attribute="unit_of_measurement", default="")

                if state is not None:
                    text = '<a href="./entity?entity_id={}">{}</a> = {}{}'.format(entity_id, value, state, unit_of_measurement)
                else:
                    text = '<span style="background-color:#FFAAAA"> {} = ?{} </span>'.format(value, unit_of_measurement)
            else:
                text = str(value)
        else:
            text = str(value)
        return text

    async def html_file(self, filename, data):
        if data is None:
            return web.Response(content_type="text/html", text="{} not found".format(filename), status=404)
        else:
            return web.Response(content_type="application/octet-stream", body=data.encode("utf-8"), headers={"Content-Disposition": "attachment; filename={}".format(filename)})  # Convert text to binary if needed

    async def html_debug_yaml(self, request):
        """
        Return the Predbat debug yaml data
        """
        yaml_debug = self.base.create_debug_yaml(write_file=False)
        return await self.html_file("predbat_debug.yaml.txt", yaml_debug)

    async def html_file_load(self, filename, also_file=None, as_file=None):
        """
        Load a file and serve it up
        """
        data = None
        if os.path.exists(filename):
            with open(filename, "r") as f:
                data = f.read()
        if also_file and os.path.exists(also_file):
            with open(also_file, "r") as f:
                data2 = f.read()
                if data2 and data:
                    data = data + "\n" + data2
                elif data2:
                    data = data2
        return await self.html_file(as_file or filename, data)

    async def html_debug_log(self, request):
        return await self.html_file_load("predbat.1.log", also_file="predbat.log", as_file="predbat.log")

    async def html_debug_apps(self, request):
        return await self.html_file_load("apps.yaml", as_file="apps.yaml.txt")

    async def html_debug_apps_live(self, request):
        """
        Return an apps.yaml reconstructed from the live in-memory settings (self.args).

        Defaults to masking credential-like keys (see mask_secret_args) so a direct or
        copied request never leaks secrets without an explicit opt-in; pass ?masked=0
        to download the full unmasked file.
        """
        masked = request.query.get("masked", "1") != "0"
        args_copy = mask_secret_args(self.args) if masked else copy.deepcopy(self.args)
        yaml = YAML()
        buf = StringIO()
        yaml.dump({ROOT_YAML_KEY: args_copy}, buf)
        filename = "apps_live_masked.yaml.txt" if masked else "apps_live.yaml.txt"
        return await self.html_file(filename, buf.getvalue())

    async def html_debug_plan(self, request):
        html_plan = self.get_state_wrapper(entity_id=self.prefix + ".plan_html", attribute="html", default="<p>No plan available</p>")
        if not html_plan:
            html_plan = None
        return await self.html_file("predbat_plan.html", html_plan)

    async def html_dash_content(self, request):
        """
        Return just the dashboard body content for AJAX refresh (preserves scroll position)
        """
        text = self.get_status_html(THIS_VERSION_DISPLAY)
        return web.Response(content_type="text/html", text=text)

    async def html_dash(self, request):
        """
        Render apps.yaml as an HTML page
        """

        self.default_page = "./dash"
        text = self.get_header("Predbat Dashboard", refresh=0)
        text += get_dashboard_css()
        text += get_dashboard_collapsible_js()
        text += """
<script>
(function() {
    var DASH_REFRESH_INTERVAL = 60000; // 60 seconds
    var dashRefreshTimer = null;

    function refreshDashContent() {
        fetch('./dash_content')
            .then(function(response) { return response.text(); })
            .then(function(html) {
                var scrollX = window.scrollX;
                var scrollY = window.scrollY;
                var container = document.getElementById('dash-content-container');
                if (container) {
                    container.innerHTML = html;
                }
                window.scrollTo(scrollX, scrollY);
                scheduleRefresh();
            })
            .catch(function() {
                scheduleRefresh();
            });
    }

    function scheduleRefresh() {
        if (dashRefreshTimer) { clearTimeout(dashRefreshTimer); }
        dashRefreshTimer = setTimeout(refreshDashContent, DASH_REFRESH_INTERVAL);
    }

    document.addEventListener('DOMContentLoaded', function() {
        scheduleRefresh();
    });
})();
</script>
"""
        text += "<body>\n"
        text += '<div id="dash-content-container">\n'
        text += self.get_status_html(THIS_VERSION_DISPLAY)
        text += "</div>\n"
        text += "</body></html>\n"
        return web.Response(content_type="text/html", text=text)

    async def html_dash_post(self, request):
        """
        Handle POST request for dashboard status updates
        """
        try:
            # Parse form data
            data = await request.post()

            # Handle the different types of controls
            for key, value in data.items():
                if key == "mode":
                    # Update mode - it's a select type
                    entity_id = f"select.{self.prefix}_{key}"
                    await self.set_state_external(entity_id, value)
                elif key in ["debug_enable", "set_read_only", "active"]:
                    # Update switches - convert to boolean
                    entity_id = f"switch.{self.prefix}_{key}"
                    bool_value = value == "on"
                    await self.set_state_external(entity_id, bool_value)

            # Log the update
            self.log(f"Dashboard status updated: {dict(data)}")

        except Exception as e:
            self.log(f"ERROR: Failed to update dashboard status: {str(e)}")

        # Redirect back to dashboard
        raise web.HTTPFound("./dash")

    def get_chart(self, chart):
        """
        Return the HTML for a chart
        """
        now_str = self.now_utc.strftime(TIME_FORMAT)
        soc_kw_h0 = {}
        if self.base.soc_kwh_history:
            hist = self.base.soc_kwh_history
            for minute in range(0, self.minutes_now, self.plan_interval_minutes):
                minute_timestamp = self.midnight_utc + timedelta(minutes=minute)
                stamp = minute_timestamp.strftime(TIME_FORMAT)
                soc_kw_h0[stamp] = hist.get(self.minutes_now - minute, 0)
        soc_kw_h0[now_str] = self.base.soc_kw
        soc_kw = self.get_entity_results(self.prefix + ".soc_kw")
        soc_kw_best = self.get_entity_results(self.prefix + ".soc_kw_best")
        soc_kw_best10 = self.get_entity_results(self.prefix + ".soc_kw_best10")
        soc_kw_base10 = self.get_entity_results(self.prefix + ".soc_kw_base10")
        charge_limit_kw = self.get_entity_results(self.prefix + ".charge_limit_kw")
        best_charge_limit_kw = self.get_entity_results(self.prefix + ".best_charge_limit_kw")
        best_export_limit_kw = self.get_entity_results(self.prefix + ".best_export_limit_kw")
        battery_power_best = self.get_entity_results(self.prefix + ".battery_power_best")
        pv_power_best = self.get_entity_results(self.prefix + ".pv_power_best")
        grid_power_best = self.get_entity_results(self.prefix + ".grid_power_best")
        load_power_best = self.get_entity_results(self.prefix + ".load_power_best")
        iboost_best = self.get_entity_results(self.prefix + ".iboost_best")
        metric = self.get_entity_results(self.prefix + ".metric")
        best_metric = self.get_entity_results(self.prefix + ".best_metric")
        best10_metric = self.get_entity_results(self.prefix + ".best10_metric")
        cost_today = self.get_entity_results(self.prefix + ".cost_today")
        cost_today_export = self.get_entity_results(self.prefix + ".cost_today_export")
        cost_today_import = self.get_entity_results(self.prefix + ".cost_today_import")
        base10_metric = self.get_entity_results(self.prefix + ".base10_metric")
        rates = self.get_entity_results(self.prefix + ".rates")
        rates_export = self.get_entity_results(self.prefix + ".rates_export")
        rates_gas = self.get_entity_results(self.prefix + ".rates_gas")
        record = self.get_entity_results(self.prefix + ".record")

        text = ""

        if not soc_kw_best:
            text += "<br><h2>Loading...</h2>"
        elif chart == "Battery":
            series_data = [
                {"name": "Base", "data": soc_kw, "opacity": "1.0", "stroke_width": "2", "stroke_curve": "smooth", "color": "#3291a8"},
                {"name": "Base10", "data": soc_kw_base10, "opacity": "1.0", "stroke_width": "2", "stroke_curve": "smooth", "color": "#e8972c"},
                {"name": "Best", "data": soc_kw_best, "opacity": "1.0", "stroke_width": "4", "stroke_curve": "smooth", "color": "#eb2323"},
                {"name": "Best10", "data": soc_kw_best10, "opacity": "1.0", "stroke_width": "2", "stroke_curve": "smooth", "color": "#cd23eb"},
                {"name": "Actual", "data": soc_kw_h0, "opacity": "1.0", "stroke_width": "2", "stroke_curve": "smooth", "color": "#3291a8"},
                {"name": "Charge Limit Base", "data": charge_limit_kw, "opacity": "1.0", "stroke_width": "2", "stroke_curve": "stepline", "color": "#15eb8b"},
                {
                    "name": "Charge Limit Best",
                    "data": best_charge_limit_kw,
                    "opacity": "0.2",
                    "stroke_width": "4",
                    "stroke_curve": "stepline",
                    "chart_type": "area",
                    "color": "#e3e019",
                },
                {"name": "Best Export Limit", "data": best_export_limit_kw, "opacity": "1.0", "stroke_width": "3", "stroke_curve": "stepline", "color": "#15eb1c"},
                {"name": "Record", "data": record, "opacity": "0.5", "stroke_width": "4", "stroke_curve": "stepline", "color": "#000000", "chart_type": "area"},
            ]
            text += self.render_chart(series_data, "kWh", "Battery SoC Prediction", now_str)
        elif chart == "Power":
            series_data = [
                {"name": "battery", "data": battery_power_best, "opacity": "1.0", "stroke_width": "2", "stroke_curve": "smooth"},
                {"name": "pv", "data": pv_power_best, "opacity": "1.0", "stroke_width": "2", "stroke_curve": "smooth"},
                {"name": "grid", "data": grid_power_best, "opacity": "1.0", "stroke_width": "2", "stroke_curve": "smooth"},
                {"name": "load", "data": load_power_best, "opacity": "1.0", "stroke_width": "2", "stroke_curve": "smooth"},
                {"name": "iboost", "data": iboost_best, "opacity": "1.0", "stroke_width": "2", "stroke_curve": "smooth"},
            ]
            text += self.render_chart(series_data, "kW", "Best Power", now_str)
        elif chart == "Cost":
            series_data = [
                {"name": "Actual", "data": cost_today, "opacity": "0.2", "stroke_width": "2", "stroke_curve": "smooth", "chart_type": "area"},
                {"name": "Actual Import", "data": cost_today_import, "opacity": "1.0", "stroke_width": "2", "stroke_curve": "smooth"},
                {"name": "Actual Export", "data": cost_today_export, "opacity": "1.0", "stroke_width": "2", "stroke_curve": "smooth"},
                {"name": "Base", "data": metric, "opacity": "1.0", "stroke_width": "2", "stroke_curve": "smooth"},
                {"name": "Best", "data": best_metric, "opacity": "0.2", "stroke_width": "2", "stroke_curve": "smooth", "chart_type": "area"},
                {"name": "Base10", "data": base10_metric, "opacity": "1.0", "stroke_width": "2", "stroke_curve": "smooth"},
                {"name": "Best10", "data": best10_metric, "opacity": "1.0", "stroke_width": "2", "stroke_curve": "smooth"},
            ]
            text += self.render_chart(series_data, self.currency_symbols[1], "Home Cost Prediction", now_str)
        elif chart == "Rates":
            cost_today_hist = history_attribute(self.get_history_wrapper(self.prefix + ".ppkwh_today", 2, required=False))
            cost_hour_hist = history_attribute(self.get_history_wrapper(self.prefix + ".ppkwh_hour", 2, required=False))

            cost_pkwh_today = prune_today(cost_today_hist, self.now_utc, self.midnight_utc, prune=False, prune_future=False)
            cost_pkwh_hour = prune_today(cost_hour_hist, self.now_utc, self.midnight_utc, prune=False, prune_future=False)
            series_data = [
                {"name": "Import", "data": rates, "opacity": "1.0", "stroke_width": "3", "stroke_curve": "stepline"},
                {"name": "Export", "data": rates_export, "opacity": "0.2", "stroke_width": "2", "stroke_curve": "stepline", "chart_type": "area"},
                {"name": "Gas", "data": rates_gas, "opacity": "0.2", "stroke_width": "2", "stroke_curve": "stepline", "chart_type": "area"},
                {"name": "Hourly {}/kWh".format(self.currency_symbols[1]), "data": cost_pkwh_hour, "opacity": "1.0", "stroke_width": "2", "stroke_curve": "stepline"},
                {"name": "Today {}/kWh".format(self.currency_symbols[1]), "data": cost_pkwh_today, "opacity": "1.0", "stroke_width": "2", "stroke_curve": "stepline"},
            ]
            text += self.render_chart(series_data, self.currency_symbols[1], "Energy Rates", now_str)
        elif chart == "InDay":
            load_energy_actual = self.get_entity_results(self.prefix + ".load_energy_actual")
            load_energy_predicted = self.get_entity_results(self.prefix + ".load_energy_predicted")
            load_energy_adjusted = self.get_entity_results(self.prefix + ".load_energy_adjusted")
            inday_adjust_hist = history_attribute(self.get_history_wrapper(self.prefix + ".load_inday_adjustment", 2, required=False))
            adjustment_factor = prune_today(inday_adjust_hist, self.now_utc, self.midnight_utc, prune=True)

            series_data = [
                {"name": "Actual", "data": load_energy_actual, "opacity": "1.0", "stroke_width": "2", "stroke_curve": "smooth", "unit": "kWh"},
                {"name": "Predicted", "data": load_energy_predicted, "opacity": "1.0", "stroke_width": "2", "stroke_curve": "smooth", "unit": "kWh"},
                {"name": "Adjusted", "data": load_energy_adjusted, "opacity": "1.0", "stroke_width": "2", "stroke_curve": "smooth", "unit": "kWh"},
                {"name": "Adjustment Factor", "data": adjustment_factor, "opacity": "1.0", "stroke_width": "2", "stroke_curve": "smooth", "unit": "%"},
            ]
            secondary_axis = [
                {
                    "title": "%",
                    "series_name": "Adjustment Factor",
                    "decimals": 0,
                    "opposite": True,
                    "labels_formatter": "return val.toFixed(0) + '%';",
                }
            ]
            text += self.render_chart(series_data, "kWh", "In Day Adjustment", now_str, extra_yaxis=secondary_axis)
        elif chart == "PV" or chart == "PV7":
            pv_power_hist = history_attribute(self.get_history_wrapper(self.prefix + ".pv_power", 7, required=False))
            pv_power = prune_today(pv_power_hist, self.now_utc, self.midnight_utc, prune=chart == "PV")
            pv_forecast_hist = history_attribute(self.get_history_wrapper("sensor." + self.prefix + "_pv_forecast_h0", 7, required=False))
            pv_forecast_histCL = history_attribute(self.get_history_wrapper("sensor." + self.prefix + "_pv_forecast_h0", 7, required=False), attributes=True, state_key="nowCL")

            pv_forecast = prune_today(pv_forecast_hist, self.now_utc, self.midnight_utc, prune=chart == "PV", intermediate=True)
            pv_forecastCL = prune_today(pv_forecast_histCL, self.now_utc, self.midnight_utc, prune=chart == "PV", intermediate=True)
            pv_today_forecast = prune_today(self.get_entity_detailedForecast("sensor." + self.prefix + "_pv_today", "pv_estimate"), self.now_utc, self.midnight_utc, prune=False, intermediate=True)
            pv_today_forecast10 = prune_today(self.get_entity_detailedForecast("sensor." + self.prefix + "_pv_today", "pv_estimate10"), self.now_utc, self.midnight_utc, prune=False, intermediate=True)
            pv_today_forecast90 = prune_today(self.get_entity_detailedForecast("sensor." + self.prefix + "_pv_today", "pv_estimate90"), self.now_utc, self.midnight_utc, prune=False, intermediate=True)
            pv_today_forecastCL = prune_today(self.get_entity_detailedForecast("sensor." + self.prefix + "_pv_today", "pv_estimateCL"), self.now_utc, self.midnight_utc, prune=False, intermediate=True)
            pv_today_forecast.update(prune_today(self.get_entity_detailedForecast("sensor." + self.prefix + "_pv_tomorrow", "pv_estimate"), self.now_utc, self.midnight_utc, prune=False, intermediate=True))
            pv_today_forecast10.update(prune_today(self.get_entity_detailedForecast("sensor." + self.prefix + "_pv_tomorrow", "pv_estimate10"), self.now_utc, self.midnight_utc, prune=False, intermediate=True))
            pv_today_forecast90.update(prune_today(self.get_entity_detailedForecast("sensor." + self.prefix + "_pv_tomorrow", "pv_estimate90"), self.now_utc, self.midnight_utc, prune=False, intermediate=True))
            pv_today_forecastCL.update(prune_today(self.get_entity_detailedForecast("sensor." + self.prefix + "_pv_tomorrow", "pv_estimateCL"), self.now_utc, self.midnight_utc, prune=False, intermediate=True))

            series_data = [
                {"name": "PV Power", "data": pv_power, "opacity": "1.0", "stroke_width": "3", "stroke_curve": "smooth", "color": "#f5c43d"},
                {"name": "Forecast History", "data": pv_forecast, "opacity": "0.3", "stroke_width": "3", "stroke_curve": "smooth", "color": "#a8a8a7", "chart_type": "area"},
                {"name": "Forecast History CL", "data": pv_forecastCL, "opacity": "0.3", "stroke_width": "3", "stroke_curve": "smooth", "color": "#e90a0a", "chart_type": "area"},
                {"name": "Forecast", "data": pv_today_forecast, "opacity": "0.3", "stroke_width": "2", "stroke_curve": "smooth", "chart_type": "area", "color": "#a8a8a7"},
                {"name": "Forecast 10%", "data": pv_today_forecast10, "opacity": "0.3", "stroke_width": "2", "stroke_curve": "smooth", "chart_type": "area", "color": "#6b6b6b"},
                {"name": "Forecast 90%", "data": pv_today_forecast90, "opacity": "0.3", "stroke_width": "2", "stroke_curve": "smooth", "chart_type": "area", "color": "#cccccc"},
                {"name": "Forecast CL", "data": pv_today_forecastCL, "opacity": "0.3", "stroke_width": "2", "stroke_curve": "smooth", "chart_type": "area", "color": "#e90a0a"},
            ]
            text += self.render_chart(series_data, "kW", "Solar Forecast", now_str)
        elif chart == "PVAccuracy":
            # Get pv_today history once and extract total and remaining attributes per timestamp
            pv_today_hist = self.get_history_wrapper("sensor." + self.prefix + "_pv_today", 7, required=False)
            pv_total_raw = history_attribute(pv_today_hist, attributes=True, state_key="totalCL")
            pv_remaining_raw = history_attribute(pv_today_hist, attributes=True, state_key="remainingCL")
            # Compute forecast so far = total - remaining per timestamp
            pv_forecast_sofar_raw = {}
            for ts, total_val in pv_total_raw.items():
                remaining_val = pv_remaining_raw.get(ts, 0)
                pv_forecast_sofar_raw[ts] = dp2(max(total_val - remaining_val, 0))
            pv_forecast_sofar = prune_today(pv_forecast_sofar_raw, self.now_utc, self.midnight_utc, prune=False)
            # Get actual PV energy over time
            pv_actual_hist = history_attribute(self.get_history_wrapper(self.prefix + ".pv_energy_h0", 7, required=False))
            pv_actual = prune_today(pv_actual_hist, self.now_utc, self.midnight_utc, prune=False)
            series_data = [
                {"name": "PV Forecast (so far)", "data": pv_forecast_sofar, "opacity": "1.0", "stroke_width": "2", "stroke_curve": "stepline", "color": "#a8a8a7"},
                {"name": "PV Actual", "data": pv_actual, "opacity": "1.0", "stroke_width": "3", "stroke_curve": "stepline", "color": "#f5c43d"},
            ]
            text += self.render_chart(series_data, "kWh", "PV Forecast vs Actual", now_str)
        elif chart == "LoadML":
            load_today_history = self.get_history_with_now_attrs("sensor." + self.prefix + "_load_ml_stats", 7)
            # Get historical load data for last 24 hours
            load_today = prune_today(history_attribute(load_today_history, attributes=True, state_key="load_today"), self.now_utc, self.midnight_utc, prune=False)
            load_today_h1 = prune_today(history_attribute(load_today_history, attributes=True, state_key="load_today_h1"), self.now_utc, self.midnight_utc, prune=False, offset_minutes=60 * 1)
            load_today_h8 = prune_today(history_attribute(load_today_history, attributes=True, state_key="load_today_h8"), self.now_utc, self.midnight_utc, prune=False, offset_minutes=60 * 8)

            # Get ML forecast from load_forecast_ml entity results
            load_ml_forecast = self.get_entity_results("sensor." + self.prefix + "_load_ml_forecast")

            series_data = [
                {"name": "Load (Actual)", "data": load_today, "opacity": "1.0", "stroke_width": "3", "stroke_curve": "smooth", "color": "#3291a8"},
                {"name": "Forecast (+1h)", "data": load_today_h1, "opacity": "0.7", "stroke_width": "2", "stroke_curve": "smooth", "color": "#f5a442"},
                {"name": "Forecast (+8h)", "data": load_today_h8, "opacity": "0.7", "stroke_width": "2", "stroke_curve": "smooth", "color": "#9b59b6"},
                {"name": "Load (ML Forecast)", "data": load_ml_forecast, "opacity": "1.0", "stroke_width": "3", "stroke_curve": "smooth", "color": "#eb2323"},
            ]
            text += self.render_chart(series_data, "kWh", "ML Load Forecast", now_str)
        elif chart == "LoadMLPower":
            # Get historical load power
            load_power_hist = history_attribute(self.get_history_wrapper(self.prefix + ".load_power", 7, required=False))
            load_power = prune_today(load_power_hist, self.now_utc, self.midnight_utc, prune=True, prune_past_days=7)

            # Get ML predicted load energy (cumulative) and convert to power (kW)
            load_ml_forecast_energy = self.get_entity_results("sensor." + self.prefix + "_load_ml_forecast")
            load_ml_forecast_power = {}

            # Fetch stats history once and append current attributes at now_utc
            power_today_history = self.get_history_with_now_attrs("sensor." + self.prefix + "_load_ml_stats", 7)
            power_today = prune_today(history_attribute(power_today_history, attributes=True, state_key="power_today"), self.now_utc, self.midnight_utc, prune=False)
            power_today_h1 = prune_today(history_attribute(power_today_history, attributes=True, state_key="power_today_h1"), self.now_utc, self.midnight_utc, prune=False, offset_minutes=60 * 1)
            power_today_h8 = prune_today(history_attribute(power_today_history, attributes=True, state_key="power_today_h8"), self.now_utc, self.midnight_utc, prune=False, offset_minutes=60 * 8)

            # Sort timestamps and calculate deltas to get energy per interval
            if load_ml_forecast_energy:
                from datetime import datetime

                sorted_timestamps = sorted(load_ml_forecast_energy.keys())
                prev_energy = 0
                prev_timestamp = None
                for timestamp in sorted_timestamps:
                    energy = load_ml_forecast_energy[timestamp]
                    energy_delta = max(energy - prev_energy, 0)

                    # Calculate actual interval in hours between this and previous timestamp
                    if prev_timestamp:
                        # Parse timestamps and calculate difference in hours
                        curr_dt = datetime.strptime(timestamp, TIME_FORMAT)
                        prev_dt = datetime.strptime(prev_timestamp, TIME_FORMAT)
                        interval_hours = (curr_dt - prev_dt).total_seconds() / 3600.0
                        load_ml_forecast_power[timestamp] = dp4(energy_delta / interval_hours)

                    prev_energy = energy
                    prev_timestamp = timestamp

            # Get historical PV power
            pv_power_hist = history_attribute(self.get_history_wrapper(self.prefix + ".pv_power", 1, required=False))
            pv_power = prune_today(pv_power_hist, self.now_utc, self.midnight_utc, prune=True, prune_past_days=7)

            # Get temperature prediction data and limit to 48 hours forward
            temperature_forecast = prune_today(self.get_entity_results("sensor." + self.prefix + "_temperature"), self.now_utc, self.midnight_utc, prune_future=True, prune_future_days=2, prune=True, prune_past_days=7)

            series_data = [
                {"name": "Load Power (Actual)", "data": load_power, "opacity": "1.0", "stroke_width": "3", "stroke_curve": "smooth", "color": "#3291a8", "unit": "kW"},
                {"name": "Load Power (ML Predicted Future)", "data": load_ml_forecast_power, "opacity": "0.5", "stroke_width": "3", "chart_type": "area", "stroke_curve": "smooth", "color": "#eb2323", "unit": "kW"},
                {"name": "Load Power ML History", "data": power_today, "opacity": "1.0", "stroke_width": "2", "stroke_curve": "smooth", "unit": "kW", "color": "#eb2323"},
                {"name": "Load Power ML History +1h", "data": power_today_h1, "opacity": "1.0", "stroke_width": "2", "stroke_curve": "smooth", "unit": "kW", "color": "#716d63"},
                {"name": "Load Power ML History +8h", "data": power_today_h8, "opacity": "1.0", "stroke_width": "2", "stroke_curve": "smooth", "unit": "kW", "color": "#a6a5a3"},
                {"name": "PV Power (Actual)", "data": pv_power, "opacity": "1.0", "stroke_width": "3", "stroke_curve": "smooth", "color": "#f5c43d", "unit": "kW"},
                {"name": "PV Power (Predicted)", "data": pv_power_best, "opacity": "0.7", "stroke_width": "2", "stroke_curve": "smooth", "chart_type": "area", "color": "#ffa500", "unit": "kW"},
                {"name": "Temperature", "data": temperature_forecast, "opacity": "1.0", "stroke_width": "2", "stroke_curve": "smooth", "color": "#75ff6b", "unit": "°C"},
            ]

            # Configure secondary axis for temperature
            secondary_axis = [
                {
                    "title": "°C",
                    "series_name": "Temperature",
                    "decimals": 1,
                    "opposite": True,
                    "labels_formatter": "return val.toFixed(1) + '°C';",
                }
            ]

            text += self.render_chart(series_data, "kW", "ML Load & PV Power with Temperature", now_str, extra_yaxis=secondary_axis)
        elif chart == "Savings":
            # Get daily savings data (historical)
            # first=False ensures we use the last (most recent) update per day, not a stale midnight echo
            savings_predbat_hist = history_attribute(self.get_history_wrapper(self.prefix + ".savings_yesterday_predbat", 28, required=False), daily=True, offset_days=-1, pounds=True, first=False)
            savings_pvbat_hist = history_attribute(self.get_history_wrapper(self.prefix + ".savings_yesterday_pvbat", 28, required=False), daily=True, offset_days=-1, pounds=True, first=False)
            cost_yesterday_hist = history_attribute(self.get_history_wrapper(self.prefix + ".cost_yesterday", 28, required=False), daily=True, offset_days=-1, pounds=True, first=False)

            # Get cumulative/total savings over time (historical)
            savings_total_predbat_hist = history_attribute(self.get_history_wrapper(self.prefix + ".savings_total_predbat", 28, required=False), daily=True, pounds=True, first=False)
            savings_total_pvbat_hist = history_attribute(self.get_history_wrapper(self.prefix + ".savings_total_pvbat", 28, required=False), daily=True, pounds=True, first=False)

            series_data = [
                # Daily savings (bars) on primary axis
                {"name": "Daily Predbat Saving", "data": savings_predbat_hist, "opacity": "1.0", "stroke_width": "2", "chart_type": "bar", "color": "#f5a442", "unit": self.currency_symbols[0]},
                {"name": "Daily PV/Battery Saving", "data": savings_pvbat_hist, "opacity": "1.0", "stroke_width": "2", "chart_type": "bar", "color": "#3291a8", "unit": self.currency_symbols[0]},
                {"name": "Daily Actual Cost", "data": cost_yesterday_hist, "opacity": "1.0", "stroke_width": "2", "chart_type": "bar", "color": "#eb2323", "unit": self.currency_symbols[0]},
                # Cumulative savings (lines) on secondary axis
                {"name": "Total Predbat Saving", "data": savings_total_predbat_hist, "opacity": "1.0", "stroke_width": "3", "stroke_curve": "smooth", "color": "#f5c43d", "unit": self.currency_symbols[0]},
                {"name": "Total PV/Battery Saving", "data": savings_total_pvbat_hist, "opacity": "1.0", "stroke_width": "3", "stroke_curve": "smooth", "color": "#15eb8b", "unit": self.currency_symbols[0]},
            ]

            # Configure secondary axis for cumulative totals
            secondary_axis = [
                {
                    "title": f"Total Savings ({self.currency_symbols[0]})",
                    "series_names": ["Total Predbat Saving", "Total PV/Battery Saving"],
                    "decimals": 0,
                    "opposite": True,
                    "labels_formatter": f"return val.toFixed(0);",
                }
            ]

            text += self.render_chart(series_data, f"Daily Savings ({self.currency_symbols[0]})", "Cost Savings Analysis", now_str, daily_chart=False, extra_yaxis=secondary_axis)
        elif chart == "BatteryDegradation":
            num_inverters = int(self.base.get_arg("num_inverters", 1))
            series_data = []
            secondary_series_names = []
            inv_colors = [
                ("#3291a8", "#eb2323", "#f5a442"),
                ("#9b59b6", "#15eb8b", "#f5c43d"),
                ("#e8972c", "#cd23eb", "#15eb1c"),
                ("#6b6b6b", "#cccccc", "#a8a8a7"),
            ]
            for inv_id in range(num_inverters):
                suffix = "" if inv_id == 0 else "_{}".format(inv_id)
                label_suffix = "" if num_inverters == 1 else " {}".format(inv_id)
                sensor_id = "sensor." + self.prefix + "_soc_max_calculated" + suffix
                raw_hist = self.get_history_wrapper(sensor_id, 28, required=False)
                calculated_hist = history_attribute(raw_hist, daily=True, first=False)
                nominal_hist = history_attribute(raw_hist, attributes=True, state_key="nominal_capacity", daily=True, first=False)
                degradation_hist = history_attribute(raw_hist, attributes=True, state_key="degradation_percent", daily=True, first=False)
                # Also inject the current sensor value so today's data point is always present
                today_key = self.now_utc.strftime("%Y-%m-%d")
                cur_state = self.base.dashboard_values.get(sensor_id, {}).get("state")
                cur_attrs = self.base.dashboard_values.get(sensor_id, {}).get("attributes", {})
                if cur_state is not None:
                    try:
                        calculated_hist[today_key] = float(cur_state)
                    except (ValueError, TypeError):
                        pass
                if "nominal_capacity" in cur_attrs:
                    try:
                        nominal_hist[today_key] = float(cur_attrs["nominal_capacity"])
                    except (ValueError, TypeError):
                        pass
                if "degradation_percent" in cur_attrs:
                    try:
                        degradation_hist[today_key] = float(cur_attrs["degradation_percent"])
                    except (ValueError, TypeError):
                        pass
                colors = inv_colors[inv_id % len(inv_colors)]
                nominal_name = "Nominal{}".format(label_suffix)
                calculated_name = "Calculated{}".format(label_suffix)
                degradation_name = "Degradation%{}".format(label_suffix)
                series_data.append({"name": nominal_name, "data": nominal_hist, "opacity": "1.0", "stroke_width": "3", "stroke_curve": "stepline", "color": colors[0], "unit": "kWh"})
                series_data.append({"name": calculated_name, "data": calculated_hist, "opacity": "1.0", "stroke_width": "3", "stroke_curve": "stepline", "color": colors[1], "unit": "kWh"})
                series_data.append({"name": degradation_name, "data": degradation_hist, "opacity": "1.0", "stroke_width": "2", "stroke_curve": "stepline", "color": colors[2], "unit": "%"})
                secondary_series_names.append(degradation_name)
            secondary_axis = [
                {
                    "title": "%",
                    "series_names": secondary_series_names,
                    "decimals": 1,
                    "opposite": True,
                    "labels_formatter": "return val.toFixed(1) + '%';",
                }
            ]
            text += self.render_chart(series_data, "kWh", "Battery Degradation", now_str, daily_chart=False, extra_yaxis=secondary_axis)
            if self.base.battery_scaling_auto:
                text += "<p style='color:#15eb8b;font-weight:bold;'>&#10003; battery_scaling_auto is enabled &mdash; Predbat is automatically adjusting the usable battery capacity to account for degradation.</p>\n"
            else:
                text += (
                    "<p style='color:#f5a442;font-weight:bold;'>&#9888; battery_scaling_auto is disabled. "
                    "Enable it in apps.yaml (<code>battery_scaling_auto: true</code>) so Predbat can automatically "
                    "scale the usable battery capacity to reflect real-world degradation shown in this chart.</p>\n"
                )
        elif chart == "MarginalCosts":
            sensor_attrs = self.base.dashboard_values.get("sensor." + self.prefix + "_marginal_energy_costs", {}).get("attributes", {})
            matrix = sensor_attrs.get("matrix", {})
            energy_labels = list(matrix.keys())
            time_labels = list(next(iter(matrix.values()), {}).keys())
            if not matrix:
                text += "<br><h2>Marginal cost data not yet available &mdash; run a plan first</h2>"
            else:
                grid_import = sensor_attrs.get("grid_import", {})
                grid_export = sensor_attrs.get("grid_export", {})
                all_grid_vals = list(grid_import.values()) + list(grid_export.values())
                range_min = min(getattr(self.base, "rate_min", 0), getattr(self.base, "marginal_costs_min", 0), min(all_grid_vals) if all_grid_vals else 0)
                range_max = max(getattr(self.base, "rate_max", 100), getattr(self.base, "marginal_costs_max", 100), max(all_grid_vals) if all_grid_vals else 0)
                # Status table — cheap/moderate for each level
                curr = self.currency_symbols[1]
                text += "<br><h2>Marginal Energy Costs</h2>\n"
                text += "<p>Marginal costs for each additional kWh of load, based on current plan. Shows how much more expensive (or cheaper) it is to use more energy than forecasted.</p>\n"
                text += "<table style='border-collapse:collapse;margin-bottom:16px;font-size:0.95em;'>\n"
                text += "<tr><th style='padding:6px 12px;border:1px solid #555;text-align:left;'>Level</th>"
                text += "<th style='padding:6px 12px;border:1px solid #555;'>kWh</th>"
                text += "<th style='padding:6px 12px;border:1px solid #555;'>Cost now ({}/kWh)</th>".format(curr)
                text += "<th style='padding:6px 12px;border:1px solid #555;'>Cheap?</th>"
                text += "<th style='padding:6px 12px;border:1px solid #555;'>Moderate?</th></tr>\n"
                for state_name, kwh in zip(MARGINAL_EXTRA_KWH_LEVEL_NAMES, MARGINAL_EXTRA_KWH_LEVELS):
                    cost = sensor_attrs.get("rate_now_{}_consumption".format(state_name), "")
                    cheap_key = "binary_sensor.{}_marginal_rate_now_{}_is_cheap".format(self.prefix, state_name)
                    mod_key = "binary_sensor.{}_marginal_rate_now_{}_is_moderate".format(self.prefix, state_name)
                    is_cheap = self.base.dashboard_values.get(cheap_key, {}).get("state") == "on"
                    is_moderate = self.base.dashboard_values.get(mod_key, {}).get("state") == "on"
                    cheap_cell = "<td style='padding:6px 12px;border:1px solid #555;text-align:center;background:#00B050;color:#fff;'>Yes</td>" if is_cheap else "<td style='padding:6px 12px;border:1px solid #555;text-align:center;'>No</td>"
                    mod_cell = "<td style='padding:6px 12px;border:1px solid #555;text-align:center;background:#FFFF00;color:#333;'>Yes</td>" if is_moderate else "<td style='padding:6px 12px;border:1px solid #555;text-align:center;'>No</td>"
                    text += "<tr><td style='padding:6px 12px;border:1px solid #555;'>{}</td>".format(state_name.capitalize())
                    text += "<td style='padding:6px 12px;border:1px solid #555;text-align:center;'>{}</td>".format(kwh)
                    text += "<td style='padding:6px 12px;border:1px solid #555;text-align:center;'>{}</td>".format(cost)
                    text += cheap_cell + mod_cell + "</tr>\n"
                text += "</table>\n"
                # Grid rates chart (compact, separate div)
                if grid_import or grid_export:
                    grid_series = []
                    if grid_export:
                        grid_series.append({"name": "Export", "data": [{"x": t, "y": grid_export.get(t, 0)} for t in time_labels]})
                    if grid_import:
                        grid_series.append({"name": "Import", "data": [{"x": t, "y": grid_import.get(t, 0)} for t in time_labels]})
                    text += "<div id='chart_grid'></div>\n"
                    text += self.render_heatmap_chart(grid_series, "Grid Rates ({}/kWh)".format(self.currency_symbols[1]), range_min, range_max, chart_id="chart_grid")
                # Marginal costs chart
                title = "Marginal Energy Cost ({}/kWh)".format(self.currency_symbols[1])
                marginal_series = []
                for label in energy_labels:
                    row = matrix.get(label, {})
                    data_points = [{"x": t, "y": row.get(t, 0)} for t in time_labels]
                    marginal_series.append({"name": "{}kWh".format(label), "data": data_points})
                text += "<div id='chart'></div>\n"
                text += self.render_heatmap_chart(marginal_series, title, range_min, range_max, chart_id="chart")
                # Historical + forecast line chart
                marginal_hist = self.get_history_with_now_attrs("sensor." + self.prefix + "_marginal_energy_costs", 7)

                def _marginal_history(key):
                    return prune_today(history_attribute(marginal_hist, attributes=True, state_key=key), self.now_utc, self.midnight_utc, prune=False, prune_past_days=7, prune_future=True)

                hist_low = _marginal_history("rate_now_low_consumption")
                hist_med = _marginal_history("rate_now_med_consumption")
                hist_high = _marginal_history("rate_now_high_consumption")
                hist_ev = _marginal_history("rate_now_ev_consumption")
                hist_import = _marginal_history("grid_import_now")
                hist_export = _marginal_history("grid_export_now")

                # Build forward-looking series from matrix — use actual datetime from offset, not just HH:MM
                fwd_low, fwd_med, fwd_high, fwd_ev, fwd_import_fwd, fwd_export_fwd = {}, {}, {}, {}, {}, {}
                for idx, offset in enumerate(MARGINAL_TIME_OFFSETS):
                    t_label = time_labels[idx]
                    ts = (self.now_utc + timedelta(minutes=offset)).isoformat()
                    fwd_low[ts] = matrix.get(MARGINAL_EXTRA_KWH_LEVELS[0], {}).get(t_label, 0)
                    fwd_med[ts] = matrix.get(MARGINAL_EXTRA_KWH_LEVELS[1], {}).get(t_label, 0)
                    fwd_high[ts] = matrix.get(MARGINAL_EXTRA_KWH_LEVELS[2], {}).get(t_label, 0)
                    fwd_ev[ts] = matrix.get(MARGINAL_EXTRA_KWH_LEVELS[3], {}).get(t_label, 0)
                    fwd_import_fwd[ts] = grid_import.get(t_label, 0)
                    fwd_export_fwd[ts] = grid_export.get(t_label, 0)

                line_series = [
                    {"name": "Low 1kWh", "data": hist_low, "opacity": "1.0", "stroke_width": "3", "stroke_curve": "stepline", "color": "#3291a8"},
                    {"name": "Low 1kWh (future)", "data": fwd_low, "opacity": "1.0", "stroke_width": "3", "stroke_curve": "stepline", "color": "#3291a8"},
                    {"name": "Med 2kWh", "data": hist_med, "opacity": "1.0", "stroke_width": "3", "stroke_curve": "stepline", "color": "#f5a442"},
                    {"name": "Med 2kWh (future)", "data": fwd_med, "opacity": "1.0", "stroke_width": "3", "stroke_curve": "stepline", "color": "#f5a442"},
                    {"name": "High 4kWh", "data": hist_high, "opacity": "1.0", "stroke_width": "3", "stroke_curve": "stepline", "color": "#eb2323"},
                    {"name": "High 4kWh (future)", "data": fwd_high, "opacity": "1.0", "stroke_width": "3", "stroke_curve": "stepline", "color": "#eb2323"},
                    {"name": "EV 8kWh (future)", "data": fwd_ev, "opacity": "1.0", "stroke_width": "3", "stroke_curve": "stepline", "color": "#9b59b6"},
                    {"name": "EV 8kWh", "data": hist_ev, "opacity": "1.0", "stroke_width": "3", "stroke_curve": "stepline", "color": "#9b59b6"},
                    {"name": "Import rate", "data": hist_import, "opacity": "1.0", "stroke_width": "4", "stroke_curve": "stepline", "color": "#15eb8b"},
                    {"name": "Export rate", "data": hist_export, "opacity": "1.0", "stroke_width": "4", "stroke_curve": "stepline", "color": "#15eb1c"},
                    {"name": "Import rate (future)", "data": fwd_import_fwd, "opacity": "1.0", "stroke_width": "4", "stroke_curve": "stepline", "color": "#15eb8b"},
                    {"name": "Export rate (future)", "data": fwd_export_fwd, "opacity": "1.0", "stroke_width": "4", "stroke_curve": "stepline", "color": "#15eb1c"},
                ]
                text += "<div id='chart_marginal_hist'></div>\n"
                text += self.render_chart(line_series, curr, "Marginal Energy Rates \u2014 History & Forecast", now_str, tagname="chart_marginal_hist", daily_chart=False)
        else:
            text += "<br><h2>Unknown chart type</h2>"

        return text

    async def html_charts(self, request):
        """
        Render apps.yaml as an HTML page
        """
        args = request.query
        chart = args.get("chart", "Battery")
        self.default_page = "./charts?chart={}".format(chart)
        text = self.get_header("Predbat Charts", refresh=60 * 5)
        text += "<body>\n"
        text += get_charts_css()

        text += '<div class="charts-menu">'
        text += "<h3>Charts</h3> "
        text += f'<a href="./charts?chart=Battery" class="{"active" if chart == "Battery" else ""}">Battery</a>'
        text += f'<a href="./charts?chart=Power" class="{"active" if chart == "Power" else ""}">Power</a>'
        text += f'<a href="./charts?chart=Cost" class="{"active" if chart == "Cost" else ""}">Cost</a>'
        text += f'<a href="./charts?chart=Rates" class="{"active" if chart == "Rates" else ""}">Rates</a>'
        text += f'<a href="./charts?chart=InDay" class="{"active" if chart == "InDay" else ""}">InDay</a>'
        text += f'<a href="./charts?chart=PV" class="{"active" if chart == "PV" else ""}">PV</a>'
        text += f'<a href="./charts?chart=PV7" class="{"active" if chart == "PV7" else ""}">PV7</a>'
        text += f'<a href="./charts?chart=PVAccuracy" class="{"active" if chart == "PVAccuracy" else ""}">PVAccuracy</a>'
        text += f'<a href="./charts?chart=Savings" class="{"active" if chart == "Savings" else ""}">Savings</a>'
        text += f'<a href="./charts?chart=BatteryDegradation" class="{"active" if chart == "BatteryDegradation" else ""}">BatteryDegradation</a>'
        text += f'<a href="./charts?chart=MarginalCosts" class="{"active" if chart == "MarginalCosts" else ""}">MarginalCosts</a>'
        # Only show LoadML chart if ML is enabled
        if self.base.get_arg("load_ml_enable", False):
            text += f'<a href="./charts?chart=LoadML" class="{"active" if chart == "LoadML" else ""}">LoadML</a>'
            text += f'<a href="./charts?chart=LoadMLPower" class="{"active" if chart == "LoadMLPower" else ""}">LoadMLPower</a>'
        text += "</div>"

        if chart != "MarginalCosts":
            text += '<div id="chart"></div>'
        text += self.get_chart(chart=chart)
        text += "</body></html>\n"
        return web.Response(content_type="text/html", text=text)

    def is_editable_value(self, value):
        """
        Check if a value is editable (numerical, boolean, entity strings, or list with editable items)
        """
        if isinstance(value, bool):
            return True
        if isinstance(value, (int, float)):
            return True
        if isinstance(value, str):
            return True
        if isinstance(value, list):
            # A list is editable if it contains any editable items
            return len(value) > 0 and any(self.is_editable_value(item) for item in value)
        return False

    def resolve_value_raw(self, arg, value):
        if isinstance(value, str) and "{" in value:
            text = self.base.resolve_arg(arg, value, indirect=False, quiet=True)
            if text is not None:
                value = text
            return value
        elif isinstance(value, list):
            return [self.resolve_value_raw(arg, item) for item in value]
        elif isinstance(value, dict):
            return {key: self.resolve_value_raw(arg, val) for key, val in value.items()}
        else:
            return value

    async def html_apps(self, request):
        """
        Render apps.yaml as an HTML page with edit functionality
        """
        self.default_page = "./apps"
        text = self.get_header("Predbat Apps.yaml", refresh=60 * 5)

        # all_states has all the HA entities and their states
        all_states_data = self.get_state_wrapper()
        all_states = {}
        for entity in all_states_data:
            all_states[entity] = {"state": all_states_data[entity].get("state", ""), "unit_of_measurement": all_states_data[entity].get("attributes", {}).get("unit_of_measurement", "")}

        # Ensure all_states is valid and serializable
        try:
            all_states_json = json.dumps(all_states)
        except (TypeError, ValueError) as e:
            self.log(f"Error serializing all_states for web interface: {e}")
            all_states_json = "{}"

        # Add CSS styles for edit functionality
        text += get_apps_css()
        text += "<body>\n"

        # JavaScript for edit functionality
        text += get_apps_js(all_states_json)

        # Add message container
        text += '<div id="messageContainer" class="message-container"></div>\n'

        # Add save controls at the top
        text += """
<div id="saveControls" class="save-controls">
    <div class="save-status">
        <span id="changeCount">No unsaved changes</span>
    </div>
    <button id="saveAllButton" class="save-all-button" onclick="saveAllChanges()" disabled>Save All Changes</button>
    <button id="discardAllButton" class="discard-all-button" onclick="discardAllChanges()" disabled>Discard Changes</button>
</div>
"""

        warning = ""
        if self.base.arg_errors:
            warning = "&#9888;"
        text += "{}<a href='./debug_apps'>apps.yaml</a> - has {} errors<br>\n".format(warning, len(self.base.arg_errors))
        text += "<table>\n"
        text += "<tr><th>Name</th><th>Value</th><th>Actions</th></tr>\n"

        args = self.args
        row_id = 0
        # Initialise nested values tracking and row counter
        self._nested_values = {}
        row_counter = [1000]  # Start nested rows at 1000 to avoid conflicts

        for arg in args:
            value = args[arg]
            raw_value = self.resolve_value_raw(arg, value)
            if isinstance(arg, str) and (("_key" in arg) or ("_password" in arg) or ("_secret" in arg) or ("_pem" in arg)):
                value = '<span title = "{}"> (hidden)</span>'.format(value)
            arg_errors = self.base.arg_errors.get(arg, "")

            # Determine if this value can be edited
            # Lists should not be editable at the top level - only their individual items
            can_edit = self.is_editable_value(value) and not arg_errors and not isinstance(value, list)

            if arg_errors:
                text += '<tr id="row_{}" data-arg-name="{}" data-original-value="{}"><td bgcolor=#FF7777><span title="{}">&#9888;{}</span></td><td>{}</td><td></td></tr>\n'.format(
                    row_id, arg, html_module.escape(str(raw_value)), arg_errors, arg, self.render_type(arg, value, "", row_counter)
                )
            else:
                actions_cell = ""
                if can_edit:
                    if isinstance(value, bool):
                        # For boolean values, show a toggle button
                        toggle_class = "toggle-button active" if value else "toggle-button"
                        actions_cell = f'<button class="{toggle_class}" onclick="toggleValue({row_id})" data-value="{str(value).lower()}"></button>'
                    else:
                        # For numerical values, show edit button
                        actions_cell = f'<button class="edit-button" onclick="editValue({row_id})">Edit</button>'

                text += '<tr id="row_{}" data-arg-name="{}" data-original-value="{}"><td>{}</td><td id="value_{}">{}</td><td>{}</td></tr>\n'.format(
                    row_id, arg, html_module.escape(str(raw_value)), arg, row_id, self.render_type(arg, value, "", row_counter), actions_cell
                )
            row_id += 1

        args = self.base.unmatched_args
        for arg in args:
            value = args[arg]
            raw_value = self.resolve_value_raw(arg, value)
            text += '<tr id="row_{}" data-arg-name="{}" data-original-value="{}"><td>{}</td><td><span style="background-color:#FFAAAA">{}</span></td><td></td></tr>\n'.format(
                row_id, arg, html_module.escape(str(raw_value)), arg, self.render_type(arg, value, "", row_counter)
            )
            row_id += 1

        text += "</table>"

        text += "</body></html>\n"
        return web.Response(content_type="text/html", text=text)

    def _update_nested_yaml_value(self, data, path, value):
        """
        Update a nested value in YAML data using a dot-notation path
        """
        pre_keys = path.split(".")
        keys = []
        # Split out set of square brackets into a different key
        for key in pre_keys:
            if "[" in key and "]" in key:
                # Handle keys with square brackets, e.g., "battery_charge_low[0]"
                base_key, index = key.split("[")
                index = index.rstrip("]")
                keys.append(base_key)
                keys.append(f"[{index}]")
            else:
                keys.append(key)

        current = data

        # Navigate to the parent of the target value
        for key in keys[:-1]:
            if key.startswith("[") and key.endswith("]"):
                # Handle numerical index in square brackets
                index = int(key[1:-1])
                if not isinstance(current, list) or index >= len(current):
                    raise KeyError(f"Index '{index}' out of range in path '{path}'")
                current = current[index]
            elif key in current:
                current = current[key]
            else:
                raise KeyError(f"Key '{key}' not found in path '{path}'")

        # Set the final value
        key = keys[-1]
        if key.startswith("[") and key.endswith("]"):
            # Handle numerical index in square brackets
            index = int(key[1:-1])
            if not isinstance(current, list) or index >= len(current):
                raise KeyError(f"Index '{index}' out of range in path '{path}'")
            current[index] = value
        elif key in current:
            current[key] = value
        else:
            # If final key is numerical try it as an integer
            if key.isdigit():
                key = int(key)
                if key not in current:
                    raise KeyError(f"Final key '{key}' not found in path '{path}'")
                else:
                    current[key] = value
            else:
                raise KeyError(f"Final key '{key}' not found in path '{path}'")

    async def html_apps_post(self, request):
        """
        Handle POST request for apps page - batch edit values
        """
        try:
            postdata = await request.post()
            changes_json = postdata.get("changes", "")

            if not changes_json:
                return web.json_response({"success": False, "message": "No changes provided"})

            # Parse the changes JSON
            try:
                changes = json.loads(changes_json)
            except json.JSONDecodeError:
                return web.json_response({"success": False, "message": "Invalid changes format"})

            if not changes:
                return web.json_response({"success": False, "message": "No changes to save"})

            # Read and parse the apps.yaml file using ruamel.yaml
            apps_yaml_path = "apps.yaml"
            yaml = YAML()
            yaml.preserve_quotes = True

            try:
                with open(apps_yaml_path, "r") as f:
                    data = yaml.load(f)
            except Exception as e:
                return web.json_response({"success": False, "message": f"Error reading apps.yaml: {str(e)}"})

            # Navigate to the predbat section
            if ROOT_YAML_KEY not in data:
                return web.json_response({"success": False, "message": "pred_bat section not found in apps.yaml"})

            # Process each change
            updated_args = []
            for path_or_arg, change_info in changes.items():
                new_value = change_info["newValue"]
                change_type = change_info.get("type", "numerical")
                is_nested = change_info.get("isNested", False)

                # Convert the new value to appropriate type
                try:
                    if change_type == "boolean":
                        converted_value = new_value.lower() == "true"
                    elif change_type == "string" or change_type == "entity":
                        # Keep as string (includes entity IDs)
                        converted_value = new_value
                    else:
                        # Try to convert to int first, then float (numerical values)
                        if "." in new_value:
                            converted_value = float(new_value)
                        else:
                            converted_value = int(new_value)
                except ValueError:
                    return web.json_response({"success": False, "message": f"Invalid value format for {path_or_arg}: {new_value}"})

                # Update the value in the YAML data
                if is_nested:
                    # Handle nested paths like "battery_charge_low.normal"
                    try:
                        self._update_nested_yaml_value(data[ROOT_YAML_KEY], path_or_arg, converted_value)
                        self._update_nested_yaml_value(self.args, path_or_arg, converted_value)
                        updated_args.append(f"{path_or_arg}={converted_value}")
                    except (KeyError, TypeError) as e:
                        return web.json_response({"success": False, "message": f"Path {path_or_arg} not found or invalid: {str(e)}"})
                else:
                    # Handle top-level arguments
                    if path_or_arg in data[ROOT_YAML_KEY]:
                        data[ROOT_YAML_KEY][path_or_arg] = converted_value
                        self.args[path_or_arg] = converted_value  # Update the base args as well
                        updated_args.append(f"{path_or_arg}={converted_value}")
                    else:
                        return web.json_response({"success": False, "message": f"Argument {path_or_arg} not found in apps.yaml"})

            # Write back to the file, preserving comments and formatting
            try:
                with open(apps_yaml_path, "w") as f:
                    yaml.dump(data, f)

                change_count = len(updated_args)
                self.log(f"Batch updated {change_count} arguments in apps.yaml: {', '.join(updated_args)}")

                return web.json_response({"success": True, "message": f"Successfully saved {change_count} changes to apps.yaml. Predbat will restart to apply changes."})

            except Exception as e:
                return web.json_response({"success": False, "message": f"Error writing to apps.yaml: {str(e)}"})

        except ImportError:
            return web.json_response({"success": False, "message": "ruamel.yaml library not available, update Predbat app first."})
        except Exception as e:
            return web.json_response({"success": False, "message": f"Unexpected error: {str(e)}"})

    def html_config_item_text(self, entity):
        text = ""
        text += "<table>\n"
        text += "<tr><th></th><th>Name</th><th>Entity</th><th>Type</th><th>Current</th><th>Default</th></tr>\n"
        found = False
        for item in self.base.CONFIG_ITEMS:
            if self.base.user_config_item_enabled(item) and item.get("entity") == entity:
                value = item.get("value", "")
                if value is None:
                    value = item.get("default", "")
                friendly = item.get("friendly_name", "")
                itemtype = item.get("type", "")
                default = item.get("default", "")
                icon = self.icon2html(item.get("icon", ""))
                unit = self.base.convert_currency_unit(item.get("unit", ""))
                text += "<tr><td>{}</td><td>{}</td><td>{}</td><td>{}</td>".format(icon, friendly, entity, itemtype)
                if value == default:
                    text += '<td class="cfg_default">{} {}</td><td>{} {}</td>\n'.format(value, unit, default, unit)
                else:
                    text += '<td class="cfg_modified">{} {}</td><td>{} {}</td>\n'.format(value, unit, default, unit)
                text += "</tr>\n"
                found = True
        text += "</table>\n"
        if found:
            return text
        else:
            return None

    async def html_config(self, request):
        """
        Return the Predbat config as an HTML page
        """

        self.default_page = "./config"
        text = self.get_header("Predbat Config", refresh=60)
        text += "<body>\n"
        text += get_html_config_css()

        text += """
        <div class="filter-container">
            <label for="configFilter"><strong>Filter settings:</strong></label>
            <input type="text" id="configFilter" class="filter-input" placeholder="Type to filter settings..." oninput="filterConfig()" />
            <button type="button" style="margin-left: 10px; padding: 8px 12px;" onclick="document.getElementById('configFilter').value=''; filterConfig();">Clear</button>
        </div>
        """
        text += '<form class="form-inline" action="./config" method="post" enctype="multipart/form-data" id="configform">\n'
        text += '<table id="configTable">\n'
        text += "<tr><th></th><th>Name</th><th>Entity</th><th>Type</th><th>Current</th><th>Default</th><th>Select</th></tr>\n"

        input_number = """
            <input type="number" id="{}" name="{}" value="{}" min="{}" max="{}" step="{}" onchange="javascript: this.form.submit();">
            """

        for item in self.base.CONFIG_ITEMS:
            if self.base.user_config_item_enabled(item):
                value = item.get("value", "")
                if value is None:
                    value = item.get("default", "")
                entity = item.get("entity")
                if not entity:
                    continue
                friendly = item.get("friendly_name", "")
                itemtype = item.get("type", "")
                default = item.get("default", "")
                useid = entity.replace(".", "__")
                unit = self.base.convert_currency_unit(item.get("unit", ""))
                icon = self.icon2html(item.get("icon", ""))

                if itemtype in ["input_number", "number"] and item.get("step", 1) == 1:
                    value = int(value)

                text += '<tr><td>{}</td><td><a href="./entity?entity_id={}">{}</a></td><td>{}</td><td>{}</td>'.format(icon, entity, friendly, entity, itemtype)
                if value == default:
                    text += '<td class="cfg_default">{} {}</td><td>{} {}</td>\n'.format(value, unit, default, unit)
                else:
                    text += '<td class="cfg_modified">{} {}</td><td>{} {}</td>\n'.format(value, unit, default, unit)

                if itemtype == "switch":
                    toggle_class = "toggle-switch active" if value else "toggle-switch"
                    text += f'<td><form style="display: inline;" method="post" action="./config">'
                    text += f'<button class="{toggle_class}" type="button" onclick="toggleSwitch(this, \'{useid}\')"></button>'
                    text += f"</form></td>\n"
                elif itemtype in ["input_number", "number"]:
                    input_number_with_save = input_number.replace('onchange="javascript: this.form.submit();"', 'onchange="saveFilterValue(); this.form.submit();"')
                    text += '<td><form style="display: inline;" method="post" action="./config">'
                    text += "{}\n".format(input_number_with_save.format(useid, useid, value, item.get("min", 0), item.get("max", 100), item.get("step", 1)))
                    text += f"</form></td>\n"
                elif itemtype == "select":
                    options = item.get("options", [])
                    if value not in options:
                        options.append(value)
                    text += f'<td><form style="display: inline;" method="post" action="./config">'
                    text += '<select name="{}" id="{}" onchange="saveFilterValue(); this.form.submit();">'.format(useid, useid)
                    for option in options:
                        selected = option == value
                        option_label = option if option else "None"
                        text += '<option value="{}" label="{}" {}>{}</option>'.format(option, option_label, "selected" if selected else "", option)
                    text += "</select>\n"
                    text += f"</form></td>\n"
                else:
                    text += "<td>{}</td>\n".format(value)

                text += "</tr>\n"

        text += "</table>"
        text += "</form>"
        text += "</body></html>\n"
        return web.Response(content_type="text/html", text=text)

    async def html_compare_post(self, request):
        """
        Handle post request for html compare
        """
        postdata = await request.post()
        for pitem in postdata:
            if pitem == "run":
                self.log("Starting compare from web page")
                service_data = {}
                service_data["domain"] = "switch"
                service_data["service"] = "turn_on"
                service_data["service_data"] = {"entity_id": "switch.{}_compare_active".format(self.prefix)}
                await self.base.trigger_callback(service_data)

        return await self.html_compare(request)

    def to_pounds(self, cost):
        """
        Convert cost to pounds
        """
        res = ""
        if cost:
            # Convert cost into pounds in format
            res = self.currency_symbols[0] + "{:.2f}".format(cost / 100.0)
            # Pad with leading spaces to align to 6 characters
            res = res.rjust(6)
            # Convert space to &nbsp;
            res = res.replace(" ", "&nbsp;")

        return res

    async def html_compare(self, request):
        """
        Return the Predbat compare page as an HTML page
        """
        self.default_page = "./compare"

        text = self.get_header("Predbat Compare", refresh=5 * 60)

        text += "<body>\n"

        text += "<style>\n"
        text += "body.dark-mode .comparison-table font { color: #000; }\n"
        text += "</style>\n"

        text += '<form class="form-inline" action="./compare" method="post" enctype="multipart/form-data" id="compareform">\n'
        active = self.get_arg("compare_active", False)

        if not active:
            text += '<button type="submit" form="compareform" value="run">Compare now</button>\n'
        else:
            text += '<button type="submit" form="compareform" value="run" disabled>Running..</button>\n'

        text += '<input type="hidden" name="run" value="run">\n'
        text += "</form>"

        text += "<table class='comparison-table'>\n"
        text += "<tr><th>ID</th><th>Name</th><th>Date</th><th>True cost</th><th>Cost</th><th>Cost 10%</th><th>7d avg</th><th>Export</th><th>Import</th><th>Final SoC</th>"
        if self.base.iboost_enable:
            text += "<th>Iboost</th>"
        if self.base.carbon_enable:
            text += "<th>Carbon</th>"
        text += "<th>Result</th>\n"

        """
        Update the history data
        """
        cost_yesterday_hist = history_attribute(self.get_history_wrapper(self.prefix + ".cost_yesterday", 28, required=False), daily=True, offset_days=-1, pounds=True)
        if self.base.num_cars > 0:
            cost_yesterday_car_hist = history_attribute(self.get_history_wrapper(self.prefix + ".cost_yesterday_car", 28, required=False), daily=True, offset_days=-1, pounds=True)
            cost_yesterday_no_car = self.subtract_daily(cost_yesterday_hist, cost_yesterday_car_hist)
        else:
            cost_yesterday_no_car = cost_yesterday_hist

        compare_list = self.get_arg("compare_list", [])
        compare_hist = {}
        for item in compare_list:
            id = item.get("id", None)
            if id and self.base.comparison:
                compare_hist[id] = {}
                result = self.base.comparison.get_comparison(id)
                if result:
                    entity_hist = self.get_history_wrapper(result["entity_id"], 28, required=False)
                    compare_hist[id]["cost"] = history_attribute(entity_hist, daily=True, pounds=True)
                    compare_hist[id]["metric"] = history_attribute(entity_hist, state_key="metric", attributes=True, daily=True, pounds=True)
                    compare_hist[id]["cost_1am"] = self.history_daily_at_hour(entity_hist)

        compare_list = self.get_arg("compare_list", [])

        for compare in compare_list:
            name = compare.get("name", "")
            id = compare.get("id", "")

            if self.base.comparison:
                result = self.base.comparison.get_comparison(id)
            else:
                result = {}

            cost = result.get("cost", "")
            cost10 = result.get("cost10", "")
            metric = result.get("metric", "")
            export = result.get("export_kwh", "")
            imported = result.get("import_kwh", "")
            soc = result.get("soc", "")
            final_iboost = result.get("final_iboost", "")
            final_carbon_g = result.get("final_carbon_g", "")
            date = result.get("date", "")
            best = result.get("best", False)
            existing_tariff = result.get("existing_tariff", False)

            try:
                date_timestamp = datetime.strptime(date, "%Y-%m-%d %H:%M:%S")
                stamp = date_timestamp.strftime(TIME_FORMAT_DAILY)
            except (ValueError, TypeError):
                stamp = None

            # Save current datapoint for today
            if stamp and (id in compare_hist):
                if "metric" not in compare_hist[id]:
                    compare_hist[id]["metric"] = {}
                    compare_hist[id]["cost"] = {}
                compare_hist[id]["metric"][stamp] = dp2(metric / 100)
                compare_hist[id]["cost"][stamp] = dp2(cost / 100.0)

            selected = '<font style="background-color:#FFaaaa;>"> Best </font>' if best else ""
            if existing_tariff:
                selected += '<font style="background-color:#aaFFaa;"> Existing </font>'

            metric_str = self.to_pounds(metric)
            cost_str = self.to_pounds(cost)
            cost10_str = self.to_pounds(cost10)
            cost_1am = compare_hist.get(id, {}).get("cost_1am", {})
            avg7, avg7_count = self.average_cost_window(cost_1am, 7)
            if avg7 is not None:
                avg7_pounds = self.currency_symbols[0] + "{:.2f}".format(avg7 / 100.0)
                avg7_str = "{}&nbsp;({}d)".format(avg7_pounds, avg7_count)
            else:
                avg7_str = ""

            text += "<tr><td><a href='#heading-{}'>{}</a></td><td>{}</td><td>{}</td><td>{}</td><td>{}</td><td>{}</td><td>{}</td><td>{}</td><td>{}</td><td>{}</td>".format(id, id, name, date, metric_str, cost_str, cost10_str, avg7_str, export, imported, soc)
            if self.base.iboost_enable:
                text += "<td>{}</td>".format(final_iboost)
            if self.base.carbon_enable:
                text += "<td>{}</td>".format(final_carbon_g)
            text += "<td>{}</td></tr>\n".format(selected)

        text += "</table>\n"

        # Charts
        text += '<div id="chart"></div>'
        series_data = []
        for compare in compare_list:
            name = compare.get("name", "")
            id = compare.get("id", "")
            series_data.append({"name": name, "data": compare_hist.get(id, {}).get("metric", {}), "chart_type": "bar"})
        series_data.append({"name": "Actual", "data": cost_yesterday_hist, "chart_type": "line", "stroke_width": "2"})
        if self.base.num_cars > 0:
            series_data.append({"name": "Actual (no car)", "data": cost_yesterday_no_car, "chart_type": "line", "stroke_width": "2"})

        now_str = self.now_utc.strftime(TIME_FORMAT)

        if compare_hist:
            text += self.render_chart(series_data, self.currency_symbols[0], "Tariff Comparison - True cost", now_str, daily_chart=False)
        elif not compare_list:
            text += '<br><h2>No tariffs configured yet - see <a href="https://springfall2008.github.io/batpred/compare/" target="_blank" rel="noopener noreferrer">Comparing Energy Tariffs</a> for how to add some to apps.yaml</h2><br>'
        else:
            text += "<br><h2>Loading chart (please wait)...</h2><br>"

        # 7-day rolling average chart
        text += '<div id="chart7d"></div>'
        series_7d = []
        for compare in compare_list:
            name = compare.get("name", "")
            id = compare.get("id", "")
            rolling_pence = self.rolling_7d_average(compare_hist.get(id, {}).get("cost_1am", {}))
            # cost_1am is stored in pence; convert to pounds to match the chart axis
            rolling = {k: dp2(v / 100) for k, v in rolling_pence.items()}
            if rolling:
                series_7d.append({"name": name, "data": rolling, "chart_type": "line", "stroke_width": "2"})
        if series_7d:
            text += self.render_chart(series_7d, self.currency_symbols[0], "Tariff Comparison - 7 day rolling average", now_str, tagname="chart7d", daily_chart=False)
        elif not compare_list:
            pass  # Already explained by the "No tariffs configured" message above
        else:
            text += "<br><h2>7 day rolling average chart loading (please wait)...</h2><br>"

        # HTML Plans
        for compare in compare_list:
            name = compare.get("name", "")
            id = compare.get("id", "")
            if self.base.comparison:
                result = self.base.comparison.get_comparison(id)
            else:
                result = {}

            html = result.get("html", "")

            text += "<br>\n"
            text += "<h2 id='heading-{}'>{}</h2>\n".format(id, name)
            if html:
                text += html
            else:
                text += "<br><p>No data yet....</p>"

        text += "</body></html>\n"
        return web.Response(content_type="text/html", text=text)

    async def html_apps_editor(self, request):
        """
        Return the apps.yaml editor as an HTML page
        """
        self.default_page = "./apps_editor"
        text = self.get_header("Predbat Apps.yaml Editor", refresh=0, codemirror=True)

        # Get success/error messages from URL parameters
        args = request.query
        success_message = urllib.parse.unquote(args.get("success", ""))
        error_message = urllib.parse.unquote(args.get("error", ""))

        # Try to read the current apps.yaml file
        apps_yaml_content = ""
        file_error = ""

        try:
            # apps.yaml will always live in the current directory of the script
            apps_yaml_path = "apps.yaml"
            if apps_yaml_path:
                with open(apps_yaml_path, "r") as f:
                    apps_yaml_content = f.read()
                self.log(f"Successfully loaded apps.yaml from {apps_yaml_path}")
            else:
                file_error = f"Could not find apps.yaml file."

        except Exception as e:
            file_error = f"Error reading apps.yaml: {str(e)}"

        # Calculate MD5 checksum of the content for external change detection
        file_checksum = hashlib.md5(apps_yaml_content.encode("utf-8")).hexdigest() if apps_yaml_content else ""

        text += get_editor_css()
        text += """

<div class="editor-container">
    <div class="editor-header">
        <h2>Apps.yaml Editor</h2>
        <div id="lintStatus" style="margin-top: 8px;"></div>
"""

        text += f"""
    </div>

    <form id="editorForm" class="editor-form" method="post" action="./apps_editor" data-file-checksum="{file_checksum}">
        <!-- We use a regular textarea that CodeMirror will replace -->
        <textarea class="editor-textarea" name="apps_content" id="appsContent" placeholder="Loading apps.yaml content...">"""

        # Escape the content for HTML

        text += html_module.escape(apps_yaml_content)

        text += """</textarea>

        <div class="editor-controls">
            <button type="submit" class="save-button" id="saveButton" title="Click to save changes">Save</button>
            <button type="button" class="revert-button" id="revertButton" title="Discard changes and reload from disk">Revert</button>
            <span id="saveStatus"></span>
        </div>
    </form>

    <div id="messageContainer">"""

        # Show success message if present
        if success_message:
            text += f'<div class="message success" style="display: block;">{html_module.escape(success_message)}</div>'

        # Show error message if present (from URL or file reading)
        display_error = error_message or file_error
        if display_error:
            text += f'<div class="message error" style="display: block;">{html_module.escape(display_error)}</div>'

        text += """
    </div>
</div>"""
        text += get_editor_js()
        text += """
</div>"""

        return web.Response(content_type="text/html", text=text)

    async def html_apps_editor_checksum(self, request):
        """
        Return the current checksum and content of apps.yaml for external change detection
        """
        try:
            apps_yaml_path = "apps.yaml"
            with open(apps_yaml_path, "r") as f:
                content = f.read()
            checksum = hashlib.md5(content.encode("utf-8")).hexdigest()
            return web.json_response({"checksum": checksum, "content": content})
        except Exception as e:
            return web.json_response({"error": str(e)}, status=500)

    async def html_apps_editor_post(self, request):
        """
        Handle POST request for apps.yaml editor - save the file
        """
        try:
            postdata = await request.post()
            apps_content = postdata.get("apps_content", None)
            if apps_content is None:
                raise web.HTTPFound("./apps_editor?error=" + urllib.parse.quote("No content provided to save"))

            # Remove dos line endings
            apps_content = apps_content.replace("\r\n", "\n").replace("\r", "\n")

            # Find the apps.yaml file path
            apps_yaml_path = "apps.yaml"
            # Create backup
            backup_path = "apps.yaml.backup"
            shutil.copy2(apps_yaml_path, backup_path)

            # Save the new content
            with open(apps_yaml_path, "w") as f:
                f.write(apps_content)

            self.log(f"Apps.yaml successfully saved to {apps_yaml_path}")
            if backup_path:
                self.log(f"Backup created at {backup_path}")

            # Redirect back to editor with success message
            success_message = f"Apps.yaml saved successfully. Backup created at {backup_path}."
            encoded_message = urllib.parse.quote(success_message)
            raise web.HTTPFound(f"./apps_editor?success={encoded_message}")

        except web.HTTPFound:
            raise  # Re-raise HTTP redirects
        except Exception as e:
            error_msg = f"Failed to save apps.yaml: {str(e)}"
            self.log(f"ERROR: {error_msg}")
            encoded_error = urllib.parse.quote(error_msg)
            raise web.HTTPFound(f"./apps_editor?error={encoded_error}")

    async def html_default(self, request):
        """
        Redirect to the default page
        """
        return web.HTTPFound(self.default_page)

    def get_grid_power_icon(self):
        """
        Returns a visual indicator showing if the grid is importing or exporting power
        """
        if not self.base.dashboard_index:
            return ""

        power = self.base.grid_power
        if power >= 10:
            icon_text = "transmission-tower-export"
        elif power <= -10:
            icon_text = "transmission-tower-import"
        else:
            icon_text = "transmission-tower-outline"

        text = '<span class="mdi mdi-{}"></span>'.format(icon_text)
        text += str(dp0(power)) + " W"

        return text

    def get_battery_power_icon(self):
        """
        Returns a visual indicator showing if the battery is charging or discharging
        """
        if not self.base.dashboard_index:
            return ""

        power = self.base.battery_power
        if power >= 10:
            icon_text = "battery-arrow-down"
        elif power <= -10:
            icon_text = "battery-arrow-up"
        else:
            icon_text = "battery-outline"

        text = '<span class="mdi mdi-{}"></span>'.format(icon_text)
        text += str(dp0(power)) + " W"

        return text

    def get_pv_power_icon(self):
        """
        Returns a visual indicator showing if the PV is producing power
        """
        if not self.base.dashboard_index:
            return ""

        power = self.base.pv_power
        if power > 0:
            icon_text = "solar-power"
        else:
            icon_text = "solar-power-outline"

        text = '<span class="mdi mdi-{}"></span>'.format(icon_text)
        text += str(dp0(power)) + " W"

        return text

    def get_battery_status_icon(self):
        """
        Returns a visual indicator showing if the battery is charging or exporting
        """
        if not self.base.dashboard_index:
            return '<span class="mdi mdi-battery-sync"></span>'

        soc_now = self.get_state_wrapper(self.prefix + ".soc_kw", attribute="soc_now", default=None)
        soc_max = self.get_state_wrapper(self.prefix + ".soc_kw", attribute="soc_max", default=None)
        if soc_now is None or not soc_max:
            return '<span class="mdi mdi-battery-sync"></span>'

        percent = calc_percent_limit(soc_now, soc_max)
        percent_rounded_to_nearest_10 = round(float(percent) / 10) * 10
        is_charging = self.get_state_wrapper("binary_sensor." + self.prefix + "_charging", default="off") == "on"
        is_exporting = self.get_state_wrapper("binary_sensor." + self.prefix + "_exporting", default="off") == "on"
        if is_charging:
            if percent_rounded_to_nearest_10 == 0:
                icon_text = "battery-charging-outline"
            else:
                icon_text = "battery-charging-{}".format(percent_rounded_to_nearest_10)
        else:
            if percent_rounded_to_nearest_10 == 0:
                icon_text = "battery-outline"
            elif percent_rounded_to_nearest_10 == 100:
                icon_text = "battery"
            else:
                icon_text = "battery-{}".format(percent_rounded_to_nearest_10)

        text = '<span class="mdi mdi-{}"></span>'.format(icon_text)
        text += str(dp2(percent)) + "%"

        if is_exporting:
            text += '<span class="mdi mdi-transmission-tower-export"></span>'
        return text

    async def html_api_login(self, request):
        try:
            data = await request.json()
        except Exception:
            return web.json_response({"error": "Invalid JSON body"}, status=400)

        token = data.get("token")
        redirect_url = data.get("redirect", "/")

        if not token:
            return web.json_response({"error": "Missing 'token'"}, status=400)

        # Extract domain from Host header
        host = request.headers.get("Host", "")
        domain = host.split(":")[0]  # Remove port if present

        if not domain:
            return web.json_response({"error": "Could not determine request domain"}, status=400)

        response = web.HTTPFound(location=redirect_url)
        response.set_cookie(name="access-token", value=token, path="/", domain=domain, secure=True, httponly=True, samesite="Lax", max_age=60 * 60 * 24 * 7)  # 7 days

        return response

    async def html_rate_override(self, request):
        """
        Handle POST request for rate overrides
        """
        try:
            # Parse form data
            data = await request.post()
            time_str = data.get("time")
            action = data.get("action")
            rate = data.get("rate")

            try:
                rate = float(rate)
            except (TypeError, ValueError):
                rate = 0.0

            # Log the override request
            self.log(f"Rate override requested: {action} at {time_str} value {rate}")

            # Validate inputs
            if not time_str or not action:
                self.log("ERROR: Missing required parameters for override")
                return web.json_response({"success": False, "message": "Missing required parameters"}, status=400)

            now_utc = self.now_utc
            override_time = get_override_time_from_string(now_utc, time_str, self.plan_interval_minutes)

            minutes_from_now = (override_time - now_utc).total_seconds() / 60
            if minutes_from_now >= 48 * 60:
                return web.json_response({"success": False, "message": "Override time must be within 48 hours from now."}, status=400)

            # Calculate minutes from midnight for looking up existing rates
            minutes_from_midnight = int((override_time - self.midnight_utc).total_seconds() / 60)

            selection_option = "{}={}".format(override_time.strftime("%a %H:%M"), rate)

            # For clear operations, we need to use the actual stored rate value, not the passed rate
            if action == "Clear Import":
                manual_import_rates = self.base.manual_rates("manual_import_rates")
                actual_rate = manual_import_rates.get(minutes_from_midnight, rate)
                clear_option = "[{}={}]".format(override_time.strftime("%a %H:%M"), actual_rate)
                await self.base.async_manual_select("manual_import_rates", clear_option)
            elif action == "Set Import":
                item = self.base.config_index.get("manual_import_value", {})
                await self.set_state_external(item.get("entity", None), rate)
                await self.base.async_manual_select("manual_import_rates", selection_option)
            elif action == "Clear Export":
                manual_export_rates = self.base.manual_rates("manual_export_rates")
                actual_rate = manual_export_rates.get(minutes_from_midnight, rate)
                clear_option = "[{}={}]".format(override_time.strftime("%a %H:%M"), actual_rate)
                await self.base.async_manual_select("manual_export_rates", clear_option)
            elif action == "Set Export":
                item = self.base.config_index.get("manual_export_value", {})
                await self.set_state_external(item.get("entity", None), rate)
                await self.base.async_manual_select("manual_export_rates", selection_option)
            elif action == "Set Load":
                item = self.base.config_index.get("manual_load_value", {})
                await self.set_state_external(item.get("entity", None), rate)
                await self.base.async_manual_select("manual_load_adjust", selection_option)
            elif action == "Clear Load":
                manual_load_adjust = self.base.manual_rates("manual_load_adjust")
                actual_rate = manual_load_adjust.get(minutes_from_midnight, rate)
                clear_option = "[{}={}]".format(override_time.strftime("%a %H:%M"), actual_rate)
                await self.base.async_manual_select("manual_load_adjust", clear_option)
            elif action == "Set SOC":
                item = self.base.config_index.get("manual_soc_value", {})
                await self.set_state_external(item.get("entity", None), rate)
                await self.base.async_manual_select("manual_soc", selection_option)
            elif action == "Clear SOC":
                manual_soc = self.base.manual_rates("manual_soc")
                actual_rate = manual_soc.get(minutes_from_midnight, rate)
                clear_option = "[{}={}]".format(override_time.strftime("%a %H:%M"), actual_rate)
                await self.base.async_manual_select("manual_soc", clear_option)
            else:
                self.log("ERROR: Unknown action for rate override")
                return web.json_response({"success": False, "message": "Unknown action"}, status=400)

            # Refresh plan
            self.base.update_pending = True
            self.base.plan_valid = False

            # Return html plan again
            self.log("Rate override processed successfully")
            return web.json_response({"success": True}, status=200)

        except Exception as e:
            self.log(f"ERROR: Failed to process rate override: {str(e)}")
            return web.json_response({"success": False, "message": str(e)}, status=500)

    async def html_plan_override(self, request):
        """
        Handle POST request for plan overrides
        """
        try:
            # Parse form data
            data = await request.post()
            time_str = data.get("time")
            action = data.get("action")

            # Log the override request
            self.log(f"Plan override requested: {action} at {time_str}")

            # Validate inputs
            if not time_str or not action:
                return web.json_response({"success": False, "message": "Missing required parameters"}, status=400)

            now_utc = self.now_utc
            override_time = get_override_time_from_string(now_utc, time_str, self.plan_interval_minutes)
            if not override_time:
                return web.json_response({"success": False, "message": "Invalid time format"}, status=400)

            minutes_from_now = (override_time - now_utc).total_seconds() / 60
            if minutes_from_now >= 48 * 60:
                return web.json_response({"success": False, "message": "Override time must be within 48 hours from now."}, status=400)

            selection_option = "{}".format(override_time.strftime("%a %H:%M"))
            clear_option = "[{}]".format(override_time.strftime("%a %H:%M"))
            if action == "Clear":
                await self.base.async_manual_select("manual_demand", selection_option)
                await self.base.async_manual_select("manual_demand", clear_option)
            else:
                if action == "Manual Demand":
                    await self.base.async_manual_select("manual_demand", selection_option)
                elif action == "Manual Charge":
                    await self.base.async_manual_select("manual_charge", selection_option)
                elif action == "Manual Export":
                    await self.base.async_manual_select("manual_export", selection_option)
                elif action == "Manual Freeze Charge":
                    await self.base.async_manual_select("manual_freeze_charge", selection_option)
                elif action == "Manual Freeze Export":
                    await self.base.async_manual_select("manual_freeze_export", selection_option)
                else:
                    return web.json_response({"success": False, "message": "Unknown action"}, status=400)

            # Refresh plan
            self.base.update_pending = True
            self.base.plan_valid = False

            # Return html plan again
            return web.json_response({"success": True}, status=200)

        except Exception as e:
            self.log(f"ERROR: Failed to process plan override: {str(e)}")
            return web.json_response({"success": False, "message": str(e)}, status=500)

    def count_entities_matching_filter(self, event_filter):
        """
        Count the number of entities that match the given event filter pattern
        """
        count = 0
        try:
            # Get all entities from Home Assistant
            all_entities = self.get_state_wrapper()
            if all_entities:
                for entity_id in all_entities.keys():
                    if event_filter in entity_id:
                        count += 1
        except Exception as e:
            self.log(f"Error counting entities for filter '{event_filter}': {e}")
        return count

    def get_entities_matching_filter(self, event_filter):
        """
        Get a list of entities that match the given event filter pattern.
        Returns a list of dicts with entity_id, state, unit_of_measurement, and friendly_name.
        Sorted by entity_id.
        """
        entities = []
        try:
            # Get all entities from Home Assistant
            all_entities = self.get_state_wrapper()
            if all_entities:
                for entity_id in all_entities.keys():
                    if event_filter in entity_id:
                        entity_data = all_entities[entity_id]
                        state = entity_data.get("state", "")
                        attributes = entity_data.get("attributes", {})
                        unit_of_measurement = attributes.get("unit_of_measurement", "")
                        friendly_name = attributes.get("friendly_name", entity_id)

                        entities.append({"entity_id": entity_id, "state": str(state), "unit_of_measurement": str(unit_of_measurement) if unit_of_measurement else "", "friendly_name": friendly_name})

                # Sort by entity_id
                entities.sort(key=lambda x: x["entity_id"])
        except Exception as e:
            self.log(f"Error getting entities for filter '{event_filter}': {e}")

        return entities

    async def html_component_entities(self, request):
        """
        API endpoint to return entities matching a filter as JSON
        """
        try:
            args = request.query
            event_filter = args.get("filter", "")

            if not event_filter:
                return web.json_response({"entities": []}, status=200)

            entities = self.get_entities_matching_filter(event_filter)
            return web.json_response({"entities": entities}, status=200)

        except Exception as e:
            self.log(f"Error in html_component_entities: {e}")
            return web.json_response({"error": str(e)}, status=500)

    async def html_components(self, request):
        """
        Return the Components view as an HTML page showing status of all components
        """
        self.default_page = "./components"
        text = self.get_header("Predbat Components", refresh=60)
        text += "<body>\n"
        text += get_components_css()
        text += get_entity_modal_css()
        text += get_component_edit_modal_css()
        text += get_entity_modal_js()
        text += get_component_edit_modal_js()

        # Get all component information
        all_components = self.base.components.get_all()
        active_components = self.base.components.get_active()

        # Count components by status
        error_components = []
        active_healthy_components = []
        disabled_components = []

        for component_name in all_components:
            is_alive = self.base.components.is_alive(component_name)
            is_active = component_name in active_components

            if is_active and not is_alive:
                error_components.append(component_name)
            elif is_active and is_alive:
                active_healthy_components.append(component_name)
            else:
                disabled_components.append(component_name)

        # Add heading with checkbox and totals on the same line
        text += "<div style='display: flex; align-items: center; margin-bottom: 15px;'>\n"
        text += "<h2 style='margin: 0; margin-right: 20px;'>Component Status</h2>\n"
        text += "<label style='cursor: pointer; margin-right: 20px; white-space: nowrap;'>\n"
        text += "<input type='checkbox' id='showDisabledCheckbox' onclick='toggleDisabledComponents()' style='margin-right: 8px;'>\n"
        text += "Show disabled components\n"
        text += "</label>\n"
        text += "<div style='white-space: nowrap;'>\n"
        text += f"<span style='color: #d32f2f; font-weight: bold;'>{len(error_components)} Error</span> | \n"
        text += f"<span style='color: #4CAF50; font-weight: bold;'>{len(active_healthy_components)} Active</span> | \n"
        text += f"<span style='color: #666; font-weight: bold;'>{len(disabled_components)} Disabled</span>\n"
        text += "</div>\n"
        text += "</div>\n"

        text += "<div class='components-grid'>\n"

        # Sort components: errors first, then active, then disabled
        sorted_components = error_components + active_healthy_components + disabled_components

        for component_name in sorted_components:
            from components import COMPONENT_LIST

            component_info = COMPONENT_LIST.get(component_name, {})
            component = self.base.components.get_component(component_name)
            is_alive = self.base.components.is_alive(component_name)
            can_restart = self.base.components.can_restart(component_name)
            is_active = component_name in active_components

            # Get last updated time
            last_updated_time = self.base.components.last_updated_time(component_name)
            time_ago_text = format_time_ago(last_updated_time)

            # Create component card
            card_class = "active" if is_active else "inactive"
            if is_active and not is_alive:
                card_class += " error"

            # Add data-disabled attribute for filtering
            disabled_attr = 'data-disabled="true"' if not is_active else 'data-disabled="false"'

            text += f'<div class="component-card {card_class}" {disabled_attr}>\n'
            text += f'<div class="component-header">\n'
            text += f'<h3>{component_info.get("name", component_name)}</h3>\n'

            # Status indicator
            if is_active and is_alive:
                text += '<span class="status-indicator status-healthy">●</span><span class="status-text">Active</span>\n'
            elif is_active and not is_alive:
                text += '<span class="status-indicator status-error">●</span><span class="status-text">Error</span>\n'
            else:
                text += '<span class="status-indicator status-inactive">●</span><span class="status-text">Disabled</span>\n'

            # Add restart button for active components
            if is_active and can_restart:
                text += f'<button class="restart-button" onclick="restartComponent(\'{component_name}\')" title="Restart this component">Restart</button>\n'

            # Add edit button for all components
            text += f'<button class="edit-button" onclick="showComponentEditModal(\'{component_name}\')" title="Edit component configuration">&#9998;</button>\n'

            text += f"</div>\n"

            # Component details
            text += f'<div class="component-details">\n'

            # Add last updated time
            text += f'<p><strong>Last Updated:</strong> <span class="last-updated-time">{time_ago_text}</span></p>\n'

            # Add error count
            error_count = self.base.components.get_error_count(component_name)
            if error_count is not None:
                error_class = "error-count-high" if error_count > 0 else "error-count-none"
                text += f'<p><strong>Error Count:</strong> <span class="{error_class}">{error_count}</span></p>\n'

            # Show args and their current values
            args_info = component_info.get("args", {})
            if args_info:
                text += f'<div class="component-args">\n'
                text += f"<h4>Configuration:</h4>\n"
                text += f'<table class="args-table">\n'
                text += f"<tr><th>Setting</th><th>Required</th><th>Current Value</th></tr>\n"

                for arg_name, arg_info in args_info.items():
                    required = arg_info.get("required", False)
                    config_key = arg_info.get("config", "")
                    default = arg_info.get("default", "")

                    # Get current value
                    current_value = self.get_arg(config_key, default, indirect=False)

                    if isinstance(current_value, (dict, list)):
                        current_value = "{...}"

                    # Hide sensitive values
                    display_value = current_value
                    if any(sensitive in arg_name.lower() for sensitive in ["password", "key", "secret", "token"]):
                        if current_value:
                            display_value = "***configured***"
                        else:
                            display_value = "***not set***"
                    elif current_value is None:
                        display_value = "Not set"
                    elif current_value == "":
                        display_value = "Empty"

                    required_text = "Yes" if required else "No"
                    text += f'<tr class="{"required-arg" if required else "optional-arg"}">\n'
                    text += f"<td>{config_key}</td>\n"
                    text += f"<td>{required_text}</td>\n"
                    text += f"<td>{display_value}</td>\n"
                    text += f"</tr>\n"

                text += f"</table>\n"
                text += f"</div>\n"

            # Event filter info - count matching entities
            event_filter = component_info.get("event_filter", "")
            if event_filter:
                # Count entities that match the filter
                entity_count = self.count_entities_matching_filter(event_filter)
                count_class = "entity-count-zero" if entity_count == 0 else "entity-count-positive"

                # Make entity count clickable only if count > 0
                if entity_count > 0:
                    onclick_attr = f"onclick=\"showEntityModal('{event_filter}')\""
                    style_attr = 'style="cursor: pointer; text-decoration: underline;"'
                    text += f'<p><strong>Entities:</strong> <span class="{count_class}" {style_attr} {onclick_attr}> num_entities: {entity_count}</span></p>\n'
                else:
                    text += f'<p><strong>Entities:</strong> <span class="{count_class}">num_entities: {entity_count}</span></p>\n'

            text += f"</div>\n"
            text += f"</div>\n"

        text += "</div>\n"

        # Add entity modal container
        text += """
<!-- Entity Modal -->
<div id="entityModal" class="entity-modal">
    <div class="entity-modal-content">
        <span class="entity-modal-close" onclick="closeEntityModal()">&times;</span>
        <h2 id="entityModalTitle">Entities</h2>
        <input type="text" id="entitySearchInput" class="entity-search-input" placeholder="Search entities..." oninput="filterEntityTable()">
        <div class="entity-list-table-container">
            <table class="entity-list-table" id="entityTable">
                <thead>
                    <tr>
                        <th>Entity ID</th>
                        <th>Friendly Name</th>
                        <th>State</th>
                    </tr>
                </thead>
                <tbody id="entityTableBody">
                </tbody>
            </table>
        </div>
        <div id="entityEmptyState" class="entity-empty-state" style="display: none;">No entities found</div>
    </div>
</div>

<!-- Component Edit Modal -->
<div id="componentEditModal" class="entity-modal">
    <div class="entity-modal-content component-edit-modal-content">
        <span class="entity-modal-close" onclick="closeComponentEditModal()">&times;</span>
        <h2 id="componentEditModalTitle">Edit Component Configuration</h2>
        <div id="componentEditForm" class="component-edit-form">
            <!-- Form will be populated dynamically -->
        </div>
        <div id="componentEditError" class="component-edit-error"></div>
        <div class="component-edit-buttons">
            <button id="componentEditSaveBtn" class="save-button" onclick="saveComponentConfig()">Save</button>
            <button class="cancel-button" onclick="closeComponentEditModal()">Cancel</button>
        </div>
    </div>
</div>
"""

        text += get_restart_button_js()

        # Add JavaScript for toggling disabled components
        text += """
<script>
function toggleDisabledComponents() {
    const checkbox = document.getElementById('showDisabledCheckbox');
    const showDisabled = checkbox.checked;

    // Save preference to sessionStorage
    sessionStorage.setItem('showDisabledComponents', showDisabled);

    // Get all component cards
    const cards = document.querySelectorAll('.component-card[data-disabled="true"]');

    // Show or hide disabled components
    cards.forEach(card => {
        card.style.display = showDisabled ? '' : 'none';
    });
}

// On page load, restore checkbox state from sessionStorage
document.addEventListener('DOMContentLoaded', function() {
    const checkbox = document.getElementById('showDisabledCheckbox');
    const savedState = sessionStorage.getItem('showDisabledComponents');

    // Default to false (unchecked) if no saved state
    const showDisabled = savedState === 'true';
    checkbox.checked = showDisabled;

    // Apply the initial state
    toggleDisabledComponents();
});
</script>
"""

        text += "</body></html>\n"
        return web.Response(content_type="text/html", text=text)

    async def html_inverter_refresh(self, request):
        """
        Handle inverter refresh request by resetting the last fetch time
        """
        try:
            self.log("Inverter refresh requested from web interface")
            self.base.inverter_data_last_fetch = None
            return web.json_response({"success": True, "message": "Inverter refresh initiated"})
        except Exception as e:
            self.log(f"ERROR: Failed to initiate inverter refresh: {str(e)}")
            return web.json_response({"success": False, "message": str(e)}, status=500)

    async def html_restart(self, request):
        """
        Handle restart request by setting fatal_error to trigger restart
        """
        try:
            self.log("Restart requested from web interface")
            self.base.fatal_error = True
            return web.json_response({"success": True, "message": "Restart initiated"})
        except Exception as e:
            self.log(f"ERROR: Failed to initiate restart: {str(e)}")
            return web.json_response({"success": False, "message": str(e)}, status=500)

    async def html_component_restart(self, request):
        """
        Handle component restart request
        """
        try:
            # Parse form data
            data = await request.post()
            component_name = data.get("component")

            if not component_name:
                return web.json_response({"success": False, "message": "Missing component name"}, status=400)

            # Validate that the component exists and is active
            all_components = self.base.components.get_all()
            active_components = self.base.components.get_active()

            if component_name not in all_components:
                return web.json_response({"success": False, "message": f"Component '{component_name}' not found"}, status=400)

            if component_name not in active_components:
                return web.json_response({"success": False, "message": f"Component '{component_name}' is not active"}, status=400)

            self.log(f"Component restart requested from web interface: {component_name}")

            # Restart the specific component
            await self.base.components.restart(only=component_name)

            return web.json_response({"success": True, "message": f"Component '{component_name}' restarted successfully"})

        except Exception as e:
            self.log(f"ERROR: Failed to restart component: {str(e)}")
            return web.json_response({"success": False, "message": str(e)}, status=500)

    async def html_component_config(self, request):
        """
        Get component configuration for editing
        """
        try:
            from components import COMPONENT_LIST

            args = request.query
            component_name = args.get("component_name")

            if not component_name:
                return web.json_response({"success": False, "message": "Missing component_name parameter"}, status=400)

            if component_name not in COMPONENT_LIST:
                return web.json_response({"success": False, "message": f"Component '{component_name}' not found"}, status=404)

            component_info = COMPONENT_LIST[component_name]
            args_info = component_info.get("args", {})
            required_or = component_info.get("required_or", [])
            display_name = component_info.get("name", component_name)

            result_args = []

            for arg_name, arg_info in args_info.items():
                config_key = arg_info.get("config", "")
                if not config_key:
                    continue

                required = arg_info.get("required", False)
                default = arg_info.get("default", None)

                # Get current value from self.args
                current_value = self.args.get(config_key, None)

                # Determine type from APPS_SCHEMA
                field_type = "text"
                if config_key in APPS_SCHEMA:
                    schema_entry = APPS_SCHEMA[config_key]
                    if isinstance(schema_entry, dict):
                        schema_type_str = schema_entry.get("type", "text")
                        if "boolean" in schema_type_str:
                            field_type = "boolean"
                        elif "integer" in schema_type_str or "int" in schema_type_str:
                            field_type = "integer"
                        elif "float" in schema_type_str:
                            field_type = "float"
                        elif "string_list" in schema_type_str:
                            field_type = "string_list"
                        elif "dict_list" in schema_type_str or "dict" == schema_type_str:
                            field_type = "dict"
                        else:
                            field_type = "text"
                else:
                    # Infer from default value
                    if isinstance(default, bool):
                        field_type = "boolean"
                    elif isinstance(default, int):
                        field_type = "integer"
                    elif isinstance(default, float):
                        field_type = "float"
                    elif isinstance(default, list):
                        field_type = "string_list"
                    elif isinstance(default, dict):
                        field_type = "dict"

                # Check if in required_or list
                is_required_or = config_key in required_or or arg_name in required_or

                result_args.append({"config_key": config_key, "required": required, "required_or": is_required_or, "current_value": current_value, "default": default, "type": field_type})

            return web.json_response({"success": True, "component_name": component_name, "display_name": display_name, "args": result_args})

        except Exception as e:
            self.log(f"ERROR: Failed to get component config: {str(e)}")
            traceback.print_exc()
            return web.json_response({"success": False, "message": str(e)}, status=500)

    async def html_component_config_save(self, request):
        """
        Save component configuration using ruamel.yaml
        """
        try:
            json_data = await request.json()
            component_name = json_data.get("component_name")
            changes = json_data.get("changes", {})
            deletions = json_data.get("deletions", [])

            if not component_name:
                return web.json_response({"success": False, "message": "Missing component_name"}, status=400)

            self.log(f"Component config save requested: {component_name}, changes={list(changes.keys())}, deletions={deletions}")

            # Read and parse apps.yaml
            apps_yaml_path = "apps.yaml"
            yaml = YAML()
            yaml.preserve_quotes = True
            yaml.default_flow_style = False

            try:
                with open(apps_yaml_path, "r") as f:
                    data = yaml.load(f)
            except Exception as e:
                return web.json_response({"success": False, "message": f"Error reading apps.yaml: {str(e)}"}, status=500)

            if not data:
                data = {}

            if ROOT_YAML_KEY not in data:
                return web.json_response({"success": False, "message": f"{ROOT_YAML_KEY} section not found in apps.yaml"}, status=500)

            # Process changes
            for config_key, new_value in changes.items():
                # Look up type in APPS_SCHEMA
                field_type = "text"
                if config_key in APPS_SCHEMA:
                    schema_entry = APPS_SCHEMA[config_key]
                    if isinstance(schema_entry, dict):
                        schema_type_str = schema_entry.get("type", "text")
                        if "boolean" in schema_type_str:
                            field_type = "boolean"
                        elif "integer" in schema_type_str or "int" in schema_type_str:
                            field_type = "integer"
                        elif "float" in schema_type_str:
                            field_type = "float"
                        elif "string_list" in schema_type_str:
                            field_type = "string_list"
                        elif "dict_list" in schema_type_str or "dict" == schema_type_str:
                            field_type = "dict"

                # Convert value based on type
                try:
                    if field_type == "boolean":
                        if isinstance(new_value, bool):
                            converted_value = new_value
                        else:
                            converted_value = str(new_value).lower() == "true"
                    elif field_type == "integer":
                        converted_value = int(new_value)
                    elif field_type == "float":
                        converted_value = float(new_value)
                    elif field_type == "string_list":
                        # Already should be a list from JSON
                        converted_value = new_value if isinstance(new_value, list) else [new_value]
                    elif field_type == "dict":
                        # Parse JSON/YAML string from frontend
                        if isinstance(new_value, dict):
                            converted_value = new_value
                        elif isinstance(new_value, list):
                            converted_value = new_value
                        else:
                            # Try JSON first, then fall back to YAML
                            try:
                                converted_value = json.loads(str(new_value))
                            except json.JSONDecodeError:
                                # Fall back to YAML parser
                                yaml_parser = YAML()
                                stream = StringIO(str(new_value))
                                converted_value = yaml_parser.load(stream)
                    else:
                        # String type - always quote strings for safety
                        converted_value = DoubleQuotedScalarString(str(new_value))

                    data[ROOT_YAML_KEY][config_key] = converted_value

                    # Mask password values in log
                    log_value = converted_value
                    if any(sensitive in config_key.lower() for sensitive in ["password", "key", "secret", "token"]):
                        log_value = "***"
                    self.log(f"Setting {config_key} = {log_value}")

                except ValueError as e:
                    return web.json_response({"success": False, "message": f"Invalid {field_type} value for {config_key}: {str(e)}"}, status=400)

            # Process deletions
            for config_key in deletions:
                if config_key in data[ROOT_YAML_KEY]:
                    del data[ROOT_YAML_KEY][config_key]
                    self.log(f"Deleted {config_key}")

            # Write back to file
            try:
                with open(apps_yaml_path, "w") as f:
                    yaml.dump(data, f)

                self.log(f"Component {component_name} config updated successfully")

                return web.json_response({"success": True, "message": "Configuration saved. Predbat will restart automatically."})

            except Exception as e:
                return web.json_response({"success": False, "message": f"Error writing to apps.yaml: {str(e)}"}, status=500)

        except Exception as e:
            self.log(f"ERROR: Failed to save component config: {str(e)}")
            traceback.print_exc()
            return web.json_response({"success": False, "message": str(e)}, status=500)

    async def html_browse(self, request):
        """
        Return the Browse page as an HTML page with file browsing functionality
        """
        self.default_page = "./browse"

        # Get query parameters for navigation and file viewing
        args = request.query
        current_path = args.get("path", ".")
        view_file = args.get("file", None)

        # Security check - prevent directory traversal attacks
        # Normalize the path and ensure it's within the current working directory
        base_dir = os.getcwd()
        safe_path = os.path.abspath(os.path.join(base_dir, current_path))

        # Ensure the path is within the base directory
        if not safe_path.startswith(base_dir):
            safe_path = base_dir
            current_path = "."

        text = self.get_header("Predbat File Browser", refresh=0)
        text += "<body>\n"
        text += get_browse_css()

        # Breadcrumb navigation
        text += '<div class="breadcrumb-container">\n'
        text += "<h2>File Browser</h2>\n"
        text += '<div class="breadcrumb">\n'

        # Build breadcrumb trail
        path_parts = []
        if current_path != ".":
            path_parts = current_path.split("/")
            path_parts = [part for part in path_parts if part]  # Remove empty parts

        # Root directory link
        text += '<a href="./browse?path=." class="breadcrumb-item">Root</a>'

        # Build each level of the path
        accumulated_path = "."
        for part in path_parts:
            accumulated_path = os.path.join(accumulated_path, part).replace("\\", "/")
            text += f' / <a href="./browse?path={accumulated_path}" class="breadcrumb-item">{part}</a>'

        text += "</div>\n"
        text += "</div>\n"

        if view_file:
            # File viewing mode
            file_path = os.path.join(safe_path, view_file) if current_path != "." else view_file
            try:
                # Security check for file path
                file_abs_path = os.path.abspath(file_path)
                if not file_abs_path.startswith(base_dir):
                    raise PermissionError("Access denied")

                if os.path.isfile(file_abs_path):
                    # Read file content
                    with open(file_abs_path, "r", encoding="utf-8", errors="replace") as f:
                        content = f.read()

                    # Escape HTML content
                    content = html_module.escape(content)

                    # Determine file type for syntax highlighting
                    file_ext = os.path.splitext(view_file)[1].lower()

                    text += f'<div class="file-viewer">\n'
                    text += f'<div class="file-header">\n'
                    text += f"<h3>Viewing: {view_file}</h3>\n"
                    text += f'<div class="file-actions">\n'
                    text += f'<a href="./download?path={current_path}&file={view_file}" class="download-button" download><span class="mdi mdi-download"></span> Download</a>\n'
                    text += f'<a href="./browse?path={current_path}" class="back-button">← Back to Directory</a>\n'
                    text += f"</div>\n"
                    text += f"</div>\n"

                    # File content with basic syntax highlighting
                    syntax_class = "code-content"
                    if file_ext in [".yaml", ".yml"]:
                        syntax_class += " yaml"
                    elif file_ext in [".py"]:
                        syntax_class += " python"
                    elif file_ext in [".json"]:
                        syntax_class += " json"
                    elif file_ext in [".log"]:
                        syntax_class += " log"

                    text += f'<pre class="{syntax_class}">{content}</pre>\n'
                    text += f"</div>\n"
                else:
                    text += f'<div class="error">File not found: {view_file}</div>\n'
            except PermissionError:
                text += f'<div class="error">Permission denied: {view_file}</div>\n'
            except UnicodeDecodeError:
                text += f'<div class="error">Cannot display binary file: {view_file}</div>\n'
            except Exception as e:
                text += f'<div class="error">Error reading file: {str(e)}</div>\n'
        else:
            # Directory listing mode
            try:
                items = []

                # Add parent directory link if not at root
                if current_path != ".":
                    parent_path = os.path.dirname(current_path) if current_path != "." else "."
                    if parent_path == "":
                        parent_path = "."
                    items.append({"name": "..", "type": "parent", "path": parent_path, "size": "", "modified": ""})

                # List directory contents
                for item in os.listdir(safe_path):
                    item_path = os.path.join(safe_path, item)

                    # Skip hidden files and directories
                    if item.startswith(".") and item not in [".."]:
                        continue

                    try:
                        stat_info = os.stat(item_path)
                        size = ""
                        if os.path.isfile(item_path):
                            # Format file size
                            size_bytes = stat_info.st_size
                            if size_bytes < 1024:
                                size = f"{size_bytes} B"
                            elif size_bytes < 1024 * 1024:
                                size = f"{size_bytes / 1024:.1f} KB"
                            else:
                                size = f"{size_bytes / (1024 * 1024):.1f} MB"

                        # Format modification time
                        modified = datetime.fromtimestamp(stat_info.st_mtime).strftime("%Y-%m-%d %H:%M")

                        items.append({"name": item, "type": "directory" if os.path.isdir(item_path) else "file", "path": os.path.join(current_path, item).replace("\\", "/"), "size": size, "modified": modified})
                    except (OSError, PermissionError):
                        # Skip items we can't access
                        continue

                # Sort items: directories first, then files, both alphabetically
                items.sort(key=lambda x: (x["type"] != "parent", x["type"] != "directory", x["name"].lower()))

                # Display file list
                text += '<div class="file-list">\n'
                text += '<table class="files-table">\n'
                text += "<thead>\n"
                text += "<tr><th>Name</th><th>Size</th><th>Modified</th></tr>\n"
                text += "</thead>\n"
                text += "<tbody>\n"

                for item in items:
                    icon = ""
                    link_target = ""
                    css_class = ""

                    if item["type"] == "parent":
                        icon = '<span class="mdi mdi-arrow-up-bold"></span>'
                        link_target = f"./browse?path={item['path']}"
                        css_class = "parent-dir"
                    elif item["type"] == "directory":
                        icon = '<span class="mdi mdi-folder"></span>'
                        link_target = f"./browse?path={item['path']}"
                        css_class = "directory"
                    else:
                        # File icons based on extension
                        file_ext = os.path.splitext(item["name"])[1].lower()
                        if file_ext in [".yaml", ".yml"]:
                            icon = '<span class="mdi mdi-code-braces"></span>'
                        elif file_ext in [".py"]:
                            icon = '<span class="mdi mdi-language-python"></span>'
                        elif file_ext in [".json"]:
                            icon = '<span class="mdi mdi-code-json"></span>'
                        elif file_ext in [".log"]:
                            icon = '<span class="mdi mdi-text-box-outline"></span>'
                        elif file_ext in [".txt", ".md"]:
                            icon = '<span class="mdi mdi-file-document-outline"></span>'
                        else:
                            icon = '<span class="mdi mdi-file-outline"></span>'

                        link_target = f"./browse?path={current_path}&file={item['name']}"
                        css_class = "file"

                    text += f'<tr class="{css_class}">\n'
                    text += f'<td><a href="{link_target}">{icon} {item["name"]}</a></td>\n'
                    text += f'<td>{item["size"]}</td>\n'
                    text += f'<td>{item["modified"]}</td>\n'
                    text += f"</tr>\n"

                text += "</tbody>\n"
                text += "</table>\n"
                text += "</div>\n"

            except PermissionError:
                text += '<div class="error">Permission denied accessing directory</div>\n'
            except Exception as e:
                text += f'<div class="error">Error listing directory: {str(e)}</div>\n'

        text += "</body></html>\n"
        return web.Response(content_type="text/html", text=text)

    async def html_download_file(self, request):
        """
        Download a file from the filesystem
        """
        args = request.query
        current_path = args.get("path", ".")
        download_file = args.get("file", None)

        if not download_file:
            return web.Response(text="File not specified", status=400)

        # Security check - prevent directory traversal attacks
        base_dir = os.getcwd()
        safe_path = os.path.abspath(os.path.join(base_dir, current_path))

        # Ensure the path is within the base directory
        if not safe_path.startswith(base_dir):
            return web.Response(text="Access denied", status=403)

        file_path = os.path.join(safe_path, download_file)

        try:
            # Security check for file path
            file_abs_path = os.path.abspath(file_path)
            if not file_abs_path.startswith(base_dir):
                return web.Response(text="Access denied", status=403)

            if os.path.isfile(file_abs_path):
                # Read file content
                with open(file_abs_path, "rb") as f:
                    content = f.read()

                # Set appropriate content type based on file extension
                file_ext = os.path.splitext(download_file)[1].lower()
                content_type = "application/octet-stream"

                if file_ext in [".yaml", ".yml"]:
                    content_type = "text/yaml"
                elif file_ext in [".py"]:
                    content_type = "text/x-python"
                elif file_ext in [".json"]:
                    content_type = "application/json"
                elif file_ext in [".log", ".txt"]:
                    content_type = "text/plain"
                elif file_ext in [".html"]:
                    content_type = "text/html"
                elif file_ext in [".md"]:
                    content_type = "text/markdown"

                # Create response with download headers
                response = web.Response(body=content, content_type=content_type)
                response.headers["Content-Disposition"] = f'attachment; filename="{download_file}"'
                return response
            else:
                return web.Response(text="File not found", status=404)
        except PermissionError:
            return web.Response(text="Permission denied", status=403)
        except Exception as e:
            self.log(f"Error downloading file: {str(e)}")
            return web.Response(text=f"Error downloading file: {str(e)}", status=500)

    async def html_logo_image(self, request):
        """
        Serve the bundled Predbat logo images locally.

        The logos used to be loaded from raw.githubusercontent.com, which left the
        dashboard hanging for ~15s whenever GitHub was unreachable or rate-limiting
        (issue #4562). They now ship alongside the other app files so the page never
        depends on internet access to render.
        """
        content_types = {
            "bat_logo.svg": "image/svg+xml",
            "bat_logo_light.png": "image/png",
            "bat_logo_dark.png": "image/png",
        }
        filename = request.match_info.get("filename")
        content_type = content_types.get(filename)
        if not content_type:
            return web.Response(text="Not found", status=404)

        file_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), filename)
        try:
            with open(file_path, "rb") as handle:
                content = handle.read()
        except OSError:
            return web.Response(text="Not found", status=404)

        return web.Response(body=content, content_type=content_type, headers={"Cache-Control": "public, max-age=604800"})

    async def html_metrics_dashboard(self, request):
        """
        Return the Metrics Dashboard page rendered inside the standard PredBat web shell.
        """
        self.default_page = "./metrics_dashboard"

        if not PROMETHEUS_AVAILABLE:
            text = self.get_header("Predbat Metrics", refresh=0)
            text += "<body>\n"
            text += """<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;padding:2rem;">
<h1>Metrics Dashboard Unavailable</h1>
<p><code>prometheus_client</code> is not installed.</p>
<p>Install it with: <code>pip install prometheus_client</code></p>
<p style="margin-top:1.5rem;"><a href="./dash" style="padding:10px 20px;background:#4CAF50;color:white;text-decoration:none;border-radius:4px;font-size:16px;">&larr; Back to Dashboard</a></p>
</div>
"""
            text += "</body></html>\n"
            return web.Response(text=text, content_type="text/html")

        import json as _json

        data_json = _json.dumps(metrics().to_dict())

        text = self.get_header("Predbat Metrics", refresh=0)
        text += "<body>\n"
        text += get_metrics_dashboard_css()
        text += get_metrics_dashboard_body(data_json)
        text += "</body></html>\n"
        return web.Response(content_type="text/html", text=text)

    async def html_internals(self, request):
        """
        Return the Internals page showing the class hierarchy and object inspection
        """
        self.default_page = "./internals"

        text = self.get_header("Predbat Internals", refresh=0)
        text += "<body>\n"
        text += get_internals_css()
        text += get_internals_js()

        text += '<div class="internals-container">\n'
        text += '<div class="breadcrumb-container">\n'
        text += "<h2>Predbat Internals Browser</h2>\n"
        text += '<div class="breadcrumb">Browse the internal object hierarchy starting from predbat</div>\n'
        text += "</div>\n"

        # Add thread stack frames section
        text += '<div class="threads-section">\n'
        text += "<h3>Thread Stack Frames</h3>\n"
        text += '<div class="threads-container">\n'
        text += self._get_thread_stacks_html()
        text += "</div>\n"
        text += "</div>\n"

        # Object tree in a panel
        text += '<div class="tree-section">\n'
        text += "<h3>Object Hierarchy</h3>\n"
        text += '<div class="tree-container">\n'
        text += '<div class="tree-view">\n'

        # Create a single root node for 'predbat' pointing to self.base
        text += '<div class="tree-item" title="predbat" onclick="toggleNode(this, \'predbat\')">\n'
        text += '<span class="expand-icon expandable">+</span>'
        text += '<button class="refresh-icon" title="Refresh this node" onclick="event.stopPropagation(); refreshNode(this, \'predbat\')">🔄</button>'
        text += '<a href="./api/internals/download?path=predbat" class="download-icon" title="Download as YAML" onclick="event.stopPropagation()">⬇</a>'
        text += '<span class="key">predbat</span>'
        text += f'<span class="type">&lt;{type(self.base).__name__}&gt;</span>'
        text += "</div>\n"
        text += '<div class="tree-children"></div>\n'

        text += "</div>\n"  # tree-view
        text += "</div>\n"  # tree-container
        text += "</div>\n"  # tree-section
        text += "</div>\n"  # internals-container

        text += "</body></html>\n"
        return web.Response(content_type="text/html", text=text)

    def _get_thread_stacks_html(self):
        """
        Get HTML representation of all thread stack frames
        """
        text = ""

        try:
            # Get all thread frames
            frames = sys._current_frames()
            threads = {thread.ident: thread for thread in threading.enumerate()}

            # Sort threads by name for consistent display
            thread_list = []
            for thread_id, frame in frames.items():
                thread = threads.get(thread_id)
                thread_name = thread.name if thread else f"Thread-{thread_id}"
                thread_list.append((thread_name, thread_id, frame, thread))

            thread_list.sort(key=lambda x: x[0])

            if not thread_list:
                text += '<div class="thread-item">No threads found</div>'
                return text

            for thread_name, thread_id, frame, thread in thread_list:
                # Thread header
                text += f'<div class="thread-item">'
                text += f'<div class="thread-header" onclick="toggleThreadStack(this)">'
                text += f'<span class="expand-icon expandable">+</span>'
                text += f'<span class="thread-name">{thread_name}</span>'
                text += f'<span class="thread-id">ID: {thread_id}</span>'
                if thread:
                    alive_status = "alive" if thread.is_alive() else "dead"
                    daemon_status = "daemon" if thread.daemon else "normal"
                    text += f'<span class="thread-status">{alive_status}, {daemon_status}</span>'
                text += "</div>"

                # Stack trace (collapsed by default)
                text += f'<div class="thread-stack collapsed">'

                # Extract all stack frames
                stack = traceback.extract_stack(frame)

                text += '<div class="stack-frames">'
                for i, frame_info in enumerate(stack):
                    frame_num = i
                    text += f'<div class="stack-frame">'
                    text += f'<span class="frame-number">#{frame_num}</span>'
                    text += f'<span class="frame-file">{frame_info.filename}:{frame_info.lineno}</span>'
                    text += f'<span class="frame-function">in {frame_info.name}()</span>'
                    if frame_info.line:
                        text += f'<div class="frame-code">{html_module.escape(frame_info.line.strip())}</div>'
                    text += "</div>"
                text += "</div>"

                # Check if this thread has an asyncio event loop with tasks
                asyncio_tasks = self._get_thread_asyncio_tasks(frame)
                if asyncio_tasks:
                    text += '<div class="asyncio-tasks">'
                    text += "<h4>Asyncio Tasks in this thread:</h4>"
                    for task_info in asyncio_tasks:
                        text += '<div class="asyncio-task">'
                        text += f'<div class="task-header">'
                        text += f'<span class="task-name">{task_info["name"]}</span>'
                        text += f'<span class="task-state">{task_info["state"]}</span>'
                        text += "</div>"
                        if task_info.get("stack"):
                            text += '<div class="task-stack">'
                            for frame_info in task_info["stack"]:
                                text += f'<div class="stack-frame">'
                                text += f'<span class="frame-file">{frame_info["file"]}:{frame_info["line"]}</span>'
                                text += f'<span class="frame-function">in {frame_info["name"]}()</span>'
                                if frame_info.get("code"):
                                    text += f'<div class="frame-code">{html_module.escape(frame_info["code"])}</div>'
                                text += "</div>"
                            text += "</div>"
                        text += "</div>"
                    text += "</div>"

                text += "</div>"  # thread-stack
                text += "</div>"  # thread-item

        except Exception as e:
            self.log(f"Error getting thread stacks: {e}")
            text += f'<div class="error">Error retrieving thread information: {html_module.escape(str(e))}</div>'

        return text

    def _get_thread_asyncio_tasks(self, frame):
        """
        Extract asyncio tasks from a thread's frame if it's running an event loop
        """
        tasks_info = []

        try:
            # Try to find the event loop in this thread's frame locals
            current_frame = frame
            event_loop = None

            # Walk up the stack to find the event loop
            while current_frame is not None:
                if "self" in current_frame.f_locals:
                    obj = current_frame.f_locals["self"]
                    if isinstance(obj, asyncio.AbstractEventLoop):
                        event_loop = obj
                        break
                current_frame = current_frame.f_back

            if not event_loop:
                return tasks_info

            # Get all tasks for this event loop
            all_tasks = asyncio.all_tasks(event_loop)

            for task in all_tasks:
                task_name = task.get_name()

                # Get task state
                if task.done():
                    if task.cancelled():
                        state = "cancelled"
                    else:
                        state = "done"
                else:
                    state = "running"

                task_info = {"name": task_name, "state": state, "stack": []}

                # Get the coroutine stack
                try:
                    coro = task.get_coro()
                    if coro:
                        # Get the stack frames for this coroutine
                        stack = []
                        cr_frame = getattr(coro, "cr_frame", None)
                        if cr_frame:
                            # Extract stack from coroutine frame
                            frames_list = []
                            current = cr_frame
                            while current:
                                frames_list.append(current)
                                current = current.f_back

                            # Reverse to show from oldest to newest
                            frames_list.reverse()

                            for fr in frames_list:
                                code = fr.f_code
                                line_no = fr.f_lineno

                                # Try to get the actual line of code
                                try:
                                    import linecache

                                    line_code = linecache.getline(code.co_filename, line_no).strip()
                                except:
                                    line_code = ""

                                stack.append({"file": code.co_filename, "line": line_no, "name": code.co_name, "code": line_code})

                            task_info["stack"] = stack
                except Exception as e:
                    # If we can't get the coroutine stack, just skip it
                    pass

                tasks_info.append(task_info)

        except Exception as e:
            self.log(f"Error extracting asyncio tasks: {e}")

        return tasks_info

    async def html_api_internals(self, request):
        """
        API endpoint to get object members for a given path
        """
        args = request.query
        path = args.get("path", "")

        try:
            # Navigate to the requested object
            obj = self.base
            if path and path != "predbat":
                parts = path.split("::")
                # Skip 'predbat' if it's the first part
                if parts[0] == "predbat":
                    parts = parts[1:]
                for part in parts:
                    # Check dict first before hasattr to avoid accessing dict methods
                    if isinstance(obj, dict):
                        if part in obj:
                            obj = obj[part]
                        else:
                            return web.Response(content_type="application/json", text=json.dumps({"success": False, "error": f"Key not found: {part}"}))
                    elif isinstance(obj, (list, tuple)):
                        try:
                            # Strip brackets if present (e.g., "[0]" -> "0")
                            index_str = part.strip("[]")
                            index = int(index_str)
                            obj = obj[index]
                        except (ValueError, IndexError):
                            return web.Response(content_type="application/json", text=json.dumps({"success": False, "error": f"Invalid index: {part}"}))
                    elif hasattr(obj, part):
                        obj = getattr(obj, part)
                    else:
                        return web.Response(content_type="application/json", text=json.dumps({"success": False, "error": f"Path not found: {path}"}))

            # Get members of the object
            members = self._get_object_members(obj, path)

            return web.Response(content_type="application/json", text=json.dumps({"success": True, "members": members}))
        except Exception as e:
            self.log(f"Error in internals API: {str(e)}")
            return web.Response(content_type="application/json", text=json.dumps({"success": False, "error": str(e)}))

    async def html_api_internals_download(self, request):
        """
        API endpoint to download object as YAML
        """
        args = request.query
        path = args.get("path", "")

        try:
            # Navigate to the requested object
            obj = self.base
            if path and path != "predbat":
                parts = path.split("::")
                # Skip 'predbat' if it's the first part
                if parts[0] == "predbat":
                    parts = parts[1:]
                for part in parts:
                    # Check dict first before hasattr to avoid accessing dict methods
                    if isinstance(obj, dict):
                        if part in obj:
                            obj = obj[part]
                        else:
                            return web.Response(content_type="text/plain", text=f"Error: Key not found: {part}")
                    elif isinstance(obj, (list, tuple)):
                        try:
                            # Strip brackets if present (e.g., "[0]" -> "0")
                            index_str = part.strip("[]")
                            index = int(index_str)
                            obj = obj[index]
                        except (ValueError, IndexError):
                            return web.Response(content_type="text/plain", text=f"Error: Invalid index: {part}")
                    elif hasattr(obj, part):
                        obj = getattr(obj, part)
                    else:
                        return web.Response(content_type="text/plain", text=f"Error: Attribute not found: {part}")

            # Convert object to YAML-serializable format
            try:
                yaml_data = self._object_to_yaml_dict(obj, visited=set())
            except Exception as e:
                self.log(f"Error converting object to YAML dict: {e}")
                return web.Response(content_type="text/plain", text=f"Error: Failed to convert object to YAML-serializable format: {str(e)}")

            # Convert to YAML
            try:
                yaml = YAML()
                yaml.default_flow_style = False
                yaml.preserve_quotes = True

                stream = io.StringIO()
                yaml.dump(yaml_data, stream)
                yaml_content = stream.getvalue()
            except Exception as e:
                self.log(f"Error dumping YAML: {e}")
                return web.Response(content_type="text/plain", text=f"Error: Failed to serialize to YAML format: {str(e)}\n\nThis object may contain types that are not YAML-serializable.")

            # Generate filename from path
            if path:
                filename = path.replace("::", "_") + ".yaml"
            else:
                filename = "predbat_root.yaml"

            # Return as downloadable file
            return web.Response(content_type="application/x-yaml", headers={"Content-Disposition": f'attachment; filename="{filename}"'}, text=yaml_content)

        except Exception as e:
            self.log(f"Error downloading internals as YAML: {e}")
            return web.Response(content_type="text/plain", text=f"Error: {str(e)}")

    def _object_to_yaml_dict(self, obj, max_depth=10, current_depth=0, visited=None):
        """
        Convert an object to a YAML-serializable dictionary
        Handles nested objects, lists, dicts, etc.
        Detects circular references to prevent infinite loops
        """
        if visited is None:
            visited = set()

        if current_depth >= max_depth:
            return f"<max depth {max_depth} reached>"

        # Handle None
        if obj is None:
            return None

        # Handle primitives (no circular reference check needed)
        if isinstance(obj, (str, int, float, bool)):
            return obj

        # Check for circular references for complex objects
        obj_id = id(obj)
        if obj_id in visited:
            return f"<circular reference to {type(obj).__name__}>"

        # Add to visited set
        visited.add(obj_id)

        # Handle lists and tuples
        if isinstance(obj, (list, tuple)):
            result = []
            for i, item in enumerate(obj[:100]):  # Limit to 100 items
                try:
                    result.append(self._object_to_yaml_dict(item, max_depth, current_depth + 1, visited))
                except Exception as e:
                    result.append(f"<error at index {i}: {type(e).__name__}>")
            # Remove from visited after processing to allow same object in different branches
            visited.discard(obj_id)
            return result

        # Handle dictionaries
        if isinstance(obj, dict):
            result = {}
            for key, value in list(obj.items())[:100]:  # Limit to 100 items
                try:
                    # Ensure key is YAML-serializable
                    yaml_key = str(key) if not isinstance(key, (str, int, float, bool)) else key
                    result[yaml_key] = self._object_to_yaml_dict(value, max_depth, current_depth + 1, visited)
                except Exception as e:
                    try:
                        yaml_key = str(key)
                    except:
                        yaml_key = f"<unprintable_key_{hash(key)}>"
                    result[yaml_key] = f"<error: {type(e).__name__}>"
            # Remove from visited after processing to allow same object in different branches
            visited.discard(obj_id)
            return result

        # Handle objects with __dict__
        if hasattr(obj, "__dict__"):
            result = {}
            try:
                obj_dict = obj.__dict__
                for key, value in list(obj_dict.items())[:100]:  # Limit to 100 items
                    if not key.startswith("_"):
                        try:
                            result[key] = self._object_to_yaml_dict(value, max_depth, current_depth + 1, visited)
                        except Exception as e:
                            result[key] = f"<error: {type(e).__name__}>"
            except Exception as e:
                visited.discard(obj_id)
                return f"<{type(obj).__name__} object - error accessing __dict__: {type(e).__name__}>"
            # Remove from visited after processing to allow same object in different branches
            visited.discard(obj_id)
            return result if result else f"<{type(obj).__name__} object>"

        # Fallback: try to convert to string
        try:
            str_value = str(obj)
            if len(str_value) > 200:
                return str_value[:200] + "..."
            return str_value
        except:
            return f"<{type(obj).__name__}>"

    def _get_object_members(self, obj, path):
        """
        Get members of an object for display in the internals browser
        Returns a list of dictionaries with key, type, value, and expandable flag
        """
        members = []

        try:
            # Handle dictionaries
            if isinstance(obj, dict):
                for key in sorted(obj.keys())[:100]:  # Limit to first 100 items
                    try:
                        value = obj[key]
                        member_info = self._analyze_value(str(key), value, path)
                        members.append(member_info)
                    except Exception as e:
                        members.append({"key": str(key), "type": "error", "value": f"Error: {str(e)}", "expandable": False})

                if len(obj) > 100:
                    members.append({"key": "...", "type": "info", "value": f"({len(obj) - 100} more items)", "expandable": False})

            # Handle lists/tuples
            elif isinstance(obj, (list, tuple)):
                for i, value in enumerate(obj[:100]):  # Limit to first 100 items
                    try:
                        member_info = self._analyze_value(f"[{i}]", value, path)
                        members.append(member_info)
                    except Exception as e:
                        members.append({"key": f"[{i}]", "type": "error", "value": f"Error: {str(e)}", "expandable": False})

                if len(obj) > 100:
                    members.append({"key": "...", "type": "info", "value": f"({len(obj) - 100} more items)", "expandable": False})

            # Handle objects with attributes
            else:
                # Get all attributes
                attrs = []
                for attr in dir(obj):
                    # Skip private attributes and methods
                    if attr.startswith("_"):
                        continue
                    attrs.append(attr)

                # Sort and limit
                for attr in sorted(attrs)[:200]:  # Limit to 200 attributes
                    try:
                        value = getattr(obj, attr)
                        # Skip methods for now (could make them expandable later)
                        if callable(value):
                            continue
                        member_info = self._analyze_value(attr, value, path)
                        members.append(member_info)
                    except Exception as e:
                        members.append({"key": attr, "type": "error", "value": f"Error: {str(e)}", "expandable": False})

        except Exception as e:
            self.log(f"Error getting object members: {str(e)}")
            members.append({"key": "error", "type": "error", "value": str(e), "expandable": False})

        return members

    def _analyze_value(self, key, value, path):
        """
        Analyze a value and return information about it
        """
        value_type = type(value).__name__
        expandable = False
        display_value = None
        type_size = None

        # Check if expandable
        if isinstance(value, dict):
            expandable = len(value) > 0
            display_value = f"{{{len(value)} items}}"
            type_size = len(value)
        elif isinstance(value, (list, tuple)):
            expandable = len(value) > 0
            display_value = f"[{len(value)} items]"
            type_size = len(value)
        elif hasattr(value, "__dict__") and not isinstance(value, (str, int, float, bool, type(None))):
            # Object with attributes
            expandable = True
            display_value = f"<{value_type} object>"
        elif isinstance(value, (str, int, float, bool, type(None))):
            # Scalar types
            expandable = False
            if isinstance(value, str):
                # Truncate long strings
                if len(value) > 100:
                    display_value = value[:100] + "..."
                else:
                    display_value = value
            else:
                display_value = value
        else:
            # Other types
            try:
                str_value = str(value)
                if len(str_value) > 100:
                    display_value = str_value[:100] + "..."
                else:
                    display_value = str_value
            except:
                display_value = f"<{value_type}>"

        # Build the full path for this item using :: as separator
        full_path = f"{path}::{key}" if path else key

        result = {"key": key, "type": value_type, "value": display_value, "expandable": expandable, "path": full_path}

        # Add size for collections
        if type_size is not None:
            result["size"] = type_size

        return result