Keep the Actions write scope away from pull request code

The cancellation needed `actions: write`, and granting it at workflow scope
handed it to every job — including the ones that check out the pull request
and pass GITHUB_TOKEN into the gulp build, so PR-controlled code (or a
compromised dependency) would have had write access to Actions.

Move the cancellation into its own job that holds `actions: write` on its own
and never checks out the repository, so the elevated token is never exposed to
PR code. It cannot simply `needs` the checks — a dependent job only starts once
they have all finished, which is too late to cancel anything — so it polls the
run's job statuses and cancels on the first failure.

Costs one extra (idle) runner slot for the duration of the run.

Co-Authored-By: Claude Opus 4.8 <[email protected]>

.github/actions/build/action.yml

@@ -11,6 +11,9 @@ 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
@@ -21,3 +24,4 @@ runs:
       env:
         GITHUB_TOKEN: ${{ inputs.github-token }}
         IS_TEST: ${{ inputs.is-test }}
+        RSPACK_CACHE: ${{ inputs.rspack-cache }}

.github/workflows/ci.yaml

@@ -97,10 +97,12 @@ jobs:
         run: yarn run test
   build:
     name: Build frontend
-    needs:
-      - prepare-dependencies
-      - lint
-      - test
+    # 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
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
@@ -111,12 +113,26 @@ 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:
@@ -132,3 +148,54 @@ 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/nightly.yaml

@@ -38,6 +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
@@ -53,9 +58,24 @@ jobs:
           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
@@ -64,7 +84,7 @@ jobs:
           rm -rf dist home_assistant_frontend.egg-info
           python3 -m build
 
-      # Not gated on the restore step: a transient restore failure (it is
+      # 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()
@@ -74,8 +94,13 @@ jobs:
           path: .compress-cache
           key: compress-cache-${{ runner.os }}-${{ github.run_id }}-${{ github.run_attempt }}
 
-      - name: Archive translations
-        run: tar -czvf translations.tar.gz translations
+      - 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: Upload build artifacts
         uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
@@ -84,6 +109,31 @@ 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:

.gitignore

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

build-scripts/rspack.cjs

@@ -1,4 +1,6 @@
-const { existsSync } = require("fs");
+const fs = require("fs");
+
+const { existsSync } = fs;
 const path = require("path");
 const rspack = require("@rspack/core");
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -16,6 +18,61 @@ 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;
 
@@ -376,6 +433,33 @@ 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,
     },

eslint.config.mjs

@@ -17,6 +17,9 @@ 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,
@@ -111,7 +114,16 @@ export default tseslint.config(
       "no-bitwise": "error",
       "no-console": "error",
       "no-restricted-globals": [2, "event"],
-      "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
+      "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.",
+        },
+      ],
       "wc/no-self-class": "off",
 
       // import-x rules
@@ -222,6 +234,24 @@ 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/src/pages/components/ha-button.markdown

@@ -37,6 +37,16 @@ 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,6 +56,19 @@ 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`

package.json

@@ -101,7 +101,6 @@
     "deep-freeze": "0.0.1",
     "dialog-polyfill": "0.5.6",
     "echarts": "6.1.0",
-    "echarts-extension-chart2music": "0.1.0",
     "element-internals-polyfill": "3.0.2",
     "fuse.js": "7.5.0",
     "hls.js": "1.6.17",

src/common/decorators/restore-scroll.ts

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

src/common/navigate.ts

@@ -1,6 +1,7 @@
 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
@@ -11,12 +12,38 @@ declare global {
 
 export interface NavigateOptions {
   replace?: boolean;
-  data?: any;
+  data?: Record<string, unknown>;
 }
 
 // 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
@@ -24,10 +51,7 @@ const DIALOG_WAIT_TIMEOUT = 500;
  * The current URL is not changed.
  */
 export const setRefreshUrl = (path: string) => {
-  mainWindow.history.replaceState(
-    { ...mainWindow.history.state, refreshUrl: path },
-    ""
-  );
+  updateHistoryState({ refreshUrl: path });
 };
 
 /**
@@ -56,6 +80,17 @@ 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) {
@@ -63,37 +98,32 @@ export const navigate = async (path: string, options?: NavigateOptions) => {
   }
   const replace = options?.replace || false;
 
-  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),
+  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()),
       "",
       path
     );
-  } else {
-    mainWindow.history.pushState(options?.data ?? null, "", path);
   }
+
   fireEvent(mainWindow, "location-changed", {
     replace,
   });
@@ -101,8 +131,17 @@ export const navigate = async (path: string, options?: NavigateOptions) => {
 };
 
 /**
- * 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.
+ * 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).
  */
 export const goBack = async (fallbackPath?: string): Promise<void> => {
   const canProceed = await ensureDialogsClosed(Date.now());
@@ -110,14 +149,12 @@ export const goBack = async (fallbackPath?: string): Promise<void> => {
     return;
   }
 
-  // Check if we have history to go back to
-  const { history } = mainWindow;
-  if (history.length > 1) {
-    history.back();
+  // 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();
     return;
   }
 
-  // No history available, navigate to fallback path
-  const fallback = fallbackPath || "/";
-  navigate(fallback, { replace: true });
+  await navigate(fallbackPath || "/", { replace: true });
 };

src/common/url/current-path.ts

@@ -0,0 +1,10 @@
+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/components/chart/chart-sonification.ts

@@ -1,268 +0,0 @@
-import type { HassConfig } from "home-assistant-js-websocket";
-import type { EChartsType } from "echarts/core";
-import type { XAXisOption, YAXisOption } from "echarts/types/dist/shared";
-import { ensureArray } from "../../common/array/ensure-array";
-import { formatDateTime } from "../../common/datetime/format_date_time";
-import type { LocalizeFunc } from "../../common/translations/localize";
-import type { FrontendLocaleData } from "../../data/translation";
-import type {
-  HaECSeries,
-  HaECSeriesItem,
-} from "../../resources/echarts/echarts";
-
-export interface ChartSonification {
-  update: () => void;
-  dispose: () => void;
-}
-
-// Series types the Chart2Music ECharts extension can turn into data points. Our
-// other series (custom timelines, sankey, network graphs) have no equivalent, and
-// the extension refuses the whole chart if a single series is unsupported.
-const SONIFIABLE_SERIES_TYPES = new Set(["bar", "line", "pie", "scatter"]);
-
-// Languages shipped by chart2music. Anything else falls back to its English.
-const SONIFICATION_LANGUAGES = new Set(["de", "en", "es", "fr", "hmn", "it"]);
-
-// Fewer than this and there is nothing to walk between, so a focus stop would
-// lead nowhere.
-const MIN_NAVIGABLE_POINTS = 2;
-
-// Mirrors the extension's own reading of a point: it takes `value` as [x, y] and
-// drops anything whose y is not a real number. That rejects gap-only series, and
-// also value-first pairs like the energy device charts' [amount, "sensor.foo"].
-// Counts no further than `limit` so this stays cheap on charts with many points.
-const countNumericPoints = (data: unknown, limit: number): number => {
-  if (!Array.isArray(data)) {
-    return 0;
-  }
-  let found = 0;
-  for (const raw of data) {
-    let y: unknown = raw;
-    if (Array.isArray(raw)) {
-      y = raw.length > 1 ? raw[1] : raw[0];
-    } else if (raw && typeof raw === "object") {
-      const { value } = raw as { value?: unknown };
-      y = Array.isArray(value)
-        ? value.length > 1
-          ? value[1]
-          : value[0]
-        : value;
-    }
-    if (typeof y === "number" && !Number.isNaN(y)) {
-      found += 1;
-      if (found >= limit) {
-        break;
-      }
-    }
-  }
-  return found;
-};
-
-const countNavigablePoints = (
-  series: readonly ({ data?: unknown } | undefined)[]
-): number => {
-  let total = 0;
-  for (const s of series) {
-    total += countNumericPoints(s?.data, MIN_NAVIGABLE_POINTS - total);
-    if (total >= MIN_NAVIGABLE_POINTS) {
-      break;
-    }
-  }
-  return total;
-};
-
-export const canSonifyChart = (
-  data: HaECSeries,
-  // Legend-hidden series reach ECharts with their data stripped, so they cannot
-  // be sonified either.
-  hiddenDatasets?: ReadonlySet<string>
-): boolean => {
-  const series = ensureArray(data);
-  const visible = hiddenDatasets?.size
-    ? series.filter((s) => !hiddenDatasets.has(String(s.id ?? s.name)))
-    : series;
-  return (
-    // Cards commonly push empty placeholder series, so judge the chart by the
-    // points the extension can actually read — but every type has to be
-    // convertible too.
-    countNavigablePoints(visible) >= MIN_NAVIGABLE_POINTS &&
-    series.every((s) => SONIFIABLE_SERIES_TYPES.has(s.type as string))
-  );
-};
-
-interface SonifyChartOptions {
-  cc: HTMLElement;
-  localize: LocalizeFunc;
-  locale: FrontendLocaleData;
-  config: HassConfig;
-  onError: (error: string) => void;
-}
-
-// Chart2Music appends its help and options dialogs straight to document.body, so
-// they can only be themed from a document-level stylesheet.
-let stylesAppended = false;
-const appendSonificationStyles = () => {
-  if (stylesAppended) {
-    return;
-  }
-  stylesAppended = true;
-  const style = document.createElement("style");
-  style.textContent = `
-    dialog.chart2music-dialog {
-      box-sizing: border-box;
-      max-width: min(600px, calc(100vw - 32px));
-      max-height: calc(100vh - 32px);
-      overflow: auto;
-      padding: var(--ha-space-6);
-      border: none;
-      border-radius: var(--ha-border-radius-lg);
-      background-color: var(--card-background-color);
-      color: var(--primary-text-color);
-      font-family: var(--ha-font-family-body);
-      font-size: var(--ha-font-size-m);
-      box-shadow: var(--ha-box-shadow-l);
-    }
-    dialog.chart2music-dialog::backdrop {
-      background-color: rgba(0, 0, 0, 0.5);
-    }
-    dialog.chart2music-dialog h1 {
-      font-size: var(--ha-font-size-2xl);
-      font-weight: var(--ha-font-weight-normal);
-      margin-block: 0 var(--ha-space-4);
-      padding-inline-end: var(--ha-space-8);
-    }
-    dialog.chart2music-dialog table {
-      border-collapse: collapse;
-      width: 100%;
-    }
-    dialog.chart2music-dialog th,
-    dialog.chart2music-dialog td {
-      text-align: start;
-      padding: var(--ha-space-1) var(--ha-space-2);
-      border-bottom: 1px solid var(--divider-color);
-    }
-    dialog.chart2music-dialog a {
-      color: var(--primary-color);
-    }
-    dialog.chart2music-dialog > button {
-      /* The extension inlines "right", which does not mirror in RTL, and inline
-         styles can only be beaten with !important. */
-      inset-inline-end: var(--ha-space-4) !important;
-      inset-inline-start: auto !important;
-      top: var(--ha-space-4);
-      min-width: 32px;
-      min-height: 32px;
-      cursor: pointer;
-      border: 1px solid var(--divider-color);
-      border-radius: var(--ha-border-radius-sm);
-      background-color: transparent;
-      color: var(--primary-text-color);
-      font: inherit;
-    }
-  `;
-  document.head.append(style);
-};
-
-export const sonifyChart = async (
-  chart: EChartsType,
-  options: SonifyChartOptions
-): Promise<ChartSonification | null> => {
-  const { connect } = await import("echarts-extension-chart2music");
-  const { localize, locale, config } = options;
-  appendSonificationStyles();
-
-  // ECharts nulls its model on dispose, and the instance can be disposed while
-  // the chunk is in flight.
-  const chartOptions = chart.getOption() as ReturnType<
-    EChartsType["getOption"]
-  > | null;
-  if (!chartOptions) {
-    return null;
-  }
-  const xAxis = ensureArray(chartOptions.xAxis)[0] as XAXisOption | undefined;
-  const yAxis = ensureArray(chartOptions.yAxis)[0] as YAXisOption | undefined;
-
-  // Chart2Music throws while validating a group with no points, which is what
-  // placeholder, legend-hidden and all-null series turn into, so only offer it
-  // the series carrying points it can read.
-  const allSeries = ensureArray(chartOptions.series) as (
-    HaECSeriesItem | undefined
-  )[];
-  const readable = allSeries.filter((s) => countNumericPoints(s?.data, 1));
-  // A single point is not navigable, so it does not earn a focus stop either.
-  if (countNavigablePoints(readable) < MIN_NAVIGABLE_POINTS) {
-    return null;
-  }
-  const seriesIndex = readable.map((s) => allSeries.indexOf(s));
-
-  // Chart2Music always reads out an axis label, and the extension picks the wrong
-  // axis to name when there is no category axis, so label both explicitly.
-  const isTimeAxis = xAxis?.type === "time";
-  const x = {
-    label:
-      xAxis?.name ||
-      localize(
-        isTimeAxis
-          ? "ui.components.history_charts.time"
-          : "ui.components.history_charts.category"
-      ),
-    // Time series carry raw timestamps, which would otherwise be announced as
-    // epoch milliseconds.
-    format: isTimeAxis
-      ? (value: number) => formatDateTime(new Date(value), locale, config)
-      : undefined,
-  };
-  const y = {
-    label: yAxis?.name || localize("ui.components.history_charts.value"),
-  };
-
-  let connection: ReturnType<typeof connect>;
-  try {
-    connection = connect(chart, {
-      cc: options.cc,
-      seriesIndex,
-      title: localize("ui.components.history_charts.chart"),
-      lang: SONIFICATION_LANGUAGES.has(locale.language)
-        ? locale.language
-        : "en",
-      errorCallback: options.onError,
-      axes: { x, y },
-    });
-  } catch (err) {
-    options.onError(err instanceof Error ? err.message : String(err));
-    return null;
-  }
-  if (!connection) {
-    return null;
-  }
-  // Chart2Music bails out silently on mobile user agents, returning an instance
-  // that never wired anything up. Turning the caption container into a live
-  // region is the last thing it does, so use that as the "really connected" test
-  // rather than leaving a focus stop that does nothing.
-  if (!options.cc.hasAttribute("aria-live")) {
-    connection.dispose();
-    return null;
-  }
-  const connected = connection;
-
-  // The extension re-reads the chart from ECharts' own "finished" event. Run that
-  // through a guard of our own so a conversion failure cannot escape into
-  // ECharts' event dispatch and leave the chart half-rendered.
-  const update = () => {
-    try {
-      connected.update();
-    } catch (_err) {
-      // Keep whatever Chart2Music last read successfully.
-    }
-  };
-  chart.off("finished", connected.update);
-  chart.on("finished", update);
-
-  return {
-    update,
-    dispose: () => {
-      chart.off("finished", update);
-      connected.dispose();
-    },
-  };
-};

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

@@ -22,7 +22,6 @@ import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import { ensureArray } from "../../common/array/ensure-array";
 import { getAllGraphColors } from "../../common/color/colors";
@@ -48,8 +47,6 @@ import { isMac } from "../../util/is_mac";
 import "../chips/ha-assist-chip";
 import "../ha-icon-button";
 import { formatTimeLabel } from "./axis-label";
-import type { ChartSonification } from "./chart-sonification";
-import { canSonifyChart, sonifyChart } from "./chart-sonification";
 import { downSampleLineData } from "./down-sample";
 import { wrapLitTooltipFormatter } from "./lit-tooltip-formatter";
 
@@ -149,17 +146,6 @@ export class HaChartBase extends LitElement {
 
   @query(".chart") private _chartContainer?: HTMLDivElement;
 
-  @query(".sonification-output")
-  private _sonificationOutput?: HTMLDivElement;
-
-  private _sonification?: ChartSonification;
-
-  @state() private _sonificationLoading = false;
-
-  @state() private _sonificationUnavailable = false;
-
-  @state() private _sonificationFocusHeld = false;
-
   private _modifierPressed = false;
 
   private _isTouchDevice = "ontouchstart" in window;
@@ -212,7 +198,6 @@ export class HaChartBase extends LitElement {
     while (this._listeners.length) {
       this._listeners.pop()!();
     }
-    this._disposeSonification();
     this.chart?.dispose();
     this.chart = undefined;
     this._originalZrFlush = undefined;
@@ -327,18 +312,6 @@ export class HaChartBase extends LitElement {
     }
     if (changedProps.has("data") || changedProps.has("_hiddenDatasets")) {
       chartOptions.series = this._getSeries();
-      // New data, or a series shown again, may well be convertible where the
-      // last set was not.
-      this._sonificationUnavailable = false;
-      // The connection is built from the series that had data at the time, so
-      // drop it and let the next focus rebuild it against the current set.
-      if (
-        this._sonification &&
-        (changedProps.has("_hiddenDatasets") ||
-          !canSonifyChart(this.data, this._hiddenDatasets))
-      ) {
-        this._disposeSonification();
-      }
     }
     if (changedProps.has("options")) {
       chartOptions = { ...chartOptions, ...this._createOptions() };
@@ -364,9 +337,6 @@ export class HaChartBase extends LitElement {
   }
 
   protected render() {
-    const sonifiable =
-      !this._sonificationUnavailable &&
-      canSonifyChart(this.data, this._hiddenDatasets);
     return html`
       <div
         class="container ${classMap({ "has-height": !!this.height })}"
