Show per-mount storage usage on the storage page

Each active mount now fetches its own usage from the Supervisor and renders
a bar with a used-of-total line under its address. The requests are not
awaited, so a slow or unreachable server cannot hold up the rows, and a
failed one simply leaves that row without usage.

fetchHostDisksUsage now takes a disk and an optional max_depth. The data
disk callers keep their depth of 3; mounts send no depth at all, since
walking one costs a round trip per directory and the Supervisor already
has a sensible per-target default.

.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/codeql-analysis.yaml

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

.github/workflows/e2e.yaml

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

.github/workflows/nightly.yaml

@@ -38,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/bundle-budget.json

@@ -1,15 +1,15 @@
 {
   "_comment": "Initial JS budget (raw/uncompressed bytes) for the cold-load critical entrypoints. Enforced by build-scripts/check-bundle-size.cjs in CI. Re-seed after an intentional change with `--update --headroom=<percent>`.",
   "frontend-modern": {
-    "app": 595204,
-    "core": 57741,
-    "authorize": 576928,
-    "onboarding": 685964
+    "app": 585518,
+    "core": 57048,
+    "authorize": 552423,
+    "onboarding": 666818
   },
   "frontend-legacy": {
-    "app": 861452,
-    "core": 258557,
-    "authorize": 834356,
-    "onboarding": 1001360
+    "app": 887384,
+    "core": 244482,
+    "authorize": 844995,
+    "onboarding": 1008816
   }
 }

build-scripts/bundle.cjs

@@ -277,7 +277,7 @@ module.exports.config = {
     };
   },
 
