Add BrowserStack cross-browser/device e2e runs

Layers BrowserStack on top of the local Playwright e2e suites:
- browserstack.yml (Windows Chrome, macOS Firefox, iPad/iPhone WebKit,
  Galaxy S23) driven by the BrowserStack Node SDK and Local tunnel
- :browserstack package scripts and the gated E2E (BrowserStack) CI job
  (runs on manual dispatch or the e2e-browserstack PR label)
- tunnel/iOS-WebKit resilience in the specs (bs-local.com host, single
  shared mobile context, dynamic-import + CDP "Internal error" skips)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

.github/copilot-instructions.md

@@ -289,6 +289,7 @@ For browser support, API details, and current specifications, refer to these aut
 - **Test with Vitest**: Use the established test framework
 - **Mock appropriately**: Mock WebSocket connections and API calls
 - **Test accessibility**: Ensure components are accessible
+- **Optimizing chart data processing**: When optimizing chart data transforms (history, statistics, energy, downsampling), follow the playbook in [`test/benchmarks/README.md`](test/benchmarks/README.md) — it has seeded fixtures, characterization (snapshot) tests that pin current output, and `vitest bench` benchmarks (`yarn test:bench`) for before/after comparison. Optimizations must keep output bit-identical.
 
 ## Component Library
 

.github/workflows/e2e.yaml

@@ -0,0 +1,308 @@
+name: E2E Tests
+
+on:
+  push:
+    branches:
+      - dev
+      - master
+  pull_request:
+    branches:
+      - dev
+      - master
+  # BrowserStack runs are gated by the `e2e-browserstack` label or manual
+  # dispatch — see the e2e-browserstack job below. Local Chromium always runs.
+  workflow_dispatch:
+    inputs:
+      run-browserstack:
+        description: "Run BrowserStack suite"
+        type: boolean
+        default: true
+
+env:
+  NODE_OPTIONS: --max_old_space_size=6144
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+jobs:
+  # ── Build the demo once and share it across test jobs via artifact ──────────
+  build-demo:
+    name: Build demo
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
+
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Build demo
+        run: ./node_modules/.bin/gulp build-demo
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Upload demo build
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: demo-dist
+          path: demo/dist/
+          if-no-files-found: error
+          retention-days: 3
+
+  # ── Build the e2e test app and share it via artifact ────────────────────────
+  build-e2e-test-app:
+    name: Build e2e test app
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
+
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Build e2e test app
+        run: ./node_modules/.bin/gulp build-e2e-test-app
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Upload e2e test app build
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: e2e-test-app-dist
+          path: test/e2e/app/dist/
+          if-no-files-found: error
+          retention-days: 3
+
+  # ── Build the gallery and share it via artifact ─────────────────────────────
+  build-gallery:
+    name: Build gallery
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
+
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Build gallery
+        run: ./node_modules/.bin/gulp build-gallery
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Upload gallery build
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: gallery-dist
+          path: gallery/dist/
+          if-no-files-found: error
+          retention-days: 3
+
+  # ── Run Playwright tests locally against Chromium ──────────────────────────
+  e2e-local:
+    name: E2E (local Chromium)
+    needs: [build-demo, build-e2e-test-app, build-gallery]
+    runs-on: ubuntu-latest
+    # Fail fast if anything hangs. The whole suite should take < 15 minutes on
+    # Chromium; anything longer is almost certainly an install or webServer
+    # hang.
+    timeout-minutes: 30
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
+
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      # Cache the downloaded browser build keyed on the pinned Playwright
+      # version (yarn.lock), so re-runs skip the ~170 MB download.
+      - name: Cache Playwright browsers
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ hashFiles('yarn.lock') }}
+
+      - name: Install Playwright browsers
+        run: yarn playwright install --with-deps chromium
+        timeout-minutes: 10
+
+      - name: Download demo build
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+        with:
+          name: demo-dist
+          path: demo/dist/
+
+      - name: Download e2e test app build
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+        with:
+          name: e2e-test-app-dist
+          path: test/e2e/app/dist/
+
+      - name: Download gallery build
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+        with:
+          name: gallery-dist
+          path: gallery/dist/
+
+      - name: Run Playwright tests (local)
+        run: yarn test:e2e
+        timeout-minutes: 15
+
+      - name: Upload blob report
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        if: always()
+        with:
+          name: blob-report-local
+          path: test/e2e/reports/
+          retention-days: 3
+
+  # ── Run Playwright tests on BrowserStack (real devices + browsers) ─────────
+  # The BrowserStack SDK manages the Local tunnel and uploads results to the
+  # BrowserStack Automate dashboard automatically — no tunnel action needed.
+  #
+  # Gated on:
+  #   - manual dispatch with the run-browserstack input enabled, OR
+  #   - a PR with the `e2e-browserstack` label applied.
+  # This keeps CI fast on normal PRs while still allowing on-demand runs.
+  e2e-browserstack:
+    name: E2E (BrowserStack)
+    needs: [build-demo, build-e2e-test-app, build-gallery]
+    runs-on: ubuntu-latest
+    if: |
+      (github.event_name == 'workflow_dispatch' && inputs.run-browserstack) ||
+      (github.event_name == 'pull_request' && contains(github.event.pull_request.labels.*.name, 'e2e-browserstack'))
+    environment: browserstack
+    env:
+      BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}
+      BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
+
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Download demo build
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+        with:
+          name: demo-dist
+          path: demo/dist/
+
+      - name: Download e2e test app build
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+        with:
+          name: e2e-test-app-dist
+          path: test/e2e/app/dist/
+
+      - name: Download gallery build
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+        with:
+          name: gallery-dist
+          path: gallery/dist/
+
+      - name: Run Playwright tests (BrowserStack)
+        run: yarn test:e2e:browserstack
+
+  # ── Merge local blob reports and post PR comment ───────────────────────────
+  # Only depends on the local job — BrowserStack reports live on the
+  # BrowserStack Automate dashboard and don't feed into the local blob report.
+  report:
+    name: Report
+    needs: [e2e-local]
+    runs-on: ubuntu-latest
+    if: always()
+    permissions:
+      contents: read
+      pull-requests: write
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
+
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Download blob report (local)
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+        continue-on-error: true
+        with:
+          name: blob-report-local
+          path: test/e2e/reports/
+
+      - name: Stage blobs for merge
+        run: node test/e2e/collect-blob-reports.mjs
+
+      - name: Merge blob reports
+        run: npx playwright merge-reports -c test/e2e/playwright.merge.config.ts test/e2e/reports/blob
+
+      - name: Upload merged HTML report
+        id: upload-report
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: playwright-report
+          path: test/e2e/reports/combined/
+          retention-days: 14
+
+      - name: Post report link to PR
+        if: github.event_name == 'pull_request'
+        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
+        with:
+          script: |
+            const runUrl = `${context.serverUrl}/${context.repo.owner}/${context.repo.repo}/actions/runs/${context.runId}`;
+            const body = `## Playwright E2E test report\n\nThe combined HTML report is available as a workflow artifact.\n\n[View workflow run](${runUrl})`;
+            await github.rest.issues.createComment({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.issue.number,
+              body,
+            });

.github/workflows/pull-request-standards.yaml

@@ -0,0 +1,190 @@
+name: Pull request standards
+
+on:
+  pull_request_target: # zizmor: ignore[dangerous-triggers] -- safe: reads PR metadata from event payload only, no PR code checkout
+    types:
+      - opened
+      - edited
+      - reopened
+      - ready_for_review
+    branches:
+      - dev
+
+permissions: {}
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number }}
+  cancel-in-progress: true
+
+jobs:
+  check:
+    name: Check pull request follows contribution standards
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write # To label and comment on pull requests
+    steps:
+      - name: Check pull request standards
+        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
+        with:
+          script: |
+            const pr = context.payload.pull_request;
+
+            // Exempt bots (Copilot agent, dependabot), drafts, and maintainers.
+            if (pr.user.type === "Bot") {
+              core.info(`Skipping bot author: ${pr.user.login}`);
+              return;
+            }
+            if (pr.draft) {
+              core.info("Skipping draft pull request");
+              return;
+            }
+            try {
+              await github.rest.orgs.checkMembershipForUser({
+                org: "home-assistant",
+                username: pr.user.login,
+              });
+              core.info(`Skipping organization member: ${pr.user.login}`);
+              return;
+            } catch (error) {
+              core.info(`${pr.user.login} is not an organization member, checking standards`);
+            }
+
+            const label = "Needs Template";
+            const marker = "<!-- pr-standards-check -->";
+            const { owner, repo } = context.repo;
+            const issue_number = pr.number;
+
+            const body = (pr.body || "").replace(/<!--[\s\S]*?-->/g, "");
+            const normalized = body.toLowerCase();
+
+            // Ignore 404s from mutations that race manual edits or cancelled runs.
+            const ignoreMissing = async (fn) => {
+              try {
+                await fn();
+              } catch (error) {
+                if (error.status === 404) {
+                  core.info("Target already removed, nothing to do");
+                  return;
+                }
+                throw error;
+              }
+            };
+
+            // Hide/restore our comment via GraphQL (REST cannot minimize).
+            const setMinimized = async (subjectId, minimized) => {
+              const mutation = minimized
+                ? `mutation($id: ID!) {
+                     minimizeComment(input: { subjectId: $id, classifier: RESOLVED }) {
+                       clientMutationId
+                     }
+                   }`
+                : `mutation($id: ID!) {
+                     unminimizeComment(input: { subjectId: $id }) {
+                       clientMutationId
+                     }
+                   }`;
+              try {
+                await github.graphql(mutation, { id: subjectId });
+              } catch (error) {
+                core.info(
+                  `Could not ${minimized ? "minimize" : "restore"} comment: ${error.message}`
+                );
+              }
+            };
+
+            // Content of a "## <name>" section, or null when the heading is absent.
+            const section = (name) => {
+              const match = body.match(
+                new RegExp(`##\\s${name}([\\s\\S]*?)(?=\\n##\\s|$)`, "i")
+              );
+              return match ? match[1] : null;
+            };
+
+            const problems = [];
+
+            const requiredHeadings = [
+              "## proposed change",
+              "## type of change",
+              "## checklist",
+            ];
+            if (requiredHeadings.some((h) => !normalized.includes(h))) {
+              problems.push(
+                "Use the pull request template without removing its sections."
+              );
+            }
+
+            const typeOfChange = section("type of change");
+            if (typeOfChange !== null) {
+              const ticked = (typeOfChange.match(/-\s*\[[xX]\]/g) || []).length;
+              if (ticked !== 1) {
+                problems.push(
+                  'Select exactly one option under "Type of change".'
+                );
+              }
+            }
+
+            const proposedChange = section("proposed change");
+            if (proposedChange !== null && proposedChange.trim().length === 0) {
+              problems.push('Describe your changes under "Proposed change".');
+            }
+
+            const isValid = problems.length === 0;
+
+            const comments = await github.paginate(
+              github.rest.issues.listComments,
+              { owner, repo, issue_number, per_page: 100 }
+            );
+            const existing = comments.find((c) => c.body.includes(marker));
+            const hasLabel = pr.labels.some((l) => l.name === label);
+
+            if (isValid) {
+              core.info("Pull request standards met");
+
+              if (hasLabel) {
+                await ignoreMissing(() =>
+                  github.rest.issues.removeLabel({
+                    owner, repo, issue_number, name: label,
+                  })
+                );
+              }
+              if (existing) {
+                await setMinimized(existing.node_id, true);
+              }
+              return;
+            }
+
+            core.info(`Pull request standards not met:\n- ${problems.join("\n- ")}`);
+
+            if (!hasLabel) {
+              await github.rest.issues.addLabels({
+                owner, repo, issue_number, labels: [label],
+              });
+            }
+
+            const message =
+              `${marker}\n` +
+              `Hey @${pr.user.login}!\n\n` +
+              `Thank you for your contribution! To help reviewers, please update ` +
+              `this pull request to follow our pull request standards:\n\n` +
+              problems.map((p) => `- ${p}`).join("\n") +
+              `\n\n` +
+              `Please complete the ` +
+              `[PR template](https://github.com/home-assistant/frontend/blob/dev/.github/PULL_REQUEST_TEMPLATE.md?plain=1) ` +
+              `and see the [developer docs](https://developers.home-assistant.io/docs/review-process) ` +
+              `for more on creating a great pull request (see point 6).`;
+
+            if (existing) {
+              await github.rest.issues.updateComment({
+                owner, repo, comment_id: existing.id, body: message,
+              });
+              await setMinimized(existing.node_id, false);
+            } else {
+              await github.rest.issues.createComment({
+                owner, repo, issue_number, body: message,
+              });
+            }
+
+            // Fail this check so it can block the PR from being merged
+            core.setFailed(
+              `Pull request standards not met:\n- ${problems.join("\n- ")}`
+            );

.github/workflows/sync-numeric-device-classes.yaml

@@ -0,0 +1,51 @@
+name: Sync numeric device classes
+
+# Mirrors Home Assistant Core's numeric `SensorDeviceClass` list into the
+# build-time default in src/data/sensor_numeric_device_classes.ts and opens a PR
+# when it drifts. Reads homeassistant/generated/sensor.json from core.
+
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: "0 4 * * *" # Daily, 04:00 UTC
+
+permissions:
+  contents: read
+
+jobs:
+  sync:
+    name: Sync
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+
+      - name: Set up Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Regenerate numeric device classes
+        run: ./script/gen_numeric_device_classes
+
+      - name: Format
+        run: yarn prettier --write src/data/sensor_numeric_device_classes.ts
+
+      - name: Create pull request
+        uses: peter-evans/create-pull-request@5f6978faf089d4d20b00c7766989d076bb2fc7f1 # v8.1.1
+        with:
+          branch: chore/sync-numeric-device-classes
+          commit-message: Update numeric sensor device classes
+          title: Update numeric sensor device classes
+          body: |
+            Regenerated `SENSOR_NUMERIC_DEVICE_CLASSES` from Home Assistant Core's
+            `SensorDeviceClass`.
+
+            Automated by `.github/workflows/sync-numeric-device-classes.yaml`.

.gitignore

@@ -54,7 +54,16 @@ src/cast/dev_const.ts
 # test coverage
 test/coverage/
 
+# Playwright e2e output
+test/e2e/reports/
+test/e2e/test-results/
+# E2E test app build output
+test/e2e/app/dist/
+
 # AI tooling
 .claude
 .cursor
 .opencode
+.serena
+
+test/benchmarks/results/

browserstack.yml

@@ -0,0 +1,53 @@
+# BrowserStack Automate configuration for Home Assistant frontend e2e tests.
+# Credentials are read from BROWSERSTACK_USERNAME and BROWSERSTACK_ACCESS_KEY
+# environment variables set in GitHub Actions (or locally).
+# See: https://www.browserstack.com/docs/automate/playwright/getting-started/nodejs
+
+userName: ${BROWSERSTACK_USERNAME}
+accessKey: ${BROWSERSTACK_ACCESS_KEY}
+
+projectName: Home Assistant Frontend
+buildName: e2e tests
+buildIdentifier: "CI #${BUILD_NUMBER}"
+
+# ── Platforms ────────────────────────────────────────────────────────────────
+platforms:
+  - os: Windows
+    osVersion: 11
+    browserName: chrome
+    browserVersion: latest
+  - os: OS X
+    osVersion: Ventura
+    browserName: playwright-firefox
+    browserVersion: latest
+  - deviceName: iPad 6th
+    osVersion: 12
+    browserName: playwright-webkit
+  - deviceName: iPhone 12
+    osVersion: 14
+    browserName: playwright-webkit
+  - deviceName: Samsung Galaxy S23
+    osVersion: 13
+    browserName: chrome
+    realMobile: true
+
+parallelsPerPlatform: 1
+
+# ── Local tunnel ─────────────────────────────────────────────────────────────
+# The SDK manages the BrowserStack Local tunnel automatically.
+browserstackLocal: true
+
+framework: playwright
+
+# Pin to the latest Playwright version BrowserStack supports. Our local
+# @playwright/test is newer (1.59.x) which BrowserStack does not yet support,
+# causing a "Malformed endpoint" connection error if left unset.
+# Update this when BrowserStack adds support for a newer version.
+# Supported versions: https://www.browserstack.com/docs/automate/playwright/browsers-and-os
+playwrightVersion: 1.latest
+
+# ── Debugging ────────────────────────────────────────────────────────────────
+debug: false
+networkLogs: false
+consoleLogs: errors
+testObservability: true

build-scripts/bundle.cjs

@@ -1,4 +1,3 @@
-/* global require, module, __dirname, process */
 const path = require("path");
 const env = require("./env.cjs");
 const paths = require("./paths.cjs");
@@ -321,4 +320,22 @@ module.exports.config = {
       isLandingPageBuild: true,
     };
   },
+
+  e2eTestApp({ isProdBuild, latestBuild, isStatsBuild }) {
+    return {
+      name: "e2e-test-app" + nameSuffix(latestBuild),
+      entry: {
+        main: path.resolve(paths.e2eTestApp_dir, "src/entrypoint.ts"),
+      },
+      outputPath: outputPath(paths.e2eTestApp_output_root, latestBuild),
+      publicPath: publicPath(latestBuild),
+      defineOverlay: {
+        __VERSION__: JSON.stringify(`E2E-TEST-${env.version()}`),
+        __DEMO__: true,
+      },
+      isProdBuild,
+      latestBuild,
+      isStatsBuild,
+    };
+  },
 };

build-scripts/eslint.config.mjs

@@ -1,9 +1,13 @@
 // @ts-check
 
+import globals from "globals";
 import tseslint from "typescript-eslint";
 import rootConfig from "../eslint.config.mjs";
 
 export default tseslint.config(...rootConfig, {
+  languageOptions: {
+    globals: globals.node,
+  },
   rules: {
     "no-console": "off",
     "import-x/no-extraneous-dependencies": "off",

build-scripts/get-built-in-node-module-shim.cjs

@@ -1,4 +1,3 @@
-/* global module */
 // Browser-only replacement for core-js/internals/get-built-in-node-module.
 // The original helper evaluates `Function('return require("...")')()`
 // when it detects a Node environment, which causes a runtime

build-scripts/gulp/clean.js

@@ -45,3 +45,10 @@ gulp.task(
     ])
   )
 );
+
+gulp.task(
+  "clean-e2e-test-app",
+  gulp.parallel("clean-translations", async () =>
+    deleteSync([paths.e2eTestApp_output_root, paths.build_dir])
+  )
+);

build-scripts/gulp/e2e-test-app.js

@@ -0,0 +1,41 @@
+import gulp from "gulp";
+import "./clean.js";
+import "./entry-html.js";
+import "./gather-static.js";
+import "./gen-icons-json.js";
+import "./translations.js";
+import "./rspack.js";
+
+gulp.task(
+  "develop-e2e-test-app",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "development";
+    },
+    "clean-e2e-test-app",
+    "translations-enable-merge-backend",
+    gulp.parallel(
+      "gen-icons-json",
+      "gen-pages-e2e-test-app-dev",
+      "build-translations",
+      "build-locale-data"
+    ),
+    "copy-static-e2e-test-app",
+    "rspack-dev-server-e2e-test-app"
+  )
+);
+
+gulp.task(
+  "build-e2e-test-app",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean-e2e-test-app",
+    "translations-enable-merge-backend",
+    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
+    "copy-static-e2e-test-app",
+    "rspack-prod-e2e-test-app",
+    "gen-pages-e2e-test-app-prod"
+  )
+);

build-scripts/gulp/entry-html.js

@@ -1,4 +1,3 @@
-/* global process */
 // Tasks to generate entry HTML
 
 import {
@@ -268,3 +267,24 @@ gulp.task(
     paths.landingPage_output_es5
   )
 );
+
+const E2E_TEST_APP_PAGE_ENTRIES = { "index.html": ["main"] };
+
+gulp.task(
+  "gen-pages-e2e-test-app-dev",
+  genPagesDevTask(
+    E2E_TEST_APP_PAGE_ENTRIES,
+    paths.e2eTestApp_dir,
+    paths.e2eTestApp_output_root
+  )
+);
+
+gulp.task(
+  "gen-pages-e2e-test-app-prod",
+  genPagesProdTask(
+    E2E_TEST_APP_PAGE_ENTRIES,
+    paths.e2eTestApp_dir,
+    paths.e2eTestApp_output_root,
+    paths.e2eTestApp_output_latest
+  )
+);

build-scripts/gulp/gallery.js