@@ -378,23 +348,8 @@ export class HaChartBase extends LitElement {
             height: this.height ? undefined : `${this._getDefaultHeight()}px`,
           })}
         >
-          <div
-            class="chart"
-            role=${ifDefined(sonifiable ? "application" : undefined)}
-            tabindex=${ifDefined(
-              sonifiable ? "0" : this._sonificationFocusHeld ? "-1" : undefined
-            )}
-            aria-label=${ifDefined(
-              sonifiable
-                ? this.hass.localize("ui.components.history_charts.chart")
-                : undefined
-            )}
-            aria-busy=${ifDefined(this._sonificationLoading ? "true" : undefined)}
-            @focus=${this._handleChartFocus}
-            @blur=${this._handleChartBlur}
-          ></div>
+          <div class="chart"></div>
         </div>
-        <div class="sonification-output"></div>
         ${this._renderLegend()}
         <div class="top-controls ${classMap({ small: this.smallControls })}">
           <slot name="search"></slot>
@@ -566,60 +521,6 @@ export class HaChartBase extends LitElement {
     </div>`;
   }
 
-  // Chart2Music adds ~45 kB gzipped, so it is only fetched once someone actually
-  // moves keyboard focus into a chart.
-  private async _handleChartFocus() {
-    // Dropping tabindex off the active element resets focus to the document and
-    // costs the user their place in the tab order, so stay programmatically
-    // focusable for as long as we hold focus, however we stop being sonifiable.
-    this._sonificationFocusHeld = true;
-    if (this._sonification || this._sonificationLoading || !this.chart) {
-      return;
-    }
-    this._sonificationLoading = true;
-    try {
-      const sonification = await sonifyChart(this.chart, {
-        cc: this._sonificationOutput!,
-        localize: this.hass.localize,
-        locale: this.hass.locale,
-        config: this.hass.config,
-        onError: () => {
-          // Charts the extension cannot describe stay silent rather than
-          // dropping an error on someone who only pressed Tab.
-        },
-      });
-      if (!this.isConnected || !this.chart) {
-        sonification?.dispose();
-        return;
-      }
-      if (!sonification) {
-        // Nothing came back, so stop offering a focus stop that leads nowhere.
-        this._sonificationUnavailable = true;
-        return;
-      }
-      this._sonification = sonification;
-      if (this.shadowRoot?.activeElement === this._chartContainer) {
-        // Chart2Music reads its summary and key hints on focus, which already
-        // happened while it was still being fetched.
-        this._chartContainer!.dispatchEvent(new FocusEvent("focus"));
-      }
-    } catch (_err) {
-      // Never let a failure here escape a focus handler. The tab stop stays, so
-      // focusing the chart again retries.
-    } finally {
-      this._sonificationLoading = false;
-    }
-  }
-
-  private _handleChartBlur() {
-    this._sonificationFocusHeld = false;
-  }
-
-  private _disposeSonification() {
-    this._sonification?.dispose();
-    this._sonification = undefined;
-  }
-
   private _formatTimeLabel = (value: number | Date) =>
     formatTimeLabel(
       value,
@@ -632,9 +533,6 @@ export class HaChartBase extends LitElement {
     if (this._loading) return;
     this._loading = true;
     try {
-      // The connection holds a reference to the chart instance, so it cannot
-      // outlive it. Focusing the chart again reconnects.
-      this._disposeSonification();
       if (this.chart) {
         this.chart.dispose();
       }
@@ -1552,23 +1450,6 @@ export class HaChartBase extends LitElement {
       height: 100%;
       width: 100%;
     }
-    .chart:focus-visible {
-      outline: 2px solid var(--primary-color);
-      outline-offset: 2px;
-      border-radius: var(--ha-border-radius-sm);
-    }
-    /* Chart2Music renders its announcements here. It must stay in the layout for
-       screen readers to pick up the live region, so hide it visually only. */
-    .sonification-output {
-      position: absolute;
-      overflow: hidden;
-      clip: rect(0 0 0 0);
-      height: 1px;
-      width: 1px;
-      margin: -1px;
-      padding: 0;
-      border: 0;
-    }
     .top-controls {
       position: absolute;
       top: var(--ha-space-4);

src/components/ha-button.ts

@@ -65,6 +65,21 @@ 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-icon-button-group.ts

@@ -1,11 +1,89 @@
-import type { TemplateResult } from "lit";
+import { animate } from "@lit-labs/motion";
 import { css, html, LitElement } from "lit";
-import { customElement } from "lit/decorators";
+import { customElement, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { styleMap } from "lit/directives/style-map";
+
+const THUMB_SIZE = 40;
 
 @customElement("ha-icon-button-group")
 export class HaIconButtonGroup extends LitElement {
-  protected render(): TemplateResult {
-    return html`<slot></slot>`;
+  @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;
   }
 
   static styles = css`
@@ -21,6 +99,32 @@ 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,8 +44,10 @@ 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: 1;
+        opacity: var(--ha-icon-button-toggle-thumb-opacity, 1);
       }
       ::slotted(*) {
         display: block;

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

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

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

@@ -52,7 +52,6 @@ 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";
@@ -221,30 +220,28 @@ export class HaTargetPickerItemRow extends LitElement {
           ? html`
               <div slot="end" class="summary">
                 ${
-                  showEntities &&
-                  !this.expand &&
-                  entries?.referenced_entities.length
-                    ? html`<button
-                        class="main link"
+                  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"
                         @click=${this._openDetails}
                       >
                         ${this.hass.localize(
                           "ui.components.target-picker.entities_count",
                           {
-                            count: entries?.referenced_entities.length,
+                            count: entries.referenced_entities.length,
                           }
                         )}
-                      </button>`
-                    : showEntities
-                      ? html`<span class="main">
-                          ${this.hass.localize(
-                            "ui.components.target-picker.entities_count",
-                            {
-                              count: entries?.referenced_entities.length,
-                            }
-                          )}
-                        </span>`
-                      : nothing
+                      </ha-button>`
                 }
               </div>
             `
@@ -812,7 +809,6 @@ export class HaTargetPickerItemRow extends LitElement {
   };
 
   static styles = [
-    buttonLinkStyle,
     css`
       :host {
         --md-list-item-top-space: 0;
@@ -883,16 +879,6 @@ 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,6 +94,29 @@ 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 formatNumericLimitValue = (
   hass: HomeAssistant,
   value?: number | string
@@ -1232,12 +1255,16 @@ const describeLegacyCondition = (
 
       let hasTime = "";
       if (after !== undefined && before !== undefined) {
-        if (
-          typeof condition.after === "string" &&
-          !condition.after.includes(".") &&
-          typeof condition.before === "string" &&
-          !condition.before.includes(".") &&
-          condition.after > condition.before
+        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
         ) {
           hasTime = "after_before_or";
         } else {

src/data/device/device_registry.ts

@@ -146,15 +146,13 @@ export const updateDeviceRegistryEntry = (
     ...updates,
   });
 
-export const removeConfigEntryFromDevice = (
+export const removeDeviceFromRegistry = (
   hass: HomeAssistant,
-  deviceId: string,
-  configEntryId: string
+  deviceId: string
 ) =>
-  hass.callWS<DeviceRegistryEntry>({
-    type: "config/device_registry/remove_config_entry",
+  hass.callWS<null>({
+    type: "config/device_registry/remove",
     device_id: deviceId,
-    config_entry_id: configEntryId,
   });
 
 export const sortDeviceRegistryByName = (

src/dialogs/make-dialog-manager.ts

@@ -98,20 +98,31 @@ 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);
+          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;
         }
-
-        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: 30px;
-          height: 30px;
+          width: 28px;
+          height: 28px;
           flex: none;
-          border-radius: var(--ha-border-radius-xl);
+          border-radius: var(--ha-border-radius-circle);
         }
         .wheel.color {
           background-image: url("/static/images/color_wheel.png");

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

@@ -40,7 +40,11 @@ import {
   getEntityEntryContext,
 } from "../../common/entity/context/get_entity_context";
 import { shouldHandleRequestSelectedEvent } from "../../common/mwc/handle-request-selected-event";
-import { navigate } from "../../common/navigate";
+import {
+  getHistoryState,
+  navigate,
+  updateHistoryState,
+} from "../../common/navigate";
 import type { LocalizeKeys } from "../../common/translations/localize";
 import { computeRTL } from "../../common/util/compute_rtl";
 import { withViewTransition } from "../../common/util/view-transition";
@@ -268,16 +272,12 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
   }
 
   private _setView(view: MoreInfoView) {
-    history.replaceState(
-      {
-        ...history.state,
-        dialogParams: {
-          ...history.state?.dialogParams,
-          view,
-        },
+    updateHistoryState({
+      dialogParams: {
+        ...getHistoryState()?.dialogParams,
+        view,
       },
-      ""
-    );
+    });
     this._currView = view;
   }
 
@@ -1063,6 +1063,10 @@ 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/external_app/external_messaging.ts

@@ -191,6 +191,10 @@ 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.
@@ -220,6 +224,7 @@ type EMOutgoingMessageWithoutAnswer =
   | EMOutgoingMessageImprovConfigureDevice
   | EMOutgoingMessageAddEntityTo
   | EMOutgoingMessageFocusElement
+  | EMOutgoingMessageReloadAndClearCache
   | EMOutgoingMessageAssistSettings;
 
 export interface EMIncomingMessageRestart {
@@ -511,14 +516,26 @@ export class ExternalMessaging {
       // eslint-disable-next-line no-console
       console.log("Sending message to external app", 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);
-    }
+    fireExternalBusMessage(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

@@ -0,0 +1,30 @@
+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,10 +1,11 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
-import { goBack } from "../common/navigate";
+import { getHistoryState, 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")
@@ -19,6 +20,9 @@ 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();
@@ -27,7 +31,7 @@ class HassErrorScreen extends LitElement {
     return html`
       <ha-top-app-bar-fixed
         .narrow=${this.narrow}
-        .backButton=${!(this.rootnav || history.state?.root)}
+        .backButton=${!(this.rootnav || getHistoryState()?.root)}
       >
         ${this._renderContent()}
       </ha-top-app-bar-fixed>
@@ -39,6 +43,19 @@ 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>
@@ -51,6 +68,12 @@ 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,6 +1,7 @@
 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";
@@ -27,7 +28,7 @@ class HassLoadingScreen extends LitElement {
     return html`
       <ha-top-app-bar-fixed
         .narrow=${this.narrow}
-        .backButton=${!(this.rootnav || history.state?.root)}
+        .backButton=${!(this.rootnav || getHistoryState()?.root)}
       >
         ${this._renderContent()}
       </ha-top-app-bar-fixed>

src/layouts/hass-router-page.ts

@@ -5,6 +5,7 @@ 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) => {
@@ -182,10 +183,21 @@ export class HassRouterPage extends ReactiveElement {
         this._showLoadingScreenTimeout = undefined;
       }
 
-      // Show error screen
-      this.appendChild(
-        this.createErrorScreen(`Error while loading page ${newPage}.`)
+      // 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}.`
       );
+      errorScreen.showReload = stale;
+      this.appendChild(errorScreen);
     });
 
     // If we don't show loading screen, just show the panel.

src/layouts/hass-subpage.ts

@@ -4,8 +4,9 @@ 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 { goBack } from "../common/navigate";
+import { getHistoryState } 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";
@@ -37,19 +38,14 @@ class HassSubpage extends LitElement {
       <div class="toolbar ${classMap({ narrow: this.narrow })}">
         <div class="toolbar-content">
           ${
-            this.mainPage || history.state?.root
+            this.mainPage || (!backPath && getHistoryState()?.root)
               ? html`<ha-menu-button></ha-menu-button>`
-              : 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>
-                  `
+              : html`
+                  <ha-icon-button-arrow-prev
+                    .href=${backPath}
+                    @click=${this._backTapped}
+                  ></ha-icon-button-arrow-prev>
+                `
           }
 
           <div class="main-title">
@@ -79,12 +75,8 @@ class HassSubpage extends LitElement {
     this._savedScrollPos = (e.target as HTMLDivElement).scrollTop;
   }
 
-  private _backTapped(): void {
-    if (this.backCallback) {
-      this.backCallback();
-      return;
-    }
-    goBack();
+  private _backTapped(ev: MouseEvent): void {
+    handleBackClick(ev, this.backPath, this.backCallback);
   }
 
   static get styles(): CSSResultGroup {

src/layouts/hass-tabs-subpage.ts

@@ -14,9 +14,10 @@ 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 { goBack, navigate } from "../common/navigate";
+import { getHistoryState, 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";
@@ -173,19 +174,14 @@ export class HassTabsSubpage extends LitElement {
         <slot name="toolbar">
           <div class="toolbar-content">
             ${
-              this.mainPage || (!backPath && history.state?.root)
+              this.mainPage || (!backPath && getHistoryState()?.root)
                 ? html`<ha-menu-button></ha-menu-button>`
-                : 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>
-                    `
+                : html`
+                    <ha-icon-button-arrow-prev
+                      .href=${backPath}
+                      @click=${this._backTapped}
+                    ></ha-icon-button-arrow-prev>
+                  `
             }
             ${
               this._narrow || !this.showTabs
@@ -246,12 +242,8 @@ export class HassTabsSubpage extends LitElement {
     this._content.focus({ preventScroll: true });
   }
 
-  private _backTapped(): void {
-    if (this.backCallback) {
-      this.backCallback();
-      return;
-    }
-    goBack();
+  private _backTapped(ev: MouseEvent): void {
+    handleBackClick(ev, this.backPath, this.backCallback);
   }
 
   private _isActiveTabPath(tabPath: string, currentPath: string): boolean {

src/layouts/home-assistant.ts

@@ -19,6 +19,7 @@ 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,
@@ -247,13 +248,11 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
           if (registration) {
             registration.update();
           } else if (oldVersion) {
-            // @ts-ignore Firefox supports forceGet
-            location.reload(true);
+            reloadForUpdate();
           }
         });
       } else if (oldVersion) {
-        // @ts-ignore Firefox supports forceGet
-        location.reload(true);
+        reloadForUpdate();
       }
     }
   }

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

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

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

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

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

@@ -986,7 +986,7 @@ export class HaAutomationEditor extends AutomationScriptEditorMixin<AutomationCo
   private async _delete() {
     if (this.automationId) {
       await deleteAutomation(this.hass, this.automationId);
-      goBack("/config");
+      goBack(this.dashboardPath);
     }
   }
 

src/panels/config/automation/ha-automation-picker.ts

@@ -443,9 +443,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
       <hass-tabs-subpage-data-table
         .hass=${this.hass}
         .narrow=${this.narrow}
-        .backPath=${
-          this._searchParms.has("historyBack") ? undefined : "/config"
-        }
+        back-path="/config"
         id="entity_id"
         .route=${this.route}
         .tabs=${configSections.automations}

src/panels/config/automation/ha-automation-script-editor-mixin.ts

@@ -147,6 +147,10 @@ export const AutomationScriptEditorMixin = <TConfig extends BaseEditorConfig>(
 
     protected domainHooks!: EditorDomainHooks<TConfig>;
 
+    protected get dashboardPath(): string {
+      return `/config/${this.domainHooks.domain}/dashboard`;
+    }
+
     protected entityRegCreated?: (
       value: PromiseLike<EntityRegistryEntry> | EntityRegistryEntry
     ) => void;
@@ -252,7 +256,7 @@ export const AutomationScriptEditorMixin = <TConfig extends BaseEditorConfig>(
     protected backTapped = async () => {
       const result = await this.confirmUnsavedChanged();
       if (result) {
-        afterNextRender(() => goBack("/config"));
+        afterNextRender(() => goBack(this.dashboardPath));
       }
     };
 
@@ -300,7 +304,7 @@ export const AutomationScriptEditorMixin = <TConfig extends BaseEditorConfig>(
             ),
             text: html`<pre>${alertText}</pre>`,
           });
-          goBack("/config");
+          goBack(this.dashboardPath);
           return;
         }
         const entity = this.entityRegistry?.find(
@@ -317,7 +321,7 @@ export const AutomationScriptEditorMixin = <TConfig extends BaseEditorConfig>(
             `ui.panel.config.${domain}.editor.load_error_not_editable`
           ),
         });
-        goBack("/config");
+        goBack(this.dashboardPath);
       }
     }
   }

src/panels/config/automation/ha-automation-trace.ts

@@ -14,7 +14,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { navigate } from "../../../common/navigate";
+import { navigate, replaceCurrentUrl } from "../../../common/navigate";
 import { computeRTL } from "../../../common/util/compute_rtl";
 import "../../../components/ha-button";
 import "../../../components/ha-dropdown";
@@ -110,6 +110,7 @@ export class HaAutomationTrace extends LitElement {
       <hass-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
+        back-path="/config/automation/dashboard"
         .header=${title}
         .scrollable=${this.narrow}
       >
@@ -452,11 +453,7 @@ export class HaAutomationTrace extends LitElement {
       if (runId) {
         const params = new URLSearchParams(location.search);
         params.delete("run_id");
-        history.replaceState(
-          null,
-          "",
-          `${location.pathname}?${params.toString()}`
-        );
+        replaceCurrentUrl(`${location.pathname}?${params.toString()}`);
       }
 
       await showAlertDialog(this, {

src/panels/config/automation/ha-manual-editor-mixin.ts

@@ -11,6 +11,7 @@ import { property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { storage } from "../../../common/decorators/storage";
 import { fireEvent } from "../../../common/dom/fire_event";
+import { replaceCurrentUrl } from "../../../common/navigate";
 import { constructUrlCurrentPath } from "../../../common/url/construct-url";
 import {
   extractSearchParam,
@@ -173,11 +174,7 @@ export const ManualEditorMixin = <TConfig>(
     }
 
     protected clearParam(param: string) {
-      window.history.replaceState(
-        null,
-        "",
-        constructUrlCurrentPath(removeSearchParam(param))
-      );
+      replaceCurrentUrl(constructUrlCurrentPath(removeSearchParam(param)));
     }
 
     protected async openSidebar(ev: CustomEvent<SidebarConfig>) {

src/panels/config/automation/target/ha-automation-row-targets.ts

@@ -622,6 +622,8 @@ export class HaAutomationRowTargets extends LitElement {
         var(--ha-color-border-neutral-quiet);
       overflow: hidden;
       height: 32px;
+      box-sizing: border-box;
+      font: inherit;
     }
     .target.warning {
       background: var(--ha-color-fill-warning-normal-resting);

src/panels/config/backup/ha-config-backup-overview.ts

@@ -74,8 +74,6 @@ class HaConfigBackupOverview extends LitElement {
 
   @state() private _config?: BackupConfig;
 
-  private _searchParms = new URLSearchParams(window.location.search);
-
   protected willUpdate(changedProperties: PropertyValues<this>): void {
     super.willUpdate(changedProperties);
     if (changedProperties.has("config") && !this._config) {
@@ -206,9 +204,7 @@ class HaConfigBackupOverview extends LitElement {
 
     return html`
       <hass-subpage
-        .backPath=${
-          this._searchParms.has("historyBack") ? undefined : "/config/system"
-        }
+        back-path="/config/system"
         .hass=${this.hass}
         .narrow=${this.narrow}
         .header=${this.hass.localize("ui.panel.config.backup.overview.header")}

src/panels/config/backup/ha-config-backup-settings.ts

@@ -4,6 +4,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { fireEvent } from "../../../common/dom/fire_event";
+import { replaceCurrentUrl } from "../../../common/navigate";
 import { debounce } from "../../../common/util/debounce";
 import { nextRender } from "../../../common/util/render-status";
 import "../../../components/ha-alert";
@@ -118,7 +119,7 @@ class HaConfigBackupSettings extends LitElement {
   }
 
   private _clearHash() {
-    history.replaceState(null, "", window.location.pathname);
+    replaceCurrentUrl(window.location.pathname);
   }
 
   protected render() {

src/panels/config/blueprint/ha-blueprint-overview.ts

@@ -622,8 +622,7 @@ class HaBlueprintOverview extends LitElement {
           }
         ),
         confirmText: this.hass!.localize(
-          "ui.panel.config.blueprint.overview.blueprint_in_use_view",
-          { type }
+          `ui.panel.config.blueprint.overview.blueprint_in_use_view_${blueprint.domain}`
         ),
       });
       if (result) {

src/panels/config/cloud/forgot-password/cloud-forgot-password.ts

@@ -21,6 +21,7 @@ export class CloudForgotPassword extends LitElement {
       <hass-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
+        back-path="/config"
         .header=${this.hass.localize(
           "ui.panel.config.cloud.forgot_password.title"
         )}

src/panels/config/cloud/login/cloud-login-panel.ts

@@ -45,6 +45,7 @@ export class CloudLoginPanel extends LitElement {
       <hass-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
+        back-path="/config"
         header="Home Assistant Cloud"
       >
         <ha-dropdown slot="toolbar-icon" @wa-select=${this._handleMenuAction}>

src/panels/config/cloud/register/cloud-register.ts

@@ -38,6 +38,7 @@ export class CloudRegister extends LitElement {
       <hass-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
+        back-path="/config"
         .header=${this.hass.localize("ui.panel.config.cloud.register.title")}
       >
         <div class="content">

src/panels/config/core/ha-config-section-updates.ts

@@ -66,8 +66,6 @@ class HaConfigSectionUpdates extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @state() private _searchParms = new URLSearchParams(window.location.search);
-
   @state() private _showSkipped = false;
 
   @state() private _supervisorInfo?: HassioSupervisorInfo;
@@ -155,9 +153,7 @@ class HaConfigSectionUpdates extends LitElement {
 
     return html`
       <hass-subpage
-        .backPath=${
-          this._searchParms.has("historyBack") ? undefined : "/config/system"
-        }
+        back-path="/config/system"
         .hass=${this.hass}
         .narrow=${this.narrow}
         .header=${this.hass.localize("ui.panel.config.updates.caption")}

src/panels/config/devices/ha-config-device-page.ts

@@ -16,6 +16,7 @@ import {
   mdiRobot,
   mdiScriptText,
   mdiShapeOutline,
+  mdiTextureBox,
   mdiTools,
 } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
@@ -44,6 +45,7 @@ import "../../../components/ha-button";
 import "../../../components/ha-dropdown";
 import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 import "../../../components/ha-dropdown-item";
+import "../../../components/ha-icon";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-next";
 import "../../../components/item/ha-list-item-base";
@@ -65,7 +67,7 @@ import {
 import { fireRelatedContext, fullEntitiesContext } from "../../../data/context";
 import type { DeviceRegistryEntry } from "../../../data/device/device_registry";
 import {
-  removeConfigEntryFromDevice,
+  removeDeviceFromRegistry,
   updateDeviceRegistryEntry,
 } from "../../../data/device/device_registry";
 import type { DiagnosticInfo } from "../../../data/diagnostics";
@@ -986,6 +988,7 @@ export class HaConfigDevicePage extends LitElement {
     return html`<hass-subpage
       .hass=${this.hass}
       .narrow=${this.narrow}
+      back-path="/config/devices/dashboard"
       .header=${deviceName}
     >
       <ha-tooltip for="edit-settings-button" slot="toolbar-icon">
@@ -1035,12 +1038,27 @@ export class HaConfigDevicePage extends LitElement {
           ${
             area
               ? html`<div class="header-name">
-                  <a href="/config/areas/area/${area.area_id}"
-                    >${this.hass.localize(
+                  <ha-button
+                    href="/config/areas/area/${area.area_id}"
+                    size="s"
+                    appearance="plain"
+                  >
+                    ${
+                      area.icon
+                        ? html`<ha-icon
+                            slot="start"
+                            .icon=${area.icon}
+                          ></ha-icon>`
+                        : html`<ha-svg-icon
+                            slot="start"
+                            .path=${mdiTextureBox}
+                          ></ha-svg-icon>`
+                    }
+                    ${this.hass.localize(
                       "ui.panel.config.integrations.config_entry.area",
                       { area: area.name || "Unnamed Area" }
-                    )}</a
-                  >
+                    )}
+                  </ha-button>
                 </div>`
               : ""
           }
@@ -1218,11 +1236,7 @@ export class HaConfigDevicePage extends LitElement {
             }
 
             try {
-              await removeConfigEntryFromDevice(
-                this.hass,
-                this.deviceId,
-                entry.entry_id
-              );
+              await removeDeviceFromRegistry(this.hass, this.deviceId);
             } catch (err: unknown) {
               showAlertDialog(this, {
                 title: this.hass.localize(
@@ -1747,12 +1761,14 @@ export class HaConfigDevicePage extends LitElement {
         .header-name {
           display: flex;
           align-items: center;
-          padding-left: var(--ha-space-2);
-          padding-inline-start: var(--ha-space-2);
-          padding-inline-end: initial;
           direction: var(--direction);
         }
 
+        .header-name ha-icon,
+        .header-name ha-svg-icon {
+          --mdc-icon-size: 18px;
+        }
+
         .column,
         .fullwidth {
           box-sizing: border-box;

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

@@ -23,7 +23,11 @@ import {
   PROTOCOL_INTEGRATIONS,
   protocolIntegrationPicked,
 } from "../../../common/integrations/protocolIntegrationPicked";
-import { navigate } from "../../../common/navigate";
+import {
+  getHistoryState,
+  navigate,
+  updateHistoryState,
+} from "../../../common/navigate";
 import type { LocalizeFunc } from "../../../common/translations/localize";
 import {
   hasRejectedItems,
@@ -65,7 +69,7 @@ import type {
   DeviceRegistryEntry,
 } from "../../../data/device/device_registry";
 import {
-  removeConfigEntryFromDevice,
+  removeDeviceFromRegistry,
   updateDeviceRegistryEntry,
 } from "../../../data/device/device_registry";
 import type { EntityRegistryEntry } from "../../../data/entity/entity_registry";
@@ -142,7 +146,7 @@ export class HaConfigDeviceDashboard extends LitElement {
     state: true,
     subscribe: false,
   })
-  private _filter: string = history.state?.filter || "";
+  private _filter: string = getHistoryState()?.filter || "";
 
   @state()
   private _filters: DataTableFilters = {};
@@ -262,7 +266,7 @@ export class HaConfigDeviceDashboard extends LitElement {
     }
 
     this._fromUrl = true;
-    this._filter = history.state?.filter || "";
+    this._filter = getHistoryState()?.filter || "";
 
     this._filters = {
       "ha-filter-states": {
@@ -778,9 +782,7 @@ export class HaConfigDeviceDashboard extends LitElement {
       <hass-tabs-subpage-data-table
         .hass=${this.hass}
         .narrow=${this.narrow}
-        .backPath=${
-          this._searchParms.has("historyBack") ? undefined : "/config"
-        }
+        back-path="/config"
         .tabs=${configSections.devices}
         .route=${this.route}
         .searchLabel=${this.hass.localize(
@@ -1043,7 +1045,7 @@ export class HaConfigDeviceDashboard extends LitElement {
 
   private _handleSearchChange(ev: CustomEvent) {
     this._filter = ev.detail.value;
-    history.replaceState({ filter: this._filter }, "");
+    updateHistoryState({ filter: this._filter });
   }
 
   private _addDevice() {
@@ -1206,19 +1208,9 @@ ${rejected
       dismissText: this.hass.localize("ui.common.cancel"),
       destructive: true,
       confirm: async () => {
-        const proms: Promise<DeviceRegistryEntry>[] = [];
+        const proms: Promise<null>[] = [];
         this._selectedCanDelete.forEach((deviceId) => {
-          const entries = this.hass!.devices[deviceId]?.config_entries;
-          entries.forEach((entryId) => {
-            if (
-              this.entries.find((entry) => entry.entry_id === entryId)
-                ?.supports_remove_device
-            ) {
-              proms.push(
-                removeConfigEntryFromDevice(this.hass!, deviceId, entryId)
-              );
-            }
-          });
+          proms.push(removeDeviceFromRegistry(this.hass!, deviceId));
         });
         const results = await Promise.allSettled(proms);
         if (hasRejectedItems(results)) {

src/panels/config/energy/ha-config-energy.ts

@@ -78,8 +78,6 @@ class HaConfigEnergy extends LitElement {
 
   @property({ attribute: false }) public route!: Route;
 
-  @state() private _searchParms = new URLSearchParams(window.location.search);
-
   @state() private _info?: EnergyInfo;
 
   @state() private _preferences?: EnergyPreferences;
@@ -126,11 +124,7 @@ class HaConfigEnergy extends LitElement {
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
-        .backPath=${
-          this._searchParms.has("historyBack")
-            ? undefined
-            : "/config/lovelace/dashboards"
-        }
+        back-path="/config/lovelace/dashboards"
         .route=${this.route}
         .tabs=${TABS}
       >

src/panels/config/entities/ha-config-entities.ts

@@ -39,6 +39,7 @@ import {
   PROTOCOL_INTEGRATIONS,
   protocolIntegrationPicked,
 } from "../../../common/integrations/protocolIntegrationPicked";
+import { getHistoryState, updateHistoryState } from "../../../common/navigate";
 import { slugify } from "../../../common/string/slugify";
 import type { LocalizeFunc } from "../../../common/translations/localize";
 import {
@@ -192,7 +193,7 @@ export class HaConfigEntities extends LitElement {
     state: true,
     subscribe: false,
   })
-  private _filter: string = history.state?.filter || "";
+  private _filter: string = getHistoryState()?.filter || "";
 
   @state() private _searchParms = new URLSearchParams(window.location.search);
 
@@ -810,9 +811,7 @@ export class HaConfigEntities extends LitElement {
       <hass-tabs-subpage-data-table
         .hass=${this.hass}
         .narrow=${this.narrow}
-        .backPath=${
-          this._searchParms.has("historyBack") ? undefined : "/config"
-        }
+        back-path="/config"
         .route=${this.route}
         .tabs=${configSections.devices}
         .columns=${this._columns(this.hass.localize, filteredEntities)}
@@ -1111,7 +1110,7 @@ export class HaConfigEntities extends LitElement {
     }
 
     this._fromUrl = true;
-    this._filter = history.state?.filter || "";
+    this._filter = getHistoryState()?.filter || "";
 
     this._filters = {
       "ha-filter-states": [],
@@ -1246,7 +1245,7 @@ export class HaConfigEntities extends LitElement {
 
   private _handleSearchChange(ev: CustomEvent) {
     this._filter = ev.detail.value;
-    history.replaceState({ filter: this._filter }, "");
+    updateHistoryState({ filter: this._filter });
   }
 
   private _handleSelectionChanged(

src/panels/config/helpers/ha-config-helpers.ts

@@ -24,7 +24,7 @@ import { storage } from "../../../common/decorators/storage";
 import type { HASSDomEvent } from "../../../common/dom/fire_event";
 import { computeAreaName } from "../../../common/entity/compute_area_name";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
-import { navigate } from "../../../common/navigate";
+import { getHistoryState, navigate } from "../../../common/navigate";
 import type {
   LocalizeFunc,
   LocalizeKeys,
@@ -644,9 +644,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
       <hass-tabs-subpage-data-table
         .hass=${this.hass}
         .narrow=${this.narrow}
-        .backPath=${
-          this._searchParms.has("historyBack") ? undefined : "/config"
-        }
+        back-path="/config"
         .route=${this.route}
         .tabs=${configSections.devices}
         .searchLabel=${this.hass.localize(
@@ -1009,7 +1007,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
     }
 
     this._fromUrl = true;
-    this._filter = history.state?.filter || "";
+    this._filter = getHistoryState()?.filter || "";
 
     this._filters = {
       "ha-filter-floor-areas": area ? { areas: [area] } : undefined,

src/panels/config/integrations/ha-config-entry-device-row.ts

@@ -22,7 +22,7 @@ import {
   type DisableConfigEntryResult,
 } from "../../../data/config_entries";
 import {
-  removeConfigEntryFromDevice,
+  removeDeviceFromRegistry,
   updateDeviceRegistryEntry,
   type DeviceRegistryEntry,
 } from "../../../data/device/device_registry";
@@ -315,7 +315,6 @@ class HaConfigEntryDeviceRow extends LitElement {
   };
 
   private _handleDeleteDevice = async () => {
-    const entry = this.entry;
     const confirmed = await showConfirmationDialog(this, {
       text: this.hass.localize("ui.panel.config.devices.confirm_delete"),
       confirmText: this.hass.localize("ui.common.delete"),
@@ -328,11 +327,7 @@ class HaConfigEntryDeviceRow extends LitElement {
     }
 
     try {
-      await removeConfigEntryFromDevice(
-        this.hass!,
-        this.device.id,
-        entry.entry_id
-      );
+      await removeDeviceFromRegistry(this.hass!, this.device.id);
     } catch (err: any) {
       showAlertDialog(this, {
         title: this.hass.localize("ui.panel.config.devices.error_delete"),

src/panels/config/integrations/ha-config-integration-page.ts

@@ -373,7 +373,11 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
       : this._manifest?.documentation;
 
     return html`
-      <hass-subpage .hass=${this.hass} .narrow=${this.narrow}>
+      <hass-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        back-path="/config/integrations/dashboard"
+      >
         ${
           documentationLink
             ? html`
@@ -901,7 +905,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
     );
     if (row) {
       row.scrollIntoView({
-        block: "center",
+        block: "start",
       });
       row.classList.add("highlight");
     }
@@ -1539,6 +1543,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
         ha-config-entry-row {
           display: block;
           margin-bottom: 16px;
+          scroll-margin-top: var(--ha-space-10);
         }
         a {
           text-decoration: none;

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

@@ -14,7 +14,11 @@ import {
   PROTOCOL_INTEGRATIONS,
   protocolIntegrationPicked,
 } from "../../../common/integrations/protocolIntegrationPicked";
-import { navigate } from "../../../common/navigate";
+import {
+  getHistoryState,
+  navigate,
+  updateHistoryState,
+} from "../../../common/navigate";
 import { caseInsensitiveStringCompare } from "../../../common/string/compare";
 import { extractSearchParam } from "../../../common/url/search-params";
 import { nextRender } from "../../../common/util/render-status";
@@ -163,9 +167,7 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin(
     window.location.hash.substring(1)
   );
 
-  @state() private _searchParams = new URLSearchParams(window.location.search);
-
-  @state() private _filter: string = history.state?.filter || "";
+  @state() private _filter: string = getHistoryState()?.filter || "";
 
   @state() private _logInfos?: Record<string, IntegrationLogInfo>;
 
@@ -526,9 +528,7 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin(
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
-        .backPath=${
-          this._searchParams.has("historyBack") ? undefined : "/config"
-        }
+        back-path="/config"
         .route=${this.route}
         .tabs=${configSections.devices}
         has-fab
@@ -885,7 +885,7 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin(
 
   private _handleSearchChange(ev: InputEvent) {
     this._filter = (ev.target as HaInputSearch).value ?? "";
-    history.replaceState({ filter: this._filter }, "");
+    updateHistoryState({ filter: this._filter });
   }
 
   private async _highlightEntry() {

src/panels/config/integrations/integration-panels/bluetooth/bluetooth-advertisement-monitor.ts

@@ -249,6 +249,7 @@ export class BluetoothAdvertisementMonitorPanel extends LitElement {
     const entry = this._data.find((ent) => ent.address === ev.detail.id);
     showBluetoothDeviceInfoDialog(this, {
       entry: entry!,
+      deviceId: this._sourceDevices[ev.detail.id]?.id,
     });
   }
 

src/panels/config/integrations/integration-panels/bluetooth/dialog-bluetooth-device-info.ts

@@ -2,6 +2,7 @@ import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
+import { navigate } from "../../../../../common/navigate";
 import { copyToClipboard } from "../../../../../common/util/copy-clipboard";
 import "../../../../../components/ha-button";
 import "../../../../../components/ha-dialog-footer";
@@ -50,6 +51,14 @@ class DialogBluetoothDeviceInfo extends LitElement {
     });
   }
 
+  private _openDevice(): void {
+    if (!this._params?.deviceId) {
+      return;
+    }
+    navigate(`/config/devices/device/${this._params.deviceId}`);
+    this.closeDialog();
+  }
+
   protected render(): TemplateResult | typeof nothing {
     if (!this._params) {
       return nothing;
@@ -137,6 +146,17 @@ class DialogBluetoothDeviceInfo extends LitElement {
             : nothing
         }
         <ha-dialog-footer slot="footer">
+          ${
+            this._params.deviceId
+              ? html`
+                  <ha-button slot="primaryAction" @click=${this._openDevice}>
+                    ${this.hass.localize(
+                      "ui.panel.config.bluetooth.open_device"
+                    )}
+                  </ha-button>
+                `
+              : nothing
+          }
           <ha-button
             slot="secondaryAction"
             appearance="plain"

src/panels/config/integrations/integration-panels/bluetooth/show-dialog-bluetooth-device-info.ts

@@ -3,6 +3,7 @@ import type { BluetoothDeviceData } from "../../../../../data/bluetooth";
 
 export interface BluetoothDeviceInfoDialogParams {
   entry: BluetoothDeviceData;
+  deviceId?: string;
 }
 
 export const loadBluetoothDeviceInfoDialog = () =>

src/panels/config/integrations/integration-panels/dhcp/dhcp-config-panel.ts

@@ -95,6 +95,7 @@ export class DHCPConfigPanel extends SubscribeMixin(LitElement) {
         .hass=${this.hass}
         .narrow=${this.narrow}
         .route=${this.route}
+        back-path="/config/integrations/integration/dhcp"
         .columns=${this._columns(this.hass.localize)}
         .data=${this._dataWithIds(this._data)}
         .noDataText=${this.hass.localize(

src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts

@@ -61,7 +61,11 @@ export class MQTTConfigPanel extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <hass-subpage .narrow=${this.narrow} .hass=${this.hass}>
+      <hass-subpage
+        .narrow=${this.narrow}
+        .hass=${this.hass}
+        back-path="/config/integrations/integration/mqtt"
+      >
         <div class="content">
           <ha-card
             .header=${this.hass.localize("ui.panel.config.mqtt.settings_title")}

src/panels/config/integrations/integration-panels/ssdp/ssdp-config-panel.ts

@@ -99,6 +99,7 @@ export class SSDPConfigPanel extends SubscribeMixin(LitElement) {
         .hass=${this.hass}
         .narrow=${this.narrow}
         .route=${this.route}
+        back-path="/config/integrations/integration/ssdp"
         .columns=${this._columns(this.hass.localize)}
         .initialGroupColumn=${this._activeGrouping}
         .initialCollapsedGroups=${this._activeCollapsed}

src/panels/config/integrations/integration-panels/zeroconf/zeroconf-config-panel.ts

@@ -106,6 +106,7 @@ export class ZeroconfConfigPanel extends SubscribeMixin(LitElement) {
         .hass=${this.hass}
         .narrow=${this.narrow}
         .route=${this.route}
+        back-path="/config/integrations/integration/zeroconf"
         .columns=${this._columns(this.hass.localize)}
         .initialGroupColumn=${this._activeGrouping}
         .initialCollapsedGroups=${this._activeCollapsed}

src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts

@@ -76,6 +76,7 @@ class ZHAAddDevicesPage extends LitElement {
       <hass-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
+        back-path="/config/zha/dashboard"
         .header=${this.hass.localize("ui.panel.config.zha.add_device")}
       >
         <ha-button

src/panels/config/integrations/integration-panels/zha/zha-device-page.ts

@@ -10,7 +10,7 @@ import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { cache } from "lit/directives/cache";
 import memoizeOne from "memoize-one";
-import { goBack, navigate } from "../../../../../common/navigate";
+import { navigate } from "../../../../../common/navigate";
 import "../../../../../components/ha-spinner";
 import { narrowViewportContext } from "../../../../../data/context";
 import type { ZHADevice } from "../../../../../data/zha";
@@ -102,7 +102,7 @@ class ZHADevicePage extends LitElement {
           .hass=${this.hass}
           .narrow=${this._narrow}
           .header=${header}
-          .backCallback=${this._goBack}
+          .backPath=${this._backPath}
         >
           <div class="loading">
             <ha-spinner size="large"></ha-spinner>
@@ -130,7 +130,7 @@ class ZHADevicePage extends LitElement {
         .hass=${this.hass}
         .route=${this.route}
         .tabs=${tabNavigation}
-        .backCallback=${this._goBack}
+        .backPath=${this._backPath}
       >
         <div class="container">
           <zha-device-summary-card
@@ -253,13 +253,11 @@ class ZHADevicePage extends LitElement {
     return ["clusters", "bindings", "signature", "neighbors"].includes(tab);
   }
 
-  private _goBack = (): void => {
-    goBack(
-      this._device
-        ? `/config/devices/device/${this._device.device_reg_id}`
-        : "/config/zha/dashboard"
-    );
-  };
+  private get _backPath(): string {
+    return this._device
+      ? `/config/devices/device/${this._device.device_reg_id}`
+      : "/config/zha/dashboard";
+  }
 
   private _getTabs = memoizeOne((device: ZHADevice | undefined) => {
     const tabs: ZHADevicePageTab[] = ["clusters", "bindings", "signature"];

src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts

@@ -55,6 +55,7 @@ export class ZHANetworkVisualizationPage extends LitElement {
       <hass-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
+        back-path="/config/zha/dashboard"
         .header=${this.hass.localize(
           "ui.panel.config.zha.visualization.header"
         )}

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts

@@ -640,7 +640,7 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
   }
 
   private _handleBack(): void {
-    goBack("/config");
+    goBack("/config/integrations/integration/zwave_js");
   }
 
   private _fetchData = async () => {

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-entry-picker.ts

@@ -34,7 +34,12 @@ class ZWaveJSConfigEntryPicker extends LitElement {
 
     if (this._configEntries.length === 0) {
       return html`
-        <hass-subpage header="Z-Wave" .narrow=${this.narrow} .hass=${this.hass}>
+        <hass-subpage
+          header="Z-Wave"
+          .narrow=${this.narrow}
+          .hass=${this.hass}
+          back-path="/config/integrations/integration/zwave_js"
+        >
           <div class="content">
             <ha-card>
               <div class="card-content">
@@ -51,7 +56,12 @@ class ZWaveJSConfigEntryPicker extends LitElement {
     }
 
     return html`
-      <hass-subpage header="Z-Wave" .narrow=${this.narrow} .hass=${this.hass}>
+      <hass-subpage
+        header="Z-Wave"
+        .narrow=${this.narrow}
+        .hass=${this.hass}
+        back-path="/config/integrations/integration/zwave_js"
+      >
         <div class="content">
           <ha-card
             .header=${this.hass.localize(

src/panels/config/labs/ha-config-labs.ts

@@ -19,6 +19,7 @@ import {
   subscribeLabFeatures,
 } from "../../../data/labs";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
+import "../../../layouts/hass-loading-screen";
 import "../../../layouts/hass-subpage";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
@@ -38,7 +39,7 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @state() private _preview_features: LabPreviewFeature[] = [];
+  @state() private _preview_features?: LabPreviewFeature[];
 
   @state() private _highlightedPreviewFeature?: string;
 
@@ -98,6 +99,10 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
   }
 
   protected render() {
+    if (this._preview_features === undefined) {
+      return html`<hass-loading-screen></hass-loading-screen>`;
+    }
+
     const sortedFeatures = this._sortedPreviewFeatures(
       this.hass.localize,
       this._preview_features

src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts

@@ -51,6 +51,8 @@ export class HaConfigLovelaceResources extends LitElement {
 
   @state() private _resources: LovelaceResource[] = [];
 
+  @state() private _loaded = false;
+
   @state() private _lovelaceInfo?: LovelaceInfo;
 
   @state()
@@ -134,7 +136,7 @@ export class HaConfigLovelaceResources extends LitElement {
   );
 
   protected render(): TemplateResult {
-    if (!this.hass || this._resources === undefined) {
+    if (!this.hass || !this._loaded) {
       return html` <hass-loading-screen></hass-loading-screen> `;
     }
 
@@ -175,6 +177,7 @@ export class HaConfigLovelaceResources extends LitElement {
         .hass=${this.hass}
         .narrow=${this.narrow}
         .route=${this.route}
+        back-path="/config/lovelace/dashboards"
         .tabs=${lovelaceResourcesTabs}
         .columns=${this._columns(this.hass.language, this.hass.localize)}
         .data=${this._resources}
@@ -228,6 +231,7 @@ export class HaConfigLovelaceResources extends LitElement {
     ]);
     this._resources = resources;
     this._lovelaceInfo = lovelaceInfo;
+    this._loaded = true;
   }
 
   private _editResource(ev: CustomEvent) {

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

@@ -17,6 +17,7 @@ import {
   subscribeRepairsIssueRegistry,
 } from "../../../data/repairs";
 import "../../../layouts/hass-subpage";
+import "../../../layouts/hass-loading-screen";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import type { HomeAssistant } from "../../../types";
 import "./ha-config-repairs";
@@ -32,7 +33,7 @@ class HaConfigRepairsDashboard extends SubscribeMixin(LitElement) {
 
   @state() private _repairsIssues: RepairsIssue[] = [];
 
-  @state() private _searchParms = new URLSearchParams(window.location.search);
+  @state() private _loaded = false;
 
   @state() private _showIgnored = false;
 
@@ -60,6 +61,7 @@ class HaConfigRepairsDashboard extends SubscribeMixin(LitElement) {
         this._repairsIssues = repairs.issues.sort(
           (a, b) => severitySort[a.severity] - severitySort[b.severity]
         );
+        this._loaded = true;
         const integrations = new Set<string>();
         for (const issue of this._repairsIssues) {
           integrations.add(issue.domain);
@@ -70,6 +72,10 @@ class HaConfigRepairsDashboard extends SubscribeMixin(LitElement) {
   }
 
   protected render(): TemplateResult {
+    if (!this._loaded) {
+      return html`<hass-loading-screen></hass-loading-screen>`;
+    }
+
     const issues = this._getFilteredIssues(
       this._showIgnored,
       this._repairsIssues
@@ -77,9 +83,7 @@ class HaConfigRepairsDashboard extends SubscribeMixin(LitElement) {
 
     return html`
       <hass-subpage
-        .backPath=${
-          this._searchParms.has("historyBack") ? undefined : "/config/system"
-        }
+        back-path="/config/system"
         .hass=${this.hass}
         .narrow=${this.narrow}
         .header=${this.hass.localize("ui.panel.config.repairs.caption")}

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

@@ -459,9 +459,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
       <hass-tabs-subpage-data-table
         .hass=${this.hass}
         .narrow=${this.narrow}
-        .backPath=${
-          this._searchParms.has("historyBack") ? undefined : "/config"
-        }
+        back-path="/config"
         .route=${this.route}
         .tabs=${configSections.automations}
         .searchLabel=${this.hass.localize(

src/panels/config/scene/ha-scene-editor.ts

@@ -939,7 +939,7 @@ export class HaSceneEditor extends DirtyStateProviderMixin<number>()(
                 { err_no: err.status_code }
               ),
       });
-      goBack("/config");
+      goBack("/config/scene/dashboard");
       return;
     }
 
@@ -1084,7 +1084,7 @@ export class HaSceneEditor extends DirtyStateProviderMixin<number>()(
     if (this._mode === "live") {
       applyScene(this.hass, this._storedStates);
     }
-    afterNextRender(() => goBack("/config"));
+    afterNextRender(() => goBack("/config/scene/dashboard"));
   }
 
   private _deleteTapped(): void {
@@ -1111,7 +1111,7 @@ export class HaSceneEditor extends DirtyStateProviderMixin<number>()(
     if (this._mode === "live") {
       applyScene(this.hass, this._storedStates);
     }
-    goBack("/config");
+    goBack("/config/scene/dashboard");
   }
 
   private async _confirmUnsavedChanged(): Promise<boolean> {

src/panels/config/script/ha-script-editor.ts

@@ -896,7 +896,7 @@ export class HaScriptEditor extends SubscribeMixin(
 
   private async _delete() {
     await deleteScript(this.hass, this.scriptId!);
-    goBack("/config");
+    goBack(this.dashboardPath);
   }
 
   private async _promptScriptAlias(): Promise<boolean> {

src/panels/config/script/ha-script-picker.ts

@@ -430,9 +430,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
       <hass-tabs-subpage-data-table
         .hass=${this.hass}
         .narrow=${this.narrow}
-        .backPath=${
-          this._searchParms.has("historyBack") ? undefined : "/config"
-        }
+        back-path="/config"
         .route=${this.route}
         .tabs=${configSections.automations}
         .searchLabel=${this.hass.localize(

src/panels/config/script/ha-script-trace.ts

@@ -14,7 +14,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { navigate } from "../../../common/navigate";
+import { navigate, replaceCurrentUrl } from "../../../common/navigate";
 import "../../../components/ha-button";
 import "../../../components/ha-dropdown";
 import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
@@ -106,6 +106,7 @@ export class HaScriptTrace extends LitElement {
       <hass-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
+        back-path="/config/script/dashboard"
         .header=${title}
         .scrollable=${this.narrow}
       >
@@ -433,11 +434,7 @@ export class HaScriptTrace extends LitElement {
       if (runId) {
         const params = new URLSearchParams(location.search);
         params.delete("run_id");
-        history.replaceState(
-          null,
-          "",
-          `${location.pathname}?${params.toString()}`
-        );
+        replaceCurrentUrl(`${location.pathname}?${params.toString()}`);
       }
 
       await showAlertDialog(this, {

src/panels/config/voice-assistants/assist/ha-config-voice-assistants-assist-devices.ts

@@ -16,6 +16,7 @@ import {
   listAssistPipelines,
 } from "../../../../data/assist_pipeline";
 import "../../../../layouts/hass-subpage";
+import "../../../../layouts/hass-loading-screen";
 import type { HomeAssistant } from "../../../../types";
 
 interface AssistDeviceExtra extends AssistDevice {
@@ -124,10 +125,15 @@ class AssistDevicesPage extends LitElement {
   }
 
   render() {
+    if (!this._devices) {
+      return html`<hass-loading-screen></hass-loading-screen>`;
+    }
+
     return html`
       <hass-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
+        back-path="/config/voice-assistants/assistants"
         .header=${this.hass.localize(
           "ui.panel.config.voice_assistants.assistants.pipeline.devices.title"
         )}
@@ -143,7 +149,7 @@ class AssistDevicesPage extends LitElement {
             this.hass.states,
             this._pipelines,
             this._preferred,
-            this._devices || []
+            this._devices
           )}
           auto-height
           @row-click=${this._handleRowClicked}

src/panels/config/voice-assistants/debug/assist-pipeline-debug.ts

@@ -51,6 +51,7 @@ export class AssistPipelineDebug extends LitElement {
     return html`<hass-subpage
       .narrow=${this.narrow}
       .hass=${this.hass}
+      back-path="/config/voice-assistants/debug"
       .header=${this.hass.localize(
         "ui.panel.config.voice_assistants.debug.header"
       )}

src/panels/config/voice-assistants/debug/assist-pipeline-run-debug.ts

@@ -60,6 +60,7 @@ export class AssistPipelineRunDebug extends LitElement {
       <hass-subpage
         .narrow=${this.narrow}
         .hass=${this.hass}
+        back-path="/config/voice-assistants/assistants"
         .header=${this.hass.localize(
           "ui.panel.config.voice_assistants.debug.pipeline.header"
         )}

src/panels/config/voice-assistants/ha-config-voice-assistants-assistants.ts

@@ -29,8 +29,6 @@ export class HaConfigVoiceAssistantsAssistants extends LitElement {
 
   @property({ attribute: false }) public route!: Route;
 
-  private _searchParms = new URLSearchParams(window.location.search);
-
   protected render() {
     if (!this.hass) {
       return html`<hass-loading-screen></hass-loading-screen>`;
@@ -39,9 +37,7 @@ export class HaConfigVoiceAssistantsAssistants extends LitElement {
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
-        .backPath=${
-          this._searchParms.has("historyBack") ? undefined : "/config"
-        }
+        back-path="/config"
         .route=${this.route}
         .tabs=${voiceAssistantTabs}
       >

src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts

@@ -492,9 +492,7 @@ export class VoiceAssistantsExpose extends LitElement {
       <hass-tabs-subpage-data-table
         .hass=${this.hass}
         .narrow=${this.narrow}
-        .backPath=${
-          this._searchParms.has("historyBack") ? undefined : "/config"
-        }
+        back-path="/config"
         .route=${this.route}
         .tabs=${voiceAssistantTabs}
         .columns=${this._columns(

src/panels/config/zone/ha-config-zone.ts

@@ -57,8 +57,6 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
 
   @property({ attribute: false }) public route!: Route;
 
-  @state() private _searchParms = new URLSearchParams(window.location.search);
-
   @state() private _storageItems?: Zone[];
 
   @state() private _stateItems?: HassEntity[];
@@ -248,9 +246,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
       <hass-tabs-subpage
         .hass=${this.hass}
         .route=${this.route}
-        .backPath=${
-          this._searchParms.has("historyBack") ? undefined : "/config"
-        }
+        back-path="/config"
         .tabs=${configSections.areas}
         has-fab
       >

src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts

@@ -92,7 +92,7 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
                 </div>
               `
             : html`
-                <div class="flex state">
+                <div class="flex box">
                   <ha-input
                     .disabled=${stateObj.state === UNAVAILABLE}
                     pattern="[0-9]+([\\.][0-9]+)?"
@@ -128,6 +128,10 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
       min-width: 45px;
       text-align: end;
     }
+    .box {
+      flex-grow: 0;
+      min-width: 45px;
+    }
     ha-input {
       width: 100%;
     }

src/panels/lovelace/entity-rows/hui-number-entity-row.ts

@@ -99,7 +99,7 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow {
                 </div>
               `
             : html`
-                <div class="flex state">
+                <div class="flex box">
                   <ha-input
                     auto-validate
                     .disabled=${stateObj.state === UNAVAILABLE}
@@ -136,6 +136,10 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow {
       min-width: 45px;
       text-align: end;
     }
+    .box {
+      flex-grow: 0;
+      min-width: 45px;
+    }
     ha-input::part(wa-input) {
       text-align: end;
       direction: ltr !important;

src/panels/lovelace/ha-panel-lovelace.ts

@@ -4,7 +4,7 @@ import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { navigate } from "../../common/navigate";
+import { navigate, replaceCurrentUrl } from "../../common/navigate";
 import type { LocalizeFunc } from "../../common/translations/localize";
 import { constructUrlCurrentPath } from "../../common/url/construct-url";
 import {
@@ -509,9 +509,7 @@ export class LovelacePanel extends LitElement {
     };
 
     if ("editMode" in props) {
-      window.history.replaceState(
-        null,
-        "",
+      replaceCurrentUrl(
         constructUrlCurrentPath(
           props.editMode
             ? addSearchParam({ edit: "1" })

src/panels/lovelace/hui-root.ts

@@ -27,8 +27,7 @@ import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { UndoRedoController } from "../../common/controllers/undo-redo-controller";
 import { fireEvent } from "../../common/dom/fire_event";
-import { isNavigationClick } from "../../common/dom/is-navigation-click";
-import { goBack, navigate } from "../../common/navigate";
+import { goBack, navigate, replaceCurrentUrl } from "../../common/navigate";
 import type { LocalizeKeys } from "../../common/translations/localize";
 import { constructUrlCurrentPath } from "../../common/url/construct-url";
 import { sanitizeNavigationPath } from "../../common/url/sanitize-navigation-path";
@@ -76,6 +75,7 @@ import { showMoreInfoDialog } from "../../dialogs/more-info/show-ha-more-info-di
 import { showQuickBar } from "../../dialogs/quick-bar/show-dialog-quick-bar";
 import { showVoiceCommandDialog } from "../../dialogs/voice-command-dialog/show-ha-voice-command-dialog";
 import { haStyle } from "../../resources/styles";
+import { handleBackClick } from "../../layouts/back-navigation";
 import { ChildPanelReady } from "../../layouts/panel-ready";
 import type { HomeAssistant, PanelInfo } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
@@ -677,11 +677,7 @@ class HUIRoot extends LitElement {
     );
 
   private _clearParam(param: string) {
-    window.history.replaceState(
-      null,
-      "",
-      constructUrlCurrentPath(removeSearchParam(param))
-    );
+    replaceCurrentUrl(constructUrlCurrentPath(removeSearchParam(param)));
   }
 
   protected firstUpdated(changedProps: PropertyValues<this>) {
@@ -893,44 +889,39 @@ class HUIRoot extends LitElement {
   };
 
   private _goBack(): void {
-    const views = this.lovelace?.config.views ?? [];
-    const curViewConfig =
-      typeof this._curView === "number" ? views[this._curView] : undefined;
-
-    const backPath = sanitizeNavigationPath(
-      curViewConfig?.back_path ?? this.backPath
-    );
-
-    if (backPath) {
-      navigate(backPath, { replace: true });
-    } else if (history.length > 1) {
-      goBack();
-    } else if (!views[0].subview) {
-      navigate(this.route!.prefix, { replace: true });
-    } else {
-      navigate("/");
+    const configuredBackPath = this._configuredBackPath;
+    if (configuredBackPath) {
+      navigate(configuredBackPath, { replace: true });
+      return;
     }
+
+    const views = this.lovelace?.config.views ?? [];
+    // Falling back to the dashboard root only makes sense when its first view
+    // is a real one.
+    goBack(views[0]?.subview ? undefined : this.route?.prefix);
   }
 
   private _handleBackClick(ev: MouseEvent): void {
-    if (this._backPath && !isNavigationClick(ev)) {
-      return;
-    }
-    this._goBack();
+    handleBackClick(ev, this._backPath, () => this._goBack());
   }
 
-  private get _backPath(): string | undefined {
+  private get _configuredBackPath(): string | undefined {
     const views = this.lovelace?.config.views ?? [];
     const curViewConfig =
       typeof this._curView === "number" ? views[this._curView] : undefined;
 
-    const backPath = sanitizeNavigationPath(
-      curViewConfig?.back_path ?? this.backPath
-    );
+    return sanitizeNavigationPath(curViewConfig?.back_path ?? this.backPath);
+  }
 
-    if (backPath) {
-      return backPath;
+  private get _backPath(): string | undefined {
+    if (this._configuredBackPath) {
+      return this._configuredBackPath;
     }
+
+    const views = this.lovelace?.config.views ?? [];
+    const curViewConfig =
+      typeof this._curView === "number" ? views[this._curView] : undefined;
+
     return curViewConfig?.subview ? this.route!.prefix : undefined;
   }
 

src/panels/lovelace/views/hui-sections-view.ts

@@ -9,6 +9,7 @@ import { repeat } from "lit/directives/repeat";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { clamp } from "../../../common/number/clamp";
+import { getHistoryState, updateHistoryState } from "../../../common/navigate";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-ripple";
 import "../../../components/ha-sortable";
@@ -137,7 +138,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
       "section-visibility-changed",
       this._sectionVisibilityChanged
     );
-    this._sidebarTabActive = Boolean(window.history.state?.sidebar);
+    this._sidebarTabActive = Boolean(getHistoryState()?.sidebar);
   }
 
   disconnectedCallback(): void {
@@ -509,10 +510,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
     this._sidebarTabActive = !this._sidebarTabActive;
 
     // Add sidebar state to history
-    window.history.replaceState(
-      { ...window.history.state, sidebar: this._sidebarTabActive },
-      ""
-    );
+    updateHistoryState({ sidebar: this._sidebarTabActive });
 
     // Restore scroll position after view updates
     this.updateComplete.then(() => {

src/panels/profile/ha-profile-section-general.ts

@@ -4,6 +4,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { fireEvent } from "../../common/dom/fire_event";
+import { replaceCurrentUrl } from "../../common/navigate";
 import { nextRender } from "../../common/util/render-status";
 import "../../components/ha-button";
 import "../../components/ha-card";
@@ -90,7 +91,7 @@ class HaProfileSectionGeneral extends LitElement {
   }
 
   private _clearHash() {
-    history.replaceState(null, "", window.location.pathname);
+    replaceCurrentUrl(window.location.pathname);
   }
 
   protected render(): TemplateResult {

src/panels/profile/ha-refresh-tokens-card.ts

@@ -209,7 +209,6 @@ class HaRefreshTokens extends LitElement {
           <ha-button
             variant="danger"
             appearance="filled"
-            size="s"
             @click=${this._deleteAllTokens}
           >
             ${this.hass.localize(
@@ -352,6 +351,10 @@ class HaRefreshTokens extends LitElement {
           border-radius: var(--ha-border-radius-circle);
           margin-right: 6px;
         }
+        .card-actions {
+          display: flex;
+          justify-content: flex-end;
+        }
       `,
     ];
   }

src/state/connection-mixin.ts

@@ -379,8 +379,7 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
       // @ts-ignore
       this.hass!.callWS({ type: "get_config" }).then((config: HassConfig) => {
         if (config.safe_mode) {
-          // @ts-ignore Firefox supports forceGet
-          location.reload(true);
+          location.reload();
         }
         this._updateHass({ config });
         this.checkDataBaseMigration();

src/state/logging-mixin.ts

@@ -2,6 +2,7 @@ import type { PropertyValues } from "lit";
 import type { HASSDomEvent } from "../common/dom/fire_event";
 import type { SystemLogLevel } from "../data/system_log";
 import type { Constructor } from "../types";
+import { recoverFromStaleBuild } from "../util/recover-stale-build";
 import type { HassBaseEl } from "./hass-base-mixin";
 
 interface WriteLogParams {
@@ -25,7 +26,31 @@ export const loggingMixin = <T extends Constructor<HassBaseEl>>(
   class extends superClass {
     protected hassConnected() {
       super.hassConnected();
+      // Resource-load errors (<script>, modulepreload <link>) do not bubble,
+      // so observe them in the capture phase. A stale build's hashed chunk
+      // 404 lands here (legacy build / modulepreload); recover instead of
+      // dead-ending.
+      window.addEventListener(
+        "error",
+        (ev) => {
+          const target = ev.target as
+            (HTMLScriptElement & HTMLLinkElement) | null;
+          if (
+            target &&
+            (target.tagName === "SCRIPT" || target.tagName === "LINK")
+          ) {
+            recoverFromStaleBuild(target.src || target.href, this);
+          }
+        },
+        true
+      );
       window.addEventListener("error", async (ev) => {
+        // A stale build can surface as a runtime error while evaluating a
+        // freshly (re)loaded chunk; recover rather than log it.
+        if (recoverFromStaleBuild(ev.error?.message || ev.message, this)) {
+          ev.preventDefault();
+          return;
+        }
         if (!this.hass?.connected) {
           return;
         }
@@ -59,6 +84,20 @@ export const loggingMixin = <T extends Constructor<HassBaseEl>>(
         }
       });
       window.addEventListener("unhandledrejection", async (ev) => {
+        // A failed dynamic import() of a stale build's chunk rejects here
+        // (dialogs, more-info, cards, config-flow, …); recover rather than
+        // silently logging it at debug level.
+        const reason: any = ev.reason;
+        const reasonMessage =
+          reason instanceof Error
+            ? reason.message
+            : typeof reason === "string"
+              ? reason
+              : "";
+        if (recoverFromStaleBuild(reasonMessage, this)) {
+          ev.preventDefault();
+          return;
+        }
         if (!this.hass?.connected) {
           return;
         }

src/state/url-sync-mixin.ts

@@ -2,6 +2,7 @@
 import type { ReactiveElement, PropertyValues } from "lit";
 import { fireEvent } from "../common/dom/fire_event";
 import { mainWindow } from "../common/dom/get_main_window";
+import { updateHistoryState } from "../common/navigate";
 import { closeLastDialog } from "../dialogs/make-dialog-manager";
 import type { ProvideHassElement } from "../mixins/provide-hass-lit-mixin";
 import type { Constructor } from "../types";
@@ -20,10 +21,7 @@ export const urlSyncMixin = <
         public connectedCallback(): void {
           super.connectedCallback();
           if (mainWindow.history.length === 1) {
-            mainWindow.history.replaceState(
-              { ...mainWindow.history.state, root: true },
-              ""
-            );
+            updateHistoryState({ root: true });
           }
           mainWindow.addEventListener("popstate", this._popstateChangeListener);
         }

src/translations/en.json

@@ -1129,11 +1129,7 @@
         "zoom_reset": "Reset zoom",
         "expand_legend": "More",
         "collapse_legend": "Less",
-        "toggle_visibility": "Toggle visibility",
-        "chart": "Chart",
-        "time": "Time",
-        "value": "Value",
-        "category": "Category"
+        "toggle_visibility": "Toggle visibility"
       },
       "map": {
         "error": "Unable to load map"
@@ -2547,6 +2543,7 @@
       "dismiss": "Dismiss",
       "no_matching_link_found": "No matching My link found for {path}",
       "new_version_available": "A new version of the frontend is available. This page will update in {seconds, plural, one {# second} other {# seconds}}.",
+      "new_version_available_reload": "A new version of the frontend is available. It will be applied once you have saved or discarded your changes.",
       "update_now": "Update now",
       "theme_save_failed": "Unable to save theme settings to your user profile.",
       "theme_preferences_unavailable": "Unable to load user profile theme settings.",
@@ -6134,7 +6131,8 @@
             "error": "{path} could not be loaded",
             "blueprint_in_use_title": "This blueprint is in use and cannot be deleted",
             "blueprint_in_use_text": "Please remove all below {type} that use this blueprint before deleting it. {list}",
-            "blueprint_in_use_view": "view {type}",
+            "blueprint_in_use_view_automation": "View automations",
+            "blueprint_in_use_view_script": "View scripts",
             "confirm_delete_title": "Delete blueprint?",
             "confirm_delete_text": "{name} will be permanently deleted.",
             "add_blueprint": "Import blueprint",
@@ -7449,6 +7447,7 @@
           "updated": "Updated",
           "device": "Device",
           "device_information": "Device information",
+          "open_device": "Open device",
           "advertisement_data": "Advertisement data",
           "manufacturer_data": "Manufacturer data",
           "service_data": "Service data",

src/util/recover-stale-build.ts

@@ -0,0 +1,200 @@
+import { mainWindow } from "../common/dom/get_main_window";
+import { fireExternalBusMessage } from "../external_app/external_messaging";
+import * as staleBuildPatterns from "./stale-build-patterns.json";
+import { showToast } from "./toast";
+
+// Patterns live in a JSON single source (stale-build-patterns.json) so the
+// build can inject the exact same ones into the inline boot-time guard
+// (src/html/_bootstrap_recovery.html.template), which runs before any bundle
+// loads and therefore cannot import from here.
+const patterns = ((staleBuildPatterns as any).default ??
+  staleBuildPatterns) as { hashedEntry: string; moduleError: string };
+const HASHED_ENTRY = new RegExp(patterns.hashedEntry, "i");
+const MODULE_ERROR = new RegExp(patterns.moduleError, "i");
+
+const RELOAD_STORAGE_KEY = "haStaleBuildReload";
+const RELOAD_COOLDOWN = 60_000;
+// Reuse the service worker update toast id so we never show two competing
+// "new version available" toasts (see register-service-worker.ts).
+const UPDATE_TOAST_ID = "frontend-update-available";
+
+let reloading = false;
+let toastShown = false;
+
+/**
+ * True when the given string looks like a failed load of a content-hashed
+ * frontend chunk — i.e. a stale build referencing files that no longer exist
+ * on the server after an upgrade. Accepts either a URL (from a resource
+ * `error` event) or an error message (from a rejected dynamic `import()`).
+ */
+export const isStaleBuildError = (urlOrMessage: string | undefined): boolean =>
+  !!urlOrMessage &&
+  (HASHED_ENTRY.test(urlOrMessage) || MODULE_ERROR.test(urlOrMessage));
+
+const dropCachesAndReload = async (bust: number): Promise<void> => {
+  // A service worker serves chunks CacheFirst (with `ignoreSearch`), so a
+  // cache-busting navigation alone would still be answered from the stale
+  // cache. Drop the worker and its caches first, then navigate with a
+  // cache-busting query so a fresh index.html is fetched. (Android's WebView
+  // has a service worker, so this path recovers it too.)
+  if ("serviceWorker" in navigator && navigator.serviceWorker.controller) {
+    try {
+      const registrations = await navigator.serviceWorker.getRegistrations();
+      await Promise.all(registrations.map((reg) => reg.unregister()));
+    } catch (_err) {
+      // ignore
+    }
+    if ("caches" in window) {
+      try {
+        const keys = await caches.keys();
+        await Promise.all(keys.map((key) => caches.delete(key)));
+      } catch (_err) {
+        // ignore
+      }
+    }
+  }
+
+  const url = new URL(mainWindow.location.href);
+  url.searchParams.set("ha_cache_bust", String(bust));
+  mainWindow.location.replace(url.href);
+};
+
+/**
+ * Reload the page onto the current build.
+ *
+ * Returns `true` when a reload was actually initiated, `false` when the loop
+ * guard blocked it — so callers can fall back to logging / an error screen
+ * instead of silently swallowing a still-failing chunk.
+ *
+ * Guarded by a monotonic sessionStorage counter — NOT the boot guard's URL
+ * param, which core.ts strips on every successful connect — so a recovery that
+ * boots and then immediately re-triggers the same missing chunk (a deep-linked
+ * panel, more-info from the URL, or a preloaded route) cannot reload-loop.
+ */
+export const reloadFresh = (): boolean => {
+  if (reloading) {
+    return false;
+  }
+  const now = Date.now();
+  let attempts = 0;
+  let last = 0;
+  let storageOk = true;
+  try {
+    const stored = sessionStorage.getItem(RELOAD_STORAGE_KEY);
+    if (stored) {
+      const parsed = JSON.parse(stored);
+      attempts = Number(parsed.n) || 0;
+      last = Number(parsed.t) || 0;
+    }
+  } catch (_err) {
+    storageOk = false;
+  }
+  if (now - last > RELOAD_COOLDOWN) {
+    attempts = 0;
+  }
+  if (attempts >= 1) {
+    // Already reloaded once recently and it still failed: stop, to avoid a
+    // reload loop on a genuinely broken (not merely stale) deploy.
+    return false;
+  }
+  try {
+    sessionStorage.setItem(
+      RELOAD_STORAGE_KEY,
+      JSON.stringify({ n: attempts + 1, t: now })
+    );
+  } catch (_err) {
+    storageOk = false;
+  }
+  if (!storageOk) {
+    // Without a durable cooldown marker (e.g. private mode) we can't stop a
+    // loop across reloads, so fail closed rather than risk reloading forever.
+    return false;
+  }
+  reloading = true;
+
+  // `frontend/reload_and_clear_cache` is a WKWebView (iOS/macOS companion)
+  // command; the Android bridges (externalApp/externalAppV2) don't handle it.
+  // Only send it to the WebKit bridge — everything else takes the browser
+  // path below (Android's WebView has a service worker, so it recovers there).
+  if (window.webkit?.messageHandlers?.externalBus) {
+    fireExternalBusMessage({ type: "frontend/reload_and_clear_cache" });
+    return true;
+  }
+
+  // Fire and forget; the page navigates away once it resolves.
+  void dropCachesAndReload(now);
+  return true;
+};
+
+const showStaleBuildToast = (rootEl?: HTMLElement): void => {
+  if (toastShown) {
+    return;
+  }
+  const el =
+    rootEl ??
+    (mainWindow.document.querySelector("home-assistant") as HTMLElement | null);
+  if (!el) {
+    // Nowhere to anchor the toast yet; a later trigger can retry.
+    return;
+  }
+  toastShown = true;
+  // This toast is only shown while an editor is dirty, so it deliberately has
+  // no immediate-reload action that could discard unsaved work: it reloads
+  // automatically once the user saves or discards.
+  const reloadWhenClean = () => {
+    if (!window.isDirtyState) {
+      window.removeEventListener("dirty-state-changed", reloadWhenClean);
+      reloadFresh();
+    }
+  };
+  window.addEventListener("dirty-state-changed", reloadWhenClean);
+  showToast(el, {
+    id: UPDATE_TOAST_ID,
+    message: {
+      translationKey: "ui.notification_toast.new_version_available_reload",
+    },
+    duration: -1,
+    dismissable: false,
+  });
+};
+
+/**
+ * Reload onto the current build, but never over unsaved work: when an editor
+ * is dirty, show a non-dismissable toast and defer the reload until the dirty
+ * state clears. Returns `true` when a reload or the deferral toast was started.
+ */
+export const reloadForUpdate = (rootEl?: HTMLElement): boolean => {
+  if (window.isDirtyState) {
+    showStaleBuildToast(rootEl);
+    return true;
+  }
+  return reloadFresh();
+};
+
+/**
+ * Recover from a failed lazy load caused by a stale build (a content-hashed
+ * chunk that 404s after an upgrade while the app stayed open).
+ *
+ * - clean: reload onto the current build.
+ * - dirty (an editor has unsaved changes): show a non-dismissable toast and
+ *   auto-reload once the user saves/discards, so unsaved work is never lost.
+ *
+ * Returns `true` when the error was a stale-build error and recovery was
+ * actually started, so callers can skip their own error UI / logging. Returns
+ * `false` for a non-stale error, or when the loop guard blocked the reload (so
+ * the caller still surfaces/logs the failure).
+ */
+export const recoverFromStaleBuild = (
+  urlOrMessage: string | undefined,
+  rootEl?: HTMLElement
+): boolean => {
+  // In dev/demo the entry files are unhashed and rebuild churn can throw
+  // transient import errors; never auto-reload there.
+  if (__DEV__ || __DEMO__) {
+    return false;
+  }
+  if (!isStaleBuildError(urlOrMessage)) {
+    return false;
+  }
+  return reloadForUpdate(rootEl);
+};

test/common/navigate.test.ts

@@ -0,0 +1,92 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import type { NavigateOptions } from "../../src/common/navigate";
+import { canGoBack, goBack, navigate } from "../../src/common/navigate";
+
+// navigate() closes open dialogs before touching history.
+vi.mock("../../src/dialogs/make-dialog-manager", () => ({
+  closeAllDialogs: vi.fn(async () => true),
+}));
+
+// Fabricates a raw entry like a document load, which navigate() never produces.
+const setEntry = (path: string, state: unknown = null) => {
+  window.history.replaceState(state, "", path);
+};
+
+describe("navigate", () => {
+  beforeEach(() => {
+    setEntry("/config");
+  });
+
+  it("stamps the path we came from on pushed entries", async () => {
+    await navigate("/config/devices/dashboard");
+
+    expect(window.location.pathname).toEqual("/config/devices/dashboard");
+    expect(window.history.state).toMatchObject({ from: "/config" });
+  });
+
+  it("keeps caller data alongside the stamp", async () => {
+    await navigate("/config/areas", { data: { scrollPosition: 42 } });
+
+    expect(window.history.state).toMatchObject({
+      scrollPosition: 42,
+      from: "/config",
+    });
+  });
+
+  it("ignores caller data that is not an object", async () => {
+    await navigate("/config/areas", { data: 42 } as unknown as NavigateOptions);
+
+    expect(window.history.state).toEqual({ from: "/config" });
+  });
+
+  it("keeps the stamp when replacing, the predecessor is unchanged", async () => {
+    await navigate("/config/cloud");
+    await navigate("/config/cloud/account", { replace: true });
+
+    expect(window.location.pathname).toEqual("/config/cloud/account");
+    expect(window.history.state).toMatchObject({ from: "/config" });
+  });
+
+  it("does not stamp an entry the app did not push", () => {
+    expect(window.history.state).toBeNull();
+    expect(canGoBack()).toBe(false);
+  });
+});
+
+describe("goBack", () => {
+  beforeEach(() => {
+    setEntry("/config/cloud/remote");
+    vi.restoreAllMocks();
+  });
+
+  it("goes back when we came from another page in the app", async () => {
+    const back = vi
+      .spyOn(window.history, "back")
+      .mockImplementation(() => undefined);
+    await navigate("/config/cloud/remote");
+
+    await goBack("/config/cloud/account");
+
+    expect(back).toHaveBeenCalledOnce();
+  });
+
+  it("falls back to the given path when the previous entry is not ours", async () => {
+    const back = vi
+      .spyOn(window.history, "back")
+      .mockImplementation(() => undefined);
+
+    await goBack("/config/cloud/account");
+
+    expect(back).not.toHaveBeenCalled();
+    expect(window.location.pathname).toEqual("/config/cloud/account");
+  });
+
+  it("falls back to the root when no path is given", async () => {
+    vi.spyOn(window.history, "back").mockImplementation(() => undefined);
+
+    await goBack();
+
+    expect(window.location.pathname).toEqual("/");
+  });
+});

test/components/chart/chart-sonification.test.ts

@@ -1,192 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { canSonifyChart } from "../../../src/components/chart/chart-sonification";
-import type { HaECSeries } from "../../../src/resources/echarts/echarts";
-
-const series = (
-  items: { type: string; id?: string; name?: string; data?: unknown[] }[]
-) => items as unknown as HaECSeries;
-
-describe("canSonifyChart", () => {
-  it("accepts line and bar series that carry data", () => {
-    expect(
-      canSonifyChart(
-        series([
-          {
-            type: "line",
-            data: [
-              [0, 1],
-              [1, 2],
-            ],
-          },
-        ])
-      )
-    ).toBe(true);
-    expect(
-      canSonifyChart(
-        series([
-          {
-            type: "bar",
-            data: [
-              [0, 1],
-              [1, 2],
-            ],
-          },
-        ])
-      )
-    ).toBe(true);
-  });
-
-  it("accepts a chart whose empty placeholder series sits beside real data", () => {
-    expect(
-      canSonifyChart(
-        series([
-          { type: "bar", data: [] },
-          {
-            type: "bar",
-            data: [
-              [0, 1],
-              [1, 2],
-            ],
-          },
-        ])
-      )
-    ).toBe(true);
-  });
-
-  it("rejects series types the extension cannot convert", () => {
-    expect(
-      canSonifyChart(
-        series([
-          {
-            type: "custom",
-            data: [
-              [0, 1],
-              [1, 2],
-            ],
-          },
-        ])
-      )
-    ).toBe(false);
-    expect(
-      canSonifyChart(
-        series([
-          {
-            type: "line",
-            data: [
-              [0, 1],
-              [1, 2],
-            ],
-          },
-          {
-            type: "sankey",
-            data: [
-              [0, 1],
-              [1, 2],
-            ],
-          },
-        ])
-      )
-    ).toBe(false);
-  });
-
-  it("rejects charts with nothing plotted", () => {
-    expect(canSonifyChart(series([]))).toBe(false);
-    expect(canSonifyChart(series([{ type: "line", data: [] }]))).toBe(false);
-    expect(canSonifyChart(series([{ type: "line" }]))).toBe(false);
-  });
-
-  it("rejects value-first pairs, which the extension reads as a non-numeric y", () => {
-    // The energy device charts encode [amount, categoryName]. Chart2Music takes
-    // value as [x, y], so every one of those points is dropped.
-    expect(
-      canSonifyChart(
-        series([
-          {
-            type: "bar",
-            data: [
-              { value: [12.5, "sensor.a"] },
-              { value: [8.25, "sensor.b"] },
-            ],
-          },
-        ])
-      )
-    ).toBe(false);
-  });
-
-  it("rejects a chart left with a single readable point", () => {
-    // The device pie's slices are all unreadable, leaving only its one-number
-    // total series — nothing the arrow keys could move between.
-    expect(
-      canSonifyChart(
-        series([
-          { type: "pie", data: [{ value: [12.5, "sensor.a"] }] },
-          { type: "pie", data: [24.5] },
-        ])
-      )
-    ).toBe(false);
-  });
-
-  it("ignores the points of legend-hidden series", () => {
-    // Hiding a series strips its data before it reaches ECharts, so it cannot
-    // be navigated either.
-    const chart = series([
-      { type: "line", id: "a", data: [[0, 1]] },
-      { type: "line", name: "b", data: [[1, 2]] },
-    ]);
-    expect(canSonifyChart(chart, new Set())).toBe(true);
-    expect(canSonifyChart(chart, new Set(["b"]))).toBe(false);
-    expect(canSonifyChart(chart, new Set(["a", "b"]))).toBe(false);
-  });
-
-  it("rejects a series whose points are all gaps", () => {
-    // Chart2Music drops any point without a numeric y, so a series of nothing
-    // but nulls converts to an empty group and makes it throw.
-    expect(
-      canSonifyChart(
-        series([
-          {
-            type: "line",
-            data: [
-              [0, null],
-              [1, null],
-            ],
-          },
-        ])
-      )
-    ).toBe(false);
-  });
-
-  it("accepts a series that only becomes numeric partway through", () => {
-    expect(
-      canSonifyChart(
-        series([
-          {
-            type: "line",
-            data: [
-              [0, null],
-              [1, 21.5],
-              [2, 21.9],
-            ],
-          },
-        ])
-      )
-    ).toBe(true);
-  });
-
-  it("reads the y out of object-form points", () => {
-    expect(
-      canSonifyChart(
-        series([
-          { type: "bar", data: [{ value: [0, 0.28] }, { value: [1, 0.31] }] },
-        ])
-      )
-    ).toBe(true);
-    expect(
-      canSonifyChart(
-        series([
-          { type: "bar", data: [{ value: [0, null] }, { value: [1, null] }] },
-        ])
-      )
-    ).toBe(false);
-  });
-});

test/data/time-condition-description.test.ts

@@ -0,0 +1,76 @@
+import { IntlMessageFormat } from "intl-messageformat";
+import { describe, expect, it } from "vitest";
+import { describeCondition } from "../../src/data/automation_i18n";
+import {
+  DateFormat,
+  FirstWeekday,
+  NumberFormat,
+  TimeFormat,
+  TimeZone,
+} from "../../src/data/translation";
+import en from "../../src/translations/en.json";
+import type { HomeAssistant } from "../../src/types";
+
+type TranslationNode = string | { [key: string]: TranslationNode };
+
+const localize = (key: string, values?: Record<string, unknown>) => {
+  const message = key
+    .split(".")
+    .reduce<TranslationNode | undefined>(
+      (translations, part) =>
+        typeof translations === "object" ? translations[part] : undefined,
+      en as TranslationNode
+    );
+  return typeof message === "string"
+    ? (new IntlMessageFormat(message, "en").format(values) as string)
+    : "";
+};
+
+const hass = {
+  localize,
+  locale: {
+    language: "en",
+    number_format: NumberFormat.language,
+    time_format: TimeFormat.twenty_four,
+    date_format: DateFormat.language,
+    first_weekday: FirstWeekday.language,
+    time_zone: TimeZone.local,
+  },
+  config: { time_zone: "Etc/UTC" },
+  states: {},
+} as unknown as HomeAssistant;
+
+const describeTimeCondition = (after?: string, before?: string) =>
+  describeCondition({ condition: "time", after, before }, hass, []);
+
+describe("time condition description", () => {
+  it("joins a window within one day with 'and'", () => {
+    expect(describeTimeCondition("09:00:00", "17:00:00")).toBe(
+      "If the time is after 09:00 and before 17:00"
+    );
+  });
+
+  it("joins a window crossing midnight with 'or'", () => {
+    expect(describeTimeCondition("22:00:00", "06:00:00")).toBe(
+      "If the time is after 22:00 or before 06:00"
+    );
+  });
+
+  it("omits a 'before' boundary of midnight, which ends the window at the end of the day", () => {
+    expect(describeTimeCondition("10:00:00", "00:00:00")).toBe(
+      "If the time is after 10:00"
+    );
+  });
+
+  it("compares times numerically, not lexicographically", () => {
+    expect(describeTimeCondition("9:00:00", "10:00:00")).toBe(
+      "If the time is after 09:00 and before 10:00"
+    );
+  });
+
+  it("does not compare entity references", () => {
+    expect(describeTimeCondition("input_datetime.wake_up", "10:00:00")).toBe(
+      "If the time is after entity input_datetime.wake_up and before 10:00"
+    );
+  });
+});

test/layouts/hass-subpage.test.ts

@@ -28,7 +28,7 @@ afterEach(() => {
 describe("hass-subpage back path", () => {
   it("links to a path on the current origin", async () => {
     const backButton = await mount("/config/system");
-    expect(backButton!.getAttribute("href")).toEqual("/config/system");
+    expect(backButton!.href).toEqual("/config/system");
   });
 
   // eslint-disable-next-line no-script-url
@@ -36,7 +36,7 @@ describe("hass-subpage back path", () => {
     "does not link to %s",
     async (backPath) => {
       const backButton = await mount(backPath);
-      expect(backButton!.hasAttribute("href")).toBe(false);
+      expect(backButton!.href).toBeUndefined();
     }
   );
 });

test/util/recover-stale-build.test.ts

@@ -0,0 +1,220 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { ShowToastParams } from "../../src/managers/notification-manager";
+import type {
+  isStaleBuildError,
+  recoverFromStaleBuild,
+} from "../../src/util/recover-stale-build";
+
+interface RecoverModule {
+  isStaleBuildError: typeof isStaleBuildError;
+  recoverFromStaleBuild: typeof recoverFromStaleBuild;
+}
+
+const STALE_URL = "/frontend_latest/core.abc12345.js";
+// Set by reloadFresh() right before it navigates; used here to observe that
+// the reload path ran without having to mock window.location (jsdom forbids
+// redefining it).
+const RELOAD_KEY = "haStaleBuildReload";
+
+describe("recover-stale-build", () => {
+  let mod: RecoverModule;
+  let root: HTMLElement;
+  let notifications: ShowToastParams[];
+  let serviceWorkerDescriptor: PropertyDescriptor | undefined;
+  let cachesDescriptor: PropertyDescriptor | undefined;
+
+  const latestNotification = () => notifications[notifications.length - 1];
+  const reloadMarker = () => sessionStorage.getItem(RELOAD_KEY);
+
+  beforeEach(async () => {
+    globalThis.__DEV__ = false;
+    globalThis.__DEMO__ = false;
+    window.isDirtyState = false;
+    sessionStorage.clear();
+
+    // No controlling service worker → reloadFresh() takes the synchronous
+    // path straight to the (jsdom no-op) navigate.
+    serviceWorkerDescriptor = Object.getOwnPropertyDescriptor(
+      navigator,
+      "serviceWorker"
+    );
+    cachesDescriptor = Object.getOwnPropertyDescriptor(window, "caches");
+    Object.defineProperty(navigator, "serviceWorker", {
+      configurable: true,
+      value: { controller: null },
+    });
+
+    // Capture toasts fired via showToast (a "hass-notification" event).
+    notifications = [];
+    root = document.createElement("home-assistant");
+    root.addEventListener("hass-notification", (event) => {
+      notifications.push((event as CustomEvent<ShowToastParams>).detail);
+    });
+    document.body.append(root);
+
+    // Fresh module state per test (resets the reloading/toastShown singletons).
+    vi.resetModules();
+    mod = await import("../../src/util/recover-stale-build");
+  });
+
+  afterEach(() => {
+    root.remove();
+    if (serviceWorkerDescriptor) {
+      Object.defineProperty(
+        navigator,
+        "serviceWorker",
+        serviceWorkerDescriptor
+      );
+    } else {
+      Reflect.deleteProperty(navigator, "serviceWorker");
+    }
+    if (cachesDescriptor) {
+      Object.defineProperty(window, "caches", cachesDescriptor);
+    } else {
+      Reflect.deleteProperty(window, "caches");
+    }
+    Reflect.deleteProperty(window, "externalApp");
+    Reflect.deleteProperty(window, "webkit");
+    window.isDirtyState = false;
+    globalThis.__DEV__ = false;
+    globalThis.__DEMO__ = false;
+  });
+
+  describe("isStaleBuildError", () => {
+    it.each([
+      "/frontend_latest/core.abc12345.js",
+      "https://ha.local/frontend_es5/panel-config.deadbeef99.js",
+      "Failed to fetch dynamically imported module: /frontend_latest/x.abcdef12.js",
+      "Importing a module script failed.",
+      "error loading dynamically imported module",
+      "ChunkLoadError: Loading chunk 5 failed",
+    ])("detects a stale-build error: %s", (message) => {
+      expect(mod.isStaleBuildError(message)).toBe(true);
+    });
+
+    it.each([
+      undefined,
+      "",
+      "/frontend_latest/core.js", // dev, unhashed
+      "/static/translations/en-abc12345.json", // hashed, but not an entry chunk
+      "TypeError: x is not a function",
+    ])("ignores non-stale input: %s", (message) => {
+      expect(mod.isStaleBuildError(message)).toBe(false);
+    });
+  });
+
+  describe("recoverFromStaleBuild", () => {
+    it("does nothing in development", () => {
+      globalThis.__DEV__ = true;
+
+      expect(mod.recoverFromStaleBuild(STALE_URL, root)).toBe(false);
+      expect(reloadMarker()).toBeNull();
+      expect(notifications).toHaveLength(0);
+    });
+
+    it("does nothing in demo", () => {
+      globalThis.__DEMO__ = true;
+
+      expect(mod.recoverFromStaleBuild(STALE_URL, root)).toBe(false);
+      expect(reloadMarker()).toBeNull();
+    });
+
+    it("ignores a non-stale error", () => {
+      expect(mod.recoverFromStaleBuild("TypeError: boom", root)).toBe(false);
+      expect(reloadMarker()).toBeNull();
+      expect(notifications).toHaveLength(0);
+    });
+
+    it("reloads onto the current build when clean", () => {
+      expect(mod.recoverFromStaleBuild(STALE_URL, root)).toBe(true);
+
+      // reloadFresh() ran (marker written before navigating) and did not toast.
+      expect(reloadMarker()).not.toBeNull();
+      expect(notifications).toHaveLength(0);
+    });
+
+    it("drops the service worker and caches before reloading", async () => {
+      const unregister = vi.fn().mockResolvedValue(true);
+      Object.defineProperty(navigator, "serviceWorker", {
+        configurable: true,
+        value: {
+          controller: {},
+          getRegistrations: vi.fn().mockResolvedValue([{ unregister }]),
+        },
+      });
+      const cacheDelete = vi.fn().mockResolvedValue(true);
+      Object.defineProperty(window, "caches", {
+        configurable: true,
+        value: {
+          keys: vi.fn().mockResolvedValue(["a", "b"]),
+          delete: cacheDelete,
+        },
+      });
+
+      expect(mod.recoverFromStaleBuild(STALE_URL, root)).toBe(true);
+
+      await vi.waitFor(() => expect(unregister).toHaveBeenCalledOnce());
+      expect(cacheDelete).toHaveBeenCalledTimes(2);
+    });
+
+    it("uses the companion-app command when the WebKit bridge is present", () => {
+      const postMessage = vi.fn();
+      (
+        window as unknown as {
+          webkit: {
+            messageHandlers: {
+              externalBus: { postMessage: typeof postMessage };
+            };
+          };
+        }
+      ).webkit = { messageHandlers: { externalBus: { postMessage } } };
+
+      expect(mod.recoverFromStaleBuild(STALE_URL, root)).toBe(true);
+
+      // Asks the native app to purge its cache and reload instead of the
+      // browser path.
+      expect(postMessage).toHaveBeenCalledOnce();
+      expect(postMessage.mock.calls[0][0]).toMatchObject({
+        type: "frontend/reload_and_clear_cache",
+      });
+      expect(notifications).toHaveLength(0);
+    });
+
+    it("defers with a toast instead of reloading when dirty", () => {
+      window.isDirtyState = true;
+
+      expect(mod.recoverFromStaleBuild(STALE_URL, root)).toBe(true);
+
+      // Took the toast branch, not the reload branch, and the toast has no
+      // immediate-reload action that could discard unsaved work.
+      expect(reloadMarker()).toBeNull();
+      expect(latestNotification()).toMatchObject({
+        id: "frontend-update-available",
+        message: {
+          translationKey: "ui.notification_toast.new_version_available_reload",
+        },
+        duration: -1,
+        dismissable: false,
+      });
+      expect(latestNotification().action).toBeUndefined();
+    });
+
+    it("does not reload again while the cooldown marker is set (loop guard)", async () => {
+      expect(mod.recoverFromStaleBuild(STALE_URL, root)).toBe(true);
+      const firstMarker = reloadMarker();
+      expect(firstMarker).not.toBeNull();
+
+      // Simulate the reloaded page: a fresh module (the in-memory reloading
+      // flag is reset) but the sessionStorage cooldown marker persists.
+      vi.resetModules();
+      const reloaded: RecoverModule =
+        await import("../../src/util/recover-stale-build");
+
+      // Blocked by the cooldown → returns false so the caller still surfaces it.
+      expect(
+        reloaded.recoverFromStaleBuild("/frontend_latest/app.def67890.js", root)
+      ).toBe(false);
+      expect(reloadMarker()).toBe(firstMarker);
+    });
+  });
+});

yarn.lock

@@ -2765,27 +2765,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@formatjs/ecma402-abstract@npm:2.3.4":
-  version: 2.3.4
-  resolution: "@formatjs/ecma402-abstract@npm:2.3.4"
-  dependencies:
-    "@formatjs/fast-memoize": "npm:2.2.7"
-    "@formatjs/intl-localematcher": "npm:0.6.1"
-    decimal.js: "npm:^10.4.3"
-    tslib: "npm:^2.8.0"
-  checksum: 10/573971ffc291096a4b9fcc80b4708124e89bf2e3ac50e0f78b41eb797e9aa1b842f4dc3665e4467a853c738386821769d9e40408a1d25bc73323a1f057a16cf2
-  languageName: node
-  linkType: hard
-
-"@formatjs/fast-memoize@npm:2.2.7":
-  version: 2.2.7
-  resolution: "@formatjs/fast-memoize@npm:2.2.7"
-  dependencies:
-    tslib: "npm:^2.8.0"
-  checksum: 10/e7e6efc677d63a13d99a854305db471b69f64cbfebdcb6dbe507dab9aa7eaae482ca5de86f343c856ca0a2c8f251672bd1f37c572ce14af602c0287378097d43
-  languageName: node
-  linkType: hard
-
 "@formatjs/fast-memoize@npm:3.1.7":
   version: 3.1.7
   resolution: "@formatjs/fast-memoize@npm:3.1.7"
@@ -2793,17 +2772,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@formatjs/icu-messageformat-parser@npm:2.11.2":
-  version: 2.11.2
-  resolution: "@formatjs/icu-messageformat-parser@npm:2.11.2"
-  dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.4"
-    "@formatjs/icu-skeleton-parser": "npm:1.8.14"
-    tslib: "npm:^2.8.0"
-  checksum: 10/e919eb2a132ac1d54fb1a7e3a3254007649b55196d3818090df92a4268dcddf20cbdf863c06039fbbe7a35a8a3f17bdc172dade99d1f17c1d8a95dcec444c3e3
-  languageName: node
-  linkType: hard
-
 "@formatjs/icu-messageformat-parser@npm:3.5.16":
   version: 3.5.16
   resolution: "@formatjs/icu-messageformat-parser@npm:3.5.16"
@@ -2813,16 +2781,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@formatjs/icu-skeleton-parser@npm:1.8.14":
-  version: 1.8.14
-  resolution: "@formatjs/icu-skeleton-parser@npm:1.8.14"
-  dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.4"
-    tslib: "npm:^2.8.0"
-  checksum: 10/2fbe3155c310358820b118d8c9844f314eff3500a82f1c65402434a3095823e1afeaab8d1762b4a59cc5679d82dc4c8c134683565d7cdae4daace23251f46a47
-  languageName: node
-  linkType: hard
-
 "@formatjs/icu-skeleton-parser@npm:2.1.11":
   version: 2.1.11
   resolution: "@formatjs/icu-skeleton-parser@npm:2.1.11"
@@ -2885,15 +2843,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@formatjs/intl-localematcher@npm:0.6.1":
-  version: 0.6.1
-  resolution: "@formatjs/intl-localematcher@npm:0.6.1"
-  dependencies:
-    tslib: "npm:^2.8.0"
-  checksum: 10/c7b3bc8395d18670677f207b2fd107561fff5d6394a9b4273c29e0bea920300ec3a2eefead600ebb7761c04a770cada28f78ac059f84d00520bfb57a9db36998
-  languageName: node
-  linkType: hard
-
 "@formatjs/intl-localematcher@npm:0.8.13":
   version: 0.8.13
   resolution: "@formatjs/intl-localematcher@npm:0.8.13"
@@ -2941,24 +2890,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@formatjs/intl@npm:3.1.6":
-  version: 3.1.6
-  resolution: "@formatjs/intl@npm:3.1.6"
-  dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.4"
-    "@formatjs/fast-memoize": "npm:2.2.7"
-    "@formatjs/icu-messageformat-parser": "npm:2.11.2"
-    intl-messageformat: "npm:10.7.16"
-    tslib: "npm:^2.8.0"
-  peerDependencies:
-    typescript: ^5.6.0
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 10/10ebdce088898ad7de59c10890f7c02fa9f5aa50518ed3fae7e0ae1c392f3973da00464d2a42229cce97916c2eff1e41630e95c18bab01713d2b6ef5c7fd80c1
-  languageName: node
-  linkType: hard
-
 "@fullcalendar/core@npm:6.1.21":
   version: 6.1.21
   resolution: "@fullcalendar/core@npm:6.1.21"
@@ -7570,15 +7501,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chart2music@npm:^1.20.0":
-  version: 1.20.0
-  resolution: "chart2music@npm:1.20.0"
-  dependencies:
-    "@formatjs/intl": "npm:3.1.6"
-  checksum: 10/ed421708740e3644a72356c9f313d3bcb7cac26d94a7fb209fa4bc8f9bc24061ed63f98da89277684e71f9402b5414cd45bb60f01c01e576803ba3dca755f4ba
-  languageName: node
-  linkType: hard
-
 "chokidar@npm:^3.5.3":
   version: 3.6.0
   resolution: "chokidar@npm:3.6.0"
@@ -8176,7 +8098,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"decimal.js@npm:^10.4.3, decimal.js@npm:^10.6.0":
+"decimal.js@npm:^10.6.0":
   version: 10.6.0
   resolution: "decimal.js@npm:10.6.0"
   checksum: 10/c0d45842d47c311d11b38ce7ccc911121953d4df3ebb1465d92b31970eb4f6738a065426a06094af59bee4b0d64e42e7c8984abd57b6767c64ea90cf90bb4a69
@@ -8442,17 +8364,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"echarts-extension-chart2music@npm:0.1.0":
-  version: 0.1.0
-  resolution: "echarts-extension-chart2music@npm:0.1.0"
-  dependencies:
-    chart2music: "npm:^1.20.0"
-  peerDependencies:
-    echarts: ">=5.0.0 <7"
-  checksum: 10/55a82c770355228b2a899007e488e5b60171cbaf5d83363a298c4214d9e4a5df1afd1c7805495f42f2ad6edd7c062c8b366f1f8ba7b1a902f2db7eb47fbfcccf
-  languageName: node
-  linkType: hard
-
 "echarts@npm:6.1.0":
   version: 6.1.0
   resolution: "echarts@npm:6.1.0"
@@ -10067,7 +9978,6 @@ __metadata:
     del: "npm:8.0.1"
     dialog-polyfill: "npm:0.5.6"
     echarts: "npm:6.1.0"
-    echarts-extension-chart2music: "npm:0.1.0"
     element-internals-polyfill: "npm:3.0.2"
     eslint: "npm:10.8.1"
     eslint-config-prettier: "npm:10.1.8"
@@ -10439,18 +10349,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"intl-messageformat@npm:10.7.16":
-  version: 10.7.16
-  resolution: "intl-messageformat@npm:10.7.16"
-  dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.4"
-    "@formatjs/fast-memoize": "npm:2.2.7"
-    "@formatjs/icu-messageformat-parser": "npm:2.11.2"
-    tslib: "npm:^2.8.0"
-  checksum: 10/c19b77c5e495ce8b0d1aa0d95444bf3a4f73886805f1e08d7159b364abcf2f63686b2ccf202eaafb0e39a0e9fde61848b8dd2db1679efd4f6ec8f6a3d0e77928
-  languageName: node
-  linkType: hard
-
 "intl-messageformat@npm:11.2.13":
   version: 11.2.13
   resolution: "intl-messageformat@npm:11.2.13"