Address PR review thread feedback

.github/actions/build/action.yml

@@ -11,9 +11,6 @@ inputs:
   is-test:
     description: Set IS_TEST for the build (skips source maps and compression)
     default: "false"
-  rspack-cache:
-    description: rspack persistent cache mode ("readwrite", "readonly", or "" to disable)
-    default: ""
 
 runs:
   using: composite
@@ -24,4 +21,3 @@ runs:
       env:
         GITHUB_TOKEN: ${{ inputs.github-token }}
         IS_TEST: ${{ inputs.is-test }}
-        RSPACK_CACHE: ${{ inputs.rspack-cache }}

.github/workflows/ci.yaml

@@ -97,12 +97,10 @@ jobs:
         run: yarn run test
   build:
     name: Build frontend
-    # Runs alongside lint and test rather than after them: the build only needs
-    # the dependency tree, and with the rspack cache it is no longer expensive
-    # enough to be worth serialising behind the other checks. The
-    # cancel-on-failure job below stops the run as soon as a check fails, so a
-    # broken pull request does not finish building.
-    needs: prepare-dependencies
+    needs:
+      - prepare-dependencies
+      - lint
+      - test
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
@@ -113,26 +111,12 @@ jobs:
         uses: ./.github/actions/setup
         with:
           node-modules-cache: true
-      # Read-only reuse of the rspack cache written by the nightly (see
-      # nightly.yaml). rspack itself decides what is still valid (version +
-      # buildDependencies + node_modules snapshot), so the GHA key just restores
-      # the latest nightly cache; no fingerprint, and no save step (CI never
-      # writes the shared cache).
-      - name: Restore rspack cache
-        continue-on-error: true
-        uses: actions/cache/restore@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
-        with:
-          path: .rspack-cache
-          key: rspack-cache-${{ runner.os }}-${{ github.run_id }}
-          restore-keys: |
-            rspack-cache-${{ runner.os }}-
       - name: Build Application
         uses: ./.github/actions/build
         with:
           target: build-app
           github-token: ${{ secrets.GITHUB_TOKEN }}
           is-test: true
-          rspack-cache: readonly
       - name: Upload bundle stats
         uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:
@@ -148,54 +132,3 @@ jobs:
           path: hass_frontend/
           if-no-files-found: error
           retention-days: 7
-
-  # Now that the checks run in parallel, a failing lint or test no longer stops
-  # the build from finishing on its own, so this watches them and cancels the
-  # whole run on the first failure.
-  #
-  # It is a separate job on purpose. Cancelling needs `actions: write`, and the
-  # other jobs check out the pull request and run its build scripts — handing
-  # them that scope would give PR-controlled code (or a compromised dependency)
-  # write access to Actions. This job never checks out the repository, so the
-  # elevated token stays away from PR code. It also cannot be a job that
-  # `needs` the checks: that would only start once they have all finished, which
-  # is exactly too late to cancel anything.
-  cancel-on-failure:
-    name: Cancel run on failure
-    needs: prepare-dependencies
-    runs-on: ubuntu-latest
-    permissions:
-      actions: write
-    timeout-minutes: 30
-    steps:
-      - name: Cancel the run when a check fails
-        env:
-          GH_TOKEN: ${{ github.token }}
-          REPO: ${{ github.repository }}
-          RUN_ID: ${{ github.run_id }}
-        run: |
-          watched='^(Lint and check format|Run tests|Build frontend)$'
-          while :; do
-            jobs=$(gh api "repos/$REPO/actions/runs/$RUN_ID/jobs?per_page=100" \
-              --paginate --jq '.jobs[] | [.name, .status, (.conclusion // "")] | @tsv' \
-              2>/dev/null || true)
-
-            failed=$(printf '%s\n' "$jobs" | awk -F'\t' -v w="$watched" \
-              '$1 ~ w && ($3 == "failure" || $3 == "timed_out") { print $1 }')
-            if [ -n "$failed" ]; then
-              echo "Cancelling the run, these checks failed:"
-              printf '%s\n' "$failed"
-              gh run cancel "$RUN_ID" --repo "$REPO" || true
-              exit 0
-            fi
-
-            found=$(printf '%s\n' "$jobs" | awk -F'\t' -v w="$watched" '$1 ~ w' | wc -l)
-            running=$(printf '%s\n' "$jobs" | awk -F'\t' -v w="$watched" \
-              '$1 ~ w && $2 != "completed" { print $1 }')
-            if [ "$found" -ge 3 ] && [ -z "$running" ]; then
-              echo "All checks finished without failure"
-              exit 0
-            fi
-
-            sleep 15
-          done

.github/workflows/codeql-analysis.yaml

@@ -32,12 +32,12 @@ jobs:
           persist-credentials: false
 
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@f205ea1c3313d32999d8d6a48b4f6530d4437b38 # v4.37.4
+        uses: github/codeql-action/init@e4fba868fa4b1b91e1fdab776edc8cfbe6e9fb81 # v4.37.3
         with:
           languages: javascript-typescript
           build-mode: none
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@f205ea1c3313d32999d8d6a48b4f6530d4437b38 # v4.37.4
+        uses: github/codeql-action/analyze@e4fba868fa4b1b91e1fdab776edc8cfbe6e9fb81 # v4.37.3
         with:
           category: "/language:javascript-typescript"

.github/workflows/e2e.yaml

@@ -137,7 +137,6 @@ jobs:
         with:
           target: build-gallery
           github-token: ${{ secrets.GITHUB_TOKEN }}
-          is-test: true
 
       - name: Upload gallery build
         uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1

.github/workflows/nightly.yaml

@@ -38,44 +38,11 @@ jobs:
         run: ./script/translations_download
         env:
           LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
-          # The wheel only builds the app (build-app), which does not merge
-          # backend translations. Skipping the whole-project backend export (as
-          # the release does) keeps this off the build's critical path; the full
-          # translations artifact is produced in parallel by the job below.
-          SKIP_BACKEND_TRANSLATIONS: "1"
 
       - name: Bump version
         run: script/version_bump.js nightly
 
-      # Warm the shared compression cache so releases reuse it (see release.yaml).
-      - name: Restore compression cache
-        id: compress-cache
-        continue-on-error: true
-        uses: actions/cache/restore@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
-        with:
-          path: .compress-cache
-          key: compress-cache-${{ runner.os }}-${{ github.run_id }}-${{ github.run_attempt }}
-          restore-keys: |
-            compress-cache-${{ runner.os }}-
-
-      # The nightly writes the rspack persistent cache; CI reads it read-only
-      # (see ci.yaml). rspack invalidates internally (version + buildDependencies
-      # + node_modules snapshot), so the cache rolls forward daily and a single
-      # dependency bump keeps most of it warm instead of dropping the lineage.
-      - name: Restore rspack cache
-        id: rspack-cache
-        continue-on-error: true
-        uses: actions/cache/restore@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
-        with:
-          path: .rspack-cache
-          key: rspack-cache-${{ runner.os }}-${{ github.run_id }}-${{ github.run_attempt }}
-          restore-keys: |
-            rspack-cache-${{ runner.os }}-
-
       - name: Build nightly Python wheels
-        env:
-          COMPRESS_CACHE_DIR: ${{ github.workspace }}/.compress-cache
-          RSPACK_CACHE: readwrite
         run: |
           pip install build
           yarn install
@@ -84,23 +51,8 @@ jobs:
           rm -rf dist home_assistant_frontend.egg-info
           python3 -m build
 
-      # Not gated on the restore steps: a transient restore failure (they are
-      # continue-on-error) must not stop us persisting a freshly built cache.
-      - name: Save compression cache
-        if: success()
-        continue-on-error: true
-        uses: actions/cache/save@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
-        with:
-          path: .compress-cache
-          key: compress-cache-${{ runner.os }}-${{ github.run_id }}-${{ github.run_attempt }}
-
-      - name: Save rspack cache
-        if: success()
-        continue-on-error: true
-        uses: actions/cache/save@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
-        with:
-          path: .rspack-cache
-          key: rspack-cache-${{ runner.os }}-${{ github.run_id }}-${{ github.run_attempt }}
+      - name: Archive translations
+        run: tar -czvf translations.tar.gz translations
 
       - name: Upload build artifacts
         uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
@@ -109,31 +61,6 @@ jobs:
           path: dist/home_assistant_frontend*.whl
           if-no-files-found: error
 
-  # The full translations (including the slow backend/core export) are only
-  # needed for the uploaded artifact, not the wheel, so they are downloaded in
-  # parallel here instead of blocking the build above.
-  translations:
-    name: Translations
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout the repository
-        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
-        with:
-          persist-credentials: false
-
-      - name: Setup Node and install
-        uses: ./.github/actions/setup
-        with:
-          immutable: false
-
-      - name: Download translations
-        run: ./script/translations_download
-        env:
-          LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
-
-      - name: Archive translations
-        run: tar -czvf translations.tar.gz translations
-
       - name: Upload translations
         uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:

.github/workflows/release-drafter.yaml

@@ -18,6 +18,6 @@ jobs:
       pull-requests: read
     runs-on: ubuntu-latest
     steps:
-      - uses: release-drafter/release-drafter@34d80673e067bdc0c24568d3af899c216adcfaa9 # v7.7.0
+      - uses: release-drafter/release-drafter@eada3c96a64734dd381cfbda23511034e328ddb0 # v7.6.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yaml

@@ -36,7 +36,7 @@ jobs:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Verify version
-        uses: home-assistant/actions/helpers/verify-version@a7c616ce81ccda50150bf1595786c71b1883fabb # master
+        uses: home-assistant/actions/helpers/verify-version@ab22029681aa532bfe7de5774a9972d67bfbd2c0 # master
 
       - name: Setup Node and install
         uses: ./.github/actions/setup
@@ -48,44 +48,15 @@ jobs:
         run: ./script/translations_download
         env:
           LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
-          # The app fetches core (backend) translations live from HA, so the
-          # release build does not need Lokalise's backend project.
-          SKIP_BACKEND_TRANSLATIONS: "1"
-
-      # Restore the content-addressed compression cache. Unchanged chunks and
-      # static assets are then reused instead of re-run through brotli/zopfli.
-      - name: Restore compression cache
-        id: compress-cache
-        continue-on-error: true
-        uses: actions/cache/restore@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
-        with:
-          path: .compress-cache
-          key: compress-cache-${{ runner.os }}-${{ github.run_id }}-${{ github.run_attempt }}
-          restore-keys: |
-            compress-cache-${{ runner.os }}-
 
       - name: Build and release package
-        env:
-          COMPRESS_CACHE_DIR: ${{ github.workspace }}/.compress-cache
         run: |
           python3 -m pip install build
           export SKIP_FETCH_NIGHTLY_TRANSLATIONS=1
           script/release
 
-      # The build keeps the cache under its size budget, so saving stays bounded.
-      # A unique key always writes; restore-keys picks the newest on the next
-      # run. Not gated on the restore step: a transient restore failure (it is
-      # continue-on-error) must not stop us persisting a freshly built cache.
-      - name: Save compression cache
-        if: success()
-        continue-on-error: true
-        uses: actions/cache/save@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
-        with:
-          path: .compress-cache
-          key: compress-cache-${{ runner.os }}-${{ github.run_id }}-${{ github.run_attempt }}
-
       - name: Publish to PyPI
-        uses: pypa/gh-action-pypi-publish@dc37677b2e1c63e2034f94d8a5b11f265b73ba33 # v1.14.2
+        uses: pypa/gh-action-pypi-publish@ba38be9e461d3875417946c167d0b5f3d385a247 # v1.14.1
         with:
           skip-existing: true
 
@@ -105,21 +76,19 @@ jobs:
           GITHUB_REF: ${{ github.ref }}
         run: |
           version=$(echo "$GITHUB_REF" | awk -F"/" '{print $NF}' )
-          # Wait for the exact wheel to appear on the simple index (the surface
-          # the wheels build's pip uses). The JSON API can report a version as
-          # available before it propagates here, which fails the wheels build.
-          wheel="home_assistant_frontend-${version}-py3-none-any.whl"
-          echo "Waiting for $wheel to appear on the PyPI simple index..."
+          # Wait for the package to become available on PyPI
+          echo "Waiting for home-assistant-frontend==$version to appear on PyPI..."
           for i in $(seq 1 30); do
-            if curl -sf "https://pypi.org/simple/home-assistant-frontend/" | grep -qF "$wheel"; then
-              echo "Package is available on the PyPI simple index!"
+            status=$(curl -s -o /dev/null -w "%{http_code}" "https://pypi.org/pypi/home-assistant-frontend/$version/json")
+            if [ "$status" = "200" ]; then
+              echo "Package is available on PyPI!"
               break
             fi
             if [ "$i" = "30" ]; then
               echo "Timed out waiting for package to appear on PyPI"
               exit 1
             fi
-            echo "Not available yet, retrying in 30 seconds... ($i/30)"
+            echo "Not available yet (HTTP $status), retrying in 30 seconds... ($i/30)"
             sleep 30
           done
           echo "home-assistant-frontend==$version" > ./requirements.txt
@@ -154,8 +123,6 @@ jobs:
         run: ./script/translations_download
         env:
           LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
-          # The landing-page build does not merge backend translations.
-          SKIP_BACKEND_TRANSLATIONS: "1"
       - name: Build landing-page
         run: landing-page/script/build_landing_page
       - name: Tar folder

.github/workflows/stale.yaml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 90 days stale policy
-        uses: actions/stale@4391f3da665fdf50b6810c1a66712fb9ba21aa93 # v11.0.0
+        uses: actions/stale@1e223db275d687790206a7acac4d1a11bd6fe629 # v10.4.0
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           days-before-stale: 90

.gitignore

@@ -6,8 +6,6 @@ build/
 dist/
 /hass_frontend/
 /translations/
-/.compress-cache/
-/.rspack-cache/
 # Composite action source, not build output
 !/.github/actions/build/
 

build-scripts/brotli.mjs

@@ -12,8 +12,7 @@
 import { availableParallelism } from "node:os";
 import { buffer as readStream } from "node:stream/consumers";
 import { promisify } from "node:util";
-import { brotliCompress, constants } from "node:zlib";
-import { withCache } from "./compress-cache.mjs";
+import { brotliCompress } from "node:zlib";
 import { ParallelTransform } from "./parallel-transform.mjs";
 
 const EXTENSION = ".br";
@@ -25,13 +24,8 @@ const compress = promisify(brotliCompress);
  * @param {boolean} [options.skipLarger] Drop files that compression grows.
  * @param {object} [options.params] Brotli parameters, passed to zlib as-is.
  */