-  gallery({ isProdBuild, latestBuild }) {
+  gallery({ isProdBuild, latestBuild, isTestBuild }) {
     return {
       name: "gallery" + nameSuffix(latestBuild),
       entry: {
@@ -287,6 +287,7 @@ module.exports.config = {
       publicPath: publicPath(latestBuild),
       isProdBuild,
       latestBuild,
+      isTestBuild,
       defineOverlay: {
         __DEMO__: true,
       },

build-scripts/gulp/rspack.js

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

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,
     },
@@ -405,8 +489,10 @@ const createDemoConfig = ({
 const createCastConfig = ({ isProdBuild, latestBuild }) =>
   createRspackConfig(bundle.config.cast({ isProdBuild, latestBuild }));
 
-const createGalleryConfig = ({ isProdBuild, latestBuild }) =>
-  createRspackConfig(bundle.config.gallery({ isProdBuild, latestBuild }));
+const createGalleryConfig = ({ isProdBuild, latestBuild, isTestBuild }) =>
+  createRspackConfig(
+    bundle.config.gallery({ isProdBuild, latestBuild, isTestBuild })
+  );
 
 const createLandingPageConfig = ({ isProdBuild, latestBuild }) =>
   createRspackConfig(bundle.config.landingPage({ isProdBuild, latestBuild }));

demo/src/stubs/devices.ts

@@ -14,6 +14,7 @@ const baseDevice = {
   name_by_user: null,
   disabled_by: null,
   configuration_url: null,
+  parent_device_id: null,
   created_at: 0,
   modified_at: 0,
 };
@@ -50,4 +51,39 @@ export const demoDevices: DeviceRegistryEntry[] = [
     primary_config_entry: "mock-sonos",
     entry_type: null,
   },
+  {
+    ...baseDevice,
+    id: "power-strip",
+    name: "Power strip",
+    manufacturer: "Acme",
+    model: "Smart Power Strip",
+    config_entries: ["mock-hue"],
+    primary_config_entry: "mock-hue",
+    entry_type: null,
+  },
+  // Child devices (logical parts of the power strip). They carry the parent's
+  // inherited hardware fields, mirroring how resolveChildDevices fills them in
+  // from the WebSocket, and reference the parent via parent_device_id.
+  {
+    ...baseDevice,
+    id: "power-strip-outlet-1",
+    name: "Outlet 1",
+    manufacturer: "Acme",
+    model: "Smart Power Strip",
+    config_entries: ["mock-hue"],
+    primary_config_entry: "mock-hue",
+    entry_type: null,
+    parent_device_id: "power-strip",
+  },
+  {
+    ...baseDevice,
+    id: "power-strip-outlet-2",
+    name: "Outlet 2",
+    manufacturer: "Acme",
+    model: "Smart Power Strip",
+    config_entries: ["mock-hue"],
+    primary_config_entry: "mock-hue",
+    entry_type: null,
+    parent_device_id: "power-strip",
+  },
 ];

demo/src/stubs/energy.ts

@@ -102,6 +102,11 @@ export const mockEnergy = (hass: MockHomeAssistant) => {
     cost_sensors: {},
     solar_forecast_domains: [],
   }));
+  hass.mockWS("energy/validate", () => ({
+    energy_sources: Array.from({ length: 6 }, () => []),
+    device_consumption: Array.from({ length: 6 }, () => []),
+    device_consumption_water: Array.from({ length: 2 }, () => []),
+  }));
   hass.mockWS(
     "energy/fossil_energy_consumption",
     ({ period }): FossilEnergyConsumption => ({

demo/src/stubs/sensor.ts

@@ -1,6 +1,12 @@
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockSensor = (hass: MockHomeAssistant) => {
+  hass.mockWS(
+    "sensor/device_class_convertible_units",
+    ({ device_class }: { device_class: string }) => ({
+      units: device_class === "energy" ? ["kWh"] : ["W"],
+    })
+  );
   hass.mockWS("sensor/numeric_device_classes", () => ({
     numeric_device_classes: [
       "volume_storage",

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`

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

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

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

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

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

@@ -100,6 +100,7 @@ const DEVICES: DeviceRegistryEntry[] = [
     created_at: 0,
     modified_at: 0,
     primary_config_entry: null,
+    parent_device_id: null,
   },
   {
     area_id: "backyard",
@@ -124,6 +125,7 @@ const DEVICES: DeviceRegistryEntry[] = [
     created_at: 0,
     modified_at: 0,
     primary_config_entry: null,
+    parent_device_id: null,
   },
   {
     area_id: null,
@@ -148,6 +150,85 @@ const DEVICES: DeviceRegistryEntry[] = [
     created_at: 0,
     modified_at: 0,
     primary_config_entry: null,
+    parent_device_id: null,
+  },
+  {
+    area_id: "livingroom",
+    configuration_url: null,
+    config_entries: ["config_entry_1"],
+    config_entries_subentries: {},
+    connections: [],
+    disabled_by: null,
+    entry_type: null,
+    id: "device_power_strip",
+    identifiers: [["demo", "strip1"] as [string, string]],
+    manufacturer: "Acme",
+    model: "Smart Power Strip",
+    model_id: null,
+    name_by_user: null,
+    name: "Power strip",
+    sw_version: null,
+    hw_version: null,
+    via_device_id: null,
+    serial_number: null,
+    labels: [],
+    created_at: 0,
+    modified_at: 0,
+    primary_config_entry: null,
+    parent_device_id: null,
+  },
+  // Child devices of the power strip. They have no area of their own and
+  // inherit the parent's area ("Livingroom"); the picker renders them indented
+  // under the parent with a tree connector.
+  {
+    area_id: null,
+    configuration_url: null,
+    config_entries: ["config_entry_1"],
+    config_entries_subentries: {},
+    connections: [],
+    disabled_by: null,
+    entry_type: null,
+    id: "device_outlet_1",
+    identifiers: [["demo", "outlet1"] as [string, string]],
+    manufacturer: "Acme",
+    model: "Smart Power Strip",
+    model_id: null,
+    name_by_user: null,
+    name: "Outlet 1",
+    sw_version: null,
+    hw_version: null,
+    via_device_id: null,
+    serial_number: null,
+    labels: [],
+    created_at: 0,
+    modified_at: 0,
+    primary_config_entry: null,
+    parent_device_id: "device_power_strip",
+  },
+  {
+    area_id: null,
+    configuration_url: null,
+    config_entries: ["config_entry_1"],
+    config_entries_subentries: {},
+    connections: [],
+    disabled_by: null,
+    entry_type: null,
+    id: "device_outlet_2",
+    identifiers: [["demo", "outlet2"] as [string, string]],
+    manufacturer: "Acme",
+    model: "Smart Power Strip",
+    model_id: null,
+    name_by_user: null,
+    name: "Outlet 2",
+    sw_version: null,
+    hw_version: null,
+    via_device_id: null,
+    serial_number: null,
+    labels: [],
+    created_at: 0,
+    modified_at: 0,
+    primary_config_entry: null,
+    parent_device_id: "device_power_strip",
   },
 ];
 

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

@@ -132,12 +132,12 @@ const ENTITIES = [
       fan_modes: ["on_low", "on_high", "auto_low", "auto_high", "off"],
       preset_modes: ["home", "eco", "away"],
       swing_modes: ["auto", "1", "2", "3", "off"],
-      switch_horizontal_modes: ["auto", "4", "5", "6", "off"],
       current_temperature: 23,
       target_temp_high: 24,
       target_temp_low: 21,
       fan_mode: "auto_low",
       preset_mode: "home",
+      swing_horizontal_modes: ["auto", "4", "5", "6", "off"],
       swing_mode: "auto",
       swing_horizontal_mode: "off",
       supported_features:
@@ -340,6 +340,84 @@ const CONFIGS = [
       features: [{ type: "fan-oscillate" }],
     },
   },
+  {
+    heading: "Inline features: one feature",
+    config: {
+      type: "tile",
+      entity: "climate.dual_thermostat",
+      features_position: "inline",
+      features: [{ type: "climate-hvac-modes", style: "dropdown" }],
+    },
+  },
+  {
+    heading: "Inline features: two features",
+    config: {
+      type: "tile",
+      entity: "climate.dual_thermostat",
+      features_position: "inline",
+      features: [
+        { type: "climate-hvac-modes", style: "dropdown" },
+        { type: "climate-preset-modes", style: "dropdown" },
+      ],
+    },
+  },
+  {
+    heading: "Inline features: three features",
+    config: {
+      type: "tile",
+      entity: "climate.dual_thermostat",
+      features_position: "inline",
+      features: [
+        { type: "climate-hvac-modes", style: "dropdown" },
+        { type: "climate-preset-modes", style: "dropdown" },
+        { type: "climate-fan-modes", style: "dropdown" },
+      ],
+    },
+  },
+  {
+    heading: "Inline features: four features",
+    config: {
+      type: "tile",
+      entity: "climate.dual_thermostat",
+      features_position: "inline",
+      features: [
+        { type: "climate-hvac-modes", style: "dropdown" },
+        { type: "climate-preset-modes", style: "dropdown" },
+        { type: "climate-fan-modes", style: "dropdown" },
+        { type: "climate-swing-modes", style: "dropdown" },
+      ],
+    },
+  },
+  {
+    heading: "Inline features: five features",
+    config: {
+      type: "tile",
+      entity: "climate.dual_thermostat",
+      features_position: "inline",
+      features: [
+        { type: "climate-hvac-modes", style: "dropdown" },
+        { type: "climate-preset-modes", style: "dropdown" },
+        { type: "climate-fan-modes", style: "dropdown" },
+        { type: "climate-swing-modes", style: "dropdown" },
+        { type: "climate-swing-horizontal-modes", style: "dropdown" },
+      ],
+    },
+  },
+  {
+    heading: "Bottom features: five features",
+    config: {
+      type: "tile",
+      entity: "climate.dual_thermostat",
+      features_position: "bottom",
+      features: [
+        { type: "climate-hvac-modes", style: "dropdown" },
+        { type: "climate-preset-modes", style: "dropdown" },
+        { type: "climate-fan-modes", style: "dropdown" },
+        { type: "climate-swing-modes", style: "dropdown" },
+        { type: "climate-swing-horizontal-modes", style: "dropdown" },
+      ],
+    },
+  },
 ] satisfies DemoCardConfig<TileCardConfig>[];
 
 @customElement("demo-lovelace-tile-card")

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

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

gallery/src/pages/more-info/vacuum.ts

@@ -15,7 +15,6 @@ const ALL_FEATURES =
   VacuumEntityFeature.STOP +
   VacuumEntityFeature.RETURN_HOME +
   VacuumEntityFeature.FAN_SPEED +
-  VacuumEntityFeature.BATTERY +
   VacuumEntityFeature.STATUS +
   VacuumEntityFeature.LOCATE +
   VacuumEntityFeature.CLEAN_SPOT +
@@ -28,8 +27,6 @@ const ENTITIES = [
     attributes: {
       friendly_name: "Full featured vacuum",
       supported_features: ALL_FEATURES,
-      battery_level: 85,
-      battery_icon: "mdi:battery-80",
       fan_speed: "balanced",
       fan_speed_list: ["silent", "standard", "balanced", "turbo", "max"],
       status: "Charged",
@@ -41,8 +38,6 @@ const ENTITIES = [
     attributes: {
       friendly_name: "Cleaning vacuum",
       supported_features: ALL_FEATURES,
-      battery_level: 62,
-      battery_icon: "mdi:battery-60",
       fan_speed: "turbo",
       fan_speed_list: ["silent", "standard", "balanced", "turbo", "max"],
       status: "Cleaning bedroom",
@@ -58,10 +53,7 @@ const ENTITIES = [
         VacuumEntityFeature.START +
         VacuumEntityFeature.PAUSE +
         VacuumEntityFeature.STOP +
-        VacuumEntityFeature.RETURN_HOME +
-        VacuumEntityFeature.BATTERY,
-      battery_level: 23,
-      battery_icon: "mdi:battery-20",
+        VacuumEntityFeature.RETURN_HOME,
       status: "Returning to dock",
     },
   },
@@ -96,8 +88,6 @@ const ENTITIES = [
     attributes: {
       friendly_name: "Paused vacuum",
       supported_features: ALL_FEATURES,
-      battery_level: 45,
-      battery_icon: "mdi:battery-40",
       fan_speed: "standard",
       fan_speed_list: ["silent", "standard", "balanced", "turbo", "max"],
       status: "Paused",

package.json

@@ -101,10 +101,9 @@
     "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",
+    "hls.js": "1.7.0",
     "home-assistant-js-websocket": "9.6.0",
     "idb-keyval": "6.3.0",
     "intl-messageformat": "11.2.13",
@@ -152,8 +151,8 @@
     "@octokit/plugin-retry": "8.1.1",
     "@octokit/rest": "22.0.1",
     "@playwright/test": "1.62.1",
-    "@rsdoctor/rspack-plugin": "1.6.1",
-    "@rspack/core": "2.1.8",
+    "@rsdoctor/rspack-plugin": "1.6.2",
+    "@rspack/core": "2.1.10",
     "@rspack/dev-server": "2.2.0",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.26",
@@ -187,7 +186,7 @@
     "fs-extra": "11.4.0",
     "generate-license-file": "4.2.1",
     "glob": "13.0.6",
-    "globals": "17.9.0",
+    "globals": "17.11.0",
     "gulp": "5.0.1",
     "gulp-json-transform": "0.5.0",
     "gulp-rename": "2.1.0",
@@ -211,7 +210,7 @@
     "terser-webpack-plugin": "5.6.1",
     "ts-lit-plugin": "2.0.2",
     "typescript": "6.0.3",
-    "typescript-eslint": "8.66.0",
+    "typescript-eslint": "8.67.0",
     "vite-tsconfig-paths": "6.1.1",
     "vitest": "4.1.10",
     "webpack-stats-plugin": "1.1.3",
@@ -224,7 +223,6 @@
     "clean-css": "5.3.3",
     "@lit/reactive-element": "2.1.2",
     "@fullcalendar/daygrid": "6.1.21",
-    "globals": "17.9.0",
     "tslib": "2.8.1",
     "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"
   },

src/common/datetime/format_time.ts

@@ -39,6 +39,25 @@ const formatTimeWithSecondsMem = memoizeOne(
     })
 );
 
+// 9:15:24.123 PM || 21:15:24,123
+export const formatTimeWithMilliseconds = (
+  dateObj: Date,
+  locale: FrontendLocaleData,
+  config: HassConfig
+) => formatTimeWithMillisecondsMem(locale, config.time_zone).format(dateObj);
+
+const formatTimeWithMillisecondsMem = memoizeOne(
+  (locale: FrontendLocaleData, serverTimeZone: string) =>
+    new Intl.DateTimeFormat(locale.language, {
+      hour: useAmPm(locale) ? "numeric" : "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      fractionalSecondDigits: 3,
+      hourCycle: useAmPm(locale) ? "h12" : "h23",
+      timeZone: resolveTimeZone(locale.time_zone, serverTimeZone),
+    })
+);
+
 // Tuesday 7:00 PM || Tuesday 19:00
 export const formatTimeWeekday = (
   dateObj: Date,

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/entity/context/get_device_context.ts

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

src/common/entity/context/get_entity_context.ts

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

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/common/url/more-info-query-params.ts

@@ -0,0 +1,64 @@
+import {
+  isMoreInfoView,
+  type MoreInfoView,
+} from "../../dialogs/more-info/more-info-view";
+import type { SearchParamsSource } from "./query-params";
+
+const ENTITY_ID_PARAM = "more-info-entity-id";
+const VIEW_PARAM = "more-info-view";
+
+export interface MoreInfoUrlData {
+  entityId?: string;
+  view?: MoreInfoView;
+  hash: URLSearchParams;
+}
+
+export interface CreateMoreInfoUrlData {
+  entityId: string;
+  view: MoreInfoView;
+  hash?: URLSearchParams;
+}
+
+export const decodeMoreInfoUrl = (
+  search: SearchParamsSource,
+  hash = ""
+): MoreInfoUrlData => {
+  const params =
+    typeof search === "string"
+      ? new URLSearchParams(search)
+      : search instanceof URLSearchParams
+        ? search
+        : new URLSearchParams(search);
+  const entityId = params.get(ENTITY_ID_PARAM) || undefined;
+  const view = params.get(VIEW_PARAM) || undefined;
+
+  return {
+    entityId,
+    view: isMoreInfoView(view) ? view : undefined,
+    hash: new URLSearchParams(
+      __DEMO__ ? "" : hash.startsWith("#") ? hash.substring(1) : hash
+    ),
+  };
+};
+
+export const createMoreInfoUrl = (
+  base: string,
+  data: CreateMoreInfoUrlData
+): string => {
+  const url = new URL(base, window.location.origin);
+  url.searchParams.set(ENTITY_ID_PARAM, data.entityId);
+  url.searchParams.set(VIEW_PARAM, data.view);
+  if (!__DEMO__ && data.hash !== undefined) {
+    url.hash = data.hash.toString();
+  }
+
+  return `${url.pathname}${url.search}${url.hash}`;
+};
+
+export const removeMoreInfoUrl = (base: string): string => {
+  const url = new URL(base, window.location.origin);
+  url.searchParams.delete(ENTITY_ID_PARAM);
+  url.searchParams.delete(VIEW_PARAM);
+
+  return `${url.pathname}${url.search}${url.hash}`;
+};

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/data-table/ha-data-table.ts

@@ -117,7 +117,7 @@ export class HaDataTable extends LitElement {
   @consume({ context: internationalizationContext, subscribe: true })
   private _i18n?: ContextType<typeof internationalizationContext>;
 
-  @property({ type: Boolean }) public narrow = false;
+  @property({ type: Boolean, reflect: true }) public narrow = false;
 
   @property({ type: Object }) public columns: DataTableColumnContainer = {};
 
@@ -1158,6 +1158,11 @@ export class HaDataTable extends LitElement {
         /* default mdc styles, colors changed, without checkbox styles */
         :host {
           height: 100%;
+          --_cell-padding-inline: 16px;
+        }
+
+        :host([narrow]) {
+          --_cell-padding-inline: 8px;
         }
         .mdc-data-table__content {
           font-family: var(--ha-font-family-body);
@@ -1238,8 +1243,7 @@ export class HaDataTable extends LitElement {
 
         .mdc-data-table__cell,
         .mdc-data-table__header-cell {
-          padding-right: 16px;
-          padding-left: 16px;
+          padding-inline: var(--_cell-padding-inline);
           min-width: 150px;
           align-self: center;
           overflow: hidden;
@@ -1259,14 +1263,8 @@ export class HaDataTable extends LitElement {
 
         .mdc-data-table__header-cell--checkbox,
         .mdc-data-table__cell--checkbox {
-          /* @noflip */
-          padding-left: 16px;
-          /* @noflip */
-          padding-right: 0;
-          /* @noflip */
-          padding-inline-start: 16px;
-          /* @noflip */
-          padding-inline-end: initial;
+          padding-inline-start: var(--_cell-padding-inline);
+          padding-inline-end: 0;
           width: 60px;
           min-width: 60px;
         }
@@ -1379,8 +1377,7 @@ export class HaDataTable extends LitElement {
         .mdc-data-table__header-cell--overflow-menu:first-child,
         .mdc-data-table__header-cell--icon-button:first-child,
         .mdc-data-table__cell--icon-button:first-child {
-          padding-left: 16px;
-          padding-inline-start: 16px;
+          padding-inline-start: var(--_cell-padding-inline);
           padding-inline-end: initial;
         }
 
@@ -1388,8 +1385,7 @@ export class HaDataTable extends LitElement {
         .mdc-data-table__header-cell--overflow-menu:last-child,
         .mdc-data-table__header-cell--icon-button:last-child,
         .mdc-data-table__cell--icon-button:last-child {
-          padding-right: 16px;
-          padding-inline-end: 16px;
+          padding-inline-end: var(--_cell-padding-inline);
           padding-inline-start: initial;
         }
         .mdc-data-table__cell--overflow-menu,
@@ -1516,11 +1512,17 @@ export class HaDataTable extends LitElement {
         .center {
           text-align: center;
         }
+        .primary {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
         .secondary {
           color: var(--secondary-text-color);
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
+          margin-top: 2px;
         }
         .scroller {
           height: calc(100% - 57px);

src/components/date-picker/styles.ts

@@ -8,6 +8,7 @@ export const datePickerStyles = css`
   }
   calendar-date::part(button),
   calendar-range::part(button) {
+    color: var(--primary-text-color);
     border: none;
     background-color: unset;
     border-radius: var(--ha-border-radius-circle);

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

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

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

@@ -3,11 +3,13 @@ import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeAreaName } from "../../common/entity/compute_area_name";
 import { computeDeviceName } from "../../common/entity/compute_device_name";
 import { getDeviceArea } from "../../common/entity/context/get_device_context";
+import { computeRTL } from "../../common/util/compute_rtl";
 import { getConfigEntries, type ConfigEntry } from "../../data/config_entries";
 import {
   deviceComboBoxKeys,
@@ -26,7 +28,9 @@ import "../ha-alert";
 import "../ha-button";
 import "../ha-generic-picker";
 import type { HaGenericPicker } from "../ha-generic-picker";
+import type { PickerComboBoxSearchFn } from "../ha-picker-combo-box";
 import "../ha-svg-icon";
+import "../ha-tree-indicator";
 import { showDeviceReplacedDialog } from "./show-dialog-device-replaced";
 
 export type HaDevicePickerDeviceFilterFunc = (
@@ -128,6 +132,7 @@ export class HaDevicePicker extends LitElement {
         entityFilter,
         excludeDevices,
         value,
+        nested: true,
       })
   );
 
@@ -216,6 +221,34 @@ export class HaDevicePicker extends LitElement {
       this.value
     );
 
+  // The fuzzy search ranks matches by relevance, which would pull a child device
+  // above its parent (the parent often only matches through the lower-weighted
+  // child names). Restore the nested order from the full item list and recompute
+  // which child is last, so the tree connectors stay correct while searching.
+  private _searchFn: PickerComboBoxSearchFn<DevicePickerItem> = (
+    _search,
+    filteredItems,
+    allItems
+  ) => {
+    const matchedIds = new Set(filteredItems.map((item) => item.id));
+    const ordered = allItems.filter((item) => matchedIds.has(item.id));
+    // Keep any items the search added that are not part of the nested list
+    // (for example the "no items available" placeholder or additional items).
+    const orderedIds = new Set(ordered.map((item) => item.id));
+    const extras = filteredItems.filter((item) => !orderedIds.has(item.id));
+
+    return [
+      ...ordered.map((item, index) => {
+        if (!item.is_child) {
+          return item;
+        }
+        const nextItem = ordered[index + 1];
+        return { ...item, last: !nextItem || !nextItem.is_child };
+      }),
+      ...extras,
+    ];
+  };
+
   private _valueRenderer = memoizeOne(
     (
       configEntriesLookup: Record<string, ConfigEntry>,
@@ -242,7 +275,7 @@ export class HaDevicePicker extends LitElement {
           return html`<span slot="headline">${deviceId}</span>`;
         }
 
-        const area = getDeviceArea(device, this.hass.areas);
+        const area = getDeviceArea(device, this.hass.areas, this.hass.devices);
 
         const deviceName = device ? computeDeviceName(device) : undefined;
         const areaName = area ? computeAreaName(area) : undefined;
@@ -279,46 +312,76 @@ export class HaDevicePicker extends LitElement {
       }
   );
 
-  private _rowRenderer: RenderItemFunction<DevicePickerItem> = (item) => html`
-    <ha-combo-box-item type="button">
-      ${
-        item.domain
-          ? html`
-              <img
+  private _rowRenderer: RenderItemFunction<DevicePickerItem> = (item) => {
+    const rtl = computeRTL(
+      this.hass.language,
+      this.hass.translationMetadata.translations
+    );
+    return html`
+      <ha-combo-box-item
+        type="button"
+        style=${
+          item.is_child
+            ? "--md-list-item-leading-space: var(--ha-space-12);"
+            : ""
+        }
+      >
+        ${
+          item.is_child
+            ? html`<ha-tree-indicator
+                style=${styleMap({
+                  width: "var(--ha-space-12)",
+                  position: "absolute",
+                  top: "0",
+                  height: "100%",
+                  left: rtl ? undefined : "var(--ha-space-1)",
+                  right: rtl ? "var(--ha-space-1)" : undefined,
+                  transform: rtl ? "scaleX(-1)" : "",
+                })}
+                .end=${item.last}
                 slot="start"
-                alt=""
-                crossorigin="anonymous"
-                referrerpolicy="no-referrer"
-                src=${brandsUrl(
-                  {
-                    domain: item.domain,
-                    type: "icon",
-                    darkOptimized: this.hass.themes.darkMode,
-                  },
-                  this.hass.auth.data.hassUrl
-                )}
-              />
-            `
-          : nothing
-      }
+              ></ha-tree-indicator>`
+            : nothing
+        }
+        ${
+          item.domain
+            ? html`
+                <img
+                  slot="start"
+                  alt=""
+                  crossorigin="anonymous"
+                  referrerpolicy="no-referrer"
+                  src=${brandsUrl(
+                    {
+                      domain: item.domain,
+                      type: "icon",
+                      darkOptimized: this.hass.themes.darkMode,
+                    },
+                    this.hass.auth.data.hassUrl
+                  )}
+                />
+              `
+            : nothing
+        }
 
-      <span slot="headline">${item.primary}</span>
-      ${
-        item.secondary
-          ? html`<span slot="supporting-text">${item.secondary}</span>`
-          : nothing
-      }
-      ${
-        item.domain_name
-          ? html`
-              <div slot="trailing-supporting-text" class="domain">
-                ${item.domain_name}
-              </div>
-            `
-          : nothing
-      }
-    </ha-combo-box-item>
-  `;
+        <span slot="headline">${item.primary}</span>
+        ${
+          item.secondary
+            ? html`<span slot="supporting-text">${item.secondary}</span>`
+            : nothing
+        }
+        ${
+          item.domain_name
+            ? html`
+                <div slot="trailing-supporting-text" class="domain">
+                  ${item.domain_name}
+                </div>
+              `
+            : nothing
+        }
+      </ha-combo-box-item>
+    `;
+  };
 
   protected render() {
     const placeholder =
@@ -375,6 +438,8 @@ export class HaDevicePicker extends LitElement {
         .value=${this.value}
         .rowRenderer=${this._rowRenderer}
         .getItems=${this._getItems}
+        .searchFn=${this._searchFn}
+        no-sort
         .hideClearIcon=${this.hideClearIcon}
         .valueRenderer=${valueRenderer}
         .searchKeys=${deviceComboBoxKeys}

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

@@ -34,6 +34,8 @@ export class HaButtonToggleGroup extends LitElement {
   @property({ type: Boolean, reflect: true, attribute: "full-width" })
   public fullWidth = false;
 
+  @property({ type: Boolean }) public disabled = false;
+
   @property() public variant:
     "brand" | "neutral" | "success" | "warning" | "danger" = "brand";
 
@@ -57,6 +59,7 @@ export class HaButtonToggleGroup extends LitElement {
               .value=${button.value}
               @click=${this._handleClick}
               .title=${button.label}
+              .disabled=${this.disabled}
               .appearance=${this.active === button.value ? "accent" : "filled"}
             >
               ${

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-control-select.ts

@@ -143,7 +143,8 @@ export class HaControlSelect extends LitElement {
             ? repeat(
                 this.options,
                 (option) => option.value,
-                (option) => this._renderOption(option)
+                (option, index) =>
+                  this._renderOption(option, index === this._tabbableIndex)
               )
             : nothing
         }
@@ -151,7 +152,14 @@ export class HaControlSelect extends LitElement {
     `;
   }
 
-  private _renderOption(option: ControlSelectOption) {
+  /* a radio group with no selection puts its first option in the tab sequence */
+  private get _tabbableIndex() {
+    const selectedIndex =
+      this.options?.findIndex((option) => option.value === this.value) ?? -1;
+    return selectedIndex === -1 ? 0 : selectedIndex;
+  }
+
+  private _renderOption(option: ControlSelectOption, tabbable: boolean) {
     const isSelected = this.value === option.value;
 
     return html`
@@ -162,7 +170,7 @@ export class HaControlSelect extends LitElement {
           selected: isSelected,
         })}
         role="radio"
-        tabindex=${isSelected ? "0" : "-1"}
+        tabindex=${tabbable ? "0" : "-1"}
         .value=${option.value}
         aria-checked=${isSelected ? "true" : "false"}
         aria-label=${ifDefined(option.ariaLabel ?? option.label)}

src/components/ha-duration-input.ts

@@ -68,6 +68,7 @@ export class HaDurationInput extends LitElement {
                     { label: "-", iconPath: mdiMinusThick, value: "-" },
                   ]}
                   .active=${this._negative ? "-" : "+"}
+                  .disabled=${this.disabled}
                   @value-changed=${this._negativeChanged}
                 ></ha-button-toggle-group>
               `
@@ -235,8 +236,8 @@ export class HaDurationInput extends LitElement {
     ev.stopPropagation();
     const negative = (ev.detail?.value || ev.target.value) === "-";
     this._toggleNegative = negative;
-    const value = this.data;
-    if (value) {
+    if (this.data) {
+      const value = { ...this.data };
       FIELDS.forEach((t) => {
         if (value[t]) {
           value[t] = negative ? -Math.abs(value[t]) : Math.abs(value[t]);

src/components/ha-form/get-selector-fallback-value.ts

@@ -0,0 +1,25 @@
+import { DEFAULT_MIN_KELVIN } from "../../common/color/convert-light-color";
+import type { Selector } from "../../data/selector";
+
+/**
+ * Value a selector already displays when no field value is set.
+ * Used when enabling an optional service/trigger/condition field.
+ */
+export const getSelectorFallbackValue = (selector: Selector): unknown => {
+  if ("constant" in selector) {
+    return selector.constant?.value;
+  }
+  if ("boolean" in selector) {
+    return false;
+  }
+  if ("number" in selector) {
+    return selector.number?.min ?? 0;
+  }
+  if ("color_temp" in selector) {
+    if (selector.color_temp?.unit === "kelvin") {
+      return selector.color_temp.min ?? DEFAULT_MIN_KELVIN;
+    }
+    return selector.color_temp?.min ?? selector.color_temp?.min_mireds ?? 153;
+  }
+  return undefined;
+};

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/ha-selector/ha-selector-choose.ts

@@ -81,6 +81,7 @@ export class HaChooseSelector extends LitElement {
         .required=${this.required}
         @value-changed=${this._handleValueChanged}
         .helper=${this.helper}
+        .localizeValue=${this.localizeValue}
       ></ha-selector>`;
   }
 
@@ -107,7 +108,12 @@ export class HaChooseSelector extends LitElement {
         : {
             [this._activeChoice!]: this.value,
           };
-    this._activeChoice = ev.detail?.value || ev.target.value;
+    const choice = ev.detail?.value || ev.target.value;
+    this._activeChoice = choice;
+    if (choice && "constant" in this.selector.choose.choices[choice].selector) {
+      value[choice] =
+        this.selector.choose.choices[choice].selector.constant?.value;
+    }
     fireEvent(this, "value-changed", {
       value: {
         ...value,

src/components/ha-service-control.ts

@@ -35,6 +35,7 @@ import {
 } from "../data/selector";
 import type { HomeAssistant, ValueChangedEvent } from "../types";
 import { documentationUrl } from "../util/documentation-url";
+import { getSelectorFallbackValue } from "./ha-form/get-selector-fallback-value";
 import "./ha-checkbox";
 import type { HaCheckbox } from "./ha-checkbox";
 import "./ha-icon-button";
@@ -799,20 +800,8 @@ export class HaServiceControl extends LitElement {
 
       let defaultValue = field?.default;
 
-      if (
-        defaultValue == null &&
-        field?.selector &&
-        "constant" in field.selector
-      ) {
-        defaultValue = field.selector.constant?.value;
-      }
-
-      if (
-        defaultValue == null &&
-        field?.selector &&
-        "boolean" in field.selector
-      ) {
-        defaultValue = false;
+      if (defaultValue == null && field?.selector) {
+        defaultValue = getSelectorFallbackValue(field.selector);
       }
 
       if (defaultValue != null) {

src/components/ha-sidebar.ts

@@ -664,6 +664,7 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
           display: flex;
           flex-direction: column;
           overflow: hidden;
+          overscroll-behavior: contain;
           -ms-user-select: none;
           -webkit-user-select: none;
           -moz-user-select: none;

src/components/ha-target-picker.ts

@@ -28,6 +28,7 @@ import {
   type DevicePickerItem,
 } from "../data/device/device_picker";
 import {
+  devicesInEffectiveArea,
   fetchDeviceCompositeSplits,
   type DeviceCompositeSplits,
 } from "../data/device/device_registry";
@@ -158,6 +159,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
         excludeDevices,
         value,
         idPrefix,
+        nested: true,
       })
   );
 
@@ -682,9 +684,10 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
         }
       });
     } else if (type === "area") {
-      Object.values(this.hass.devices).forEach((device) => {
+      // Splitting an area yields its effective-area devices, so a child device
+      // that belongs to a different area is not pulled into this area.
+      devicesInEffectiveArea(this.hass.devices, itemId).forEach((device) => {
         if (
-          device.area_id === itemId &&
           !this.value!.device_id?.includes(device.id) &&
           deviceMeetsFilter(
             device,
@@ -716,9 +719,18 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
         }
       });
     } else if (type === "device") {
+      // Splitting a device into entities includes its child devices' entities,
+      // since targeting the device would target its children too.
+      const deviceIds = new Set([
+        itemId,
+        ...Object.values(this.hass.devices)
+          .filter((device) => device.parent_device_id === itemId)
+          .map((device) => device.id),
+      ]);
       Object.values(this.hass.entities).forEach((entity) => {
         if (
-          entity.device_id === itemId &&
+          entity.device_id &&
+          deviceIds.has(entity.device_id) &&
           !this.value!.entity_id?.includes(entity.entity_id) &&
           entityRegMeetsFilter(
             entity,
@@ -1001,6 +1013,28 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
       }
 
       if (!filterType || filterType === "device") {
+        const selectedDeviceIds = targetValue?.device_id
+          ? replacingDeviceId
+            ? ensureArray(targetValue.device_id).filter(
+                (deviceId) => deviceId !== replacingDeviceId
+              )
+            : ensureArray(targetValue.device_id)
+          : undefined;
+        // A selected parent device already targets its children, so exclude
+        // those children from the picker too (mirrors selecting a floor
+        // removing its areas from the list).
+        const excludeDeviceIds = selectedDeviceIds
+          ? [
+              ...selectedDeviceIds,
+              ...Object.values(this.hass.devices)
+                .filter(
+                  (device) =>
+                    device.parent_device_id !== null &&
+                    selectedDeviceIds.includes(device.parent_device_id)
+                )
+                .map((device) => device.id),
+            ]
+          : undefined;
         let deviceItems = this._getDevicesMemoized(
           this.hass,
           configEntryLookup,
@@ -1008,26 +1042,41 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
           includeDeviceClasses,
           deviceFilter,
           entityFilter,
-          targetValue?.device_id
-            ? replacingDeviceId
-              ? ensureArray(targetValue.device_id).filter(
-                  (deviceId) => deviceId !== replacingDeviceId
-                )
-              : ensureArray(targetValue.device_id)
-            : undefined,
+          excludeDeviceIds,
           replacingDeviceId,
           `device${SEPARATOR}`
-        ).sort(this._sortBySortingLabel);
+        );
+        // getDevices already returns child devices nested under their parent
+        // with the top-level devices sorted; keep that order rather than
+        // re-sorting by label, which would separate children from their parent.
 
         if (searchTerm) {
+          // Keep the nested parent-then-children order (sort=false), matching
+          // the areas group; the default sorted search would reorder matches by
+          // relevance and pull children above their parent.
           deviceItems = this._filterGroup(
             "device",
             deviceItems,
             searchTerm,
-            deviceComboBoxKeys
+            deviceComboBoxKeys,
+            false
           );
         }
 
+        // Recompute the tree "last child" flag over the (possibly filtered)
+        // list so the last visible child of each parent draws its end connector.
+        deviceItems = deviceItems.map((item, index) => {
+          if (!(item as DevicePickerItem).is_child) {
+            return item;
+          }
+          const nextItem = deviceItems[index + 1] as
+            DevicePickerItem | undefined;
+          return {
+            ...item,
+            last: !nextItem || !nextItem.is_child,
+          };
+        });
+
         if (!filterType && deviceItems.length) {
           // show group title
           items.push(localize("ui.components.target-picker.type.devices"));
@@ -1245,7 +1294,9 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     let hasFloor = false;
     let rtl = false;
     let showEntityId = false;
-    if (type === "area" || type === "floor") {
+    const isChildDeviceRow =
+      type === "device" && !!(item as DevicePickerItem).is_child;
+    if (type === "area" || type === "floor" || isChildDeviceRow) {
       rtl = computeRTL(
         this.hass.language,
         this.hass.translationMetadata.translations
@@ -1265,27 +1316,27 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
         .type=${type === "empty" ? "text" : "button"}
         class=${type === "empty" ? "empty" : ""}
         style=${
-          (item as FloorComboBoxItem).type === "area" && hasFloor
+          ((item as FloorComboBoxItem).type === "area" && hasFloor) ||
+          isChildDeviceRow
             ? "--md-list-item-leading-space: var(--ha-space-12);"
             : ""
         }
       >
         ${
-          (item as FloorComboBoxItem).type === "area" && hasFloor
+          ((item as FloorComboBoxItem).type === "area" && hasFloor) ||
+          isChildDeviceRow
             ? html`
                 <ha-tree-indicator
                   style=${styleMap({
                     width: "var(--ha-space-12)",
                     position: "absolute",
                     top: "0",
+                    height: "100%",
                     left: rtl ? undefined : "var(--ha-space-1)",
                     right: rtl ? "var(--ha-space-1)" : undefined,
                     transform: rtl ? "scaleX(-1)" : "",
                   })}
-                  .end=${
-                    (item as FloorComboBoxItem & { last?: boolean | undefined })
-                      .last
-                  }
+                  .end=${(item as { last?: boolean }).last}
                   slot="start"
                 ></ha-tree-indicator>
               `

src/components/ha-tree-indicator.ts

@@ -8,10 +8,31 @@ export class HaTreeIndicator extends LitElement {
   public end?: boolean = false;
 
   protected render(): TemplateResult {
+    // preserveAspectRatio="none" lets the connector stretch to the host box, so
+    // it can span the full height of a taller row instead of being letterboxed
+    // to a square in the middle. non-scaling-stroke keeps the line width and
+    // dash pattern identical no matter how far it is stretched.
     return html`
-      <svg width="100%" height="100%" viewBox="0 0 48 48">
-        <line x1="24" y1="0" x2="24" y2=${this.end ? "24" : "48"}></line>
-        <line x1="24" y1="24" x2="36" y2="24"></line>
+      <svg
+        width="100%"
+        height="100%"
+        viewBox="0 0 48 48"
+        preserveAspectRatio="none"
+      >
+        <line
+          x1="24"
+          y1="0"
+          x2="24"
+          y2=${this.end ? "24" : "48"}
+          vector-effect="non-scaling-stroke"
+        ></line>
+        <line
+          x1="24"
+          y1="24"
+          x2="36"
+          y2="24"
+          vector-effect="non-scaling-stroke"
+        ></line>
       </svg>
     `;
   }

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

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

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

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

src/components/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>
             `
@@ -396,6 +393,9 @@ export class HaTargetPickerItemRow extends LitElement {
               nextEntries.referenced_entities =
                 entries?.referenced_entities.filter((entity_id) => {
                   const entity = this.hass.entities[entity_id];
+                  if (!entity) {
+                    return false;
+                  }
                   return (
                     entity.area_id === rowItem ||
                     !entity.device_id ||
@@ -419,6 +419,9 @@ export class HaTargetPickerItemRow extends LitElement {
       this.type === "label" && entries
         ? entries.referenced_entities.filter((entity_id) => {
             const entity = this.hass.entities[entity_id];
+            if (!entity) {
+              return false;
+            }
             return (
               entity.labels.includes(this.itemId) &&
               !entries.referenced_devices.includes(entity.device_id || "")
@@ -427,7 +430,7 @@ export class HaTargetPickerItemRow extends LitElement {
         : nextType === "device" && entries
           ? entries.referenced_entities.filter(
               (entity_id) =>
-                this.hass.entities[entity_id].area_id === this.itemId
+                this.hass.entities[entity_id]?.area_id === this.itemId
             )
           : [];
 
@@ -436,7 +439,7 @@ export class HaTargetPickerItemRow extends LitElement {
         ? entries.referenced_devices.filter(
             (device_id) =>
               !devicesInAreas.includes(device_id) &&
-              this.hass.devices[device_id].labels.includes(this.itemId)
+              this.hass.devices[device_id]?.labels.includes(this.itemId)
           )
         : [];
 
@@ -531,6 +534,12 @@ export class HaTargetPickerItemRow extends LitElement {
         entries.referenced_areas = entries.referenced_areas.filter(
           (area_id) => {
             const area = this.hass.areas[area_id];
+            // Absent from the registry is not a filter decision: drop the id
+            // without marking it hidden, so entities targeted through their
+            // own area or label are not dropped along with it.
+            if (!area) {
+              return false;
+            }
             if (
               (this.type === "floor" || area.labels.includes(this.itemId)) &&
               areaMeetsFilter(
@@ -563,6 +572,9 @@ export class HaTargetPickerItemRow extends LitElement {
         entries.referenced_devices = entries.referenced_devices.filter(
           (device_id) => {
             const device = this.hass.devices[device_id];
+            if (!device) {
+              return false;
+            }
             if (
               !hiddenAreaIds.includes(device.area_id || "") &&
               deviceMeetsFilter(
@@ -588,6 +600,11 @@ export class HaTargetPickerItemRow extends LitElement {
       entries.referenced_entities = entries.referenced_entities.filter(
         (entity_id) => {
           const entity = this.hass.entities[entity_id];
+          // Core can reference entities that are absent from the display
+          // registry (e.g. disabled ones expanded from an area).
+          if (!entity) {
+            return false;
+          }
           if (hiddenDeviceIds.includes(entity.device_id || "")) {
             return false;
           }
@@ -812,7 +829,6 @@ export class HaTargetPickerItemRow extends LitElement {
   };
 
   static styles = [
-    buttonLinkStyle,
     css`
       :host {
         --md-list-item-top-space: 0;
@@ -883,16 +899,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/components/tile/ha-tile-container.ts

@@ -1,5 +1,5 @@
 import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
 import { stopPropagation } from "../../common/dom/stop_propagation";
@@ -25,6 +25,13 @@ export class HaTileContainer extends LitElement {
   @property({ attribute: false })
   public actionHandlerOptions?: ActionHandlerOptions;
 
+  @state() private _hasFeatures = false;
+
+  private _handleFeaturesSlotChange(ev: Event) {
+    this._hasFeatures =
+      (ev.target as HTMLSlotElement).assignedElements().length > 0;
+  }
+
   private _handleFocus(ev: FocusEvent) {
     if ((ev.target as HTMLElement).matches(":focus-visible")) {
       this.setAttribute("focused", "");
@@ -36,8 +43,12 @@ export class HaTileContainer extends LitElement {
   }
 
   protected render() {
-    const containerOrientationClass =
-      this.featurePosition === "inline" ? "horizontal" : "";
+    const isInline = this.featurePosition === "inline";
+    const containerClasses = {
+      inline: isInline,
+      "has-features-below": isInline && this._hasFeatures,
+      "fixed-height": this.fixedInfoHeight,
+    };
     const contentClasses = {
       vertical: this.vertical,
       "fixed-info-height": this.fixedInfoHeight,
@@ -56,15 +67,21 @@ export class HaTileContainer extends LitElement {
         <ha-ripple .disabled=${!this.interactive}></ha-ripple>
       </div>
       <div
-        class="container ${containerOrientationClass}"
+        class="container ${classMap(containerClasses)}"
         @action=${stopPropagation}
         @click=${stopPropagation}
       >
-        <div class="content ${classMap(contentClasses)}">
-          <slot name="icon"></slot>
-          <slot name="info" id="info"></slot>
+        <div class="row">
+          <div class="content ${classMap(contentClasses)}">
+            <slot name="icon"></slot>
+            <slot name="info" id="info"></slot>
+          </div>
+          <slot name="features-inline"></slot>
         </div>
-        <slot name="features"></slot>
+        <slot
+          name="features"
+          @slotchange=${this._handleFeaturesSlotChange}
+        ></slot>
       </div>
     `;
   }
@@ -97,7 +114,13 @@ export class HaTileContainer extends LitElement {
       flex-direction: column;
       flex: 1;
     }
-    .container.horizontal {
+    .row {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      min-width: 0;
+    }
+    .container.inline .row {
       flex-direction: row;
     }
 
@@ -153,13 +176,30 @@ export class HaTileContainer extends LitElement {
       padding: 0 var(--ha-space-3) var(--ha-space-3) var(--ha-space-3);
     }
 
-    .container.horizontal ::slotted([slot="features"]) {
+    .container.inline ::slotted([slot="features-inline"]) {
+      /* size the feature on the 6 column grid track, so it lines up with neighbouring tiles */
       width: calc(50% - var(--column-gap, 0px) / 2 - var(--ha-space-3));
       flex: none;
-      --feature-height: var(--ha-space-9);
       padding: 0 var(--ha-space-3);
       padding-inline-start: 0;
     }
+    /* the inline feature keeps the icon height, unless the card reserves a row it can fill */
+    .container.inline:not(.has-features-below)
+      ::slotted([slot="features-inline"]),
+    .container.inline:not(.fixed-height) ::slotted([slot="features-inline"]) {
+      --feature-height: var(--ha-space-9);
+    }
+
+    .container.inline.has-features-below ::slotted([slot="features"]) {
+      /* keep both columns under the inline feature, which sits on the grid track */
+      --ha-card-feature-column-gap: calc(
+        var(--column-gap, 0px) + var(--ha-space-3) * 2
+      );
+      --ha-card-feature-divider: 1px solid var(--ha-color-border-neutral-quiet);
+      --ha-card-feature-divider-inset: calc(
+        var(--ha-space-3) + var(--column-gap, 0px) / 2
+      );
+    }
     [role="button"] {
       cursor: pointer;
       pointer-events: auto;

src/components/trace/ha-trace-logbook.ts

@@ -29,6 +29,7 @@ export class HaTraceLogbook extends LitElement {
             .hass=${this.hass}
             .entries=${this.logbookEntries}
             .narrow=${this.narrow}
+            no-detail
           ></ha-logbook-renderer>
           <hat-logbook-note .domain=${this.trace.domain}></hat-logbook-note>
         `

src/components/trace/ha-trace-path-details.ts

@@ -437,6 +437,7 @@ export class HaTracePathDetails extends LitElement {
             .hass=${this.hass}
             .entries=${entries}
             .narrow=${this.narrow}
+            no-detail
           ></ha-logbook-renderer>
           <hat-logbook-note .domain=${this.trace.domain}></hat-logbook-note>
         `

src/data/automation_i18n.ts

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

@@ -3,6 +3,7 @@ import { computeDeviceNameDisplay } from "../../common/entity/compute_device_nam
 import { computeDomain } from "../../common/entity/compute_domain";
 import { getDeviceArea } from "../../common/entity/context/get_device_context";
 import type { LocalizeFunc } from "../../common/translations/localize";
+import { caseInsensitiveStringCompare } from "../../common/string/compare";
 import { computeRTL } from "../../common/util/compute_rtl";
 import type { HaDevicePickerDeviceFilterFunc } from "../../components/device/ha-device-picker";
 import type { PickerComboBoxItem } from "../../components/ha-picker-combo-box";
@@ -24,12 +25,17 @@ import {
 export interface DevicePickerItem extends PickerComboBoxItem {
   domain?: string;
   domain_name?: string;
+  // Set when this device is a child rendered indented under its parent.
+  is_child?: boolean;
+  // Set on the last child of a parent so the tree connector draws its end.
+  last?: boolean;
 }
 
 export interface DeviceAreaLabel {
   areaName?: string;
   viaDeviceName?: string;
   viaDeviceAreaName?: string;
+  parentDeviceName?: string;
 }
 
 export interface GetDevicesOptions {
@@ -41,6 +47,10 @@ export interface GetDevicesOptions {
   excludeDevices?: string[];
   value?: string;
   idPrefix?: string;
+  // When set, order the result so children directly follow their parent and
+  // flag them for indented rendering. Requires the picker to disable its own
+  // sorting (no-sort) so this order is preserved.
+  nested?: boolean;
 }
 
 export const computeDeviceAreaLabel = (
@@ -53,7 +63,8 @@ export const computeDeviceAreaLabel = (
   translationMetadata: HomeAssistant["translationMetadata"],
   viaDeviceEntities?: EntityRegistryEntry[] | EntityRegistryDisplayEntry[]
 ): DeviceAreaLabel => {
-  const area = getDeviceArea(device, areas);
+  // Pass devices so a child device inherits its parent's area.
+  const area = getDeviceArea(device, areas, devices);
 
   const viaDevice = device.via_device_id
     ? devices[device.via_device_id]
@@ -61,11 +72,23 @@ export const computeDeviceAreaLabel = (
   const viaDeviceName = viaDevice
     ? computeDeviceNameDisplay(viaDevice, localize, states, viaDeviceEntities)
     : undefined;
-  const viaDeviceArea = viaDevice ? getDeviceArea(viaDevice, areas) : undefined;
+  const viaDeviceArea = viaDevice
+    ? getDeviceArea(viaDevice, areas, devices)
+    : undefined;
   const viaDeviceAreaName = viaDeviceArea
     ? computeAreaName(viaDeviceArea)
     : undefined;
 
+  // A child device is a logical part of its parent. We surface the parent name
+  // only as a search term (below) — not in the area label, which stays the pure
+  // (inherited) area. The nested tree rendering communicates the relationship.
+  const parentDevice = device.parent_device_id
+    ? devices[device.parent_device_id]
+    : undefined;
+  const parentDeviceName = parentDevice
+    ? computeDeviceNameDisplay(parentDevice, localize, states)
+    : undefined;
+
   const isRTL = computeRTL(language, translationMetadata.translations);
 
   const areaName = area
@@ -74,7 +97,7 @@ export const computeDeviceAreaLabel = (
       ? `${viaDeviceAreaName}${isRTL ? " ◂ " : " ▸ "}${viaDeviceName}`
       : viaDeviceName || undefined;
 
-  return { areaName, viaDeviceName, viaDeviceAreaName };
+  return { areaName, viaDeviceName, viaDeviceAreaName, parentDeviceName };
 };
 
 export const deviceComboBoxKeys: FuseWeightedKey[] = [
@@ -102,6 +125,14 @@ export const deviceComboBoxKeys: FuseWeightedKey[] = [
     name: "search_labels.viaDeviceArea",
     weight: 3,
   },
+  {
+    name: "search_labels.parentDeviceName",
+    weight: 3,
+  },
+  {
+    name: "search_labels.childDeviceNames",
+    weight: 3,
+  },
 ];
 
 export const getDevices = (
@@ -118,6 +149,7 @@ export const getDevices = (
     excludeDevices,
     value,
     idPrefix = "",
+    nested,
   } = options ?? {};
 
   const devices = Object.values(hass.devices);
@@ -125,26 +157,60 @@ export const getDevices = (
 
   let deviceEntityLookup: DeviceEntityDisplayLookup = {};
 
-  if (
-    includeDomains ||
-    excludeDomains ||
-    includeDeviceClasses ||
-    entityFilter
-  ) {
+  const filtersEntities =
+    includeDomains || excludeDomains || includeDeviceClasses || entityFilter;
+
+  if (filtersEntities) {
     deviceEntityLookup = getDeviceEntityDisplayLookup(entities);
   }
 
+  // Targeting a device also targets its child devices (a parent inherits its
+  // children's entities), so a device should match an entity-based filter when
+  // it OR any of its children has a matching entity. Build a parent -> children
+  // map and resolve each device's effective entity set accordingly. Nesting is
+  // single-level, so one hop covers it.
+  const filterChildrenByParent = new Map<string, DeviceRegistryEntry[]>();
+  if (filtersEntities) {
+    for (const device of devices) {
+      if (device.parent_device_id) {
+        const siblings = filterChildrenByParent.get(device.parent_device_id);
+        if (siblings) {
+          siblings.push(device);
+        } else {
+          filterChildrenByParent.set(device.parent_device_id, [device]);
+        }
+      }
+    }
+  }
+  const effectiveEntities = (
+    deviceId: string
+  ): EntityRegistryDisplayEntry[] => {
+    const own = deviceEntityLookup[deviceId] ?? [];
+    const children = filterChildrenByParent.get(deviceId);
+    if (!children) {
+      return own;
+    }
+    const combined = [...own];
+    for (const child of children) {
+      const childEntities = deviceEntityLookup[child.id];
+      if (childEntities) {
+        combined.push(...childEntities);
+      }
+    }
+    return combined;
+  };
+
   let inputDevices = devices.filter(
     (device) => device.id === value || !device.disabled_by
   );
 
   if (includeDomains) {
     inputDevices = inputDevices.filter((device) => {
-      const devEntities = deviceEntityLookup[device.id];
-      if (!devEntities || !devEntities.length) {
+      const devEntities = effectiveEntities(device.id);
+      if (!devEntities.length) {
         return false;
       }
-      return deviceEntityLookup[device.id].some((entity) =>
+      return devEntities.some((entity) =>
         includeDomains.includes(computeDomain(entity.entity_id))
       );
     });
@@ -152,11 +218,11 @@ export const getDevices = (
 
   if (excludeDomains) {
     inputDevices = inputDevices.filter((device) => {
-      const devEntities = deviceEntityLookup[device.id];
-      if (!devEntities || !devEntities.length) {
+      const devEntities = effectiveEntities(device.id);
+      if (!devEntities.length) {
         return true;
       }
-      return entities.every(
+      return devEntities.every(
         (entity) => !excludeDomains.includes(computeDomain(entity.entity_id))
       );
     });
@@ -170,11 +236,11 @@ export const getDevices = (
 
   if (includeDeviceClasses) {
     inputDevices = inputDevices.filter((device) => {
-      const devEntities = deviceEntityLookup[device.id];
-      if (!devEntities || !devEntities.length) {
+      const devEntities = effectiveEntities(device.id);
+      if (!devEntities.length) {
         return false;
       }
-      return deviceEntityLookup[device.id].some((entity) => {
+      return devEntities.some((entity) => {
         const stateObj = hass.states[entity.entity_id];
         if (!stateObj) {
           return false;
@@ -189,8 +255,8 @@ export const getDevices = (
 
   if (entityFilter) {
     inputDevices = inputDevices.filter((device) => {
-      const devEntities = deviceEntityLookup[device.id];
-      if (!devEntities || !devEntities.length) {
+      const devEntities = effectiveEntities(device.id);
+      if (!devEntities.length) {
         return false;
       }
       return devEntities.some((entity) => {
@@ -219,7 +285,7 @@ export const getDevices = (
       deviceEntityLookup[device.id]
     );
 
-    const { areaName, viaDeviceName, viaDeviceAreaName } =
+    const { areaName, viaDeviceName, viaDeviceAreaName, parentDeviceName } =
       computeDeviceAreaLabel(
         device,
         hass.areas,
@@ -256,10 +322,79 @@ export const getDevices = (
         domainName: domainName || null,
         viaDeviceName: viaDeviceName || null,
         viaDeviceArea: viaDeviceAreaName || null,
+        parentDeviceName: parentDeviceName || null,
       },
       sorting_label: [primary, areaName, domainName].filter(Boolean).join("_"),
     };
   });
 
-  return outputDevices;
+  if (!nested) {
+    return outputDevices;
+  }
+
+  // Order children directly after their parent and flag them for indented
+  // rendering. outputDevices is 1:1 with inputDevices, so we can pair them up.
+  const itemByDeviceId = new Map<string, DevicePickerItem>();
+  inputDevices.forEach((device, index) => {
+    itemByDeviceId.set(device.id, outputDevices[index]);
+  });
+  const presentIds = new Set(inputDevices.map((device) => device.id));
+
+  const childrenByParent = new Map<string, DeviceRegistryEntry[]>();
+  const topLevel: DeviceRegistryEntry[] = [];
+  for (const device of inputDevices) {
+    const parentId = device.parent_device_id;
+    // A child whose parent was filtered out is shown as a top-level row.
+    if (parentId && presentIds.has(parentId)) {
+      const siblings = childrenByParent.get(parentId);
+      if (siblings) {
+        siblings.push(device);
+      } else {
+        childrenByParent.set(parentId, [device]);
+      }
+    } else {
+      topLevel.push(device);
+    }
+  }
+
+  const compareByName = (a: DeviceRegistryEntry, b: DeviceRegistryEntry) =>
+    caseInsensitiveStringCompare(
+      itemByDeviceId.get(a.id)!.primary,
+      itemByDeviceId.get(b.id)!.primary,
+      hass.locale.language
+    );
+
+  topLevel.sort(compareByName);
+
+  const ordered: DevicePickerItem[] = [];
+  for (const device of topLevel) {
+    const parentItem = itemByDeviceId.get(device.id)!;
+    const children = childrenByParent.get(device.id);
+    if (children) {
+      children.sort(compareByName);
+      // Add the children's names to the parent's search terms so a search that
+      // matches a child keeps the parent visible (mirrors how a floor stays
+      // visible when one of its areas matches).
+      ordered.push({
+        ...parentItem,
+        search_labels: {
+          ...parentItem.search_labels,
+          childDeviceNames: children
+            .map((child) => itemByDeviceId.get(child.id)!.primary)
+            .join(" "),
+        },
+      });
+      children.forEach((child, index) => {
+        ordered.push({
+          ...itemByDeviceId.get(child.id)!,
+          is_child: true,
+          last: index === children.length - 1,
+        });
+      });
+    } else {
+      ordered.push(parentItem);
+    }
+  }
+
+  return ordered;
 };

src/data/device/device_registry.ts

@@ -15,6 +15,13 @@ export {
   subscribeDeviceRegistry,
 } from "../ws-device_registry";
 
+export type DeviceDisabler =
+  | "user"
+  | "integration"
+  | "config_entry"
+  // The device's parent device is disabled (child devices only).
+  | "device";
+
 export interface DeviceRegistryEntry extends RegistryEntry {
   id: string;
   config_entries: string[];
@@ -33,11 +40,116 @@ export interface DeviceRegistryEntry extends RegistryEntry {
   area_id: string | null;
   name_by_user: string | null;
   entry_type: "service" | null;
-  disabled_by: "user" | "integration" | "config_entry" | null;
+  disabled_by: DeviceDisabler | null;
   configuration_url: string | null;
   primary_config_entry: string | null;
+  // Set when this device is a child (logical part) of another device.
+  // null for regular top-level devices.
+  parent_device_id: string | null;
 }
 
+/**
+ * A child device as it arrives over the wire from
+ * `config/device_registry/list`. A child is a lightweight logical part of a
+ * parent device (e.g. an outlet of a power strip); it only carries its own
+ * fields and inherits the rest from its parent. It is never stored in
+ * `hass.devices` in this shape — {@link resolveChildDevices} turns every child
+ * into a complete {@link DeviceRegistryEntry} at ingestion, so downstream code
+ * only ever sees full device entries.
+ */
+export interface ChildDeviceRegistryEntry extends RegistryEntry {
+  id: string;
+  config_entry_id: string;
+  config_subentry_id: string | null;
+  identifiers: [string, string][];
+  name: string | null;
+  name_by_user: string | null;
+  labels: string[];
+  area_id: string | null;
+  disabled_by: DeviceDisabler | null;
+  parent_device_id: string;
+}
+
+/**
+ * The raw, mixed list returned by `config/device_registry/list`: full devices
+ * and stripped children, discriminated by the presence of full-device fields.
+ */
+export type DeviceRegistryListEntry =
+  DeviceRegistryEntry | ChildDeviceRegistryEntry;
+
+/** Whether a resolved device entry is a child (logical part) of another device. */
+export const isChildDevice = (device: DeviceRegistryEntry): boolean =>
+  device.parent_device_id !== null;
+
+/**
+ * Devices whose effective area is the given area: devices with that area, and
+ * child devices that inherit it because they have no area of their own. Mirrors
+ * core's dr.async_entries_for_area, so a child device with a different explicit
+ * area is not part of its parent's area.
+ */
+export const devicesInEffectiveArea = (
+  devices: Record<string, DeviceRegistryEntry>,
+  areaId: string
+): DeviceRegistryEntry[] =>
+  Object.values(devices).filter((device) => {
+    if (device.area_id) {
+      return device.area_id === areaId;
+    }
+    if (device.parent_device_id) {
+      return devices[device.parent_device_id]?.area_id === areaId;
+    }
+    return false;
+  });
+
+export interface DeviceRowItem {
+  device: DeviceRegistryEntry;
+  isChild: boolean;
+  // True for the last child of a parent, so the tree connector draws its end.
+  isLastChild: boolean;
+}
+
+/**
+ * Order a flat device list so each child directly follows its parent, flagging
+ * children for indented rendering. The incoming order of the top-level devices
+ * (and of the children within each parent) is preserved. A child whose parent
+ * is not in the list is treated as a top-level device.
+ */
+export const groupDevicesByParent = (
+  devices: DeviceRegistryEntry[]
+): DeviceRowItem[] => {
+  const presentIds = new Set(devices.map((device) => device.id));
+  const childrenByParent = new Map<string, DeviceRegistryEntry[]>();
+  const topLevel: DeviceRegistryEntry[] = [];
+
+  for (const device of devices) {
+    const parentId = device.parent_device_id;
+    if (parentId && presentIds.has(parentId)) {
+      const siblings = childrenByParent.get(parentId);
+      if (siblings) {
+        siblings.push(device);
+      } else {
+        childrenByParent.set(parentId, [device]);
+      }
+    } else {
+      topLevel.push(device);
+    }
+  }
+
+  const result: DeviceRowItem[] = [];
+  for (const device of topLevel) {
+    result.push({ device, isChild: false, isLastChild: false });
+    const children = childrenByParent.get(device.id) ?? [];
+    children.forEach((child, index) => {
+      result.push({
+        device: child,
+        isChild: true,
+        isLastChild: index === children.length - 1,
+      });
+    });
+  }
+  return result;
+};
+
 export type DeviceEntityDisplayLookup = Record<
   string,
   EntityRegistryDisplayEntry[]
@@ -146,15 +258,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/data/energy.ts

@@ -22,6 +22,7 @@ import {
 import type { DateRange } from "../common/datetime/calc_date_range";
 import { calcDateRange } from "../common/datetime/calc_date_range";
 import { formatTime24h } from "../common/datetime/format_time";
+import { DEFAULT_ENTITY_NAME } from "../common/entity/compute_entity_name_display";
 import { formatNumber } from "../common/number/format_number";
 import { normalizeValueBySIPrefix } from "../common/number/normalize-by-si-prefix";
 import { groupBy } from "../common/util/group-by";
@@ -36,6 +37,7 @@ import type {
 import {
   fetchStatistics,
   getDisplayUnit,
+  getStatisticLabel,
   getStatisticMetadata,
   VOLUME_UNITS,
 } from "./recorder";
@@ -311,6 +313,59 @@ export interface EnergySourceByType {
 export const energySourcesByType = (prefs: EnergyPreferences) =>
   groupBy(prefs.energy_sources, (item) => item.type) as EnergySourceByType;
 
+/**
+ * Display name of a configured statistic. A name set by the user always wins;
+ * otherwise the entity is named the same way the rest of the UI names
+ * entities, so devices sharing an entity name stay distinguishable.
+ * Statistics without an entity (external or removed) keep the statistic label.
+ */
+export const computeEnergyLabel = (
+  hass: HomeAssistant,
+  statisticId: string,
+  statisticsMetaData?: StatisticsMetaData,
+  customName?: string
+): string => {
+  if (customName) {
+    return customName;
+  }
+
+  const stateObj = hass.states[statisticId];
+
+  if (stateObj) {
+    return hass.formatEntityName(stateObj, DEFAULT_ENTITY_NAME);
+  }
+
+  return getStatisticLabel(hass, statisticId, statisticsMetaData);
+};
+
+/**
+ * Device labels keyed by statistic id. Cards that show live power or flow
+ * key their nodes by `stat_rate` instead of `stat_consumption`; devices
+ * without the requested statistic are left out.
+ */
+export const computeEnergyDeviceLabels = (
+  hass: HomeAssistant,
+  devices: DeviceConsumptionEnergyPreference[],
+  statsMetadata?: Record<string, StatisticsMetaData>,
+  statisticKey: "stat_consumption" | "stat_rate" = "stat_consumption"
+): Record<string, string> => {
+  const labels: Record<string, string> = {};
+
+  for (const device of devices) {
+    const statisticId = device[statisticKey];
+    if (statisticId) {
+      labels[statisticId] = computeEnergyLabel(
+        hass,
+        statisticId,
+        statsMetadata?.[statisticId],
+        device.name
+      );
+    }
+  }
+
+  return labels;
+};
+
 export interface EnergyData {
   start: Date;
   end?: Date;

src/data/hassio/host.ts

@@ -126,11 +126,18 @@ export const listDatadisks = async (
     timeout: null,
   });
 
-export const fetchHostDisksUsage = async (hass: HomeAssistant) =>
+// `disk` is "default" for the data disk, or a mount name. Omitting maxDepth
+// leaves the depth to the Supervisor, which defaults per target — walking a
+// mount costs a round trip per directory, so mounts want no depth at all.
+export const fetchHostDisksUsage = async (
+  hass: HomeAssistant,
+  disk = "default",
+  maxDepth?: number
+) =>
   hass.callWS<HostDisksUsage>({
     type: "supervisor/api",
-    endpoint: "/host/disks/default/usage",
+    endpoint: `/host/disks/${disk}/usage`,
     method: "get",
     timeout: 3600, // seconds. This can take a while
-    params: { max_depth: 3 },
+    ...(maxDepth === undefined ? {} : { params: { max_depth: maxDepth } }),
   });

src/data/logbook.ts

@@ -76,7 +76,7 @@ export const getLogbookDataForContext = async (
 ): Promise<LogbookEntry[]> =>
   getLogbookDataFromServer(hass, startDate, undefined, undefined, contextId);
 
-const getLogbookDataFromServer = (
+export const getLogbookDataFromServer = (
   hass: HomeAssistant,
   startDate: string,
   endDate?: string,

src/data/lovelace/config/types.ts

@@ -2,12 +2,15 @@ import type { Connection } from "home-assistant-js-websocket";
 import type { HomeAssistant } from "../../../types";
 import type { LovelaceResource } from "../resource";
 import type { LovelaceStrategyConfig } from "./strategy";
-import type { LovelaceViewRawConfig } from "./view";
+import type {
+  LovelaceDashboardBackgroundConfig,
+  LovelaceViewRawConfig,
+} from "./view";
 
 export interface LovelaceDashboardBaseConfig {}
 
 export interface LovelaceConfig extends LovelaceDashboardBaseConfig {
-  background?: string;
+  background?: LovelaceDashboardBackgroundConfig;
   views: LovelaceViewRawConfig[];
 }
 

src/data/lovelace/config/view.ts

@@ -31,6 +31,9 @@ export interface LovelaceViewBackgroundConfig {
   attachment?: "scroll" | "fixed";
 }
 
+export type LovelaceDashboardBackgroundConfig =
+  string | LovelaceViewBackgroundConfig;
+
 export interface LovelaceViewHeaderConfig {
   card?: LovelaceCardConfig;
   layout?: "start" | "center" | "responsive";
@@ -60,7 +63,7 @@ export interface LovelaceBaseViewConfig {
   show_icon_and_title?: boolean;
   theme?: string;
   panel?: boolean;
-  background?: string | LovelaceViewBackgroundConfig;
+  background?: LovelaceDashboardBackgroundConfig;
   visible?: boolean | ShowViewConfig[];
   subview?: boolean;
   back_path?: string;

src/data/selector.ts

@@ -14,6 +14,7 @@ import type {
 import type { HomeAssistant } from "../types";
 import {
   type DeviceRegistryEntry,
+  devicesInEffectiveArea,
   getDeviceIntegrationLookup,
 } from "./device/device_registry";
 import type {
@@ -726,9 +727,10 @@ export const expandAreaTarget = (
 ) => {
   const newEntities: string[] = [];
   const newDevices: string[] = [];
-  Object.values(devices).forEach((device) => {
+  // Devices of an area are its effective-area members: a child device inheriting
+  // this area counts, a child with a different explicit area does not.
+  devicesInEffectiveArea(devices, areaId).forEach((device) => {
     if (
-      device.area_id === areaId &&
       deviceMeetsTargetSelector(
         hass.states,
         Object.values(entities),
@@ -790,9 +792,8 @@ export const areaMeetsTargetSelector = (
   targetSelector: TargetSelector,
   entitySources?: EntitySources
 ): boolean => {
-  const hasMatchingdevice = Object.values(devices).some((device) => {
-    if (
-      device.area_id === areaId &&
+  const hasMatchingdevice = devicesInEffectiveArea(devices, areaId).some(
+    (device) =>
       deviceMeetsTargetSelector(
         hass.states,
         Object.values(entities),
@@ -800,11 +801,7 @@ export const areaMeetsTargetSelector = (
         targetSelector,
         entitySources
       )
-    ) {
-      return true;
-    }
-    return false;
-  });
+  );
   if (hasMatchingdevice) {
     return true;
   }
@@ -846,6 +843,8 @@ export const deviceMeetsTargetSelector = (
     }
   }
   if (targetSelector.target?.entity) {
+    // Only the device's own entities: a child device is reached through the
+    // device target itself, so a parent must not match on a child's behalf.
     const entities = entityRegistry.filter(
       (reg) => reg.device_id === device.id
     );
@@ -1112,6 +1111,11 @@ export const resolveEntityIDs = (
   const targetFloors = new Set(ensureArray(targetPickerValue.floor_id));
   const targetLabels = new Set(ensureArray(targetPickerValue.label_id));
 
+  // Only a directly targeted device pulls in its child devices. Devices that are
+  // only reached through a label or an area must not, because core does not
+  // inherit labels to children and resolves areas by effective area membership.
+  const directDevices = new Set(targetDevices);
+
   targetLabels.forEach((labelId) => {
     const expanded = expandLabelTarget(
       hass,
@@ -1143,6 +1147,15 @@ export const resolveEntityIDs = (
     expanded.entities.forEach((id) => targetEntities.add(id));
   });
 
+  // Targeting a device also targets its child devices, matching core's
+  // server-side target resolution. Only direct device targets expand this way;
+  // nesting is single-level, so one pass is enough.
+  Object.values(devices).forEach((device) => {
+    if (device.parent_device_id && directDevices.has(device.parent_device_id)) {
+      targetDevices.add(device.id);
+    }
+  });
+
   targetDevices.forEach((deviceId) => {
     const expanded = expandDeviceTarget(
       hass,

src/data/target.ts

@@ -7,7 +7,10 @@ import type { CallWS, HomeAssistant } from "../types";
 import type { AreaRegistryEntry } from "./area/area_registry";
 import type { FloorComboBoxItem } from "./area_floor_picker";
 import type { DevicePickerItem } from "./device/device_picker";
-import type { DeviceRegistryEntry } from "./device/device_registry";
+import {
+  devicesInEffectiveArea,
+  type DeviceRegistryEntry,
+} from "./device/device_registry";
 import type { HaEntityPickerEntityFilterFunc } from "./entity/entity";
 import type { EntityComboBoxItem } from "./entity/entity_picker";
 import type { EntityRegistryDisplayEntry } from "./entity/entity_registry";
@@ -125,9 +128,7 @@ export const areaMeetsFilter = (
   entityFilter?: HaEntityPickerEntityFilterFunc,
   includeSecondary = false
 ): boolean => {
-  const areaDevices = Object.values(devices).filter(
-    (device) => device.area_id === area.area_id
-  );
+  const areaDevices = devicesInEffectiveArea(devices, area.area_id);
 
   if (
     areaDevices.some((device) =>
@@ -178,6 +179,9 @@ export const deviceMeetsFilter = (
   entityFilter?: HaEntityPickerEntityFilterFunc,
   includeSecondary = false
 ): boolean => {
+  // Only the device's own entities: child devices are targeted through the
+  // device itself (see core's target resolution), not by making a parent match
+  // on behalf of a child.
   const devEntities = Object.values(entities).filter(
     (entity) => entity.device_id === device.id
   );

src/data/vacuum.ts

@@ -22,7 +22,6 @@ export enum VacuumEntityFeature {
   STOP = 8,
   RETURN_HOME = 16,
   FAN_SPEED = 32,
-  BATTERY = 64,
   STATUS = 128,
   SEND_COMMAND = 256,
   LOCATE = 512,
@@ -34,7 +33,6 @@ export enum VacuumEntityFeature {
 }
 
 interface VacuumEntityAttributes extends HassEntityAttributeBase {
-  battery_level?: number;
   fan_speed?: string;
   fan_speed_list?: string[];
   [key: string]: any;

src/data/weather.ts

@@ -566,9 +566,10 @@ export const getWeatherStateIcon = (
   if (userDefinedIcon) {
     return html`
       <div
-        style="background-size: cover;${styleMap({
+        style=${styleMap({
+          "background-size": "cover",
           "background-image": userDefinedIcon,
-        })}"
+        })}
       ></div>
     `;
   }

src/data/ws-device_registry.ts

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

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/const.ts

@@ -7,21 +7,11 @@ import { isNumericEntity } from "../../data/history";
 import { CONTINUOUS_DOMAINS } from "../../data/logbook";
 import type { HomeAssistant } from "../../types";
 
-export const MORE_INFO_VIEWS = [
-  "info",
-  "history",
-  "settings",
-  "related",
-  "add_to",
-  "details",
-] as const;
-
-export type MoreInfoView = (typeof MORE_INFO_VIEWS)[number];
-
-export const isMoreInfoView = (
-  value: string | undefined
-): value is MoreInfoView =>
-  value !== undefined && (MORE_INFO_VIEWS as readonly string[]).includes(value);
+export {
+  isMoreInfoView,
+  MORE_INFO_VIEWS,
+  type MoreInfoView,
+} from "./more-info-view";
 
 export const DOMAINS_NO_INFO = ["camera", "configurator"];
 /**

src/dialogs/more-info/context.ts

@@ -0,0 +1,9 @@
+import { createContext } from "@lit/context";
+
+export interface MoreInfoContext {
+  hash: URLSearchParams;
+  setHashParam: (key: string, value?: string) => void;
+}
+
+export const moreInfoContext =
+  createContext<MoreInfoContext>("more-info-context");

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/controls/more-info-vacuum.ts

@@ -159,23 +159,6 @@ class MoreInfoVacuum extends LitElement {
       `;
     }
 
-    // Use deprecated battery_level and battery_icon attributes
-    if (
-      supportsFeature(this.stateObj, VacuumEntityFeature.BATTERY) &&
-      this.stateObj.attributes.battery_level
-    ) {
-      return html`
-        <span class="battery" slot="after-time">
-          <span
-            >${Math.round(
-              this.stateObj.attributes.battery_level
-            )}${blankBeforePercent(this._i18n.locale)}%</span
-          >
-          <ha-icon .icon=${this.stateObj.attributes.battery_icon}></ha-icon>
-        </span>
-      `;
-    }
-
     return nothing;
   }
 

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

@@ -11,6 +11,7 @@ import { formatDateWeekdayShort } from "../../../common/datetime/format_date";
 import { formatTime } from "../../../common/datetime/format_time";
 import { transform } from "../../../common/decorators/transform";
 import { formatNumber } from "../../../common/number/format_number";
+import type { HASSDomEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-alert";
 import "../../../components/ha-relative-time";
 import "../../../components/ha-spinner";
@@ -48,11 +49,16 @@ import type {
   HomeAssistantFormatters,
   HomeAssistantInternationalization,
 } from "../../../types";
+import { moreInfoContext, type MoreInfoContext } from "../context";
 
 @customElement("more-info-weather")
 class MoreInfoWeather extends LitElement {
   @property({ attribute: false }) public stateObj?: WeatherEntity;
 
+  @state()
+  @consume({ context: moreInfoContext, subscribe: true })
+  private _moreInfoContext?: MoreInfoContext;
+
   @state()
   @consume({ context: internationalizationContext, subscribe: true })
   private _i18n!: HomeAssistantInternationalization;
@@ -127,15 +133,33 @@ class MoreInfoWeather extends LitElement {
   protected willUpdate(changedProps: PropertyValues): void {
     super.willUpdate(changedProps);
 
-    if ((changedProps.has("stateObj") || !this._subscribed) && this.stateObj) {
+    if (
+      (changedProps.has("stateObj") ||
+        changedProps.has("_moreInfoContext") ||
+        !this._subscribed) &&
+      this.stateObj
+    ) {
       const oldState = changedProps.get("stateObj") as
         WeatherEntity | undefined;
       if (
         oldState?.entity_id !== this.stateObj?.entity_id ||
+        changedProps.has("_moreInfoContext") ||
         !this._subscribed
       ) {
-        this._forecastType = getDefaultForecastType(this.stateObj);
-        this._subscribeForecastEvents();
+        const supportedForecastTypes = getSupportedForecastTypes(this.stateObj);
+        const requestedForecastType =
+          this._moreInfoContext?.hash.get("forecast");
+        const selectedForecastType =
+          supportedForecastTypes.find(
+            (forecastType) => forecastType === requestedForecastType
+          ) ?? getDefaultForecastType(this.stateObj);
+        if (selectedForecastType !== requestedForecastType) {
+          this._moreInfoContext?.setHashParam("forecast", selectedForecastType);
+        }
+        if (this._forecastType !== selectedForecastType || !this._subscribed) {
+          this._forecastType = selectedForecastType;
+          this._subscribeForecastEvents();
+        }
       }
     } else if (changedProps.has("_forecastType")) {
       this._subscribeForecastEvents();
@@ -509,8 +533,17 @@ class MoreInfoWeather extends LitElement {
     `;
   }
 
-  private _handleForecastTypeChanged(ev: CustomEvent): void {
+  private _handleForecastTypeChanged(
+    ev: HASSDomEvent<{ name: ModernForecastType }>
+  ): void {
+    if (
+      !this.stateObj ||
+      !getSupportedForecastTypes(this.stateObj).includes(ev.detail.name)
+    ) {
+      return;
+    }
     this._forecastType = ev.detail.name;
+    this._moreInfoContext?.setHashParam("forecast", this._forecastType);
   }
 
   static get styles(): CSSResultGroup {

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

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

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

@@ -17,6 +17,7 @@ import {
   mdiTransitConnectionVariant,
 } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
+import { provide } from "@lit/context";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -40,7 +41,13 @@ 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,
+  replaceCurrentUrl,
+  updateHistoryState,
+} from "../../common/navigate";
+import { createMoreInfoUrl } from "../../common/url/more-info-query-params";
 import type { LocalizeKeys } from "../../common/translations/localize";
 import { computeRTL } from "../../common/util/compute_rtl";
 import { withViewTransition } from "../../common/util/view-transition";
@@ -81,6 +88,7 @@ import {
   EDITABLE_DOMAINS_WITH_UNIQUE_ID,
   type MoreInfoView,
 } from "./const";
+import { moreInfoContext, type MoreInfoContext } from "./context";
 import "./controls/more-info-default";
 import type { FavoritesDialogContext } from "./favorites";
 import { getFavoritesDialogHandler } from "./favorites";
@@ -98,6 +106,9 @@ export interface MoreInfoDialogParams {
   tab?: MoreInfoView;
   large?: boolean;
   data?: Record<string, any>;
+  hash?: URLSearchParams;
+  fromUrl?: boolean;
+  returnUrl?: string;
   parentElement?: LitElement;
 }
 
@@ -143,6 +154,12 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
 
   @state() private _data?: Record<string, any>;
 
+  @provide({ context: moreInfoContext })
+  @state()
+  private _moreInfoContext: MoreInfoContext = this._createMoreInfoContext();
+
+  private _returnUrl?: string;
+
   @state() private _currView: MoreInfoView = DEFAULT_VIEW;
 
   @state() private _initialView: MoreInfoView = DEFAULT_VIEW;
@@ -177,6 +194,8 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
     const view = params.view || params.tab || DEFAULT_VIEW;
 
     this._data = params.data;
+    this._moreInfoContext = this._createMoreInfoContext(params.hash);
+    this._returnUrl = params.returnUrl;
     this._currView = view;
     this._initialView = view;
     this._childViewStack = [];
@@ -212,6 +231,9 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
   }
 
   private _dialogClosed() {
+    if (this._returnUrl) {
+      replaceCurrentUrl(this._returnUrl);
+    }
     this._entityId = undefined;
     this._parentEntityIds = [];
     this._entry = undefined;
@@ -220,6 +242,8 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
     this._initialView = DEFAULT_VIEW;
     this._currView = DEFAULT_VIEW;
     this._childViewStack = [];
+    this._moreInfoContext = this._createMoreInfoContext();
+    this._returnUrl = undefined;
     this._isEscapeEnabled = true;
     window.removeEventListener("dialog-closed", this._enableEscapeKeyClose);
     window.removeEventListener("show-dialog", this._disableEscapeKeyClose);
@@ -267,18 +291,49 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
     return entity?.device_id ?? null;
   }
 
-  private _setView(view: MoreInfoView) {
-    history.replaceState(
-      {
-        ...history.state,
-        dialogParams: {
-          ...history.state?.dialogParams,
-          view,
-        },
+  private _setView(view: MoreInfoView, preserveHash = false) {
+    if (view !== this._currView && !preserveHash) {
+      this._moreInfoContext = this._createMoreInfoContext();
+    }
+    updateHistoryState({
+      dialogParams: {
+        ...getHistoryState()?.dialogParams,
+        view,
       },
-      ""
-    );
+    });
     this._currView = view;
+    this._syncUrl();
+  }
+
+  private _syncUrl() {
+    if (!this._returnUrl || !this._entityId) {
+      return;
+    }
+    replaceCurrentUrl(
+      createMoreInfoUrl(this._returnUrl, {
+        entityId: this._entityId,
+        view: this._currView,
+        hash: this._moreInfoContext.hash,
+      })
+    );
+  }
+
+  private _createMoreInfoContext(hash?: URLSearchParams): MoreInfoContext {
+    return {
+      hash: new URLSearchParams(hash),
+      setHashParam: (key, value) => this._setHashParam(key, value),
+    };
+  }
+
+  private _setHashParam(key: string, value?: string) {
+    const hash = new URLSearchParams(this._moreInfoContext.hash);
+    if (value) {
+      hash.set(key, value);
+    } else {
+      hash.delete(key);
+    }
+    this._moreInfoContext = this._createMoreInfoContext(hash);
+    this._syncUrl();
   }
 
   private _goBack() {
@@ -306,7 +361,9 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
     if (this._parentEntityIds.length > 0) {
       this._entityId = this._parentEntityIds.pop();
       this._currView = DEFAULT_VIEW;
+      this._moreInfoContext = this._createMoreInfoContext();
       this._loadEntityRegistryEntry();
+      this._syncUrl();
     }
   }
 
@@ -1007,19 +1064,22 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
     }
     const view = ev.detail.view || ev.detail.tab || DEFAULT_VIEW;
     if (entityId === this._entityId) {
+      this._moreInfoContext = this._createMoreInfoContext(ev.detail.hash);
       this._infoEditMode = false;
       this._detailsYamlMode = false;
-      this._setView(view);
+      this._setView(view, true);
       return;
     }
     this._parentEntityIds = [...this._parentEntityIds, this._entityId!];
     this._entityId = entityId;
+    this._moreInfoContext = this._createMoreInfoContext(ev.detail.hash);
     this._currView = view === "details" ? view : DEFAULT_VIEW;
     this._initialView = view;
     this._infoEditMode = false;
     this._detailsYamlMode = false;
     this._childViewStack = [];
     this._loadEntityRegistryEntry();
+    this._syncUrl();
   }
 
   private _enableEscapeKeyClose = () => {
@@ -1063,6 +1123,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/dialogs/more-info/more-info-view.ts

@@ -0,0 +1,15 @@
+export const MORE_INFO_VIEWS = [
+  "info",
+  "history",
+  "settings",
+  "related",
+  "add_to",
+  "details",
+] as const;
+
+export type MoreInfoView = (typeof MORE_INFO_VIEWS)[number];
+
+export const isMoreInfoView = (
+  value: string | undefined
+): value is MoreInfoView =>
+  value !== undefined && (MORE_INFO_VIEWS as readonly string[]).includes(value);

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

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

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

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

src/dialogs/restart/dialog-restart.ts

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

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/fake_data/entities/vacuum-entity.ts

@@ -74,11 +74,6 @@ export class MockVacuumEntity extends MockBaseEntity {
       stateAttrs.fan_speed = attrs.fan_speed ?? null;
     }
 
-    if (supportsFeatureFromAttributes(attrs, VacuumEntityFeature.BATTERY)) {
-      stateAttrs.battery_level = attrs.battery_level ?? null;
-      stateAttrs.battery_icon = attrs.battery_icon ?? null;
-    }
-
     if (supportsFeatureFromAttributes(attrs, VacuumEntityFeature.STATUS)) {
       stateAttrs.status = attrs.status ?? null;
     }

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

@@ -6,12 +6,16 @@ import { storage } from "../common/decorators/storage";
 import { isNavigationClick } from "../common/dom/is-navigation-click";
 import { navigate } from "../common/navigate";
 import type { LocalizeFunc } from "../common/translations/localize";
+import { decodeMoreInfoUrl } from "../common/url/more-info-query-params";
+import { extractSearchParamsObject } from "../common/url/search-params";
+import { afterNextRender } from "../common/util/render-status";
 import { fetchHttpConfig } from "../data/http";
 import type { HttpConfigState } from "../data/http";
 import type { WindowWithPreloads } from "../data/preloads";
 import type { RecorderInfo } from "../data/recorder";
 import { getRecorderInfo } from "../data/recorder";
 import { showHttpPendingConfigDialog } from "../dialogs/http-pending-config/show-dialog-http-pending-config";
+import { showMoreInfoDialog } from "../dialogs/more-info/show-ha-more-info-dialog";
 import "../resources/custom-card-support";
 import { HassElement } from "../state/hass-element";
 import QuickBarMixin from "../state/quick-bar-mixin";
@@ -19,6 +23,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,
@@ -143,6 +148,7 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
       // the shadow root. Appending the dialog before that render would let it
       // tear the freshly-added dialog straight back out of the DOM.
       this.checkHttpPendingConfig();
+      this._restoreMoreInfoFromUrl();
     }
   }
 
@@ -177,6 +183,12 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
     // Handle history changes
     window.addEventListener("popstate", () => updateRoute());
 
+    // Restore a more-info dialog deep-linked in the current URL, if any.
+    window.addEventListener("location-changed", () =>
+      this._restoreMoreInfoFromUrl()
+    );
+    window.addEventListener("popstate", () => this._restoreMoreInfoFromUrl());
+
     // Handle clicking on links
     window.addEventListener("click", (ev) => {
       const href = isNavigationClick(ev);
@@ -247,13 +259,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();
       }
     }
   }
@@ -298,6 +308,35 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
     });
   }
 
+  private _restoreMoreInfoFromUrl() {
+    // Only restore once the main UI is rendered so the dialog has access to
+    // the loaded entities.
+    if (this.render !== this.renderHass) {
+      return;
+    }
+    const searchParams = extractSearchParamsObject();
+    if (!searchParams["more-info-entity-id"]) {
+      return;
+    }
+    const { entityId, view, hash } = decodeMoreInfoUrl(
+      window.location.search,
+      window.location.hash
+    );
+    if (!entityId) {
+      return;
+    }
+    // Wait for the next render to ensure the view is fully loaded
+    // because the more info dialog is closed when the url changes
+    afterNextRender(() => {
+      showMoreInfoDialog(this, {
+        entityId,
+        view,
+        hash,
+        fromUrl: true,
+      });
+    });
+  }
+
   protected async checkDataBaseMigration() {
     if (__DEMO__) {
       this._databaseMigration = false;

src/onboarding/onboarding-analytics.ts

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

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

@@ -644,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/add-automation-element/ha-automation-add-search.ts

@@ -370,6 +370,7 @@ export class HaAutomationAddSearch extends LitElement {
                     width: "var(--ha-space-12)",
                     position: "absolute",
                     top: "0",
+                    height: "100%",
                     left: rtl ? undefined : "var(--ha-space-1)",
                     right: rtl ? "var(--ha-space-1)" : undefined,
                     transform: rtl ? "scaleX(-1)" : "",

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

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

src/panels/config/automation/condition/types/ha-automation-condition-platform.ts

@@ -7,6 +7,7 @@ import { createDurationData } from "../../../../../common/datetime/create_durati
 import { durationDataToSeconds } from "../../../../../common/datetime/duration_to_seconds";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { stopPropagation } from "../../../../../common/dom/stop_propagation";
+import { getSelectorFallbackValue } from "../../../../../components/ha-form/get-selector-fallback-value";
 import "../../../../../components/ha-checkbox";
 import "../../../../../components/ha-selector/ha-selector";
 import "../../../../../components/ha-settings-row";
@@ -429,20 +430,8 @@ export class HaPlatformCondition extends LitElement {
         Object.entries(this.description).find(([k, _value]) => k === key)?.[1];
       let defaultValue = field?.default;
 
-      if (
-        defaultValue == null &&
-        field?.selector &&
-        "constant" in field.selector
-      ) {
-        defaultValue = field.selector.constant?.value;
-      }
-
-      if (
-        defaultValue == null &&
-        field?.selector &&
-        "boolean" in field.selector
-      ) {
-        defaultValue = false;
+      if (defaultValue == null && field?.selector) {
+        defaultValue = getSelectorFallbackValue(field.selector);
       }
 
       if (defaultValue != null) {

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

@@ -2,10 +2,12 @@ import "@home-assistant/webawesome/dist/components/divider/divider";
 import { ResizeController } from "@lit-labs/observers/resize-controller";
 import { consume } from "@lit/context";
 import {
+  mdiCloseThick,
   mdiCog,
   mdiContentDuplicate,
   mdiDelete,
   mdiDotsVertical,
+  mdiExclamationThick,
   mdiHelpCircleOutline,
   mdiInformationOutline,
   mdiMenuDown,
@@ -129,6 +131,28 @@ import {
 import { getAvailableAssistants } from "../voice-assistants/expose/available-assistants";
 import { showNewAutomationDialog } from "./show-dialog-new-automation";
 
+const renderIconBadge = (path: string, color: string) => html`
+  <div
+    style=${styleMap({
+      position: "absolute",
+      top: "-5px",
+      insetInlineEnd: "-7px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "18px",
+      height: "18px",
+      borderRadius: "50%",
+      backgroundColor: color,
+      boxShadow: "0 0 0 2px var(--data-table-background-color)",
+      color: "var(--data-table-background-color)",
+      "--mdc-icon-size": "12px",
+    })}
+  >
+    <ha-svg-icon style="margin: 0;" .path=${path}></ha-svg-icon>
+  </div>
+`;
+
 type AutomationItem = AutomationEntity & {
   name: string;
   area: string | undefined;
@@ -303,6 +327,11 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
       localize: LocalizeFunc,
       entitiesToCheck?: any[]
     ): DataTableColumnContainer<AutomationItem> => {
+      const triggeredAtColumn = getTriggeredAtTableColumn<AutomationItem>(
+        localize,
+        this.hass
+      );
+
       const columns: DataTableColumnContainer<AutomationItem> = {
         icon: {
           title: "",
@@ -310,18 +339,34 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           type: "icon",
           moveable: false,
           showNarrow: true,
-          template: (automation) =>
-            html`<ha-state-icon
-              .stateObj=${automation}
-              style=${styleMap({
-                color:
-                  automation.state === UNAVAILABLE
+          template: (automation) => {
+            const unavailable = automation.state === UNAVAILABLE;
+            const disabled = automation.state === "off";
+            return html`<div
+              style="position: relative; display: inline-flex; width: 24px; height: 24px;"
+            >
+              <ha-state-icon
+                .stateObj=${automation}
+                .stateValue=${unavailable || disabled ? "on" : undefined}
+                style=${styleMap({
+                  display: "flex",
+                  margin: "0",
+                  color: unavailable
                     ? "var(--error-color)"
-                    : automation.state === "on"
-                      ? "var(--state-active-color)"
+                    : disabled
+                      ? "var(--disabled-color)"
                       : "unset",
-              })}
-            ></ha-state-icon>`,
+                })}
+              ></ha-state-icon>
+              ${
+                unavailable
+                  ? renderIconBadge(mdiExclamationThick, "var(--error-color)")
+                  : disabled
+                    ? renderIconBadge(mdiCloseThick, "var(--disabled-color)")
+                    : nothing
+              }
+            </div>`;
+          },
         },
         entity_id: getEntityIdHiddenTableColumn(),
         name: {
@@ -342,23 +387,33 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
         area: getAreaTableColumn(localize),
         category: getCategoryTableColumn(localize),
         labels: getLabelsTableColumn(),
-        last_triggered: getTriggeredAtTableColumn(localize, this.hass),
+        last_triggered: {
+          ...triggeredAtColumn,
+          template: (automation) =>
+            narrow && automation.state === "off"
+              ? nothing
+              : triggeredAtColumn.template!(automation),
+        },
         formatted_state: {
           minWidth: "82px",
           maxWidth: "82px",
           sortable: true,
           groupable: true,
-          hidden: narrow,
           type: "overflow",
           title: this.hass.localize("ui.panel.config.automation.picker.state"),
-          template: (automation) => html`
-            <ha-switch
-              @click=${stopPropagation}
-              @change=${this._handleSwitchToggle}
-              .automation=${automation}
-              .checked=${automation.state === "on"}
-            ></ha-switch>
-          `,
+          template: (automation) =>
+            narrow
+              ? automation.state === "off"
+                ? localize("ui.panel.config.automation.picker.disabled")
+                : nothing
+              : html`
+                  <ha-switch
+                    @click=${stopPropagation}
+                    @change=${this._handleSwitchToggle}
+                    .automation=${automation}
+                    .checked=${automation.state === "on"}
+                  ></ha-switch>
+                `,
         },
         actions: {
           lastFixed: true,
@@ -443,9 +498,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>) {