@@ -103,12 +103,29 @@ gulp.task("gather-gallery-pages", async function gatherPages() {
 
     if (!toProcess) {
       console.error("Unknown category", group.category);
-      if (!group.pages) {
+      if (!group.subsections && !group.pages) {
         group.pages = [];
       }
       continue;
     }
 
+    if (group.subsections) {
+      // Listed pages keep their per-subsection order.
+      for (const subsection of group.subsections) {
+        for (const page of subsection.pages) {
+          if (!toProcess.delete(page)) {
+            console.error("Found unreferenced demo", page);
+          }
+        }
+      }
+      // Any remaining pages land in a trailing "Other" subsection.
+      const leftover = Array.from(toProcess).sort();
+      if (leftover.length) {
+        group.subsections.push({ header: "Other", pages: leftover });
+      }
+      continue;
+    }
+
     // Any pre-defined groups will not be sorted.
     if (group.pages) {
       for (const page of group.pages) {

build-scripts/gulp/gather-static.js

@@ -201,3 +201,23 @@ gulp.task("copy-static-landing-page", async () => {
   copyFonts(paths.landingPage_output_static);
   copyTranslations(paths.landingPage_output_static);
 });
+
+gulp.task("copy-static-e2e-test-app", async () => {
+  // Copy app static files (icons, polyfills, etc.)
+  fs.copySync(
+    polyPath("public/static"),
+    path.resolve(paths.e2eTestApp_output_root, "static")
+  );
+  // Copy e2e test app public files (manifest, sw stubs)
+  const e2ePublic = path.resolve(paths.e2eTestApp_dir, "public");
+  if (fs.existsSync(e2ePublic)) {
+    fs.copySync(e2ePublic, paths.e2eTestApp_output_root);
+  }
+
+  copyPolyfills(paths.e2eTestApp_output_static);
+  copyMapPanel(paths.e2eTestApp_output_static);
+  copyFonts(paths.e2eTestApp_output_static);
+  copyTranslations(paths.e2eTestApp_output_static);
+  copyLocaleData(paths.e2eTestApp_output_static);
+  copyMdiIcons(paths.e2eTestApp_output_static);
+});

build-scripts/gulp/gen-numeric-device-classes.js

@@ -0,0 +1,40 @@
+import { writeFile } from "node:fs/promises";
+import { join } from "node:path";
+import process from "node:process";
+import gulp from "gulp";
+import paths from "../paths.cjs";
+
+const SOURCE_URL =
+  process.env.SENSOR_METADATA_URL ||
+  "https://raw.githubusercontent.com/home-assistant/core/dev/homeassistant/generated/sensor.json";
+
+const TARGET = join(
+  paths.root_dir,
+  "src",
+  "data",
+  "sensor_numeric_device_classes.ts"
+);
+
+gulp.task("gen-numeric-device-classes", async () => {
+  const response = await fetch(SOURCE_URL);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch ${SOURCE_URL}: ${response.status}`);
+  }
+
+  const data = await response.json();
+  const classes = [...(data.numeric_device_classes ?? [])].sort();
+  if (!classes.length) {
+    throw new Error(`No numeric_device_classes found in ${SOURCE_URL}`);
+  }
+
+  const content = `// This file is auto-generated from Home Assistant Core's \`SensorDeviceClass\`
+// (all values minus \`NON_NUMERIC_DEVICE_CLASSES\`). Do not edit by hand.
+// Regenerate with \`script/gen_numeric_device_classes\`.
+
+export const SENSOR_NUMERIC_DEVICE_CLASSES: string[] = [
+${classes.map((deviceClass) => `  "${deviceClass}",`).join("\n")}
+];
+`;
+
+  await writeFile(TARGET, content);
+});

build-scripts/gulp/index.mjs

@@ -4,11 +4,13 @@ import "./clean.js";
 import "./compress.js";
 import "./demo.js";
 import "./download-translations.js";
+import "./e2e-test-app.js";
 import "./entry-html.js";
 import "./fetch-nightly-translations.js";
 import "./gallery.js";
 import "./gather-static.js";
 import "./gen-icons-json.js";
+import "./gen-numeric-device-classes.js";
 import "./landing-page.js";
 import "./locale-data.js";
 import "./rspack.js";

build-scripts/gulp/licenses.js

@@ -1,6 +1,6 @@
 // Gulp task to generate third-party license notices.
 
-import { readFile, access } from "fs/promises";
+import { readFile, access, readdir } from "fs/promises";
 import { generateLicenseFile } from "generate-license-file";
 import gulp from "gulp";
 import path from "path";
@@ -11,58 +11,98 @@ const OUTPUT_FILE = path.join(
   "third-party-licenses.txt"
 );
 
+const NODE_MODULES = path.resolve(paths.root_dir, "node_modules");
+
 // The echarts package ships an Apache-2.0 NOTICE file that must be
 // redistributed alongside the compiled output per Apache License §4(d).
-const NOTICE_FILES = [
-  path.resolve(paths.root_dir, "node_modules/echarts/NOTICE"),
-];
+const NOTICE_FILES = [path.join(NODE_MODULES, "echarts/NOTICE")];
 
-// type-fest ships two license files (MIT for code, CC0 for types).
-// We use the MIT license since that covers the bundled code.
+// Some packages need a manual license override (e.g. they ship multiple
+// license files and we must pick the right one for the bundled code).
 //
 // Each entry is pinned to a specific version. If a package is updated,
 // this list must be reviewed and the version updated after verifying
-// that the new version's license still matches. The build will fail
-// if the installed version does not match the pinned version.
+// that the new version's license still matches. The build will fail if
+// the pinned version is no longer installed.
 const LICENSE_OVERRIDES = [
   {
     // type-fest ships two license files (MIT for code, CC0 for types).
     // We use the MIT license since that covers the bundled code.
     packageName: "type-fest",
     version: "5.7.0",
-    licensePath: path.resolve(
-      paths.root_dir,
-      "node_modules/type-fest/license-mit"
-    ),
+    licenseFile: "license-mit",
   },
 ];
 
+// Locate the directory of an installed package matching an exact version.
+//
+// The copy we care about may be hoisted to the top-level node_modules or
+// nested under a dependency when a different version occupies the hoisted
+// slot (e.g. a build-only dependency pulling in an older release). Searching
+// both keeps this check independent of yarn's hoisting decisions, which can
+// shift when unrelated dependencies are added.
+async function findPackageDir(packageName, version) {
+  const candidateDirs = [path.join(NODE_MODULES, packageName)];
+
+  // Collect one level of nesting: node_modules/<dep>/node_modules/<pkg> and
+  // node_modules/@scope/<dep>/node_modules/<pkg>.
+  let topLevel = [];
+  try {
+    topLevel = await readdir(NODE_MODULES, { withFileTypes: true });
+  } catch {
+    // node_modules unreadable — fall back to the hoisted candidate only.
+  }
+  for (const entry of topLevel) {
+    if (!entry.isDirectory() || entry.name === packageName) {
+      continue;
+    }
+    if (entry.name.startsWith("@")) {
+      const scopeDir = path.join(NODE_MODULES, entry.name);
+      // eslint-disable-next-line no-await-in-loop
+      const scoped = await readdir(scopeDir, { withFileTypes: true }).catch(
+        () => []
+      );
+      for (const dep of scoped) {
+        if (dep.isDirectory()) {
+          candidateDirs.push(
+            path.join(scopeDir, dep.name, "node_modules", packageName)
+          );
+        }
+      }
+    } else {
+      candidateDirs.push(
+        path.join(NODE_MODULES, entry.name, "node_modules", packageName)
+      );
+    }
+  }
+
+  for (const dir of candidateDirs) {
+    // eslint-disable-next-line no-await-in-loop
+    const pkg = await readFile(path.join(dir, "package.json"), "utf-8")
+      .then(JSON.parse)
+      .catch(() => null);
+    if (pkg?.version === version) {
+      return dir;
+    }
+  }
+  return null;
+}
+
 gulp.task("gen-licenses", async () => {
   const licenseOverrides = {};
 
-  for (const { packageName, version, licensePath } of LICENSE_OVERRIDES) {
-    const pkgJsonPath = path.resolve(
-      paths.root_dir,
-      `node_modules/${packageName}/package.json`
-    );
+  for (const { packageName, version, licenseFile } of LICENSE_OVERRIDES) {
+    // eslint-disable-next-line no-await-in-loop
+    const packageDir = await findPackageDir(packageName, version);
 
-    let packageJSON;
-    try {
-      // eslint-disable-next-line no-await-in-loop
-      packageJSON = JSON.parse(await readFile(pkgJsonPath, "utf-8"));
-    } catch {
+    if (!packageDir) {
       throw new Error(
-        `package.json for "${packageName}" not found or unreadable at ${pkgJsonPath}`
-      );
-    }
-
-    if (packageJSON.version !== version) {
-      throw new Error(
-        `License override for "${packageName}" is pinned to version ${version}, but found version ${packageJSON.version}. ` +
+        `License override for "${packageName}" is pinned to version ${version}, but that version is not installed. ` +
           `Please verify the new version's license and update the override in build-scripts/gulp/licenses.js.`
       );
     }
 
+    const licensePath = path.join(packageDir, licenseFile);
     try {
       // eslint-disable-next-line no-await-in-loop
       await access(licensePath);

build-scripts/gulp/rspack.js

@@ -14,6 +14,7 @@ import {
   createDemoConfig,
   createGalleryConfig,
   createLandingPageConfig,
+  createE2eTestAppConfig,
 } from "../rspack.cjs";
 
 const bothBuilds = (createConfigFunc, params) => [
@@ -231,3 +232,22 @@ gulp.task("rspack-prod-landing-page", () =>
     })
   )
 );
+
+gulp.task("rspack-dev-server-e2e-test-app", () =>
+  runDevServer({
+    compiler: rspack(
+      createE2eTestAppConfig({ isProdBuild: false, latestBuild: true })
+    ),
+    contentBase: paths.e2eTestApp_output_root,
+    port: 8095,
+  })
+);
+
+gulp.task("rspack-prod-e2e-test-app", () =>
+  prodBuild(
+    bothBuilds(createE2eTestAppConfig, {
+      isProdBuild: true,
+      isStatsBuild: env.isStatsBuild(),
+    })
+  )
+);

build-scripts/paths.cjs

@@ -50,4 +50,15 @@ module.exports = {
   ),
 
   translations_src: path.resolve(__dirname, "../src/translations"),
+
+  e2eTestApp_dir: path.resolve(__dirname, "../test/e2e/app"),
+  e2eTestApp_output_root: path.resolve(__dirname, "../test/e2e/app/dist"),
+  e2eTestApp_output_static: path.resolve(
+    __dirname,
+    "../test/e2e/app/dist/static"
+  ),
+  e2eTestApp_output_latest: path.resolve(
+    __dirname,
+    "../test/e2e/app/dist/frontend_latest"
+  ),
 };

build-scripts/rspack.cjs

@@ -1,4 +1,3 @@
-/* global require, module, __dirname */
 const { existsSync } = require("fs");
 const path = require("path");
 const rspack = require("@rspack/core");
@@ -338,6 +337,11 @@ const createGalleryConfig = ({ isProdBuild, latestBuild }) =>
 const createLandingPageConfig = ({ isProdBuild, latestBuild }) =>
   createRspackConfig(bundle.config.landingPage({ isProdBuild, latestBuild }));
 
+const createE2eTestAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
+  createRspackConfig(
+    bundle.config.e2eTestApp({ isProdBuild, latestBuild, isStatsBuild })
+  );
+
 module.exports = {
   createAppConfig,
   createDemoConfig,
@@ -345,4 +349,5 @@ module.exports = {
   createGalleryConfig,
   createRspackConfig,
   createLandingPageConfig,
+  createE2eTestAppConfig,
 };

demo/src/ha-demo.ts

@@ -8,7 +8,7 @@ import type { HomeAssistant } from "../../src/types";
 import { selectedDemoConfig } from "./configs/demo-configs";
 import { mockAreaRegistry } from "./stubs/area_registry";
 import { mockAuth } from "./stubs/auth";
-import { mockConfigEntries } from "./stubs/config_entries";
+import { demoDevices } from "./stubs/devices";
 import { mockDeviceRegistry } from "./stubs/device_registry";
 import { mockEnergy } from "./stubs/energy";
 import { energyEntities } from "./stubs/entities";
@@ -16,6 +16,7 @@ import { mockEntityRegistry } from "./stubs/entity_registry";
 import { mockEvents } from "./stubs/events";
 import { mockFloorRegistry } from "./stubs/floor_registry";
 import { mockFrontend } from "./stubs/frontend";
+import { mockIntegration } from "./stubs/integration";
 import { mockLabelRegistry } from "./stubs/label_registry";
 import { mockIcons } from "./stubs/icons";
 import { mockHistory } from "./stubs/history";
@@ -29,6 +30,31 @@ import { mockTemplate } from "./stubs/template";
 import { mockTodo } from "./stubs/todo";
 import { mockTranslations } from "./stubs/translations";
 
+// WS command / REST path prefixes whose mocks live in the lazily imported
+// config-panel chunk (see ./stubs/config-panel). Must stay in sync with it.
+const CONFIG_PANEL_COMMANDS = [
+  "cloud/",
+  "validate_config",
+  "config_entries/",
+  "device_automation/",
+  "entity/source",
+  "blueprint/",
+  "homeassistant/expose",
+  "zone/list",
+  "person/list",
+  "network/url",
+  "application_credentials/",
+  "system_health/",
+  "backup/",
+  "automation/config",
+  "script/config",
+  "config/automation/config",
+  "config/script/config",
+  "config/scene/config",
+  "search/related",
+  "tag/list",
+];
+
 @customElement("ha-demo")
 export class HaDemo extends HomeAssistantAppEl {
   protected async _initializeHass() {
@@ -61,9 +87,18 @@ export class HaDemo extends HomeAssistantAppEl {
     mockIcons(hass);
     mockEnergy(hass);
     mockPersistentNotification(hass);
-    mockConfigEntries(hass);
+    // Consumed app-wide via the lazy manifests context, so register eagerly.
+    mockIntegration(hass);
+    // Config panel mocks are code-split: the loader runs (and the chunk is
+    // dynamically imported) the first time one of these config-only WS/REST
+    // commands is requested, i.e. when the config panel is opened.
+    hass.mockLazyLoad(
+      (command) => CONFIG_PANEL_COMMANDS.some((p) => command.startsWith(p)),
+      () =>
+        import("./stubs/config-panel").then((mod) => mod.mockConfigPanel(hass))
+    );
     mockAreaRegistry(hass);
-    mockDeviceRegistry(hass);
+    mockDeviceRegistry(hass, demoDevices);
     mockFloorRegistry(hass);
     mockLabelRegistry(hass);
     mockEntityRegistry(hass, [

demo/src/stubs/application_credentials.ts

@@ -0,0 +1,19 @@
+import type { ApplicationCredential } from "../../../src/data/application_credential";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+const credentials: ApplicationCredential[] = [
+  {
+    id: "mock-credential",
+    domain: "spotify",
+    client_id: "demo-client-id",
+    client_secret: "demo-client-secret",
+    name: "Spotify",
+  },
+];
+
+export const mockApplicationCredentials = (hass: MockHomeAssistant) => {
+  hass.mockWS("application_credentials/list", () => credentials);
+  hass.mockWS("application_credentials/config", () => ({
+    integrations: { spotify: { description_placeholders: {} } },
+  }));
+};

demo/src/stubs/assist.ts

@@ -0,0 +1,21 @@
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockAssist = (hass: MockHomeAssistant) => {
+  // Stub for assist pipeline list — returns empty so developer tools assist
+  // tab loads without errors.
+  hass.mockWS("assist_pipeline/pipeline/list", () => ({
+    pipelines: [],
+    preferred_pipeline: null,
+  }));
+
+  // Stub for assist pipeline run — immediately sends run-end event so
+  // the UI does not hang waiting for a response.
+  hass.mockWS("assist_pipeline/run", (_msg, _hass, onChange) => {
+    if (onChange) {
+      onChange({
+        type: "run-end",
+      });
+    }
+    return null;
+  });
+};

demo/src/stubs/auth.ts

@@ -3,4 +3,7 @@ import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 export const mockAuth = (hass: MockHomeAssistant) => {
   hass.mockWS("config/auth/list", () => []);
   hass.mockWS("auth/refresh_tokens", () => []);
+  hass.mockWS("auth/sign_path", (msg: { path: string }) => ({
+    path: msg.path,
+  }));
 };

demo/src/stubs/automation.ts

@@ -0,0 +1,69 @@
+import type { AutomationConfig } from "../../../src/data/automation";
+import type { ScriptConfig } from "../../../src/data/script";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+const demoAutomationConfig = (entityId: string): AutomationConfig => ({
+  id: entityId.split(".")[1],
+  alias: "Demo automation",
+  description: "An example automation shown in the demo.",
+  triggers: [
+    { trigger: "state", entity_id: "binary_sensor.basement_floor_wet" },
+  ],
+  conditions: [],
+  actions: [
+    {
+      action: "light.turn_on",
+      target: { entity_id: "light.bed_light" },
+    },
+  ],
+  mode: "single",
+});
+
+const demoScriptConfig = (): ScriptConfig => ({
+  alias: "Demo script",
+  description: "An example script shown in the demo.",
+  sequence: [
+    {
+      action: "light.turn_on",
+      target: { entity_id: "light.bed_light" },
+    },
+  ],
+  mode: "single",
+});
+
+export const mockAutomation = (hass: MockHomeAssistant) => {
+  hass.mockWS("automation/config", (msg: { entity_id: string }) => ({
+    config: demoAutomationConfig(msg.entity_id),
+  }));
+  hass.mockWS("script/config", () => ({ config: demoScriptConfig() }));
+
+  hass.mockAPI(/config\/automation\/config\/.+/, () =>
+    demoAutomationConfig("automation.demo")
+  );
+  hass.mockAPI(/config\/script\/config\/.+/, () => demoScriptConfig());
+
+  // Trigger/condition type pickers subscribe for integration-provided
+  // platforms. The demo only uses the built-in ones, so emit empty records.
+  hass.mockWS(
+    "trigger_platforms/subscribe",
+    (
+      _msg,
+      _hass,
+      onChange?: (descriptions: Record<string, unknown>) => void
+    ) => {
+      onChange?.({});
+      return () => undefined;
+    }
+  );
+  hass.mockWS(
+    "condition_platforms/subscribe",
+    (
+      _msg,
+      _hass,
+      onChange?: (descriptions: Record<string, unknown>) => void
+    ) => {
+      onChange?.({});
+      return () => undefined;
+    }
+  );
+};

demo/src/stubs/backup.ts

@@ -0,0 +1,83 @@
+import type {
+  BackupAgentsInfo,
+  BackupConfig,
+  BackupContent,
+  BackupInfo,
+} from "../../../src/data/backup";
+import { BackupScheduleRecurrence } from "../../../src/data/backup";
+import type { ManagerStateEvent } from "../../../src/data/backup_manager";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+const lastBackupDate = new Date(Date.now() - 86400000).toISOString();
+const nextBackupDate = new Date(Date.now() + 86400000).toISOString();
+
+const backups: BackupContent[] = [
+  {
+    backup_id: "demo-backup-1",
+    name: "Automatic backup DEMO",
+    date: lastBackupDate,
+    with_automatic_settings: true,
+    agents: {
+      "backup.local": { size: 1024 * 1024 * 512, protected: true },
+      "cloud.cloud": { size: 1024 * 1024 * 512, protected: true },
+    },
+  },
+];
+
+const backupInfo: BackupInfo = {
+  backups,
+  agent_errors: {},
+  last_attempted_automatic_backup: lastBackupDate,
+  last_completed_automatic_backup: lastBackupDate,
+  last_action_event: { manager_state: "idle" },
+  next_automatic_backup: nextBackupDate,
+  next_automatic_backup_additional: false,
+  state: "idle",
+};
+
+const backupConfig: BackupConfig = {
+  automatic_backups_configured: true,
+  last_attempted_automatic_backup: lastBackupDate,
+  last_completed_automatic_backup: lastBackupDate,
+  next_automatic_backup: nextBackupDate,
+  next_automatic_backup_additional: false,
+  create_backup: {
+    agent_ids: ["backup.local", "cloud.cloud"],
+    include_addons: [],
+    include_all_addons: true,
+    include_database: true,
+    include_folders: [],
+    name: null,
+    password: null,
+  },
+  retention: { copies: 3, days: null },
+  schedule: {
+    recurrence: BackupScheduleRecurrence.DAILY,
+    time: null,
+    days: [],
+  },
+  agents: {
+    "backup.local": { protected: true, retention: null },
+    "cloud.cloud": { protected: true, retention: null },
+  },
+};
+
+const agentsInfo: BackupAgentsInfo = {
+  agents: [
+    { agent_id: "backup.local", name: "This device" },
+    { agent_id: "cloud.cloud", name: "Home Assistant Cloud" },
+  ],
+};
+
+export const mockBackup = (hass: MockHomeAssistant) => {
+  hass.mockWS("backup/info", () => backupInfo);
+  hass.mockWS("backup/config/info", () => ({ config: backupConfig }));
+  hass.mockWS("backup/agents/info", () => agentsInfo);
+  hass.mockWS(
+    "backup/subscribe_events",
+    (_msg, _hass, onChange?: (event: ManagerStateEvent) => void) => {
+      onChange?.({ manager_state: "idle" });
+      return () => undefined;
+    }
+  );
+};

demo/src/stubs/blueprint.ts

@@ -0,0 +1,45 @@
+import type { BlueprintDomain, Blueprints } from "../../../src/data/blueprint";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+const automationBlueprints: Blueprints = {
+  "homeassistant/motion_light.yaml": {
+    metadata: {
+      domain: "automation",
+      name: "Motion-activated Light",
+      description: "Turn on a light when motion is detected.",
+      author: "Home Assistant",
+      source_url:
+        "https://github.com/home-assistant/core/blob/dev/homeassistant/components/automation/blueprints/motion_light.yaml",
+      input: {
+        motion_entity: { name: "Motion Sensor" },
+        light_target: { name: "Light" },
+      },
+    },
+  },
+  "homeassistant/notify_leaving_zone.yaml": {
+    metadata: {
+      domain: "automation",
+      name: "Send notification when leaving a zone",
+      description: "Get a notification when a person leaves a zone.",
+      author: "Home Assistant",
+    },
+  },
+};
+
+const scriptBlueprints: Blueprints = {
+  "homeassistant/confirmable_notification.yaml": {
+    metadata: {
+      domain: "script",
+      name: "Confirmable Notification",
+      description:
+        "A script that sends an actionable notification with a confirmation.",
+      author: "Home Assistant",
+    },
+  },
+};
+
+export const mockBlueprint = (hass: MockHomeAssistant) => {
+  hass.mockWS("blueprint/list", (msg: { domain: BlueprintDomain }) =>
+    msg.domain === "script" ? scriptBlueprints : automationBlueprints
+  );
+};

demo/src/stubs/cloud.ts

@@ -0,0 +1,118 @@
+import type {
+  CloudStatusLoggedIn,
+  SubscriptionInfo,
+} from "../../../src/data/cloud";
+import type { CloudTTSInfo } from "../../../src/data/cloud/tts";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+const emptyFilter = () => ({
+  include_domains: [],
+  include_entities: [],
+  exclude_domains: [],
+  exclude_entities: [],
+});
+
+// A single mutable status object so that preference changes made in the demo
+// are reflected back in the UI.
+const cloudStatus: CloudStatusLoggedIn = {
+  logged_in: true,
+  cloud: "connected",
+  cloud_last_disconnect_reason: null,
+  email: "demo@home-assistant.io",
+  google_registered: true,
+  google_entities: emptyFilter(),
+  google_domains: ["light", "switch", "climate", "cover"],
+  alexa_registered: true,
+  alexa_entities: emptyFilter(),
+  remote_domain: "demo-instance.ui.nabu.casa",
+  remote_connected: true,
+  remote_certificate: {
+    common_name: "demo-instance.ui.nabu.casa",
+    expire_date: "2099-01-01T00:00:00+00:00",
+    fingerprint: "demodemodemodemodemodemodemodemodemodemodemodemodemo",
+    alternative_names: ["demo-instance.ui.nabu.casa"],
+  },
+  remote_certificate_status: "ready",
+  http_use_ssl: false,
+  active_subscription: true,
+  prefs: {
+    google_enabled: true,
+    alexa_enabled: true,
+    remote_enabled: true,
+    remote_allow_remote_enable: true,
+    strict_connection: "disabled",
+    google_secure_devices_pin: undefined,
+    cloudhooks: {},
+    alexa_report_state: true,
+    google_report_state: true,
+    tts_default_voice: ["en-US", "JennyNeural"],
+    cloud_ice_servers_enabled: true,
+  },
+};
+
+const subscription: SubscriptionInfo = {
+  human_description: "Demo subscription, renews automatically",
+  provider: "Nabu Casa, Inc.",
+  plan_renewal_date: 4102444800,
+};
+
+const ttsInfo: CloudTTSInfo = {
+  languages: [
+    ["en-US", "JennyNeural", "Jenny"],
+    ["en-US", "GuyNeural", "Guy"],
+    ["en-GB", "LibbyNeural", "Libby"],
+    ["nl-NL", "ColetteNeural", "Colette"],
+    ["de-DE", "KatjaNeural", "Katja"],
+  ],
+};
+
+export const mockCloud = (hass: MockHomeAssistant) => {
+  hass.mockWS("cloud/status", () => cloudStatus);
+  hass.mockWS("cloud/subscription", () => subscription);
+  hass.mockWS("cloud/tts/info", () => ttsInfo);
+
+  hass.mockWS("cloud/update_prefs", (msg) => {
+    const { type, ...prefs } = msg;
+    cloudStatus.prefs = { ...cloudStatus.prefs, ...prefs };
+    return { success: true };
+  });
+
+  hass.mockWS("cloud/cloudhook/create", (msg) => {
+    const webhook = {
+      webhook_id: msg.webhook_id,
+      cloudhook_id: "demo-cloudhook-id",
+      cloudhook_url: `https://hooks.nabu.casa/demo-${msg.webhook_id}`,
+      managed: false,
+    };
+    cloudStatus.prefs.cloudhooks = {
+      ...cloudStatus.prefs.cloudhooks,
+      [msg.webhook_id]: webhook,
+    };
+    return webhook;
+  });
+
+  hass.mockWS("cloud/cloudhook/delete", (msg) => {
+    const cloudhooks = { ...cloudStatus.prefs.cloudhooks };
+    delete cloudhooks[msg.webhook_id];
+    cloudStatus.prefs.cloudhooks = cloudhooks;
+    return null;
+  });
+
+  hass.mockWS("cloud/remote/connect", () => {
+    cloudStatus.remote_connected = true;
+    return null;
+  });
+  hass.mockWS("cloud/remote/disconnect", () => {
+    cloudStatus.remote_connected = false;
+    return null;
+  });
+
+  hass.mockWS("cloud/remove_data", () => null);
+  hass.mockWS("cloud/google_assistant/entities/update", () => null);
+  hass.mockWS("cloud/alexa/entities", () => []);
+  hass.mockWS("cloud/google_assistant/entities", () => []);
+
+  hass.mockAPI("cloud/logout", () => ({}));
+  hass.mockAPI("cloud/google_actions/sync", () => ({}));
+  hass.mockAPI("cloud/support_package", () => "Demo support package");
+};

demo/src/stubs/config-panel.ts

@@ -0,0 +1,40 @@
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+import { mockApplicationCredentials } from "./application_credentials";
+import { mockAutomation } from "./automation";
+import { mockBackup } from "./backup";
+import { mockBlueprint } from "./blueprint";
+import { mockCloud } from "./cloud";
+import { mockConfig } from "./config";
+import { mockConfigEntries } from "./config_entries";
+import { mockDeviceAutomation } from "./device_automation";
+import { mockEntitySources } from "./entity_sources";
+import { mockExpose } from "./expose";
+import { mockNetwork } from "./network";
+import { mockPerson } from "./person";
+import { mockScene } from "./scene";
+import { mockSearch } from "./search";
+import { mockSystemHealth } from "./system_health";
+import { mockTags } from "./tags";
+import { mockZone } from "./zone";
+
+// Registers every mock that is only needed once the config panel is opened.
+// This module is dynamically imported so its data stays out of the main bundle.
+export const mockConfigPanel = (hass: MockHomeAssistant) => {
+  mockCloud(hass);
+  mockConfig(hass);
+  mockConfigEntries(hass);
+  mockDeviceAutomation(hass);
+  mockEntitySources(hass);
+  mockBlueprint(hass);
+  mockExpose(hass);
+  mockZone(hass);
+  mockPerson(hass);
+  mockNetwork(hass);
+  mockApplicationCredentials(hass);
+  mockSystemHealth(hass);
+  mockBackup(hass);
+  mockAutomation(hass);
+  mockScene(hass);
+  mockSearch(hass);
+  mockTags(hass);
+};

demo/src/stubs/config_entries.ts

@@ -1,26 +1,126 @@
-import type { getConfigEntries } from "../../../src/data/config_entries";
+import type {
+  ConfigEntry,
+  ConfigEntryUpdate,
+} from "../../../src/data/config_entries";
+import type { ConfigFlowInProgressMessage } from "../../../src/data/config_flow";
+import type { IntegrationType } from "../../../src/data/integration";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
-export const mockConfigEntries = (hass: MockHomeAssistant) => {
-  hass.mockWS<typeof getConfigEntries>("config_entries/get", () => [
-    {
-      entry_id: "mock-entry-co2signal",
+const baseEntry = {
+  source: "user",
+  state: "loaded" as const,
+  supports_options: false,
+  supports_remove_device: false,
+  supports_unload: true,
+  supports_reconfigure: true,
+  supported_subentry_types: {},
+  num_subentries: 0,
+  pref_disable_new_entities: false,
+  pref_disable_polling: false,
+  disabled_by: null,
+  reason: null,
+  error_reason_translation_key: null,
+  error_reason_translation_placeholders: null,
+};
+
+// Each entry is tagged with its integration type so we can honor the
+// `type_filter` that the integrations and helpers panels subscribe with.
+export const demoConfigEntries: {
+  entry: ConfigEntry;
+  type: IntegrationType;
+}[] = [
+  {
+    type: "service",
+    entry: {
+      ...baseEntry,
+      entry_id: "co2signal",
       domain: "co2signal",
       title: "Electricity Maps",
-      source: "user",
-      state: "loaded",
-      supports_options: false,
-      supports_remove_device: false,
-      supports_unload: true,
-      supports_reconfigure: true,
-      supported_subentry_types: {},
-      pref_disable_new_entities: false,
-      pref_disable_polling: false,
-      disabled_by: null,
-      reason: null,
-      num_subentries: 0,
-      error_reason_translation_key: null,
-      error_reason_translation_placeholders: null,
     },
-  ]);
+  },
+  {
+    type: "hub",
+    entry: {
+      ...baseEntry,
+      entry_id: "mock-hue",
+      domain: "hue",
+      title: "Philips Hue",
+      source: "zeroconf",
+      supports_options: true,
+      supports_remove_device: true,
+    },
+  },
+  {
+    type: "hub",
+    entry: {
+      ...baseEntry,
+      entry_id: "mock-sonos",
+      domain: "sonos",
+      title: "Sonos",
+      source: "zeroconf",
+      supports_options: true,
+    },
+  },
+  {
+    type: "service",
+    entry: {
+      ...baseEntry,
+      entry_id: "mock-met",
+      domain: "met",
+      title: "Forecast.Home",
+    },
+  },
+  {
+    type: "helper",
+    entry: {
+      ...baseEntry,
+      entry_id: "mock-template-helper",
+      domain: "template",
+      title: "Comfort level",
+    },
+  },
+];
+
+const filterEntries = (filters?: {
+  type_filter?: IntegrationType[];
+  domain?: string;
+}): ConfigEntry[] =>
+  demoConfigEntries
+    .filter(
+      (e) =>
+        (!filters?.type_filter || filters.type_filter.includes(e.type)) &&
+        (!filters?.domain || filters.domain === e.entry.domain)
+    )
+    .map((e) => e.entry);
+
+export const mockConfigEntries = (hass: MockHomeAssistant) => {
+  hass.mockWS(
+    "config_entries/get",
+    (msg: { type_filter?: IntegrationType[]; domain?: string }) =>
+      filterEntries(msg)
+  );
+
+  hass.mockWS(
+    "config_entries/subscribe",
+    (
+      msg: { type_filter?: IntegrationType[]; domain?: string },
+      _hass,
+      onChange?: (updates: ConfigEntryUpdate[]) => void
+    ) => {
+      onChange?.(filterEntries(msg).map((entry) => ({ type: null, entry })));
+      return () => undefined;
+    }
+  );
+
+  hass.mockWS(
+    "config_entries/flow/subscribe",
+    (
+      _msg,
+      _hass,
+      onChange?: (updates: ConfigFlowInProgressMessage[]) => void
+    ) => {
+      onChange?.([]);
+      return () => undefined;
+    }
+  );
 };

demo/src/stubs/device_automation.ts

@@ -0,0 +1,18 @@
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+// The demo's devices don't expose device-specific automations, so report empty
+// lists and no extra capability fields for the device automation pickers.
+export const mockDeviceAutomation = (hass: MockHomeAssistant) => {
+  hass.mockWS("device_automation/trigger/list", () => []);
+  hass.mockWS("device_automation/condition/list", () => []);
+  hass.mockWS("device_automation/action/list", () => []);
+  hass.mockWS("device_automation/trigger/capabilities", () => ({
+    extra_fields: [],
+  }));
+  hass.mockWS("device_automation/condition/capabilities", () => ({
+    extra_fields: [],
+  }));
+  hass.mockWS("device_automation/action/capabilities", () => ({
+    extra_fields: [],
+  }));
+};

demo/src/stubs/devices.ts

@@ -0,0 +1,53 @@
+import type { DeviceRegistryEntry } from "../../../src/data/device/device_registry";
+
+const baseDevice = {
+  config_entries_subentries: {},
+  connections: [] as [string, string][],
+  identifiers: [] as [string, string][],
+  model_id: null,
+  labels: [] as string[],
+  sw_version: null,
+  hw_version: null,
+  serial_number: null,
+  via_device_id: null,
+  area_id: null,
+  name_by_user: null,
+  disabled_by: null,
+  configuration_url: null,
+  created_at: 0,
+  modified_at: 0,
+};
+
+export const demoDevices: DeviceRegistryEntry[] = [
+  {
+    ...baseDevice,
+    id: "co2signal",
+    name: "Electricity Maps",
+    manufacturer: "Electricity Maps",
+    model: "CO2 Signal",
+    config_entries: ["co2signal"],
+    primary_config_entry: "co2signal",
+    entry_type: "service",
+  },
+  {
+    ...baseDevice,
+    id: "hue-bridge",
+    name: "Philips Hue Bridge",
+    manufacturer: "Signify",
+    model: "Hue Bridge (BSB002)",
+    sw_version: "1.50.0",
+    config_entries: ["mock-hue"],
+    primary_config_entry: "mock-hue",
+    entry_type: null,
+  },
+  {
+    ...baseDevice,
+    id: "sonos-living",
+    name: "Living Room",
+    manufacturer: "Sonos",
+    model: "One",
+    config_entries: ["mock-sonos"],
+    primary_config_entry: "mock-sonos",
+    entry_type: null,
+  },
+];

demo/src/stubs/entity_registry.ts

@@ -1,4 +1,7 @@
-import type { EntityRegistryEntry } from "../../../src/data/entity/entity_registry";
+import type {
+  EntityRegistryEntry,
+  ExtEntityRegistryEntry,
+} from "../../../src/data/entity/entity_registry";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockEntityRegistry = (
@@ -6,4 +9,17 @@ export const mockEntityRegistry = (
   data: EntityRegistryEntry[] = []
 ) => {
   hass.mockWS("config/entity_registry/list", () => data);
+  hass.mockWS(
+    "config/entity_registry/get_entries",
+    (msg: { entity_ids: string[] }) => {
+      const result: Record<string, ExtEntityRegistryEntry> = {};
+      for (const entityId of msg.entity_ids) {
+        const entry = data.find((e) => e.entity_id === entityId);
+        if (entry) {
+          result[entityId] = { ...entry, capabilities: {}, aliases: [] };
+        }
+      }
+      return result;
+    }
+  );
 };

demo/src/stubs/entity_sources.ts

@@ -0,0 +1,12 @@
+import type { EntitySources } from "../../../src/data/entity/entity_sources";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockEntitySources = (hass: MockHomeAssistant) => {
+  hass.mockWS(
+    "entity/source",
+    (): EntitySources => ({
+      "sensor.co2_intensity": { domain: "co2signal" },
+      "sensor.grid_fossil_fuel_percentage": { domain: "co2signal" },
+    })
+  );
+};

demo/src/stubs/expose.ts

@@ -0,0 +1,39 @@
+import type { ExposeEntitySettings } from "../../../src/data/expose";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+const exposedEntities: Record<string, ExposeEntitySettings> = {
+  "light.bed_light": {
+    conversation: true,
+    "cloud.alexa": true,
+    "cloud.google_assistant": true,
+  },
+  "light.ceiling_lights": {
+    conversation: true,
+    "cloud.alexa": true,
+    "cloud.google_assistant": false,
+  },
+  "switch.decorative_lights": {
+    conversation: true,
+    "cloud.alexa": false,
+    "cloud.google_assistant": true,
+  },
+  "climate.ecobee": {
+    conversation: true,
+    "cloud.alexa": true,
+    "cloud.google_assistant": true,
+  },
+};
+
+export const mockExpose = (hass: MockHomeAssistant) => {
+  hass.mockWS("homeassistant/expose_entity/list", () => ({
+    exposed_entities: exposedEntities,
+  }));
+  hass.mockWS(
+    "homeassistant/expose_new_entities/get",
+    (msg: { assistant: string }) => ({
+      expose_new: msg.assistant !== "cloud.google_assistant",
+    })
+  );
+  hass.mockWS("homeassistant/expose_entity", () => null);
+  hass.mockWS("homeassistant/expose_new_entities/set", () => null);
+};

demo/src/stubs/frontend.ts

@@ -42,6 +42,7 @@ export const mockFrontend = (hass: MockHomeAssistant) => {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     return () => {};
   });
+  hass.mockWS("frontend/get_system_data", () => ({ value: null }));
   hass.mockWS("repairs/list_issues", () => ({ issues: [] }));
   hass.mockWS("frontend/get_themes", (_msg, currentHass) => currentHass.themes);
 };

demo/src/stubs/integration.ts

@@ -0,0 +1,72 @@
+import type { IntegrationManifest } from "../../../src/data/integration";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+const manifest = (
+  domain: string,
+  name: string,
+  overrides: Partial<IntegrationManifest> = {}
+): IntegrationManifest => ({
+  is_built_in: true,
+  domain,
+  name,
+  config_flow: true,
+  documentation: `https://www.home-assistant.io/integrations/${domain}/`,
+  iot_class: "local_push",
+  ...overrides,
+});
+
+const manifests: IntegrationManifest[] = [
+  manifest("co2signal", "Electricity Maps", { iot_class: "cloud_polling" }),
+  manifest("hue", "Philips Hue"),
+  manifest("sonos", "Sonos"),
+  manifest("met", "Met.no", { iot_class: "cloud_polling" }),
+  // Helpers
+  manifest("template", "Template", { integration_type: "helper" }),
+  manifest("input_boolean", "Toggle", {
+    config_flow: false,
+    integration_type: "helper",
+    iot_class: "local_polling",
+  }),
+  manifest("input_number", "Number", {
+    config_flow: false,
+    integration_type: "helper",
+    iot_class: "local_polling",
+  }),
+  manifest("input_select", "Dropdown", {
+    config_flow: false,
+    integration_type: "helper",
+    iot_class: "local_polling",
+  }),
+  manifest("input_text", "Text", {
+    config_flow: false,
+    integration_type: "helper",
+    iot_class: "local_polling",
+  }),
+  manifest("input_datetime", "Date and/or time", {
+    config_flow: false,
+    integration_type: "helper",
+    iot_class: "local_polling",
+  }),
+  manifest("counter", "Counter", {
+    config_flow: false,
+    integration_type: "helper",
+    iot_class: "local_polling",
+  }),
+  manifest("timer", "Timer", {
+    config_flow: false,
+    integration_type: "helper",
+    iot_class: "local_polling",
+  }),
+  manifest("schedule", "Schedule", {
+    config_flow: false,
+    integration_type: "helper",
+    iot_class: "local_polling",
+  }),
+];
+
+export const mockIntegration = (hass: MockHomeAssistant) => {
+  hass.mockWS("manifest/list", () => manifests);
+  hass.mockWS("manifest/get", (msg: { integration: string }) =>
+    manifests.find((m) => m.domain === msg.integration)
+  );
+};

demo/src/stubs/network.ts

@@ -0,0 +1,13 @@
+import type { NetworkUrls } from "../../../src/data/network";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockNetwork = (hass: MockHomeAssistant) => {
+  hass.mockWS(
+    "network/url",
+    (): NetworkUrls => ({
+      internal: "http://homeassistant.local:8123",
+      external: "https://demo-instance.ui.nabu.casa",
+      cloud: "https://demo-instance.ui.nabu.casa",
+    })
+  );
+};

demo/src/stubs/person.ts

@@ -0,0 +1,20 @@
+import type { Person } from "../../../src/data/person";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+const storage: Person[] = [
+  {
+    id: "demo_user",
+    name: "Demo User",
+    user_id: "abcd",
+    device_trackers: [],
+  },
+  {
+    id: "anne_therese",
+    name: "Anne Therese",
+    device_trackers: [],
+  },
+];
+
+export const mockPerson = (hass: MockHomeAssistant) => {
+  hass.mockWS("person/list", () => ({ storage, config: [] as Person[] }));
+};

demo/src/stubs/scene.ts

@@ -0,0 +1,18 @@
+import type { SceneConfig } from "../../../src/data/scene";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+const demoSceneConfig = (id: string): SceneConfig => ({
+  id,
+  name: "Demo scene",
+  entities: {
+    "light.bed_light": { state: "on" },
+  },
+});
+
+export const mockScene = (hass: MockHomeAssistant) => {
+  hass.mockAPI(/config\/scene\/config\/.+/, (_hass, method, path) => {
+    const id = path.split("/").pop()!;
+    // GET returns the config; POST/DELETE just acknowledge.
+    return method === "GET" ? demoSceneConfig(id) : {};
+  });
+};

demo/src/stubs/search.ts

@@ -0,0 +1,7 @@
+import type { RelatedResult } from "../../../src/data/search";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockSearch = (hass: MockHomeAssistant) => {
+  // The demo has no relationship graph, so report no related items.
+  hass.mockWS("search/related", (): RelatedResult => ({}));
+};

demo/src/stubs/system_health.ts

@@ -0,0 +1,37 @@
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockSystemHealth = (hass: MockHomeAssistant) => {
+  hass.mockWS(
+    "system_health/info",
+    (_msg, _hass, onChange?: (event: any) => void) => {
+      // Defer so the consumer's unsubscribe handle is initialized first
+      // (real WS events arrive asynchronously).
+      setTimeout(() => {
+        onChange?.({
+          type: "initial",
+          data: {
+            homeassistant: {
+              info: {
+                version: "DEMO",
+                installation_type: "Home Assistant OS",
+                dev: false,
+                hassio: true,
+                docker: true,
+                container_arch: "aarch64",
+                user: "root",
+                virtualenv: false,
+                python_version: "3.13.0",
+                os_name: "Linux",
+                os_version: "6.6.0",
+                arch: "aarch64",
+                timezone: "America/Los_Angeles",
+                config_dir: "/config",
+              },
+            },
+          },
+        });
+      });
+      return () => undefined;
+    }
+  );
+};

demo/src/stubs/system_log.ts

@@ -1,5 +1,33 @@
+import type { LoggedError } from "../../../src/data/system_log";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
+const now = Date.now() / 1000;
+
+const logs: LoggedError[] = [
+  {
+    name: "homeassistant.components.demo",
+    message: ["Demo integration failed to update sensor data"],
+    level: "warning",
+    source: ["components/demo/sensor.py", 142],
+    exception: "",
+    count: 2,
+    timestamp: now - 120,
+    first_occurred: now - 3600,
+  },
+  {
+    name: "homeassistant.config_entries",
+    message: ["Config entry for met.no could not be set up"],
+    level: "error",
+    source: ["config_entries.py", 512],
+    exception:
+      'Traceback (most recent call last):\n  File "config_entries.py", line 512',
+    count: 1,
+    timestamp: now - 600,
+    first_occurred: now - 600,
+  },
+];
+
 export const mockSystemLog = (hass: MockHomeAssistant) => {
   hass.mockAPI("error/all", () => []);
+  hass.mockWS("system_log/list", () => logs);
 };

demo/src/stubs/update.ts

@@ -0,0 +1,5 @@
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockUpdate = (hass: MockHomeAssistant) => {
+  hass.mockWS("update/list", () => []);
+};

demo/src/stubs/zone.ts

@@ -0,0 +1,27 @@
+import type { Zone } from "../../../src/data/zone";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+const zones: Zone[] = [
+  {
+    id: "home",
+    name: "Home",
+    icon: "mdi:home",
+    latitude: 52.3731339,
+    longitude: 4.8903147,
+    radius: 100,
+    passive: false,
+  },
+  {
+    id: "work",
+    name: "Work",
+    icon: "mdi:briefcase",
+    latitude: 52.3909184,
+    longitude: 4.8530821,
+    radius: 200,
+    passive: false,
+  },
+];
+
+export const mockZone = (hass: MockHomeAssistant) => {
+  hass.mockWS("zone/list", () => zones);
+};

eslint.config.mjs

@@ -234,6 +234,12 @@ export default tseslint.config(
       globals: globals.serviceworker,
     },
   },
+  {
+    files: ["test/e2e/*.mjs"],
+    languageOptions: {
+      globals: globals.node,
+    },
+  },
   {
     plugins: {
       html,

gallery/AGENTS.md

@@ -62,6 +62,17 @@ Use `sidebar.js` when a page needs a visible section, section header, or determi
 - New categories without a sidebar entry are appended by the generator with their category name as the header.
 - If a listed page does not exist, the generator logs an error during `gather-gallery-pages`.
 
+### Subsections
+
+A section can group its pages under named subsections instead of one flat list. Use this for large categories where related pages should sit together.
+
+- `subsections` is an array of `{ header, pages }`. It is mutually exclusive with a flat `pages` array on the same group.
+- Each subsection `header` is a non-collapsible label rendered inside the section's expansion panel; the section stays the only collapsible level.
+- Listed pages keep their per-subsection order.
+- Any pages found in the category but not listed in a subsection are collected into a generated `Other` subsection, appended alphabetically. The `Other` subsection is omitted when there are no leftovers.
+- A listed page that does not exist still logs an error during `gather-gallery-pages`.
+- Use sentence case for subsection headers and follow the content standards below.
+
 ## Markdown Pages
 
 Use markdown pages for explanations, design guidance, API notes, and copy standards.

gallery/sidebar.js

@@ -10,6 +10,10 @@ import {
   mdiViewDashboard,
 } from "@mdi/js";
 
+// A group may list its pages flat in `pages`, or group them under named
+// `subsections`. The two are mutually exclusive. Listed pages keep their order;
+// any pages found in the category but not listed are appended alphabetically
+// (to a generated "Other" subsection when the group uses subsections).
 export default [
   {
     // This section has no header and so all page links are shown directly in the sidebar
@@ -27,31 +31,162 @@ export default [
     category: "components",
     icon: mdiPuzzle,
     header: "Components",
+    subsections: [
+      {
+        header: "Form and selectors",
+        pages: [
+          "ha-form",
+          "ha-selector",
+          "ha-select-box",
+          "ha-input",
+          "ha-textarea",
+        ],
+      },
+      {
+        header: "Controls and sliders",
+        pages: [
+          "ha-button",
+          "ha-control-button",
+          "ha-progress-button",
+          "ha-switch",
+          "ha-control-switch",
+          "ha-slider",
+          "ha-control-slider",
+          "ha-control-circular-slider",
+          "ha-control-number-buttons",
+          "ha-control-select",
+          "ha-control-select-menu",
+          "ha-hs-color-picker",
+        ],
+      },
+      {
+        header: "Overlays",
+        pages: [
+          "ha-dialog",
+          "ha-dialogs",
+          "ha-adaptive-dialog",
+          "ha-adaptive-popover",
+          "ha-dropdown",
+          "ha-tooltip",
+        ],
+      },
+      {
+        header: "Lists and disclosure",
+        pages: ["ha-list", "ha-expansion-panel", "ha-faded"],
+      },
+      {
+        header: "Feedback and status",
+        pages: ["ha-alert", "ha-spinner", "ha-tip", "ha-bar", "ha-gauge"],
+      },
+      {
+        header: "Labels and text",
+        pages: ["ha-badge", "ha-label-badge", "ha-chips", "ha-marquee-text"],
+      },
+    ],
   },
   {
     category: "lovelace",
     icon: mdiViewDashboard,
     // Label for in the sidebar
     header: "Dashboards",
-    // Specify order of pages. Any pages in the category folder but not listed here will
-    // automatically be added after the pages listed here.
-    pages: ["introduction"],
+    subsections: [
+      {
+        header: "Introduction",
+        pages: ["introduction"],
+      },
+      {
+        header: "Entity cards",
+        pages: [
+          "entities-card",
+          "entity-button-card",
+          "entity-filter-card",
+          "glance-card",
+          "tile-card",
+          "area-card",
+        ],
+      },
+      {
+        header: "Picture cards",
+        pages: [
+          "picture-card",
+          "picture-elements-card",
+          "picture-entity-card",
+          "picture-glance-card",
+        ],
+      },
+      {
+        header: "Domain cards",
+        pages: [
+          "light-card",
+          "thermostat-card",
+          "alarm-panel-card",
+          "gauge-card",
+          "plant-card",
+          "map-card",
+          "media-control-card",
+          "media-player-row",
+        ],
+      },
+      {
+        header: "Layout and utility",
+        pages: [
+          "grid-and-stack-card",
+          "conditional-card",
+          "iframe-card",
+          "markdown-card",
+          "todo-list-card",
+        ],
+      },
+    ],
   },
   {
     category: "more-info",
     icon: mdiInformationOutline,
     header: "More Info dialogs",
+    subsections: [
+      {
+        header: "Climate and water",
+        pages: ["climate", "humidifier", "water-heater", "fan"],
+      },
+      {
+        header: "Covers and access",
+        pages: ["cover", "lock", "lawn-mower", "vacuum"],
+      },
+      {
+        header: "Lighting",
+        pages: ["light", "scene"],
+      },
+      {
+        header: "Media",
+        pages: ["media-player"],
+      },
+      {
+        header: "Inputs and values",
+        pages: ["input-number", "input-text", "number", "timer"],
+      },
+      {
+        header: "System",
+        pages: ["update"],
+      },
+    ],
   },
   {
     category: "automation",
     icon: mdiRobot,
     header: "Automation",
-    pages: [
-      "editor-trigger",
-      "editor-condition",
-      "editor-action",
-      "trace",
-      "trace-timeline",
+    subsections: [
+      {
+        header: "Editors",
+        pages: ["editor-trigger", "editor-condition", "editor-action"],
+      },
+      {
+        header: "Descriptions",
+        pages: ["describe-trigger", "describe-condition", "describe-action"],
+      },
+      {
+        header: "Traces",
+        pages: ["trace", "trace-timeline"],
+      },
     ],
   },
   {
@@ -64,6 +199,26 @@ export default [
     category: "date-time",
     icon: mdiCalendarClock,
     header: "Date and Time",
+    subsections: [
+      {
+        header: "Date",
+        pages: ["date"],
+      },
+      {
+        header: "Time",
+        pages: ["time", "time-seconds", "time-weekday"],
+      },
+      {
+        header: "Combined",
+        pages: [
+          "date-time",
+          "date-time-numeric",
+          "date-time-seconds",
+          "date-time-short",
+          "date-time-short-year",
+        ],
+      },
+    ],
   },
   {
     category: "misc",

gallery/src/ha-gallery.ts

@@ -40,15 +40,26 @@ interface GalleryPage {
   demo?: unknown;
 }
 
+interface GallerySidebarSubsection {
+  header: string;
+  pages: string[];
+}
+
 interface GallerySidebarGroup {
   category: string;
   header?: string;
   icon?: string;
-  pages: string[];
+  pages?: string[];
+  subsections?: GallerySidebarSubsection[];
 }
 
+const groupPages = (group: GallerySidebarGroup): string[] =>
+  group.subsections
+    ? group.subsections.flatMap((subsection) => subsection.pages)
+    : (group.pages ?? []);
+
 const GALLERY_SIDEBAR = SIDEBAR as GallerySidebarGroup[];
-const DEFAULT_PAGE = `${GALLERY_SIDEBAR[0].category}/${GALLERY_SIDEBAR[0].pages[0]}`;
+const DEFAULT_PAGE = `${GALLERY_SIDEBAR[0].category}/${groupPages(GALLERY_SIDEBAR[0])[0]}`;
 
 const mql = matchMedia("(prefers-color-scheme: dark)");
 
@@ -284,26 +295,15 @@ class HaGallery extends LitElement {
     const sidebar: unknown[] = [];
 
     for (const group of GALLERY_SIDEBAR) {
-      const links: unknown[] = [];
-      const expanded = group.pages.some(
+      const expanded = groupPages(group).some(
         (page) => this._page === `${group.category}/${page}`
       );
 
-      for (const page of group.pages) {
-        const key = `${group.category}/${page}`;
-        if (!(key in PAGES)) {
-          console.error("Undefined page referenced in sidebar.js:", key);
-          continue;
-        }
-        links.push(
-          this._renderPageLink(
-            key,
-            PAGES[key].metadata.title || page,
-            group.header ? undefined : "main-navigation",
-            group.header ? undefined : group.icon
+      const content = group.subsections
+        ? group.subsections.map((subsection) =>
+            this._renderSidebarSubsection(group, subsection)
           )
-        );
-      }
+        : this._renderPageLinks(group, group.pages ?? []);
 
       sidebar.push(
         group.header
@@ -321,16 +321,46 @@ class HaGallery extends LitElement {
                       .path=${group.icon}
                     ></ha-svg-icon>`
                   : nothing}
-                ${links}
+                ${content}
               </ha-expansion-panel>
             `
-          : links
+          : content
       );
     }
 
     return sidebar;
   }
 
+  private _renderSidebarSubsection(
+    group: GallerySidebarGroup,
+    subsection: GallerySidebarSubsection
+  ) {
+    return html`
+      <div class="gallery-sidebar-subheader">${subsection.header}</div>
+      ${this._renderPageLinks(group, subsection.pages)}
+    `;
+  }
+
+  private _renderPageLinks(group: GallerySidebarGroup, pages: string[]) {
+    const links: unknown[] = [];
+    for (const page of pages) {
+      const key = `${group.category}/${page}`;
+      if (!(key in PAGES)) {
+        console.error("Undefined page referenced in sidebar.js:", key);
+        continue;
+      }
+      links.push(
+        this._renderPageLink(
+          key,
+          PAGES[key].metadata.title || page,
+          group.header ? undefined : "main-navigation",
+          group.header ? undefined : group.icon
+        )
+      );
+    }
+    return links;
+  }
+
   private _renderPageLink(
     page: string,
     title: string,
@@ -585,6 +615,16 @@ class HaGallery extends LitElement {
         width: var(--ha-sidebar-expanded-section-item-width, 248px);
       }
 
+      .gallery-sidebar-subheader {
+        margin: var(--ha-space-2) var(--ha-space-4) var(--ha-space-1);
+        color: var(--secondary-text-color);
+        font-size: var(--ha-font-size-s);
+        font-weight: var(--ha-font-weight-medium);
+        line-height: var(--ha-line-height-condensed);
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+      }
+
       .gallery-sidebar-icon,
       .gallery-nav-item ha-svg-icon[slot="start"] {
         color: var(--sidebar-icon-color);

gallery/src/pages/concepts/home.markdown

@@ -4,21 +4,30 @@ title: Home
 
 # Welcome to Home Assistant Design
 
-This portal aims to aid designers and developers on improving the Home Assistant interface. It consists of working code, resources and guidelines.
+This is the design gallery for the Home Assistant frontend: a living reference of working components, dashboard cards, and brand and copy guidance. Every page runs outside a Home Assistant instance, so you can explore the interface, try components in isolation, and review changes against a consistent baseline.
 
-## Home Assistant interface
+## Browse the gallery
 
-The Home Assistant frontend allows users to browse and control the state of their home, manage their automations and configure integrations. The frontend is designed as a mobile-first experience. It is a progressive web application and offers an app-like experience to our users. The Home Assistant frontend needs to be fast. But it also needs to work on a wide range of old devices.
+- [Brand](#brand/logo): the logo, personality, and the story behind the Open Home.
+- [Components](#components/ha-button): the `ha-*` component library with live demos and API notes.
+- [Dashboards](#lovelace/introduction): Lovelace cards rendered from real card configuration.
+- [More Info dialogs](#more-info/light): the more-info experience for each entity type.
+- [Automation](#automation/editor-trigger): trigger, condition, and action editors, plus trace views.
+- [Users](#user-test/user-types): the audiences we design for.
+- [Date and time](#date-time/date): date and time formatting examples.
+- [Miscellaneous](#misc/entity-state): smaller utilities and patterns, plus how to edit this gallery.
 
-### Material Design
+## Testing and playground
 
-The Home Assistant interface is based on Material Design. It's a design system created by Google to quickly build high-quality digital experiences. Components and guidelines that are custom made for Home Assistant are documented on this portal. For all other components check <a href="https://material.io" rel="noopener noreferrer" target="_blank">material.io</a>.
+Every page runs against fake state, so you can interact with components safely and reproducibly. Treat the demo pages as a playground: change a value, resize the window, or switch the layout to right-to-left to check spacing and direction. Use the gallery to reproduce a UI state in isolation before debugging it in a full Home Assistant setup.
+
+Open **Settings** from the gear icon in the sidebar to switch between light and dark themes or preview the interface in right-to-left.
 
 ## Designers
 
-We want to make it as easy for designers to contribute as it is for developers. There’s a lot a designer can contribute to:
+We want to make it as easy for designers to contribute as it is for developers. There's a lot a designer can contribute to:
 
-- Meet us at <a href="https://www.home-assistant.io/join-chat-design" rel="noopener noreferrer" target="_blank">Discord #designers channel</a>. If you can't see the channel, make sure you set the correct role in Channels & Roles.
+- Meet us in the <a href="https://www.home-assistant.io/join-chat-design" rel="noopener noreferrer" target="_blank">Discord #designers channel</a>. If you can't see the channel, make sure you set the correct role in Channels & Roles.
 - Start designing with our <a href="https://www.figma.com/design/2WGI8IDGyxINjSV6NRvPur/Home-Assistant-Design-Kit" rel="noopener noreferrer" target="_blank">Figma DesignKit</a>.
 - Find the latest UX <a href="https://github.com/home-assistant/frontend/discussions?discussions_q=label%3Aux" rel="noopener noreferrer" target="_blank">discussions</a> and <a href="https://github.com/home-assistant/frontend/labels/ux" rel="noopener noreferrer" target="_blank">issues</a> on GitHub. Everyone can start a new issue or discussion!
 

gallery/src/pages/misc/entity-state.ts

@@ -372,7 +372,6 @@ export class DemoEntityState extends LitElement {
               hass.localize,
               entry.stateObj,
               hass.locale,
-              [], // numericDeviceClasses
               hass.config,
               hass.entities
             )}`,

package.json

@@ -21,7 +21,17 @@
     "prepack": "pinst --disable",
     "postpack": "pinst --enable",
     "test": "vitest run --config test/vitest.config.ts",
-    "test:coverage": "vitest run --config test/vitest.config.ts --coverage"
+    "test:bench": "vitest bench --run --config test/vitest.bench.config.ts",
+    "test:coverage": "vitest run --config test/vitest.config.ts --coverage",
+    "test:e2e": "node test/e2e/run-suites.mjs demo app gallery",
+    "test:e2e:browserstack": "node test/e2e/run-suites.mjs demo:browserstack app:browserstack gallery:browserstack",
+    "test:e2e:show-report": "yarn playwright show-report test/e2e/reports/combined",
+    "test:e2e:demo": "playwright test --config test/e2e/playwright.demo.config.ts",
+    "test:e2e:demo:browserstack": "browserstack-node-sdk playwright test --config test/e2e/playwright.demo.config.ts",
+    "test:e2e:app": "playwright test --config test/e2e/playwright.app.config.ts",
+    "test:e2e:app:browserstack": "browserstack-node-sdk playwright test --config test/e2e/playwright.app.config.ts",
+    "test:e2e:gallery": "playwright test --config test/e2e/playwright.gallery.config.ts",
+    "test:e2e:gallery:browserstack": "browserstack-node-sdk playwright test --config test/e2e/playwright.gallery.config.ts"
   },
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
@@ -40,7 +50,7 @@
     "@codemirror/view": "6.43.1",
     "@date-fns/tz": "1.5.0",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "7.4.8",
+    "@formatjs/intl-datetimeformat": "7.4.9",
     "@formatjs/intl-displaynames": "7.3.10",
     "@formatjs/intl-durationformat": "0.10.14",
     "@formatjs/intl-getcanonicallocales": "3.2.10",
@@ -136,9 +146,11 @@
     "@octokit/auth-oauth-device": "8.0.3",
     "@octokit/plugin-retry": "8.1.0",
     "@octokit/rest": "22.0.1",
+    "@playwright/test": "1.60.0",
     "@rsdoctor/rspack-plugin": "1.5.13",
     "@rspack/core": "2.0.8",
     "@rspack/dev-server": "2.0.3",
+    "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.26",
     "@types/chromecast-caf-sender": "1.0.11",
     "@types/color-name": "2.0.0",
@@ -157,8 +169,9 @@
     "babel-loader": "10.1.1",
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.4",
+    "browserstack-node-sdk": "1.53.2",
     "del": "8.0.1",
-    "eslint": "10.4.1",
+    "eslint": "10.5.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-webpack": "0.13.11",
     "eslint-plugin-import-x": "4.16.2",

script/gen_numeric_device_classes

@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+
+# Safe bash settings
+# -e            Exit on command fail
+# -u            Exit on unset variable
+# -o pipefail   Exit if piped command has error code
+set -eu -o pipefail
+
+cd "$(dirname "$0")/.."
+
+./node_modules/.bin/gulp gen-numeric-device-classes

src/common/dom/load_resource.ts

@@ -1,7 +1,7 @@
 // Load a resource and get a promise when loading done.
 // From: https://davidwalsh.name/javascript-loader
 
-const _load = (tag: "link" | "script" | "img", url: string, type?: "module") =>
+const _load = (tag: "link" | "script", url: string, type?: "module") =>
   // This promise will be used by Promise.all to determine success or failure
   new Promise((resolve, reject) => {
     const element = document.createElement(tag);
@@ -33,5 +33,4 @@ const _load = (tag: "link" | "script" | "img", url: string, type?: "module") =>
   });
 export const loadCSS = (url: string) => _load("link", url);
 export const loadJS = (url: string) => _load("script", url);
-export const loadImg = (url: string) => _load("img", url);
 export const loadModule = (url: string) => _load("script", url, "module");

src/common/dom/scroll-to-target.ts

@@ -1,41 +0,0 @@
-/**
- * Scroll to a specific y coordinate.
- *
- * Copied from paper-scroll-header-panel.
- *
- * @method scroll
- * @param {number} top The coordinate to scroll to, along the y-axis.
- * @param {boolean} smooth true if the scroll position should be smoothly adjusted.
- */
-export default function scrollToTarget(element, target) {
-  // the scroll event will trigger _updateScrollState directly,
-  // However, _updateScrollState relies on the previous `scrollTop` to update the states.
-  // Calling _updateScrollState will ensure that the states are synced correctly.
-  const top = 0;
-  const scroller = target;
-  const easingFn = function easeOutQuad(t, b, c, d) {
-    t /= d;
-    return -c * t * (t - 2) + b;
-  };
-  const animationId = Math.random();
-  const duration = 200;
-  const startTime = Date.now();
-  const currentScrollTop = scroller.scrollTop;
-  const deltaScrollTop = top - currentScrollTop;
-  element._currentAnimationId = animationId;
-  (function updateFrame() {
-    const now = Date.now();
-    const elapsedTime = now - startTime;
-    if (elapsedTime > duration) {
-      scroller.scrollTop = top;
-    } else if (element._currentAnimationId === animationId) {
-      scroller.scrollTop = easingFn(
-        elapsedTime,
-        currentScrollTop,
-        deltaScrollTop,
-        duration
-      );
-      requestAnimationFrame(updateFrame.bind(element));
-    }
-  }).call(element);
-}

src/common/dom/setup-leaflet-map.ts

@@ -3,8 +3,6 @@ import type { Map, TileLayer } from "leaflet";
 // Sets up a Leaflet map on the provided DOM element
 // eslint-disable-next-line @typescript-eslint/consistent-type-imports
 export type LeafletModuleType = typeof import("leaflet");
-// eslint-disable-next-line @typescript-eslint/consistent-type-imports
-export type LeafletDrawModuleType = typeof import("leaflet-draw");
 
 export const setupLeafletMap = async (
   mapElement: HTMLElement,
@@ -45,17 +43,6 @@ export const setupLeafletMap = async (
   return [map, Leaflet, tileLayer];
 };
 
-export const replaceTileLayer = (
-  leaflet: LeafletModuleType,
-  map: Map,
-  tileLayer: TileLayer
-): TileLayer => {
-  map.removeLayer(tileLayer);
-  tileLayer = createTileLayer(leaflet);
-  tileLayer.addTo(map);
-  return tileLayer;
-};
-
 const createTileLayer = (leaflet: LeafletModuleType): TileLayer =>
   leaflet.tileLayer(
     `https://basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}${

src/common/empty_image_base64.ts

@@ -1,3 +0,0 @@
-/** An empty image which can be set as src of an img element. */
-export const emptyImageBase64 =
-  "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";

src/common/entity/compute_state_display.ts

@@ -17,7 +17,10 @@ import {
 import { blankBeforeUnit } from "../translations/blank_before_unit";
 import type { LocalizeFunc } from "../translations/localize";
 import { computeDomain } from "./compute_domain";
-import { SENSOR_TIMESTAMP_DEVICE_CLASSES } from "../../data/sensor";
+import {
+  isNumericSensorDeviceClass,
+  SENSOR_TIMESTAMP_DEVICE_CLASSES,
+} from "../../data/sensor";
 
 // Domains whose state is a timezone-agnostic date and/or time string.
 const DATE_TIME_DOMAINS = new Set(["date", "input_datetime", "time"]);
@@ -53,11 +56,12 @@ const MONETARY_TYPE_MAP: Record<string, ValuePart["type"]> = {
   currency: "unit",
 };
 
+const NUMERICAL_DOMAINS = ["counter", "input_number", "number"];
+
 export const computeStateDisplay = (
   localize: LocalizeFunc,
   stateObj: HassEntity,
   locale: FrontendLocaleData,
-  sensorNumericDeviceClasses: string[],
   config: HassConfig,
   entities: HomeAssistant["entities"],
   state?: string
@@ -68,7 +72,6 @@ export const computeStateDisplay = (
   return computeStateDisplayFromEntityAttributes(
     localize,
     locale,
-    sensorNumericDeviceClasses,
     config,
     entity,
     stateObj.entity_id,
@@ -80,7 +83,6 @@ export const computeStateDisplay = (
 export const computeStateDisplayFromEntityAttributes = (
   localize: LocalizeFunc,
   locale: FrontendLocaleData,
-  sensorNumericDeviceClasses: string[],
   config: HassConfig,
   entity: EntityRegistryDisplayEntry | undefined,
   entityId: string,
@@ -90,7 +92,6 @@ export const computeStateDisplayFromEntityAttributes = (
   const parts = computeStateToPartsFromEntityAttributes(
     localize,
     locale,
-    sensorNumericDeviceClasses,
     config,
     entity,
     entityId,
@@ -103,7 +104,6 @@ export const computeStateDisplayFromEntityAttributes = (
 const computeStateToPartsFromEntityAttributes = (
   localize: LocalizeFunc,
   locale: FrontendLocaleData,
-  sensorNumericDeviceClasses: string[],
   config: HassConfig,
   entity: EntityRegistryDisplayEntry | undefined,
   entityId: string,
@@ -120,15 +120,15 @@ const computeStateToPartsFromEntityAttributes = (
   }
 
   const domain = computeDomain(entityId);
-  const is_number_domain =
-    domain === "counter" || domain === "number" || domain === "input_number";
-  // Entities with a `unit_of_measurement` or `state_class` are numeric values and should use `formatNumber`
+  const isNumberDomain = NUMERICAL_DOMAINS.includes(domain);
+  const isSensorDomain = domain === "sensor";
+
+  // Numeric values (by attributes, number domain,
+  // or numeric sensor device class) use formatNumber.
   if (
-    isNumericFromAttributes(
-      attributes,
-      domain === "sensor" ? sensorNumericDeviceClasses : []
-    ) ||
-    is_number_domain
+    isNumericFromAttributes(attributes) ||
+    isNumberDomain ||
+    (isSensorDomain && isNumericSensorDeviceClass(attributes.device_class))
   ) {
     // state is duration
     if (
@@ -314,7 +314,6 @@ export const computeStateToParts = (
   localize: LocalizeFunc,
   stateObj: HassEntity,
   locale: FrontendLocaleData,
-  sensorNumericDeviceClasses: string[],
   config: HassConfig,
   entities: HomeAssistant["entities"],
   state?: string
@@ -325,7 +324,6 @@ export const computeStateToParts = (
   return computeStateToPartsFromEntityAttributes(
     localize,
     locale,
-    sensorNumericDeviceClasses,
     config,
     entity,
     stateObj.entity_id,

src/common/number/format_number.ts

@@ -14,12 +14,8 @@ export const isNumericState = (stateObj: HassEntity): boolean =>
   isNumericFromAttributes(stateObj.attributes);
 
 export const isNumericFromAttributes = (
-  attributes: HassEntityAttributeBase,
-  numericDeviceClasses?: string[]
-): boolean =>
-  !!attributes.unit_of_measurement ||
-  !!attributes.state_class ||
-  (numericDeviceClasses || []).includes(attributes.device_class || "");
+  attributes: HassEntityAttributeBase
+): boolean => !!attributes.unit_of_measurement || !!attributes.state_class;
 
 export const numberFormatToLocale = (
   localeOptions: FrontendLocaleData

src/common/translations/entity-state.ts

@@ -46,8 +46,7 @@ export const computeFormatFunctions = async (
   entities: HomeAssistant["entities"],
   devices: HomeAssistant["devices"],
   areas: HomeAssistant["areas"],
-  floors: HomeAssistant["floors"],
-  sensorNumericDeviceClasses: string[]
+  floors: HomeAssistant["floors"]
 ): Promise<{
   formatEntityState: FormatEntityStateFunc;
   formatEntityStateToParts: FormatEntityStateToPartsFunc;
@@ -66,25 +65,9 @@ export const computeFormatFunctions = async (
 
   return {
     formatEntityState: (stateObj, state) =>
-      computeStateDisplay(
-        localize,
-        stateObj,
-        locale,
-        sensorNumericDeviceClasses,
-        config,
-        entities,
-        state
-      ),
+      computeStateDisplay(localize, stateObj, locale, config, entities, state),
     formatEntityStateToParts: (stateObj, state) =>
-      computeStateToParts(
-        localize,
-        stateObj,
-        locale,
-        sensorNumericDeviceClasses,
-        config,
-        entities,
-        state
-      ),
+      computeStateToParts(localize, stateObj, locale, config, entities, state),
     formatEntityAttributeValue: (stateObj, attribute, value) =>
       computeAttributeValueDisplay(
         localize,

src/common/util/preserve-unchanged-record.ts

@@ -0,0 +1,29 @@
+/**
+ * Records like the entity, device, area and floor registries are re-fetched and
+ * rebuilt in full on every registry-updated event, producing brand-new objects
+ * for every item even when nothing relevant changed. That gives every item a new
+ * reference, so all consumers needlessly re-render.
+ *
+ * Returns `next` with each item replaced by the equal `previous` item, so
+ * unchanged items keep their object identity, and returns the `previous` record
+ * untouched when nothing changed at all (so the update can be skipped entirely).
+ */
+export const preserveUnchangedRecord = <T>(
+  previous: Record<string, T> | undefined,
+  next: Record<string, T>,
+  equal: (a: T, b: T) => boolean
+): Record<string, T> => {
+  if (!previous) {
+    return next;
+  }
+  let changed = Object.keys(previous).length !== Object.keys(next).length;
+  for (const key of Object.keys(next)) {
+    const previousItem = previous[key];
+    if (previousItem !== undefined && equal(previousItem, next[key])) {
+      next[key] = previousItem;
+    } else {
+      changed = true;
+    }
+  }
+  return changed ? next : previous;
+};

src/common/util/responsive-columns.ts

@@ -0,0 +1,30 @@
+import { ResizeController } from "@lit-labs/observers/resize-controller";
+import type { ReactiveControllerHost } from "lit";
+import { clamp } from "../number/clamp";
+
+// Count columns from the container's real width (not the viewport) so a
+// docked sidebar is accounted for, like the dashboard sections view.
+const MIN_COLUMN_WIDTH = 320;
+const DEFAULT_COLUMN_GAP = 16;
+
+const parsePx = (value: string) => parseInt(value, 10) || 0;
+
+export const createColumnsController = (
+  host: ReactiveControllerHost & Element,
+  maxColumns: number
+) =>
+  new ResizeController<number>(host, {
+    target: null,
+    skipInitial: true,
+    callback: (entries) => {
+      const entry = entries[0];
+      if (!entry) {
+        return maxColumns;
+      }
+      const width = entry.contentRect.width;
+      const gap =
+        parsePx(getComputedStyle(entry.target).columnGap) || DEFAULT_COLUMN_GAP;
+      const columns = Math.floor((width + gap) / (MIN_COLUMN_WIDTH + gap));
+      return clamp(columns, 1, maxColumns);
+    },
+  });

src/common/util/time-cache-function-promise.ts

@@ -16,14 +16,12 @@ interface CacheResult<T> {
  * @param args extra arguments to pass to the function to fetch the data
  * @returns
  */
-export const timeCachePromiseFunc = async <T>(
+export const timeCachePromiseFunc = async <T, H = HomeAssistant>(
   cacheKey: string,
   cacheTime: number,
-  func: (hass: HomeAssistant, ...args: any[]) => Promise<T>,
-  generateCacheKey:
-    | ((hass: HomeAssistant, lastResult: T) => unknown)
-    | undefined,
-  hass: HomeAssistant,
+  func: (hass: H, ...args: any[]) => Promise<T>,
+  generateCacheKey: ((hass: H, lastResult: T) => unknown) | undefined,
+  hass: H,
   ...args: any[]
 ): Promise<T> => {
   const anyHass = hass as any;

src/components/chart/ha-chart-base.ts

@@ -394,6 +394,18 @@ export class HaChartBase extends LitElement {
       return nothing;
     }
     const datasets = ensureArray(this.data!);
+    // Index datasets by id and name so each legend item is an O(1) lookup
+    // instead of scanning every dataset twice. Charts can have many series.
+    const datasetById = new Map<unknown, (typeof datasets)[number]>();
+    const datasetByName = new Map<unknown, (typeof datasets)[number]>();
+    for (const dataset of datasets) {
+      if (dataset.id !== undefined && !datasetById.has(dataset.id)) {
+        datasetById.set(dataset.id, dataset);
+      }
+      if (dataset.name !== undefined && !datasetByName.has(dataset.name)) {
+        datasetByName.set(dataset.name, dataset);
+      }
+    }
 
     const isMobile = window.matchMedia(
       "all and (max-width: 450px), all and (max-height: 500px)"
@@ -413,10 +425,10 @@ export class HaChartBase extends LitElement {
             return nothing;
           }
           let itemStyle: Record<string, any> = {};
-          let id = "";
           let value = "";
           let noLabelClick = false;
           const name = typeof item === "string" ? item : (item.name ?? "");
+          let id: string;
           if (typeof item === "string") {
             id = item;
           } else {
@@ -426,9 +438,7 @@ export class HaChartBase extends LitElement {
             noLabelClick = item.noLabelClick ?? false;
           }
           const labelClickable = this.clickLabelForMoreInfo && !noLabelClick;
-          const dataset =
-            datasets.find((d) => d.id === id) ??
-            datasets.find((d) => d.name === id);
+          const dataset = datasetById.get(id) ?? datasetByName.get(id);
           itemStyle = {
             color: dataset?.color as string,
             ...(dataset?.itemStyle as { borderColor?: string }),

src/components/chart/state-history-chart-line-data.ts

@@ -0,0 +1,481 @@
+import type { LineSeriesOption } from "echarts/charts";
+import type { VisualMapComponentOption } from "echarts/components";
+import { getGraphColorByIndex } from "../../common/color/colors";
+import { CLIMATE_HVAC_ACTION_TO_MODE } from "../../data/climate";
+import type { LineChartEntity, LineChartState } from "../../data/history";
+import type { HomeAssistant } from "../../types";
+import { computeYAxisFractionDigits } from "./y-axis-fraction-digits";
+
+const safeParseFloat = (value) => {
+  const parsed = parseFloat(value);
+  return isFinite(parsed) ? parsed : null;
+};
+
+export const CLIMATE_MODE_CONFIGS = [
+  { mode: "heat", action: "heating", cssVar: "--state-climate-heat-color" },
+  { mode: "cool", action: "cooling", cssVar: "--state-climate-cool-color" },
+  { mode: "dry", action: "drying", cssVar: "--state-climate-dry-color" },
+  { mode: "fan_only", action: "fan", cssVar: "--state-climate-fan_only-color" },
+] as const;
+
+export interface StateHistoryChartLineDataParams {
+  hass: HomeAssistant;
+  data: LineChartEntity[];
+  endTime: Date;
+  names?: Record<string, string>;
+  colors?: Record<string, string | undefined>;
+  showNames: boolean;
+  computedStyles: CSSStyleDeclaration;
+  now: Date;
+}
+
+export interface StateHistoryChartLineData {
+  datasets: LineSeriesOption[];
+  entityIds: string[];
+  datasetToDataIndex: number[];
+  visualMap?: VisualMapComponentOption[];
+  yAxisFractionDigits: number;
+}
+
+/**
+ * Transforms processed history (`LineChartEntity[]`) into ECharts series for
+ * `state-history-chart-line`. Pure data processing: all environment inputs
+ * (current time, theme style, hass) are injected so the transform is
+ * deterministic and benchmarkable.
+ */
+export function generateStateHistoryChartLineData(
+  params: StateHistoryChartLineDataParams
+): StateHistoryChartLineData | undefined {
+  const { hass, computedStyles, endTime } = params;
+  // Work with numeric epoch timestamps (ms) instead of Date objects below.
+  // Charts can hold a huge number of points, and allocating a Date per point
+  // is needless GC pressure; the "time" axis consumes numbers natively.
+  const endTimeMs = endTime.getTime();
+
+  let colorIndex = 0;
+  const entityStates = params.data;
+  const datasets: LineSeriesOption[] = [];
+  const entityIds: string[] = [];
+  const datasetToDataIndex: number[] = [];
+  let yMin = Infinity;
+  let yMax = -Infinity;
+  const trackY = (v: number | null | undefined) => {
+    if (typeof v === "number" && Number.isFinite(v)) {
+      if (v < yMin) yMin = v;
+      if (v > yMax) yMax = v;
+    }
+  };
+  if (entityStates.length === 0) {
+    return undefined;
+  }
+
+  const names = params.names || {};
+  const colors = params.colors || {};
+  entityStates.forEach((states, dataIdx) => {
+    const domain = states.domain;
+    const name = names[states.entity_id] || states.name;
+    const color = colors[states.entity_id];
+    // array containing [value1, value2, etc]
+    let prevValues: any[] | null = null;
+
+    const data: LineSeriesOption[] = [];
+
+    const pushData = (timestamp: number, datavalues: any[] | null) => {
+      if (!datavalues) return;
+      if (timestamp > endTimeMs) {
+        // Drop data points that are after the requested endTime. This could happen if
+        // endTime is "now" and client time is not in sync with server time.
+        return;
+      }
+      data.forEach((d, i) => {
+        if (datavalues[i] === null && prevValues && prevValues[i] !== null) {
+          // null data values show up as gaps in the chart.
+          // If the current value for the dataset is null and the previous
+          // value of the data set is not null, then add an 'end' point
+          // to the chart for the previous value. Otherwise the gap will
+          // be too big. It will go from the start of the previous data
+          // value until the start of the next data value.
+          d.data!.push([timestamp, prevValues[i]]);
+        }
+        d.data!.push([timestamp, datavalues[i]]);
+        trackY(datavalues[i]);
+      });
+      prevValues = datavalues;
+    };
+
+    const addDataSet = (
+      id: string,
+      nameY: string,
+      clr?: string,
+      fill = false
+    ) => {
+      if (!clr) {
+        clr = getGraphColorByIndex(colorIndex, computedStyles);
+        colorIndex++;
+      }
+      data.push({
+        id,
+        data: [],
+        type: "line",
+        cursor: "default",
+        name: nameY,
+        color: clr,
+        symbol: "circle",
+        symbolSize: 1,
+        step: "end",
+        sampling: "minmax",
+        animationDurationUpdate: 0,
+        lineStyle: {
+          width: fill ? 0 : 1.5,
+        },
+        areaStyle: fill
+          ? {
+              color: clr + "7F",
+            }
+          : undefined,
+        tooltip: {
+          show: !fill,
+        },
+      });
+      entityIds.push(states.entity_id);
+      datasetToDataIndex.push(dataIdx);
+    };
+
+    if (
+      domain === "thermostat" ||
+      domain === "climate" ||
+      domain === "water_heater"
+    ) {
+      const hasHvacAction = states.states.some(
+        (entityState) => entityState.attributes?.hvac_action
+      );
+
+      const activeModes = CLIMATE_MODE_CONFIGS.map(
+        ({ mode, action, cssVar }) => {
+          const isActive =
+            domain === "climate" && hasHvacAction
+              ? (entityState: LineChartState) =>
+                  CLIMATE_HVAC_ACTION_TO_MODE[
+                    entityState.attributes?.hvac_action
+                  ] === mode
+              : (entityState: LineChartState) => entityState.state === mode;
+          return { action, cssVar, isActive };
+        }
+      ).filter(({ isActive }) => states.states.some(isActive));
+      // We differentiate between thermostats that have a target temperature
+      // range versus ones that have just a target temperature
+
+      // Using step chart by step-before so manually interpolation not needed.
+      const hasTargetRange = states.states.some(
+        (entityState) =>
+          entityState.attributes &&
+          entityState.attributes.target_temp_high !==
+            entityState.attributes.target_temp_low
+      );
+      addDataSet(
+        states.entity_id + "-current_temperature",
+        params.showNames
+          ? hass.localize("ui.card.climate.current_temperature", {
+              name: name,
+            })
+          : hass.localize(
+              "component.climate.entity_component._.state_attributes.current_temperature.name"
+            )
+      );
+      for (const { action, cssVar } of activeModes) {
+        addDataSet(
+          `${states.entity_id}-${action}`,
+          params.showNames
+            ? hass.localize(`ui.card.climate.${action}`, {
+                name: name,
+              })
+            : hass.localize(
+                `component.climate.entity_component._.state_attributes.hvac_action.state.${action}`
+              ),
+          computedStyles.getPropertyValue(cssVar),
+          true
+        );
+      }
+
+      if (hasTargetRange) {
+        addDataSet(
+          states.entity_id + "-target_temperature_mode",
+          params.showNames
+            ? hass.localize("ui.card.climate.target_temperature_mode", {
+                name: name,
+                mode: hass.localize("ui.card.climate.high"),
+              })
+            : hass.localize(
+                "component.climate.entity_component._.state_attributes.target_temp_high.name"
+              )
+        );
+        addDataSet(
+          states.entity_id + "-target_temperature_mode_low",
+          params.showNames
+            ? hass.localize("ui.card.climate.target_temperature_mode", {
+                name: name,
+                mode: hass.localize("ui.card.climate.low"),
+              })
+            : hass.localize(
+                "component.climate.entity_component._.state_attributes.target_temp_low.name"
+              )
+        );
+      } else {
+        addDataSet(
+          states.entity_id + "-target_temperature",
+          params.showNames
+            ? hass.localize("ui.card.climate.target_temperature_entity", {
+                name: name,
+              })
+            : hass.localize(
+                "component.climate.entity_component._.state_attributes.temperature.name"
+              )
+        );
+      }
+
+      states.states.forEach((entityState) => {
+        if (!entityState.attributes) return;
+        const curTemp = safeParseFloat(
+          entityState.attributes.current_temperature
+        );
+        const series = [curTemp];
+        for (const { isActive } of activeModes) {
+          series.push(isActive(entityState) ? curTemp : null);
+        }
+        if (hasTargetRange) {
+          const targetHigh = safeParseFloat(
+            entityState.attributes.target_temp_high
+          );
+          const targetLow = safeParseFloat(
+            entityState.attributes.target_temp_low
+          );
+          series.push(targetHigh, targetLow);
+          pushData(entityState.last_changed, series);
+        } else {
+          const target = safeParseFloat(entityState.attributes.temperature);
+          series.push(target);
+          pushData(entityState.last_changed, series);
+        }
+      });
+    } else if (domain === "humidifier") {
+      const hasAction = states.states.some(
+        (entityState) => entityState.attributes?.action
+      );
+      const hasCurrent = states.states.some(
+        (entityState) => entityState.attributes?.current_humidity
+      );
+
+      const hasHumidifying =
+        hasAction &&
+        states.states.some(
+          (entityState: LineChartState) =>
+            entityState.attributes?.action === "humidifying"
+        );
+      const hasDrying =
+        hasAction &&
+        states.states.some(
+          (entityState: LineChartState) =>
+            entityState.attributes?.action === "drying"
+        );
+
+      addDataSet(
+        states.entity_id + "-target_humidity",
+        params.showNames
+          ? hass.localize("ui.card.humidifier.target_humidity_entity", {
+              name: name,
+            })
+          : hass.localize(
+              "component.humidifier.entity_component._.state_attributes.humidity.name"
+            )
+      );
+
+      if (hasCurrent) {
+        addDataSet(
+          states.entity_id + "-current_humidity",
+          params.showNames
+            ? hass.localize("ui.card.humidifier.current_humidity_entity", {
+                name: name,
+              })
+            : hass.localize(
+                "component.humidifier.entity_component._.state_attributes.current_humidity.name"
+              )
+        );
+      }
+
+      // If action attribute is available, we used it to shade the area below the humidity.
+      // If action attribute is not available, we shade the area when the device is on
+      if (hasHumidifying) {
+        addDataSet(
+          states.entity_id + "-humidifying",
+          params.showNames
+            ? hass.localize("ui.card.humidifier.humidifying", {
+                name: name,
+              })
+            : hass.localize(
+                "component.humidifier.entity_component._.state_attributes.action.state.humidifying"
+              ),
+          computedStyles.getPropertyValue("--state-humidifier-on-color"),
+          true
+        );
+      } else if (hasDrying) {
+        addDataSet(
+          states.entity_id + "-drying",
+          params.showNames
+            ? hass.localize("ui.card.humidifier.drying", {
+                name: name,
+              })
+            : hass.localize(
+                "component.humidifier.entity_component._.state_attributes.action.state.drying"
+              ),
+          computedStyles.getPropertyValue("--state-humidifier-on-color"),
+          true
+        );
+      } else {
+        addDataSet(
+          states.entity_id + "-on",
+          params.showNames
+            ? hass.localize("ui.card.humidifier.on_entity", {
+                name: name,
+              })
+            : hass.localize("component.humidifier.entity_component._.state.on"),
+          undefined,
+          true
+        );
+      }
+
+      states.states.forEach((entityState) => {
+        if (!entityState.attributes) return;
+        const target = safeParseFloat(entityState.attributes.humidity);
+        // If the current humidity is not available, then we fill up to the target humidity
+        const current = hasCurrent
+          ? safeParseFloat(entityState.attributes?.current_humidity)
+          : target;
+        const series = [target];
+
+        if (hasCurrent) {
+          series.push(current);
+        }
+
+        if (hasHumidifying) {
+          series.push(
+            entityState.attributes?.action === "humidifying" ? current : null
+          );
+        } else if (hasDrying) {
+          series.push(
+            entityState.attributes?.action === "drying" ? current : null
+          );
+        } else {
+          series.push(entityState.state === "on" ? current : null);
+        }
+        pushData(entityState.last_changed, series);
+      });
+    } else {
+      addDataSet(states.entity_id, name, color);
+
+      let lastValue: number;
+      let lastDate: number;
+      let lastNullDate: number | null = null;
+
+      // Process chart data.
+      // When state is `unknown`, calculate the value and break the line.
+      const processData = (entityState: LineChartState) => {
+        const value = safeParseFloat(entityState.state);
+        const date = entityState.last_changed;
+        if (value !== null && lastNullDate) {
+          const tmpValue =
+            (value - lastValue) *
+              ((lastNullDate - lastDate) / (date - lastDate)) +
+            lastValue;
+          pushData(lastNullDate, [tmpValue]);
+          pushData(lastNullDate + 1, [null]);
+          pushData(date, [value]);
+          lastDate = date;
+          lastValue = value;
+          lastNullDate = null;
+        } else if (value !== null && lastNullDate === null) {
+          pushData(date, [value]);
+          lastDate = date;
+          lastValue = value;
+        } else if (
+          value === null &&
+          lastNullDate === null &&
+          lastValue !== undefined
+        ) {
+          lastNullDate = date;
+        }
+      };
+
+      if (states.statistics) {
+        const stopTime =
+          !states.states || states.states.length === 0
+            ? 0
+            : states.states[0].last_changed;
+        for (const statistic of states.statistics) {
+          if (stopTime && statistic.last_changed >= stopTime) {
+            break;
+          }
+          processData(statistic);
+        }
+      }
+      states.states.forEach((entityState) => {
+        processData(entityState);
+      });
+      if (lastNullDate !== null) {
+        pushData(lastNullDate, [null]);
+      }
+    }
+
+    // Add an entry for final values
+    pushData(endTimeMs, prevValues);
+
+    // For sensors, append current state if viewing recent data
+    const nowMs = params.now.getTime();
+    // allow 1s of leeway for "now"
+    const isUpToNow = nowMs - endTimeMs <= 1000;
+    if (domain === "sensor" && isUpToNow && data.length === 1) {
+      const stateObj = hass.states[states.entity_id];
+      const currentValue = stateObj ? safeParseFloat(stateObj.state) : null;
+      if (currentValue !== null) {
+        data[0].data!.push([nowMs, currentValue]);
+        trackY(currentValue);
+      }
+    }
+
+    // Concat two arrays
+    Array.prototype.push.apply(datasets, data);
+  });
+
+  const visualMap: VisualMapComponentOption[] = [];
+  datasets.forEach((_, seriesIndex) => {
+    const dataIndex = datasetToDataIndex[seriesIndex];
+    const data = entityStates[dataIndex];
+    if (!data.statistics || data.statistics.length === 0) {
+      return;
+    }
+    // render stat data with a slightly transparent line
+    const firstStateTS = data.states[0]?.last_changed ?? endTime.getTime();
+    visualMap.push({
+      show: false,
+      seriesIndex,
+      dimension: 0,
+      pieces: [
+        {
+          max: firstStateTS - 0.01,
+          colorAlpha: 0.5,
+        },
+        {
+          min: firstStateTS,
+          colorAlpha: 1,
+        },
+      ],
+    });
+  });
+
+  return {
+    datasets,
+    entityIds,
+    datasetToDataIndex,
+    visualMap: visualMap.length > 0 ? visualMap : undefined,
+    yAxisFractionDigits: computeYAxisFractionDigits(yMin, yMax),
+  };
+}

src/components/chart/state-history-chart-line.ts

@@ -5,15 +5,17 @@ import type { VisualMapComponentOption } from "echarts/components";
 import type { LineSeriesOption } from "echarts/charts";
 import type { YAXisOption } from "echarts/types/dist/shared";
 import { styleMap } from "lit/directives/style-map";
-import { getGraphColorByIndex } from "../../common/color/colors";
 import { computeRTL } from "../../common/util/compute_rtl";
 
-import type { LineChartEntity, LineChartState } from "../../data/history";
+import type { LineChartEntity } from "../../data/history";
 import type { HomeAssistant } from "../../types";
 import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
 import { sideTooltipPosition } from "./chart-tooltip-position";
 import "./ha-chart-tooltip-marker";
-import { computeYAxisFractionDigits } from "./y-axis-fraction-digits";
+import {
+  CLIMATE_MODE_CONFIGS,
+  generateStateHistoryChartLineData,
+} from "./state-history-chart-line-data";
 import type { HaECOption } from "../../resources/echarts/echarts";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
 import {
@@ -23,22 +25,9 @@ import {
 import { measureTextWidth } from "../../util/text";
 import type { HASSDomEvent } from "../../common/dom/fire_event";
 import { fireEvent } from "../../common/dom/fire_event";
-import { CLIMATE_HVAC_ACTION_TO_MODE } from "../../data/climate";
 import { blankBeforeUnit } from "../../common/translations/blank_before_unit";
 import { computeAttributeValueDisplay } from "../../common/entity/compute_attribute_display";
 
-const safeParseFloat = (value) => {
-  const parsed = parseFloat(value);
-  return isFinite(parsed) ? parsed : null;
-};
-
-const CLIMATE_MODE_CONFIGS = [
-  { mode: "heat", action: "heating", cssVar: "--state-climate-heat-color" },
-  { mode: "cool", action: "cooling", cssVar: "--state-climate-cool-color" },
-  { mode: "dry", action: "drying", cssVar: "--state-climate-dry-color" },
-  { mode: "fan_only", action: "fan", cssVar: "--state-climate-fan_only-color" },
-] as const;
-
 // Used to recover the underlying entity_id from a legend dataset id.
 // Kept in sync with the suffixes appended at dataset construction below
 // for climate / water_heater / humidifier multi-attribute charts.
@@ -147,6 +136,14 @@ export class StateHistoryChartLine extends LitElement {
       this.hass.config
     );
     const datapoints: Record<string, any>[] = [];
+    // Index the hovered points by series so the per-dataset lookup below is
+    // O(1) instead of scanning `params` for every dataset on each mouse move.
+    const paramsBySeriesIndex = new Map<number, Record<string, any>>();
+    for (const p of params) {
+      if (!paramsBySeriesIndex.has(p.seriesIndex)) {
+        paramsBySeriesIndex.set(p.seriesIndex, p);
+      }
+    }
     this._chartData.forEach((dataset, index) => {
       if (
         dataset.tooltip?.show === false ||
@@ -154,9 +151,7 @@ export class StateHistoryChartLine extends LitElement {
       ) {
         return;
       }
-      const param = params.find(
-        (p: Record<string, any>) => p.seriesIndex === index
-      );
+      const param = paramsBySeriesIndex.get(index);
       if (param) {
         datapoints.push(param);
         return;
@@ -420,445 +415,32 @@ export class StateHistoryChartLine extends LitElement {
   }
 
   private _generateData() {
-    let colorIndex = 0;
-    const computedStyles = getComputedStyle(this);
-    const entityStates = this.data;
-    const datasets: LineSeriesOption[] = [];
-    const entityIds: string[] = [];
-    const datasetToDataIndex: number[] = [];
-    let yMin = Infinity;
-    let yMax = -Infinity;
-    const trackY = (v: number | null | undefined) => {
-      if (typeof v === "number" && Number.isFinite(v)) {
-        if (v < yMin) yMin = v;
-        if (v > yMax) yMax = v;
-      }
-    };
-    if (entityStates.length === 0) {
+    if (this.data.length === 0) {
       return;
     }
 
     this._chartTime = new Date();
-    const endTime = this.endTime;
-    const names = this.names || {};
-    const colors = this.colors || {};
-    entityStates.forEach((states, dataIdx) => {
-      const domain = states.domain;
-      const name = names[states.entity_id] || states.name;
-      const color = colors[states.entity_id];
-      // array containing [value1, value2, etc]
-      let prevValues: any[] | null = null;
 
-      const data: LineSeriesOption[] = [];
-
-      const pushData = (timestamp: Date, datavalues: any[] | null) => {
-        if (!datavalues) return;
-        if (timestamp > endTime) {
-          // Drop data points that are after the requested endTime. This could happen if
-          // endTime is "now" and client time is not in sync with server time.
-          return;
-        }
-        data.forEach((d, i) => {
-          if (datavalues[i] === null && prevValues && prevValues[i] !== null) {
-            // null data values show up as gaps in the chart.
-            // If the current value for the dataset is null and the previous
-            // value of the data set is not null, then add an 'end' point
-            // to the chart for the previous value. Otherwise the gap will
-            // be too big. It will go from the start of the previous data
-            // value until the start of the next data value.
-            d.data!.push([timestamp, prevValues[i]]);
-          }
-          d.data!.push([timestamp, datavalues[i]]);
-          trackY(datavalues[i]);
-        });
-        prevValues = datavalues;
-      };
-
-      const addDataSet = (
-        id: string,
-        nameY: string,
-        clr?: string,
-        fill = false
-      ) => {
-        if (!clr) {
-          clr = getGraphColorByIndex(colorIndex, computedStyles);
-          colorIndex++;
-        }
-        data.push({
-          id,
-          data: [],
-          type: "line",
-          cursor: "default",
-          name: nameY,
-          color: clr,
-          symbol: "circle",
-          symbolSize: 1,
-          step: "end",
-          sampling: "minmax",
-          animationDurationUpdate: 0,
-          lineStyle: {
-            width: fill ? 0 : 1.5,
-          },
-          areaStyle: fill
-            ? {
-                color: clr + "7F",
-              }
-            : undefined,
-          tooltip: {
-            show: !fill,
-          },
-        });
-        entityIds.push(states.entity_id);
-        datasetToDataIndex.push(dataIdx);
-      };
-
-      if (
-        domain === "thermostat" ||
-        domain === "climate" ||
-        domain === "water_heater"
-      ) {
-        const hasHvacAction = states.states.some(
-          (entityState) => entityState.attributes?.hvac_action
-        );
-
-        const activeModes = CLIMATE_MODE_CONFIGS.map(
-          ({ mode, action, cssVar }) => {
-            const isActive =
-              domain === "climate" && hasHvacAction
-                ? (entityState: LineChartState) =>
-                    CLIMATE_HVAC_ACTION_TO_MODE[
-                      entityState.attributes?.hvac_action
-                    ] === mode
-                : (entityState: LineChartState) => entityState.state === mode;
-            return { action, cssVar, isActive };
-          }
-        ).filter(({ isActive }) => states.states.some(isActive));
-        // We differentiate between thermostats that have a target temperature
-        // range versus ones that have just a target temperature
-
-        // Using step chart by step-before so manually interpolation not needed.
-        const hasTargetRange = states.states.some(
-          (entityState) =>
-            entityState.attributes &&
-            entityState.attributes.target_temp_high !==
-              entityState.attributes.target_temp_low
-        );
-        addDataSet(
-          states.entity_id + "-current_temperature",
-          this.showNames
-            ? this.hass.localize("ui.card.climate.current_temperature", {
-                name: name,
-              })
-            : this.hass.localize(
-                "component.climate.entity_component._.state_attributes.current_temperature.name"
-              )
-        );
-        for (const { action, cssVar } of activeModes) {
-          addDataSet(
-            `${states.entity_id}-${action}`,
-            this.showNames
-              ? this.hass.localize(`ui.card.climate.${action}`, {
-                  name: name,
-                })
-              : this.hass.localize(
-                  `component.climate.entity_component._.state_attributes.hvac_action.state.${action}`
-                ),
-            computedStyles.getPropertyValue(cssVar),
-            true
-          );
-        }
-
-        if (hasTargetRange) {
-          addDataSet(
-            states.entity_id + "-target_temperature_mode",
-            this.showNames
-              ? this.hass.localize("ui.card.climate.target_temperature_mode", {
-                  name: name,
-                  mode: this.hass.localize("ui.card.climate.high"),
-                })
-              : this.hass.localize(
-                  "component.climate.entity_component._.state_attributes.target_temp_high.name"
-                )
-          );
-          addDataSet(
-            states.entity_id + "-target_temperature_mode_low",
-            this.showNames
-              ? this.hass.localize("ui.card.climate.target_temperature_mode", {
-                  name: name,
-                  mode: this.hass.localize("ui.card.climate.low"),
-                })
-              : this.hass.localize(
-                  "component.climate.entity_component._.state_attributes.target_temp_low.name"
-                )
-          );
-        } else {
-          addDataSet(
-            states.entity_id + "-target_temperature",
-            this.showNames
-              ? this.hass.localize(
-                  "ui.card.climate.target_temperature_entity",
-                  {
-                    name: name,
-                  }
-                )
-              : this.hass.localize(
-                  "component.climate.entity_component._.state_attributes.temperature.name"
-                )
-          );
-        }
-
-        states.states.forEach((entityState) => {
-          if (!entityState.attributes) return;
-          const curTemp = safeParseFloat(
-            entityState.attributes.current_temperature
-          );
-          const series = [curTemp];
-          for (const { isActive } of activeModes) {
-            series.push(isActive(entityState) ? curTemp : null);
-          }
-          if (hasTargetRange) {
-            const targetHigh = safeParseFloat(
-              entityState.attributes.target_temp_high
-            );
-            const targetLow = safeParseFloat(
-              entityState.attributes.target_temp_low
-            );
-            series.push(targetHigh, targetLow);
-            pushData(new Date(entityState.last_changed), series);
-          } else {
-            const target = safeParseFloat(entityState.attributes.temperature);
-            series.push(target);
-            pushData(new Date(entityState.last_changed), series);
-          }
-        });
-      } else if (domain === "humidifier") {
-        const hasAction = states.states.some(
-          (entityState) => entityState.attributes?.action
-        );
-        const hasCurrent = states.states.some(
-          (entityState) => entityState.attributes?.current_humidity
-        );
-
-        const hasHumidifying =
-          hasAction &&
-          states.states.some(
-            (entityState: LineChartState) =>
-              entityState.attributes?.action === "humidifying"
-          );
-        const hasDrying =
-          hasAction &&
-          states.states.some(
-            (entityState: LineChartState) =>
-              entityState.attributes?.action === "drying"
-          );
-
-        addDataSet(
-          states.entity_id + "-target_humidity",
-          this.showNames
-            ? this.hass.localize("ui.card.humidifier.target_humidity_entity", {
-                name: name,
-              })
-            : this.hass.localize(
-                "component.humidifier.entity_component._.state_attributes.humidity.name"
-              )
-        );
-
-        if (hasCurrent) {
-          addDataSet(
-            states.entity_id + "-current_humidity",
-            this.showNames
-              ? this.hass.localize(
-                  "ui.card.humidifier.current_humidity_entity",
-                  {
-                    name: name,
-                  }
-                )
-              : this.hass.localize(
-                  "component.humidifier.entity_component._.state_attributes.current_humidity.name"
-                )
-          );
-        }
-
-        // If action attribute is available, we used it to shade the area below the humidity.
-        // If action attribute is not available, we shade the area when the device is on
-        if (hasHumidifying) {
-          addDataSet(
-            states.entity_id + "-humidifying",
-            this.showNames
-              ? this.hass.localize("ui.card.humidifier.humidifying", {
-                  name: name,
-                })
-              : this.hass.localize(
-                  "component.humidifier.entity_component._.state_attributes.action.state.humidifying"
-                ),
-            computedStyles.getPropertyValue("--state-humidifier-on-color"),
-            true
-          );
-        } else if (hasDrying) {
-          addDataSet(
-            states.entity_id + "-drying",
-            this.showNames
-              ? this.hass.localize("ui.card.humidifier.drying", {
-                  name: name,
-                })
-              : this.hass.localize(
-                  "component.humidifier.entity_component._.state_attributes.action.state.drying"
-                ),
-            computedStyles.getPropertyValue("--state-humidifier-on-color"),
-            true
-          );
-        } else {
-          addDataSet(
-            states.entity_id + "-on",
-            this.showNames
-              ? this.hass.localize("ui.card.humidifier.on_entity", {
-                  name: name,
-                })
-              : this.hass.localize(
-                  "component.humidifier.entity_component._.state.on"
-                ),
-            undefined,
-            true
-          );
-        }
-
-        states.states.forEach((entityState) => {
-          if (!entityState.attributes) return;
-          const target = safeParseFloat(entityState.attributes.humidity);
-          // If the current humidity is not available, then we fill up to the target humidity
-          const current = hasCurrent
-            ? safeParseFloat(entityState.attributes?.current_humidity)
-            : target;
-          const series = [target];
-
-          if (hasCurrent) {
-            series.push(current);
-          }
-
-          if (hasHumidifying) {
-            series.push(
-              entityState.attributes?.action === "humidifying" ? current : null
-            );
-          } else if (hasDrying) {
-            series.push(
-              entityState.attributes?.action === "drying" ? current : null
-            );
-          } else {
-            series.push(entityState.state === "on" ? current : null);
-          }
-          pushData(new Date(entityState.last_changed), series);
-        });
-      } else {
-        addDataSet(states.entity_id, name, color);
-
-        let lastValue: number;
-        let lastDate: Date;
-        let lastNullDate: Date | null = null;
-
-        // Process chart data.
-        // When state is `unknown`, calculate the value and break the line.
-        const processData = (entityState: LineChartState) => {
-          const value = safeParseFloat(entityState.state);
-          const date = new Date(entityState.last_changed);
-          if (value !== null && lastNullDate) {
-            const dateTime = date.getTime();
-            const lastNullDateTime = lastNullDate.getTime();
-            const lastDateTime = lastDate?.getTime();
-            const tmpValue =
-              (value - lastValue) *
-                ((lastNullDateTime - lastDateTime) /
-                  (dateTime - lastDateTime)) +
-              lastValue;
-            pushData(lastNullDate, [tmpValue]);
-            pushData(new Date(lastNullDateTime + 1), [null]);
-            pushData(date, [value]);
-            lastDate = date;
-            lastValue = value;
-            lastNullDate = null;
-          } else if (value !== null && lastNullDate === null) {
-            pushData(date, [value]);
-            lastDate = date;
-            lastValue = value;
-          } else if (
-            value === null &&
-            lastNullDate === null &&
-            lastValue !== undefined
-          ) {
-            lastNullDate = date;
-          }
-        };
-
-        if (states.statistics) {
-          const stopTime =
-            !states.states || states.states.length === 0
-              ? 0
-              : states.states[0].last_changed;
-          for (const statistic of states.statistics) {
-            if (stopTime && statistic.last_changed >= stopTime) {
-              break;
-            }
-            processData(statistic);
-          }
-        }
-        states.states.forEach((entityState) => {
-          processData(entityState);
-        });
-        if (lastNullDate !== null) {
-          pushData(lastNullDate, [null]);
-        }
-      }
-
-      // Add an entry for final values
-      pushData(endTime, prevValues);
-
-      // For sensors, append current state if viewing recent data
-      const now = new Date();
-      // allow 1s of leeway for "now"
-      const isUpToNow = now.getTime() - endTime.getTime() <= 1000;
-      if (domain === "sensor" && isUpToNow && data.length === 1) {
-        const stateObj = this.hass.states[states.entity_id];
-        const currentValue = stateObj ? safeParseFloat(stateObj.state) : null;
-        if (currentValue !== null) {
-          data[0].data!.push([now, currentValue]);
-          trackY(currentValue);
-        }
-      }
-
-      // Concat two arrays
-      Array.prototype.push.apply(datasets, data);
+    const data = generateStateHistoryChartLineData({
+      hass: this.hass,
+      data: this.data,
+      endTime: this.endTime,
+      names: this.names,
+      colors: this.colors,
+      showNames: this.showNames,
+      computedStyles: getComputedStyle(this),
+      now: new Date(),
     });
 
-    this._yAxisFractionDigits = computeYAxisFractionDigits(yMin, yMax);
-    this._chartData = datasets;
-    this._entityIds = entityIds;
-    this._datasetToDataIndex = datasetToDataIndex;
-    const visualMap: VisualMapComponentOption[] = [];
-    this._chartData.forEach((_, seriesIndex) => {
-      const dataIndex = this._datasetToDataIndex[seriesIndex];
-      const data = this.data[dataIndex];
-      if (!data.statistics || data.statistics.length === 0) {
-        return;
-      }
-      // render stat data with a slightly transparent line
-      const firstStateTS =
-        data.states[0]?.last_changed ?? this.endTime.getTime();
-      visualMap.push({
-        show: false,
-        seriesIndex,
-        dimension: 0,
-        pieces: [
-          {
-            max: firstStateTS - 0.01,
-            colorAlpha: 0.5,
-          },
-          {
-            min: firstStateTS,
-            colorAlpha: 1,
-          },
-        ],
-      });
-    });
-    this._visualMap = visualMap.length > 0 ? visualMap : undefined;
+    if (!data) {
+      return;
+    }
+
+    this._yAxisFractionDigits = data.yAxisFractionDigits;
+    this._chartData = data.datasets;
+    this._entityIds = data.entityIds;
+    this._datasetToDataIndex = data.datasetToDataIndex;
+    this._visualMap = data.visualMap;
   }
 
   private _formatYAxisLabel = (value: number) => {

src/components/chart/statistics-chart-data.ts

@@ -0,0 +1,465 @@
+import type {
+  BarSeriesOption,
+  LineSeriesOption,
+  ZRColor,
+} from "echarts/types/dist/shared";
+import { getGraphColorByIndex } from "../../common/color/colors";
+import type {
+  Statistics,
+  StatisticsMetaData,
+  StatisticType,
+} from "../../data/recorder";
+import {
+  getDisplayUnit,
+  getStatisticLabel,
+  isExternalStatistic,
+  statisticsHaveType,
+} from "../../data/recorder";
+import type { HomeAssistant } from "../../types";
+import { fillDataGapsAndRoundCaps } from "./round-caps";
+import { computeYAxisFractionDigits } from "./y-axis-fraction-digits";
+
+export interface StatisticsChartLegendItem {
+  id: string;
+  name: string;
+  color?: ZRColor;
+  borderColor?: ZRColor;
+  noLabelClick?: boolean;
+}
+
+export interface StatisticsChartDataParams {
+  hass: HomeAssistant;
+  statisticsData: Statistics;
+  statisticsMetaData: Record<string, StatisticsMetaData>;
+  names?: Record<string, string>;
+  colors?: Record<string, string | undefined>;
+  unit?: string;
+  endTime?: Date;
+  statTypes: StatisticType[];
+  chartType: "line" | "line-stack" | "bar" | "bar-stack";
+  period?: string;
+  hideLegend: boolean;
+  hiddenStats: ReadonlySet<string>;
+  computedStyle: CSSStyleDeclaration;
+  now: Date;
+}
+
+export interface StatisticsChartData {
+  datasets: (LineSeriesOption | BarSeriesOption)[];
+  legendData: StatisticsChartLegendItem[];
+  statisticIds: string[];
+  /** Chart unit, inferred from statistics metadata when not set explicitly */
+  unit?: string;
+  yAxisFractionDigits: number;
+}
+
+/**
+ * Transforms raw statistics into ECharts series for `statistics-chart`.
+ * Pure data processing: all environment inputs (current time, theme style,
+ * hass) are injected so the transform is deterministic and benchmarkable.
+ */
+export function generateStatisticsChartData(
+  params: StatisticsChartDataParams
+): StatisticsChartData | undefined {
+  const { hass, statisticsMetaData, computedStyle, now, hiddenStats } = params;
+
+  let colorIndex = 0;
+  const chartType = params.chartType.startsWith("line") ? "line" : "bar";
+  const chartStacked = params.chartType.endsWith("stack");
+  const statisticsData = Object.entries(params.statisticsData);
+  const totalDataSets: (LineSeriesOption | BarSeriesOption)[] = [];
+  let yMin = Infinity;
+  let yMax = -Infinity;
+  const trackY = (v: number | null | undefined) => {
+    if (typeof v === "number" && Number.isFinite(v)) {
+      if (v < yMin) yMin = v;
+      if (v > yMax) yMax = v;
+    }
+  };
+  const legendData: StatisticsChartLegendItem[] = [];
+  const statisticIds: string[] = [];
+  let endTime: Date;
+
+  if (statisticsData.length === 0) {
+    return undefined;
+  }
+
+  endTime =
+    params.endTime ||
+    // Get the highest date from the last date of each statistic
+    new Date(
+      Math.max(
+        ...statisticsData.map(([_, stats]) =>
+          new Date(stats[stats.length - 1].start).getTime()
+        )
+      )
+    );
+
+  if (endTime > now) {
+    endTime = now;
+  }
+
+  // Check if we need to display most recent data. Allow 10m of leeway for "now",
+  // because stats are 5 minute aggregated.
+  // Use same now point for all statistics even if processing time means the
+  // state value is actually from a slightly later time. Otherwise the points
+  // end up separated slightly and disappear from the tooltips.
+  const displayCurrentState = now.getTime() - endTime.getTime() <= 600000;
+
+  // Try to determine chart unit if it has not already been set explicitly
+  let unit = params.unit;
+  if (!unit) {
+    let inferredUnit: string | undefined | null;
+    statisticsData.forEach(([statistic_id, _stats]) => {
+      const meta = statisticsMetaData?.[statistic_id];
+      const statisticUnit = getDisplayUnit(hass, statistic_id, meta);
+      if (inferredUnit === undefined) {
+        inferredUnit = statisticUnit;
+      } else if (inferredUnit !== null && inferredUnit !== statisticUnit) {
+        // Clear unit if not all statistics have same unit
+        inferredUnit = null;
+      }
+    });
+    if (inferredUnit) {
+      unit = inferredUnit;
+    }
+  }
+
+  const names = params.names || {};
+  const colors = params.colors || {};
+  statisticsData.forEach(([statistic_id, stats]) => {
+    const meta = statisticsMetaData?.[statistic_id];
+    let name = names[statistic_id];
+    if (name === undefined) {
+      name = getStatisticLabel(hass, statistic_id, meta);
+    }
+
+    // array containing [value1, value2, etc]
+    let prevValues: (number | null)[][] | null = null;
+    let prevEndTime: Date | undefined;
+
+    // The datasets for the current statistic
+    const statDataSets: (LineSeriesOption | BarSeriesOption)[] = [];
+    const statLegendData: StatisticsChartLegendItem[] = [];
+
+    // Place bars at centre of their specified time range if this is a bar chart
+    // and the period is 5minute or hour.
+    const centerBars =
+      chartType === "bar" &&
+      (params.period === "5minute" || params.period === "hour");
+
+    const pushData = (
+      start: Date, // Data point start time
+      end: Date, // Data point end time
+      limit: Date, // Limit for end time (e.g. now)
+      dataValues: (number | null)[][]
+    ) => {
+      if (!dataValues.length) return;
+      // Limit for time range is lesser of overall limit and data point end
+      limit = end.getTime() < limit.getTime() ? end : limit;
+      if (start.getTime() > limit.getTime()) {
+        // Drop data points that are after the requested endTime. This could happen if
+        // endTime is "now" and client time is not in sync with server time.
+        return;
+      }
+      const isLineChart = chartType === "line";
+      // For bar charts, optionally center the bar within its time range. The
+      // centered time is shared by every series of this data point.
+      const barTime =
+        !isLineChart && centerBars
+          ? new Date((start.getTime() + end.getTime()) / 2)
+          : start;
+      // Whether a gap needs to be drawn before this data point (line charts).
+      const drawGap =
+        isLineChart &&
+        !!prevEndTime &&
+        !!prevValues &&
+        prevEndTime.getTime() !== start.getTime();
+      for (let i = 0; i < statDataSets.length; i++) {
+        const d = statDataSets[i];
+        const dataValue = dataValues[i];
+        if (isLineChart) {
+          if (drawGap) {
+            // if the end of the previous data doesn't match the start of the current data,
+            // we have to draw a gap so add a value at the end time, and then an empty value.
+            d.data!.push([prevEndTime!, ...prevValues![i]!]);
+            d.data!.push([prevEndTime!, null]);
+          }
+          d.data!.push([start, ...dataValue!]);
+          // For band-top rows dataValues[i] is [diff, top]; the actual Y is
+          // the last element. For regular rows it's [value]. Same call works.
+          trackY(dataValue[dataValue.length - 1]);
+        } else {
+          // Data value should always be a scalar for bar charts. Pass in
+          // real start time as extra value to allow formatting tooltip.
+          d.data!.push([barTime, dataValue[0]!, start, end]);
+          trackY(dataValue[0]);
+        }
+      }
+      prevValues = dataValues;
+      prevEndTime = limit;
+    };
+
+    let color = colors[statistic_id];
+    if (color === undefined) {
+      color = getGraphColorByIndex(colorIndex, computedStyle);
+      colorIndex++;
+    }
+
+    const statTypes: StatisticType[] = [];
+
+    const hasMean =
+      params.statTypes.includes("mean") && statisticsHaveType(stats, "mean");
+    const hasMax =
+      params.statTypes.includes("max") && statisticsHaveType(stats, "max");
+    const hasMin =
+      params.statTypes.includes("min") && statisticsHaveType(stats, "min");
+    const drawBands =
+      !chartStacked && [hasMean, hasMax, hasMin].filter(Boolean).length > 1;
+
+    const hasState = params.statTypes.includes("state");
+
+    const bandTop = hasMax ? "max" : "mean";
+    const bandBottom = hasMin ? "min" : "mean";
+
+    const sortedTypes = drawBands
+      ? [...params.statTypes].sort((a, b) => {
+          if (a === "min" || b === "max") {
+            return -1;
+          }
+          if (a === "max" || b === "min") {
+            return +1;
+          }
+          return 0;
+        })
+      : params.statTypes;
+
+    let displayedLegend = false;
+    sortedTypes.forEach((type) => {
+      if (statisticsHaveType(stats, type)) {
+        const band = drawBands && (type === bandTop || type === bandBottom);
+        statTypes.push(type);
+        const borderColor =
+          (band && hasMin && hasMax && hasMean) ||
+          (hasState && ["change", "sum"].includes(type))
+            ? color + (params.hideLegend ? "00" : "7F")
+            : color;
+        const backgroundColor = band ? color + "3F" : color + "7F";
+        const series: LineSeriesOption | BarSeriesOption = {
+          id: `${statistic_id}-${type}`,
+          type: chartType,
+          smooth: chartType === "line" ? 0.4 : false,
+          cursor: "default",
+          data: [],
+          name: name
+            ? `${name} (${hass.localize(
+                `ui.components.statistics_charts.statistic_types.${type}`
+              )})`
+            : hass.localize(
+                `ui.components.statistics_charts.statistic_types.${type}`
+              ),
+          symbol: "none",
+          // minmax sampling operates independently per series, breaking stacking alignment
+          // https://github.com/apache/echarts/issues/11879
+          sampling: band && drawBands ? "lttb" : "minmax",
+          animationDurationUpdate: 0,
+          lineStyle: {
+            width: 1.5,
+          },
+          itemStyle:
+            chartType === "bar"
+              ? {
+                  borderColor,
+                  borderWidth: 1.5,
+                }
+              : undefined,
+          color: chartType === "bar" ? backgroundColor : borderColor,
+        };
+        if (chartStacked) {
+          series.stack = `band-stacked`;
+          series.stackStrategy = "samesign";
+          if (chartType === "line") {
+            (series as LineSeriesOption).areaStyle = {
+              color: color + "3F",
+            };
+          }
+        } else if (band && chartType === "line") {
+          series.stack = `band-${statistic_id}`;
+          series.stackStrategy = "all";
+          if (hiddenStats.has(`${statistic_id}-${bandBottom}`)) {
+            // changing the stackOrder forces echarts to render the stacked series that are not hidden #28472
+            series.stackOrder = "seriesDesc";
+            (series as LineSeriesOption).areaStyle = undefined;
+          } else {
+            series.stackOrder = "seriesAsc";
+            if (type === bandTop) {
+              (series as LineSeriesOption).areaStyle = {
+                color: color + "3F",
+              };
+            }
+          }
+        }
+        if (!params.hideLegend) {
+          const showLegend = hasMean
+            ? type === "mean"
+            : displayedLegend === false;
+          if (showLegend) {
+            statLegendData.push({
+              id: statistic_id,
+              name,
+              color: series.color as ZRColor,
+              borderColor: series.itemStyle?.borderColor,
+              noLabelClick: isExternalStatistic(statistic_id),
+            });
+          }
+          displayedLegend = displayedLegend || showLegend;
+        }
+        statDataSets.push(series);
+        statisticIds.push(statistic_id);
+      }
+    });
+
+    let prevStart: number | null = null;
+    // Process chart data.
+    let firstSum: number | null | undefined = null;
+
+    // The per-type branch decisions in the inner loop are invariant across all
+    // stats of this statistic, so classify each type once up front.
+    // kind: 0 = sum (cumulative diff), 1 = band-top ([diff, top]), 2 = plain.
+    const SUM_KIND = 0;
+    const BAND_KIND = 1;
+    const PLAIN_KIND = 2;
+    const bandBottomHidden = hiddenStats.has(`${statistic_id}-${bandBottom}`);
+    const isLine = chartType === "line";
+    const typeKinds = statTypes.map((type) => {
+      if (type === "sum") {
+        return SUM_KIND;
+      }
+      if (type === bandTop && isLine && drawBands && !bandBottomHidden) {
+        return BAND_KIND;
+      }
+      return PLAIN_KIND;
+    });
+    const numTypes = statTypes.length;
+    const statHidden = hiddenStats.has(statistic_id);
+
+    for (const stat of stats) {
+      // Skip consecutive stats that share the same start time. Compare the raw
+      // numeric start so the dedup actually fires (a `Date` reference compare
+      // never would) and so we skip allocating a `Date` on the dropped path.
+      if (prevStart === stat.start) {
+        continue;
+      }
+      prevStart = stat.start;
+      const startDate = new Date(stat.start);
+      const endDate = new Date(stat.end);
+      const dataValues: (number | null)[][] = [];
+      for (let t = 0; t < numTypes; t++) {
+        const type = statTypes[t];
+        const val: (number | null)[] = [];
+        switch (typeKinds[t]) {
+          case SUM_KIND:
+            if (firstSum === null || firstSum === undefined) {
+              val.push(0);
+              firstSum = stat.sum;
+            } else {
+              val.push((stat.sum || 0) - firstSum);
+            }
+            break;
+          case BAND_KIND: {
+            const top = stat[bandTop] || 0;
+            val.push(Math.abs(top - (stat[bandBottom] || 0)));
+            val.push(top);
+            break;
+          }
+          default:
+            val.push(stat[type] ?? null);
+        }
+        dataValues.push(val);
+      }
+      if (!statHidden) {
+        pushData(startDate, endDate, endTime, dataValues);
+      }
+    }
+
+    // For line charts, close out the last stat segment at prevEndTime
+    const lastEndTime = prevEndTime;
+    const lastValues = prevValues;
+    if (chartType === "line" && lastEndTime && lastValues) {
+      statDataSets.forEach((d, i) => {
+        d.data!.push([lastEndTime, ...lastValues[i]!]);
+      });
+    }
+
+    // Show current state if required, and units match (or are unknown)
+    const statisticUnit = getDisplayUnit(hass, statistic_id, meta);
+    if (
+      displayCurrentState &&
+      !chartStacked &&
+      (!unit || !statisticUnit || unit === statisticUnit)
+    ) {
+      // Skip external statistics
+      if (!isExternalStatistic(statistic_id)) {
+        const stateObj = hass.states[statistic_id];
+        if (stateObj) {
+          const currentValue = parseFloat(stateObj.state);
+          if (isFinite(currentValue) && !hiddenStats.has(statistic_id)) {
+            // Then push the current state at now
+            statTypes.forEach((type, i) => {
+              if (type === "sum" || type === "change") {
+                // Skip cumulative types - need special calculation.
+                return;
+              }
+              const val: (number | null)[] = [];
+              if (
+                type === bandTop &&
+                chartType === "line" &&
+                drawBands &&
+                !hiddenStats.has(`${statistic_id}-${bandBottom}`)
+              ) {
+                // For band chart, current value is both min and max, so diff is 0
+                val.push(0);
+                val.push(currentValue);
+              } else {
+                val.push(currentValue);
+              }
+              statDataSets[i].data!.push([now, ...val]);
+              trackY(val[val.length - 1]);
+            });
+          }
+        }
+      }
+    }
+
+    // Concat two arrays
+    Array.prototype.push.apply(totalDataSets, statDataSets);
+    Array.prototype.push.apply(legendData, statLegendData);
+  });
+
+  if (chartType === "bar") {
+    fillDataGapsAndRoundCaps(totalDataSets as BarSeriesOption[], chartStacked);
+  }
+
+  legendData.forEach(({ id, name, color, borderColor }) => {
+    // Add an empty series for the legend
+    totalDataSets.push({
+      id: id,
+      name: name,
+      color,
+      itemStyle: {
+        borderColor,
+      },
+      type: chartType,
+      data: [],
+      xAxisIndex: 1,
+    });
+  });
+
+  return {
+    datasets: totalDataSets,
+    legendData,
+    statisticIds,
+    unit,
+    yAxisFractionDigits: computeYAxisFractionDigits(yMin, yMax),
+  };
+}

src/components/chart/statistics-chart.ts

@@ -1,14 +1,12 @@
 import type {
   BarSeriesOption,
   LineSeriesOption,
-  ZRColor,
 } from "echarts/types/dist/shared";
 import type { PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
-import { getGraphColorByIndex } from "../../common/color/colors";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import type { HASSDomEvent } from "../../common/dom/fire_event";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -27,13 +25,7 @@ import type {
   StatisticsMetaData,
   StatisticType,
 } from "../../data/recorder";
-import {
-  getDisplayUnit,
-  getStatisticLabel,
-  getStatisticMetadata,
-  isExternalStatistic,
-  statisticsHaveType,
-} from "../../data/recorder";
+import { getStatisticMetadata, isExternalStatistic } from "../../data/recorder";
 import type { HaECOption } from "../../resources/echarts/echarts";
 import type { HomeAssistant } from "../../types";
 import { getPeriodicAxisLabelConfig } from "./axis-label";
@@ -41,8 +33,7 @@ import type { CustomLegendOption } from "./ha-chart-base";
 import "./ha-chart-base";
 import { sideTooltipPosition } from "./chart-tooltip-position";
 import "./ha-chart-tooltip-marker";
-import { fillDataGapsAndRoundCaps } from "./round-caps";
-import { computeYAxisFractionDigits } from "./y-axis-fraction-digits";
+import { generateStatisticsChartData } from "./statistics-chart-data";
 
 export const supportedStatTypeMap: Record<StatisticType, StatisticType> = {
   mean: "mean",
@@ -503,391 +494,35 @@ export class StatisticsChart extends LitElement {
       this.metadata ||
       (await this._getStatisticsMetaData(Object.keys(this.statisticsData)));
 
-    let colorIndex = 0;
-    const chartType = this.chartType.startsWith("line") ? "line" : "bar";
-    const chartStacked = this.chartType.endsWith("stack");
-    const statisticsData = Object.entries(this.statisticsData);
-    const totalDataSets: typeof this._chartData = [];
-    let yMin = Infinity;
-    let yMax = -Infinity;
-    const trackY = (v: number | null | undefined) => {
-      if (typeof v === "number" && Number.isFinite(v)) {
-        if (v < yMin) yMin = v;
-        if (v > yMax) yMax = v;
-      }
-    };
-    const legendData: {
-      id: string;
-      name: string;
-      color?: ZRColor;
-      borderColor?: ZRColor;
-      noLabelClick?: boolean;
-    }[] = [];
-    const statisticIds: string[] = [];
-    let endTime: Date;
+    const data = generateStatisticsChartData({
+      hass: this.hass,
+      statisticsData: this.statisticsData,
+      statisticsMetaData,
+      names: this.names,
+      colors: this.colors,
+      unit: this.unit,
+      endTime: this.endTime,
+      statTypes: this.statTypes,
+      chartType: this.chartType,
+      period: this.period,
+      hideLegend: this.hideLegend,
+      hiddenStats: this._hiddenStats,
+      computedStyle: this._computedStyle || getComputedStyle(this),
+      now: new Date(),
+    });
 
-    if (statisticsData.length === 0) {
+    if (!data) {
       return;
     }
 
-    endTime =
-      this.endTime ||
-      // Get the highest date from the last date of each statistic
-      new Date(
-        Math.max(
-          ...statisticsData.map(([_, stats]) =>
-            new Date(stats[stats.length - 1].start).getTime()
-          )
-        )
-      );
-
-    if (endTime > new Date()) {
-      endTime = new Date();
-    }
-
-    // Check if we need to display most recent data. Allow 10m of leeway for "now",
-    // because stats are 5 minute aggregated.
-    // Use same now point for all statistics even if processing time means the
-    // state value is actually from a slightly later time. Otherwise the points
-    // end up separated slightly and disappear from the tooltips.
-    const now = new Date();
-    const displayCurrentState = now.getTime() - endTime.getTime() <= 600000;
-
-    // Try to determine chart unit if it has not already been set explicitly
-    if (!this.unit) {
-      let unit: string | undefined | null;
-      statisticsData.forEach(([statistic_id, _stats]) => {
-        const meta = statisticsMetaData?.[statistic_id];
-        const statisticUnit = getDisplayUnit(this.hass, statistic_id, meta);
-        if (unit === undefined) {
-          unit = statisticUnit;
-        } else if (unit !== null && unit !== statisticUnit) {
-          // Clear unit if not all statistics have same unit
-          unit = null;
-        }
-      });
-      if (unit) {
-        this.unit = unit;
-      }
-    }
-
-    const names = this.names || {};
-    const colors = this.colors || {};
-    statisticsData.forEach(([statistic_id, stats]) => {
-      const meta = statisticsMetaData?.[statistic_id];
-      let name = names[statistic_id];
-      if (name === undefined) {
-        name = getStatisticLabel(this.hass, statistic_id, meta);
-      }
-
-      // array containing [value1, value2, etc]
-      let prevValues: (number | null)[][] | null = null;
-      let prevEndTime: Date | undefined;
-
-      // The datasets for the current statistic
-      const statDataSets: (LineSeriesOption | BarSeriesOption)[] = [];
-      const statLegendData: typeof legendData = [];
-
-      // Place bars at centre of their specified time range if this is a bar chart
-      // and the period is 5minute or hour.
-      const centerBars =
-        chartType === "bar" &&
-        (this.period === "5minute" || this.period === "hour");
-
-      const pushData = (
-        start: Date, // Data point start time
-        end: Date, // Data point end time
-        limit: Date, // Limit for end time (e.g. now)
-        dataValues: (number | null)[][]
-      ) => {
-        if (!dataValues.length) return;
-        // Limit for time range is lesser of overall limit and data point end
-        limit = end.getTime() < limit.getTime() ? end : limit;
-        if (start.getTime() > limit.getTime()) {
-          // Drop data points that are after the requested endTime. This could happen if
-          // endTime is "now" and client time is not in sync with server time.
-          return;
-        }
-        statDataSets.forEach((d, i) => {
-          if (chartType === "line") {
-            if (
-              prevEndTime &&
-              prevValues &&
-              prevEndTime.getTime() !== start.getTime()
-            ) {
-              // if the end of the previous data doesn't match the start of the current data,
-              // we have to draw a gap so add a value at the end time, and then an empty value.
-              d.data!.push([prevEndTime, ...prevValues[i]!]);
-              d.data!.push([prevEndTime, null]);
-            }
-            d.data!.push([start, ...dataValues[i]!]);
-            // For band-top rows dataValues[i] is [diff, top]; the actual Y is
-            // the last element. For regular rows it's [value]. Same call works.
-            trackY(dataValues[i][dataValues[i].length - 1]);
-          } else {
-            let time = start;
-            if (centerBars) {
-              // If centering bars, set the time to the midpoint between start and end instead
-              // of the start time.
-              time = new Date((start.getTime() + end.getTime()) / 2);
-            }
-            // Data value should always be a scalar for bar charts. Pass in
-            // real start time as extra value to allow formatting tooltip.
-            d.data!.push([time, dataValues[i][0]!, start, end]);
-            trackY(dataValues[i][0]);
-          }
-        });
-        prevValues = dataValues;
-        prevEndTime = limit;
-      };
-
-      let color = colors[statistic_id];
-      if (color === undefined) {
-        color = getGraphColorByIndex(
-          colorIndex,
-          this._computedStyle || getComputedStyle(this)
-        );
-        colorIndex++;
-      }
-
-      const statTypes: this["statTypes"] = [];
-
-      const hasMean =
-        this.statTypes.includes("mean") && statisticsHaveType(stats, "mean");
-      const hasMax =
-        this.statTypes.includes("max") && statisticsHaveType(stats, "max");
-      const hasMin =
-        this.statTypes.includes("min") && statisticsHaveType(stats, "min");
-      const drawBands =
-        !chartStacked && [hasMean, hasMax, hasMin].filter(Boolean).length > 1;
-
-      const hasState = this.statTypes.includes("state");
-
-      const bandTop = hasMax ? "max" : "mean";
-      const bandBottom = hasMin ? "min" : "mean";
-
-      const sortedTypes = drawBands
-        ? [...this.statTypes].sort((a, b) => {
-            if (a === "min" || b === "max") {
-              return -1;
-            }
-            if (a === "max" || b === "min") {
-              return +1;
-            }
-            return 0;
-          })
-        : this.statTypes;
-
-      let displayedLegend = false;
-      sortedTypes.forEach((type) => {
-        if (statisticsHaveType(stats, type)) {
-          const band = drawBands && (type === bandTop || type === bandBottom);
-          statTypes.push(type);
-          const borderColor =
-            (band && hasMin && hasMax && hasMean) ||
-            (hasState && ["change", "sum"].includes(type))
-              ? color + (this.hideLegend ? "00" : "7F")
-              : color;
-          const backgroundColor = band ? color + "3F" : color + "7F";
-          const series: LineSeriesOption | BarSeriesOption = {
-            id: `${statistic_id}-${type}`,
-            type: chartType,
-            smooth: chartType === "line" ? 0.4 : false,
-            cursor: "default",
-            data: [],
-            name: name
-              ? `${name} (${this.hass.localize(
-                  `ui.components.statistics_charts.statistic_types.${type}`
-                )})`
-              : this.hass.localize(
-                  `ui.components.statistics_charts.statistic_types.${type}`
-                ),
-            symbol: "none",
-            // minmax sampling operates independently per series, breaking stacking alignment
-            // https://github.com/apache/echarts/issues/11879
-            sampling: band && drawBands ? "lttb" : "minmax",
-            animationDurationUpdate: 0,
-            lineStyle: {
-              width: 1.5,
-            },
-            itemStyle:
-              chartType === "bar"
-                ? {
-                    borderColor,
-                    borderWidth: 1.5,
-                  }
-                : undefined,
-            color: chartType === "bar" ? backgroundColor : borderColor,
-          };
-          if (chartStacked) {
-            series.stack = `band-stacked`;
-            series.stackStrategy = "samesign";
-            if (chartType === "line") {
-              (series as LineSeriesOption).areaStyle = {
-                color: color + "3F",
-              };
-            }
-          } else if (band && chartType === "line") {
-            series.stack = `band-${statistic_id}`;
-            series.stackStrategy = "all";
-            if (this._hiddenStats.has(`${statistic_id}-${bandBottom}`)) {
-              // changing the stackOrder forces echarts to render the stacked series that are not hidden #28472
-              series.stackOrder = "seriesDesc";
-              (series as LineSeriesOption).areaStyle = undefined;
-            } else {
-              series.stackOrder = "seriesAsc";
-              if (type === bandTop) {
-                (series as LineSeriesOption).areaStyle = {
-                  color: color + "3F",
-                };
-              }
-            }
-          }
-          if (!this.hideLegend) {
-            const showLegend = hasMean
-              ? type === "mean"
-              : displayedLegend === false;
-            if (showLegend) {
-              statLegendData.push({
-                id: statistic_id,
-                name,
-                color: series.color as ZRColor,
-                borderColor: series.itemStyle?.borderColor,
-                noLabelClick: isExternalStatistic(statistic_id),
-              });
-            }
-            displayedLegend = displayedLegend || showLegend;
-          }
-          statDataSets.push(series);
-          statisticIds.push(statistic_id);
-        }
-      });
-
-      let prevDate: Date | null = null;
-      // Process chart data.
-      let firstSum: number | null | undefined = null;
-      stats.forEach((stat) => {
-        const startDate = new Date(stat.start);
-        const endDate = new Date(stat.end);
-        if (prevDate === startDate) {
-          return;
-        }
-        prevDate = startDate;
-        const dataValues: (number | null)[][] = [];
-        statTypes.forEach((type) => {
-          const val: (number | null)[] = [];
-          if (type === "sum") {
-            if (firstSum === null || firstSum === undefined) {
-              val.push(0);
-              firstSum = stat.sum;
-            } else {
-              val.push((stat.sum || 0) - firstSum);
-            }
-          } else if (
-            type === bandTop &&
-            chartType === "line" &&
-            drawBands &&
-            !this._hiddenStats.has(`${statistic_id}-${bandBottom}`)
-          ) {
-            const top = stat[bandTop] || 0;
-            val.push(Math.abs(top - (stat[bandBottom] || 0)));
-            val.push(top);
-          } else {
-            val.push(stat[type] ?? null);
-          }
-          dataValues.push(val);
-        });
-        if (!this._hiddenStats.has(statistic_id)) {
-          pushData(startDate, endDate, endTime, dataValues);
-        }
-      });
-
-      // For line charts, close out the last stat segment at prevEndTime
-      const lastEndTime = prevEndTime;
-      const lastValues = prevValues;
-      if (chartType === "line" && lastEndTime && lastValues) {
-        statDataSets.forEach((d, i) => {
-          d.data!.push([lastEndTime, ...lastValues[i]!]);
-        });
-      }
-
-      // Show current state if required, and units match (or are unknown)
-      const statisticUnit = getDisplayUnit(this.hass, statistic_id, meta);
-      if (
-        displayCurrentState &&
-        !chartStacked &&
-        (!this.unit || !statisticUnit || this.unit === statisticUnit)
-      ) {
-        // Skip external statistics
-        if (!isExternalStatistic(statistic_id)) {
-          const stateObj = this.hass.states[statistic_id];
-          if (stateObj) {
-            const currentValue = parseFloat(stateObj.state);
-            if (
-              isFinite(currentValue) &&
-              !this._hiddenStats.has(statistic_id)
-            ) {
-              // Then push the current state at now
-              statTypes.forEach((type, i) => {
-                if (type === "sum" || type === "change") {
-                  // Skip cumulative types - need special calculation.
-                  return;
-                }
-                const val: (number | null)[] = [];
-                if (
-                  type === bandTop &&
-                  chartType === "line" &&
-                  drawBands &&
-                  !this._hiddenStats.has(`${statistic_id}-${bandBottom}`)
-                ) {
-                  // For band chart, current value is both min and max, so diff is 0
-                  val.push(0);
-                  val.push(currentValue);
-                } else {
-                  val.push(currentValue);
-                }
-                statDataSets[i].data!.push([now, ...val]);
-                trackY(val[val.length - 1]);
-              });
-            }
-          }
-        }
-      }
-
-      // Concat two arrays
-      Array.prototype.push.apply(totalDataSets, statDataSets);
-      Array.prototype.push.apply(legendData, statLegendData);
-    });
-
-    if (chartType === "bar") {
-      fillDataGapsAndRoundCaps(
-        totalDataSets as BarSeriesOption[],
-        chartStacked
-      );
-    }
-
-    legendData.forEach(({ id, name, color, borderColor }) => {
-      // Add an empty series for the legend
-      totalDataSets.push({
-        id: id,
-        name: name,
-        color,
-        itemStyle: {
-          borderColor,
-        },
-        type: chartType,
-        data: [],
-        xAxisIndex: 1,
-      });
-    });
-
-    this._yAxisFractionDigits = computeYAxisFractionDigits(yMin, yMax);
-    this._chartData = totalDataSets;
-    if (legendData.length !== this._legendData?.length) {
+    this.unit = data.unit;
+    this._yAxisFractionDigits = data.yAxisFractionDigits;
+    this._chartData = data.datasets;
+    if (data.legendData.length !== this._legendData?.length) {
       // only update the legend if it has changed or it will trigger options update
       this._legendData =
-        legendData.length > 1
-          ? legendData.map(({ id, name, noLabelClick }) => ({
+        data.legendData.length > 1
+          ? data.legendData.map(({ id, name, noLabelClick }) => ({
               id,
               name,
               noLabelClick,
@@ -895,7 +530,7 @@ export class StatisticsChart extends LitElement {
           : // if there is only one entity, let the base chart handle the legend
             undefined;
     }
-    this._statisticIds = statisticIds;
+    this._statisticIds = data.statisticIds;
   }
 
   private _clampYAxis(value?: number | ((values: any) => number)) {

src/components/ha-control-select-menu.ts

@@ -183,6 +183,7 @@ export class HaControlSelectMenu extends LitElement {
         gap: 10px;
         width: 100%;
         user-select: none;
+        font-family: var(--ha-font-family-body, inherit);
         font-style: normal;
         font-weight: var(--ha-font-weight-normal);
         letter-spacing: 0.25px;

src/components/ha-labels-picker.ts

@@ -101,15 +101,9 @@ export class HaLabelsPicker extends LitElement {
       language: string
     ) =>
       value
-        ?.map(
-          (id) =>
-            labels?.find((label) => label.label_id === id) || {
-              label_id: id,
-              name: id,
-              color: "rgba(var(--rgb-primary-text-color), 0.15)",
-            }
-        )
-        .sort((a, b) => stringCompare(a?.name || "", b?.name || "", language))
+        ?.map((id) => labels?.find((label) => label.label_id === id))
+        .filter((label): label is LabelRegistryEntry => label !== undefined)
+        .sort((a, b) => stringCompare(a.name, b.name, language))
         .map((label) => ({
           ...label,
           style: getLabelColorStyle(label.color),

src/components/ha-selector/ha-selector-serial-port.ts

@@ -354,7 +354,9 @@ export class HaSerialPortSelector extends LitElement {
   }
 
   private get _selectorDomain(): string | undefined {
-    return this.context?.handler;
+    // `domain` is the integration domain even in options flows, where the flow
+    // handler is the config entry id instead.
+    return this.context?.domain;
   }
 
   private _memoRecommendedDomains = memoizeOne(

src/components/timezone-datalist.ts

@@ -1,13 +0,0 @@
-import timezones from "google-timezones-json";
-
-export const createTimezoneListEl = () => {
-  const list = document.createElement("datalist");
-  list.id = "timezones";
-  Object.keys(timezones).forEach((key) => {
-    const option = document.createElement("option");
-    option.value = key;
-    option.innerText = timezones[key];
-    list.appendChild(option);
-  });
-  return list;
-};

src/data/backup.ts

@@ -181,7 +181,7 @@ export interface RestoreBackupParams {
   restore_homeassistant?: boolean;
 }
 
-export const fetchBackupConfig = (hass: HomeAssistant) =>
+export const fetchBackupConfig = (hass: Pick<HomeAssistant, "callWS">) =>
   hass.callWS<{ config: BackupConfig }>({ type: "backup/config/info" });
 
 export const updateBackupConfig = (

src/data/energy.ts

@@ -1121,14 +1121,12 @@ const getSummedDataPartial = (
   const timestamps = new Set<number>();
   Object.entries(statIds).forEach(([key, subStatIds]) => {
     const totalStats: Record<number, number> = {};
-    const sets: Record<string, Record<number, number>> = {};
     let sum = 0;
     subStatIds!.forEach((id) => {
       const stats = compare ? data.statsCompare[id] : data.stats[id];
       if (!stats) {
         return;
       }
-      const set = {};
       stats.forEach((stat) => {
         if (stat.change === null || stat.change === undefined) {
           return;
@@ -1139,7 +1137,6 @@ const getSummedDataPartial = (
           stat.start in totalStats ? totalStats[stat.start] + val : val;
         timestamps.add(stat.start);
       });
-      sets[id] = set;
     });
     summedData[key] = totalStats;
     summedData.total[key] = sum;
@@ -1190,6 +1187,13 @@ const computeConsumptionDataPartial = (
     },
   };
 
+  const fromGrid = data.from_grid;
+  const toGrid = data.to_grid;
+  const solarData = data.solar;
+  const toBattery = data.to_battery;
+  const fromBattery = data.from_battery;
+  const total = outData.total;
+
   data.timestamps.forEach((t) => {
     const {
       grid_to_battery,
@@ -1201,29 +1205,29 @@ const computeConsumptionDataPartial = (
       solar_to_battery,
       solar_to_grid,
     } = computeConsumptionSingle({
-      from_grid: data.from_grid && (data.from_grid[t] ?? 0),
-      to_grid: data.to_grid && (data.to_grid[t] ?? 0),
-      solar: data.solar && (data.solar[t] ?? 0),
-      to_battery: data.to_battery && (data.to_battery[t] ?? 0),
-      from_battery: data.from_battery && (data.from_battery[t] ?? 0),
+      from_grid: fromGrid && (fromGrid[t] ?? 0),
+      to_grid: toGrid && (toGrid[t] ?? 0),
+      solar: solarData && (solarData[t] ?? 0),
+      to_battery: toBattery && (toBattery[t] ?? 0),
+      from_battery: fromBattery && (fromBattery[t] ?? 0),
     });
 
     outData.used_total[t] = used_total;
-    outData.total.used_total += used_total;
+    total.used_total += used_total;
     outData.grid_to_battery[t] = grid_to_battery;
-    outData.total.grid_to_battery += grid_to_battery;
+    total.grid_to_battery += grid_to_battery;
     outData.battery_to_grid![t] = battery_to_grid;
-    outData.total.battery_to_grid += battery_to_grid;
+    total.battery_to_grid += battery_to_grid;
     outData.used_battery![t] = used_battery;
-    outData.total.used_battery += used_battery;
+    total.used_battery += used_battery;
     outData.used_grid![t] = used_grid;
-    outData.total.used_grid += used_grid;
+    total.used_grid += used_grid;
     outData.used_solar![t] = used_solar;
-    outData.total.used_solar += used_solar;
+    total.used_solar += used_solar;
     outData.solar_to_battery[t] = solar_to_battery;
-    outData.total.solar_to_battery += solar_to_battery;
+    total.solar_to_battery += solar_to_battery;
     outData.solar_to_grid[t] = solar_to_grid;
-    outData.total.solar_to_grid += solar_to_grid;
+    total.solar_to_grid += solar_to_grid;
   });
 
   return outData;

src/data/entity/entity_sources.ts

@@ -7,11 +7,12 @@ interface EntitySource {
 
 export type EntitySources = Record<string, EntitySource>;
 
-const fetchEntitySources = (hass: HomeAssistant): Promise<EntitySources> =>
-  hass.callWS({ type: "entity/source" });
+const fetchEntitySources = (
+  hass: Pick<HomeAssistant, "callWS">
+): Promise<EntitySources> => hass.callWS({ type: "entity/source" });
 
 export const fetchEntitySourcesWithCache = (
-  hass: HomeAssistant
+  hass: Pick<HomeAssistant, "callWS" | "states">
 ): Promise<EntitySources> =>
   timeCachePromiseFunc(
     "_entitySources",

src/data/history.ts

@@ -10,6 +10,7 @@ import { computeStateDisplayFromEntityAttributes } from "../common/entity/comput
 import { computeStateNameFromEntityAttributes } from "../common/entity/compute_state_name";
 import type { LocalizeFunc } from "../common/translations/localize";
 import type { HomeAssistant } from "../types";
+import { isNumericSensorDeviceClass } from "./sensor";
 import type { FrontendLocaleData } from "./translation";
 import type { Statistics } from "./recorder";
 
@@ -164,60 +165,70 @@ export class HistoryStream {
       ? (new Date().getTime() - 60 * 60 * this.hoursToShow * 1000) / 1000
       : undefined;
     const newHistory: HistoryStates = {};
-    for (const entityId of Object.keys(this.combinedHistory)) {
-      newHistory[entityId] = [];
-    }
-    for (const entityId of Object.keys(streamMessage.states)) {
-      newHistory[entityId] = [];
-    }
-    for (const entityId of Object.keys(newHistory)) {
-      if (
-        entityId in this.combinedHistory &&
-        entityId in streamMessage.states
-      ) {
+    // Build the union of entity ids (existing first, then new ones) in a
+    // single pass and process each entity inline. The per-entity slot is
+    // always assigned below before being read, so there is no need to
+    // pre-seed every key with an empty array first.
+    const streamStates = streamMessage.states;
+    const processEntity = (entityId: string) => {
+      const inCombined = entityId in this.combinedHistory;
+      const inStream = entityId in streamStates;
+      if (inCombined && inStream) {
         const entityCombinedHistory = this.combinedHistory[entityId];
         const lastEntityCombinedHistory =
           entityCombinedHistory[entityCombinedHistory.length - 1];
         newHistory[entityId] = entityCombinedHistory.concat(
-          streamMessage.states[entityId]
+          streamStates[entityId]
         );
-        if (
-          streamMessage.states[entityId][0].lu < lastEntityCombinedHistory.lu
-        ) {
+        if (streamStates[entityId][0].lu < lastEntityCombinedHistory.lu) {
           // If the history is out of order we have to sort it.
           newHistory[entityId] = newHistory[entityId].sort(
             (a, b) => a.lu - b.lu
           );
         }
-      } else if (entityId in this.combinedHistory) {
+      } else if (inCombined) {
         newHistory[entityId] = this.combinedHistory[entityId];
       } else {
-        newHistory[entityId] = streamMessage.states[entityId];
+        newHistory[entityId] = streamStates[entityId];
+        return;
       }
-      // Remove old history
-      if (purgeBeforePythonTime && entityId in this.combinedHistory) {
-        const expiredStates = newHistory[entityId].filter(
-          (state) => state.lu < purgeBeforePythonTime
-        );
-        if (!expiredStates.length) {
-          continue;
+      // Remove old history (only entities present in combinedHistory reach
+      // here without an early return).
+      if (purgeBeforePythonTime) {
+        // Single pass: split into kept (lu >= cutoff, preserving order) and
+        // track the last expired state (lu < cutoff) without allocating a
+        // second array.
+        const states = newHistory[entityId];
+        const kept: EntityHistoryState[] = [];
+        let lastExpiredState: EntityHistoryState | undefined;
+        for (const state of states) {
+          if (state.lu < purgeBeforePythonTime) {
+            lastExpiredState = state;
+          } else {
+            kept.push(state);
+          }
         }
-        newHistory[entityId] = newHistory[entityId].filter(
-          (state) => state.lu >= purgeBeforePythonTime
-        );
-        if (
-          newHistory[entityId].length &&
-          newHistory[entityId][0].lu === purgeBeforePythonTime
-        ) {
-          continue;
+        if (!lastExpiredState) {
+          return;
+        }
+        newHistory[entityId] = kept;
+        if (kept.length && kept[0].lu === purgeBeforePythonTime) {
+          return;
         }
         // Update the first entry to the start time state
         // as we need to preserve the start time state and
         // only expire the rest of the history as it ages.
-        const lastExpiredState = expiredStates[expiredStates.length - 1];
         lastExpiredState.lu = purgeBeforePythonTime;
         delete lastExpiredState.lc;
-        newHistory[entityId].unshift(lastExpiredState);
+        kept.unshift(lastExpiredState);
+      }
+    };
+    for (const entityId of Object.keys(this.combinedHistory)) {
+      processEntity(entityId);
+    }
+    for (const entityId of Object.keys(streamStates)) {
+      if (!(entityId in this.combinedHistory)) {
+        processEntity(entityId);
       }
     }
     this.combinedHistory = newHistory;
@@ -346,7 +357,6 @@ const processTimelineEntity = (
       state_localize: computeStateDisplayFromEntityAttributes(
         localize,
         locale,
-        [], // numeric device classes not used for Timeline
         config,
         entities[entityId],
         entityId,
@@ -381,16 +391,18 @@ const processLineChartEntities = (
 ): LineChartUnit => {
   const data: LineChartEntity[] = [];
 
-  Object.keys(entities).forEach((entityId) => {
+  const entityIds = Object.keys(entities);
+  entityIds.forEach((entityId) => {
     const states = entities[entityId];
     const first: EntityHistoryState = states[0];
     const domain = computeDomain(entityId);
+    const useLastUpdated = DOMAINS_USE_LAST_UPDATED.includes(domain);
     const processedStates: LineChartState[] = [];
 
     for (const state of states) {
       let processedState: LineChartState;
 
-      if (DOMAINS_USE_LAST_UPDATED.includes(domain)) {
+      if (useLastUpdated) {
         processedState = {
           state: state.s,
           last_changed: state.lu * 1000,
@@ -412,13 +424,11 @@ const processLineChartEntities = (
         };
       }
 
+      const len = processedStates.length;
       if (
-        processedStates.length > 1 &&
-        equalState(
-          processedState,
-          processedStates[processedStates.length - 1]
-        ) &&
-        equalState(processedState, processedStates[processedStates.length - 2])
+        len > 1 &&
+        equalState(processedState, processedStates[len - 1]) &&
+        equalState(processedState, processedStates[len - 2])
       ) {
         continue;
       }
@@ -444,11 +454,17 @@ const processLineChartEntities = (
   return {
     unit,
     device_class,
-    identifier: Object.keys(entities).join(""),
+    identifier: entityIds.join(""),
     data,
   };
 };
 
+const SPECIAL_DOMAIN_CLASSES: Record<string, string | undefined> = {
+  climate: "temperature",
+  humidifier: "humidity",
+  water_heater: "temperature",
+};
+
 const NUMERICAL_DOMAINS = ["counter", "input_number", "number"];
 
 const isNumericFromDomain = (domain: string) =>
@@ -457,20 +473,12 @@ const isNumericFromDomain = (domain: string) =>
 const isNumericFromAttributes = (attributes: Record<string, any>) =>
   "unit_of_measurement" in attributes || "state_class" in attributes;
 
-const isNumericSensorEntity = (
-  stateObj: HassEntity,
-  sensorNumericalDeviceClasses: string[]
-) =>
-  stateObj.attributes.device_class != null &&
-  sensorNumericalDeviceClasses.includes(stateObj.attributes.device_class);
-
 const BLANK_UNIT = " ";
 
 export const convertStatisticsToHistory = (
   hass: HomeAssistant,
   statistics: Statistics,
   statisticIds: string[],
-  sensorNumericDeviceClasses: string[],
   splitDeviceClasses = false
 ): HistoryResult => {
   // Maintain the statistic id ordering
@@ -498,7 +506,6 @@ export const convertStatisticsToHistory = (
     statsHistoryStates,
     [],
     hass.localize,
-    sensorNumericDeviceClasses,
     splitDeviceClasses,
     true
   );
@@ -528,7 +535,6 @@ export const computeHistory = (
   stateHistory: HistoryStates,
   entityIds: string[],
   localize: LocalizeFunc,
-  sensorNumericalDeviceClasses: string[],
   splitDeviceClasses = false,
   forceNumeric = false
 ): HistoryResult => {
@@ -575,7 +581,6 @@ export const computeHistory = (
       domain,
       currentState,
       numericStateFromHistory,
-      sensorNumericalDeviceClasses,
       forceNumeric
     );
 
@@ -593,14 +598,8 @@ export const computeHistory = (
       }[domain];
     }
 
-    const specialDomainClasses = {
-      climate: "temperature",
-      humidifier: "humidity",
-      water_heater: "temperature",
-    };
-
     const deviceClass: string | undefined =
-      specialDomainClasses[domain] ||
+      SPECIAL_DOMAIN_CLASSES[domain] ||
       (currentState?.attributes || numericStateFromHistory?.a)?.device_class;
 
     const key = computeGroupKey(unit, deviceClass, splitDeviceClasses);
@@ -656,7 +655,6 @@ export const isNumericEntity = (
   domain: string,
   currentState: HassEntity | undefined,
   numericStateFromHistory: EntityHistoryState | undefined,
-  sensorNumericalDeviceClasses: string[],
   forceNumeric = false
 ): boolean =>
   forceNumeric ||
@@ -664,7 +662,7 @@ export const isNumericEntity = (
   (currentState != null && isNumericFromAttributes(currentState.attributes)) ||
   (currentState != null &&
     domain === "sensor" &&
-    isNumericSensorEntity(currentState, sensorNumericalDeviceClasses)) ||
+    isNumericSensorDeviceClass(currentState.attributes.device_class)) ||
   numericStateFromHistory != null;
 
 export const mergeHistoryResults = (
@@ -725,16 +723,18 @@ export const mergeHistoryResults = (
     }
 
     const newLineItem: LineChartUnit = { ...historyItem, data: [] };
+    const historyDataByEntity = new Map(
+      historyItem.data.map((d) => [d.entity_id, d])
+    );
+    const ltsDataByEntity = new Map(ltsItem.data.map((d) => [d.entity_id, d]));
     const entities = new Set([
-      ...historyItem.data.map((d) => d.entity_id),
-      ...ltsItem.data.map((d) => d.entity_id),
+      ...historyDataByEntity.keys(),
+      ...ltsDataByEntity.keys(),
     ]);
 
     for (const entity of entities) {
-      const historyDataItem = historyItem.data.find(
-        (d) => d.entity_id === entity
-      );
-      const ltsDataItem = ltsItem.data.find((d) => d.entity_id === entity);
+      const historyDataItem = historyDataByEntity.get(entity);
+      const ltsDataItem = ltsDataByEntity.get(entity);
 
       if (!historyDataItem || !ltsDataItem) {
         newLineItem.data.push(historyDataItem || ltsDataItem!);

src/data/light.ts

@@ -43,11 +43,6 @@ export const lightSupportsColorMode = (
   mode: LightColorMode
 ) => entity.attributes.supported_color_modes?.includes(mode) || false;
 
-export const lightIsInColorMode = (entity: LightEntity) =>
-  (entity.attributes.color_mode &&
-    modesSupportingColor.includes(entity.attributes.color_mode)) ||
-  false;
-
 export const lightSupportsColor = (entity: LightEntity) =>
   entity.attributes.supported_color_modes?.some((mode) =>
     modesSupportingColor.includes(mode)
@@ -159,5 +154,3 @@ export const computeDefaultFavoriteColors = (
 
   return colors;
 };
-
-export const formatTempColor = (value: number) => `${value} K`;

src/data/logbook.ts

@@ -369,14 +369,10 @@ export const localizeStateMessage = (
   });
 };
 
-export const filterLogbookCompatibleEntities = (
-  entity,
-  sensorNumericDeviceClasses: string[] = []
-) => {
+export const filterLogbookCompatibleEntities = (entity) => {
   const domain = computeStateDomain(entity);
   const continuous =
     CONTINUOUS_DOMAINS.includes(domain) ||
-    (domain === "sensor" &&
-      isNumericEntity(domain, entity, undefined, sensorNumericDeviceClasses));
+    (domain === "sensor" && isNumericEntity(domain, entity, undefined));
   return !continuous;
 };

src/data/sensor.ts

@@ -1,3 +1,4 @@
+import { SENSOR_NUMERIC_DEVICE_CLASSES } from "./sensor_numeric_device_classes";
 import type { HomeAssistant } from "../types";
 
 export const SENSOR_DEVICE_CLASS_BATTERY = "battery";
@@ -11,6 +12,9 @@ export const SENSOR_TIMESTAMP_DEVICE_CLASSES: (string | undefined)[] = [
   "uptime",
 ];
 
+export const isNumericSensorDeviceClass = (deviceClass?: string): boolean =>
+  deviceClass != null && SENSOR_NUMERIC_DEVICE_CLASSES.includes(deviceClass);
+
 export interface SensorDeviceClassUnits {
   units: string[];
 }
@@ -23,28 +27,3 @@ export const getSensorDeviceClassConvertibleUnits = (
     type: "sensor/device_class_convertible_units",
     device_class: deviceClass,
   });
-
-export interface SensorNumericDeviceClasses {
-  numeric_device_classes: string[];
-}
-
-let sensorNumericDeviceClassesCache:
-  | Promise<SensorNumericDeviceClasses>
-  | undefined;
-
-export const getSensorNumericDeviceClasses = async (
-  hass: HomeAssistant
-): Promise<SensorNumericDeviceClasses> => {
-  if (sensorNumericDeviceClassesCache) {
-    return sensorNumericDeviceClassesCache;
-  }
-  sensorNumericDeviceClassesCache = hass
-    .callWS<SensorNumericDeviceClasses>({
-      type: "sensor/numeric_device_classes",
-    })
-    .catch((err: Error) => {
-      sensorNumericDeviceClassesCache = undefined;
-      throw err;
-    });
-  return sensorNumericDeviceClassesCache!;
-};

src/data/sensor_numeric_device_classes.ts

@@ -0,0 +1,63 @@
+// This file is auto-generated from Home Assistant Core's `SensorDeviceClass`
+// (all values minus `NON_NUMERIC_DEVICE_CLASSES`). Do not edit by hand.
+// Regenerate with `script/gen_numeric_device_classes`.
+
+export const SENSOR_NUMERIC_DEVICE_CLASSES: string[] = [
+  "absolute_humidity",
+  "apparent_power",
+  "aqi",
+  "area",
+  "atmospheric_pressure",
+  "battery",
+  "blood_glucose_concentration",
+  "carbon_dioxide",
+  "carbon_monoxide",
+  "conductivity",
+  "current",
+  "data_rate",
+  "data_size",
+  "distance",
+  "duration",
+  "energy",
+  "energy_distance",
+  "energy_storage",
+  "frequency",
+  "gas",
+  "humidity",
+  "illuminance",
+  "irradiance",
+  "moisture",
+  "monetary",
+  "nitrogen_dioxide",
+  "nitrogen_monoxide",
+  "nitrous_oxide",
+  "ozone",
+  "ph",
+  "pm1",
+  "pm10",
+  "pm25",
+  "pm4",
+  "power",
+  "power_factor",
+  "precipitation",
+  "precipitation_intensity",
+  "pressure",
+  "reactive_energy",
+  "reactive_power",
+  "signal_strength",
+  "sound_pressure",
+  "speed",
+  "sulphur_dioxide",
+  "temperature",
+  "temperature_delta",
+  "volatile_organic_compounds",
+  "volatile_organic_compounds_parts",
+  "voltage",
+  "volume",
+  "volume_flow_rate",
+  "volume_storage",
+  "water",
+  "weight",
+  "wind_direction",
+  "wind_speed",
+];

src/data/supervisor/update.ts

@@ -6,7 +6,9 @@ export interface SupervisorUpdateConfig {
   core_backup_before_update: boolean;
 }
 
-export const getSupervisorUpdateConfig = async (hass: HomeAssistant) =>
+export const getSupervisorUpdateConfig = async (
+  hass: Pick<HomeAssistant, "callWS">
+) =>
   hass.callWS<SupervisorUpdateConfig>({
     type: "hassio/update/config/info",
   });

src/data/timer.ts

@@ -3,8 +3,10 @@ import type {
   HassEntityAttributeBase,
   HassEntityBase,
 } from "home-assistant-js-websocket";
+import { createDurationData } from "../common/datetime/create_duration_data";
 import durationToSeconds from "../common/datetime/duration_to_seconds";
 import secondsToDuration from "../common/datetime/seconds_to_duration";
+import type { HaDurationData } from "../components/ha-duration-input";
 import type { HomeAssistant } from "../types";
 
 export type TimerEntity = HassEntityBase & {
@@ -100,3 +102,11 @@ export const computeDisplayTimer = (
 
   return display;
 };
+
+// Prefill for the duration input: always the configured duration, independent
+// of the live countdown. The field is meant to be edited, not to mirror the
+// remaining time.
+export const timerDurationData = (
+  stateObj: HassEntity
+): HaDurationData | undefined =>
+  createDurationData(stateObj.attributes.duration);

src/data/update.ts

@@ -77,7 +77,10 @@ export const updateButtonIsDisabled = (entity: UpdateEntity): boolean =>
 export const updateIsInstalling = (entity: UpdateEntity): boolean =>
   !!entity.attributes.in_progress;
 
-export const updateReleaseNotes = (hass: HomeAssistant, entityId: string) =>
+export const updateReleaseNotes = (
+  hass: Pick<HomeAssistant, "callWS">,
+  entityId: string
+) =>
   hass.callWS<string | null>({
     type: "update/release_notes",
     entity_id: entityId,

src/dialogs/config-flow/dialog-data-entry-flow.ts

@@ -403,6 +403,7 @@ class DataEntryFlowDialog extends LitElement {
                           .flowConfig=${this._params.flowConfig}
                           .step=${this._step}
                           .hass=${this.hass}
+                          .domain=${this._params.domain ?? this._step.handler}
                           @flow-step-footer-state-changed=${this
                             ._handleFooterStateChanged}
                         ></step-flow-form>

src/dialogs/config-flow/step-flow-form.ts

@@ -35,6 +35,10 @@ class StepFlowForm extends LitElement {
 
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  // The integration domain this flow belongs to. Unlike `step.handler`, this is
+  // the domain even for options flows (where the handler is the config entry id).
+  @property({ attribute: false }) public domain?: string;
+
   @state() private _loading = false;
 
   @state() private _stepData?: Record<string, any>;
@@ -108,7 +112,7 @@ class StepFlowForm extends LitElement {
               .computeHelper=${this._helperCallback}
               .computeError=${this._errorCallback}
               .localizeValue=${this._localizeValueCallback}
-              .context=${{ handler: step.handler }}
+              .context=${{ handler: step.handler, domain: this.domain }}
             ></ha-form>`
           : nothing}
       </div>

src/dialogs/form/dialog-form.ts

@@ -7,6 +7,7 @@ import "../../components/ha-button";
 import "../../components/ha-form/ha-form";
 import "../../components/ha-dialog-footer";
 import "../../components/ha-dialog";
+import { DirtyStateProviderMixin } from "../../mixins/dirty-state-provider-mixin";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import type { HassDialog, ShowDialogParams } from "../make-dialog-manager";
@@ -20,7 +21,7 @@ interface StackEntry {
 
 @customElement("dialog-form")
 export class DialogForm
-  extends LitElement
+  extends DirtyStateProviderMixin<FormDialogData>()(LitElement)
   implements HassDialog<FormDialogData>
 {
   @property({ attribute: false }) public hass?: HomeAssistant;
@@ -39,6 +40,7 @@ export class DialogForm
     this._params = params;
     this._data = params.data || {};
     this._open = true;
+    this._initDirtyTracking({ type: "deep" }, this._data);
   }
 
   public closeDialog(): boolean {
@@ -62,6 +64,7 @@ export class DialogForm
     const nested = ev.detail.dialogParams as FormDialogParams;
     this._params = nested;
     this._data = nested?.data || {};
+    this._initDirtyTracking({ type: "deep" }, this._data);
   };
 
   private _popStack(): string | undefined {
@@ -72,6 +75,7 @@ export class DialogForm
     this._stack = this._stack.slice(0, -1);
     this._params = prev.params;
     this._data = prev.data;
+    this._initDirtyTracking({ type: "deep" }, this._data);
     return prev.nestedField;
   }
 
@@ -115,6 +119,7 @@ export class DialogForm
       : data;
 
     this._data = deepClone({ ...this._data, [nestedField]: newValue });
+    this._updateDirtyState(this._data);
   }
 
   private _cancel(): void {
@@ -131,6 +136,7 @@ export class DialogForm
 
   private _valueChanged(ev: CustomEvent): void {
     this._data = ev.detail.value;
+    this._updateDirtyState(this._data);
   }
 
   protected render() {
@@ -142,7 +148,7 @@ export class DialogForm
       <ha-dialog
         .open=${this._open}
         header-title=${this._params.title}
-        prevent-scrim-close
+        .preventScrimClose=${this.isDirtyState}
         @closed=${this._dialogClosed}
       >
         <ha-form

src/dialogs/generic/dialog-box.ts

@@ -13,11 +13,18 @@ import "../../components/ha-textarea";
 import type { HaTextArea } from "../../components/ha-textarea";
 import "../../components/input/ha-input";
 import type { HaInput } from "../../components/input/ha-input";
+import { DirtyStateProviderMixin } from "../../mixins/dirty-state-provider-mixin";
 import type { HomeAssistant } from "../../types";
 import type { DialogBoxParams } from "./show-dialog-box";
 
+interface DialogBoxDirtyState {
+  value: string;
+}
+
 @customElement("dialog-box")
-class DialogBox extends LitElement {
+class DialogBox extends DirtyStateProviderMixin<DialogBoxDirtyState>()(
+  LitElement
+) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @state() private _params?: DialogBoxParams;
@@ -43,6 +50,10 @@ class DialogBox extends LitElement {
     this._params = params;
     this._validInput = true;
     this._open = true;
+    this._initDirtyTracking(
+      { type: "deep" },
+      { value: params.defaultValue ?? "" }
+    );
     await this.updateComplete;
     this._validateInput();
   }
@@ -77,7 +88,7 @@ class DialogBox extends LitElement {
       <ha-dialog
         .open=${this._open}
         type=${confirmPrompt ? "alert" : "standard"}
-        ?prevent-scrim-close=${confirmPrompt}
+        .preventScrimClose=${!!this._params.confirmation || this.isDirtyState}
         @closed=${this._dialogClosed}
         aria-labelledby="dialog-box-title"
         aria-describedby="dialog-box-description"
@@ -212,6 +223,7 @@ class DialogBox extends LitElement {
     if (this._params!.confirm) {
       this._params!.confirm(this._textField?.value);
     }
+    this._markDirtyStateClean();
     this._closeDialog();
   }
 
@@ -219,6 +231,9 @@ class DialogBox extends LitElement {
     this._validInput = this._params?.prompt
       ? (this._textField?.checkValidity() ?? true)
       : true;
+    if (this._params?.prompt) {
+      this._updateDirtyState({ value: this._textField?.value ?? "" });
+    }
   }
 
   private _closeDialog() {

src/dialogs/image-cropper-dialog/image-cropper-dialog.ts

@@ -9,6 +9,7 @@ import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-button";
 import "../../components/ha-dialog-footer";
 import "../../components/ha-dialog";
+import { DirtyStateProviderMixin } from "../../mixins/dirty-state-provider-mixin";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import type { HassDialog } from "../make-dialog-manager";
@@ -16,7 +17,7 @@ import type { HaImageCropperDialogParams } from "./show-image-cropper-dialog";
 
 @customElement("image-cropper-dialog")
 export class HaImagecropperDialog
-  extends LitElement
+  extends DirtyStateProviderMixin<Cropper.Data>()(LitElement)
   implements HassDialog<HaImageCropperDialogParams>
 {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -29,6 +30,8 @@ export class HaImagecropperDialog
 
   private _cropper?: Cropper;
 
+  private _cropReady = false;
+
   @state() private _isTargetAspectRatio?: boolean;
 
   public showDialog(params: HaImageCropperDialogParams): void {
@@ -40,6 +43,7 @@ export class HaImagecropperDialog
     this._open = false;
     this._cropper?.destroy();
     this._cropper = undefined;
+    this._cropReady = false;
     this._isTargetAspectRatio = false;
     return true;
   }
@@ -63,6 +67,13 @@ export class HaImagecropperDialog
         ready: () => {
           this._isTargetAspectRatio = this._checkMatchAspectRatio();
           URL.revokeObjectURL(this._image!.src);
+          this._initDirtyTracking({ type: "deep" }, this._cropper!.getData());
+          this._cropReady = true;
+        },
+        crop: () => {
+          if (this._cropReady) {
+            this._updateDirtyState(this._cropper!.getData());
+          }
         },
       });
     } else {
@@ -100,6 +111,7 @@ export class HaImagecropperDialog
         header-title=${this.hass.localize(
           "ui.dialogs.image_cropper.crop_image"
         )}
+        .preventScrimClose=${this.isDirtyState}
         @closed=${this._dialogClosed}
       >
         <div

src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts

@@ -14,6 +14,7 @@ import {
   lightSupportsColor,
   lightSupportsColorMode,
 } from "../../../../data/light";
+import { DirtyStateProviderMixin } from "../../../../mixins/dirty-state-provider-mixin";
 import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import "./light-color-rgb-picker";
@@ -22,8 +23,14 @@ import type { LightColorFavoriteDialogParams } from "./show-dialog-light-color-f
 
 export type LightPickerMode = "color_temp" | "color";
 
+interface LightColorFavoriteState {
+  color?: LightColor;
+}
+
 @customElement("dialog-light-color-favorite")
-class DialogLightColorFavorite extends LitElement {
+class DialogLightColorFavorite extends DirtyStateProviderMixin<LightColorFavoriteState>()(
+  LitElement
+) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @state() _dialogParams?: LightColorFavoriteDialogParams;
@@ -46,6 +53,7 @@ class DialogLightColorFavorite extends LitElement {
     this._color = dialogParams.initialColor ?? this._computeCurrentColor();
     this._updateModes();
     this._open = true;
+    this._initDirtyTracking({ type: "deep" }, { color: this._color });
   }
 
   public closeDialog(): void {
@@ -107,6 +115,7 @@ class DialogLightColorFavorite extends LitElement {
 
   private _colorChanged(ev: CustomEvent) {
     this._color = ev.detail;
+    this._updateDirtyState({ color: this._color });
   }
 
   get stateObj() {
@@ -130,6 +139,7 @@ class DialogLightColorFavorite extends LitElement {
       return;
     }
     this._dialogParams?.submit?.(this._color);
+    this._markDirtyStateClean();
     this.closeDialog();
   }
 
@@ -150,6 +160,7 @@ class DialogLightColorFavorite extends LitElement {
       <ha-dialog
         .open=${this._open}
         .headerTitle=${this._dialogParams?.title}
+        .preventScrimClose=${this.isDirtyState}
         @closed=${this._dialogClosed}
       >
         <div class="header">

src/dialogs/more-info/const.ts

@@ -120,8 +120,7 @@ export const computeShowHistoryComponent = (
 
 export const computeShowLogBookComponent = (
   hass: HomeAssistant,
-  entityId: string,
-  sensorNumericalDeviceClasses: string[] = []
+  entityId: string
 ): boolean => {
   if (!isComponentLoaded(hass.config, "logbook")) {
     return false;
@@ -135,13 +134,7 @@ export const computeShowLogBookComponent = (
   const domain = computeDomain(entityId);
   if (
     CONTINUOUS_DOMAINS.includes(domain) ||
-    (domain === "sensor" &&
-      isNumericEntity(
-        domain,
-        stateObj,
-        undefined,
-        sensorNumericalDeviceClasses
-      )) ||
+    (domain === "sensor" && isNumericEntity(domain, stateObj, undefined)) ||
     DOMAINS_MORE_INFO_NO_HISTORY.includes(domain)
   ) {
     return false;

src/dialogs/more-info/controls/more-info-timer.ts

@@ -1,8 +1,12 @@
+import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import "../../../components/ha-button";
+import "../../../components/ha-duration-input";
+import type { HaDurationData } from "../../../components/ha-duration-input";
 import type { TimerEntity } from "../../../data/timer";
-import type { HomeAssistant } from "../../../types";
+import { timerDurationData } from "../../../data/timer";
+import type { HomeAssistant, ValueChangedEvent } from "../../../types";
 
 @customElement("more-info-timer")
 class MoreInfoTimer extends LitElement {
@@ -10,26 +14,46 @@ class MoreInfoTimer extends LitElement {
 
   @property({ attribute: false }) public stateObj?: TimerEntity;
 
+  @state() private _duration?: HaDurationData;
+
+  protected willUpdate(changedProps: PropertyValues<this>): void {
+    super.willUpdate(changedProps);
+    // Seed the field once from the configured duration and keep it static,
+    // so it never jumps to the live remaining time as the timer ticks.
+    if (this._duration === undefined && this.stateObj) {
+      this._duration = timerDurationData(this.stateObj);
+    }
+  }
+
   protected render() {
     if (!this.hass || !this.stateObj) {
       return nothing;
     }
 
+    const timerState = this.stateObj.state;
+
     return html`
+      <ha-duration-input
+        .data=${this._duration}
+        required
+        @value-changed=${this._durationChanged}
+      ></ha-duration-input>
       <div class="actions">
-        ${this.stateObj.state === "idle" || this.stateObj.state === "paused"
+        ${timerState === "idle"
           ? html`
-              <ha-button
-                appearance="plain"
-                size="s"
-                .action=${"start"}
-                @click=${this._handleActionClick}
-              >
-                ${this.hass!.localize("ui.card.timer.actions.start")}
+              <ha-button appearance="plain" size="s" @click=${this._start}>
+                ${this.hass.localize("ui.card.timer.actions.start")}
               </ha-button>
             `
-          : ""}
-        ${this.stateObj.state === "active"
+          : nothing}
+        ${timerState === "active" || timerState === "paused"
+          ? html`
+              <ha-button appearance="plain" size="s" @click=${this._start}>
+                ${this.hass.localize("ui.card.timer.actions.set")}
+              </ha-button>
+            `
+          : nothing}
+        ${timerState === "active"
           ? html`
               <ha-button
                 appearance="plain"
@@ -37,11 +61,23 @@ class MoreInfoTimer extends LitElement {
                 .action=${"pause"}
                 @click=${this._handleActionClick}
               >
-                ${this.hass!.localize("ui.card.timer.actions.pause")}
+                ${this.hass.localize("ui.card.timer.actions.pause")}
               </ha-button>
             `
-          : ""}
-        ${this.stateObj.state === "active" || this.stateObj.state === "paused"
+          : nothing}
+        ${timerState === "paused"
+          ? html`
+              <ha-button
+                appearance="plain"
+                size="s"
+                .action=${"start"}
+                @click=${this._handleActionClick}
+              >
+                ${this.hass.localize("ui.card.timer.actions.start")}
+              </ha-button>
+            `
+          : nothing}
+        ${timerState === "active" || timerState === "paused"
           ? html`
               <ha-button
                 appearance="plain"
@@ -49,7 +85,7 @@ class MoreInfoTimer extends LitElement {
                 .action=${"cancel"}
                 @click=${this._handleActionClick}
               >
-                ${this.hass!.localize("ui.card.timer.actions.cancel")}
+                ${this.hass.localize("ui.card.timer.actions.cancel")}
               </ha-button>
               <ha-button
                 appearance="plain"
@@ -57,14 +93,30 @@ class MoreInfoTimer extends LitElement {
                 .action=${"finish"}
                 @click=${this._handleActionClick}
               >
-                ${this.hass!.localize("ui.card.timer.actions.finish")}
+                ${this.hass.localize("ui.card.timer.actions.finish")}
               </ha-button>
             `
-          : ""}
+          : nothing}
       </div>
     `;
   }
 
+  private _durationChanged(
+    ev: ValueChangedEvent<HaDurationData | undefined>
+  ): void {
+    this._duration = ev.detail.value;
+  }
+
+  // Used by idle "Start" and active/paused "Set": (re)starts the timer with the
+  // entered duration. timer.start has no upper bound, so values beyond the
+  // configured duration are accepted.
+  private _start(): void {
+    this.hass.callService("timer", "start", {
+      entity_id: this.stateObj!.entity_id,
+      ...(this._duration ? { duration: this._duration } : {}),
+    });
+  }
+
   private _handleActionClick(e: MouseEvent): void {
     const action = (e.currentTarget as any).action;
     this.hass.callService("timer", action, {
@@ -73,10 +125,16 @@ class MoreInfoTimer extends LitElement {
   }
 
   static styles = css`
+    ha-duration-input {
+      display: flex;
+      justify-content: center;
+      margin: var(--ha-space-4) 0 var(--ha-space-2);
+    }
     .actions {
       margin: var(--ha-space-2) 0;
       display: flex;
       flex-wrap: wrap;
+      gap: var(--ha-space-2);
       justify-content: center;
     }
   `;

src/dialogs/more-info/controls/more-info-update.ts

@@ -1,9 +1,14 @@
+import { consume } from "@lit/context";
+import type { HassConfig } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { BINARY_STATE_OFF } from "../../../common/const";
 import { relativeTime } from "../../../common/datetime/relative_time";
+import { consumeLocalize } from "../../../common/decorators/consume-context-entry";
+import { transform } from "../../../common/decorators/transform";
 import { supportsFeature } from "../../../common/entity/supports-feature";
+import type { LocalizeFunc } from "../../../common/translations/localize";
 import "../../../components/buttons/ha-progress-button";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
@@ -15,10 +20,18 @@ import "../../../components/item/ha-row-item";
 import "../../../components/progress/ha-progress-bar";
 import type { BackupConfig } from "../../../data/backup";
 import { fetchBackupConfig } from "../../../data/backup";
+import {
+  apiContext,
+  configContext,
+  formattersContext,
+  internationalizationContext,
+  statesContext,
+} from "../../../data/context";
 import { UNAVAILABLE, UNKNOWN } from "../../../data/entity/entity";
 import type { EntitySources } from "../../../data/entity/entity_sources";
 import { fetchEntitySourcesWithCache } from "../../../data/entity/entity_sources";
 import { getSupervisorUpdateConfig } from "../../../data/supervisor/update";
+import type { FrontendLocaleData } from "../../../data/translation";
 import type { UpdateEntity, UpdateType } from "../../../data/update";
 import {
   getUpdateType,
@@ -28,15 +41,49 @@ import {
   updateIsInstalling,
   updateReleaseNotes,
 } from "../../../data/update";
-import type { HomeAssistant } from "../../../types";
+import type {
+  HomeAssistant,
+  HomeAssistantApi,
+  HomeAssistantConfig,
+  HomeAssistantFormatters,
+  HomeAssistantInternationalization,
+} from "../../../types";
 import { showAlertDialog } from "../../generic/show-dialog-box";
 
 @customElement("more-info-update")
 class MoreInfoUpdate extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property({ attribute: false }) public stateObj?: UpdateEntity;
 
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  @transform<HomeAssistantInternationalization, FrontendLocaleData>({
+    transformer: ({ locale }) => locale,
+  })
+  private _locale!: FrontendLocaleData;
+
+  @state()
+  @consume({ context: formattersContext, subscribe: true })
+  private _formatters!: HomeAssistantFormatters;
+
+  @state()
+  @consume({ context: apiContext, subscribe: true })
+  private _api!: HomeAssistantApi;
+
+  @state()
+  @consume({ context: statesContext, subscribe: true })
+  private _states!: HomeAssistant["states"];
+
+  @state()
+  @consume({ context: configContext, subscribe: true })
+  @transform<HomeAssistantConfig, HassConfig>({
+    transformer: ({ config }) => config,
+  })
+  private _config!: HassConfig;
+
   @state() private _releaseNotes?: string | null;
 
   @state() private _error?: string;
@@ -51,7 +98,7 @@ class MoreInfoUpdate extends LitElement {
 
   private async _fetchBackupConfig() {
     try {
-      const { config } = await fetchBackupConfig(this.hass);
+      const { config } = await fetchBackupConfig(this._api);
       this._backupConfig = config;
     } catch (err) {
       // ignore error, because user will get a manual backup option
@@ -62,7 +109,7 @@ class MoreInfoUpdate extends LitElement {
 
   private async _fetchUpdateBackupConfig(type: UpdateType) {
     try {
-      const config = await getSupervisorUpdateConfig(this.hass);
+      const config = await getSupervisorUpdateConfig(this._api);
 
       // for home assistant and OS updates
       if (this._isHaOrOsUpdate(type)) {
@@ -81,7 +128,10 @@ class MoreInfoUpdate extends LitElement {
   }
 
   private async _fetchEntitySources() {
-    this._entitySources = await fetchEntitySourcesWithCache(this.hass);
+    this._entitySources = await fetchEntitySourcesWithCache({
+      callWS: this._api.callWS,
+      states: this._states,
+    });
   }
 
   private _isHaOrOsUpdate(type: UpdateType): boolean {
@@ -111,10 +161,10 @@ class MoreInfoUpdate extends LitElement {
 
       if (!isBackupConfigValid) {
         return {
-          title: this.hass.localize(
+          title: this._localize(
             "ui.dialogs.more_info_control.update.create_backup.manual"
           ),
-          description: this.hass.localize(
+          description: this._localize(
             "ui.dialogs.more_info_control.update.create_backup.manual_description"
           ),
         };
@@ -127,22 +177,22 @@ class MoreInfoUpdate extends LitElement {
       const now = new Date();
 
       return {
-        title: this.hass.localize(
+        title: this._localize(
           "ui.dialogs.more_info_control.update.create_backup.automatic"
         ),
         description: lastAutomaticBackupDate
-          ? this.hass.localize(
+          ? this._localize(
               "ui.dialogs.more_info_control.update.create_backup.automatic_description_last",
               {
                 relative_time: relativeTime(
                   lastAutomaticBackupDate,
-                  this.hass.locale,
+                  this._locale,
                   now,
                   true
                 ),
               }
             )
-          : this.hass.localize(
+          : this._localize(
               "ui.dialogs.more_info_control.update.create_backup.automatic_description_none"
             ),
       };
@@ -152,11 +202,11 @@ class MoreInfoUpdate extends LitElement {
     if (updateType === "addon") {
       const version = this.stateObj.attributes.installed_version;
       return {
-        title: this.hass.localize(
+        title: this._localize(
           "ui.dialogs.more_info_control.update.create_backup.app"
         ),
         description: version
-          ? this.hass.localize(
+          ? this._localize(
               "ui.dialogs.more_info_control.update.create_backup.app_description",
               { version: version }
             )
@@ -166,7 +216,7 @@ class MoreInfoUpdate extends LitElement {
 
     // Fallback to generic UI
     return {
-      title: this.hass.localize(
+      title: this._localize(
         "ui.dialogs.more_info_control.update.create_backup.generic"
       ),
     };
@@ -174,7 +224,7 @@ class MoreInfoUpdate extends LitElement {
 
   protected render() {
     if (
-      !this.hass ||
+      !this._localize ||
       !this.stateObj ||
       this.stateObj.state === UNAVAILABLE ||
       this.stateObj.state === UNKNOWN
@@ -202,26 +252,26 @@ class MoreInfoUpdate extends LitElement {
             : nothing}
           <div class="row">
             <div class="key">
-              ${this.hass.formatEntityAttributeName(
+              ${this._formatters.formatEntityAttributeName(
                 this.stateObj,
                 "installed_version"
               )}
             </div>
             <div class="value">
               ${this.stateObj.attributes.installed_version ??
-              this.hass.localize("state.default.unavailable")}
+              this._localize("state.default.unavailable")}
             </div>
           </div>
           <div class="row">
             <div class="key">
-              ${this.hass.formatEntityAttributeName(
+              ${this._formatters.formatEntityAttributeName(
                 this.stateObj,
                 "latest_version"
               )}
             </div>
             <div class="value">
               ${this.stateObj.attributes.latest_version ??
-              this.hass.localize("state.default.unavailable")}
+              this._localize("state.default.unavailable")}
             </div>
           </div>
 
@@ -233,7 +283,7 @@ class MoreInfoUpdate extends LitElement {
                     target="_blank"
                     rel="noreferrer"
                   >
-                    ${this.hass.localize(
+                    ${this._localize(
                       "ui.dialogs.more_info_control.update.release_announcement"
                     )}
                   </a>
@@ -300,7 +350,7 @@ class MoreInfoUpdate extends LitElement {
                   appearance="plain"
                   @click=${this._handleClearSkipped}
                 >
-                  ${this.hass.localize(
+                  ${this._localize(
                     "ui.dialogs.more_info_control.update.clear_skipped"
                   )}
                 </ha-button>
@@ -313,9 +363,7 @@ class MoreInfoUpdate extends LitElement {
                   this.stateObj.state === BINARY_STATE_OFF ||
                   updateIsInstalling(this.stateObj)}
                 >
-                  ${this.hass.localize(
-                    "ui.dialogs.more_info_control.update.skip"
-                  )}
+                  ${this._localize("ui.dialogs.more_info_control.update.skip")}
                 </ha-button>
               `}
           ${supportsFeature(this.stateObj, UpdateEntityFeature.INSTALL)
@@ -325,7 +373,7 @@ class MoreInfoUpdate extends LitElement {
                   .loading=${updateIsInstalling(this.stateObj)}
                   .disabled=${updateButtonIsDisabled(this.stateObj)}
                 >
-                  ${this.hass.localize(
+                  ${this._localize(
                     "ui.dialogs.more_info_control.update.update"
                   )}
                 </ha-button>
@@ -352,7 +400,7 @@ class MoreInfoUpdate extends LitElement {
       this._fetchEntitySources().then(() => {
         const type = getUpdateType(this.stateObj!, this._entitySources!);
         if (
-          isComponentLoaded(this.hass.config, "hassio") &&
+          isComponentLoaded(this._config, "hassio") &&
           ["addon", "home_assistant", "home_assistant_os"].includes(type)
         ) {
           this._fetchUpdateBackupConfig(type);
@@ -374,7 +422,7 @@ class MoreInfoUpdate extends LitElement {
   private async _fetchReleaseNotes() {
     try {
       this._releaseNotes = await updateReleaseNotes(
-        this.hass,
+        this._api,
         this.stateObj!.entity_id
       );
     } catch (err: any) {
@@ -405,7 +453,7 @@ class MoreInfoUpdate extends LitElement {
       installData.version = this.stateObj!.attributes.latest_version;
     }
 
-    this.hass.callService("update", "install", installData);
+    this._api.callService("update", "install", installData);
   }
 
   private _createBackupChanged(ev) {
@@ -415,22 +463,22 @@ class MoreInfoUpdate extends LitElement {
   private _handleSkip(): void {
     if (this.stateObj!.attributes.auto_update) {
       showAlertDialog(this, {
-        title: this.hass.localize(
+        title: this._localize(
           "ui.dialogs.more_info_control.update.auto_update_enabled_title"
         ),
-        text: this.hass.localize(
+        text: this._localize(
           "ui.dialogs.more_info_control.update.auto_update_enabled_text"
         ),
       });
       return;
     }
-    this.hass.callService("update", "skip", {
+    this._api.callService("update", "skip", {
       entity_id: this.stateObj!.entity_id,
     });
   }
 
   private _handleClearSkipped(): void {
-    this.hass.callService("update", "clear_skipped", {
+    this._api.callService("update", "clear_skipped", {
       entity_id: this.stateObj!.entity_id,
     });
   }

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -62,7 +62,6 @@ import {
 import { subscribeLabFeature } from "../../data/labs";
 import type { ItemType } from "../../data/search";
 import { SearchableDomains } from "../../data/search";
-import { getSensorNumericDeviceClasses } from "../../data/sensor";
 import { DirtyStateProviderMixin } from "../../mixins/dirty-state-provider-mixin";
 import type { EntitySettingsState } from "../../panels/config/entities/entity-registry-settings-editor";
 import type { Helper } from "../../panels/config/helpers/const";
@@ -164,8 +163,6 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
 
   @state() private _isEscapeEnabled = true;
 
-  @state() private _sensorNumericDeviceClasses?: string[] = [];
-
   @state() private _newTriggersAndConditions = false;
 
   protected scrollFadeThreshold = 24;
@@ -257,11 +254,7 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
     return (
       DOMAINS_WITH_MORE_INFO.includes(domain) &&
       (computeShowHistoryComponent(this.hass, this._entityId!) ||
-        computeShowLogBookComponent(
-          this.hass,
-          this._entityId!,
-          this._sensorNumericDeviceClasses
-        ))
+        computeShowLogBookComponent(this.hass, this._entityId!))
     );
   }
 
@@ -537,11 +530,6 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
     this._setView("related");
   }
 
-  private async _loadNumericDeviceClasses() {
-    const deviceClasses = await getSensorNumericDeviceClasses(this.hass);
-    this._sensorNumericDeviceClasses = deviceClasses.numeric_device_classes;
-  }
-
   protected render() {
     if (!this._entityId) {
       return nothing;
@@ -952,7 +940,6 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
     super.firstUpdated(changedProps);
     this.addEventListener("close-dialog", () => this.closeDialog());
     this.addEventListener("close-child-view", () => this._goBack());
-    this._loadNumericDeviceClasses();
   }
 
   protected updated(changedProps: PropertyValues) {
@@ -1103,6 +1090,7 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
         .title .breadcrumb {
           color: var(--secondary-text-color);
           font-size: var(--ha-font-size-m);
+          font-family: var(--ha-font-family-heading, inherit);
           line-height: 16px;
           --mdc-icon-size: 16px;
           padding: var(--ha-space-1);

src/dialogs/more-info/ha-more-info-history-and-logbook.ts

@@ -1,6 +1,5 @@
-import type { PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import type { HomeAssistant } from "../../types";
 import {
   computeShowHistoryComponent,
@@ -8,7 +7,6 @@ import {
 } from "./const";
 import "./ha-more-info-history";
 import "./ha-more-info-logbook";
-import { getSensorNumericDeviceClasses } from "../../data/sensor";
 
 @customElement("ha-more-info-history-and-logbook")
 export class MoreInfoHistoryAndLogbook extends LitElement {
@@ -16,18 +14,6 @@ export class MoreInfoHistoryAndLogbook extends LitElement {
 
   @property({ attribute: false }) public entityId!: string;
 
-  @state() private _sensorNumericDeviceClasses?: string[] = [];
-
-  private async _loadNumericDeviceClasses() {
-    const deviceClasses = await getSensorNumericDeviceClasses(this.hass);
-    this._sensorNumericDeviceClasses = deviceClasses.numeric_device_classes;
-  }
-
-  protected firstUpdated(changedProps: PropertyValues<this>) {
-    super.firstUpdated(changedProps);
-    this._loadNumericDeviceClasses();
-  }
-
   protected render() {
     return html`
       ${computeShowHistoryComponent(this.hass, this.entityId)
@@ -38,11 +24,7 @@ export class MoreInfoHistoryAndLogbook extends LitElement {
             ></ha-more-info-history>
           `
         : ""}
-      ${computeShowLogBookComponent(
-        this.hass,
-        this.entityId,
-        this._sensorNumericDeviceClasses
-      )
+      ${computeShowLogBookComponent(this.hass, this.entityId)
         ? html`
             <ha-more-info-logbook
               .hass=${this.hass}

src/dialogs/more-info/ha-more-info-history.ts

@@ -19,7 +19,6 @@ import type {
   StatisticsTypes,
 } from "../../data/recorder";
 import { fetchStatistics, getStatisticMetadata } from "../../data/recorder";
-import { getSensorNumericDeviceClasses } from "../../data/sensor";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 
@@ -246,28 +245,6 @@ export class MoreInfoHistory extends LitElement {
       this._unsubscribeHistory();
     }
 
-    // Mark as subscribing before the await to prevent re-entrant calls
-    const sentinel = Promise.resolve(undefined) as NonNullable<
-      typeof this._subscribed
-    >;
-    this._subscribed = sentinel;
-
-    let sensorNumericDeviceClasses: string[];
-    try {
-      ({ numeric_device_classes: sensorNumericDeviceClasses } =
-        await getSensorNumericDeviceClasses(this.hass));
-    } catch (_err) {
-      if (this._subscribed === sentinel) {
-        this._subscribed = undefined;
-      }
-      return;
-    }
-
-    // Bail out if a newer call replaced our sentinel while we were awaiting
-    if (this._subscribed !== sentinel) {
-      return;
-    }
-
     this._subscribed = subscribeHistoryStatesTimeWindow(
       this.hass!,
       (combinedHistory) => {
@@ -279,8 +256,7 @@ export class MoreInfoHistory extends LitElement {
           this.hass!,
           combinedHistory,
           [this.entityId],
-          this.hass!.localize,
-          sensorNumericDeviceClasses
+          this.hass!.localize
         );
       },
       24,

src/dialogs/more-info/ha-more-info-info.ts

@@ -1,10 +1,8 @@
 import type { HassEntity } from "home-assistant-js-websocket";
-import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { computeDomain } from "../../common/entity/compute_domain";
 import type { ExtEntityRegistryEntry } from "../../data/entity/entity_registry";
-import { getSensorNumericDeviceClasses } from "../../data/sensor";
 import type { HomeAssistant } from "../../types";
 import {
   computeShowHistoryComponent,
@@ -30,18 +28,6 @@ export class MoreInfoInfo extends LitElement {
 
   @property({ attribute: false }) public data?: Record<string, any>;
 
-  @state() private _sensorNumericDeviceClasses?: string[] = [];
-
-  private async _loadNumericDeviceClasses() {
-    const deviceClasses = await getSensorNumericDeviceClasses(this.hass);
-    this._sensorNumericDeviceClasses = deviceClasses.numeric_device_classes;
-  }
-
-  protected firstUpdated(changedProps: PropertyValues<this>) {
-    super.firstUpdated(changedProps);
-    this._loadNumericDeviceClasses();
-  }
-
   protected render() {
     const entityId = this.entityId;
     const stateObj = this.hass.states[entityId] as HassEntity | undefined;
@@ -92,11 +78,7 @@ export class MoreInfoInfo extends LitElement {
                 .entityId=${this.entityId}
               ></ha-more-info-history>`}
           ${DOMAINS_WITH_MORE_INFO.includes(domain) ||
-          !computeShowLogBookComponent(
-            this.hass,
-            entityId,
-            this._sensorNumericDeviceClasses
-          )
+          !computeShowLogBookComponent(this.hass, entityId)
             ? ""
             : html`<ha-more-info-logbook
                 .hass=${this.hass}

src/dialogs/more-info/more-info-content.ts

@@ -22,6 +22,7 @@ interface EntityInfo {
   entityId: string;
   entityName: string | undefined;
   areaId: string | undefined;
+  deviceId: string | undefined;
 }
 
 @customElement("more-info-content")
@@ -120,7 +121,7 @@ class MoreInfoContent extends LitElement {
           hass.entities,
           hass.devices
         );
-        const { area } = getEntityContext(
+        const { area, device } = getEntityContext(
           stateObj,
           hass.entities,
           hass.devices,
@@ -128,7 +129,8 @@ class MoreInfoContent extends LitElement {
           hass.floors
         );
         const areaId = area?.area_id;
-        return { entityId, entityName, areaId };
+        const deviceId = device?.id;
+        return { entityId, entityName, areaId, deviceId };
       })
       .filter(Boolean) as EntityInfo[];
 
@@ -140,10 +142,20 @@ class MoreInfoContent extends LitElement {
     const areaIds = new Set(entityInfos.map((info) => info.areaId));
     const allSameArea = areaIds.size === 1;
 
-    // Build name and state content config based on conditions
-    const name: EntityNameItem[] = [{ type: "device" }];
+    // Check if all entities belong to the same device
+    const deviceIds = new Set(entityInfos.map((info) => info.deviceId));
+    const allSameDevice = deviceIds.size === 1;
 
-    if (!allSameEntityName) {
+    // Build name and state content config based on conditions. The device name
+    // is redundant when every member belongs to the same device, so omit it
+    // (and fall back to the entity name so the tile still has a label).
+    const name: EntityNameItem[] = [];
+
+    if (!allSameDevice) {
+      name.push({ type: "device" });
+    }
+
+    if (!allSameEntityName || allSameDevice) {
       name.push({ type: "entity" });
     }
 

src/dialogs/restart/dialog-restart.ts

@@ -170,7 +170,7 @@ class DialogRestart extends LitElement {
                 </ha-list-base>
                 <ha-expansion-panel
                   .header=${this.hass.localize(
-                    "ui.dialogs.restart.advanced_options"
+                    "ui.dialogs.restart.more_options"
                   )}
                 >
                   <ha-list-base>

src/dialogs/sidebar/dialog-edit-sidebar.ts

@@ -29,11 +29,19 @@ import {
   getPanelIconPath,
   getPanelTitle,
 } from "../../data/panel";
+import { DirtyStateProviderMixin } from "../../mixins/dirty-state-provider-mixin";
 import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import { showConfirmationDialog } from "../generic/show-dialog-box";
 
+interface SidebarState {
+  order: string[];
+  hidden: string[];
+}
+
 @customElement("dialog-edit-sidebar")
-class DialogEditSidebar extends LitElement {
+class DialogEditSidebar extends DirtyStateProviderMixin<SidebarState>()(
+  LitElement
+) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @state() private _open = false;
@@ -71,6 +79,11 @@ class DialogEditSidebar extends LitElement {
         this._migrateToUserData = this._migrateToUserData || !!storedHidden;
         this._hidden = storedHidden ? JSON.parse(storedHidden) : [];
       }
+      const order = this._order ?? [];
+      this._initDirtyTracking(
+        { type: "deep" },
+        { order, hidden: this._computeHiddenPanels() }
+      );
     } catch (err: any) {
       this._error = err.message || err;
     }
@@ -89,6 +102,30 @@ class DialogEditSidebar extends LitElement {
     panels ? Object.values(panels) : []
   );
 
+  private _computeHiddenPanels(): string[] {
+    const panels = this._panels(this.hass.panels);
+    const defaultPanel = getDefaultPanelUrlPath(this.hass);
+
+    const orderSet = new Set(this._order);
+    const hiddenSet = new Set(this._hidden);
+
+    for (const panel of panels) {
+      if (
+        panel.default_visible === false &&
+        !orderSet.has(panel.url_path) &&
+        !hiddenSet.has(panel.url_path)
+      ) {
+        hiddenSet.add(panel.url_path);
+      }
+    }
+
+    if (hiddenSet.has(defaultPanel)) {
+      hiddenSet.delete(defaultPanel);
+    }
+
+    return Array.from(hiddenSet);
+  }
+
   private _renderContent(): TemplateResult {
     if (!this._order || !this._hidden) {
       return html`<ha-fade-in .delay=${500}
@@ -112,24 +149,7 @@ class DialogEditSidebar extends LitElement {
       this.hass.locale
     );
 
-    const orderSet = new Set(this._order);
-    const hiddenSet = new Set(this._hidden);
-
-    for (const panel of panels) {
-      if (
-        panel.default_visible === false &&
-        !orderSet.has(panel.url_path) &&
-        !hiddenSet.has(panel.url_path)
-      ) {
-        hiddenSet.add(panel.url_path);
-      }
-    }
-
-    if (hiddenSet.has(defaultPanel)) {
-      hiddenSet.delete(defaultPanel);
-    }
-
-    const hiddenPanels = Array.from(hiddenSet);
+    const hiddenPanels = this._computeHiddenPanels();
 
     const items = [
       ...beforeSpacer,
@@ -169,6 +189,7 @@ class DialogEditSidebar extends LitElement {
         header-subtitle=${!this._migrateToUserData
           ? this.hass.localize("ui.sidebar.edit_subtitle")
           : ""}
+        .preventScrimClose=${this.isDirtyState}
         @closed=${this._dialogClosed}
       >
         <ha-dropdown slot="headerActionItems" placement="bottom-end">
@@ -193,7 +214,7 @@ class DialogEditSidebar extends LitElement {
           </ha-button>
           <ha-button
             slot="primaryAction"
-            .disabled=${!this._order || !this._hidden}
+            .disabled=${!this._order || !this._hidden || !this.isDirtyState}
             @click=${this._save}
           >
             ${this.hass.localize("ui.common.save")}
@@ -207,6 +228,7 @@ class DialogEditSidebar extends LitElement {
     const { order = [], hidden = [] } = ev.detail.value;
     this._order = [...order];
     this._hidden = [...hidden];
+    this._updateDirtyState({ order: this._order, hidden: this._hidden });
   }
 
   private _resetToDefaults = async () => {
@@ -250,6 +272,7 @@ class DialogEditSidebar extends LitElement {
       return;
     }
 
+    this._markDirtyStateClean();
     this.closeDialog();
   }
 

src/fake_data/demo_config.ts

@@ -18,6 +18,7 @@ export const demoConfig: HassConfig = {
   },
   components: [
     "notify.html5",
+    "cloud",
     "history",
     "forecast_solar",
     "energy",