-export default ({ skipLarger = false, params } = {}) => {
-  // Isolate cache entries by anything that changes the output bytes: the brotli
-  // quality, and the node major that produced them.
-  const quality = params?.[constants.BROTLI_PARAM_QUALITY] ?? "default";
-  const namespace = `brotli-q${quality}-node${process.versions.node.split(".")[0]}`;
-
-  return new ParallelTransform(availableParallelism(), async (file) => {
+export default ({ skipLarger = false, params } = {}) =>
+  new ParallelTransform(availableParallelism(), async (file) => {
     if (file.isNull()) {
       return file;
     }
@@ -39,13 +33,10 @@ export default ({ skipLarger = false, params } = {}) => {
       file.contents = await readStream(file.contents);
     }
 
-    const compressed = await withCache(namespace, file.contents, async () => {
-      const out = await compress(file.contents, { params });
+    const compressed = await compress(file.contents, { params });
+    if (skipLarger && compressed.length >= file.contents.length) {
       // Dropped rather than passed through, as gulp-brotli did: the
       // uncompressed file is already in the output directory.
-      return skipLarger && out.length >= file.contents.length ? undefined : out;
-    });
-    if (compressed === undefined) {
       return undefined;
     }
 
@@ -53,4 +44,3 @@ export default ({ skipLarger = false, params } = {}) => {
     file.path += EXTENSION;
     return file;
   });
-};

build-scripts/bundle.cjs

@@ -277,7 +277,7 @@ module.exports.config = {
     };
   },
 
-  gallery({ isProdBuild, latestBuild, isTestBuild }) {
+  gallery({ isProdBuild, latestBuild }) {
     return {
       name: "gallery" + nameSuffix(latestBuild),
       entry: {
@@ -287,7 +287,6 @@ module.exports.config = {
       publicPath: publicPath(latestBuild),
       isProdBuild,
       latestBuild,
-      isTestBuild,
       defineOverlay: {
         __DEMO__: true,
       },
@@ -312,15 +311,7 @@ module.exports.config = {
     return {
       name: "e2e-test-app" + nameSuffix(latestBuild),
       entry: {
-        dashboard: path.resolve(
-          paths.e2eTestApp_dir,
-          "src/dashboard-entrypoint.ts"
-        ),
         main: path.resolve(paths.e2eTestApp_dir, "src/entrypoint.ts"),
-        onboarding: path.resolve(
-          paths.e2eTestApp_dir,
-          "src/onboarding-entrypoint.ts"
-        ),
       },
       outputPath: outputPath(paths.e2eTestApp_output_root, latestBuild),
       publicPath: publicPath(latestBuild),

build-scripts/compress-cache.mjs

@@ -1,212 +0,0 @@
-// Content-addressed cache for compression output.
-//
-// brotli (quality 11) and zopfli are the slowest part of a production build,
-// and they redo every file from scratch on every run. But production chunks are
-// content-hashed in their filenames, so a chunk that didn't change produces
-// byte-identical input here. Keying the compressed output by a hash of the
-// input bytes lets an unchanged file skip compression entirely, and lets a
-// nightly build warm the cache a release reuses the next day.
-//
-// Disabled unless COMPRESS_CACHE_DIR points at a directory. Local builds set
-// nothing and behave exactly as before. The compressed bytes are unchanged
-// either way; only whether they were recomputed differs.
-
-import { createHash } from "node:crypto";
-import { existsSync } from "node:fs";
-import {
-  mkdir,
-  readFile,
-  readdir,
-  rename,
-  rm,
-  stat,
-  utimes,
-  writeFile,
-} from "node:fs/promises";
-import path from "node:path";
-
-const rootDir = process.env.COMPRESS_CACHE_DIR;
-export const cacheEnabled = Boolean(rootDir);
-
-// Total cache size to keep across builds, least-recently-used first when over.
-// The cache is shared between branches (a dev nightly warms it for a release,
-// which builds from rc/master), so pruning must NOT drop everything the current
-// build didn't touch — that would make each branch evict the other's
-// branch-specific files every run. Instead the current build is pinned and the
-// rest is kept up to this budget, so nothing is dropped unless the cache is
-// genuinely too large. Override with COMPRESS_CACHE_MAX_BYTES.
-const DEFAULT_MAX_BYTES = 1024 * 1024 * 1024; // 1 GiB
-const maxBytes = () => {
-  // A valid, explicit budget wins — including 0, which keeps only the current
-  // build (evict everything else). An unset or invalid value uses the default.
-  const configured = Number(process.env.COMPRESS_CACHE_MAX_BYTES);
-  return Number.isFinite(configured) && configured >= 0
-    ? configured
-    : DEFAULT_MAX_BYTES;
-};
-
-// Every cache key touched this build, hits and writes alike, so a prune can pin
-// the current dist and never evict a file this build depends on.
-const touched = new Set();
-
-// Per-namespace directory, created lazily and only once.
-const dirs = new Map();
-
-let tmpCounter = 0;
-
-const sha256 = (contents) =>
-  createHash("sha256").update(contents).digest("hex");
-
-const namespaceDir = (namespace) => {
-  let dir = dirs.get(namespace);
-  if (!dir) {
-    const dirPath = path.join(rootDir, namespace);
-    dir = { path: dirPath, ready: undefined };
-    dirs.set(namespace, dir);
-  }
-  return dir;
-};
-
-const ensureDir = (dir) => {
-  dir.ready ??= mkdir(dir.path, { recursive: true });
-  return dir.ready;
-};
-
-// Written via a unique temp file and renamed into place so a concurrent reader
-// in the same build never sees a half-written entry (rename is atomic on the
-// same filesystem).
-const writeAtomic = async (dir, name, contents) => {
-  await ensureDir(dir);
-  tmpCounter += 1;
-  const tmp = path.join(dir.path, `.${process.pid}-${tmpCounter}.tmp`);
-  const dest = path.join(dir.path, name);
-  await writeFile(tmp, contents);
-  try {
-    await rename(tmp, dest);
-  } catch (error) {
-    // Two files with identical contents can miss and write the same entry at
-    // once. On POSIX the rename just overwrites, but Windows rejects a rename
-    // onto an existing path. Either way the destination already holds the same
-    // bytes (content-addressed), so drop our temp and treat it as done.
-    if (existsSync(dest)) {
-      await rm(tmp, { force: true });
-    } else {
-      throw error;
-    }
-  }
-};
-
-/**
- * Return the cached compression result for `contents`, or run `compute` and
- * cache what it returns. `compute` resolves to a Buffer for compressed output,
- * or `undefined` when the file should be dropped (brotli skipLarger); both
- * outcomes are cached, so a dropped file is not recompressed on the next build.
- *
- * @param {string} namespace Isolates entries by algorithm, parameters and tool
- *   version, so a change to any of them can never return a stale result.
- * @param {Buffer} contents Uncompressed input bytes, used as the cache key.
- * @param {() => Promise<Buffer | undefined>} compute Runs on a cache miss.
- * @returns {Promise<Buffer | undefined>}
- */
-export const withCache = async (namespace, contents, compute) => {
-  if (!cacheEnabled) {
-    return compute();
-  }
-
-  const dir = namespaceDir(namespace);
-  const hash = sha256(contents);
-  touched.add(`${namespace}/${hash}`);
-
-  const dataPath = path.join(dir.path, hash);
-  const dropName = `${hash}.drop`;
-
-  try {
-    return await readFile(dataPath);
-  } catch {
-    // Miss (or unreadable) — fall through and compute.
-  }
-  if (existsSync(path.join(dir.path, dropName))) {
-    return undefined;
-  }
-
-  const result = await compute();
-  if (result === undefined) {
-    await writeAtomic(dir, dropName, "");
-  } else {
-    await writeAtomic(dir, hash, result);
-  }
-  return result;
-};
-
-/**
- * Keep the cache under `maxBytes`, evicting least-recently-used entries first.
- * Files this build touched are always kept (and their timestamp refreshed, so
- * shared files stay warm across branches); the remainder — including another
- * branch's entries — is kept up to the budget. No-op when the cache is disabled
- * or nothing was compressed, so it never wipes a warm cache on a build that
- * skipped compression.
- */
-export const pruneCache = async () => {
-  if (!cacheEnabled || touched.size === 0 || !existsSync(rootDir)) {
-    return;
-  }
-
-  const now = new Date();
-  const pinned = [];
-  const others = [];
-
-  // Scan every namespace on disk, not just the ones this build used, so entries
-  // from an old tool version (a different namespace) are eligible for eviction.
-  const namespaces = await readdir(rootDir, { withFileTypes: true });
-  await Promise.all(
-    namespaces.map(async (ns) => {
-      if (!ns.isDirectory()) {
-        return;
-      }
-      const nsDir = path.join(rootDir, ns.name);
-      const entries = await readdir(nsDir);
-      await Promise.all(
-        entries.map(async (entry) => {
-          const entryPath = path.join(nsDir, entry);
-          // Stray temp files from an interrupted write are never valid entries.
-          if (entry.endsWith(".tmp")) {
-            await rm(entryPath, { force: true });
-            return;
-          }
-          const hash = entry.endsWith(".drop") ? entry.slice(0, -5) : entry;
-          const info = await stat(entryPath);
-          if (touched.has(`${ns.name}/${hash}`)) {
-            pinned.push({ entryPath, size: info.size });
-          } else {
-            others.push({ entryPath, size: info.size, mtimeMs: info.mtimeMs });
-          }
-        })
-      );
-    })
-  );
-
-  // Pinned files stay and are refreshed so they rank as most-recently-used for
-  // future prunes; they always count against the budget first.
-  let kept = 0;
-  await Promise.all(
-    pinned.map(async ({ entryPath, size }) => {
-      kept += size;
-      // A failed timestamp refresh only affects future LRU ordering, not
-      // correctness, so it is safe to ignore.
-      await utimes(entryPath, now, now).catch(() => undefined);
-    })
-  );
-
-  // Keep the most-recently-used others until the budget is spent; drop the rest.
-  others.sort((a, b) => b.mtimeMs - a.mtimeMs);
-  const budget = maxBytes();
-  const toDelete = [];
-  for (const entry of others) {
-    if (kept + entry.size <= budget) {
-      kept += entry.size;
-    } else {
-      toDelete.push(entry.entryPath);
-    }
-  }
-  await Promise.all(toDelete.map((p) => rm(p, { force: true })));
-};

build-scripts/gulp/app.js

@@ -50,9 +50,7 @@ gulp.task(
     "rspack-prod-app",
     gulp.parallel("gen-pages-app-prod", "gen-service-worker-app-prod"),
     // Don't compress running tests
-    ...(env.isTestBuild() || env.isStatsBuild()
-      ? []
-      : ["compress-app", "prune-compress-cache"])
+    ...(env.isTestBuild() || env.isStatsBuild() ? [] : ["compress-app"])
   )
 );
 

build-scripts/gulp/compress.js

@@ -3,7 +3,6 @@
 import { constants } from "node:zlib";
 import gulp from "gulp";
 import brotli from "../brotli.mjs";
-import { pruneCache } from "../compress-cache.mjs";
 import paths from "../paths.cjs";
 import zopfli from "../zopfli.mjs";
 
@@ -58,7 +57,3 @@ gulp.task(
     compressAppOtherZopfli
   )
 );
-
-// Keep the compression cache under its size budget (LRU, this build pinned).
-// No-op unless COMPRESS_CACHE_DIR is set.
-gulp.task("prune-compress-cache", () => pruneCache());

build-scripts/gulp/download-translations.js

@@ -155,22 +155,8 @@ gulp.task("fetch-lokalise", async function () {
     fs.mkdir(inDirBackend, { recursive: true }),
   ]);
 
-  // The backend project only provides entity_component translations, which are
-  // merged into the demo, gallery, cast and e2e builds. The shipped app fetches
-  // them live from core, so builds that only produce the app (release, release
-  // landing-page) can skip this second, whole-project export to save time.
-  const projects = Object.entries(lokaliseProjects).filter(
-    ([project]) =>
-      !(project === "backend" && process.env.SKIP_BACKEND_TRANSLATIONS)
-  );
-  if (projects.length !== Object.keys(lokaliseProjects).length) {
-    console.log(
-      "Skipping backend translations download (SKIP_BACKEND_TRANSLATIONS)"
-    );
-  }
-
   await Promise.all(
-    projects.map(async ([project, projectId]) => {
+    Object.entries(lokaliseProjects).map(async ([project, projectId]) => {
       try {
         const exportProcess = await lokaliseApi
           .files()

build-scripts/gulp/entry-html.js

@@ -303,11 +303,7 @@ gulp.task(
   )
 );
 
-const E2E_TEST_APP_PAGE_ENTRIES = {
-  "index.html": ["main"],
-  "dashboard.html": ["dashboard"],
-  "onboarding.html": ["onboarding"],
-};
+const E2E_TEST_APP_PAGE_ENTRIES = { "index.html": ["main"] };
 
 gulp.task(
   "gen-pages-e2e-test-app-dev",

build-scripts/gulp/merge-translations.js

@@ -1,45 +0,0 @@
-import merge from "lodash.merge";
-
-const isMergeableObject = (value) =>
-  typeof value === "object" && value !== null && !Array.isArray(value);
-
-// Keys that must never be written to, to avoid prototype pollution when the
-// overlay comes from an untrusted source (JSON.parse can produce an own
-// `__proto__` key from `{"__proto__": ...}`).
-const FORBIDDEN_KEYS = new Set(["__proto__", "constructor", "prototype"]);
-
-// Deep-merge `overlay` onto `base`, keeping only keys that already exist as own
-// properties of `base`. Overlay keys with no counterpart in the base - e.g.
-// translations for source strings that have since been removed from or renamed
-// in en.json but still linger in Lokalise - are dropped so we don't ship stale
-// keys. `base` is mutated and returned.
-export const restrictedMerge = (base, overlay) => {
-  for (const key of Object.keys(overlay)) {
-    // Own-property check (not `in`) so inherited keys like `__proto__` or
-    // `toString` from the overlay are ignored rather than merged.
-    if (FORBIDDEN_KEYS.has(key) || !Object.hasOwn(base, key)) {
-      continue;
-    }
-    const baseValue = base[key];
-    const overlayValue = overlay[key];
-    if (isMergeableObject(baseValue) && isMergeableObject(overlayValue)) {
-      restrictedMerge(baseValue, overlayValue);
-    } else if (
-      !isMergeableObject(baseValue) &&
-      !isMergeableObject(overlayValue)
-    ) {
-      base[key] = overlayValue;
-    }
-    // Mismatched shapes keep the base (English) value as a safe fallback.
-  }
-  return base;
-};
-
-// Merge translation `objects` onto `startObj`. When `prune` is set, the result
-// is restricted to the key shape of `startObj` (the English master), so keys
-// that no longer exist in en.json are not shipped. Otherwise keys are merged
-// additively (used when building the English master itself, which starts empty).
-export const mergeTranslations = (startObj, objects, prune = false) =>
-  prune
-    ? objects.reduce(restrictedMerge, startObj)
-    : merge(startObj, ...objects);

build-scripts/gulp/rspack.js

@@ -252,7 +252,6 @@ gulp.task("rspack-prod-gallery", () =>
     createGalleryConfig({
       isProdBuild: true,
       latestBuild: true,
-      isTestBuild: env.isTestBuild(),
     })
   )
 );

build-scripts/gulp/translations.js

@@ -2,6 +2,7 @@ import { deleteAsync } from "del";
 import { glob } from "glob";
 import gulp from "gulp";
 import rename from "gulp-rename";
+import merge from "lodash.merge";
 import { createHash } from "node:crypto";
 import { mkdir, readFile } from "node:fs/promises";
 import { basename, join } from "node:path";
@@ -9,7 +10,6 @@ import { PassThrough, Transform } from "node:stream";
 import { finished } from "node:stream/promises";
 import env from "../env.cjs";
 import paths from "../paths.cjs";
-import { mergeTranslations } from "./merge-translations.js";
 import "./fetch-nightly-translations.js";
 
 const inFrontendDir = "translations/frontend";
@@ -56,12 +56,11 @@ class CustomJSON extends Transform {
 class MergeJSON extends Transform {
   _objects = [];
 
-  constructor(stem, startObj = {}, reviver = null, prune = false) {
+  constructor(stem, startObj = {}, reviver = null) {
     super({ objectMode: true, allowHalfOpen: false });
     this._stem = stem;
     this._startObj = structuredClone(startObj);
     this._reviver = reviver;
-    this._prune = prune;
   }
 
   // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -73,11 +72,7 @@ class MergeJSON extends Transform {
 
   // eslint-disable-next-line @typescript-eslint/naming-convention
   async _flush(callback) {
-    const mergedObj = mergeTranslations(
-      this._startObj,
-      this._objects,
-      this._prune
-    );
+    const mergedObj = merge(this._startObj, ...this._objects);
     this._outFile.contents = Buffer.from(JSON.stringify(mergedObj));
     this._outFile.stem = this._stem;
     callback(null, this._outFile);
@@ -262,7 +257,7 @@ const createTranslations = async () => {
     }
     const mergeStream = gulp
       .src(mergeFiles, { allowEmpty: true })
-      .pipe(new MergeJSON(locale, enMaster, emptyReviver, true));
+      .pipe(new MergeJSON(locale, enMaster, emptyReviver));
     mergesFinished.push(finished(mergeStream));
     mergeStream.pipe(hashStream, { end: false });
   }

build-scripts/rspack.cjs

@@ -1,6 +1,4 @@
-const fs = require("fs");
-
-const { existsSync } = fs;
+const { existsSync } = require("fs");
 const path = require("path");
 const rspack = require("@rspack/core");
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -18,61 +16,6 @@ const SafeWebpackBar = require("./safe-webpackbar.cjs");
 const paths = require("./paths.cjs");
 const bundle = require("./bundle.cjs");
 
-// Build-toolchain packages whose version changes the emitted bytes but which
-// are loader/compiler machinery, not modules in the build graph — so rspack's
-// node_modules snapshot cannot see them. Their versions are folded into the
-// persistent cache `version` so a toolchain upgrade invalidates the cache,
-// while ordinary runtime-dependency bumps (handled by the snapshot) do not.
-const TOOLCHAIN_PACKAGES = [
-  "@rspack/core",
-  "@babel/core",
-  "@babel/preset-env",
-  "babel-plugin-polyfill-corejs3",
-  "@babel/plugin-transform-runtime",
-  "@babel/plugin-transform-class-properties",
-  "@babel/plugin-transform-private-methods",
-  "@babel/runtime",
-  "babel-loader",
-  "core-js",
-  "terser",
-  "terser-webpack-plugin",
-  "browserslist",
-  "caniuse-lite",
-];
-
-// Our own build logic — the config, loaders and babel plugins. Their contents
-// (not their paths) go into the cache version, so a change invalidates the
-// cache the same way `buildDependencies` would, but without tying validity to
-// absolute paths — rspack compares buildDependencies by path, which breaks a
-// cache reused on another machine/checkout (a different workspace path).
-const CONFIG_FILES = [
-  __filename,
-  path.join(__dirname, "bundle.cjs"),
-  path.join(__dirname, "minify-template-literals-loader.cjs"),
-  path.join(__dirname, "lit-disable-dev-mode-loader.cjs"),
-  path.join(__dirname, "babel-plugins", "custom-polyfill-plugin.js"),
-  path.join(__dirname, "babel-plugins", "inline-constants-plugin.cjs"),
-];
-
-// Content hash of the toolchain versions and our own build files, used as the
-// persistent cache `version`. Everything here is path-independent so the cache
-// stays valid when reused on a different machine or checkout path.
-const cacheVersion = () => {
-  const parts = [
-    ...TOOLCHAIN_PACKAGES.map(
-      (pkg) => `${pkg}@${require(`${pkg}/package.json`).version}`
-    ),
-    ...CONFIG_FILES.map(
-      (file) => `${path.basename(file)}:${fs.readFileSync(file, "utf8")}`
-    ),
-  ];
-  return require("crypto")
-    .createHash("sha256")
-    .update(parts.join("\n"))
-    .digest("hex")
-    .slice(0, 16);
-};
-
 class LogStartCompilePlugin {
   ignoredFirst = false;
 
@@ -433,33 +376,6 @@ const createRspackConfig = ({
         ])
       ),
     },
-    // Persistent filesystem cache for production builds, opt-in per environment
-    // via RSPACK_CACHE ("readwrite" writes it, "readonly" only reads a warm
-    // cache — e.g. CI reusing the nightly-written one). Unset (releases, local,
-    // tests) = no cache.
-    ...(isProdBuild && process.env.RSPACK_CACHE
-      ? {
-          cache: {
-            type: "persistent",
-            // `name` is already unique per variant (frontend-modern/-legacy).
-            name,
-            // Content-based version (node major + toolchain versions + our own
-            // build files). Everything is path-independent, so the cache stays
-            // valid when reused on another machine/checkout. Runtime deps are
-            // deliberately absent — rspack's node_modules snapshot invalidates
-            // their modules per-package, so a single unrelated bump keeps the
-            // rest warm. buildDependencies is intentionally not used: rspack
-            // compares it by absolute path, which breaks cross-machine reuse.
-            version: `node${process.versions.node.split(".")[0]}-${cacheVersion()}`,
-            storage: {
-              type: "filesystem",
-              directory: path.resolve(paths.root_dir, ".rspack-cache"),
-            },
-            // CI reads the nightly-written cache but must not modify it.
-            readonly: process.env.RSPACK_CACHE === "readonly",
-          },
-        }
-      : {}),
     experiments: {
       outputModule: true,
     },
@@ -489,10 +405,8 @@ const createDemoConfig = ({
 const createCastConfig = ({ isProdBuild, latestBuild }) =>
   createRspackConfig(bundle.config.cast({ isProdBuild, latestBuild }));
 
-const createGalleryConfig = ({ isProdBuild, latestBuild, isTestBuild }) =>
-  createRspackConfig(
-    bundle.config.gallery({ isProdBuild, latestBuild, isTestBuild })
-  );
+const createGalleryConfig = ({ isProdBuild, latestBuild }) =>
+  createRspackConfig(bundle.config.gallery({ isProdBuild, latestBuild }));
 
 const createLandingPageConfig = ({ isProdBuild, latestBuild }) =>
   createRspackConfig(bundle.config.landingPage({ isProdBuild, latestBuild }));

build-scripts/zopfli.mjs

@@ -5,23 +5,14 @@
 // blocks the event loop for the whole compression step. Running one WASM
 // instance per worker parallelises it; the output bytes are unchanged.
 
-import { createRequire } from "node:module";
 import { availableParallelism } from "node:os";
 import { buffer as readStream } from "node:stream/consumers";
 import { Worker } from "node:worker_threads";
-import { withCache } from "./compress-cache.mjs";
 import { ParallelTransform } from "./parallel-transform.mjs";
 
 const WORKER_URL = new URL("./zopfli-worker.mjs", import.meta.url);
 const EXTENSION = ".gz";
 
-// Cache namespace tied to the zopfli version, since a different version can
-// produce different bytes for the same input.
-const ZOPFLI_VERSION = createRequire(import.meta.url)(
-  "@gfx/zopfli/package.json"
-).version;
-const NAMESPACE = `gzip-zopfli${ZOPFLI_VERSION}`;
-
 // Left empty on purpose: @gfx/zopfli then applies its own defaults, which is
 // what gulp-zopfli-green did, so compressed output stays byte-identical.
 const ZOPFLI_OPTIONS = {};
@@ -139,9 +130,7 @@ export default ({ threshold = 0 } = {}) => {
       // Passed through unrenamed and uncompressed, as gulp-zopfli-green did.
       return file;
     }
-    file.contents = await withCache(NAMESPACE, file.contents, () =>
-      compress(file.contents)
-    );
+    file.contents = await compress(file.contents);
     file.path += EXTENSION;
     return file;
   });

demo/src/cloud/cloud-demo-controls.ts

@@ -0,0 +1,304 @@
+import { mdiClose, mdiFlaskOutline } from "@mdi/js";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, state } from "lit/decorators";
+import { fireEvent } from "../../../src/common/dom/fire_event";
+import { mainWindow } from "../../../src/common/dom/get_main_window";
+import { navigate } from "../../../src/common/navigate";
+import "../../../src/components/ha-button";
+import "../../../src/components/ha-card";
+import "../../../src/components/ha-icon-button";
+import "../../../src/components/ha-svg-icon";
+import "../../../src/components/ha-switch";
+import type { HaSwitch } from "../../../src/components/ha-switch";
+import type { CloudDemoScenario } from "../stubs/cloud-demo-state";
+import {
+  getCloudDemoScenario,
+  setCloudDemoScenario,
+  subscribeCloudDemoScenario,
+} from "../stubs/cloud-demo-state";
+
+// Walk the DOM, descending into shadow roots, to find the first matching
+// element. Used to reach <ha-panel-config> (which owns the cloud status) so we
+// can ask it to re-fetch after a scenario change.
+const deepQuery = (
+  selector: string,
+  root: Document | ShadowRoot = document
+): Element | null => {
+  const direct = root.querySelector(selector);
+  if (direct) {
+    return direct;
+  }
+  const elements = root.querySelectorAll("*");
+  for (const element of elements) {
+    const shadow = element.shadowRoot;
+    if (shadow) {
+      const found = deepQuery(selector, shadow);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+};
+
+/**
+ * Demo-only floating panel that flips the mocked Home Assistant Cloud state so
+ * reviewers can preview every UI state of the cloud account page. It writes to
+ * the shared {@link CloudDemoScenario} (which the cloud/backup mocks read) and
+ * then nudges the page to re-read it. Lives entirely under demo/.
+ */
+@customElement("cloud-demo-controls")
+export class CloudDemoControls extends LitElement {
+  @state() private _open = true;
+
+  @state() private _visible = false;
+
+  @state() private _scenario: CloudDemoScenario = getCloudDemoScenario();
+
+  private _unsub?: () => void;
+
+  // The demo uses hash-based routing (navigate() sets location.hash), so the
+  // active route lives in the hash, not the pathname.
+  private get _currentPath(): string {
+    const hash = mainWindow.location.hash;
+    return hash.startsWith("#/") ? hash.slice(1) : mainWindow.location.pathname;
+  }
+
+  private _locationChanged = () => {
+    this._visible = this._currentPath.startsWith("/config/cloud");
+  };
+
+  public connectedCallback(): void {
+    super.connectedCallback();
+    this._locationChanged();
+    mainWindow.addEventListener("location-changed", this._locationChanged);
+    mainWindow.addEventListener("popstate", this._locationChanged);
+    mainWindow.addEventListener("hashchange", this._locationChanged);
+    this._unsub = subscribeCloudDemoScenario((scenario) => {
+      this._scenario = { ...scenario };
+    });
+  }
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+    mainWindow.removeEventListener("location-changed", this._locationChanged);
+    mainWindow.removeEventListener("popstate", this._locationChanged);
+    mainWindow.removeEventListener("hashchange", this._locationChanged);
+    this._unsub?.();
+  }
+
+  protected render() {
+    if (!this._visible) {
+      return nothing;
+    }
+    if (!this._open) {
+      return html`
+        <ha-icon-button
+          class="fab"
+          label="Cloud demo controls"
+          .path=${mdiFlaskOutline}
+          @click=${this._toggleOpen}
+        ></ha-icon-button>
+      `;
+    }
+    return html`
+      <ha-card>
+        <div class="header">
+          <ha-svg-icon .path=${mdiFlaskOutline}></ha-svg-icon>
+          <span class="title">Cloud demo controls</span>
+          <ha-icon-button
+            label="Close"
+            .path=${mdiClose}
+            @click=${this._toggleOpen}
+          ></ha-icon-button>
+        </div>
+        <p class="note">
+          Demo only. Flips the mocked cloud state shown on this page.
+        </p>
+        <div class="controls">
+          ${this._segment("Subscription", "account", [
+            ["active", "Active"],
+            ["trialing", "Trialing"],
+            ["canceled", "Canceled"],
+            ["expired", "Expired"],
+            ["unknown", "Unknown"],
+          ])}
+          ${this._toggle("Onboarded", "onboarded")}
+          ${this._toggle("Onboarding postponed", "postponed")}
+          ${this._toggle("Remote access", "remote")}
+          ${this._segment("Remote status", "remoteStatus", [
+            ["ready", "Ready"],
+            ["generating", "Preparing"],
+            ["loading", "Loading"],
+            ["loaded", "Loaded"],
+            ["error", "Error"],
+          ])}
+          ${this._segment("Backups", "backup", [
+            ["fresh", "Recent"],
+            ["stale", "Old"],
+            ["failed", "Failed"],
+            ["local", "Local only"],
+            ["none", "None"],
+          ])}
+          ${this._toggle("Alexa linked", "alexa")}
+          ${this._toggle("Google linked", "google")}
+          ${this._toggle("Cameras (WebRTC)", "webrtc")}
+          ${this._toggle("Has webhooks", "webhooks")}
+        </div>
+      </ha-card>
+    `;
+  }
+
+  private _segment(
+    label: string,
+    field: keyof CloudDemoScenario,
+    options: [string, string][]
+  ) {
+    return html`
+      <div class="row">
+        <span>${label}</span>
+        <div class="segment">
+          ${options.map(
+            ([value, text]) => html`
+              <ha-button
+                size="s"
+                appearance=${
+                  this._scenario[field] === value ? "filled" : "plain"
+                }
+                data-field=${field}
+                data-value=${value}
+                @click=${this._segmentClick}
+              >
+                ${text}
+              </ha-button>
+            `
+          )}
+        </div>
+      </div>
+    `;
+  }
+
+  private _toggle(label: string, field: keyof CloudDemoScenario) {
+    return html`
+      <div class="row">
+        <span>${label}</span>
+        <ha-switch
+          .checked=${this._scenario[field] as boolean}
+          data-field=${field}
+          @change=${this._toggleChange}
+        ></ha-switch>
+      </div>
+    `;
+  }
+
+  private _toggleOpen() {
+    this._open = !this._open;
+  }
+
+  private _segmentClick(ev: Event) {
+    const target = ev.currentTarget as HTMLElement;
+    this._set(
+      target.dataset.field as keyof CloudDemoScenario,
+      target.dataset.value!
+    );
+  }
+
+  private _toggleChange(ev: Event) {
+    const target = ev.target as HaSwitch;
+    this._set(target.dataset.field as keyof CloudDemoScenario, target.checked);
+  }
+
+  private _set(field: keyof CloudDemoScenario, value: string | boolean) {
+    setCloudDemoScenario({ [field]: value } as Partial<CloudDemoScenario>);
+    this._refresh();
+  }
+
+  private _refresh() {
+    // Refresh the shared cloud status so login-state changes (signed out) and
+    // status-derived fields update.
+    const panel = deepQuery("ha-panel-config");
+    if (panel) {
+      fireEvent(panel as HTMLElement, "ha-refresh-cloud-status");
+    }
+    // cloud-account fetches its subscription/backup/webhook data once on mount
+    // and is not cached by the router, so bounce through a sibling cloud route
+    // to force a clean remount that re-reads the updated mocks.
+    const path = this._currentPath;
+    if (path.startsWith("/config/cloud") && path !== "/config/cloud/login") {
+      const sibling =
+        path === "/config/cloud/remote"
+          ? "/config/cloud/account"
+          : "/config/cloud/remote";
+      navigate(sibling, { replace: true });
+      window.setTimeout(() => navigate(path, { replace: true }), 0);
+    }
+  }
+
+  static styles = css`
+    :host {
+      position: fixed;
+      right: 16px;
+      bottom: 16px;
+      z-index: 9999;
+    }
+    .fab {
+      --mdc-icon-button-size: 48px;
+      --mdc-icon-size: 24px;
+      background-color: var(--primary-color);
+      color: var(--text-primary-color, #fff);
+      border-radius: 50%;
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+    }
+    ha-card {
+      display: block;
+      width: 320px;
+      max-height: 80vh;
+      overflow: auto;
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
+    }
+    .header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 8px 8px 16px;
+      border-bottom: 1px solid var(--divider-color);
+    }
+    .header .title {
+      flex: 1;
+      font-weight: var(--ha-font-weight-medium, 500);
+    }
+    .header ha-svg-icon {
+      color: var(--secondary-text-color);
+    }
+    .note {
+      margin: 8px 16px;
+      color: var(--secondary-text-color);
+      font-size: var(--ha-font-size-s, 0.875rem);
+    }
+    .controls {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      padding: 0 16px 16px;
+    }
+    .row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      min-height: 36px;
+    }
+    .segment {
+      display: flex;
+      gap: 4px;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "cloud-demo-controls": CloudDemoControls;
+  }
+}

demo/src/ha-demo.ts

@@ -32,6 +32,7 @@ import { mockTemplate } from "./stubs/template";
 import { mockTodo } from "./stubs/todo";
 import { mockTranslations } from "./stubs/translations";
 import { mockUsagePrediction } from "./stubs/usage_prediction";
+import "./cloud/cloud-demo-controls";
 
 // 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.
@@ -58,8 +59,6 @@ const CONFIG_PANEL_COMMANDS = [
   "search/related",
   "tag/list",
   "assist_pipeline/",
-  "config/entity_registry/settings/",
-  "slugify",
 ];
 
 @customElement("ha-demo")
@@ -91,6 +90,11 @@ export class HaDemo extends HomeAssistantAppEl {
       },
     });
 
+    // Demo-only floating panel to flip the mocked cloud state. Mounted once at
+    // the document level; it shows itself only on the cloud panel.
+    if (!document.querySelector("cloud-demo-controls")) {
+      document.body.appendChild(document.createElement("cloud-demo-controls"));
+    }
     const localizePromise =
       // @ts-ignore
       this._loadFragmentTranslations(hass.language, "page-demo").then(

demo/src/stubs/backup.ts

@@ -7,43 +7,31 @@ import type {
 import { BackupScheduleRecurrence } from "../../../src/data/backup";
 import type { ManagerStateEvent } from "../../../src/data/backup_manager";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+import type { DemoCloudBackup } from "./cloud-demo-state";
+import {
+  getCloudDemoScenario,
+  setCloudDemoScenario,
+  subscribeCloudDemoScenario,
+} from "./cloud-demo-state";
 
 const CLOUD_AGENT = "cloud.cloud";
 
-// Fixed "recent" backup state: an automatic backup completed 12h ago to both the
-// local and cloud agents, with the next run scheduled for tomorrow. This is the
-// healthy state the cloud overview status line and backup sub-page render.
-const now = Date.now();
-const recent = new Date(now - 12 * 3600 * 1000).toISOString();
-const future = new Date(now + 86400000).toISOString();
-
 const backupInfo: BackupInfo = {
-  backups: [
-    {
-      backup_id: "demo-backup-1",
-      name: "Automatic backup DEMO",
-      date: recent,
-      with_automatic_settings: true,
-      agents: {
-        "backup.local": { size: 1024 * 1024 * 512, protected: true },
-        "cloud.cloud": { size: 1024 * 1024 * 512, protected: true },
-      },
-    } as BackupContent,
-  ],
+  backups: [],
   agent_errors: {},
-  last_attempted_automatic_backup: recent,
-  last_completed_automatic_backup: recent,
+  last_attempted_automatic_backup: null,
+  last_completed_automatic_backup: null,
   last_action_event: { manager_state: "idle" },
-  next_automatic_backup: future,
+  next_automatic_backup: null,
   next_automatic_backup_additional: false,
   state: "idle",
 };
 
 const backupConfig: BackupConfig = {
   automatic_backups_configured: true,
-  last_attempted_automatic_backup: recent,
-  last_completed_automatic_backup: recent,
-  next_automatic_backup: future,
+  last_attempted_automatic_backup: null,
+  last_completed_automatic_backup: null,
+  next_automatic_backup: null,
   next_automatic_backup_additional: false,
   create_backup: {
     agent_ids: ["backup.local", CLOUD_AGENT],
@@ -73,6 +61,88 @@ const agentsInfo: BackupAgentsInfo = {
   ],
 };
 
+// Map the demo "Backups" scenario onto the mutable backup config/info, so the
+// cloud overview status line and the backup sub-page reflect the chosen state.
+const applyScenario = () => {
+  const kind = getCloudDemoScenario().backup;
+  const now = Date.now();
+  const recent = new Date(now - 12 * 3600 * 1000).toISOString();
+  const old = new Date(now - 5 * 86400000).toISOString();
+  const future = new Date(now + 86400000).toISOString();
+  // Comfortably past BACKUP_OVERDUE_MARGIN_HOURS (3h) so the "stale" scenario
+  // actually reads as overdue rather than slipping under the margin.
+  const overdue = new Date(now - 6 * 3600 * 1000).toISOString();
+
+  // The cloud agent is a backup target for the cloud-backed states only. For
+  // "local" a backup exists but is stored locally (no cloud copy), and for
+  // "none" there are no automatic backups at all.
+  const cloudEnabled =
+    kind === "fresh" || kind === "stale" || kind === "failed";
+  backupConfig.create_backup.agent_ids = cloudEnabled
+    ? ["backup.local", CLOUD_AGENT]
+    : ["backup.local"];
+
+  switch (kind) {
+    case "fresh":
+      backupConfig.automatic_backups_configured = true;
+      backupConfig.last_completed_automatic_backup = recent;
+      backupConfig.last_attempted_automatic_backup = recent;
+      backupConfig.next_automatic_backup = future;
+      break;
+    case "local":
+      // Automatic backups run, but only to the local agent.
+      backupConfig.automatic_backups_configured = true;
+      backupConfig.last_completed_automatic_backup = recent;
+      backupConfig.last_attempted_automatic_backup = recent;
+      backupConfig.next_automatic_backup = future;
+      break;
+    case "stale":
+      backupConfig.automatic_backups_configured = true;
+      backupConfig.last_completed_automatic_backup = old;
+      backupConfig.last_attempted_automatic_backup = old;
+      // Next scheduled backup is in the past, so it reads as overdue.
+      backupConfig.next_automatic_backup = overdue;
+      break;
+    case "failed":
+      backupConfig.automatic_backups_configured = true;
+      backupConfig.last_completed_automatic_backup = old;
+      // Most recent attempt is newer than the last success, so it failed.
+      backupConfig.last_attempted_automatic_backup = recent;
+      backupConfig.next_automatic_backup = future;
+      break;
+    case "none":
+      backupConfig.automatic_backups_configured = false;
+      backupConfig.last_completed_automatic_backup = null;
+      backupConfig.last_attempted_automatic_backup = null;
+      backupConfig.next_automatic_backup = null;
+      break;
+  }
+
+  backupInfo.last_completed_automatic_backup =
+    backupConfig.last_completed_automatic_backup;
+  backupInfo.last_attempted_automatic_backup =
+    backupConfig.last_attempted_automatic_backup;
+  backupInfo.next_automatic_backup = backupConfig.next_automatic_backup;
+  backupInfo.backups =
+    cloudEnabled && backupConfig.last_completed_automatic_backup
+      ? [
+          {
+            backup_id: "demo-backup-1",
+            name: "Automatic backup DEMO",
+            date: backupConfig.last_completed_automatic_backup,
+            with_automatic_settings: true,
+            agents: {
+              "backup.local": { size: 1024 * 1024 * 512, protected: true },
+              "cloud.cloud": { size: 1024 * 1024 * 512, protected: true },
+            },
+          } as BackupContent,
+        ]
+      : [];
+};
+
+applyScenario();
+subscribeCloudDemoScenario(applyScenario);
+
 export const mockBackup = (hass: MockHomeAssistant) => {
   // Fresh objects each fetch so re-reading after a mutation actually re-renders
   // (Lit change detection is identity-based; the real WS API returns new
@@ -101,6 +171,20 @@ export const mockBackup = (hass: MockHomeAssistant) => {
     if (update.agents) {
       backupConfig.agents = { ...backupConfig.agents, ...update.agents };
     }
+    // Reflect the UI-driven backup change into the demo scenario so the demo
+    // controls panel stays in sync with the mocked state.
+    const cloudNow = backupConfig.create_backup.agent_ids.includes(CLOUD_AGENT);
+    const current = getCloudDemoScenario().backup;
+    const next: DemoCloudBackup = !backupConfig.automatic_backups_configured
+      ? "none"
+      : cloudNow
+        ? current === "fresh" || current === "stale" || current === "failed"
+          ? current
+          : "fresh"
+        : "local";
+    if (next !== current) {
+      setCloudDemoScenario({ backup: next });
+    }
     return null;
   });
   hass.mockWS(

demo/src/stubs/cloud-demo-state.ts

@@ -0,0 +1,89 @@
+// Demo-only switchable Home Assistant Cloud scenario.
+//
+// The redesigned cloud account page (src/panels/config/cloud/account) renders
+// purely from real WS data. To let reviewers preview every UI state without a
+// real cloud account, this module holds a mutable "scenario" that the cloud and
+// backup mocks read from, plus the floating <cloud-demo-controls> panel writes
+// to. It is persisted to localStorage so the choice survives the data the page
+// fetches once per visit (subscription, backup config, webhooks).
+//
+// This lives entirely under demo/ — no production code imports it.
+
+import type { RemoteCertificateStatus } from "../../../src/data/cloud";
+
+// The five PaymentSubscriptionState values.
+export type DemoCloudAccount =
+  "active" | "trialing" | "canceled" | "expired" | "unknown";
+
+// "local": automatic backups are configured, but not to the cloud agent
+// (a backup exists, just no cloud copy). "none": no automatic backups at all.
+export type DemoCloudBackup = "fresh" | "stale" | "failed" | "local" | "none";
+
+export interface CloudDemoScenario {
+  account: DemoCloudAccount;
+  onboarded: boolean;
+  // Onboarding postponed server-side (maps to onboarding_postponed); hides
+  // the onboarding UI without marking it completed.
+  postponed: boolean;
+  remote: boolean;
+  remoteStatus: RemoteCertificateStatus;
+  backup: DemoCloudBackup;
+  alexa: boolean;
+  google: boolean;
+  webrtc: boolean;
+  webhooks: boolean;
+}
+
+export const DEFAULT_CLOUD_DEMO_SCENARIO: CloudDemoScenario = {
+  account: "active",
+  onboarded: true,
+  postponed: false,
+  remote: true,
+  remoteStatus: "ready",
+  backup: "fresh",
+  alexa: true,
+  google: true,
+  webrtc: true,
+  webhooks: true,
+};
+
+const STORAGE_KEY = "cloudDemoScenario";
+
+const readScenario = (): CloudDemoScenario => {
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    if (raw) {
+      return { ...DEFAULT_CLOUD_DEMO_SCENARIO, ...JSON.parse(raw) };
+    }
+  } catch (_err) {
+    // Ignore malformed or unavailable storage and fall back to the default.
+  }
+  return { ...DEFAULT_CLOUD_DEMO_SCENARIO };
+};
+
+let scenario: CloudDemoScenario = readScenario();
+
+const listeners = new Set<(scenario: CloudDemoScenario) => void>();
+
+export const getCloudDemoScenario = (): CloudDemoScenario => scenario;
+
+export const subscribeCloudDemoScenario = (
+  listener: (scenario: CloudDemoScenario) => void
+): (() => void) => {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+};
+
+export const setCloudDemoScenario = (
+  partial: Partial<CloudDemoScenario>
+): void => {
+  scenario = { ...scenario, ...partial };
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(scenario));
+  } catch (_err) {
+    // Ignore storage failures (e.g. private mode); state still applies in-memory.
+  }
+  listeners.forEach((listener) => listener(scenario));
+};

demo/src/stubs/cloud.ts

@@ -6,6 +6,11 @@ import { ONBOARDING_ITEMS } from "../../../src/data/cloud";
 import type { CloudTTSInfo } from "../../../src/data/cloud/tts";
 import type { Webhook } from "../../../src/data/webhook";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+import {
+  getCloudDemoScenario,
+  setCloudDemoScenario,
+  subscribeCloudDemoScenario,
+} from "./cloud-demo-state";
 
 const emptyFilter = () => ({
   include_domains: [],
@@ -29,30 +34,14 @@ const demoWebhooks: Webhook[] = [
   },
 ];
 
-const demoCloudhooks = Object.fromEntries(
-  demoWebhooks.map((webhook) => [
-    webhook.webhook_id,
-    {
-      webhook_id: webhook.webhook_id,
-      cloudhook_id: `demo-${webhook.webhook_id}`,
-      cloudhook_url: `https://hooks.nabu.casa/demo-${webhook.webhook_id}`,
-      managed: false,
-    },
-  ])
-);
-
-// A single mutable status object seeded to one fixed demo state: an active cloud
-// subscription with remote ready, cloud backups recent, webhooks set up and voice
-// set up (Alexa linked), but cameras (WebRTC) off, so onboarding is still in
-// progress (streaming is the remaining step) and not postponed. Page-driven
-// changes (connect remote, postpone onboarding, add/delete webhooks) mutate this
-// object directly and reset on reload.
+// A single mutable status object so that preference changes made in the demo
+// (both via the real UI and the demo scenario controls) are reflected back.
 const cloudStatus: CloudStatusLoggedIn = {
   logged_in: true,
   cloud: "connected",
   cloud_last_disconnect_reason: null,
   email: "[email protected]",
-  google_registered: false,
+  google_registered: true,
   google_entities: emptyFilter(),
   google_domains: ["light", "switch", "climate", "cover"],
   alexa_registered: true,
@@ -69,20 +58,20 @@ const cloudStatus: CloudStatusLoggedIn = {
   http_use_ssl: false,
   active_subscription: true,
   onboarding_postponed: false,
-  onboarding_completed: false,
+  onboarding_completed: true,
   prefs: {
-    google_enabled: false,
+    google_enabled: true,
     alexa_enabled: true,
     remote_enabled: true,
     remote_allow_remote_enable: true,
     strict_connection: "disabled",
     google_secure_devices_pin: undefined,
-    cloudhooks: demoCloudhooks,
+    cloudhooks: {},
     alexa_report_state: true,
     google_report_state: true,
     tts_default_voice: ["en-US", "JennyNeural"],
-    cloud_ice_servers_enabled: false,
-    onboarded_items: [],
+    cloud_ice_servers_enabled: true,
+    onboarded_items: [...ONBOARDING_ITEMS],
     onboarding_postponed_until: null,
   },
 };
@@ -104,6 +93,94 @@ const ttsInfo: CloudTTSInfo = {
   ],
 };
 
+// Map the high-level demo scenario onto the mutable cloud status / subscription.
+const applyScenario = () => {
+  const scenario = getCloudDemoScenario();
+
+  switch (scenario.account) {
+    case "trialing":
+      cloudStatus.active_subscription = true;
+      subscription.subscription = { status: "trialing" };
+      break;
+    case "canceled":
+      cloudStatus.active_subscription = false;
+      subscription.subscription = { status: "canceled" };
+      break;
+    case "expired":
+      cloudStatus.active_subscription = false;
+      subscription.subscription = { status: "expired" };
+      break;
+    case "unknown":
+      cloudStatus.active_subscription = true;
+      subscription.subscription = { status: "unknown" };
+      break;
+    default:
+      // "active"
+      cloudStatus.active_subscription = true;
+      subscription.subscription = { status: "active" };
+  }
+
+  cloudStatus.prefs.onboarded_items = scenario.onboarded
+    ? [...ONBOARDING_ITEMS]
+    : [];
+  cloudStatus.onboarding_completed = scenario.onboarded;
+  cloudStatus.onboarding_postponed = scenario.postponed;
+  cloudStatus.prefs.onboarding_postponed_until = scenario.postponed
+    ? new Date(Date.now() + 24 * 3600 * 1000).toISOString()
+    : null;
+  cloudStatus.prefs.remote_enabled = scenario.remote;
+  cloudStatus.remote_connected = scenario.remote;
+  cloudStatus.remote_certificate_status = scenario.remoteStatus;
+  cloudStatus.alexa_registered = scenario.alexa;
+  cloudStatus.google_registered = scenario.google;
+  cloudStatus.prefs.cloud_ice_servers_enabled = scenario.webrtc;
+
+  const hasCloudhooks = Object.keys(cloudStatus.prefs.cloudhooks).length > 0;
+  if (scenario.webhooks && !hasCloudhooks) {
+    cloudStatus.prefs.cloudhooks = Object.fromEntries(
+      demoWebhooks.map((webhook) => [
+        webhook.webhook_id,
+        {
+          webhook_id: webhook.webhook_id,
+          cloudhook_id: `demo-${webhook.webhook_id}`,
+          cloudhook_url: `https://hooks.nabu.casa/demo-${webhook.webhook_id}`,
+          managed: false,
+        },
+      ])
+    );
+  } else if (!scenario.webhooks && hasCloudhooks) {
+    cloudStatus.prefs.cloudhooks = {};
+  }
+};
+
+applyScenario();
+subscribeCloudDemoScenario(applyScenario);
+
+// Reflect UI-driven changes (onboarding toggles, remote connect/disconnect)
+// back into the demo scenario so the demo controls panel stays in sync with the
+// mocked state. Only writes when a value actually changed, to avoid needless
+// re-projection. `applyScenario` re-applies the (now matching) scenario, so
+// this stays idempotent and does not fight the direct mutation above.
+const syncScenarioFromStatus = () => {
+  const scenario = getCloudDemoScenario();
+  const next = {
+    onboarded: cloudStatus.onboarding_completed,
+    postponed: cloudStatus.onboarding_postponed,
+    remote: cloudStatus.prefs.remote_enabled,
+    webrtc: cloudStatus.prefs.cloud_ice_servers_enabled,
+    webhooks: Object.keys(cloudStatus.prefs.cloudhooks).length > 0,
+  };
+  if (
+    scenario.onboarded !== next.onboarded ||
+    scenario.postponed !== next.postponed ||
+    scenario.remote !== next.remote ||
+    scenario.webrtc !== next.webrtc ||
+    scenario.webhooks !== next.webhooks
+  ) {
+    setCloudDemoScenario(next);
+  }
+};
+
 export const mockCloud = (hass: MockHomeAssistant) => {
   hass.mockWS("cloud/status", () => ({
     ...cloudStatus,
@@ -116,6 +193,7 @@ export const mockCloud = (hass: MockHomeAssistant) => {
   hass.mockWS("cloud/update_prefs", (msg) => {
     const { type, ...prefs } = msg;
     cloudStatus.prefs = { ...cloudStatus.prefs, ...prefs };
+    syncScenarioFromStatus();
     return { success: true };
   });
 
@@ -124,6 +202,7 @@ export const mockCloud = (hass: MockHomeAssistant) => {
       Date.now() + 24 * 3600 * 1000
     ).toISOString();
     cloudStatus.onboarding_postponed = true;
+    syncScenarioFromStatus();
     // Backend returns the full logged-in status object.
     return { ...cloudStatus, prefs: { ...cloudStatus.prefs } };
   });
@@ -143,6 +222,7 @@ export const mockCloud = (hass: MockHomeAssistant) => {
       (onboardingItem) =>
         cloudStatus.prefs.onboarded_items.includes(onboardingItem)
     );
+    syncScenarioFromStatus();
     // Backend returns the full logged-in status object.
     return { ...cloudStatus, prefs: { ...cloudStatus.prefs } };
   });
@@ -165,17 +245,20 @@ export const mockCloud = (hass: MockHomeAssistant) => {
     const cloudhooks = { ...cloudStatus.prefs.cloudhooks };
     delete cloudhooks[msg.webhook_id];
     cloudStatus.prefs.cloudhooks = cloudhooks;
+    syncScenarioFromStatus();
     return null;
   });
 
   hass.mockWS("cloud/remote/connect", () => {
     cloudStatus.remote_connected = true;
     cloudStatus.prefs.remote_enabled = true;
+    syncScenarioFromStatus();
     return null;
   });
   hass.mockWS("cloud/remote/disconnect", () => {
     cloudStatus.remote_connected = false;
     cloudStatus.prefs.remote_enabled = false;
+    syncScenarioFromStatus();
     return null;
   });
 

demo/src/stubs/config-panel.ts

@@ -8,14 +8,12 @@ import { mockCloud } from "./cloud";
 import { mockConfig } from "./config";
 import { mockConfigEntries } from "./config_entries";
 import { mockDeviceAutomation } from "./device_automation";
-import { mockEntityRegistrySettings } from "./entity_registry_settings";
 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 { mockSlugify } from "./slugify";
 import { mockSystemHealth } from "./system_health";
 import { mockTags } from "./tags";
 import { mockZone } from "./zone";
@@ -41,6 +39,4 @@ export const mockConfigPanel = (hass: MockHomeAssistant) => {
   mockSearch(hass);
   mockTags(hass);
   mockAssist(hass);
-  mockEntityRegistrySettings(hass);
-  mockSlugify(hass);
 };

demo/src/stubs/devices.ts

@@ -14,7 +14,6 @@ const baseDevice = {
   name_by_user: null,
   disabled_by: null,
   configuration_url: null,
-  parent_device_id: null,
   created_at: 0,
   modified_at: 0,
 };

demo/src/stubs/entity_registry_settings.ts

@@ -1,22 +0,0 @@
-import type {
-  EntityRegistrySettings,
-  fetchEntityRegistrySettings,
-  updateEntityRegistrySettings,
-} from "../../../src/data/entity/entity_registry_settings";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-export const mockEntityRegistrySettings = (hass: MockHomeAssistant) => {
-  let settings: EntityRegistrySettings = { entity_id_parts: null };
-
-  hass.mockWS<typeof fetchEntityRegistrySettings>(
-    "config/entity_registry/settings/get",
-    () => settings
-  );
-  hass.mockWS<typeof updateEntityRegistrySettings>(
-    "config/entity_registry/settings/update",
-    (msg: Partial<EntityRegistrySettings>) => {
-      settings = { ...settings, ...msg };
-      return settings;
-    }
-  );
-};

demo/src/stubs/slugify.ts

@@ -1,9 +0,0 @@
-import { slugify } from "../../../src/common/string/slugify";
-import type { fetchSlug } from "../../../src/data/ws-slugify";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-export const mockSlugify = (hass: MockHomeAssistant) => {
-  hass.mockWS<typeof fetchSlug>("slugify", (msg: { text: string }) => ({
-    slug: slugify(msg.text),
-  }));
-};

eslint.config.mjs

@@ -17,9 +17,6 @@ const rspackConfigPath = fileURLToPath(
   new URL("./rspack.config.cjs", import.meta.url)
 );
 
-// Applies everywhere, including the files exempted from the history rule below.
-const restrictedSyntax = ["LabeledStatement", "WithStatement"];
-
 export default tseslint.config(
   js.configs.recommended,
   eslintConfigPrettier,
@@ -114,16 +111,7 @@ export default tseslint.config(
       "no-bitwise": "error",
       "no-console": "error",
       "no-restricted-globals": [2, "event"],
-      "no-restricted-syntax": [
-        "error",
-        ...restrictedSyntax,
-        {
-          selector:
-            "CallExpression[callee.property.name=/^(push|replace)State$/]",
-          message:
-            "Use navigate(), updateHistoryState() or replaceCurrentUrl() from common/navigate. History entries carry the app's own bookkeeping, which a raw pushState/replaceState drops.",
-        },
-      ],
+      "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
       "wc/no-self-class": "off",
 
       // import-x rules
@@ -234,24 +222,6 @@ export default tseslint.config(
       ],
     },
   },
-  {
-    // These own history entries themselves: the navigation helpers, the dialog
-    // stack, the boot paths that run before the app has any state to keep, and
-    // the tests that fabricate entries to simulate a document load.
-    files: [
-      "src/common/navigate.ts",
-      "src/dialogs/make-dialog-manager.ts",
-      "src/state/url-sync-mixin.ts",
-      "src/panels/config/automation/add-automation-element-dialog.ts",
-      "src/entrypoints/core.ts",
-      "src/onboarding/**/*.ts",
-      "cast/**/*.ts",
-      "test/**/*.ts",
-    ],
-    rules: {
-      "no-restricted-syntax": ["error", ...restrictedSyntax],
-    },
-  },
   {
     files: ["src/util/recorder-worklet.js"],
     languageOptions: {

gallery/sidebar.js

@@ -228,7 +228,6 @@ export default [
       "entity-state",
       "ha-markdown",
       "integration-card",
-      "cloud-account",
       "box-shadow",
       "util-long-press",
       "remove-delete-add-create",

gallery/src/pages/components/ha-button.markdown

@@ -37,16 +37,6 @@ title: Button
 <ha-button size="s"> small </ha-button>
 ```
 
-### Icons in the `xs` size
-
-Avoid icons in `xs` buttons. At 24px the label carries the meaning on its own, and a
-16px glyph next to it adds visual noise without adding information.
-
-Use an icon only when the button needs to be recognized at a glance in a dense layout,
-and only when the glyph is a common one users can identify from its silhouette alone,
-such as close, add, or settings. A detailed or unfamiliar glyph is unreadable at this
-size and should be replaced by the label alone.
-
 ### API
 
 This component is based on the webawesome button component.

gallery/src/pages/components/ha-button.ts

@@ -56,19 +56,6 @@ export class DemoHaButton extends LitElement {
                         `
                       )}
                     </div>
-                    <div>
-                      ${appearances.map(
-                        (appearance) => html`
-                          <ha-button
-                            .appearance=${appearance}
-                            .variant=${variant}
-                            size="xs"
-                          >
-                            ${titleCase(`${variant} ${appearance}`)}
-                          </ha-button>
-                        `
-                      )}
-                    </div>
                     <div>
                       ${appearances.map(
                         (appearance) => html`

gallery/src/pages/components/ha-form.ts

@@ -87,7 +87,6 @@ const DEVICES: DeviceRegistryEntry[] = [
     created_at: 0,
     modified_at: 0,
     primary_config_entry: null,
-    parent_device_id: null,
   },
   {
     area_id: "backyard",
@@ -112,7 +111,6 @@ const DEVICES: DeviceRegistryEntry[] = [
     created_at: 0,
     modified_at: 0,
     primary_config_entry: null,
-    parent_device_id: null,
   },
   {
     area_id: null,
@@ -137,7 +135,6 @@ const DEVICES: DeviceRegistryEntry[] = [
     created_at: 0,
     modified_at: 0,
     primary_config_entry: null,
-    parent_device_id: null,
   },
 ];
 

gallery/src/pages/components/ha-select-box.ts

@@ -106,17 +106,6 @@ export class DemoHaSelectBox extends LitElement {
           </ha-card>
         `;
       })}
-      <ha-card>
-        <div class="card-content">
-          <label>Disabled with a selected option</label>
-          <ha-select-box
-            .value=${"card"}
-            .options=${fullOptions}
-            .disabled=${true}
-          >
-          </ha-select-box>
-        </div>
-      </ha-card>
       <ha-card>
         <div class="card-content">
           <p class="title"><b>Column layout</b></p>

gallery/src/pages/components/ha-selector-replaced-device.ts

@@ -50,7 +50,6 @@ const DEVICES: DeviceRegistryEntry[] = [
     created_at: 0,
     modified_at: 0,
     primary_config_entry: null,
-    parent_device_id: null,
   },
   {
     area_id: "backyard",
@@ -75,7 +74,6 @@ const DEVICES: DeviceRegistryEntry[] = [
     created_at: 0,
     modified_at: 0,
     primary_config_entry: null,
-    parent_device_id: null,
   },
 ];
 

gallery/src/pages/components/ha-selector.ts

@@ -100,7 +100,6 @@ const DEVICES: DeviceRegistryEntry[] = [
     created_at: 0,
     modified_at: 0,
     primary_config_entry: null,
-    parent_device_id: null,
   },
   {
     area_id: "backyard",
@@ -125,7 +124,6 @@ const DEVICES: DeviceRegistryEntry[] = [
     created_at: 0,
     modified_at: 0,
     primary_config_entry: null,
-    parent_device_id: null,
   },
   {
     area_id: null,
@@ -150,7 +148,6 @@ const DEVICES: DeviceRegistryEntry[] = [
     created_at: 0,
     modified_at: 0,
     primary_config_entry: null,
-    parent_device_id: null,
   },
 ];
 

gallery/src/pages/lovelace/map-card.ts

@@ -174,14 +174,6 @@ const CONFIGS = [
       entities: ["zone.bushfire"],
     },
   },
-  {
-    heading: "Scale ruler",
-    config: {
-      type: "map",
-      scale_ruler: true,
-      entities: ["zone.home"],
-    },
-  },
 ] satisfies DemoCardConfig<MapCardConfig>[];
 
 @customElement("demo-lovelace-map-card")

gallery/src/pages/misc/cloud-account.markdown

@@ -1,8 +0,0 @@
----
-title: Cloud account
----
-
-The [Home Assistant Cloud](https://www.nabucasa.com/) account page, rendered from
-mocked cloud data. The controls at the top flip the mocked subscription, remote,
-backup, onboarding, and feature state so every UI state can be previewed here
-without a real cloud account.

gallery/src/pages/misc/cloud-account.ts

@@ -1,568 +0,0 @@
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, state } from "lit/decorators";
-import type { HASSDomEvent } from "../../../../src/common/dom/fire_event";
-import "../../../../src/components/ha-formfield";
-import "../../../../src/components/ha-select";
-import type { HaSelectSelectEvent } from "../../../../src/components/ha-select";
-import "../../../../src/components/ha-switch";
-import type { HaSwitch } from "../../../../src/components/ha-switch";
-import type { BackupConfig } from "../../../../src/data/backup";
-import { BackupScheduleRecurrence } from "../../../../src/data/backup";
-import type {
-  CloudStatusLoggedIn,
-  RemoteCertificateStatus,
-  SubscriptionInfo,
-} from "../../../../src/data/cloud";
-import { ONBOARDING_ITEMS } from "../../../../src/data/cloud";
-import type { Webhook } from "../../../../src/data/webhook";
-import type { ShowDialogParams } from "../../../../src/dialogs/make-dialog-manager";
-import { showDialog } from "../../../../src/dialogs/make-dialog-manager";
-import type { MockHomeAssistant } from "../../../../src/fake_data/provide_hass";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import type { ProvideHassElement } from "../../../../src/mixins/provide-hass-lit-mixin";
-import "../../../../src/panels/config/cloud/account/cloud-account-onboarding";
-import "../../../../src/panels/config/cloud/account/cloud-account-overview";
-import { onboardingComplete } from "../../../../src/panels/config/cloud/account/cloud-account-status";
-import { showCloudOnboardingDialog } from "../../../../src/panels/config/cloud/account/show-dialog-cloud-onboarding";
-import type { HomeAssistant } from "../../../../src/types";
-
-// This demo renders the self-contained cloud account cards (overview +
-// onboarding) directly, driven by mocked data, with controls to flip the
-// subscription, remote, backup, onboarding, and feature state so every UI state
-// can be previewed. It intentionally does NOT render the <cloud-account> panel
-// wrapper, which adds a hass-subpage toolbar/back button and route links that
-// have no home in the gallery. See src/panels/config/cloud/account.
-
-// The five PaymentSubscriptionState values.
-type DemoCloudAccount =
-  "active" | "trialing" | "canceled" | "expired" | "unknown";
-
-// "local": automatic backups run, but only to the local agent (no cloud copy).
-// "none": no automatic backups at all.
-type DemoCloudBackup = "fresh" | "stale" | "failed" | "local" | "none";
-
-interface CloudDemoScenario {
-  account: DemoCloudAccount;
-  onboarded: boolean;
-  postponed: boolean;
-  remote: boolean;
-  remoteStatus: RemoteCertificateStatus;
-  backup: DemoCloudBackup;
-  alexa: boolean;
-  google: boolean;
-  webrtc: boolean;
-  webhooks: boolean;
-}
-
-const DEFAULT_SCENARIO: CloudDemoScenario = {
-  account: "active",
-  // Onboarding not completed and streaming (WebRTC) left off, so the onboarding
-  // card shows by default with streaming as the remaining step.
-  onboarded: false,
-  postponed: false,
-  remote: true,
-  remoteStatus: "ready",
-  backup: "fresh",
-  alexa: true,
-  google: true,
-  webrtc: false,
-  webhooks: true,
-};
-
-const SUBSCRIPTION_OPTIONS: { value: DemoCloudAccount; label: string }[] = [
-  { value: "active", label: "Active" },
-  { value: "trialing", label: "Trialing" },
-  { value: "canceled", label: "Canceled" },
-  { value: "expired", label: "Expired" },
-  { value: "unknown", label: "Unknown" },
-];
-
-const REMOTE_STATUS_OPTIONS: {
-  value: RemoteCertificateStatus;
-  label: string;
-}[] = [
-  { value: "ready", label: "Ready" },
-  { value: "generating", label: "Preparing" },
-  { value: "loading", label: "Loading" },
-  { value: "loaded", label: "Loaded" },
-  { value: "error", label: "Error" },
-];
-
-const BACKUP_OPTIONS: { value: DemoCloudBackup; label: string }[] = [
-  { value: "fresh", label: "Recent" },
-  { value: "stale", label: "Old" },
-  { value: "failed", label: "Failed" },
-  { value: "local", label: "Local only" },
-  { value: "none", label: "None" },
-];
-
-const TOGGLES: [keyof CloudDemoScenario, string][] = [
-  ["onboarded", "Onboarded"],
-  ["postponed", "Onboarding postponed"],
-  ["remote", "Remote access"],
-  ["alexa", "Alexa linked"],
-  ["google", "Google linked"],
-  ["webrtc", "Cameras (WebRTC)"],
-  ["webhooks", "Has webhooks"],
-];
-
-const CLOUD_AGENT = "cloud.cloud";
-
-const emptyFilter = () => ({
-  include_domains: [],
-  include_entities: [],
-  exclude_domains: [],
-  exclude_entities: [],
-});
-
-const demoWebhooks: Webhook[] = [
-  {
-    webhook_id: "demo_front_door",
-    domain: "automation",
-    name: "Front door motion",
-    local_only: false,
-  },
-  {
-    webhook_id: "demo_companion_app",
-    domain: "mobile_app",
-    name: "Companion app",
-    local_only: false,
-  },
-];
-
-const buildSubscription = (scenario: CloudDemoScenario): SubscriptionInfo => ({
-  human_description: "Demo subscription, renews automatically",
-  provider: "Nabu Casa, Inc.",
-  plan_renewal_date: 4102444800,
-  subscription: { status: scenario.account },
-});
-
-const buildCloudStatus = (scenario: CloudDemoScenario): CloudStatusLoggedIn => {
-  const active =
-    scenario.account !== "canceled" && scenario.account !== "expired";
-  const cloudhooks = scenario.webhooks
-    ? Object.fromEntries(
-        demoWebhooks.map((webhook) => [
-          webhook.webhook_id,
-          {
-            webhook_id: webhook.webhook_id,
-            cloudhook_id: `demo-${webhook.webhook_id}`,
-            cloudhook_url: `https://hooks.nabu.casa/demo-${webhook.webhook_id}`,
-            managed: false,
-          },
-        ])
-      )
-    : {};
-  return {
-    logged_in: true,
-    cloud: "connected",
-    cloud_last_disconnect_reason: null,
-    email: "[email protected]",
-    google_registered: scenario.google,
-    google_entities: emptyFilter(),
-    google_domains: ["light", "switch", "climate", "cover"],
-    alexa_registered: scenario.alexa,
-    alexa_entities: emptyFilter(),
-    remote_domain: "demo-instance.ui.nabu.casa",
-    remote_connected: scenario.remote,
-    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: scenario.remoteStatus,
-    http_use_ssl: false,
-    active_subscription: active,
-    onboarding_postponed: scenario.postponed,
-    onboarding_completed: scenario.onboarded,
-    prefs: {
-      google_enabled: scenario.google,
-      alexa_enabled: scenario.alexa,
-      remote_enabled: scenario.remote,
-      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: scenario.webrtc,
-      onboarded_items: scenario.onboarded ? [...ONBOARDING_ITEMS] : [],
-      onboarding_postponed_until: scenario.postponed
-        ? new Date(Date.now() + 24 * 3600 * 1000).toISOString()
-        : null,
-    },
-  };
-};
-
-const buildBackupConfig = (scenario: CloudDemoScenario): BackupConfig => {
-  const now = Date.now();
-  const recent = new Date(now - 12 * 3600 * 1000).toISOString();
-  const old = new Date(now - 5 * 86400000).toISOString();
-  const future = new Date(now + 86400000).toISOString();
-  const overdue = new Date(now - 6 * 3600 * 1000).toISOString();
-
-  const cloudEnabled =
-    scenario.backup === "fresh" ||
-    scenario.backup === "stale" ||
-    scenario.backup === "failed";
-
-  let configured = true;
-  let lastCompleted: string | null = null;
-  let lastAttempted: string | null = null;
-  let next: string | null = null;
-  switch (scenario.backup) {
-    case "fresh":
-    case "local":
-      lastCompleted = recent;
-      lastAttempted = recent;
-      next = future;
-      break;
-    case "stale":
-      lastCompleted = old;
-      lastAttempted = old;
-      next = overdue;
-      break;
-    case "failed":
-      lastCompleted = old;
-      lastAttempted = recent;
-      next = future;
-      break;
-    case "none":
-      configured = false;
-      break;
-  }
-
-  return {
-    automatic_backups_configured: configured,
-    last_attempted_automatic_backup: lastAttempted,
-    last_completed_automatic_backup: lastCompleted,
-    next_automatic_backup: next,
-    next_automatic_backup_additional: false,
-    create_backup: {
-      agent_ids: cloudEnabled
-        ? ["backup.local", CLOUD_AGENT]
-        : ["backup.local"],
-      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 },
-    },
-  };
-};
-
-@customElement("demo-misc-cloud-account")
-export class DemoMiscCloudAccount
-  extends LitElement
-  implements ProvideHassElement
-{
-  @state() private hass!: HomeAssistant;
-
-  @state() private _scenario: CloudDemoScenario = { ...DEFAULT_SCENARIO };
-
-  @state() private _cloudStatus!: CloudStatusLoggedIn;
-
-  @state() private _subscription!: SubscriptionInfo;
-
-  @state() private _backupConfig!: BackupConfig;
-
-  constructor() {
-    super();
-    const hass = provideHass(this);
-    hass.updateTranslations(null, "en");
-    hass.updateTranslations("config", "en");
-
-    hass.updateHass({
-      config: {
-        ...hass.config,
-        components: [
-          ...(hass.config?.components ?? []),
-          "cloud",
-          "backup",
-          "webhook",
-        ],
-      },
-    });
-    this._registerMocks(hass);
-    this._applyScenario();
-  }
-
-  public provideHass(el) {
-    el.hass = this.hass;
-  }
-
-  public connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("show-dialog", this._showDialog);
-    this.addEventListener("cloud-open-onboarding", this._openOnboarding);
-    this.addEventListener("ha-refresh-cloud-status", this._refreshFromMocks);
-    // The overview and onboarding dialog contain real <a href="/config/..">
-    // links to panel routes that do not exist in the gallery. Keep them inert.
-    this.addEventListener("click", this._neutralizeNavigation);
-  }
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("show-dialog", this._showDialog);
-    this.removeEventListener("cloud-open-onboarding", this._openOnboarding);
-    this.removeEventListener("ha-refresh-cloud-status", this._refreshFromMocks);
-    this.removeEventListener("click", this._neutralizeNavigation);
-  }
-
-  protected render() {
-    if (!this.hass) {
-      return nothing;
-    }
-    const showOnboarding =
-      this._cloudStatus.active_subscription &&
-      !this._cloudStatus.onboarding_completed &&
-      !this._cloudStatus.onboarding_postponed &&
-      !onboardingComplete(this._cloudStatus, this._backupConfig);
-
-    return html`
-      <div class="options">
-        <div class="selects">
-          ${this._select("Subscription", "account", SUBSCRIPTION_OPTIONS)}
-          ${this._select("Remote status", "remoteStatus", REMOTE_STATUS_OPTIONS)}
-          ${this._select("Backups", "backup", BACKUP_OPTIONS)}
-        </div>
-        <div class="switches">
-          ${TOGGLES.map(([field, label]) => this._toggle(label, field))}
-        </div>
-      </div>
-      <div class="preview">
-        ${
-          showOnboarding
-            ? html`
-                <cloud-account-onboarding
-                  .hass=${this.hass}
-                  .cloudStatus=${this._cloudStatus}
-                  .backupConfig=${this._backupConfig}
-                ></cloud-account-onboarding>
-              `
-            : nothing
-        }
-        <cloud-account-overview
-          .hass=${this.hass}
-          .cloudStatus=${this._cloudStatus}
-          .subscription=${this._subscription}
-          .backupConfig=${this._backupConfig}
-          .webhooks=${demoWebhooks}
-        ></cloud-account-overview>
-      </div>
-    `;
-  }
-
-  private _select(
-    label: string,
-    field: keyof CloudDemoScenario,
-    options: { value: string; label: string }[]
-  ) {
-    return html`
-      <ha-select
-        .label=${label}
-        .value=${String(this._scenario[field])}
-        .options=${options}
-        data-field=${field}
-        @selected=${this._selectChanged}
-      ></ha-select>
-    `;
-  }
-
-  private _toggle(label: string, field: keyof CloudDemoScenario) {
-    return html`
-      <ha-formfield .label=${label}>
-        <ha-switch
-          .checked=${this._scenario[field] as boolean}
-          data-field=${field}
-          @change=${this._switchChanged}
-        ></ha-switch>
-      </ha-formfield>
-    `;
-  }
-
-  private _selectChanged(ev: HaSelectSelectEvent) {
-    const field = (ev.currentTarget as HTMLElement).dataset
-      .field as keyof CloudDemoScenario;
-    this._setField(field, ev.detail.value as string);
-  }
-
-  private _switchChanged(ev: Event) {
-    const target = ev.target as HaSwitch;
-    this._setField(
-      target.dataset.field as keyof CloudDemoScenario,
-      target.checked
-    );
-  }
-
-  private _setField(field: keyof CloudDemoScenario, value: string | boolean) {
-    if (this._scenario[field] === value) {
-      return;
-    }
-    this._scenario = { ...this._scenario, [field]: value };
-    this._applyScenario();
-  }
-
-  private _applyScenario() {
-    this._cloudStatus = buildCloudStatus(this._scenario);
-    this._subscription = buildSubscription(this._scenario);
-    this._backupConfig = buildBackupConfig(this._scenario);
-  }
-
-  private _openOnboarding = () => {
-    showCloudOnboardingDialog(this, {
-      cloudStatus: this._cloudStatus,
-      backupConfig: this._backupConfig,
-      onChanged: () => this._refreshFromMocks(),
-    });
-  };
-
-  private _showDialog = (ev: HASSDomEvent<ShowDialogParams<unknown>>) => {
-    const { dialogTag, dialogImport, dialogParams, addHistory, parentElement } =
-      ev.detail;
-    showDialog(
-      this,
-      dialogTag,
-      dialogParams,
-      dialogImport,
-      parentElement,
-      addHistory
-    );
-  };
-
-  private _refreshFromMocks = () => {
-    this._cloudStatus = {
-      ...this._cloudStatus,
-      prefs: { ...this._cloudStatus.prefs },
-    };
-    this._backupConfig = { ...this._backupConfig };
-    const cloudBackup =
-      this._backupConfig.create_backup.agent_ids.includes(CLOUD_AGENT);
-    this._scenario = {
-      ...this._scenario,
-      onboarded: this._cloudStatus.onboarding_completed,
-      postponed: this._cloudStatus.onboarding_postponed,
-      remote: this._cloudStatus.prefs.remote_enabled,
-      webrtc: this._cloudStatus.prefs.cloud_ice_servers_enabled,
-      backup: !this._backupConfig.automatic_backups_configured
-        ? "none"
-        : cloudBackup
-          ? this._scenario.backup === "fresh" ||
-            this._scenario.backup === "stale" ||
-            this._scenario.backup === "failed"
-            ? this._scenario.backup
-            : "fresh"
-          : "local",
-    };
-  };
-
-  private _neutralizeNavigation = (ev: MouseEvent) => {
-    const anchor = ev
-      .composedPath()
-      .find((el): el is HTMLAnchorElement => el instanceof HTMLAnchorElement);
-    if (anchor?.getAttribute("href")?.startsWith("/")) {
-      ev.preventDefault();
-    }
-  };
-
-  private _registerMocks(hass: MockHomeAssistant) {
-    hass.mockWS("cloud/status", () => ({
-      ...this._cloudStatus,
-      prefs: { ...this._cloudStatus.prefs },
-    }));
-
-    hass.mockWS("cloud/update_prefs", (msg) => {
-      const { type, ...prefs } = msg;
-      this._cloudStatus.prefs = { ...this._cloudStatus.prefs, ...prefs };
-      return { success: true };
-    });
-
-    hass.mockWS("cloud/onboarding/postpone", () => {
-      this._cloudStatus.onboarding_postponed = true;
-      this._cloudStatus.prefs.onboarding_postponed_until = new Date(
-        Date.now() + 24 * 3600 * 1000
-      ).toISOString();
-      return { ...this._cloudStatus, prefs: { ...this._cloudStatus.prefs } };
-    });
-
-    hass.mockWS("cloud/remote/connect", () => {
-      this._cloudStatus.remote_connected = true;
-      this._cloudStatus.prefs.remote_enabled = true;
-      return null;
-    });
-    hass.mockWS("cloud/remote/disconnect", () => {
-      this._cloudStatus.remote_connected = false;
-      this._cloudStatus.prefs.remote_enabled = false;
-      return null;
-    });
-
-    hass.mockWS("backup/config/info", () => ({
-      config: { ...this._backupConfig },
-    }));
-    hass.mockWS("backup/config/update", (msg) => {
-      const { type, ...update } = msg;
-      if (update.create_backup) {
-        this._backupConfig.create_backup = {
-          ...this._backupConfig.create_backup,
-          ...update.create_backup,
-        };
-      }
-      if (update.automatic_backups_configured !== undefined) {
-        this._backupConfig.automatic_backups_configured =
-          update.automatic_backups_configured;
-      }
-      return null;
-    });
-  }
-
-  static styles = css`
-    .options {
-      max-width: 600px;
-      margin: 16px auto 0;
-      padding: 0 16px 16px;
-      border-bottom: 1px solid var(--divider-color);
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
-    }
-    .selects {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 12px;
-    }
-    .selects ha-select {
-      min-width: 160px;
-      flex: 1;
-    }
-    .switches {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 4px 16px;
-    }
-    .preview {
-      padding: 24px 16px;
-      display: flex;
-      flex-direction: column;
-      gap: var(--ha-space-6, 24px);
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-misc-cloud-account": DemoMiscCloudAccount;
-  }
-}

gallery/src/pages/misc/integration-card.ts

@@ -238,7 +238,6 @@ const createDeviceRegistryEntries = (
     created_at: 0,
     modified_at: 0,
     primary_config_entry: null,
-    parent_device_id: null,
   },
 ];
 

package.json

@@ -49,7 +49,7 @@
     "@codemirror/lint": "6.9.7",
     "@codemirror/search": "6.7.1",
     "@codemirror/state": "6.7.1",
-    "@codemirror/view": "6.43.8",
+    "@codemirror/view": "6.43.7",
     "@date-fns/tz": "1.5.0",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "7.6.0",
@@ -93,7 +93,7 @@
     "cally": "0.9.2",
     "color-name": "2.1.1",
     "comlink": "4.4.2",
-    "core-js": "3.50.0",
+    "core-js": "3.49.0",
     "cropperjs": "1.6.2",
     "culori": "4.0.2",
     "date-fns": "4.4.0",
@@ -103,7 +103,7 @@
     "echarts": "6.1.0",
     "element-internals-polyfill": "3.0.2",
     "fuse.js": "7.5.0",
-    "hls.js": "1.6.17",
+    "hls.js": "1.6.16",
     "home-assistant-js-websocket": "9.6.0",
     "idb-keyval": "6.3.0",
     "intl-messageformat": "11.2.13",
@@ -114,7 +114,7 @@
     "lit": "3.3.3",
     "lit-html": "3.3.3",
     "luxon": "3.7.2",
-    "marked": "18.0.9",
+    "marked": "18.0.7",
     "memoize-one": "6.0.0",
     "node-vibrant": "4.0.4",
     "object-hash": "3.0.0",
@@ -152,8 +152,8 @@
     "@octokit/rest": "22.0.1",
     "@playwright/test": "1.62.1",
     "@rsdoctor/rspack-plugin": "1.6.1",
-    "@rspack/core": "2.1.8",
-    "@rspack/dev-server": "2.2.0",
+    "@rspack/core": "2.1.7",
+    "@rspack/dev-server": "2.1.0",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.26",
     "@types/chromecast-caf-sender": "1.0.11",
@@ -164,7 +164,7 @@
     "@types/leaflet-draw": "1.0.13",
     "@types/leaflet.markercluster": "1.5.6",
     "@types/lodash.merge": "4.6.9",
-    "@types/luxon": "3.7.4",
+    "@types/luxon": "3.7.3",
     "@types/qrcode": "1.5.6",
     "@types/sortablejs": "1.15.9",
     "@types/tar": "7.0.87",
@@ -174,7 +174,7 @@
     "babel-plugin-polyfill-corejs3": "1.0.0",
     "browserslist-useragent-regexp": "4.1.4",
     "del": "8.0.1",
-    "eslint": "10.8.1",
+    "eslint": "10.8.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-webpack": "0.13.11",
     "eslint-plugin-import-x": "4.17.1",
@@ -186,7 +186,7 @@
     "fs-extra": "11.4.0",
     "generate-license-file": "4.2.1",
     "glob": "13.0.6",
-    "globals": "17.9.0",
+    "globals": "17.8.0",
     "gulp": "5.0.1",
     "gulp-json-transform": "0.5.0",
     "gulp-rename": "2.1.0",
@@ -210,7 +210,7 @@
     "terser-webpack-plugin": "5.6.1",
     "ts-lit-plugin": "2.0.2",
     "typescript": "6.0.3",
-    "typescript-eslint": "8.66.0",
+    "typescript-eslint": "8.65.0",
     "vite-tsconfig-paths": "6.1.1",
     "vitest": "4.1.10",
     "webpack-stats-plugin": "1.1.3",
@@ -223,7 +223,7 @@
     "clean-css": "5.3.3",
     "@lit/reactive-element": "2.1.2",
     "@fullcalendar/daygrid": "6.1.21",
-    "globals": "17.9.0",
+    "globals": "17.8.0",
     "tslib": "2.8.1",
     "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"
   },

src/common/decorators/restore-scroll.ts

@@ -1,9 +1,8 @@
 import type { ReactiveElement } from "lit";
-import { getHistoryState, updateHistoryState } from "../navigate";
 import { throttle } from "../util/throttle";
 
 const throttleReplaceState = throttle((value) => {
-  updateHistoryState({ scrollPosition: value });
+  history.replaceState({ scrollPosition: value }, "");
 }, 300);
 
 export function restoreScroll(selector: string) {
@@ -40,8 +39,7 @@ export function restoreScroll(selector: string) {
       newDescriptor = {
         get(this: ReactiveElement) {
           return (
-            this[`__${String(propertyKey)}`] ||
-            getHistoryState()?.scrollPosition
+            this[`__${String(propertyKey)}`] || history.state?.scrollPosition
           );
         },
         set(this: ReactiveElement, value) {

src/common/dom/is-navigation-click.ts

@@ -23,24 +23,24 @@ export const isNavigationClick = (e: MouseEvent, preventDefault = true) => {
     return undefined;
   }
 
-  let url: URL;
-  try {
-    // anchor.href is always absolute; an empty or unparseable value throws.
-    url = new URL(anchor.href);
-  } catch {
+  let href = anchor.href;
+  if (!href || href.indexOf("mailto:") !== -1) {
     return undefined;
   }
 
-  // Only intercept same-origin links. A different scheme, host, or port is a
-  // different origin (e.g. another port like ":8123") and must trigger a full
-  // browser navigation instead of an in-app route change. Non-http(s) schemes
-  // such as mailto: resolve to a null origin and are excluded here too.
-  if (url.origin !== window.location.origin) {
+  const location = window.location;
+  const origin = location.origin || location.protocol + "//" + location.host;
+  if (!href.startsWith(origin)) {
+    return undefined;
+  }
+  href = href.slice(origin.length);
+
+  if (href === "#") {
     return undefined;
   }
 
   if (preventDefault) {
     e.preventDefault();
   }
-  return url.pathname + url.search + url.hash;
+  return href;
 };

src/common/entity/context/get_device_context.ts

@@ -2,31 +2,10 @@ import type { AreaRegistryEntry } from "../../../data/area/area_registry";
 import type { DeviceRegistryEntry } from "../../../data/device/device_registry";
 import type { HomeAssistant } from "../../../types";
 
-/**
- * Return the effective area id of a device: a child device without an area of
- * its own inherits its parent's area (mirrors core's
- * async_get_effective_area_id). Nesting is single-level, so no recursion.
- */
-export const getDeviceAreaId = (
-  device: DeviceRegistryEntry,
-  devices: HomeAssistant["devices"]
-): string | undefined => {
-  if (device.area_id) {
-    return device.area_id;
-  }
-  if (device.parent_device_id) {
-    return devices[device.parent_device_id]?.area_id ?? undefined;
-  }
-  return undefined;
-};
-
 export const getDeviceArea = (
   device: DeviceRegistryEntry,
-  areas: HomeAssistant["areas"],
-  // Required so every caller resolves a child device's effective area
-  // consistently, see getDeviceAreaId.
-  devices: HomeAssistant["devices"]
+  areas: HomeAssistant["areas"]
 ): AreaRegistryEntry | undefined => {
-  const areaId = getDeviceAreaId(device, devices);
+  const areaId = device.area_id;
   return areaId ? areas[areaId] : undefined;
 };

src/common/entity/context/get_entity_context.ts

@@ -8,7 +8,6 @@ import type {
 } from "../../../data/entity/entity_registry";
 import type { FloorRegistryEntry } from "../../../data/floor_registry";
 import type { HomeAssistant } from "../../../types";
-import { getDeviceAreaId } from "./get_device_context";
 
 interface EntityContext {
   entity: EntityRegistryDisplayEntry | null;
@@ -47,11 +46,7 @@ export const getEntityAreaId = (
   if (!entry) return undefined;
   const deviceId = entry.device_id;
   const device = deviceId ? devices[deviceId] : undefined;
-  return (
-    entry.area_id ||
-    (device ? getDeviceAreaId(device, devices) : undefined) ||
-    undefined
-  );
+  return entry.area_id || device?.area_id || undefined;
 };
 
 export const getEntityEntryContext = (
@@ -65,8 +60,7 @@ export const getEntityEntryContext = (
   const entity = entities[entry.entity_id];
   const deviceId = entry?.device_id;
   const device = deviceId ? devices[deviceId] : undefined;
-  const areaId =
-    entry?.area_id || (device ? getDeviceAreaId(device, devices) : undefined);
+  const areaId = entry?.area_id || device?.area_id;
   const area = areaId ? areas[areaId] : undefined;
   const floorId = area?.floor_id;
   const floor = floorId ? floors[floorId] : undefined;

src/common/entity/state_active.ts

@@ -52,7 +52,7 @@ export function stateActive(stateObj: HassEntity, state?: string): boolean {
     case "timer":
       return compareState === "active";
     case "camera":
-      return ["streaming", "recording"].includes(compareState);
+      return compareState === "streaming";
   }
 
   return true;

src/common/navigate.ts

@@ -1,7 +1,6 @@
 import { closeAllDialogs } from "../dialogs/make-dialog-manager";
 import { fireEvent } from "./dom/fire_event";
 import { mainWindow } from "./dom/get_main_window";
-import { currentPath } from "./url/current-path";
 
 declare global {
   // for fire event
@@ -12,38 +11,12 @@ declare global {
 
 export interface NavigateOptions {
   replace?: boolean;
-  data?: Record<string, unknown>;
+  data?: any;
 }
 
 // max time to wait for dialogs to close before navigating
 const DIALOG_WAIT_TIMEOUT = 500;
 
-/**
- * State of the current history entry. Always read through this, the app writes
- * to the main window and a panel running in an iframe has its own history.
- */
-export const getHistoryState = (): any => mainWindow.history.state;
-
-/**
- * Merge into the current history entry's state, keeping what is already there.
- * Entries carry the app's own bookkeeping (`from`, `root`, dialog state), so
- * they must never be replaced wholesale.
- */
-export const updateHistoryState = (patch: Record<string, unknown>) => {
-  mainWindow.history.replaceState(
-    { ...mainWindow.history.state, ...patch },
-    ""
-  );
-};
-
-/**
- * Rewrite the URL of the current history entry without navigating and without
- * touching its state. For query parameter cleanup.
- */
-export const replaceCurrentUrl = (url: string) => {
-  mainWindow.history.replaceState(mainWindow.history.state, "", url);
-};
-
 /**
  * Stash a destination URL in the current history entry's state. If the page
  * is refreshed while a dialog is open, urlSyncMixin will navigate to this URL
@@ -51,7 +24,10 @@ export const replaceCurrentUrl = (url: string) => {
  * The current URL is not changed.
  */
 export const setRefreshUrl = (path: string) => {
-  updateHistoryState({ refreshUrl: path });
+  mainWindow.history.replaceState(
+    { ...mainWindow.history.state, refreshUrl: path },
+    ""
+  );
 };
 
 /**
@@ -80,17 +56,6 @@ const ensureDialogsClosed = async (timestamp: number): Promise<boolean> => {
   return ensureDialogsClosed(timestamp);
 };
 
-const buildHistoryState = (
-  data: Record<string, unknown> | undefined,
-  from?: string
-) => {
-  const state = typeof data === "object" ? data : undefined;
-  if (from === undefined) {
-    return state ?? null;
-  }
-  return { ...state, from };
-};
-
 export const navigate = async (path: string, options?: NavigateOptions) => {
   const canProceed = await ensureDialogsClosed(Date.now());
   if (!canProceed) {
@@ -98,32 +63,37 @@ export const navigate = async (path: string, options?: NavigateOptions) => {
   }
   const replace = options?.replace || false;
 
-  if (__DEMO__ && !path.includes("#")) {
-    // The demo routes with the hash instead of the pathname. Resolve the
-    // path like the browser would do for pushState, and keep the query
-    // parameters in the URL query instead of inside the hash.
-    const url = new URL(
-      path,
-      `${mainWindow.location.origin}${mainWindow.location.hash.substring(1)}`
-    );
-    path = `${mainWindow.location.pathname}${url.search}#${url.pathname}`;
-  }
-
-  const { history } = mainWindow;
-
-  if (replace) {
-    // A replaced entry keeps its predecessor, so it keeps `from`.
-    const { root, from } = history.state ?? {};
-    const data = root ? { root: true } : options?.data;
-    history.replaceState(buildHistoryState(data, from), "", path);
-  } else {
-    history.pushState(
-      buildHistoryState(options?.data, currentPath()),
+  if (__DEMO__) {
+    if (!path.includes("#")) {
+      // The demo routes with the hash instead of the pathname. Resolve the
+      // path like the browser would do for pushState, and keep the query
+      // parameters in the URL query instead of inside the hash.
+      const url = new URL(
+        path,
+        `${mainWindow.location.origin}${mainWindow.location.hash.substring(1)}`
+      );
+      path = `${mainWindow.location.pathname}${url.search}#${url.pathname}`;
+    }
+    if (replace) {
+      mainWindow.history.replaceState(
+        mainWindow.history.state?.root
+          ? { root: true }
+          : (options?.data ?? null),
+        "",
+        path
+      );
+    } else {
+      mainWindow.history.pushState(options?.data ?? null, "", path);
+    }
+  } else if (replace) {
+    mainWindow.history.replaceState(
+      mainWindow.history.state?.root ? { root: true } : (options?.data ?? null),
       "",
       path
     );
+  } else {
+    mainWindow.history.pushState(options?.data ?? null, "", path);
   }
-
   fireEvent(mainWindow, "location-changed", {
     replace,
   });
@@ -131,17 +101,8 @@ export const navigate = async (path: string, options?: NavigateOptions) => {
 };
 
 /**
- * Whether the previous history entry is a page this app navigated away from.
- * `history.length` cannot answer this: a login redirect goes through
- * `location.assign`, which leaves /auth/authorize right behind the requested
- * page, and going back there would bounce the user out of the app.
- */
-export const canGoBack = (): boolean =>
-  mainWindow.history.state?.from !== undefined;
-
-/**
- * Navigate back to the page we came from, falling back to a path when the
- * previous entry is not ours (deep link, login redirect, fresh tab).
+ * Navigate back in history, with fallback to a default path if no history exists.
+ * This prevents a user from getting stuck when they navigate directly to a page with no history.
  */
 export const goBack = async (fallbackPath?: string): Promise<void> => {
   const canProceed = await ensureDialogsClosed(Date.now());
@@ -149,12 +110,14 @@ export const goBack = async (fallbackPath?: string): Promise<void> => {
     return;
   }
 
-  // Read after closing dialogs: their history entries are popped by then, so
-  // this is the state of the page entry.
-  if (canGoBack()) {
-    mainWindow.history.back();
+  // Check if we have history to go back to
+  const { history } = mainWindow;
+  if (history.length > 1) {
+    history.back();
     return;
   }
 
-  await navigate(fallbackPath || "/", { replace: true });
+  // No history available, navigate to fallback path
+  const fallback = fallbackPath || "/";
+  navigate(fallback, { replace: true });
 };

src/common/string/is_hostname.ts

@@ -1,13 +0,0 @@
-// RFC 1123 hostname label: 1-63 chars, alphanumeric, with hyphens allowed
-// only between the first and last character. The hyphen is escaped because a
-// `pattern` attribute is compiled with the `v` flag, under which a trailing
-// unescaped hyphen is an invalid character class — and a pattern that fails to
-// compile is silently ignored, disabling validation altogether.
-const LABEL = "[a-zA-Z0-9](?:[a-zA-Z0-9\\-]{0,61}[a-zA-Z0-9])?";
-
-// Hostname such as "localhost" or "homeassistant.lan", as dot-separated
-// labels. Unanchored, for use as an HTML `pattern` attribute (the browser
-// anchors it as `^(?:…)$`). The final label may not be all digits, so a
-// mistyped IP address like "300.1.1.1" is rejected rather than accepted as a
-// hostname. Deliberately excludes underscores and a trailing dot.
-export const HOSTNAME_PATTERN = `(?:${LABEL}\\.)*(?!\\d+$)${LABEL}`;

src/common/url/current-path.ts

@@ -1,10 +0,0 @@
-import { mainWindow } from "../dom/get_main_window";
-
-/**
- * The path of the page currently shown by the app. The demo routes with the
- * hash instead of the pathname, see navigate().
- */
-export const currentPath = (): string =>
-  __DEMO__
-    ? mainWindow.location.hash.substring(1)
-    : mainWindow.location.pathname;

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

@@ -11,23 +11,13 @@
 export const preserveUnchangedRecord = <T>(
   previous: Record<string, T> | undefined,
   next: Record<string, T>,
-  equal: (a: T, b: T) => boolean,
-  compareOrder = false
+  equal: (a: T, b: T) => boolean
 ): Record<string, T> => {
   if (!previous) {
     return next;
   }
-
-  const previousKeys = Object.keys(previous);
-  const nextKeys = Object.keys(next);
-
-  let changed = previousKeys.length !== nextKeys.length;
-
-  if (!changed && compareOrder) {
-    changed = previousKeys.some((key, index) => key !== nextKeys[index]);
-  }
-
-  for (const key of nextKeys) {
+  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;

src/components/chart/down-sample.ts

@@ -18,37 +18,6 @@ interface MinMaxFrame {
   maxY: number;
 }
 
-const SECOND = 1000;
-const MINUTE = 60 * SECOND;
-const HOUR = 60 * MINUTE;
-const DAY = 24 * HOUR;
-
-// Frame sizes that divide the clock evenly. Frames are placed on absolute time
-// rather than relative to the window, so charts that follow "now" keep picking
-// the same points every redraw instead of redrawing with a different shape.
-const FRAME_SIZES = [
-  [1, 2, 3, 5, 10, 20, 30, 50, 100, 200, 300, 500],
-  [1, 2, 3, 5, 10, 15, 20, 30].map((n) => n * SECOND),
-  [1, 2, 3, 5, 10, 15, 20, 30].map((n) => n * MINUTE),
-  [1, 2, 3, 4, 6, 8, 12].map((n) => n * HOUR),
-  [DAY],
-].flat();
-
-// Always rounds down, so no chart ends up with fewer frames than it asked for.
-function snapFrameSize(step: number): number {
-  if (step >= DAY) {
-    return Math.floor(step / DAY) * DAY;
-  }
-  let snapped = FRAME_SIZES[0];
-  for (const size of FRAME_SIZES) {
-    if (size > step) {
-      break;
-    }
-    snapped = size;
-  }
-  return snapped;
-}
-
 export function downSampleLineData<
   T extends [number, number] | NonNullable<LineSeriesOption["data"]>[number],
 >(
@@ -66,13 +35,11 @@ export function downSampleLineData<
   }
   const min = minX ?? getPointData(data[0]!)[0];
   const max = maxX ?? getPointData(data[data.length - 1]!)[0];
-  const rawStep = Math.ceil((max - min) / Math.floor(maxDetails));
-  if (!Number.isFinite(rawStep) || rawStep <= 0) {
+  const step = Math.ceil((max - min) / Math.floor(maxDetails));
+  if (!Number.isFinite(step) || step <= 0) {
     // a degenerate frame size would put every point in a single frame
     return data;
   }
-  // snapped after the guard above, which relies on the unsnapped value
-  const step = snapFrameSize(rawStep);
 
   if (useMean) {
     // Group points into frames, accumulating sums in insertion order.
@@ -85,7 +52,7 @@ export function downSampleLineData<
       const y = Number(pointData[1]);
       if (isNaN(x) || isNaN(y)) continue;
 
-      const frameIndex = Math.floor(x / step);
+      const frameIndex = Math.floor((x - min) / step);
       const frame = frames.get(frameIndex);
       if (!frame) {
         frames.set(frameIndex, {
@@ -123,7 +90,7 @@ export function downSampleLineData<
     const y = Number(pointData[1]);
     if (isNaN(x) || isNaN(y)) continue;
 
-    const frameIndex = Math.floor(x / step);
+    const frameIndex = Math.floor((x - min) / step);
     const frame = frames.get(frameIndex);
     if (!frame) {
       frames.set(frameIndex, {

src/components/device/dialog-device-replaced.ts

@@ -73,7 +73,7 @@ export class DialogDeviceReplaced
     ) =>
       candidates.map((deviceId) => {
         const device = devices[deviceId];
-        const area = device ? getDeviceArea(device, areas, devices) : undefined;
+        const area = device ? getDeviceArea(device, areas) : undefined;
         const configEntry = device?.primary_config_entry
           ? configEntryLookup?.[device.primary_config_entry]
           : undefined;

src/components/device/ha-device-picker.ts

@@ -242,7 +242,7 @@ export class HaDevicePicker extends LitElement {
           return html`<span slot="headline">${deviceId}</span>`;
         }
 
-        const area = getDeviceArea(device, this.hass.areas, this.hass.devices);
+        const area = getDeviceArea(device, this.hass.areas);
 
         const deviceName = device ? computeDeviceName(device) : undefined;
         const areaName = area ? computeAreaName(area) : undefined;

src/components/ha-button.ts

@@ -65,21 +65,6 @@ export class HaButton extends Button {
           box-shadow: var(--ha-button-box-shadow);
         }
 
-        :host([size="xs"]) .button {
-          --wa-form-control-height: var(
-            --ha-button-height,
-            var(--button-height, 24px)
-          );
-          font-size: var(--ha-font-size-m);
-          --wa-form-control-padding-inline: var(--ha-space-2);
-        }
-
-        /* A default 24px icon would fill the whole xs button. */
-        :host([size="xs"]) slot[name="start"]::slotted(*),
-        :host([size="xs"]) slot[name="end"]::slotted(*) {
-          --mdc-icon-size: 16px;
-        }
-
         :host([size="s"]) .button {
           --wa-form-control-height: var(
             --ha-button-height,

src/components/ha-hls-player.ts

@@ -18,8 +18,6 @@ type HlsLite = Omit<
   "subtitleTrackController" | "audioTrackController" | "emeController"
 >;
 
-const HIDDEN_CLEANUP_DELAY = 60000;
-
 @customElement("ha-hls-player")
 class HaHLSPlayer extends LitElement {
   @state()
@@ -78,22 +76,13 @@ class HaHLSPlayer extends LitElement {
 
   private static streamCount = 0;
 
-  private _hiddenCleanupTimeout?: number;
-
   private _handleVisibilityChange = () => {
     if (document.pictureInPictureElement) {
       // video is playing in picture-in-picture mode, don't do anything
       return;
     }
     if (document.hidden) {
-      this._hiddenCleanupTimeout = window.setTimeout(() => {
-        this._hiddenCleanupTimeout = undefined;
-        this._cleanUp();
-      }, HIDDEN_CLEANUP_DELAY);
-    } else if (this._hiddenCleanupTimeout) {
-      // stream was not cleaned up yet, just cancel the cleanup
-      clearTimeout(this._hiddenCleanupTimeout);
-      this._hiddenCleanupTimeout = undefined;
+      this._cleanUp();
     } else {
       this._resetError();
       this._startHls();
@@ -116,8 +105,6 @@ class HaHLSPlayer extends LitElement {
       "visibilitychange",
       this._handleVisibilityChange
     );
-    clearTimeout(this._hiddenCleanupTimeout);
-    this._hiddenCleanupTimeout = undefined;
     HaHLSPlayer.streamCount -= 1;
     this._cleanUp();
   }

src/components/ha-icon-button-group.ts

@@ -1,89 +1,11 @@
-import { animate } from "@lit-labs/motion";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
-import { customElement, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
-import { styleMap } from "lit/directives/style-map";
-
-const THUMB_SIZE = 40;
+import { customElement } from "lit/decorators";
 
 @customElement("ha-icon-button-group")
 export class HaIconButtonGroup extends LitElement {
-  @state() private _thumbX = 0;
-
-  @state() private _thumbVisible = false;
-
-  @state() private _thumbBorderOnly = false;
-
-  // When the thumb appears, only fade it in at its new position instead of
-  // also sliding it from wherever it was last visible.
-  private _thumbAppearing = false;
-
-  private _observer = new MutationObserver(() => this._updateThumb());
-
-  public disconnectedCallback(): void {
-    super.disconnectedCallback();
-    this._observer.disconnect();
-  }
-
-  protected render() {
-    return html`
-      <div
-        class="thumb ${classMap({
-          visible: this._thumbVisible,
-          "border-only": this._thumbBorderOnly,
-        })}"
-        style=${styleMap({ left: `${this._thumbX}px` })}
-        ${animate(() => ({
-          properties: this._thumbAppearing ? ["opacity"] : ["left", "opacity"],
-          keyframeOptions: {
-            duration: this._animationDuration(),
-            easing: "ease-in-out",
-          },
-          skipInitial: true,
-        }))}
-      ></div>
-      <slot @slotchange=${this._handleSlotchange}></slot>
-    `;
-  }
-
-  protected updated() {
-    this._thumbAppearing = false;
-  }
-
-  private _animationDuration(): number {
-    return (
-      parseFloat(
-        getComputedStyle(this).getPropertyValue("--ha-animation-duration-fast")
-      ) || 150
-    );
-  }
-
-  private _handleSlotchange(ev: Event) {
-    this._observer.disconnect();
-    const slot = ev.target as HTMLSlotElement;
-    for (const el of slot.assignedElements()) {
-      this._observer.observe(el, {
-        attributes: true,
-        attributeFilter: ["selected", "disabled"],
-      });
-    }
-    // Positions are only valid once the slotted buttons are laid out.
-    requestAnimationFrame(() => this._updateThumb());
-  }
-
-  private _updateThumb() {
-    const selected = this.querySelector<HTMLElement>(
-      "ha-icon-button-toggle[selected]:not([disabled])"
-    );
-    if (!selected) {
-      this._thumbVisible = false;
-      return;
-    }
-    this._thumbAppearing = !this._thumbVisible;
-    this._thumbBorderOnly = selected.hasAttribute("border-only");
-    this._thumbX =
-      selected.offsetLeft + (selected.offsetWidth - THUMB_SIZE) / 2;
-    this._thumbVisible = true;
+  protected render(): TemplateResult {
+    return html`<slot></slot>`;
   }
 
   static styles = css`
@@ -99,32 +21,6 @@ export class HaIconButtonGroup extends LitElement {
       width: auto;
       padding: 0;
     }
-    /* The selected toggle's circle is drawn here so it can slide between
-       toggles; their own circles are suppressed below. */
-    .thumb {
-      position: absolute;
-      top: calc(50% - 20px);
-      opacity: 0;
-      width: 40px;
-      height: 40px;
-      border-radius: var(--ha-border-radius-circle);
-      background-color: var(
-        --ha-icon-button-group-thumb-color,
-        var(--primary-text-color)
-      );
-      box-sizing: border-box;
-    }
-    .thumb.visible {
-      opacity: 1;
-    }
-    .thumb.border-only {
-      background-color: transparent;
-      border: 2px solid
-        var(--ha-icon-button-group-thumb-color, var(--primary-text-color));
-    }
-    ::slotted(ha-icon-button-toggle) {
-      --ha-icon-button-toggle-thumb-opacity: 0;
-    }
     ::slotted(.separator) {
       background-color: rgba(var(--rgb-primary-text-color), 0.15);
       width: 1px;

src/components/ha-icon-button-toggle.ts

@@ -44,10 +44,8 @@ export class HaIconButtonToggle extends HaIconButton {
         color: var(--primary-background-color);
         background-color: unset;
       }
-      /* ha-icon-button-group zeroes this so its sliding thumb draws the
-         circle instead. */
       :host([selected]:not([disabled])) ha-button::part(base)::before {
-        opacity: var(--ha-icon-button-toggle-thumb-opacity, 1);
+        opacity: 1;
       }
       ::slotted(*) {
         display: block;

src/components/ha-picker-combo-box.ts

@@ -472,9 +472,10 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
     if (disabled) {
       return;
     }
+    const newValue = value?.trim();
     const newTab = ev.ctrlKey || ev.metaKey;
 
-    this._fireSelectedEvents(value, index, newTab);
+    this._fireSelectedEvents(newValue, index, newTab);
   };
 
   private _fireSelectedEvents(value: string, index: number, newTab = false) {

src/components/ha-select-box.ts

@@ -56,7 +56,6 @@ export class HaSelectBox extends LitElement {
         class="list"
         style=${styleMap({ "--columns": columns })}
         .value=${this.value}
-        ?disabled=${this.disabled}
         @change=${this._radioChanged}
       >
         ${this.options.map((option) => this._renderOption(option))}
@@ -101,7 +100,7 @@ export class HaSelectBox extends LitElement {
             )}
             aria-labelledby=${`label-${option.value}`}
             .value=${option.value}
-            .disabled=${option.disabled || false}
+            .disabled=${disabled}
           ></ha-radio-option>
           <div class="text">
             <span id=${`label-${option.value}`} class="label"

src/components/ha-selector/ha-selector-automation-behavior.ts

@@ -53,6 +53,7 @@ export class HaSelectorAutomationBehavior extends LitElement {
       value: behavior,
       label: this._localizeOption(behavior, "label"),
       description: this._localizeOption(behavior, "description"),
+      disabled: this.disabled,
       ...(isTrigger && {
         image: {
           src: `/static/images/form/automation_behavior_trigger_${behavior}.svg`,
@@ -65,7 +66,6 @@ export class HaSelectorAutomationBehavior extends LitElement {
       <ha-select-box
         .options=${options}
         .value=${this.value ?? ""}
-        .disabled=${this.disabled}
         max_columns="1"
         ?stacked_image=${isTrigger}
         @value-changed=${this._valueChanged}

src/components/ha-selector/ha-selector-entity.ts

@@ -8,6 +8,7 @@ import { fireEvent } from "../../common/dom/fire_event";
 import type { ConfigEntry } from "../../data/config_entries";
 import { getConfigEntries } from "../../data/config_entries";
 import { getDeviceIntegrationLookup } from "../../data/device/device_registry";
+import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
 import type { EntitySources } from "../../data/entity/entity_sources";
 import { fetchEntitySourcesWithCache } from "../../data/entity/entity_sources";
 import type { EntitySelector } from "../../data/selector";
@@ -41,6 +42,10 @@ export class HaEntitySelector extends LitElement {
 
   @property({ type: Boolean }) public required = true;
 
+  @property({ attribute: false }) public context?: {
+    entityFilter?: HaEntityPickerEntityFilterFunc;
+  };
+
   @state() private _createDomains: string[] | undefined;
 
   private _deviceIntegrationLookup = memoizeOne(
@@ -169,6 +174,9 @@ export class HaEntitySelector extends LitElement {
   }
 
   private _filterEntities = (entity: HassEntity): boolean => {
+    if (this.context?.entityFilter && !this.context.entityFilter(entity)) {
+      return false;
+    }
     if (!this.selector?.entity?.filter) {
       return true;
     }

src/components/ha-selector/ha-selector-number.ts

@@ -131,7 +131,6 @@ export class HaNumberSelector extends LitElement {
           .hint=${isBox ? this.helper : undefined}
           .disabled=${this.disabled}
           .required=${this.required}
-          .validationMessage=${this.selector.number?.validation_message}
           type="number"
           autoValidate
           .withoutSpinButtons=${!isBox}
@@ -177,7 +176,7 @@ export class HaNumberSelector extends LitElement {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      direction: var(--direction);
+      direction: ltr;
     }
     ha-slider {
       flex: 1;

src/components/ha-selector/ha-selector-select.ts

@@ -104,7 +104,6 @@ export class HaSelectSelector extends LitElement {
         <ha-select-box
           .options=${options}
           .value=${this.value as string | undefined}
-          .disabled=${this.disabled}
           @value-changed=${this._selectChanged}
           .maxColumns=${this.selector.select?.box_max_columns}
         ></ha-select-box>

src/components/ha-web-rtc-player.ts

@@ -17,8 +17,6 @@ import {
 import { apiContext, connectionContext } from "../data/context";
 import "./ha-alert";
 
-const HIDDEN_CLEANUP_DELAY = 60000;
-
 /**
  * A WebRTC stream is established by first sending an offer through a signal
  * path via an integration. An answer is returned, then the rest of the stream
@@ -70,22 +68,13 @@ class HaWebRtcPlayer extends LitElement {
 
   private _candidatesList: RTCIceCandidate[] = [];
 
-  private _hiddenCleanupTimeout?: number;
-
   private _handleVisibilityChange = () => {
     if (document.pictureInPictureElement) {
       // video is playing in picture-in-picture mode, don't do anything
       return;
     }
     if (document.hidden) {
-      this._hiddenCleanupTimeout = window.setTimeout(() => {
-        this._hiddenCleanupTimeout = undefined;
-        this._cleanUp();
-      }, HIDDEN_CLEANUP_DELAY);
-    } else if (this._hiddenCleanupTimeout) {
-      // stream was not cleaned up yet, just cancel the cleanup
-      clearTimeout(this._hiddenCleanupTimeout);
-      this._hiddenCleanupTimeout = undefined;
+      this._cleanUp();
     } else {
       this._startWebRtc();
     }
@@ -127,8 +116,6 @@ class HaWebRtcPlayer extends LitElement {
       "visibilitychange",
       this._handleVisibilityChange
     );
-    clearTimeout(this._hiddenCleanupTimeout);
-    this._hiddenCleanupTimeout = undefined;
     this._cleanUp();
   }
 

src/components/item/ha-list-item-value.ts

@@ -1,62 +0,0 @@
-import type { CSSResultGroup, TemplateResult } from "lit";
-import { css, html } from "lit";
-import { customElement, property } from "lit/decorators";
-import { HaListItemBase } from "./ha-list-item-base";
-
-/**
- * @element ha-list-item-value
- * @extends {HaListItemBase}
- *
- * @summary
- * Non-interactive label/value row for grouped lists: label on the start
- * side, value content end-aligned. The value is the default slot so callers
- * can render rich content (links, secondary lines).
- *
- * @slot - The value content.
- *
- * @csspart label - The label column.
- * @csspart value - The value column.
- *
- * @cssprop --ha-list-item-value-max-width - Maximum width of the value column. Defaults to 60%.
- *
- * @attr {string} label - The row label.
- */
-@customElement("ha-list-item-value")
-export class HaListItemValue extends HaListItemBase {
-  @property({ type: String }) public label?: string;
-
-  protected override _renderInner(): TemplateResult {
-    return html`
-      <div part="label" class="label">${this.label}</div>
-      <div part="value" class="value"><slot></slot></div>
-    `;
-  }
-
-  static styles: CSSResultGroup = [
-    HaListItemBase.styles,
-    css`
-      :host {
-        --ha-row-item-padding-block: var(--ha-space-2);
-        --ha-row-item-min-height: 40px;
-      }
-
-      .label {
-        flex: 1;
-        color: var(--secondary-text-color);
-      }
-
-      .value {
-        max-width: var(--ha-list-item-value-max-width, 60%);
-        min-width: 0;
-        text-align: end;
-        overflow-wrap: anywhere;
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-list-item-value": HaListItemValue;
-  }
-}

src/components/list/ha-grouped-list.ts

@@ -1,88 +0,0 @@
-import type { TemplateResult } from "lit";
-import { css, html, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
-import { HaListBase } from "./ha-list-base";
-
-/**
- * @element ha-grouped-list
- * @extends {HaListBase}
- *
- * @summary
- * Grouped list: an optional header above a framed box of rows separated by
- * hairlines — the "grouped list" idiom of settings and detail views. Items
- * are `<ha-list-item-*>` rows; use `ha-list-item-value` for label/value
- * facts and `ha-list-item-button` for navigable rows.
- *
- * @slot - List items (`<ha-list-item-*>`).
- *
- * @csspart header - The header above the frame.
- * @csspart base - The framed `<div role="list">`.
- *
- * @cssprop --ha-row-item-padding-inline - Horizontal padding of the rows, which the header aligns to. Defaults to `--ha-space-3`.
- *
- * @attr {string} header - Header text rendered above the frame.
- */
-@customElement("ha-grouped-list")
-export class HaGroupedList extends HaListBase {
-  // The frame carries the list role so the header stays out of the list
-  // semantics.
-  protected override readonly hostRole = "";
-
-  @property({ type: String }) public header?: string;
-
-  protected override render(): TemplateResult {
-    return html`
-      ${
-        this.header
-          ? html`<div part="header" class="header" id="header">
-              ${this.header}
-            </div>`
-          : nothing
-      }
-      <div
-        part="base"
-        class="base"
-        role="list"
-        aria-labelledby=${ifDefined(this.header ? "header" : undefined)}
-      >
-        <slot></slot>
-      </div>
-    `;
-  }
-
-  static styles = [
-    ...HaListBase.styles,
-    css`
-      :host {
-        --ha-row-item-padding-inline: var(--ha-space-3);
-      }
-
-      .header {
-        margin: 0 0 var(--ha-space-1);
-        margin-inline-start: calc(
-          var(--ha-row-item-padding-inline) + var(--ha-border-width-sm)
-        );
-        font-size: var(--ha-font-size-m);
-        font-weight: var(--ha-font-weight-medium);
-        color: var(--secondary-text-color);
-      }
-
-      .base {
-        border: var(--ha-border-width-sm) solid var(--divider-color);
-        border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
-        overflow: hidden;
-      }
-
-      ::slotted(:not(:first-child)) {
-        border-top: var(--ha-border-width-sm) solid var(--divider-color);
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-grouped-list": HaGroupedList;
-  }
-}

src/components/map/ha-map.ts

@@ -4,7 +4,6 @@ import type { HassConfig, HassEntities } from "home-assistant-js-websocket";
 import type {
   Circle,
   CircleMarker,
-  Control,
   LatLngExpression,
   LatLngTuple,
   Layer,
@@ -49,7 +48,6 @@ import type {
 import { isTouch } from "../../util/is_touch";
 import "../ha-icon-button";
 import "./ha-entity-marker";
-import { UNIT_KM } from "../../common/const";
 
 declare global {
   // for fire event
@@ -149,9 +147,6 @@ export class HaMap extends ReactiveElement {
   @property({ attribute: "cluster-markers", type: Boolean })
   public clusterMarkers = true;
 
-  @property({ attribute: "scale-ruler", type: Boolean })
-  public scaleRuler = false;
-
   @state() private _loaded = false;
 
   @query("#map") private _mapElement?: HTMLElement;
@@ -172,8 +167,6 @@ export class HaMap extends ReactiveElement {
 
   private _mapCluster: MarkerClusterGroup | undefined;
 
-  private _scaleRulerControl?: Control.Scale;
-
   private _mapPaths: (Polyline | CircleMarker)[] = [];
 
   private _clickCount = 0;
@@ -213,8 +206,6 @@ export class HaMap extends ReactiveElement {
       this.Leaflet = undefined;
     }
 
-    // the control went away with the map, so don't hold on to it
-    this._scaleRulerControl = undefined;
     this._pendingFit = undefined;
     this._loaded = false;
 
@@ -252,16 +243,6 @@ export class HaMap extends ReactiveElement {
       this._drawEntities();
     }
 
-    const oldConfig = changedProps.get("_config") as HassConfig | undefined;
-    if (
-      changedProps.has("_loaded") ||
-      changedProps.has("scaleRuler") ||
-      (changedProps.has("_config") &&
-        oldConfig?.unit_system?.length !== this._config?.unit_system?.length)
-    ) {
-      this._drawScaleRuler();
-    }
-
     if (changedProps.has("_loaded") || changedProps.has("paths")) {
       this._drawPaths();
     }
@@ -825,25 +806,6 @@ export class HaMap extends ReactiveElement {
     this._mapZones.forEach((marker) => map.addLayer(marker));
   }
 
-  private _drawScaleRuler(): void {
-    if (this._scaleRulerControl) {
-      this.leafletMap?.removeControl(this._scaleRulerControl);
-      this._scaleRulerControl = undefined;
-    }
-
-    if (!this.scaleRuler || !this.leafletMap || !this.Leaflet) {
-      return;
-    }
-
-    const metric = this._config?.unit_system?.length === UNIT_KM;
-    this._scaleRulerControl = this.Leaflet.control.scale({
-      position: "bottomleft",
-      metric,
-      imperial: !metric,
-    });
-    this._scaleRulerControl.addTo(this.leafletMap);
-  }
-
   private _getMarkerSize(computedStyles: CSSStyleDeclaration): number {
     const markerSizeVarValue =
       computedStyles.getPropertyValue("--ha-marker-size");
@@ -924,37 +886,6 @@ export class HaMap extends ReactiveElement {
     .leaflet-bottom {
       z-index: 1 !important;
     }
-    .leaflet-control-scale {
-      cursor: unset !important;
-    }
-    .leaflet-control-scale-line {
-      --scale-ruler-color: var(--ha-color-on-surface-default);
-      --scale-ruler-surface: var(--ha-color-surface-default);
-      font-size: var(--ha-font-size-s);
-      font-family: var(--ha-font-family-body);
-      color: var(--scale-ruler-color) !important;
-      background: color-mix(
-        in srgb,
-        var(--scale-ruler-surface) 80%,
-        transparent
-      ) !important;
-      text-shadow: none !important;
-    }
-    /* the theme tokens follow the page, so forced modes need the opposite values */
-    #map.forced-light .leaflet-control-scale-line {
-      --scale-ruler-color: var(--ha-color-neutral-05);
-      --scale-ruler-surface: var(--ha-color-white);
-    }
-    #map.forced-dark .leaflet-control-scale-line {
-      --scale-ruler-color: var(--ha-color-neutral-95);
-      --scale-ruler-surface: var(--ha-color-neutral-10);
-    }
-    .leaflet-left .leaflet-control-scale {
-      margin-left: 10px !important;
-    }
-    .leaflet-bottom .leaflet-control-scale {
-      margin-bottom: 10px !important;
-    }
     .leaflet-tooltip {
       padding: 8px;
       font-size: var(--ha-font-size-s);

src/components/target-picker/ha-target-picker-item-row.ts

@@ -52,6 +52,7 @@ import {
   type TargetType,
 } from "../../data/target";
 import { showMoreInfoDialog } from "../../dialogs/more-info/show-ha-more-info-dialog";
+import { buttonLinkStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { brandsUrl } from "../../util/brands-url";
 import type { HaDevicePickerDeviceFilterFunc } from "../device/ha-device-picker";
@@ -220,28 +221,30 @@ export class HaTargetPickerItemRow extends LitElement {
           ? html`
               <div slot="end" class="summary">
                 ${
-                  this.expand || !entries.referenced_entities.length
-                    ? html`<span class="main">
-                        ${this.hass.localize(
-                          "ui.components.target-picker.entities_count",
-                          {
-                            count: entries.referenced_entities.length,
-                          }
-                        )}
-                      </span>`
-                    : html`<ha-button
-                        appearance="filled"
-                        variant="brand"
-                        size="xs"
+                  showEntities &&
+                  !this.expand &&
+                  entries?.referenced_entities.length
+                    ? html`<button
+                        class="main link"
                         @click=${this._openDetails}
                       >
                         ${this.hass.localize(
                           "ui.components.target-picker.entities_count",
                           {
-                            count: entries.referenced_entities.length,
+                            count: entries?.referenced_entities.length,
                           }
                         )}
-                      </ha-button>`
+                      </button>`
+                    : showEntities
+                      ? html`<span class="main">
+                          ${this.hass.localize(
+                            "ui.components.target-picker.entities_count",
+                            {
+                              count: entries?.referenced_entities.length,
+                            }
+                          )}
+                        </span>`
+                      : nothing
                 }
               </div>
             `
@@ -809,6 +812,7 @@ export class HaTargetPickerItemRow extends LitElement {
   };
 
   static styles = [
+    buttonLinkStyle,
     css`
       :host {
         --md-list-item-top-space: 0;
@@ -879,6 +883,16 @@ export class HaTargetPickerItemRow extends LitElement {
         color: var(--secondary-text-color);
       }
 
+      button.link {
+        text-decoration: none;
+        color: var(--primary-color);
+      }
+
+      button.link:hover,
+      button.link:focus {
+        text-decoration: underline;
+      }
+
       .state {
         width: fit-content;
         font-size: var(--ha-font-size-s);

src/data/automation_i18n.ts

@@ -94,45 +94,6 @@ const localizeTimeString = (
   }
 };
 
-// Seconds since midnight for a literal `HH:MM(:SS)` time, undefined for
-// anything else (entity ids contain a dot, and malformed input is ignored).
-const literalTimeToSeconds = (value: unknown): number | undefined => {
-  if (typeof value !== "string" || value.includes(".")) {
-    return undefined;
-  }
-  const chunks = value.split(":");
-  if (chunks.length < 2 || chunks.length > 3) {
-    return undefined;
-  }
-  const hours = Number(chunks[0]);
-  const minutes = Number(chunks[1]);
-  const seconds = chunks.length > 2 ? Number(chunks[2]) : 0;
-  if (
-    !Number.isFinite(hours) ||
-    !Number.isFinite(minutes) ||
-    !Number.isFinite(seconds)
-  ) {
-    return undefined;
-  }
-  return hours * 3600 + minutes * 60 + seconds;
-};
-
-const numericThresholdSuffix = (config: {
-  above?: number | string;
-  below?: number | string;
-}): "above" | "below" | "above_below" | undefined => {
-  if (config.above !== undefined && config.below !== undefined) {
-    return "above_below";
-  }
-  if (config.above !== undefined) {
-    return "above";
-  }
-  if (config.below !== undefined) {
-    return "below";
-  }
-  return undefined;
-};
-
 const formatNumericLimitValue = (
   hass: HomeAssistant,
   value?: number | string
@@ -146,26 +107,18 @@ const formatNumericLimitValue = (
     : value;
 };
 
-export interface DescribeOptions {
-  // Skip the user defined alias and describe the underlying config.
-  ignoreAlias?: boolean;
-  // Leave the entities out of the sentence, for rows that render them as
-  // target badges.
-  hideEntities?: boolean;
-}
-
 export const describeTrigger = (
   trigger: Trigger,
   hass: HomeAssistant,
   entityRegistry: EntityRegistryEntry[],
-  options?: DescribeOptions
+  ignoreAlias = false
 ): string => {
   try {
     const description = tryDescribeTrigger(
       trigger,
       hass,
       entityRegistry,
-      options
+      ignoreAlias
     );
     if (typeof description !== "string") {
       throw new Error(String(description));
@@ -187,7 +140,7 @@ const tryDescribeTrigger = (
   trigger: Trigger,
   hass: HomeAssistant,
   entityRegistry: EntityRegistryEntry[],
-  options?: DescribeOptions
+  ignoreAlias = false
 ) => {
   if (isTriggerList(trigger)) {
     const triggers = ensureArray(trigger.triggers);
@@ -203,15 +156,14 @@ const tryDescribeTrigger = (
     });
   }
 
-  if (trigger.alias && !options?.ignoreAlias) {
+  if (trigger.alias && !ignoreAlias) {
     return trigger.alias;
   }
 
   const description = describeLegacyTrigger(
     trigger as LegacyTrigger,
     hass,
-    entityRegistry,
-    options?.hideEntities
+    entityRegistry
   );
 
   if (description) {
@@ -235,8 +187,7 @@ const tryDescribeTrigger = (
 const describeLegacyTrigger = (
   trigger: LegacyTrigger,
   hass: HomeAssistant,
-  entityRegistry: EntityRegistryEntry[],
-  hideEntities = false
+  entityRegistry: EntityRegistryEntry[]
 ) => {
   // Event Trigger
   if (trigger.trigger === "event" && trigger.event_type) {
@@ -267,16 +218,28 @@ const describeLegacyTrigger = (
   }
 
   // Numeric State Trigger
-  if (
-    trigger.trigger === "numeric_state" &&
-    (trigger.entity_id || hideEntities)
-  ) {
+  if (trigger.trigger === "numeric_state" && trigger.entity_id) {
+    const entities: string[] = [];
     const states = hass.states;
 
     const stateObj = Array.isArray(trigger.entity_id)
       ? hass.states[trigger.entity_id[0]]
       : (hass.states[trigger.entity_id] as HassEntity | undefined);
 
+    if (Array.isArray(trigger.entity_id)) {
+      for (const entity of trigger.entity_id.values()) {
+        if (states[entity]) {
+          entities.push(computeStateName(states[entity]) || entity);
+        }
+      }
+    } else if (trigger.entity_id) {
+      entities.push(
+        states[trigger.entity_id]
+          ? computeStateName(states[trigger.entity_id])
+          : trigger.entity_id
+      );
+    }
+
     const attribute = trigger.attribute
       ? stateObj
         ? computeAttributeNameDisplay(
@@ -292,39 +255,6 @@ const describeLegacyTrigger = (
       ? describeDuration(hass.locale, trigger.for)
       : undefined;
 
-    if (hideEntities) {
-      const suffix = numericThresholdSuffix(trigger);
-      if (!suffix) {
-        return hass.localize(
-          `${triggerTranslationBaseKey}.numeric_state.label`
-        );
-      }
-      return hass.localize(
-        `${triggerTranslationBaseKey}.numeric_state.description.crossed_${suffix}`,
-        {
-          attribute: attribute,
-          above: formatNumericLimitValue(hass, trigger.above),
-          below: formatNumericLimitValue(hass, trigger.below),
-          duration: duration,
-        }
-      );
-    }
-
-    const entities: string[] = [];
-    if (Array.isArray(trigger.entity_id)) {
-      for (const entity of trigger.entity_id.values()) {
-        if (states[entity]) {
-          entities.push(computeStateName(states[entity]) || entity);
-        }
-      }
-    } else if (trigger.entity_id) {
-      entities.push(
-        states[trigger.entity_id]
-          ? computeStateName(states[trigger.entity_id])
-          : trigger.entity_id
-      );
-    }
-
     if (trigger.above !== undefined && trigger.below !== undefined) {
       return hass.localize(
         `${triggerTranslationBaseKey}.numeric_state.description.above-below`,
@@ -366,14 +296,14 @@ const describeLegacyTrigger = (
 
   // State Trigger
   if (trigger.trigger === "state") {
+    const entities: string[] = [];
     const states = hass.states;
 
-    const entityArray: string[] = ensureArray(trigger.entity_id);
-
-    const stateObj = hass.states[entityArray?.[0]] as HassEntity | undefined;
-
     let attribute = "";
     if (trigger.attribute) {
+      const stateObj = Array.isArray(trigger.entity_id)
+        ? hass.states[trigger.entity_id[0]]
+        : (hass.states[trigger.entity_id] as HassEntity | undefined);
       attribute = stateObj
         ? computeAttributeNameDisplay(
             hass.localize,
@@ -384,6 +314,17 @@ const describeLegacyTrigger = (
         : trigger.attribute;
     }
 
+    const entityArray: string[] = ensureArray(trigger.entity_id);
+    if (entityArray) {
+      for (const entity of entityArray) {
+        if (states[entity]) {
+          entities.push(computeStateName(states[entity]) || entity);
+        }
+      }
+    }
+
+    const stateObj = hass.states[entityArray[0]] as HassEntity | undefined;
+
     let fromChoice = "other";
     let fromString = "";
     if (trigger.from !== undefined) {
@@ -463,32 +404,6 @@ const describeLegacyTrigger = (
       duration = describeDuration(hass.locale, trigger.for) ?? "";
     }
 
-    if (hideEntities) {
-      return hass.localize(
-        `${triggerTranslationBaseKey}.state.description.changed`,
-        {
-          hasAttribute: attribute !== "" ? "true" : "false",
-          attribute: attribute,
-          anyChange: toChoice === "special" ? "true" : "false",
-          fromChoice: fromChoice,
-          fromString: fromString,
-          toChoice: toChoice,
-          toString: toString,
-          hasDuration: duration !== "" ? "true" : "false",
-          duration: duration,
-        }
-      );
-    }
-
-    const entities: string[] = [];
-    if (entityArray) {
-      for (const entity of entityArray) {
-        if (states[entity]) {
-          entities.push(computeStateName(states[entity]) || entity);
-        }
-      }
-    }
-
     return hass.localize(
       `${triggerTranslationBaseKey}.state.description.full`,
       {
@@ -978,14 +893,14 @@ export const describeCondition = (
   condition: Condition,
   hass: HomeAssistant,
   entityRegistry: EntityRegistryEntry[],
-  options?: DescribeOptions
+  ignoreAlias = false
 ): string => {
   try {
     const description = tryDescribeCondition(
       condition,
       hass,
       entityRegistry,
-      options
+      ignoreAlias
     );
     if (typeof description !== "string") {
       throw new Error(String(description));
@@ -1007,7 +922,7 @@ const tryDescribeCondition = (
   condition: Condition,
   hass: HomeAssistant,
   entityRegistry: EntityRegistryEntry[],
-  options?: DescribeOptions
+  ignoreAlias = false
 ) => {
   if (typeof condition === "string" && hasTemplate(condition)) {
     return hass.localize(
@@ -1015,7 +930,7 @@ const tryDescribeCondition = (
     );
   }
 
-  if (condition.alias && !options?.ignoreAlias) {
+  if (condition.alias && !ignoreAlias) {
     return condition.alias;
   }
 
@@ -1037,8 +952,7 @@ const tryDescribeCondition = (
   const description = describeLegacyCondition(
     condition as LegacyCondition,
     hass,
-    entityRegistry,
-    options?.hideEntities
+    entityRegistry
   );
 
   if (description) {
@@ -1064,8 +978,7 @@ const tryDescribeCondition = (
 const describeLegacyCondition = (
   condition: LegacyCondition,
   hass: HomeAssistant,
-  entityRegistry: EntityRegistryEntry[],
-  hideEntities = false
+  entityRegistry: EntityRegistryEntry[]
 ) => {
   if (condition.condition === "or") {
     const conditions = ensureArray(condition.conditions);
@@ -1122,20 +1035,17 @@ const describeLegacyCondition = (
 
   // State Condition
   if (condition.condition === "state") {
-    if (!condition.entity_id && !hideEntities) {
+    if (!condition.entity_id) {
       return hass.localize(
         `${conditionsTranslationBaseKey}.state.description.no_entity`
       );
     }
 
-    const stateObj = hass.states[
-      Array.isArray(condition.entity_id)
-        ? condition.entity_id[0]
-        : condition.entity_id
-    ] as HassEntity | undefined;
-
     let attribute = "";
     if (condition.attribute) {
+      const stateObj = Array.isArray(condition.entity_id)
+        ? hass.states[condition.entity_id[0]]
+        : (hass.states[condition.entity_id] as HassEntity | undefined);
       attribute = stateObj
         ? computeAttributeNameDisplay(
             hass.localize,
@@ -1146,7 +1056,27 @@ const describeLegacyCondition = (
         : condition.attribute;
     }
 
+    const entities: string[] = [];
+    if (Array.isArray(condition.entity_id)) {
+      for (const entity of condition.entity_id.values()) {
+        if (hass.states[entity]) {
+          entities.push(computeStateName(hass.states[entity]) || entity);
+        }
+      }
+    } else if (condition.entity_id) {
+      entities.push(
+        hass.states[condition.entity_id]
+          ? computeStateName(hass.states[condition.entity_id])
+          : condition.entity_id
+      );
+    }
+
     const states: string[] = [];
+    const stateObj = hass.states[
+      Array.isArray(condition.entity_id)
+        ? condition.entity_id[0]
+        : condition.entity_id
+    ] as HassEntity | undefined;
     if (Array.isArray(condition.state)) {
       for (const state of condition.state.values()) {
         states.push(
@@ -1163,7 +1093,7 @@ const describeLegacyCondition = (
             : state
         );
       }
-    } else if (condition.state != null && condition.state !== "") {
+    } else if (condition.state !== "") {
       states.push(
         stateObj
           ? condition.attribute
@@ -1184,37 +1114,6 @@ const describeLegacyCondition = (
       duration = describeDuration(hass.locale, condition.for) || "";
     }
 
-    if (hideEntities) {
-      if (states.length === 0) {
-        return hass.localize(`${conditionsTranslationBaseKey}.state.label`);
-      }
-      return hass.localize(
-        `${conditionsTranslationBaseKey}.state.description.is`,
-        {
-          hasAttribute: attribute !== "" ? "true" : "false",
-          attribute: attribute,
-          states: formatListWithOrs(hass.locale, states),
-          hasDuration: duration !== "" ? "true" : "false",
-          duration: duration,
-        }
-      );
-    }
-
-    const entities: string[] = [];
-    if (Array.isArray(condition.entity_id)) {
-      for (const entity of condition.entity_id.values()) {
-        if (hass.states[entity]) {
-          entities.push(computeStateName(hass.states[entity]) || entity);
-        }
-      }
-    } else if (condition.entity_id) {
-      entities.push(
-        hass.states[condition.entity_id]
-          ? computeStateName(hass.states[condition.entity_id])
-          : condition.entity_id
-      );
-    }
-
     return hass.localize(
       `${conditionsTranslationBaseKey}.state.description.full`,
       {
@@ -1237,14 +1136,15 @@ const describeLegacyCondition = (
   }
 
   // Numeric State Condition
-  if (
-    condition.condition === "numeric_state" &&
-    (condition.entity_id || hideEntities)
-  ) {
-    const entity_ids = condition.entity_id
-      ? ensureArray(condition.entity_id)
-      : [];
+  if (condition.condition === "numeric_state" && condition.entity_id) {
+    const entity_ids = ensureArray(condition.entity_id);
     const stateObj = hass.states[entity_ids[0]] as HassEntity | undefined;
+    const entity = formatListWithAnds(
+      hass.locale,
+      entity_ids.map((id) =>
+        hass.states[id] ? computeStateName(hass.states[id]) : id || ""
+      )
+    );
 
     const attribute = condition.attribute
       ? stateObj
@@ -1257,30 +1157,6 @@ const describeLegacyCondition = (
         : condition.attribute
       : undefined;
 
-    if (hideEntities) {
-      const suffix = numericThresholdSuffix(condition);
-      if (!suffix) {
-        return hass.localize(
-          `${conditionsTranslationBaseKey}.numeric_state.label`
-        );
-      }
-      return hass.localize(
-        `${conditionsTranslationBaseKey}.numeric_state.description.is_${suffix}`,
-        {
-          attribute,
-          above: formatNumericLimitValue(hass, condition.above),
-          below: formatNumericLimitValue(hass, condition.below),
-        }
-      );
-    }
-
-    const entity = formatListWithAnds(
-      hass.locale,
-      entity_ids.map((id) =>
-        hass.states[id] ? computeStateName(hass.states[id]) : id || ""
-      )
-    );
-
     if (condition.above !== undefined && condition.below !== undefined) {
       return hass.localize(
         `${conditionsTranslationBaseKey}.numeric_state.description.above-below`,
@@ -1356,16 +1232,12 @@ const describeLegacyCondition = (
 
       let hasTime = "";
       if (after !== undefined && before !== undefined) {
-        const afterSeconds = literalTimeToSeconds(condition.after);
-        const beforeSeconds = literalTimeToSeconds(condition.before);
-        if (beforeSeconds === 0) {
-          // A window ending at midnight runs to the end of the day, so the
-          // "before" boundary adds nothing to the summary.
-          hasTime = "after";
-        } else if (
-          afterSeconds !== undefined &&
-          beforeSeconds !== undefined &&
-          afterSeconds > beforeSeconds
+        if (
+          typeof condition.after === "string" &&
+          !condition.after.includes(".") &&
+          typeof condition.before === "string" &&
+          !condition.before.includes(".") &&
+          condition.after > condition.before
         ) {
           hasTime = "after_before_or";
         } else {

src/data/device/device_picker.ts

@@ -53,8 +53,7 @@ export const computeDeviceAreaLabel = (
   translationMetadata: HomeAssistant["translationMetadata"],
   viaDeviceEntities?: EntityRegistryEntry[] | EntityRegistryDisplayEntry[]
 ): DeviceAreaLabel => {
-  // Pass devices so a child device inherits its parent's area.
-  const area = getDeviceArea(device, areas, devices);
+  const area = getDeviceArea(device, areas);
 
   const viaDevice = device.via_device_id
     ? devices[device.via_device_id]
@@ -62,9 +61,7 @@ export const computeDeviceAreaLabel = (
   const viaDeviceName = viaDevice
     ? computeDeviceNameDisplay(viaDevice, localize, states, viaDeviceEntities)
     : undefined;
-  const viaDeviceArea = viaDevice
-    ? getDeviceArea(viaDevice, areas, devices)
-    : undefined;
+  const viaDeviceArea = viaDevice ? getDeviceArea(viaDevice, areas) : undefined;
   const viaDeviceAreaName = viaDeviceArea
     ? computeAreaName(viaDeviceArea)
     : undefined;

src/data/device/device_registry.ts

@@ -15,13 +15,6 @@ export {
   subscribeDeviceRegistry,
 } from "../ws-device_registry";
 
-export type DeviceDisabler =
-  | "user"
-  | "integration"
-  | "config_entry"
-  // The device's parent device is disabled (child devices only).
-  | "device";
-
 export interface DeviceRegistryEntry extends RegistryEntry {
   id: string;
   config_entries: string[];
@@ -40,47 +33,11 @@ export interface DeviceRegistryEntry extends RegistryEntry {
   area_id: string | null;
   name_by_user: string | null;
   entry_type: "service" | null;
-  disabled_by: DeviceDisabler | null;
+  disabled_by: "user" | "integration" | "config_entry" | null;
   configuration_url: string | null;
   primary_config_entry: string | null;
-  // Set when this device is a child (logical part) of another device.
-  // null for regular top-level devices.
-  parent_device_id: string | null;
 }
 
-/**
- * A child device as it arrives over the wire from
- * `config/device_registry/list`. A child is a lightweight logical part of a
- * parent device (e.g. an outlet of a power strip); it only carries its own
- * fields and inherits the rest from its parent. It is never stored in
- * `hass.devices` in this shape — {@link resolveChildDevices} turns every child
- * into a complete {@link DeviceRegistryEntry} at ingestion, so downstream code
- * only ever sees full device entries.
- */
-export interface ChildDeviceRegistryEntry extends RegistryEntry {
-  id: string;
-  config_entry_id: string;
-  config_subentry_id: string | null;
-  identifiers: [string, string][];
-  name: string | null;
-  name_by_user: string | null;
-  labels: string[];
-  area_id: string | null;
-  disabled_by: DeviceDisabler | null;
-  parent_device_id: string;
-}
-
-/**
- * The raw, mixed list returned by `config/device_registry/list`: full devices
- * and stripped children, discriminated by the presence of full-device fields.
- */
-export type DeviceRegistryListEntry =
-  DeviceRegistryEntry | ChildDeviceRegistryEntry;
-
-/** Whether a resolved device entry is a child (logical part) of another device. */
-export const isChildDevice = (device: DeviceRegistryEntry): boolean =>
-  device.parent_device_id !== null;
-
 export type DeviceEntityDisplayLookup = Record<
   string,
   EntityRegistryDisplayEntry[]
@@ -189,13 +146,15 @@ export const updateDeviceRegistryEntry = (
     ...updates,
   });
 
-export const removeDeviceFromRegistry = (
+export const removeConfigEntryFromDevice = (
   hass: HomeAssistant,
-  deviceId: string
+  deviceId: string,
+  configEntryId: string
 ) =>
-  hass.callWS<null>({
-    type: "config/device_registry/remove",
+  hass.callWS<DeviceRegistryEntry>({
+    type: "config/device_registry/remove_config_entry",
     device_id: deviceId,
+    config_entry_id: configEntryId,
   });
 
 export const sortDeviceRegistryByName = (

src/data/frontend.ts

@@ -1,4 +1,5 @@
 import type { Connection } from "home-assistant-js-websocket";
+import type { Condition } from "../panels/lovelace/common/validate-condition";
 import type { ShortcutItem } from "./home_shortcuts";
 
 export interface SurveyInteraction {
@@ -35,6 +36,17 @@ export interface HomeFrontendSystemData {
   shortcuts?: ShortcutItem[];
 }
 
+export interface SecurityAlertEntityConfig {
+  entity: string;
+  color?: string;
+  pulse?: boolean;
+  visibility?: Condition[];
+}
+
+export interface SecurityFrontendSystemData {
+  alert_entities?: SecurityAlertEntityConfig[];
+}
+
 export interface EnergyFrontendSystemData {
   // Stable "<view>.<card-type>" keys of energy dashboard cards the user has
   // hidden. An absent key or array means nothing is hidden (all cards visible),
@@ -51,6 +63,7 @@ declare global {
     core: CoreFrontendSystemData;
     home: HomeFrontendSystemData;
     energy: EnergyFrontendSystemData;
+    security: SecurityFrontendSystemData;
   }
 }
 

src/data/scene.ts

@@ -1,11 +1,7 @@
 import type {
-  HassEntity,
   HassEntityAttributeBase,
   HassEntityBase,
 } from "home-assistant-js-websocket";
-import { DOMAINS_WITH_DYNAMIC_PICTURE } from "../common/const";
-import { computeDomain } from "../common/entity/compute_domain";
-import { stateActive } from "../common/entity/state_active";
 import { navigate } from "../common/navigate";
 import type { HomeAssistant, ServiceCallResponse } from "../types";
 
@@ -70,75 +66,6 @@ export type SceneMetaData = Record<
   { entity_only?: boolean | undefined }
 >;
 
-// Hand-edited scenes.yaml is parsed as YAML 1.1 by the backend, so unquoted
-// on/off arrive here as booleans. The backend applies boolean states as
-// on/off; mirror that so the badge reflects what activating the scene will
-// actually do. Everything else the backend rejects (numbers, null, arrays,
-// objects) yields undefined.
-const normalizeSceneEntityState = (sceneState: unknown): string | undefined => {
-  if (typeof sceneState === "boolean") {
-    return sceneState ? "on" : "off";
-  }
-  if (typeof sceneState === "string") {
-    return sceneState;
-  }
-  return undefined;
-};
-
-// Builds a state object from the scene's stored target state, so the scene
-// editor can render the icon the entity will have once the scene is applied
-// rather than its current live icon. The parameter is typed unknown because
-// the scene config API returns raw YAML: booleans, numbers, nulls, and
-// malformed shapes occur in hand-edited files beyond what the SceneEntities
-// union declares. Entries that hold no usable target state (an entity left
-// without a value in the YAML editor parses as null, a dict may lack a state
-// key) yield undefined so the caller renders no badge instead of guessing.
-//
-// The result is a partial HassEntity meant for badge rendering only - it has
-// no last_changed, last_updated, or context.
-export const sceneEntityStateObj = (
-  entityId: string,
-  sceneEntity: unknown
-): HassEntity | undefined => {
-  if (
-    typeof sceneEntity !== "object" ||
-    sceneEntity === null ||
-    Array.isArray(sceneEntity)
-  ) {
-    const state = normalizeSceneEntityState(sceneEntity);
-    return state === undefined
-      ? undefined
-      : ({ entity_id: entityId, state, attributes: {} } as HassEntity);
-  }
-  const { state: sceneState, ...attributes } = sceneEntity as Record<
-    string,
-    unknown
-  >;
-  const state = normalizeSceneEntityState(sceneState);
-  if (state === undefined) {
-    return undefined;
-  }
-  // Media-derived entity pictures are snapshotted with an access token that
-  // is stale by the time review mode renders, which would leave the badge
-  // showing a broken image instead of an icon. Stable pictures on other
-  // domains are kept - the same policy createHistoricState applies for the
-  // logbook.
-  if (DOMAINS_WITH_DYNAMIC_PICTURE.has(computeDomain(entityId))) {
-    delete attributes.entity_picture;
-    delete attributes.entity_picture_local;
-  }
-  const stateObj = { entity_id: entityId, state, attributes } as HassEntity;
-  // A live entity never carries color attributes while off, and state-badge
-  // applies rgb_color and brightness without checking activity; drop them for
-  // inactive targets so a scene that turns a light off does not render an
-  // active-looking colored icon.
-  if (!stateActive(stateObj)) {
-    delete attributes.rgb_color;
-    delete attributes.brightness;
-  }
-  return stateObj;
-};
-
 export const activateScene = (
   hass: HomeAssistant,
   entityId: string

src/data/selector.ts

@@ -397,9 +397,6 @@ export interface NumberSelector {
     unit_of_measurement?: string;
     slider_ticks?: boolean;
     translation_key?: string;
-    // Shown instead of the browser's native message when the value fails
-    // min/max/step constraint validation.
-    validation_message?: string;
   } | null;
 }
 

src/data/vacuum.ts

@@ -35,8 +35,7 @@ export enum VacuumEntityFeature {
 
 interface VacuumEntityAttributes extends HassEntityAttributeBase {
   battery_level?: number;
-  fan_speed?: string;
-  fan_speed_list?: string[];
+  fan_speed?: any;
   [key: string]: any;
 }
 

src/data/ws-device_registry.ts

@@ -2,87 +2,12 @@ import type { Connection } from "home-assistant-js-websocket";
 import { createCollection } from "home-assistant-js-websocket";
 import type { Store } from "home-assistant-js-websocket/dist/store";
 import { debounce } from "../common/util/debounce";
-import type {
-  ChildDeviceRegistryEntry,
-  DeviceRegistryEntry,
-  DeviceRegistryListEntry,
-} from "./device/device_registry";
-
-// A full device carries fields that stripped children never do; use one of
-// those as the discriminant. This keeps "is a stripped child" decoupled from
-// "has a parent", so a hypothetical full-featured sub-device would still be
-// treated as a complete entry. We key off `connections` rather than
-// `config_entries` because the latter is a deprecated compatibility field core
-// plans to drop; `connections` is present on every full device and never on a
-// stripped child.
-const isChildEntry = (
-  entry: DeviceRegistryListEntry
-): entry is ChildDeviceRegistryEntry => !("connections" in entry);
-
-/**
- * Resolve the mixed device list from `config/device_registry/list` into a flat
- * list of complete {@link DeviceRegistryEntry} objects.
- *
- * Children are stripped over the wire and inherit the rest from their parent:
- * - config-entry association comes from the child's own `config_entry_id`, so
- *   children still show up under their integration;
- * - hardware/display fields (manufacturer, model, versions, ...) are inherited
- *   from the parent, since a child is a logical part of the same hardware;
- * - identity fields (`connections`, `via_device_id`) are NOT inherited — a
- *   child is not the parent and has no connections of its own.
- *
- * Nesting is a single level (core rejects a child as another child's parent),
- * so no recursion is needed.
- */
-export const resolveChildDevices = (
-  entries: DeviceRegistryListEntry[]
-): DeviceRegistryEntry[] => {
-  const parents = new Map<string, DeviceRegistryEntry>();
-  for (const entry of entries) {
-    if (!isChildEntry(entry)) {
-      parents.set(entry.id, entry);
-    }
-  }
-
-  return entries.map((entry) => {
-    if (!isChildEntry(entry)) {
-      return entry;
-    }
-
-    const parent = parents.get(entry.parent_device_id);
-
-    return {
-      // Structural fields derived from the child's own config entry.
-      config_entries: [entry.config_entry_id],
-      config_entries_subentries: {
-        [entry.config_entry_id]: [entry.config_subentry_id],
-      },
-      primary_config_entry: entry.config_entry_id,
-      // Hardware/display fields inherited from the parent.
-      manufacturer: parent?.manufacturer ?? null,
-      model: parent?.model ?? null,
-      model_id: parent?.model_id ?? null,
-      sw_version: parent?.sw_version ?? null,
-      hw_version: parent?.hw_version ?? null,
-      serial_number: parent?.serial_number ?? null,
-      entry_type: parent?.entry_type ?? null,
-      configuration_url: parent?.configuration_url ?? null,
-      // Identity fields — a child has none of its own.
-      connections: [],
-      via_device_id: null,
-      // The child's own fields (id, name, area_id, labels, identifiers,
-      // parent_device_id, ...) win over everything above.
-      ...entry,
-    };
-  });
-};
+import type { DeviceRegistryEntry } from "./device/device_registry";
 
 export const fetchDeviceRegistry = (conn: Connection) =>
-  conn
-    .sendMessagePromise<DeviceRegistryListEntry[]>({
-      type: "config/device_registry/list",
-    })
-    .then(resolveChildDevices);
+  conn.sendMessagePromise<DeviceRegistryEntry[]>({
+    type: "config/device_registry/list",
+  });
 
 const subscribeDeviceRegistryUpdates = (
   conn: Connection,

src/dialogs/make-dialog-manager.ts

@@ -98,31 +98,20 @@ export const showDialog = async (
       return false;
     }
     LOADED[dialogTag] = {
-      element: dialogImport().then(
-        () => {
-          const dialogEl = document.createElement(dialogTag) as
-            HassDialogNext | HassDialog;
+      element: dialogImport().then(() => {
+        const dialogEl = document.createElement(dialogTag) as
+          HassDialogNext | HassDialog;
 
-          if ("showDialog" in dialogEl) {
-            // provide hass for legacy persistent dialogs
-            element.provideHass(dialogEl);
-          }
-
-          dialogEl.addEventListener("dialog-closed", _handleClosed);
-          dialogEl.addEventListener("dialog-closed", _handleClosedFocus);
-
-          return dialogEl;
-        },
-        (err) => {
-          // Don't cache a rejected import (e.g. a stale build's chunk 404s
-          // while the app stayed open): drop the entry so a later open
-          // re-imports instead of being permanently stuck on the rejected
-          // promise. The rejection still propagates to the global stale-build
-          // handler (logging-mixin) for recovery.
-          delete LOADED[dialogTag];
-          throw err;
+        if ("showDialog" in dialogEl) {
+          // provide hass for legacy persistent dialogs
+          element.provideHass(dialogEl);
         }
-      ),
+
+        dialogEl.addEventListener("dialog-closed", _handleClosed);
+        dialogEl.addEventListener("dialog-closed", _handleClosedFocus);
+
+        return dialogEl;
+      }),
     };
   }
 

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

@@ -367,10 +367,10 @@ class MoreInfoLight extends LitElement {
           width: auto;
         }
         .wheel {
-          width: 28px;
-          height: 28px;
+          width: 30px;
+          height: 30px;
           flex: none;
-          border-radius: var(--ha-border-radius-circle);
+          border-radius: var(--ha-border-radius-xl);
         }
         .wheel.color {
           background-image: url("/static/images/color_wheel.png");

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

@@ -1,24 +1,16 @@
-import { consume } from "@lit/context";
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { computeAreaName } from "../../common/entity/compute_area_name";
 import { computeAttributeNameDisplay } from "../../common/entity/compute_attribute_display";
-import { computeDeviceNameDisplay } from "../../common/entity/compute_device_name";
-import { computeFloorName } from "../../common/entity/compute_floor_name";
-import { getEntityContext } from "../../common/entity/context/get_entity_context";
 import checkValidDate from "../../common/datetime/check_valid_date";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
 import "../../components/ha-attribute-value";
-import "../../components/item/ha-list-item-value";
-import "../../components/list/ha-grouped-list";
+import "../../components/ha-card";
 import type { LocalizeKeys } from "../../common/translations/localize";
 import { computeShownAttributes } from "../../data/entity/entity_attributes";
-import { labelsContext } from "../../data/context";
 import type { ExtEntityRegistryEntry } from "../../data/entity/entity_registry";
-import type { LabelRegistryEntry } from "../../data/label/label_registry";
 import type { HomeAssistant } from "../../types";
 import "../../components/ha-yaml-editor";
 import { computeDomain } from "../../common/entity/compute_domain";
@@ -34,7 +26,6 @@ interface DetailsViewParams {
 interface DetailEntry {
   translationKey: LocalizeKeys;
   value: string;
-  href?: string;
 }
 
 @customElement("ha-more-info-details")
@@ -49,15 +40,8 @@ class HaMoreInfoDetails extends LitElement {
 
   @state() private _stateObj?: HassEntity;
 
-  @consume({ context: labelsContext, subscribe: true })
-  @state()
-  private _labels?: LabelRegistryEntry[];
-
   protected willUpdate(changedProps: PropertyValues<this>): void {
     super.willUpdate(changedProps);
-    if (changedProps.has("entry") && this.entry) {
-      this.hass.loadBackendTranslation("title", [this.entry.platform]);
-    }
     if (changedProps.has("params") || changedProps.has("hass")) {
       if (this.params?.entityId && this.hass) {
         this._stateObj = this.hass.states[this.params.entityId];
@@ -70,93 +54,9 @@ class HaMoreInfoDetails extends LitElement {
       return nothing;
     }
 
-    const {
-      stateEntries,
-      attributes,
-      yamlData: stateYamlData,
-    } = this._getDetailData(this._stateObj);
-    const { floor, area, device } = getEntityContext(
-      this._stateObj,
-      this.hass.entities,
-      this.hass.devices,
-      this.hass.areas,
-      this.hass.floors
+    const { stateEntries, attributes, yamlData } = this._getDetailData(
+      this._stateObj
     );
-    const floorName = floor ? computeFloorName(floor) : undefined;
-    const areaName = area ? (computeAreaName(area) ?? area.area_id) : undefined;
-    const deviceName = device
-      ? computeDeviceNameDisplay(device, this.hass.localize, this.hass.states)
-      : undefined;
-    const integrationName = this.entry?.platform
-      ? this.hass.localize(`component.${this.entry.platform}.title`) ||
-        this.entry.platform
-      : undefined;
-    const labelNames =
-      this.entry?.labels.map(
-        (labelId) =>
-          this._labels?.find((label) => label.label_id === labelId)?.name ??
-          labelId
-      ) ?? [];
-    const contextEntries: DetailEntry[] = [];
-
-    if (floor && floorName) {
-      contextEntries.push({
-        translationKey: "ui.dialogs.more_info_control.floor",
-        value: floorName,
-        href: "/config/areas/dashboard",
-      });
-    }
-    if (area && areaName) {
-      contextEntries.push({
-        translationKey: "ui.components.related-items.area",
-        value: areaName,
-        href: `/config/areas/area/${area.area_id}`,
-      });
-    }
-    if (device && deviceName) {
-      contextEntries.push({
-        translationKey: "ui.components.related-items.device",
-        value: deviceName,
-        href: `/config/devices/device/${device.id}`,
-      });
-    }
-    if (this.entry?.platform && integrationName) {
-      contextEntries.push({
-        translationKey: "ui.components.related-items.integration",
-        value: integrationName,
-        href: this.entry.config_entry_id
-          ? `/config/integrations/integration/${this.entry.platform}#config_entry=${this.entry.config_entry_id}`
-          : undefined,
-      });
-    }
-
-    const entityEntries: DetailEntry[] = [
-      {
-        translationKey: "ui.dialogs.more_info_control.entity_id",
-        value: this.params.entityId,
-      },
-      {
-        translationKey: "ui.dialogs.more_info_control.labels",
-        value: labelNames.join(", ") || this.hass.localize("ui.common.none"),
-      },
-    ];
-    const yamlData = {
-      ...(contextEntries.length
-        ? {
-            context: {
-              ...(floorName ? { floor: floorName } : {}),
-              ...(areaName ? { area: areaName } : {}),
-              ...(deviceName ? { device: deviceName } : {}),
-              ...(integrationName ? { integration: integrationName } : {}),
-            },
-          }
-        : {}),
-      entity: {
-        entity_id: this.params.entityId,
-        labels: labelNames,
-      },
-      ...stateYamlData,
-    };
 
     return html`
       <div class="content">
@@ -169,41 +69,43 @@ class HaMoreInfoDetails extends LitElement {
                 in-dialog
               ></ha-yaml-editor>`
             : html`
-                ${
-                  contextEntries.length
-                    ? html`<ha-grouped-list
-                        .header=${this.hass.localize(
-                          "ui.dialogs.more_info_control.context"
+                <section class="section">
+                  <h2 class="section-title">
+                    ${this.hass.localize(
+                      "ui.components.entity.entity-state-picker.state"
+                    )}
+                  </h2>
+                  <ha-card>
+                    <div class="card-content">
+                      <div class="data-group">
+                        ${stateEntries.map(
+                          (entry) =>
+                            html`<div class="data-entry">
+                              <div class="key">
+                                ${this.hass.localize(entry.translationKey)}
+                              </div>
+                              <div class="value">${entry.value}</div>
+                            </div>`
                         )}
-                      >
-                        ${this._renderEntries(contextEntries)}
-                      </ha-grouped-list>`
-                    : nothing
-                }
+                      </div>
+                    </div>
+                  </ha-card>
+                </section>
 
-                <ha-grouped-list
-                  .header=${this.hass.localize(
-                    "ui.components.entity.entity-state-picker.state"
-                  )}
-                >
-                  ${this._renderEntries(stateEntries)}
-                </ha-grouped-list>
-
-                <ha-grouped-list
-                  .header=${this.hass.localize(
-                    "ui.dialogs.more_info_control.entity"
-                  )}
-                >
-                  ${this._renderEntries(entityEntries)}
-                </ha-grouped-list>
-
-                <ha-grouped-list
-                  .header=${this.hass.localize(
-                    "ui.dialogs.more_info_control.attributes"
-                  )}
-                >
-                  ${this._renderAttributes(attributes)}
-                </ha-grouped-list>
+                <section class="section">
+                  <h2 class="section-title">
+                    ${this.hass.localize(
+                      "ui.dialogs.more_info_control.attributes"
+                    )}
+                  </h2>
+                  <ha-card>
+                    <div class="card-content">
+                      <div class="data-group">
+                        ${this._renderAttributes(attributes)}
+                      </div>
+                    </div>
+                  </ha-card>
+                </section>
               `
         }
       </div>
@@ -275,20 +177,6 @@ class HaMoreInfoDetails extends LitElement {
       : value;
   }
 
-  private _renderEntries(entries: DetailEntry[]) {
-    return entries.map(
-      (entry) => html`
-        <ha-list-item-value .label=${this.hass.localize(entry.translationKey)}>
-          ${
-            entry.href
-              ? html`<a href=${entry.href}>${entry.value}</a>`
-              : entry.value
-          }
-        </ha-list-item-value>
-      `
-    );
-  }
-
   private _renderAttributes(attributes: string[]) {
     if (attributes.length === 0) {
       return html`<div class="empty">
@@ -304,25 +192,28 @@ class HaMoreInfoDetails extends LitElement {
 
     return attributes.map(
       (attribute) => html`
-        <ha-list-item-value
-          .label=${computeAttributeNameDisplay(
-            this.hass.localize,
-            this._stateObj!,
-            this.hass.entities,
-            attribute
-          )}
-        >
-          ${
-            attribute === "supported_features" && featureEnum
-              ? this._renderFeatures(featureEnum, this._stateObj!)
-              : html`
-                  <ha-attribute-value
-                    .attribute=${attribute}
-                    .stateObj=${this._stateObj}
-                  ></ha-attribute-value>
-                `
-          }
-        </ha-list-item-value>
+        <div class="data-entry">
+          <div class="key">
+            ${computeAttributeNameDisplay(
+              this.hass.localize,
+              this._stateObj!,
+              this.hass.entities,
+              attribute
+            )}
+          </div>
+          <div class="value">
+            ${
+              attribute === "supported_features" && featureEnum
+                ? this._renderFeatures(featureEnum, this._stateObj!)
+                : html`
+                    <ha-attribute-value
+                      .attribute=${attribute}
+                      .stateObj=${this._stateObj}
+                    ></ha-attribute-value>
+                  `
+            }
+          </div>
+        </div>
       `
     );
   }
@@ -356,18 +247,47 @@ class HaMoreInfoDetails extends LitElement {
       padding-bottom: max(var(--safe-area-inset-bottom), var(--ha-space-6));
     }
 
-    ha-grouped-list + ha-grouped-list {
+    .section + .section {
       margin-top: var(--ha-space-4);
     }
 
-    a {
-      color: var(--primary-color);
+    .section-title {
+      margin: 0 0 var(--ha-space-2);
+      font-size: var(--ha-font-size-m);
+      font-weight: var(--ha-font-weight-medium);
+    }
+
+    .card-content {
+      padding: var(--ha-space-2) var(--ha-space-4);
+    }
+
+    .data-entry {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      padding: var(--ha-space-2) 0;
+      border-bottom: 1px solid var(--divider-color);
+    }
+
+    .data-group .data-entry:last-of-type {
+      border-bottom: none;
+    }
+
+    .data-entry .value {
+      max-width: 60%;
+      overflow-wrap: break-word;
+      text-align: right;
+    }
+
+    .key {
+      flex-grow: 1;
+      color: var(--secondary-text-color);
     }
 
     .empty {
       color: var(--secondary-text-color);
       text-align: center;
-      padding: var(--ha-space-3) var(--ha-space-4);
+      padding: var(--ha-space-2) 0;
     }
   `;
 }

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

@@ -40,11 +40,7 @@ import {
   getEntityEntryContext,
 } from "../../common/entity/context/get_entity_context";
 import { shouldHandleRequestSelectedEvent } from "../../common/mwc/handle-request-selected-event";
-import {
-  getHistoryState,
-  navigate,
-  updateHistoryState,
-} from "../../common/navigate";
+import { navigate } from "../../common/navigate";
 import type { LocalizeKeys } from "../../common/translations/localize";
 import { computeRTL } from "../../common/util/compute_rtl";
 import { withViewTransition } from "../../common/util/view-transition";
@@ -272,12 +268,16 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
   }
 
   private _setView(view: MoreInfoView) {
-    updateHistoryState({
-      dialogParams: {
-        ...getHistoryState()?.dialogParams,
-        view,
+    history.replaceState(
+      {
+        ...history.state,
+        dialogParams: {
+          ...history.state?.dialogParams,
+          view,
+        },
       },
-    });
+      ""
+    );
     this._currView = view;
   }
 
@@ -1063,10 +1063,6 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
           outline: none;
           flex: 1;
           overflow: auto;
-          /* Keep the content width constant when the scrollbar toggles;
-             otherwise width-dependent content can flicker at the overflow
-             threshold (#53228). */
-          scrollbar-gutter: stable;
         }
 
         .content-wrapper.settings-view .fade-bottom {

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -60,7 +60,6 @@ import type { HomeAssistant } from "../../types";
 import { isIosApp } from "../../util/is_ios";
 import { isMac } from "../../util/is_mac";
 import { showConfirmationDialog } from "../generic/show-dialog-box";
-import "../restart/automation-restart-status";
 import { showShortcutsDialog } from "../shortcuts/show-shortcuts-dialog";
 import { showVoiceCommandDialog } from "../voice-command-dialog/show-ha-voice-command-dialog";
 import {
@@ -800,9 +799,9 @@ export class QuickBar extends LitElement {
             title: this.hass.localize(
               `ui.dialogs.restart.${actionItem.action}.confirm_title`
             ),
-            text: html`${this.hass.localize(
-                `ui.dialogs.restart.${actionItem.action}.confirm_description`
-              )}<br /><br /><automation-restart-status></automation-restart-status>`,
+            text: this.hass.localize(
+              `ui.dialogs.restart.${actionItem.action}.confirm_description`
+            ),
             confirmText: this.hass.localize(
               `ui.dialogs.restart.${actionItem.action}.confirm_action`
             ),

src/dialogs/restart/automation-restart-status.ts

@@ -1,54 +0,0 @@
-import { LitElement, html } from "lit";
-import { consume, type ContextType } from "@lit/context";
-import { customElement, state } from "lit/decorators";
-import { computeDomain } from "../../common/entity/compute_domain";
-import type { EntityNameItem } from "../../common/entity/compute_entity_name_display";
-import { STRINGS_SEPARATOR_DOT } from "../../common/const";
-import {
-  formattersContext,
-  internationalizationContext,
-  statesContext,
-} from "../../data/context";
-
-const ENTITY_NAME_FORMAT: EntityNameItem[] = [
-  { type: "entity" },
-  { type: "area" },
-] as const;
-const ENTITY_NAME_OPTIONS = { separator: STRINGS_SEPARATOR_DOT } as const;
-
-@customElement("automation-restart-status")
-class AutomationRestartStatus extends LitElement {
-  @state()
-  @consume({ context: formattersContext, subscribe: true })
-  private _formatters!: ContextType<typeof formattersContext>;
-
-  @state()
-  @consume({ context: internationalizationContext, subscribe: true })
-  private _i18n!: ContextType<typeof internationalizationContext>;
-
-  @state()
-  @consume({ context: statesContext, subscribe: true })
-  private _states!: ContextType<typeof statesContext>;
-
-  protected render() {
-    const automations = Object.values(this._states).filter((s) => {
-      const domain = computeDomain(s.entity_id);
-      return (
-        (domain === "script" || domain === "automation") && s.attributes.current
-      );
-    });
-
-    return automations.length
-      ? html`${this._i18n.localize("ui.dialogs.restart.interrupt_automations")}
-          <ul>
-            ${automations.map((a) => html`<li>${this._formatters.formatEntityName(a, ENTITY_NAME_FORMAT, ENTITY_NAME_OPTIONS)}</li>`)}
-          </ul>`
-      : html`${this._i18n.localize("ui.dialogs.restart.no_interrupt_automations")}`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "automation-restart-status": AutomationRestartStatus;
-  }
-}

src/dialogs/restart/dialog-restart.ts

@@ -41,7 +41,6 @@ import {
   showConfirmationDialog,
 } from "../generic/show-dialog-box";
 import { showRestartWaitDialog } from "./show-dialog-restart";
-import "./automation-restart-status";
 
 @customElement("dialog-restart")
 class DialogRestart extends LitElement {
@@ -358,12 +357,12 @@ class DialogRestart extends LitElement {
     const confirmed = await showConfirmationDialog(this, {
       title: this.hass.localize(`ui.dialogs.restart.${action}.confirm_title`),
       text: html`${this.hass.localize(
-          `ui.dialogs.restart.${action}.confirm_description`
-        )}${
-          backupProgressMessage
-            ? html`<br /><br /><ha-alert>${backupProgressMessage}</ha-alert>`
-            : nothing
-        } <br /><br /><automation-restart-status></automation-restart-status>`,
+        `ui.dialogs.restart.${action}.confirm_description`
+      )}${
+        backupProgressMessage
+          ? html`<br /><br /><ha-alert>${backupProgressMessage}</ha-alert>`
+          : nothing
+      }`,
       confirmText: this.hass.localize(
         `ui.dialogs.restart.${action}.confirm_action${backupState === "idle" ? "" : "_backup"}`
       ),

src/external_app/external_messaging.ts

@@ -191,10 +191,6 @@ interface EMOutgoingMessageFocusElement extends EMMessage {
   };
 }
 
-interface EMOutgoingMessageReloadAndClearCache extends EMMessage {
-  type: "frontend/reload_and_clear_cache";
-}
-
 // These types are handled internally by the Android app via postMessage.
 // They are not sent by the frontend and should not be used directly.
 // They are intentionally listed here to prevent anyone from using them unintentionally.
@@ -224,7 +220,6 @@ type EMOutgoingMessageWithoutAnswer =
   | EMOutgoingMessageImprovConfigureDevice
   | EMOutgoingMessageAddEntityTo
   | EMOutgoingMessageFocusElement
-  | EMOutgoingMessageReloadAndClearCache
   | EMOutgoingMessageAssistSettings;
 
 export interface EMIncomingMessageRestart {
@@ -516,26 +511,14 @@ export class ExternalMessaging {
       // eslint-disable-next-line no-console
       console.log("Sending message to external app", msg);
     }
-    fireExternalBusMessage(msg);
+    if (window.externalAppV2) {
+      window.externalAppV2.postMessage(
+        JSON.stringify({ type: "externalBus", payload: msg })
+      );
+    } else if (window.externalApp) {
+      window.externalApp.externalBus(JSON.stringify(msg));
+    } else {
+      window.webkit!.messageHandlers.externalBus.postMessage(msg);
+    }
   }
 }
-
-/**
- * Post a message to the companion app's external bus without needing an
- * `ExternalMessaging` instance (i.e. without `hass`). Returns `false` when no
- * external bridge is present, so callers can fall back to browser behavior.
- */
-export const fireExternalBusMessage = (msg: EMMessage): boolean => {
-  if (window.externalAppV2) {
-    window.externalAppV2.postMessage(
-      JSON.stringify({ type: CALLBACK_EXTERNAL_BUS, payload: msg })
-    );
-  } else if (window.externalApp) {
-    window.externalApp.externalBus(JSON.stringify(msg));
-  } else if (window.webkit?.messageHandlers?.externalBus) {
-    window.webkit.messageHandlers.externalBus.postMessage(msg);
-  } else {
-    return false;
-  }
-  return true;
-};

src/layouts/back-navigation.ts

@@ -1,30 +0,0 @@
-import { isNavigationClick } from "../common/dom/is-navigation-click";
-import { goBack } from "../common/navigate";
-import { sanitizeNavigationPath } from "../common/url/sanitize-navigation-path";
-
-/**
- * Shared behavior of the toolbar back arrow. The arrow is a link to the
- * declared parent page so it can be opened in a new tab, but a plain click
- * returns to the page the user came from instead.
- */
-export const handleBackClick = (
-  ev: MouseEvent,
-  backPath?: string,
-  backCallback?: () => void
-): void => {
-  const path = sanitizeNavigationPath(backPath);
-
-  // Ctrl, cmd and shift click open the parent in a new tab or window: let
-  // the anchor handle those. A plain click is handled here instead, and
-  // isNavigationClick calls preventDefault so the anchor stays inert.
-  if (path && !isNavigationClick(ev)) {
-    return;
-  }
-
-  if (backCallback) {
-    backCallback();
-    return;
-  }
-
-  goBack(path);
-};

src/layouts/hass-error-screen.ts

@@ -1,11 +1,10 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { getHistoryState, goBack } from "../common/navigate";
+import { goBack } from "../common/navigate";
 import "../components/ha-button";
 import "../components/ha-top-app-bar-fixed";
 import type { HomeAssistant } from "../types";
-import { reloadForUpdate } from "../util/recover-stale-build";
 import "../components/ha-alert";
 
 @customElement("hass-error-screen")
@@ -20,9 +19,6 @@ class HassErrorScreen extends LitElement {
 
   @property() public error?: string;
 
-  @property({ type: Boolean, attribute: "show-reload" }) public showReload =
-    false;
-
   protected render(): TemplateResult {
     if (!this.toolbar) {
       return this._renderContent();
@@ -31,7 +27,7 @@ class HassErrorScreen extends LitElement {
     return html`
       <ha-top-app-bar-fixed
         .narrow=${this.narrow}
-        .backButton=${!(this.rootnav || getHistoryState()?.root)}
+        .backButton=${!(this.rootnav || history.state?.root)}
       >
         ${this._renderContent()}
       </ha-top-app-bar-fixed>
@@ -43,19 +39,6 @@ class HassErrorScreen extends LitElement {
       <div class="content">
         <ha-alert alert-type="error">${this.error}</ha-alert>
         <slot>
-          ${
-            this.showReload
-              ? html`
-                  <ha-button
-                    appearance="filled"
-                    size="s"
-                    @click=${this._handleReload}
-                  >
-                    ${this.hass?.localize("ui.common.refresh")}
-                  </ha-button>
-                `
-              : nothing
-          }
           <ha-button appearance="plain" size="s" @click=${this._handleBack}>
             ${this.hass?.localize("ui.common.back")}
           </ha-button>
@@ -68,12 +51,6 @@ class HassErrorScreen extends LitElement {
     goBack();
   }
 
-  private _handleReload(): void {
-    // Dirty-aware: reloads when clean, or defers with a toast when an editor
-    // has unsaved changes.
-    reloadForUpdate();
-  }
-
   static get styles(): CSSResultGroup {
     return [
       css`

src/layouts/hass-loading-screen.ts

@@ -1,7 +1,6 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
-import { getHistoryState } from "../common/navigate";
 import "../components/animation/ha-fade-in";
 import "../components/ha-top-app-bar-fixed";
 import "../components/ha-spinner";
@@ -28,7 +27,7 @@ class HassLoadingScreen extends LitElement {
     return html`
       <ha-top-app-bar-fixed
         .narrow=${this.narrow}
-        .backButton=${!(this.rootnav || getHistoryState()?.root)}
+        .backButton=${!(this.rootnav || history.state?.root)}
       >
         ${this._renderContent()}
       </ha-top-app-bar-fixed>

src/layouts/hass-router-page.ts

@@ -5,7 +5,6 @@ import memoizeOne from "memoize-one";
 import { navigate } from "../common/navigate";
 import { computeRouteTail } from "../common/url/route";
 import type { Route } from "../types";
-import { recoverFromStaleBuild } from "../util/recover-stale-build";
 import { PanelReady } from "./panel-ready";
 
 const extractPage = (path: string, defaultPage: string) => {
@@ -56,13 +55,6 @@ export class HassRouterPage extends ReactiveElement {
 
   private _currentLoadProm?: Promise<void>;
 
-  // True while a route change is loading and the outgoing panel (or a loading
-  // screen) is still shown, waiting to be replaced. While true we don't forward
-  // property updates, because they are meant for the incoming panel. It stays
-  // false when the new panel is shown immediately (no loading screen), so that
-  // panel keeps receiving updates while its module finishes loading.
-  private _replacingPanel = false;
-
   private _panelReady = new PanelReady();
 
   private _cache = {};
@@ -87,9 +79,9 @@ export class HassRouterPage extends ReactiveElement {
     }
 
     if (!changedProps.has("route")) {
-      // Skip while the outgoing panel is still shown for a pending route
-      // change; the update is meant for the incoming panel, not this one.
-      if (this.lastChild && !this._replacingPanel) {
+      // Do not update if we have a currentLoadProm, because that means
+      // that there is still an old panel shown and we're moving to a new one.
+      if (this.lastChild && !this._currentLoadProm) {
         this.updatePageEl(this.lastChild, changedProps);
       }
       return;
@@ -183,36 +175,19 @@ export class HassRouterPage extends ReactiveElement {
         this._showLoadingScreenTimeout = undefined;
       }
 
-      // A stale build (the panel's hashed chunk 404s after an upgrade while
-      // the app stayed open) is recoverable: reload onto the current build
-      // (or prompt when there are unsaved edits) instead of dead-ending.
-      const message = err instanceof Error ? err.message : String(err ?? "");
-      const stale = recoverFromStaleBuild(message, this);
-
-      // Show error screen, offering a reload action for a stale build. Set
-      // `showReload` on the returned element rather than through
-      // createErrorScreen's signature, so router subclasses that override
-      // createErrorScreen (e.g. ToolsRouter) can't drop it.
-      const errorScreen = this.createErrorScreen(
-        `Error while loading page ${newPage}.`
+      // Show error screen
+      this.appendChild(
+        this.createErrorScreen(`Error while loading page ${newPage}.`)
       );
-      errorScreen.showReload = stale;
-      this.appendChild(errorScreen);
     });
 
     // If we don't show loading screen, just show the panel.
     // It will be automatically upgraded when loading done.
     if (!routerOptions.showLoading) {
       const loadComplete = () => {
-        // Ignore a stale load that resolves after a newer navigation took over.
-        if (this._currentPage === newPage) {
-          this._currentLoadProm = undefined;
-        }
+        this._currentLoadProm = undefined;
       };
       this._currentLoadProm = loadProm.then(loadComplete, loadComplete);
-      // The new panel is shown right away, so keep forwarding updates to it
-      // while its module loads.
-      this._replacingPanel = false;
       this._createPanel(routerOptions, newPage, routeOptions);
       return;
     }
@@ -220,9 +195,6 @@ export class HassRouterPage extends ReactiveElement {
     // We are only going to show the loading screen after some time.
     // That way we won't have a double fast flash on fast connections.
     let created = false;
-    // The outgoing panel stays shown until the new one has loaded; don't
-    // forward updates to it in the meantime.
-    this._replacingPanel = true;
 
     this._showLoadingScreenTimeout = window.setTimeout(() => {
       if (created || this._currentPage !== newPage) {
@@ -238,11 +210,11 @@ export class HassRouterPage extends ReactiveElement {
 
     this._currentLoadProm = loadProm.then(
       () => {
-        // Ignore a stale load that resolves after a newer navigation took over.
+        this._currentLoadProm = undefined;
+        // Check if we're still trying to show the same page.
         if (this._currentPage !== newPage) {
           return;
         }
-        this._currentLoadProm = undefined;
 
         created = true;
         this._createPanel(
@@ -251,14 +223,9 @@ export class HassRouterPage extends ReactiveElement {
           // @ts-ignore TS forgot this is not a string.
           routeOptions
         );
-        // The new panel is now shown; resume forwarding updates to it.
-        this._replacingPanel = false;
       },
       () => {
-        if (this._currentPage === newPage) {
-          this._currentLoadProm = undefined;
-          this._replacingPanel = false;
-        }
+        this._currentLoadProm = undefined;
       }
     );
   }

src/layouts/hass-subpage.ts

@@ -4,9 +4,8 @@ import { customElement, eventOptions, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { restoreScroll } from "../common/decorators/restore-scroll";
 import type { HASSDomTargetEvent } from "../common/dom/fire_event";
-import { getHistoryState } from "../common/navigate";
+import { goBack } from "../common/navigate";
 import { sanitizeNavigationPath } from "../common/url/sanitize-navigation-path";
-import { handleBackClick } from "./back-navigation";
 import "../components/ha-icon-button-arrow-prev";
 import "../components/ha-menu-button";
 import { haStyleScrollbar } from "../resources/styles";
@@ -38,14 +37,19 @@ class HassSubpage extends LitElement {
       <div class="toolbar ${classMap({ narrow: this.narrow })}">
         <div class="toolbar-content">
           ${
-            this.mainPage || (!backPath && getHistoryState()?.root)
+            this.mainPage || history.state?.root
               ? html`<ha-menu-button></ha-menu-button>`
-              : html`
-                  <ha-icon-button-arrow-prev
-                    .href=${backPath}
-                    @click=${this._backTapped}
-                  ></ha-icon-button-arrow-prev>
-                `
+              : backPath
+                ? html`
+                    <ha-icon-button-arrow-prev
+                      href=${backPath}
+                    ></ha-icon-button-arrow-prev>
+                  `
+                : html`
+                    <ha-icon-button-arrow-prev
+                      @click=${this._backTapped}
+                    ></ha-icon-button-arrow-prev>
+                  `
           }
 
           <div class="main-title">
@@ -75,8 +79,12 @@ class HassSubpage extends LitElement {
     this._savedScrollPos = (e.target as HTMLDivElement).scrollTop;
   }
 
-  private _backTapped(ev: MouseEvent): void {
-    handleBackClick(ev, this.backPath, this.backCallback);
+  private _backTapped(): void {
+    if (this.backCallback) {
+      this.backCallback();
+      return;
+    }
+    goBack();
   }
 
   static get styles(): CSSResultGroup {

src/layouts/hass-tabs-subpage.ts

@@ -14,10 +14,9 @@ import { canShowPage } from "../common/config/can_show_page";
 import { restoreScroll } from "../common/decorators/restore-scroll";
 import type { HASSDomTargetEvent } from "../common/dom/fire_event";
 import { isNavigationClick } from "../common/dom/is-navigation-click";
-import { getHistoryState, navigate } from "../common/navigate";
+import { goBack, navigate } from "../common/navigate";
 import type { LocalizeFunc } from "../common/translations/localize";
 import { sanitizeNavigationPath } from "../common/url/sanitize-navigation-path";
-import { handleBackClick } from "./back-navigation";
 import "../components/ha-icon-button-arrow-prev";
 import "../components/ha-menu-button";
 import "../components/ha-svg-icon";
@@ -174,14 +173,19 @@ export class HassTabsSubpage extends LitElement {
         <slot name="toolbar">
           <div class="toolbar-content">
             ${
-              this.mainPage || (!backPath && getHistoryState()?.root)
+              this.mainPage || (!backPath && history.state?.root)
                 ? html`<ha-menu-button></ha-menu-button>`
-                : html`
-                    <ha-icon-button-arrow-prev
-                      .href=${backPath}
-                      @click=${this._backTapped}
-                    ></ha-icon-button-arrow-prev>
-                  `
+                : backPath
+                  ? html`
+                      <ha-icon-button-arrow-prev
+                        .href=${backPath}
+                      ></ha-icon-button-arrow-prev>
+                    `
+                  : html`
+                      <ha-icon-button-arrow-prev
+                        @click=${this._backTapped}
+                      ></ha-icon-button-arrow-prev>
+                    `
             }
             ${
               this._narrow || !this.showTabs
@@ -242,8 +246,12 @@ export class HassTabsSubpage extends LitElement {
     this._content.focus({ preventScroll: true });
   }
 
-  private _backTapped(ev: MouseEvent): void {
-    handleBackClick(ev, this.backPath, this.backCallback);
+  private _backTapped(): void {
+    if (this.backCallback) {
+      this.backCallback();
+      return;
+    }
+    goBack();
   }
 
   private _isActiveTabPath(tabPath: string, currentPath: string): boolean {

src/layouts/home-assistant.ts

@@ -19,7 +19,6 @@ import type { HomeAssistant, Route } from "../types";
 import { storeState } from "../util/ha-pref-storage";
 import { renderLaunchScreenContent } from "../util/launch-screen";
 import { checkOnboardingSurveyToast } from "../util/onboarding-survey";
-import { reloadForUpdate } from "../util/recover-stale-build";
 import {
   registerServiceWorker,
   supportsServiceWorker,
@@ -103,12 +102,13 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
     ) {
       this.checkDataBaseMigration();
     }
-    // Wait for `hass.user` to first populate so the admin guard can run; it
-    // arrives asynchronously after `hass.config`. `hass.user` also gets a fresh
-    // reference at runtime (reconnect, profile refresh via subscribeUser), so
-    // only trigger on the initial population (null -> user). Reconnect re-checks
-    // come from connection-mixin, the launch-screen swap re-check from update().
-    if (changedProps.has("hass") && this.hass?.user && !oldHass?.user) {
+    // Wait for `hass.user` to populate so the admin guard can run; it arrives
+    // asynchronously after `hass.config`.
+    if (
+      changedProps.has("hass") &&
+      this.hass?.user &&
+      oldHass?.user !== this.hass.user
+    ) {
       this.checkHttpPendingConfig();
     }
     if (
@@ -125,12 +125,12 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
   }
 
   protected update(changedProps: PropertyValues<this>) {
-    const removingLaunchScreen =
-      !!this.hass?.states &&
-      !!this.hass.config &&
-      !!this.hass.services &&
-      this._databaseMigration === false;
-    if (removingLaunchScreen) {
+    if (
+      this.hass?.states &&
+      this.hass.config &&
+      this.hass.services &&
+      this._databaseMigration === false
+    ) {
       this.render = this.renderHass;
       this.update = super.update;
       // partial-panel-resolver removes the launch screen after the first panel
@@ -138,13 +138,6 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
       // screen covers the frontend until frontend/loaded is sent.
     }
     super.update(changedProps);
-    if (removingLaunchScreen) {
-      // Surface the HTTP pending config dialog only after super.update() has
-      // committed the render swap above, which clears the launch screen from
-      // the shadow root. Appending the dialog before that render would let it
-      // tear the freshly-added dialog straight back out of the DOM.
-      this.checkHttpPendingConfig();
-    }
   }
 
   protected firstUpdated(changedProps: PropertyValues<this>) {
@@ -248,11 +241,13 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
           if (registration) {
             registration.update();
           } else if (oldVersion) {
-            reloadForUpdate();
+            // @ts-ignore Firefox supports forceGet
+            location.reload(true);
           }
         });
       } else if (oldVersion) {
-        reloadForUpdate();
+        // @ts-ignore Firefox supports forceGet
+        location.reload(true);
       }
     }
   }
@@ -261,13 +256,6 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
     if (__DEMO__ || this._httpPendingDialogOpen) {
       return;
     }
-    // Only show once the main UI is rendered. During startup the root swaps
-    // the launch screen for the app, which clears its shadow root and would
-    // tear the freshly-appended dialog straight back out of the DOM (closing
-    // it). When called too early we skip; the swap in update() re-runs this.
-    if (this.render !== this.renderHass) {
-      return;
-    }
     if (!this.hass?.user?.is_admin) {
       return;
     }

src/onboarding/onboarding-analytics.ts

@@ -6,13 +6,9 @@ import { fireEvent, type HASSDomEvent } from "../common/dom/fire_event";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-analytics";
 import "../components/ha-button";
-import "../components/ha-spinner";
 import "../components/ha-svg-icon";
 import type { Analytics } from "../data/analytics";
-import {
-  getAnalyticsDetails,
-  setAnalyticsPreferences,
-} from "../data/analytics";
+import { setAnalyticsPreferences } from "../data/analytics";
 import { onboardAnalyticsStep } from "../data/onboarding";
 import type { HomeAssistant } from "../types";
 import { documentationUrl } from "../util/documentation-url";
@@ -26,11 +22,9 @@ class OnboardingAnalytics extends LitElement {
 
   @state() private _error?: string;
 
-  // Undefined while we are still waiting for the analytics integration to be
-  // set up (Home Assistant may still be starting up during onboarding).
-  @state() private _analyticsDetails?: Analytics;
-
-  private _retryTimeout?: number;
+  @state() private _analyticsDetails: Analytics = {
+    preferences: {},
+  };
 
   protected render(): TemplateResult {
     return html`
@@ -46,26 +40,13 @@ class OnboardingAnalytics extends LitElement {
           <ha-svg-icon .path=${mdiOpenInNew}></ha-svg-icon>
         </a>
       </p>
-      ${
-        this._analyticsDetails
-          ? html`
-              <ha-analytics
-                translation_key_panel="page-onboarding"
-                @analytics-preferences-changed=${this._preferencesChanged}
-                .localize=${this.localize}
-                .analytics=${this._analyticsDetails}
-              >
-              </ha-analytics>
-            `
-          : html`
-              <div class="loading">
-                <ha-spinner></ha-spinner>
-                <p>
-                  ${this.localize("ui.panel.page-onboarding.analytics.waiting")}
-                </p>
-              </div>
-            `
-      }
+      <ha-analytics
+        translation_key_panel="page-onboarding"
+        @analytics-preferences-changed=${this._preferencesChanged}
+        .localize=${this.localize}
+        .analytics=${this._analyticsDetails}
+      >
+      </ha-analytics>
       ${this._error ? html`<div class="error">${this._error}</div>` : ""}
       <div class="footer">
         <ha-button @click=${this._save} .disabled=${!this._analyticsDetails}>
@@ -82,35 +63,6 @@ class OnboardingAnalytics extends LitElement {
         this._save(ev);
       }
     });
-    this._loadAnalyticsDetails();
-  }
-
-  public disconnectedCallback(): void {
-    super.disconnectedCallback();
-    if (this._retryTimeout) {
-      clearTimeout(this._retryTimeout);
-      this._retryTimeout = undefined;
-    }
-  }
-
-  private async _loadAnalyticsDetails(): Promise<void> {
-    try {
-      // The analytics integration registers its WebSocket commands during
-      // setup, but only stores its data once the config entry is set up. On a
-      // fresh install we can reach this step before that happened, so keep
-      // retrying until it is ready instead of failing on save.
-      this._analyticsDetails = await getAnalyticsDetails(this.hass);
-      this._error = undefined;
-    } catch (err: any) {
-      if (err.code === "not_found") {
-        this._retryTimeout = window.setTimeout(
-          () => this._loadAnalyticsDetails(),
-          1000
-        );
-        return;
-      }
-      this._error = err.message;
-    }
   }
 
   private _preferencesChanged(
@@ -124,9 +76,6 @@ class OnboardingAnalytics extends LitElement {
 
   private async _save(ev) {
     ev.preventDefault();
-    if (!this._analyticsDetails) {
-      return;
-    }
     try {
       await setAnalyticsPreferences(
         this.hass,
@@ -149,13 +98,6 @@ class OnboardingAnalytics extends LitElement {
         .error {
           color: var(--error-color);
         }
-        .loading {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          text-align: center;
-          padding: 24px 0;
-        }
         a {
           color: var(--primary-color);
           text-decoration: none;

src/panels/config/areas/ha-config-area-page.ts

@@ -644,7 +644,6 @@ class HaConfigAreaPage extends LitElement {
       <hass-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
-        back-path="/config/areas/dashboard"
         .header=${html`${
           area.icon
             ? html`<ha-icon
@@ -903,7 +902,7 @@ class HaConfigAreaPage extends LitElement {
       destructive: true,
       confirm: async () => {
         await deleteAreaRegistryEntry(this.hass!, area!.area_id);
-        afterNextRender(() => goBack("/config/areas/dashboard"));
+        afterNextRender(() => goBack("/config"));
       },
     });
   }

src/panels/config/areas/ha-config-areas-dashboard.ts

@@ -86,6 +86,8 @@ export class HaConfigAreasDashboard extends LitElement {
 
   @state() private _hierarchy?: AreasFloorHierarchy;
 
+  private _searchParms = new URLSearchParams(window.location.search);
+
   private _blockHierarchyUpdate = false;
 
   private _blockHierarchyUpdateTimeout?: number;
@@ -166,7 +168,9 @@ export class HaConfigAreasDashboard extends LitElement {
       <hass-tabs-subpage
         .hass=${this.hass}
         .isWide=${this.isWide}
-        back-path="/config"
+        .backPath=${
+          this._searchParms.has("historyBack") ? undefined : "/config"
+        }
         .tabs=${configSections.areas}
         .route=${this.route}
         has-fab

src/panels/config/automation/action/ha-automation-action-editor.ts

@@ -49,7 +49,10 @@ export default class HaAutomationActionEditor extends LitElement {
       <div
         class=${classMap({
           "card-content": true,
-          disabled: !this.indent && this.disabled,
+          disabled:
+            !this.indent &&
+            (this.disabled ||
+              (this.action.enabled === false && !this.yamlMode)),
           yaml: yamlMode,
           indent: this.indent,
           card: !this.inSidebar,

src/panels/config/automation/automation-save-dialog/dialog-automation-save.ts

@@ -128,12 +128,8 @@ class DialogAutomationSave
     `;
   }
 
-  private get _isDiscardDialog(): boolean {
-    return this._params?.onDiscard !== undefined;
-  }
-
   protected _renderDiscard() {
-    if (!this._isDiscardDialog) {
+    if (!this._params?.onDiscard) {
       return nothing;
     }
     return html`
@@ -328,14 +324,10 @@ class DialogAutomationSave
           <ha-button
             slot="primaryAction"
             @click=${this._save}
-            .disabled=${
-              !!this._params.config.alias &&
-              !this._isDiscardDialog &&
-              !this.isDirtyState
-            }
+            .disabled=${!!this._params.config.alias && !this.isDirtyState}
           >
             ${this.hass.localize(
-              this._params.config.alias && !this._isDiscardDialog
+              this._params.config.alias && !this._params.onDiscard
                 ? "ui.panel.config.automation.editor.rename"
                 : "ui.common.save"
             )}

src/panels/config/automation/condition/ha-automation-condition-editor.ts

@@ -56,7 +56,10 @@ export default class HaAutomationConditionEditor extends LitElement {
       <div
         class=${classMap({
           "card-content": true,
-          disabled: !this.indent && this.disabled,
+          disabled:
+            !this.indent &&
+            (this.disabled ||
+              (this.condition.enabled === false && !this.yamlMode)),
           yaml: yamlMode,
           indent: this.indent,
           card: !this.inSidebar,

src/panels/config/automation/condition/ha-automation-condition-row.ts

@@ -52,6 +52,7 @@ import type {
   AutomationClipboard,
   Condition,
   ConditionSidebarConfig,
+  PlatformCondition,
 } from "../../../../data/automation";
 import { isCondition, testCondition } from "../../../../data/automation";
 import { describeCondition } from "../../../../data/automation_i18n";
@@ -63,6 +64,7 @@ import {
   type ValidConfig,
 } from "../../../../data/config";
 import { fullEntitiesContext } from "../../../../data/context";
+import type { DeviceCondition } from "../../../../data/device/device_automation";
 import type { EntityRegistryEntry } from "../../../../data/entity/entity_registry";
 import type { TargetSelector } from "../../../../data/selector";
 import {
@@ -74,8 +76,6 @@ import { isMac } from "../../../../util/is_mac";
 import { showEditorToast } from "../editor-toast";
 import "../ha-automation-editor-warning";
 import { overflowStyles, rowStyles } from "../styles";
-import { getDeviceTarget } from "../target/get_device_target";
-import { getEntityTarget } from "../target/get_entity_target";
 import "../target/ha-automation-row-targets";
 import "./ha-automation-condition-editor";
 import type HaAutomationConditionEditor from "./ha-automation-condition-editor";
@@ -182,14 +182,12 @@ export default class HaAutomationConditionRow extends LitElement {
     const descriptionHasTarget =
       "target" in (this.conditionDescriptions[this.condition.condition] || {});
 
-    const hasEntityTarget =
-      this.condition.condition === "state" ||
-      this.condition.condition === "numeric_state";
-
-    const target = this._getTarget(descriptionHasTarget, hasEntityTarget);
-
-    const targetRequired =
-      (descriptionHasTarget || hasEntityTarget) && !this._isNew;
+    const target = descriptionHasTarget
+      ? (this.condition as PlatformCondition).target
+      : "device_id" in this.condition &&
+          (this.condition as DeviceCondition).device_id
+        ? { device_id: [(this.condition as DeviceCondition).device_id] }
+        : undefined;
 
     const conditionTargetSpec =
       this.conditionDescriptions[this.condition.condition]?.target;
@@ -226,15 +224,13 @@ export default class HaAutomationConditionRow extends LitElement {
       }
       <h3 slot="header">
         ${capitalizeFirstLetter(
-          describeCondition(this.condition, this.hass, this._entityReg, {
-            hideEntities: true,
-          })
+          describeCondition(this.condition, this.hass, this._entityReg)
         )}
         ${
-          target !== undefined || targetRequired
+          target !== undefined || (descriptionHasTarget && !this._isNew)
             ? this._renderTargets(
                 target,
-                targetRequired,
+                descriptionHasTarget && !this._isNew,
                 conditionTargetSpec,
                 this.condition.condition !== "device"
               )
@@ -604,30 +600,6 @@ export default class HaAutomationConditionRow extends LitElement {
     `;
   }
 
-  private _getEntityTarget = memoizeOne(getEntityTarget);
-
-  private _getDeviceTarget = memoizeOne(getDeviceTarget);
-
-  private _getTarget(
-    descriptionHasTarget: boolean,
-    hasEntityTarget: boolean
-  ): HassServiceTarget | undefined {
-    if (descriptionHasTarget && "target" in this.condition) {
-      return this.condition.target;
-    }
-    if (
-      "entity_id" in this.condition &&
-      this.condition.entity_id &&
-      hasEntityTarget
-    ) {
-      return this._getEntityTarget(this.condition.entity_id);
-    }
-    if ("device_id" in this.condition && this.condition.device_id) {
-      return this._getDeviceTarget(this.condition.device_id);
-    }
-    return undefined;
-  }
-
   private _renderTargets = memoizeOne(
     (
       target?: HassServiceTarget,
@@ -805,9 +777,7 @@ export default class HaAutomationConditionRow extends LitElement {
       ),
       inputType: "string",
       placeholder: capitalizeFirstLetter(
-        describeCondition(this.condition, this.hass, this._entityReg, {
-          ignoreAlias: true,
-        })
+        describeCondition(this.condition, this.hass, this._entityReg, true)
       ),
       defaultValue: this.condition.alias,
       confirmText: this.hass.localize("ui.common.submit"),