Add parent device to entity context

2026-08-29 02:16:15 +00:00 · 2026-08-24 15:59:53 +02:00
185 changed files with 3255 additions and 9254 deletions
@@ -22,7 +22,7 @@ When creating a pull request, use `.github/PULL_REQUEST_TEMPLATE.md` as the body

 - `yarn lint` passes when practical for the scope.
 - `yarn test` or focused relevant tests are green when practical for the scope.
- Each test added by the change protects real logic, not the look of a component.
+- Tests are added or updated for new data processing and utilities where applicable.
 - User-facing text is localized and follows `ha-frontend-user-facing-text` guidance.
 - Components handle loading, error, unavailable, and missing-entity states.
 - Entity existence is checked before property access.
@@ -49,13 +49,12 @@ Do not pass `--help`, `--background`, or `--modern` to `script/build_frontend`;

 Managed app, demo, gallery, and E2E app workflows share one lifetime lock, so only one build or development server can run at a time.

-## When To Add Tests
+## Unit And Utility Tests

- Write tests for code that computes something: data processing, utility functions, config validation, and what happens when the user interacts with a component.
- Do not write tests that check what a component looks like: its text, CSS classes, styles, or slots. Do not write tests that check the default value of an option.
- A component that only takes data from contexts and helpers and puts it in a template does not need a test.
- If you are not sure a test is useful, describe the test and what it would catch, and let the user decide.
- Tests never talk to a real Home Assistant. Replace `callWS`, `callApi`, and the connection with fakes.
+- Add or update Vitest tests for data processing, utility code, and behavior that can be tested without a browser.
+- Mock WebSocket connections and API calls at boundaries.
+- Cover loading, error, unavailable, and missing-entity states where relevant.
+- Test accessibility-sensitive behavior when it can be asserted without brittle DOM internals.

 ## Dev Servers

@@ -1,47 +0,0 @@
-name: Sync device class constants
-
-# Mirrors the device class constants for Home Assistant Core's into the
-# build-time default in src/data/devce_classes.ts and opens a PR
-# when it drifts. Reads homeassistant/generated/device_classes.json from core.
-
-on:
-  workflow_dispatch:
-  schedule:
-    - cron: "0 4 * * *" # Daily, 04:00 UTC
-
-permissions:
-  contents: read
-
-jobs:
-  sync:
-    name: Sync
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-      pull-requests: write
-    steps:
-      - name: Checkout the repository
-        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
-        with:
-          persist-credentials: false
-
-      - name: Setup Node and install
-        uses: ./.github/actions/setup
-
-      - name: Regenerate device class constants
-        run: ./script/gen_device_classes
-
-      - name: Format
-        run: yarn prettier --write src/data/sensor_numeric_device_classes.ts
-
-      - name: Create pull request
-        uses: peter-evans/create-pull-request@5f6978faf089d4d20b00c7766989d076bb2fc7f1 # v8.1.1
-        with:
-          branch: chore/sync-numeric-device-classes
-          commit-message: Update numeric sensor device classes
-          title: Update numeric sensor device classes
-          body: |
-            Regenerated `SENSOR_NUMERIC_DEVICE_CLASSES` from Home Assistant Core's
-            `SensorDeviceClass`.
-
-            Automated by `.github/workflows/sync-numeric-device-classes.yaml`.
@@ -1,8 +1,7 @@
-name: Sync sensor entity constants
+name: Sync numeric device classes

-# Mirrors Home Assistant Core's numeric `SensorDeviceClass`, `SensorStateClass`,
-# units and related device and state classes arrays into the
-# build-time default in src/data/sensor_entity_constants.ts and opens a PR
+# Mirrors Home Assistant Core's numeric `SensorDeviceClass` list into the
+# build-time default in src/data/sensor_numeric_device_classes.ts and opens a PR
 # when it drifts. Reads homeassistant/generated/sensor.json from core.

 on:
@@ -29,8 +28,8 @@ jobs:
      - name: Setup Node and install
        uses: ./.github/actions/setup

-      - name: Regenerate sensor entity constants
-        run: ./script/gen_sensor_entity_constants
+      - name: Regenerate numeric device classes
+        run: ./script/gen_numeric_device_classes

      - name: Format
        run: yarn prettier --write src/data/sensor_numeric_device_classes.ts
@@ -74,6 +74,3 @@ test/e2e/app/dist/
 .serena

 test/benchmarks/results/
-
-# Downloaded map glyph and sprite archives
-.map-assets/
@@ -33,7 +33,6 @@ Never run `tsc` or `yarn lint:types` with file arguments. When `tsc` receives fi
 - Do not query or manipulate DOM manually when Lit decorators, component refs, or render state are appropriate.
 - Scope styles to components, use theme custom properties, and keep layouts mobile-first and RTL-safe.
 - All user-facing text must be localized through the translation system.
- Do not write tests just because you changed some code. Write a test when there is real logic that could break without anyone noticing, and explain what the test protects.

 ## Project Skills

@@ -4,7 +4,6 @@ import fs from "fs-extra";
 import gulp from "gulp";
 import path from "path";
 import paths from "../paths.cjs";
-import { ensureMapAssets, mapAssetsDir } from "./map-assets.js";

 const npmPath = (...parts) =>
  path.resolve(paths.root_dir, "node_modules", ...parts);
@@ -90,7 +89,7 @@ function copyQrScannerWorker(staticDir) {
  copyFileDir(npmPath("qr-scanner/qr-scanner-worker.min.js"), staticPath("js"));
 }

-async function copyMapPanel(staticDir) {
+function copyMapPanel(staticDir) {
  const staticPath = genStaticPath(staticDir);
  copyFileDir(
    npmPath("leaflet/dist/leaflet.css"),
@@ -104,10 +103,6 @@ async function copyMapPanel(staticDir) {
    npmPath("leaflet/dist/images"),
    staticPath("images/leaflet/images/")
  );
-
-  // Style, glyphs and sprites for the vector base map
-  await ensureMapAssets();
-  fs.copySync(mapAssetsDir, staticPath("map/"));
 }

 function copyZXingWasm(staticDir) {
@@ -144,7 +139,7 @@ gulp.task("copy-static-app", async () => {
  copyMdiIcons(staticDir);

  // Panel assets
-  await copyMapPanel(staticDir);
+  copyMapPanel(staticDir);

  // Qr Scanner assets
  copyZXingWasm(staticDir);
@@ -160,7 +155,7 @@ gulp.task("copy-static-demo", async () => {
  // Copy demo static files
  fs.copySync(path.resolve(paths.demo_dir, "public"), paths.demo_output_root);
  copyPolyfills(paths.demo_output_static);
-  await copyMapPanel(paths.demo_output_static);
+  copyMapPanel(paths.demo_output_static);
  copyFonts(paths.demo_output_static);
  copyTranslations(paths.demo_output_static);
  copyLocaleData(paths.demo_output_static);
@@ -173,7 +168,7 @@ gulp.task("copy-static-cast", async () => {
  // Copy cast static files
  fs.copySync(path.resolve(paths.cast_dir, "public"), paths.cast_output_root);
  copyPolyfills(paths.cast_output_static);
-  await copyMapPanel(paths.cast_output_static);
+  copyMapPanel(paths.cast_output_static);
  copyFonts(paths.cast_output_static);
  copyTranslations(paths.cast_output_static);
  copyLocaleData(paths.cast_output_static);
@@ -189,7 +184,7 @@ gulp.task("copy-static-gallery", async () => {
    paths.gallery_output_root
  );

-  await copyMapPanel(paths.gallery_output_static);
+  copyMapPanel(paths.gallery_output_static);
  copyFonts(paths.gallery_output_static);
  copyTranslations(paths.gallery_output_static);
  copyLocaleData(paths.gallery_output_static);
@@ -220,7 +215,7 @@ gulp.task("copy-static-e2e-test-app", async () => {
  }

  copyPolyfills(paths.e2eTestApp_output_static);
-  await copyMapPanel(paths.e2eTestApp_output_static);
+  copyMapPanel(paths.e2eTestApp_output_static);
  copyFonts(paths.e2eTestApp_output_static);
  copyTranslations(paths.e2eTestApp_output_static);
  copyLocaleData(paths.e2eTestApp_output_static);
@@ -1,40 +0,0 @@
-import { writeFile } from "node:fs/promises";
-import { join } from "node:path";
-import process from "node:process";
-import gulp from "gulp";
-import paths from "../paths.cjs";
-
-const SOURCE_URL =
-  process.env.SENSOR_METADATA_URL ||
-  "https://raw.githubusercontent.com/home-assistant/core/refs/heads/dev/homeassistant/generated/device_classes.json";
-
-const TARGET = join(paths.root_dir, "src", "data", "device_classes.ts");
-
-gulp.task("gen-device-classes", async () => {
-  const response = await fetch(SOURCE_URL);
-  if (!response.ok) {
-    throw new Error(`Failed to fetch ${SOURCE_URL}: ${response.status}`);
-  }
-
-  const data = await response.json();
-  const domainDeviceClasses = data ?? {};
-  if (!Object.keys(domainDeviceClasses).length) {
-    throw new Error(`No device classes found in ${SOURCE_URL}`);
-  }
-
-  const content = `// This file is auto-generated from Home Assistant Core's
-// entity platform device classes. Do not edit by hand.
-// Regenerate with \`script/gen_device_classes\`.
-
-export const DOMAIN_DEVICE_CLASSES: Record<string, string[]> = {
-${Object.entries(domainDeviceClasses)
-  .map(
-    ([domain, deviceClasses]) =>
-      `  "${domain}": [${deviceClasses.map((deviceClass) => `"${deviceClass}"`).join(", ")}],`
-  )
-  .join("\n")}
-};
-`;
-
-  await writeFile(TARGET, content);
-});
@@ -0,0 +1,40 @@
+import { writeFile } from "node:fs/promises";
+import { join } from "node:path";
+import process from "node:process";
+import gulp from "gulp";
+import paths from "../paths.cjs";
+
+const SOURCE_URL =
+  process.env.SENSOR_METADATA_URL ||
+  "https://raw.githubusercontent.com/home-assistant/core/dev/homeassistant/generated/sensor.json";
+
+const TARGET = join(
+  paths.root_dir,
+  "src",
+  "data",
+  "sensor_numeric_device_classes.ts"
+);
+
+gulp.task("gen-numeric-device-classes", async () => {
+  const response = await fetch(SOURCE_URL);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch ${SOURCE_URL}: ${response.status}`);
+  }
+
+  const data = await response.json();
+  const classes = [...(data.numeric_device_classes ?? [])].sort();
+  if (!classes.length) {
+    throw new Error(`No numeric_device_classes found in ${SOURCE_URL}`);
+  }
+
+  const content = `// This file is auto-generated from Home Assistant Core's \`SensorDeviceClass\`
+// (all values minus \`NON_NUMERIC_DEVICE_CLASSES\`). Do not edit by hand.
+// Regenerate with \`script/gen_numeric_device_classes\`.
+
+export const SENSOR_NUMERIC_DEVICE_CLASSES: string[] = [
+${classes.map((deviceClass) => `  "${deviceClass}",`).join("\n")}
+];
+`;
+
+  await writeFile(TARGET, content);
+});
@@ -1,83 +0,0 @@
-import { writeFile } from "node:fs/promises";
-import { join } from "node:path";
-import process from "node:process";
-import gulp from "gulp";
-import paths from "../paths.cjs";
-
-const SOURCE_URL =
-  process.env.SENSOR_METADATA_URL ||
-  "https://raw.githubusercontent.com/home-assistant/core/dev/homeassistant/generated/sensor.json";
-
-const TARGET = join(
-  paths.root_dir,
-  "src",
-  "data",
-  "sensor_entity_constants.ts"
-);
-
-gulp.task("gen-sensor-entity-constants", async () => {
-  const response = await fetch(SOURCE_URL);
-  if (!response.ok) {
-    throw new Error(`Failed to fetch ${SOURCE_URL}: ${response.status}`);
-  }
-
-  const data = await response.json();
-  const numericDeviceClasses = [...(data.numeric_device_classes ?? [])].sort();
-  const deviceClassUnits = data.device_class_units ?? {};
-  const convertibleClassUnits = data.convertible_units ?? {};
-  const stateClasses = [...(data.state_classes ?? [])].sort();
-  const stateClassUnits = data.state_class_units ?? {};
-  if (
-    !numericDeviceClasses.length ||
-    !stateClasses.length ||
-    !Object.keys(deviceClassUnits).length ||
-    !Object.keys(stateClassUnits).length
-  ) {
-    throw new Error(
-      `No sensor device classes, state classes or units found in ${SOURCE_URL}`
-    );
-  }
-
-  const content = `// This file is auto-generated from Home Assistant Core's \`DEVICE_CLASS_UNITS\`
-// and \`STATE_CLASS_UNITS\`) and \`SensorDeviceClass\`
-// (all values minus \`NON_NUMERIC_DEVICE_CLASSES\`). Do not edit by hand.
-// Regenerate with \`script/gen_sensor_entity_constants\`.
-
-export const SENSOR_NUMERIC_DEVICE_CLASSES: string[] = [
-${numericDeviceClasses.map((deviceClass) => `  "${deviceClass}",`).join("\n")}
-];
-
-export const SENSOR_DEVICE_CLASS_UNITS: Record<string, (string | null)[]> = {
-${Object.entries(deviceClassUnits)
-  .map(
-    ([deviceClass, units]) =>
-      `  ${deviceClass}: [${units.map((u) => (u === null ? "null" : `"${u}"`)).join(", ")}],`
-  )
-  .join("\n")}
-};
-
-export const SENSOR_DEVICE_CLASS_CONVERTIBLE_UNITS: Record<string, (string | null)[]> = {
-${Object.entries(convertibleClassUnits)
-  .map(
-    ([deviceClass, units]) =>
-      `  ${deviceClass}: [${units.map((u) => (u === null ? "null" : `"${u}"`)).join(", ")}],`
-  )
-  .join("\n")}
-};
-
-export const SENSOR_STATE_CLASSES: string[] = [
-${stateClasses.map((stateClass) => `  "${stateClass}",`).join("\n")}
-];
-
-export const SENSOR_STATE_CLASS_UNITS: Record<string, string[]> = {
-${Object.entries(stateClassUnits)
-  .map(
-    ([stateClass, units]) =>
-      `  ${stateClass}: [${units.map((u) => (u === null ? "null" : `"${u}"`)).join(", ")}],`
-  )
-  .join("\n")}
-};
-`;
-
-  await writeFile(TARGET, content);
-});
@@ -9,12 +9,10 @@ import "./entry-html.js";
 import "./fetch-nightly-translations.js";
 import "./gallery.js";
 import "./gather-static.js";
-import "./gen-device-classes.js";
 import "./gen-icons-json.js";
-import "./gen-sensor-entity-constants.js";
+import "./gen-numeric-device-classes.js";
 import "./landing-page.js";
 import "./locale-data.js";
-import "./map-assets.js";
 import "./rspack.js";
 import "./service-worker.js";
 import "./translations.js";
@@ -1,217 +0,0 @@
-// Assembles the static assets of the vector base map - style, SDF glyphs and
-// icon sprites - into /static/map/. vector.openstreetmap.org sets CORS headers
-// on its tiles only, so these cannot be loaded from there by a browser.
-//
-// Glyphs and sprites come from pinned VersaTiles releases, cached locally and
-// verified against a digest.
-
-import { createHash } from "node:crypto";
-import { readFile, writeFile } from "node:fs/promises";
-import path from "node:path";
-import { colorful, eclipse } from "@versatiles/style";
-import fs from "fs-extra";
-import gulp from "gulp";
-import { extract } from "tar";
-import paths from "../paths.cjs";
-
-// The tile URL is deliberately never named here: the OSMF asks consumers to
-// resolve it through the TileJSON so they can move the tiles without every
-// client needing a release. https://operations.osmfoundation.org/policies/vector/
-const TILEJSON_URL =
-  "https://vector.openstreetmap.org/shortbread_v1/tilejson.json";
-
-const ASSET_PATH = "/static/map";
-
-const ARCHIVES = {
-  fonts: {
-    url: "https://github.com/versatiles-org/versatiles-fonts/releases/download/v2.2.0/noto_sans.tar.gz",
-    sha256: "a2dac39f4096722bc420367ffd4a36687cce7229e8aa760bc12cf657072eea6b",
-  },
-  sprites: {
-    url: "https://github.com/versatiles-org/versatiles-style/releases/download/v5.13.1/sprites.tar.gz",
-    sha256: "efffd0ee4cb9591bd52f16ff5b269d9618c7dd1db159cd6511943965560ddea5",
-  },
-};
-
-// Rendered with a device font through `localIdeographFontFamily`, so these are
-// never downloaded - and they are 90% of the Noto Sans SDF set.
-const LOCAL_IDEOGRAPH_BLOCKS = [
-  [0x2e80, 0x9fff], // CJK radicals through CJK Unified Ideographs, incl. kana
-  [0xac00, 0xd7ff], // Hangul syllables
-  [0xf900, 0xfaff], // CJK compatibility ideographs
-  [0xfe30, 0xfe4f], // CJK compatibility forms
-];
-
-// Our styles use bold only for motorway shields, so Latin, Greek and Cyrillic
-// cover every ref and the rest of bold - half the glyph set - is dropped.
-// `assertBoldStaysOnRefs` guards the assumption.
-const BOLD_MAX_CODEPOINT = 0x04ff;
-const BOLD_TEXT_FIELD = "{ref}";
-
-const cacheDir = path.resolve(paths.root_dir, ".map-assets");
-const outputDir = path.resolve(paths.build_dir, "map");
-
-const sha256 = (buffer) => createHash("sha256").update(buffer).digest("hex");
-
-// Downloads an archive into the cache, or reuses it when the digest matches.
-const cachedArchive = async (name, { url, sha256: expected }) => {
-  const file = path.join(cacheDir, `${name}.tar.gz`);
-
-  if (await fs.pathExists(file)) {
-    if (sha256(await readFile(file)) === expected) {
-      return file;
-    }
-    console.warn("Cached map %s archive is stale, downloading again", name);
-  }
-
-  console.log("Downloading map %s from %s", name, url);
-  const response = await fetch(url);
-  if (!response.ok) {
-    throw new Error(
-      `Failed to download map ${name}: ${response.status} ${response.statusText}`
-    );
-  }
-  const body = Buffer.from(await response.arrayBuffer());
-
-  const digest = sha256(body);
-  if (digest !== expected) {
-    throw new Error(
-      `Digest mismatch for map ${name}: expected ${expected}, got ${digest}`
-    );
-  }
-
-  await fs.outputFile(file, body);
-  return file;
-};
-
-const glyphRange = (entryPath) => {
-  const match = /^(?<font>[^/]+)\/(?<start>\d+)-(?<end>\d+)\.pbf$/.exec(
-    entryPath
-  );
-  return match
-    ? { font: match.groups.font, start: Number(match.groups.start) }
-    : undefined;
-};
-
-const keepGlyph = (entryPath) => {
-  const range = glyphRange(entryPath);
-  if (!range) {
-    return false;
-  }
-  if (range.font.endsWith("_bold") && range.start > BOLD_MAX_CODEPOINT) {
-    return false;
-  }
-  return !LOCAL_IDEOGRAPH_BLOCKS.some(
-    ([from, to]) => range.start >= from && range.start <= to
-  );
-};
-
-const keepSprite = (entryPath) =>
-  /^basics\/sprites(@2x)?\.(json|png)$/.test(entryPath);
-
-// `neutrino`, for one, sets country and state labels in bold - names in any
-// script, which would turn to tofu. Fail the build rather than ship that.
-const assertBoldStaysOnRefs = (name, style) => {
-  const offenders = style.layers
-    .filter((layer) =>
-      (layer.layout?.["text-font"] ?? []).some((font) => font.endsWith("_bold"))
-    )
-    .filter((layer) => layer.layout["text-field"] !== BOLD_TEXT_FIELD)
-    .map((layer) => layer.id);
-
-  if (offenders.length) {
-    throw new Error(
-      `Style "${name}" uses bold for ${offenders.join(", ")}, which can hold ` +
-        `names in any script. Raise BOLD_MAX_CODEPOINT to cover the full set ` +
-        `before shipping this style.`
-    );
-  }
-};
-
-// MapLibre extends the fetched TileJSON with the style's source options, so
-// anything left here wins and freezes at build time. Dropping them is what lets
-// a remote switch move the attribution and zoom range too, not just the URLs.
-const TILEJSON_FIELDS = [
-  "tiles",
-  "attribution",
-  "bounds",
-  "minzoom",
-  "maxzoom",
-  "scheme",
-];
-
-// The builder can only write a tile URL, so the source is repointed afterwards.
-// Keyed on there being exactly one source: any other shape means the builder's
-// own default host would ship unnoticed.
-const useTileJson = (name, style) => {
-  const sources = Object.values(style.sources);
-
-  if (sources.length !== 1) {
-    throw new Error(
-      `Style "${name}" has ${sources.length} sources, expected exactly one to ` +
-        `point at the TileJSON. Check what @versatiles/style emits.`
-    );
-  }
-
-  for (const field of TILEJSON_FIELDS) {
-    delete sources[0][field];
-  }
-  sources[0].url = TILEJSON_URL;
-  return style;
-};
-
-const styleOptions = {
-  // Keeps the generated URLs origin relative.
-  baseUrl: "",
-  glyphs: `${ASSET_PATH}/fonts/{fontstack}/{range}.pbf`,
-  sprite: [{ id: "basics", url: `${ASSET_PATH}/sprites/basics/sprites` }],
-};
-
-const buildMapAssets = async () => {
-  const [fontArchive, spriteArchive] = await Promise.all([
-    cachedArchive("fonts", ARCHIVES.fonts),
-    cachedArchive("sprites", ARCHIVES.sprites),
-  ]);
-
-  await fs.emptyDir(outputDir);
-  await Promise.all([
-    fs.ensureDir(path.join(outputDir, "fonts")),
-    fs.ensureDir(path.join(outputDir, "sprites")),
-  ]);
-
-  await Promise.all([
-    extract({
-      file: fontArchive,
-      cwd: path.join(outputDir, "fonts"),
-      filter: keepGlyph,
-    }),
-    extract({
-      file: spriteArchive,
-      cwd: path.join(outputDir, "sprites"),
-      filter: keepSprite,
-    }),
-    // Both themes up front: dark is a real cartography, not an inverted raster.
-    ...[
-      ["light", colorful],
-      ["dark", eclipse],
-    ].map(([name, builder]) => {
-      const style = useTileJson(name, builder(styleOptions));
-      assertBoldStaysOnRefs(name, style);
-      return writeFile(
-        path.join(outputDir, `${name}.json`),
-        JSON.stringify(style)
-      );
-    }),
-  ]);
-};
-
-// Shared so it does not have to be wired into every pipeline separately.
-let pending;
-export const ensureMapAssets = () => {
-  pending ??= buildMapAssets();
-  return pending;
-};
-
-gulp.task("build-map-assets", ensureMapAssets);
-
-export const mapAssetsDir = outputDir;
@@ -19,7 +19,6 @@ const baseEntry = {
  pref_disable_polling: false,
  disabled_by: null,
  reason: null,
-  error_reason_translation_domain: null,
  error_reason_translation_key: null,
  error_reason_translation_placeholders: null,
 };
@@ -424,23 +424,6 @@ const SCHEMAS: {
          },
        },
      },
-      device_class: {
-        name: "Device Class",
-        selector: {
-          device_class: {
-            domain: "sensor",
-          },
-        },
-      },
-      device_class_multiple: {
-        name: "Device Class (Multiple)",
-        selector: {
-          device_class: {
-            domain: "binary_sensor",
-            multiple: true,
-          },
-        },
-      },
      select_custom: {
        name: "Select (Custom)",
        selector: {
@@ -39,7 +39,6 @@ const createConfigEntry = (
  pref_disable_new_entities: false,
  pref_disable_polling: false,
  reason: null,
-  error_reason_translation_domain: null,
  error_reason_translation_key: null,
  error_reason_translation_placeholders: null,
  ...override,
@@ -75,7 +75,6 @@
    "@lit/context": "1.1.6",
    "@lit/reactive-element": "2.1.2",
    "@lit/task": "1.0.3",
-    "@maplibre/maplibre-gl-leaflet": "0.1.4",
    "@material/mwc-formfield": "patch:@material/mwc-formfield@npm%3A0.27.0#~/.yarn/patches/@material-mwc-formfield-npm-0.27.0-9528cb60f6.patch",
    "@material/mwc-list": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
    "@material/web": "2.5.0",
@@ -95,7 +94,7 @@
    "color-name": "2.1.1",
    "comlink": "4.4.2",
    "core-js": "3.50.0",
-    "cropperjs": "1.6.3",
+    "cropperjs": "1.6.2",
    "culori": "4.0.2",
    "date-fns": "4.4.0",
    "deep-clone-simple": "1.1.1",
@@ -116,7 +115,6 @@
    "lit": "3.3.3",
    "lit-html": "3.3.3",
    "luxon": "3.7.2",
-    "maplibre-gl": "5.24.0",
    "marked": "18.0.10",
    "memoize-one": "6.0.0",
    "node-vibrant": "4.0.4",
@@ -145,7 +143,7 @@
    "@babel/helper-define-polyfill-provider": "1.0.0",
    "@babel/plugin-transform-runtime": "8.0.1",
    "@babel/preset-env": "8.0.2",
-    "@bundle-stats/plugin-webpack-filter": "4.22.3",
+    "@bundle-stats/plugin-webpack-filter": "4.22.2",
    "@eslint/js": "10.0.1",
    "@gfx/zopfli": "1.0.15",
    "@html-eslint/eslint-plugin": "0.65.0",
@@ -154,9 +152,9 @@
    "@octokit/plugin-retry": "8.1.1",
    "@octokit/rest": "22.0.1",
    "@playwright/test": "1.62.1",
-    "@rsdoctor/rspack-plugin": "1.6.3",
+    "@rsdoctor/rspack-plugin": "1.6.2",
    "@rspack/core": "2.1.10",
-    "@rspack/dev-server": "2.2.1",
+    "@rspack/dev-server": "2.2.0",
    "@types/babel__plugin-transform-runtime": "7.9.5",
    "@types/chromecast-caf-receiver": "6.0.26",
    "@types/chromecast-caf-sender": "1.0.11",
@@ -167,19 +165,18 @@
    "@types/leaflet-draw": "1.0.13",
    "@types/leaflet.markercluster": "1.5.6",
    "@types/lodash.merge": "4.6.9",
-    "@types/luxon": "3.7.5",
+    "@types/luxon": "3.7.4",
    "@types/qrcode": "1.5.6",
    "@types/sortablejs": "1.15.9",
    "@types/tar": "7.0.87",
    "@typescript/native": "npm:[email protected]",
-    "@versatiles/style": "5.13.1",
    "@vitest/coverage-v8": "4.1.11",
    "babel-loader": "10.1.1",
    "babel-plugin-polyfill-corejs3": "1.0.0",
    "browserslist": "4.28.8",
    "browserslist-useragent-regexp": "4.1.4",
    "del": "8.0.1",
-    "eslint": "10.9.0",
+    "eslint": "10.8.1",
    "eslint-config-prettier": "10.1.8",
    "eslint-import-resolver-webpack": "0.13.11",
    "eslint-plugin-import-x": "4.17.1",
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"

 [project]
 name         = "home-assistant-frontend"
-version      = "20260826.1"
+version      = "20260729.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"
@@ -27,7 +27,6 @@ const ALLOWED_LICENSES = new Set([
  "0BSD",
  "CC0-1.0",
  "(MIT OR CC0-1.0)",
-  "(MIT OR Apache-2.0)",
  "(MIT AND Zlib)",
  "Python-2.0", // argparse - Python Software Foundation License (permissive)
  "Public Domain",
@@ -8,4 +8,4 @@ set -eu -o pipefail

 cd "$(dirname "$0")/.."

-./node_modules/.bin/gulp gen-device-classes
+./node_modules/.bin/gulp gen-numeric-device-classes
@@ -1,11 +0,0 @@
-#!/usr/bin/env bash
-
-# Safe bash settings
-# -e            Exit on command fail
-# -u            Exit on unset variable
-# -o pipefail   Exit if piped command has error code
-set -eu -o pipefail
-
-cd "$(dirname "$0")/.."
-
-./node_modules/.bin/gulp gen-sensor-entity-constants
@@ -1,26 +1,13 @@
-import type { Map } from "leaflet";
-import type { MapBaseLayer } from "../map/base-layer";
-import { createBaseLayer, MAP_MAX_ZOOM, MAP_MIN_ZOOM } from "../map/base-layer";
+import type { Map, TileLayer } from "leaflet";

 // Sets up a Leaflet map on the provided DOM element
 // eslint-disable-next-line @typescript-eslint/consistent-type-imports
 export type LeafletModuleType = typeof import("leaflet");

-export interface LeafletMapSetup {
-  map: Map;
-  leaflet: LeafletModuleType;
-  baseLayer: MapBaseLayer;
-}
-
 export const setupLeafletMap = async (
  mapElement: HTMLElement,
-  initialView?: {
-    latitude: number;
-    longitude: number;
-    zoom?: number;
-    darkMode?: boolean;
-  }
-): Promise<LeafletMapSetup> => {
+  initialView?: { latitude: number; longitude: number; zoom?: number }
+): Promise<[Map, LeafletModuleType, TileLayer]> => {
  if (!mapElement.parentNode) {
    throw new Error("Cannot setup Leaflet map on disconnected element");
  }
@@ -30,11 +17,7 @@ export const setupLeafletMap = async (

  await import("leaflet.markercluster");

-  const map = Leaflet.map(mapElement, {
-    minZoom: MAP_MIN_ZOOM,
-    maxZoom: MAP_MAX_ZOOM,
-  });
-  map.attributionControl.setPrefix("");
+  const map = Leaflet.map(mapElement);
  const style = document.createElement("link");
  style.setAttribute("href", "/static/images/leaflet/leaflet.css");
  style.setAttribute("rel", "stylesheet");
@@ -55,13 +38,21 @@ export const setupLeafletMap = async (
    );
  }

-  // The base layer adds itself: the vector layer only builds its MapLibre map
-  // once it is on the map, and that failing has to fall back to raster.
-  const baseLayer = await createBaseLayer(
-    Leaflet,
-    map,
-    initialView?.darkMode ?? false
-  );
+  const tileLayer = createTileLayer(Leaflet).addTo(map);

-  return { map, leaflet: Leaflet, baseLayer };
+  return [map, Leaflet, tileLayer];
 };
+
+const createTileLayer = (leaflet: LeafletModuleType): TileLayer =>
+  leaflet.tileLayer(
+    `https://basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}${
+      leaflet.Browser.retina ? "@2x.png" : ".png"
+    }`,
+    {
+      attribution:
+        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attributions">CARTO</a>',
+      subdomains: "abcd",
+      minZoom: 0,
+      maxZoom: 20,
+    }
+  );
@@ -12,13 +12,24 @@ import { getEntityContext } from "./context/get_entity_context";
 const DEFAULT_SEPARATOR = " ";

 export const DEFAULT_ENTITY_NAME = [
+  { type: "parent_device" },
  { type: "device" },
  { type: "entity" },
 ] satisfies EntityNameItem[];

+export const ENTITY_NAME_TYPES = [
+  "entity",
+  "device",
+  "parent_device",
+  "area",
+  "floor",
+] as const;
+
+export type EntityNameType = (typeof ENTITY_NAME_TYPES)[number];
+
 export type EntityNameItem =
  | {
-      type: "entity" | "device" | "area" | "floor";
+      type: EntityNameType;
    }
  | {
      type: "text";
@@ -91,7 +102,7 @@ export const computeEntityNameList = (
  areas: HomeAssistant["areas"],
  floors: HomeAssistant["floors"]
 ): (string | undefined)[] => {
-  const { device, area, floor } = getEntityContext(
+  const { device, parentDevice, area, floor } = getEntityContext(
    stateObj,
    entities,
    devices,
@@ -105,6 +116,8 @@ export const computeEntityNameList = (
        return computeEntityName(stateObj, entities, devices);
      case "device":
        return device ? computeDeviceName(device) : undefined;
+      case "parent_device":
+        return parentDevice ? computeDeviceName(parentDevice) : undefined;
      case "area":
        return area ? computeAreaName(area) : undefined;
      case "floor":
@@ -136,14 +149,20 @@ export const computeEntityPickerDisplay = (
  >,
  stateObj: HassEntity
 ): EntityPickerDisplay => {
-  const [entityName, deviceName, areaName] = computeEntityNameList(
-    stateObj,
-    [{ type: "entity" }, { type: "device" }, { type: "area" }],
-    hass.entities,
-    hass.devices,
-    hass.areas,
-    hass.floors
-  );
+  const [entityName, deviceName, parentDeviceName, areaName] =
+    computeEntityNameList(
+      stateObj,
+      [
+        { type: "entity" },
+        { type: "device" },
+        { type: "parent_device" },
+        { type: "area" },
+      ],
+      hass.entities,
+      hass.devices,
+      hass.areas,
+      hass.floors
+    );

  const isRTL = computeRTL(
    hass.language,
@@ -152,7 +171,7 @@ export const computeEntityPickerDisplay = (

  const primary = entityName || deviceName || stateObj.entity_id;
  const secondary =
-    [areaName, entityName ? deviceName : undefined]
+    [areaName, parentDeviceName, entityName ? deviceName : undefined]
      .filter(Boolean)
      .join(isRTL ? " ◂ " : " ▸ ") || undefined;

@@ -13,6 +13,7 @@ import { getDeviceAreaId } from "./get_device_context";
 interface EntityContext {
  entity: EntityRegistryDisplayEntry | null;
  device: DeviceRegistryEntry | null;
+  parentDevice: DeviceRegistryEntry | null;
  area: AreaRegistryEntry | null;
  floor: FloorRegistryEntry | null;
 }
@@ -31,6 +32,7 @@ export const getEntityContext = (
    return {
      entity: null,
      device: null,
+      parentDevice: null,
      area: null,
      floor: null,
    };
@@ -65,6 +67,9 @@ export const getEntityEntryContext = (
  const entity = entities[entry.entity_id];
  const deviceId = entry?.device_id;
  const device = deviceId ? devices[deviceId] : undefined;
+  const parentDevice = device?.parent_device_id
+    ? devices[device.parent_device_id]
+    : undefined;
  const areaId =
    entry?.area_id || (device ? getDeviceAreaId(device, devices) : undefined);
  const area = areaId ? areas[areaId] : undefined;
@@ -74,6 +79,7 @@ export const getEntityEntryContext = (
  return {
    entity: entity,
    device: device || null,
+    parentDevice: parentDevice || null,
    area: area || null,
    floor: floor || null,
  };
@@ -33,10 +33,7 @@ const normalizeFilterArray = <T>(
 };

 export const generateEntityFilter = (
-  hass: Pick<
-    HomeAssistant,
-    "states" | "entities" | "devices" | "areas" | "floors"
-  >,
+  hass: HomeAssistant,
  filter: EntityFilter
 ): EntityFilterFunc => {
  const domains = filter.domain
@@ -304,9 +304,6 @@ export const DOMAIN_OPTIONS_ATTRIBUTES: Record<
    swing_mode: "swing_modes",
    swing_horizontal_mode: "swing_horizontal_modes",
  },
-  cover: {
-    speed: "supported_speeds",
-  },
  event: {
    event_type: "event_types",
  },
@@ -1,230 +0,0 @@
-import type { maplibreGL } from "@maplibre/maplibre-gl-leaflet";
-import type { Map as LeafletMap } from "leaflet";
-import type { StyleSpecification } from "maplibre-gl";
-import type { LeafletModuleType } from "../dom/setup-leaflet-map";
-
-// Shortbread vector tiles from the OpenStreetMap Foundation. Only their tile
-// endpoint sends CORS headers, so the style, glyphs and sprites are ours to
-// serve - see build-scripts/gulp/map-assets.js. The credit comes from the
-// TileJSON rather than from here, deliberately: it follows whoever serves the
-// tiles.
-const VECTOR_STYLES = {
-  light: "/static/map/light.json",
-  dark: "/static/map/dark.json",
-} as const;
-
-// Fallback for browsers without WebGL2, which MapLibre needs even for raster,
-// so it stays a Leaflet tile layer. Still CARTO, and temporarily so: OSM's
-// raster blocks a browser that sends no Referer, and the only referrer a browser
-// can send is its origin, which identifies a Nabu Casa installation.
-const RASTER_TILE_URL = "https://basemaps.cartocdn.com/rastertiles/voyager";
-const CARTO_ATTRIBUTION =
-  '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>, ' +
-  '&copy; <a href="https://carto.com/attributions">CARTO</a>';
-
-// Browsers keep about 16 live WebGL contexts and drop the oldest, so a dashboard
-// full of map cards loses its first ones for good - nothing frees a slot for
-// MapLibre to reclaim. A transient loss does get restored, hence the grace.
-const CONTEXT_RESTORE_GRACE = 2000;
-
-// On the map, not the layer: only Leaflet tile layers report their own limits,
-// and marker clustering throws without a maximum. The floor is 1 because at
-// Leaflet zoom 0 the adapter drives MapLibre to -1, outside its range.
-export const MAP_MIN_ZOOM = 1;
-export const MAP_MAX_ZOOM = 20;
-
-export interface MapBaseLayer {
-  // A no-op for raster, which has no dark variant and is inverted in CSS.
-  setDarkMode: (darkMode: boolean) => void;
-}
-
-let webGL2Supported: boolean | undefined;
-
-// Rules out iOS below 15, older Android tablets, and blocklisted drivers.
-const supportsWebGL2 = (): boolean => {
-  if (webGL2Supported === undefined) {
-    try {
-      const context = document.createElement("canvas").getContext("webgl2");
-      webGL2Supported = Boolean(context);
-      // Contexts are scarce; the probe must not keep one.
-      context?.getExtension("WEBGL_lose_context")?.loseContext();
-    } catch {
-      webGL2Supported = false;
-    }
-  }
-  return webGL2Supported;
-};
-
-// Asset URLs are stored origin relative so they follow the instance's host, but
-// MapLibre rejects a relative sprite URL. The glyph URL is left alone: URL
-// encoding would mangle its {fontstack} and {range} placeholders.
-const loadStyle = async (url: string): Promise<StyleSpecification> => {
-  const style: StyleSpecification = await (await fetch(url)).json();
-  if (typeof style.sprite === "string") {
-    style.sprite = new URL(style.sprite, location.href).href;
-  } else if (Array.isArray(style.sprite)) {
-    style.sprite = style.sprite.map((sprite) => ({
-      ...sprite,
-      url: new URL(sprite.url, location.href).href,
-    }));
-  }
-  return style;
-};
-
-const createVectorLayer = async (
-  createLayer: typeof maplibreGL,
-  leaflet: LeafletModuleType,
-  map: LeafletMap,
-  darkMode: boolean
-): Promise<MapBaseLayer | undefined> => {
-  let layer: ReturnType<typeof maplibreGL> | undefined;
-
-  try {
-    layer = createLayer({
-      style: await loadStyle(VECTOR_STYLES[darkMode ? "dark" : "light"]),
-      // Draws CJK, kana and hangul with a device font, which is why we ship a
-      // tenth of the glyph set. No referrer is set: the endpoint serves without
-      // one, and the only one a browser can send identifies the installation.
-      localIdeographFontFamily: "sans-serif",
-    });
-    // The plugin builds the MapLibre map in `onAdd`, so a refused context, a
-    // blocked worker or a rejected blob URL throws here. Keep it inside the
-    // guard or those lose the raster fallback.
-    layer.addTo(map);
-  } catch {
-    if (layer) {
-      try {
-        layer.remove();
-      } catch {
-        // May never have finished being added.
-      }
-    }
-    return undefined;
-  }
-
-  // Tracked apart because a failed request must roll back to what is displayed,
-  // not to the opposite of what it asked for - with several in flight those are
-  // different, and guessing wrong makes the next toggle a permanent no-op.
-  let appliedDarkMode = darkMode;
-  let requestedDarkMode = darkMode;
-  // Styles are fetched, so only the newest request may touch the map.
-  let latestRequest = 0;
-  let vector = true;
-
-  const glMap = layer.getMaplibreMap();
-  let fallbackTimeout: number | undefined;
-  let contextLost = false;
-
-  // Declared first, but only ever called once all three exist.
-  const handleVisibilityChange = () => {
-    if (contextLost) {
-      scheduleSwap();
-    }
-  };
-
-  const swapToRaster = () => {
-    vector = false;
-    document.removeEventListener("visibilitychange", handleVisibilityChange);
-    try {
-      layer.remove();
-    } catch {
-      // Nothing left to detach.
-    }
-    createRasterLayer(leaflet, map);
-  };
-
-  const scheduleSwap = () => {
-    clearTimeout(fallbackTimeout);
-    // Backgrounding also drops the context, and there it comes back on return.
-    // Running the clock then would make switching apps enough to lose vector.
-    if (!vector || document.hidden) {
-      return;
-    }
-    fallbackTimeout = window.setTimeout(swapToRaster, CONTEXT_RESTORE_GRACE);
-  };
-
-  glMap.on("webglcontextlost", () => {
-    contextLost = true;
-    scheduleSwap();
-  });
-  glMap.on("webglcontextrestored", () => {
-    contextLost = false;
-    clearTimeout(fallbackTimeout);
-  });
-  document.addEventListener("visibilitychange", handleVisibilityChange);
-
-  map.on("unload", () => {
-    // Otherwise the timer revives a map that is already gone.
-    clearTimeout(fallbackTimeout);
-    document.removeEventListener("visibilitychange", handleVisibilityChange);
-  });
-
-  return {
-    setDarkMode: (newDarkMode: boolean) => {
-      if (!vector || newDarkMode === requestedDarkMode) {
-        return;
-      }
-      requestedDarkMode = newDarkMode;
-      const request = ++latestRequest;
-
-      loadStyle(VECTOR_STYLES[newDarkMode ? "dark" : "light"])
-        .then((style) => {
-          if (request === latestRequest) {
-            appliedDarkMode = newDarkMode;
-            layer.getMaplibreMap()?.setStyle(style);
-          }
-        })
-        .catch(() => {
-          if (request === latestRequest) {
-            requestedDarkMode = appliedDarkMode;
-          }
-        });
-    },
-  };
-};
-
-const createRasterLayer = (
-  leaflet: LeafletModuleType,
-  map: LeafletMap
-): MapBaseLayer => {
-  leaflet
-    .tileLayer(
-      // These are the old retina tablets, and CARTO serves @2x - sharp tiles at
-      // the same request count, where `detectRetina` would fetch a zoom deeper
-      // at four times as many.
-      `${RASTER_TILE_URL}/{z}/{x}/{y}${leaflet.Browser.retina ? "@2x" : ""}.png`,
-      {
-        attribution: CARTO_ATTRIBUTION,
-        maxZoom: MAP_MAX_ZOOM,
-      }
-    )
-    .addTo(map);
-
-  return { setDarkMode: () => undefined };
-};
-
-export const createBaseLayer = async (
-  leaflet: LeafletModuleType,
-  map: LeafletMap,
-  darkMode: boolean
-): Promise<MapBaseLayer> => {
-  if (supportsWebGL2()) {
-    let vectorLayer: MapBaseLayer | undefined;
-    try {
-      const { maplibreGL: createLayer } =
-        await import("@maplibre/maplibre-gl-leaflet");
-      vectorLayer = await createVectorLayer(
-        createLayer,
-        leaflet,
-        map,
-        darkMode
-      );
-    } catch {
-      // No chunk, no vector map - but still a map.
-    }
-    if (vectorLayer) {
-      return vectorLayer;
-    }
-  }
-  return createRasterLayer(leaflet, map);
-};
@@ -31,8 +31,6 @@ export type FormatEntityAttributeNameFunc = (
  attribute: string
 ) => string;

-export type EntityNameType = "entity" | "device" | "area" | "floor";
-
 export type FormatEntityNameFunc = (
  stateObj: HassEntity,
  name: EntityNameItem | EntityNameItem[],
@@ -55,20 +55,17 @@ export const timeCachePromiseFunc = async <T, H = HomeAssistant>(
  }

  const resultPromise = func(hass, ...args);
-  const cachePromise = resultPromise.then((result) => ({
-    result,
-    cacheKey: generateCacheKey?.(hass, result),
-  }));
-  anyHass[cacheKey] = cachePromise;
+  anyHass[cacheKey] = resultPromise;

-  cachePromise.then(
+  resultPromise.then(
    // When successful, set timer to clear cache
    (result) => {
-      anyHass[cacheKey] = result;
+      anyHass[cacheKey] = {
+        result,
+        cacheKey: generateCacheKey?.(hass, result),
+      };
      setTimeout(() => {
-        if (anyHass[cacheKey] === result) {
-          anyHass[cacheKey] = undefined;
-        }
+        anyHass[cacheKey] = undefined;
      }, cacheTime);
    },
    // On failure, clear cache right away
@@ -27,57 +27,26 @@ const SONIFICATION_LANGUAGES = new Set(["de", "en", "es", "fr", "hmn", "it"]);
 // lead nowhere.
 const MIN_NAVIGABLE_POINTS = 2;

-const itemValues = (raw: unknown): unknown[] | null => {
-  if (Array.isArray(raw)) {
-    return raw;
-  }
-  if (raw && typeof raw === "object") {
-    const { value } = raw as { value?: unknown };
-    if (Array.isArray(value)) {
-      return value;
-    }
-  }
-  return null;
-};
-
-// ECharts spells empty values and numbers as strings too, and neither names a
-// category.
-const NON_CATEGORY_STRINGS = new Set(["-", "NaN", "null", "undefined"]);
-
-const isCategoryKey = (value: unknown): boolean =>
-  typeof value === "string" &&
-  !NON_CATEGORY_STRINGS.has(value) &&
-  Number.isNaN(Number(value));
-
-// A chart with the value axis on x, like the energy device charts, encodes its
-// items value-first: [amount, "sensor.foo"]. The extension only reads a series
-// that way when every item has that shape, so mirror the same gate.
-const isValueFirstSeries = (data: readonly unknown[]): boolean =>
-  data.length > 0 &&
-  data.every((raw) => {
-    const values = itemValues(raw);
-    return (
-      !!values && typeof values[0] === "number" && isCategoryKey(values[1])
-    );
-  });
-
-// Mirrors the extension's own reading of a point: it takes `value` as [x, y]
-// (or [y, category] in a value-first series) and drops anything whose y is not
-// a real number, which rejects gap-only series. Counts no further than `limit`
-// so this stays cheap on charts with many points.
+// 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;
  }
-  const valueFirst = isValueFirstSeries(data);
  let found = 0;
  for (const raw of data) {
    let y: unknown = raw;
-    const values = itemValues(raw);
-    if (values) {
-      y = valueFirst ? values[0] : values.length > 1 ? values[1] : values[0];
+    if (Array.isArray(raw)) {
+      y = raw.length > 1 ? raw[1] : raw[0];
    } else if (raw && typeof raw === "object") {
-      y = (raw as { value?: unknown }).value;
+      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;
@@ -126,10 +95,6 @@ interface SonifyChartOptions {
  localize: LocalizeFunc;
  locale: FrontendLocaleData;
  config: HassConfig;
-  // Maps a category key or item name to what should be announced for it, so
-  // cards that key their data on ids (like the energy device charts) can have
-  // the display names read out instead. Returning undefined keeps the original.
-  formatLabel?: (label: string) => string | undefined;
  onError: (error: string) => void;
 }

@@ -198,47 +163,6 @@ const appendSonificationStyles = () => {
  document.head.append(style);
 };

-// Rebuilds the labels the extension would announce — the category axis's data,
-// or the item names on pies, which ignore whatever vestigial axes the chart
-// options carry — with each one run through the card's formatter. Returns
-// undefined when there is nothing to reword, so the extension's own labels
-// stay untouched.
-const buildValueLabels = (
-  categoryAxis: { type?: string; data?: unknown } | undefined,
-  firstSeries: { type?: string; data?: unknown } | undefined,
-  formatLabel?: (label: string) => string | undefined
-): string[] | undefined => {
-  if (!formatLabel) {
-    return undefined;
-  }
-  const axisData =
-    categoryAxis?.type === "category" &&
-    Array.isArray(categoryAxis.data) &&
-    categoryAxis.data.length
-      ? categoryAxis.data
-      : undefined;
-  const labels = axisData
-    ? axisData.map((entry) =>
-        entry && typeof entry === "object"
-          ? String((entry as { value?: unknown }).value ?? "")
-          : String(entry ?? "")
-      )
-    : firstSeries?.type === "pie" && Array.isArray(firstSeries.data)
-      ? firstSeries.data.map((raw) => {
-          const name = (raw as { name?: unknown } | null)?.name;
-          if (typeof name === "string") {
-            return name;
-          }
-          const values = itemValues(raw);
-          return values && isCategoryKey(values[1]) ? String(values[1]) : "";
-        })
-      : undefined;
-  if (!labels?.length || labels.every((label) => !label)) {
-    return undefined;
-  }
-  return labels.map((label) => formatLabel(label) ?? label);
-};
-
 export const sonifyChart = async (
  chart: EChartsType,
  options: SonifyChartOptions
@@ -255,8 +179,8 @@ export const sonifyChart = async (
  if (!chartOptions) {
    return null;
  }
-  const xAxis = ensureArray(chartOptions.xAxis)?.[0] as XAXisOption | undefined;
-  const yAxis = ensureArray(chartOptions.yAxis)?.[0] as YAXisOption | undefined;
+  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
@@ -272,25 +196,16 @@ export const sonifyChart = async (
  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. On a
-  // horizontal chart the announced x is the category from the y axis and the
-  // announced y is the value from the x axis, so the sources swap.
+  // axis to name when there is no category axis, so label both explicitly.
  const isTimeAxis = xAxis?.type === "time";
-  const isHorizontal = xAxis?.type === "value" && yAxis?.type === "category";
-  const valueLabels = buildValueLabels(
-    isHorizontal ? yAxis : xAxis,
-    readable[0],
-    options.formatLabel
-  );
  const x = {
    label:
-      (isHorizontal ? yAxis?.name : xAxis?.name) ||
+      xAxis?.name ||
      localize(
        isTimeAxis
          ? "ui.components.history_charts.time"
          : "ui.components.history_charts.category"
      ),
-    ...(valueLabels ? { valueLabels } : {}),
    // Time series carry raw timestamps, which would otherwise be announced as
    // epoch milliseconds.
    format: isTimeAxis
@@ -298,9 +213,7 @@ export const sonifyChart = async (
      : undefined,
  };
  const y = {
-    label:
-      (isHorizontal ? xAxis?.name : yAxis?.name) ||
-      localize("ui.components.history_charts.value"),
+    label: yAxis?.name || localize("ui.components.history_charts.value"),
  };

  let connection: ReturnType<typeof connect>;
@@ -10,16 +10,12 @@ interface MeanFrame {
 }

 interface MinMaxFrame {
-  // A frame can hold a gap marker before any value lands in it, so the min/max
-  // slots below only mean something once this is true.
-  hasValue: boolean;
  minPoint: Point;
  minX: number;
  minY: number;
  maxPoint: Point;
  maxX: number;
  maxY: number;
-  gapPoint: Point | undefined;
 }

 const SECOND = 1000;
@@ -53,25 +49,6 @@ function snapFrameSize(step: number): number {
  return snapped;
 }

-// y is NaN for a frame seeded by a gap marker, which has no value yet.
-function newFrame(
-  point: Point,
-  x: number,
-  y: number,
-  gapPoint: Point | undefined
-): MinMaxFrame {
-  return {
-    hasValue: gapPoint === undefined,
-    minPoint: point,
-    minX: x,
-    minY: y,
-    maxPoint: point,
-    maxX: x,
-    maxY: y,
-    gapPoint,
-  };
-}
-
 export function downSampleLineData<
  T extends [number, number] | NonNullable<LineSeriesOption["data"]>[number],
 >(
@@ -105,10 +82,7 @@ export function downSampleLineData<
      const pointData = getPointData(point);
      if (!Array.isArray(pointData)) continue;
      const x = Number(pointData[0]);
-      const rawY = pointData[1] as number | null;
-      // Number(null) is 0, which would drag the mean towards zero
-      if (rawY === null) continue;
-      const y = Number(rawY);
+      const y = Number(pointData[1]);
      if (isNaN(x) || isNaN(y)) continue;

      const frameIndex = Math.floor(x / step);
@@ -146,34 +120,21 @@ export function downSampleLineData<
    const pointData = getPointData(point);
    if (!Array.isArray(pointData)) continue;
    const x = Number(pointData[0]);
-    if (isNaN(x)) continue;
-    const rawY = pointData[1] as number | null;
-    if (rawY === null) {
-      // The chart data modules push a null value to break the line where an
-      // entity was unavailable. Number(null) is 0, so such a marker must stay
-      // out of the comparisons below, where it would win the minimum slot
-      // whenever the readings are positive and discard the frame's real
-      // minimum. One marker per frame is enough to break the line, and keeping
-      // them all would blow up the output on series that are mostly null. The
-      // last one wins: where the break lands only depends on which points it
-      // sits between, not on its own x.
-      const gapIndex = Math.floor(x / step);
-      const gapFrame = frames.get(gapIndex);
-      if (gapFrame) {
-        gapFrame.gapPoint = point;
-      } else {
-        frames.set(gapIndex, newFrame(point, x, NaN, point));
-      }
-      continue;
-    }
-    const y = Number(rawY);
-    if (isNaN(y)) continue;
+    const y = Number(pointData[1]);
+    if (isNaN(x) || isNaN(y)) continue;

    const frameIndex = Math.floor(x / step);
    const frame = frames.get(frameIndex);
    if (!frame) {
-      frames.set(frameIndex, newFrame(point, x, y, undefined));
-    } else if (frame.hasValue) {
+      frames.set(frameIndex, {
+        minPoint: point,
+        minX: x,
+        minY: y,
+        maxPoint: point,
+        maxX: x,
+        maxY: y,
+      });
+    } else {
      // Match the original strict-less / strict-greater comparisons so the
      // first occurrence wins on ties.
      if (y < frame.minY) {
@@ -186,40 +147,18 @@ export function downSampleLineData<
        frame.maxX = x;
        frame.maxY = y;
      }
-    } else {
-      // the frame held nothing but a marker so far
-      frame.hasValue = true;
-      frame.minPoint = point;
-      frame.minX = x;
-      frame.minY = y;
-      frame.maxPoint = point;
-      frame.maxX = x;
-      frame.maxY = y;
    }
  }

  const result: T[] = [];
  for (const frame of frames.values()) {
-    if (frame.hasValue) {
-      // The order of the data must be preserved so max may be before min
-      if (frame.minX > frame.maxX) {
-        result.push(frame.maxPoint as T);
-      }
-      result.push(frame.minPoint as T);
-      if (frame.minX < frame.maxX) {
-        result.push(frame.maxPoint as T);
-      }
+    // The order of the data must be preserved so max may be before min
+    if (frame.minX > frame.maxX) {
+      result.push(frame.maxPoint as T);
    }
-    if (frame.gapPoint !== undefined) {
-      // A marker followed by a value in its own frame is a gap that closed
-      // within one frame, which is about one device pixel: too narrow to show.
-      // The kept points are exactly min and max, so comparing against the
-      // later of the two catches that without any work on the ingest path. A
-      // marker-only frame compares against its own x and always passes.
-      const lastValueX = frame.minX > frame.maxX ? frame.minX : frame.maxX;
-      if (Number(getPointData(frame.gapPoint)[0]) >= lastValueX) {
-        result.push(frame.gapPoint as T);
-      }
+    result.push(frame.minPoint as T);
+    if (frame.minX < frame.maxX) {
+      result.push(frame.maxPoint as T);
    }
  }

@@ -117,11 +117,6 @@ export class HaChartBase extends LitElement {

  @property({ type: String }) public height?: string;

-  // Lets cards that key their data on ids have display names announced
-  // instead when the chart is navigated with Chart2Music.
-  @property({ attribute: false })
-  public sonificationLabelFormatter?: (label: string) => string | undefined;
-
  @property({ attribute: "expand-legend", type: Boolean })
  public expandLegend?: boolean;

@@ -588,7 +583,6 @@ export class HaChartBase extends LitElement {
        localize: this.hass.localize,
        locale: this.hass.locale,
        config: this.hass.config,
-        formatLabel: this.sonificationLabelFormatter,
        onError: () => {
          // Charts the extension cannot describe stay silent rather than
          // dropping an error on someone who only pressed Tab.
@@ -12,6 +12,7 @@ import { fullEntitiesContext } from "../../data/context";
 import type { DeviceAutomation } from "../../data/device/device_automation";
 import {
  deviceAutomationsEqual,
+  deviceAutomationsSimilar,
  sortDeviceAutomations,
 } from "../../data/device/device_automation";
 import type { EntityRegistryEntry } from "../../data/entity/entity_registry";
@@ -179,15 +180,12 @@ export abstract class HaDeviceAutomationPicker<
      (a, idx) => value === `${a.device_id}_${idx}`
    );

-    const described =
-      automation ?? (this.value?.domain ? this.value : undefined);
-
-    const text = described
+    const text = automation
      ? this._localizeDeviceAutomation(
          this.hass.localize,
          this.hass.states,
          this._entityReg,
-          described
+          automation
        )
      : value === NO_AUTOMATION_KEY
        ? this.NO_AUTOMATION_TEXT
@@ -197,24 +195,29 @@ export abstract class HaDeviceAutomationPicker<
  };

  private async _updateDeviceInfo() {
-    // Asking a removed device for its automations fails rather than returning
-    // an empty list.
    this._automations = this.deviceId
      ? (
-          await this._fetchDeviceAutomations(
-            this.hass.callWS,
-            this.deviceId
-          ).catch(() => [] as T[])
+          await this._fetchDeviceAutomations(this.hass.callWS, this.deviceId)
        ).sort(sortDeviceAutomations)
      : // No device, clear the list of automations
        [];

-    // If there is no value, or if we have changed the device ID, reset the value.
+    // If there is no value, or if we have changed the device ID, reset the
+    // value. When the device changed (for example after replacing a removed
+    // device), try to keep the same automation type/subtype on the new device
+    // before falling back to the first available automation.
    if (!this.value || this.value.device_id !== this.deviceId) {
+      const equivalent =
+        this.value && this.deviceId
+          ? this._automations.find((automation) =>
+              deviceAutomationsSimilar(automation, this.value!)
+            )
+          : undefined;
      this._setValue(
-        this._automations.length
-          ? this._automations[0]
-          : this._createNoAutomation(this.deviceId)
+        equivalent ||
+          (this._automations.length
+            ? this._automations[0]
+            : this._createNoAutomation(this.deviceId))
      );
    }
    this._renderEmpty = true;
@@ -1,4 +1,4 @@
-import { mdiSwapHorizontal } from "@mdi/js";
+import { mdiAlertOutline } from "@mdi/js";
 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";
@@ -22,7 +22,6 @@ import {
  type DeviceRegistryEntry,
 } from "../../data/device/device_registry";
 import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
-import { domainToName } from "../../data/integration";
 import type { HomeAssistant } from "../../types";
 import { brandsUrl } from "../../util/brands-url";
 import "../ha-alert";
@@ -105,14 +104,6 @@ export class HaDevicePicker extends LitElement {
  @property({ attribute: "hide-clear-icon", type: Boolean })
  public hideClearIcon = false;

-  /**
-   * The split devices that can actually replace the current value, when the
-   * caller knows better than this picker. Narrows the replacement candidates,
-   * so the user is only asked to choose when there is a real choice.
-   */
-  @property({ attribute: false })
-  public replacementDeviceIds?: string[];
-
  @query("ha-generic-picker") private _picker?: HaGenericPicker;

  @state() private _configEntryLookup: Record<string, ConfigEntry> = {};
@@ -196,8 +187,7 @@ export class HaDevicePicker extends LitElement {
      value: string | undefined,
      _devices: HomeAssistant["devices"],
      compositeSplits: DeviceCompositeSplits | undefined,
-      items: (DevicePickerItem | string)[],
-      replacementDeviceIds: string[] | undefined
+      items: (DevicePickerItem | string)[]
    ) => {
      if (!value || !compositeSplits || this.hass.devices[value]) {
        return undefined;
@@ -213,11 +203,7 @@ export class HaDevicePicker extends LitElement {
          .filter((item): item is DevicePickerItem => typeof item !== "string")
          .map((item) => item.id)
      );
-      const candidates = split.split_ids.filter(
-        (id) =>
-          selectableIds.has(id) &&
-          (!replacementDeviceIds || replacementDeviceIds.includes(id))
-      );
+      const candidates = split.split_ids.filter((id) => selectableIds.has(id));
      return { candidates, primaryId: split.primary_id };
    }
  );
@@ -264,26 +250,26 @@ export class HaDevicePicker extends LitElement {
  };

  private _valueRenderer = memoizeOne(
-    (configEntriesLookup: Record<string, ConfigEntry>, isReplaced: boolean) =>
+    (
+      configEntriesLookup: Record<string, ConfigEntry>,
+      replacementName: string | undefined
+    ) =>
      (value: string) => {
        const deviceId = value;
        const device = this.hass.devices[deviceId];

        if (!device) {
-          // The removed device has no name left to show, so say what happened
-          // to it instead. The alert below names the replacements. Without a
-          // replacement, fall back to the normal "not found" display.
-          if (isReplaced) {
+          // When the device was replaced and a replacement is available, show
+          // the replacement device's name. Otherwise fall back to the normal
+          // "not found" display of the raw id.
+          if (replacementName) {
            return html`
              <ha-svg-icon
                slot="start"
-                .path=${mdiSwapHorizontal}
+                style="color: var(--warning-color)"
+                .path=${mdiAlertOutline}
              ></ha-svg-icon>
-              <span slot="headline"
-                >${this.hass.localize(
-                  "ui.components.device-picker.device_replaced"
-                )}</span
-              >
+              <span slot="headline">${replacementName}</span>
            `;
          }
          return html`<span slot="headline">${deviceId}</span>`;
@@ -413,23 +399,31 @@ export class HaDevicePicker extends LitElement {
            this.value,
            this.hass.devices,
            this._compositeSplits,
-            this._getItems(),
-            this.replacementDeviceIds
+            this._getItems()
          )
        : undefined;

    // Only treat the value as "replaced" when there is an available
    // replacement device; otherwise fall back to normal "not found" behavior.
    const canReplace = !!replacement?.candidates.length;
+    const replacementName = canReplace
+      ? computeDeviceName(
+          this.hass.devices[
+            replacement!.primaryId &&
+            replacement!.candidates.includes(replacement!.primaryId)
+              ? replacement!.primaryId
+              : replacement!.candidates[0]
+          ]
+        )
+      : undefined;

    const valueRenderer = this._valueRenderer(
      this._configEntryLookup,
-      canReplace
+      replacementName
    );

    return html`
      <ha-generic-picker
-        .noUnknownState=${canReplace}
        .hass=${this.hass}
        .autofocus=${this.autofocus}
        .disabled=${this.disabled}
@@ -449,9 +443,14 @@ export class HaDevicePicker extends LitElement {
        .hideClearIcon=${this.hideClearIcon}
        .valueRenderer=${valueRenderer}
        .searchKeys=${deviceComboBoxKeys}
-        .unknownItemText=${this.hass.localize(
-          "ui.components.device-picker.unknown"
-        )}
+        .unknownItemText=${
+          replacement?.candidates.length
+            ? this.hass.localize(
+                "ui.components.device-picker.device_replaced_count",
+                { count: replacement.candidates.length }
+              )
+            : this.hass.localize("ui.components.device-picker.unknown")
+        }
        @value-changed=${this._valueChanged}
      >
      </ha-generic-picker>
@@ -465,52 +464,30 @@ export class HaDevicePicker extends LitElement {
  }) {
    const { candidates } = replacement;

-    // The split devices all inherit the composite's name, so the integration is
-    // what tells them apart.
-    const replacementDevice =
-      candidates.length === 1 ? this.hass.devices[candidates[0]] : undefined;
-    const replacementName = replacementDevice
-      ? computeDeviceName(replacementDevice)
-      : undefined;
-    const replacementDomain = replacementDevice?.primary_config_entry
-      ? this._configEntryLookup[replacementDevice.primary_config_entry]?.domain
-      : undefined;
+    const replacementName =
+      candidates.length === 1
+        ? computeDeviceName(this.hass.devices[candidates[0]])
+        : undefined;

    return html`
      <ha-alert alert-type="warning">
        ${
-          replacementName && replacementDomain
+          replacementName
            ? this.hass.localize(
-                "ui.components.device-picker.device_replaced_by_one_integration",
-                {
-                  device: replacementName,
-                  integration: domainToName(
-                    this.hass.localize,
-                    replacementDomain
-                  ),
-                }
+                "ui.components.device-picker.device_replaced_by_one",
+                { device: replacementName }
+              )
+            : this.hass.localize(
+                "ui.components.device-picker.device_replaced_by_multiple",
+                { count: candidates.length }
              )
-            : replacementName
-              ? this.hass.localize(
-                  "ui.components.device-picker.device_replaced_by_one",
-                  { device: replacementName }
-                )
-              : this.hass.localize(
-                  "ui.components.device-picker.device_replaced_by_multiple",
-                  { count: candidates.length }
-                )
        }
        <ha-button
          slot="action"
          appearance="plain"
-          variant="warning"
          @click=${this._handleReplace}
        >
-          ${
-            candidates.length === 1
-              ? this.hass.localize("ui.components.device-picker.replace_update")
-              : this.hass.localize("ui.components.device-picker.replace_choose")
-          }
+          ${this.hass.localize("ui.components.device-picker.replace_device")}
        </ha-button>
      </ha-alert>
    `;
@@ -521,8 +498,7 @@ export class HaDevicePicker extends LitElement {
      this.value,
      this.hass.devices,
      this._compositeSplits,
-      this._getItems(),
-      this.replacementDeviceIds
+      this._getItems()
    );
    if (!replacement?.candidates.length) {
      return;
@@ -7,9 +7,12 @@ import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
-import type { EntityNameItem } from "../../common/entity/compute_entity_name_display";
+import {
+  ENTITY_NAME_TYPES,
+  type EntityNameItem,
+  type EntityNameType,
+} from "../../common/entity/compute_entity_name_display";
 import { getEntityContext } from "../../common/entity/context/get_entity_context";
-import type { EntityNameType } from "../../common/translations/entity-state";
 import type { LocalizeKeys } from "../../common/translations/localize";
 import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import "../chips/ha-assist-chip";
@@ -35,9 +38,7 @@ const rowRenderer: RenderItemFunction<PickerComboBoxItem> = (item) => html`
  </ha-combo-box-item>
 `;

-const KNOWN_TYPES = new Set(["entity", "device", "area", "floor"]);
-
-const UNIQUE_TYPES = new Set(["entity", "device", "area", "floor"]);
+const KNOWN_TYPES = new Set<string>(ENTITY_NAME_TYPES);

 const formatOptionValue = (item: EntityNameItem) => {
  if (item.type === "text" && item.text) {
@@ -387,6 +388,7 @@ export class HaEntityNamePicker extends LitElement {
    );

    if (context.device) options.add("device");
+    if (context.parentDevice) options.add("parent_device");
    if (context.area) options.add("area");
    if (context.floor) options.add("floor");
    return options;
@@ -399,9 +401,7 @@ export class HaEntityNamePicker extends LitElement {

    const types = this._validTypes(entityId);

-    const items = (
-      ["entity", "device", "area", "floor"] as const
-    ).map<PickerComboBoxItem>((name) => {
+    const items = ENTITY_NAME_TYPES.map<PickerComboBoxItem>((name) => {
      const stateObj = this.hass.states[entityId];
      const isValid = types.has(name);
      const primary = this.hass.localize(
@@ -464,7 +464,7 @@ export class HaEntityNamePicker extends LitElement {

    const excludedValues = new Set(
      this._items
-        .filter((item) => UNIQUE_TYPES.has(item.type))
+        .filter((item) => KNOWN_TYPES.has(item.type))
        .map((item) => formatOptionValue(item))
    );

@@ -178,6 +178,17 @@ export class HaStateContentPicker extends LitElement {
                  ),
                });
              }
+              if (context.parentDevice) {
+                contextItems.push({
+                  id: "parent_device_name",
+                  primary: this.hass.localize(
+                    "ui.components.state-content-picker.parent_device_name"
+                  ),
+                  sorting_label: this.hass.localize(
+                    "ui.components.state-content-picker.parent_device_name"
+                  ),
+                });
+              }
              if (context.area) {
                contextItems.push({
                  id: "area_name",
@@ -52,6 +52,7 @@ const SEARCH_KEYS = [
  { name: "search_labels.entityName", weight: 10 },
  { name: "search_labels.friendlyName", weight: 9 },
  { name: "search_labels.deviceName", weight: 8 },
+  { name: "search_labels.parentDeviceName", weight: 6 },
  { name: "search_labels.areaName", weight: 6 },
  { name: "search_labels.domainName", weight: 4 },
  { name: "statisticId", weight: 3 },
@@ -292,17 +293,27 @@ export class HaStatisticPicker extends LitElement {

        const friendlyName = computeStateName(stateObj); // Keep this for search

-        const [entityName, deviceName, areaName] = computeEntityNameList(
-          stateObj,
-          [{ type: "entity" }, { type: "device" }, { type: "area" }],
-          hass.entities,
-          hass.devices,
-          hass.areas,
-          hass.floors
-        );
+        const [entityName, deviceName, parentDeviceName, areaName] =
+          computeEntityNameList(
+            stateObj,
+            [
+              { type: "entity" },
+              { type: "device" },
+              { type: "parent_device" },
+              { type: "area" },
+            ],
+            hass.entities,
+            hass.devices,
+            hass.areas,
+            hass.floors
+          );

        const primary = entityName || deviceName || id;
-        const secondary = [areaName, entityName ? deviceName : undefined]
+        const secondary = [
+          areaName,
+          parentDeviceName,
+          entityName ? deviceName : undefined,
+        ]
          .filter(Boolean)
          .join(isRTL ? " ◂ " : " ▸ ");

@@ -318,6 +329,7 @@ export class HaStatisticPicker extends LitElement {
          search_labels: {
            entityName: entityName || null,
            deviceName: deviceName || null,
+            parentDeviceName: parentDeviceName || null,
            areaName: areaName || null,
            friendlyName,
          },
@@ -395,14 +407,20 @@ export class HaStatisticPicker extends LitElement {
    const stateObj = this.hass.states[statisticId];

    if (stateObj) {
-      const [entityName, deviceName, areaName] = computeEntityNameList(
-        stateObj,
-        [{ type: "entity" }, { type: "device" }, { type: "area" }],
-        this.hass.entities,
-        this.hass.devices,
-        this.hass.areas,
-        this.hass.floors
-      );
+      const [entityName, deviceName, parentDeviceName, areaName] =
+        computeEntityNameList(
+          stateObj,
+          [
+            { type: "entity" },
+            { type: "device" },
+            { type: "parent_device" },
+            { type: "area" },
+          ],
+          this.hass.entities,
+          this.hass.devices,
+          this.hass.areas,
+          this.hass.floors
+        );

      const isRTL = computeRTL(
        this.hass.language,
@@ -410,7 +428,11 @@ export class HaStatisticPicker extends LitElement {
      );

      const primary = entityName || deviceName || statisticId;
-      const secondary = [areaName, entityName ? deviceName : undefined]
+      const secondary = [
+        areaName,
+        parentDeviceName,
+        entityName ? deviceName : undefined,
+      ]
        .filter(Boolean)
        .join(isRTL ? " ◂ " : " ▸ ");
      const friendlyName = computeStateName(stateObj); // Keep this for search
@@ -427,6 +449,7 @@ export class HaStatisticPicker extends LitElement {
        search_labels: {
          entityName: entityName || null,
          deviceName: deviceName || null,
+          parentDeviceName: parentDeviceName || null,
          areaName: areaName || null,
          friendlyName,
          statisticId,
@@ -197,17 +197,27 @@ export class HaAreaControlsPicker extends LitElement {
              return;
            }

-            const [entityName, deviceName, areaName] = computeEntityNameList(
-              stateObj,
-              [{ type: "entity" }, { type: "device" }, { type: "area" }],
-              this.hass!.entities,
-              this.hass!.devices,
-              this.hass!.areas,
-              this.hass!.floors
-            );
+            const [entityName, deviceName, parentDeviceName, areaName] =
+              computeEntityNameList(
+                stateObj,
+                [
+                  { type: "entity" },
+                  { type: "device" },
+                  { type: "parent_device" },
+                  { type: "area" },
+                ],
+                this.hass!.entities,
+                this.hass!.devices,
+                this.hass!.areas,
+                this.hass!.floors
+              );

            const primary = entityName || deviceName || entityId;
-            const secondary = [areaName, entityName ? deviceName : undefined]
+            const secondary = [
+              areaName,
+              parentDeviceName,
+              entityName ? deviceName : undefined,
+            ]
              .filter(Boolean)
              .join(isRTL ? " ◂ " : " ▸ ");

@@ -761,6 +761,9 @@ export class HaCodeEditor extends ReactiveElement {
    const deviceName = context.device
      ? computeDeviceName(context.device)
      : undefined;
+    const parentDeviceName = context.parentDevice
+      ? computeDeviceName(context.parentDevice)
+      : undefined;
    const areaName = context.area ? computeAreaName(context.area) : undefined;
    const floorName = context.floor
      ? computeFloorName(context.floor)
@@ -788,6 +791,15 @@ export class HaCodeEditor extends ReactiveElement {
      });
    }

+    if (parentDeviceName) {
+      completionItems.push({
+        label: this._i18n!.localize(
+          "ui.components.device-picker.parent_device"
+        ),
+        value: parentDeviceName,
+      });
+    }
+
    if (deviceName) {
      completionItems.push({
        label: this._i18n!.localize("ui.components.device-picker.device"),
@@ -101,7 +101,7 @@ export class HaControlSelect extends LitElement {

  private _handleOptionClick(ev: MouseEvent) {
    if (this.disabled) return;
-    const value = (ev.currentTarget as any).value;
+    const value = (ev.target as any).value;
    this.value = value;
    fireEvent(this, "value-changed", { value });
  }
@@ -109,7 +109,7 @@ export class HaControlSelect extends LitElement {
  private _handleOptionMouseDown(ev: MouseEvent) {
    if (this.disabled) return;
    ev.preventDefault();
-    const value = (ev.currentTarget as any).value;
+    const value = (ev.target as any).value;
    this._activeIndex = this.options?.findIndex(
      (option) => option.value === value
    );
@@ -121,7 +121,7 @@ export class HaControlSelect extends LitElement {

  private _handleOptionFocus(ev: FocusEvent) {
    if (this.disabled) return;
-    const value = (ev.currentTarget as any).value;
+    const value = (ev.target as any).value;
    this._activeIndex = this.options?.findIndex(
      (option) => option.value === value
    );
@@ -1,216 +0,0 @@
-import { consume } from "@lit/context";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { repeat } from "lit/directives/repeat";
-import memoizeOne from "memoize-one";
-import { ensureArray } from "../common/array/ensure-array";
-import { fireEvent } from "../common/dom/fire_event";
-import type { LocalizeFunc } from "../common/translations/localize";
-import { internationalizationContext } from "../data/context";
-import { DOMAIN_DEVICE_CLASSES } from "../data/device_classes";
-import { computeDeviceClassName } from "../data/entity/device_class";
-import type {
-  HomeAssistantInternationalization,
-  ValueChangedEvent,
-} from "../types";
-import "./chips/ha-chip-set";
-import "./chips/ha-input-chip";
-import "./ha-generic-picker";
-import type { PickerComboBoxItem } from "./ha-picker-combo-box";
-
-export const getDeviceClassOptions = (
-  domain: string,
-  localize: LocalizeFunc
-): PickerComboBoxItem[] =>
-  (DOMAIN_DEVICE_CLASSES[domain] ?? []).map((deviceClass) => {
-    const primary = computeDeviceClassName(localize, domain, deviceClass);
-    return { id: deviceClass, primary, sorting_label: primary };
-  });
-
-@customElement("ha-device-class-picker")
-export class HaDeviceClassPicker extends LitElement {
-  @property() public domain?: string;
-
-  @property({ attribute: false }) public value?: string | string[];
-
-  @property({ type: Boolean }) public multiple = false;
-
-  @property() public label?: string;
-
-  @property() public helper?: string;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @property({ type: Boolean }) public required = false;
-
-  @state()
-  @consume({ context: internationalizationContext, subscribe: true })
-  private _i18n?: HomeAssistantInternationalization;
-
-  private _loadedDomain?: string;
-
-  protected willUpdate() {
-    if (!this.domain || !this._i18n || this._loadedDomain === this.domain) {
-      return;
-    }
-    this._loadedDomain = this.domain;
-    this._i18n.loadBackendTranslation("entity_component", this.domain);
-  }
-
-  private get _value(): string[] {
-    return this.value ? ensureArray(this.value) : [];
-  }
-
-  private _deviceClassName(deviceClass: string): string {
-    return this._i18n && this.domain
-      ? computeDeviceClassName(this._i18n.localize, this.domain, deviceClass)
-      : deviceClass;
-  }
-
-  private _options = memoizeOne(
-    (
-      domain: string | undefined,
-      localize: LocalizeFunc | undefined
-    ): PickerComboBoxItem[] =>
-      domain && localize ? getDeviceClassOptions(domain, localize) : []
-  );
-
-  private _availableOptions = memoizeOne(
-    (options: PickerComboBoxItem[], selected: string[]) =>
-      options.filter((option) => !selected.includes(option.id))
-  );
-
-  private _getItems = () => {
-    const options = this._options(this.domain, this._i18n?.localize);
-    return this.multiple
-      ? this._availableOptions(options, this._value)
-      : options;
-  };
-
-  private _valueRenderer = (value: string) =>
-    html`<span slot="headline">${this._deviceClassName(value)}</span>`;
-
-  private _notFoundLabel = (search: string) => {
-    const term = html`<b>'${search}'</b>`;
-    return this._i18n
-      ? this._i18n.localize("ui.components.device-class-picker.no_match", {
-          term,
-        })
-      : html`No device classes found for ${term}`;
-  };
-
-  protected render() {
-    const localize = this._i18n?.localize;
-    const emptyLabel = localize?.(
-      "ui.components.device-class-picker.no_device_classes"
-    );
-
-    if (this.multiple) {
-      const value = this._value;
-      return html`
-        ${
-          value.length
-            ? html`
-                <ha-chip-set>
-                  ${repeat(
-                    value,
-                    (deviceClass) => deviceClass,
-                    (deviceClass) => {
-                      const label = this._deviceClassName(deviceClass);
-                      return html`
-                        <ha-input-chip
-                          .item=${deviceClass}
-                          .label=${label}
-                          .disabled=${this.disabled}
-                          @remove=${this._removeItem}
-                          selected
-                        >
-                          ${label}
-                        </ha-input-chip>
-                      `;
-                    }
-                  )}
-                </ha-chip-set>
-              `
-            : nothing
-        }
-        <ha-generic-picker
-          .helper=${this.helper}
-          .disabled=${this.disabled}
-          .required=${this.required && !value.length}
-          .value=${""}
-          .addButtonLabel=${
-            this.label ?? localize?.("ui.components.device-class-picker.add")
-          }
-          .getItems=${this._getItems}
-          .notFoundLabel=${this._notFoundLabel}
-          .emptyLabel=${emptyLabel}
-          @value-changed=${this._itemAdded}
-        ></ha-generic-picker>
-      `;
-    }
-
-    return html`
-      <ha-generic-picker
-        .label=${
-          this.label ??
-          localize?.("ui.components.device-class-picker.device_class")
-        }
-        .value=${this.value as string | undefined}
-        .helper=${this.helper}
-        .disabled=${this.disabled}
-        .required=${this.required}
-        .getItems=${this._getItems}
-        .valueRenderer=${this._valueRenderer}
-        .notFoundLabel=${this._notFoundLabel}
-        .emptyLabel=${emptyLabel}
-        @value-changed=${this._valueChanged}
-      ></ha-generic-picker>
-    `;
-  }
-
-  private _valueChanged(ev: ValueChangedEvent<string | undefined>) {
-    ev.stopPropagation();
-    fireEvent(this, "value-changed", { value: ev.detail.value || undefined });
-  }
-
-  private _itemAdded(ev: ValueChangedEvent<string | undefined>) {
-    ev.stopPropagation();
-    const deviceClass = ev.detail.value;
-    if (!deviceClass || this._value.includes(deviceClass)) {
-      return;
-    }
-    this._setValue([...this._value, deviceClass]);
-  }
-
-  private _removeItem(ev: Event) {
-    ev.stopPropagation();
-    const deviceClass = (ev.currentTarget as HTMLElement & { item: string })
-      .item;
-    this._setValue(this._value.filter((item) => item !== deviceClass));
-  }
-
-  private _setValue(value: string[]) {
-    this.value = value;
-    fireEvent(this, "value-changed", { value });
-  }
-
-  static styles = css`
-    :host {
-      display: block;
-    }
-    ha-generic-picker {
-      display: block;
-      width: 100%;
-    }
-    ha-chip-set {
-      padding: 8px 0;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-device-class-picker": HaDeviceClassPicker;
-  }
-}
@@ -0,0 +1,287 @@
+import { consume, type ContextType } from "@lit/context";
+import type { SelectedDetail } from "@material/mwc-list";
+import { mdiFilterVariantRemove } from "@mdi/js";
+import type { CSSResultGroup, PropertyValues } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { repeat } from "lit/directives/repeat";
+import memoizeOne from "memoize-one";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
+import { fireEvent, type HASSDomEvent } from "../common/dom/fire_event";
+import { computeStateDomain } from "../common/entity/compute_state_domain";
+import { stringCompare } from "../common/string/compare";
+import type { LocalizeFunc } from "../common/translations/localize";
+import { internationalizationContext, statesContext } from "../data/context";
+import { haStyleScrollbar } from "../resources/styles";
+import "./ha-check-list-item";
+import "./ha-domain-icon";
+import "./ha-expansion-panel";
+import "./ha-icon-button";
+import "./ha-list";
+import "./input/ha-input-search";
+import type { HaInputSearch } from "./input/ha-input-search";
+
+interface DeviceClassItem {
+  deviceClass: string;
+  domain: string;
+  name: string;
+}
+
+@customElement("ha-filter-device-classes")
+export class HaFilterDeviceClasses extends LitElement {
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
+  @consume({ context: statesContext, subscribe: true })
+  @state()
+  private _states!: ContextType<typeof statesContext>;
+
+  @consume({ context: internationalizationContext, subscribe: true })
+  @state()
+  private _i18n!: ContextType<typeof internationalizationContext>;
+
+  @property({ attribute: false }) public value?: string[];
+
+  @property({ type: Boolean, reflect: true }) public expanded = false;
+
+  @state() private _shouldRender = false;
+
+  @state() private _filter?: string;
+
+  @query("ha-list") private _list?: HTMLElement;
+
+  protected render() {
+    return html`
+      <ha-expansion-panel
+        left-chevron
+        .expanded=${this.expanded}
+        @expanded-will-change=${this._expandedWillChange}
+        @expanded-changed=${this._expandedChanged}
+      >
+        <div slot="header" class="header">
+          ${this._localize("ui.components.filter-device-classes.caption")}
+          ${
+            this.value?.length
+              ? html`<div class="badge">${this.value?.length}</div>
+                  <ha-icon-button
+                    .path=${mdiFilterVariantRemove}
+                    @click=${this._clearFilter}
+                  ></ha-icon-button>`
+              : nothing
+          }
+        </div>
+        ${
+          this._shouldRender
+            ? html`<ha-input-search
+                  appearance="outlined"
+                  .value=${this._filter}
+                  @input=${this._handleSearchChange}
+                >
+                </ha-input-search>
+                <ha-list
+                  class="ha-scrollbar"
+                  @selected=${this._handleItemSelected}
+                  multi
+                >
+                  ${repeat(
+                    this._deviceClasses(
+                      this._states,
+                      this._localize,
+                      this._i18n.locale.language,
+                      this._filter
+                    ),
+                    (item) => item.deviceClass,
+                    (item) =>
+                      html`<ha-check-list-item
+                        .value=${item.deviceClass}
+                        .selected=${(this.value || []).includes(item.deviceClass)}
+                        graphic="icon"
+                      >
+                        <ha-domain-icon
+                          slot="graphic"
+                          .domain=${item.domain}
+                          .deviceClass=${item.deviceClass}
+                          .state=${item.domain === "binary_sensor" ? "on" : undefined}
+                        ></ha-domain-icon>
+                        ${item.name}
+                      </ha-check-list-item>`
+                  )}
+                </ha-list> `
+            : nothing
+        }
+      </ha-expansion-panel>
+    `;
+  }
+
+  private _deviceClasses = memoizeOne(
+    (
+      states: ContextType<typeof statesContext>,
+      localize: LocalizeFunc,
+      language: string | undefined,
+      filter: string | undefined
+    ): DeviceClassItem[] =>
+      this._deviceClassItems(this._deviceClassDomains(states), localize)
+        .filter(
+          (item) =>
+            !filter ||
+            item.deviceClass.toLowerCase().includes(filter) ||
+            item.name.toLowerCase().includes(filter)
+        )
+        .sort((a, b) => stringCompare(a.name, b.name, language))
+  );
+
+  private _deviceClassDomains = memoizeOne(
+    (states: ContextType<typeof statesContext>): Map<string, string[]> => {
+      const domains = new Map<string, string[]>();
+      Object.values(states).forEach((stateObj) => {
+        const deviceClass = stateObj.attributes.device_class;
+        if (!deviceClass) {
+          return;
+        }
+        const domain = computeStateDomain(stateObj);
+        const known = domains.get(deviceClass);
+        if (!known) {
+          domains.set(deviceClass, [domain]);
+        } else if (!known.includes(domain)) {
+          known.push(domain);
+        }
+      });
+      return domains;
+    }
+  );
+
+  private _deviceClassItems = memoizeOne(
+    (
+      deviceClassDomains: Map<string, string[]>,
+      localize: LocalizeFunc
+    ): DeviceClassItem[] =>
+      [...deviceClassDomains].map(([deviceClass, domains]) => {
+        for (const domain of domains) {
+          const name = localize(
+            `component.${domain}.entity_component.${deviceClass}.name`
+          );
+          if (name) {
+            return { deviceClass, domain, name };
+          }
+        }
+        return { deviceClass, domain: domains[0], name: deviceClass };
+      }),
+    ([domainsA, localizeA], [domainsB, localizeB]) =>
+      localizeA === localizeB &&
+      domainsA.size === domainsB.size &&
+      [...domainsA].every(
+        ([deviceClass, domains]) =>
+          domainsB.get(deviceClass)?.join() === domains.join()
+      )
+  );
+
+  protected updated(changed: PropertyValues<this>) {
+    if (changed.has("expanded") && this.expanded) {
+      setTimeout(() => {
+        if (!this.expanded) return;
+        this._list!.style.height = `${this.clientHeight - 49 - 4 - 32}px`;
+        // 49px - height of a header + 1px
+        // 4px - padding-top of the search-input
+        // 32px - height of the search input
+      }, 300);
+    }
+  }
+
+  private _expandedWillChange(ev: HASSDomEvent<{ expanded: boolean }>) {
+    this._shouldRender = ev.detail.expanded;
+  }
+
+  private _expandedChanged(ev: HASSDomEvent<{ expanded: boolean }>) {
+    this.expanded = ev.detail.expanded;
+  }
+
+  private _handleItemSelected(ev: CustomEvent<SelectedDetail<Set<number>>>) {
+    const deviceClasses = this._deviceClasses(
+      this._states,
+      this._localize,
+      this._i18n.locale.language,
+      this._filter
+    );
+
+    const visible = new Set(deviceClasses.map((item) => item.deviceClass));
+    const preserved = (this.value || []).filter((d) => !visible.has(d));
+    const selected = [...ev.detail.index]
+      .map((i) => deviceClasses[i]?.deviceClass)
+      .filter((d): d is string => !!d);
+
+    this.value = [...preserved, ...selected];
+
+    fireEvent(this, "data-table-filter-changed", {
+      value: this.value.length ? this.value : undefined,
+      items: undefined,
+    });
+  }
+
+  private _clearFilter(ev: Event) {
+    ev.preventDefault();
+    this.value = undefined;
+    fireEvent(this, "data-table-filter-changed", {
+      value: undefined,
+      items: undefined,
+    });
+  }
+
+  private _handleSearchChange(ev: InputEvent) {
+    const target = ev.target as HaInputSearch;
+    this._filter = (target.value ?? "").toLowerCase();
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyleScrollbar,
+      css`
+        :host {
+          border-bottom: 1px solid var(--divider-color);
+        }
+        :host([expanded]) {
+          flex: 1;
+          height: 0;
+        }
+        ha-expansion-panel {
+          --ha-card-border-radius: var(--ha-border-radius-square);
+          --expansion-panel-content-padding: 0;
+        }
+        .header {
+          display: flex;
+          align-items: center;
+        }
+        .header ha-icon-button {
+          margin-inline-start: auto;
+          margin-inline-end: 8px;
+        }
+        .badge {
+          display: inline-block;
+          margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: initial;
+          min-width: 16px;
+          box-sizing: border-box;
+          border-radius: var(--ha-border-radius-circle);
+          font-size: var(--ha-font-size-xs);
+          font-weight: var(--ha-font-weight-normal);
+          background-color: var(--primary-color);
+          line-height: var(--ha-line-height-normal);
+          text-align: center;
+          padding: 0px 2px;
+          color: var(--text-primary-color);
+        }
+        ha-input-search {
+          display: block;
+          padding: var(--ha-space-1) var(--ha-space-2) 0;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-filter-device-classes": HaFilterDeviceClasses;
+  }
+}
@@ -1,519 +0,0 @@
-import { consume, type ContextType } from "@lit/context";
-import {
-  mdiChevronDown,
-  mdiChevronUp,
-  mdiFilterVariantRemove,
-  mdiShape,
-} from "@mdi/js";
-import type { CSSResultGroup, 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 { createRef, ref } from "lit/directives/ref";
-import { repeat } from "lit/directives/repeat";
-import memoizeOne from "memoize-one";
-import {
-  FilterPanelController,
-  filterPanelStyles,
-} from "../common/controllers/filter-panel-controller";
-import { consumeLocalize } from "../common/decorators/consume-context-entry";
-import { computeRTL } from "../common/util/compute_rtl";
-import { fireEvent } from "../common/dom/fire_event";
-import { stringCompare } from "../common/string/compare";
-import type { LocalizeFunc } from "../common/translations/localize";
-import { internationalizationContext, statesContext } from "../data/context";
-import {
-  computeDeviceClassName,
-  NO_DEVICE_CLASS,
-} from "../data/entity/device_class";
-import {
-  entityTypeKey,
-  parseEntityType,
-  usedEntityTypes,
-} from "../data/entity/entity_type";
-import { domainToName } from "../data/integration";
-import "./ha-domain-icon";
-import "./ha-expansion-panel";
-import "./ha-icon-button";
-import "./ha-svg-icon";
-import "./ha-tree-indicator";
-import "./input/ha-input-search";
-import type { HaInputSearch } from "./input/ha-input-search";
-import "./item/ha-list-item-option";
-import type { HaListItemOption } from "./item/ha-list-item-option";
-import "./list/ha-list-selectable";
-import type { HaListSelectable } from "./list/ha-list-selectable";
-
-// Core picks this one from the battery level, so it has no usable default.
-const FIXED_TYPE_ICONS: Record<string, string> = {
-  "sensor/battery": "mdi:battery",
-};
-
-interface TypeRow {
-  key: string;
-  domain: string;
-  deviceClass?: string;
-  name: string;
-  deviceClasses?: string[];
-  expanded?: boolean;
-  last?: boolean;
-}
-
-@customElement("ha-filter-entity-types")
-export class HaFilterEntityTypes extends LitElement {
-  @state()
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
-
-  @consume({ context: statesContext, subscribe: true })
-  @state()
-  private _states!: ContextType<typeof statesContext>;
-
-  @consume({ context: internationalizationContext, subscribe: true })
-  @state()
-  private _i18n!: ContextType<typeof internationalizationContext>;
-
-  @property({ attribute: false }) public value?: string[];
-
-  @property({ type: Boolean, reflect: true }) public expanded = false;
-
-  @state() private _filter?: string;
-
-  @state() private _expandedDomains = new Set<string>();
-
-  @query("ha-list-selectable") private _list?: HaListSelectable;
-
-  private _content = createRef<HTMLElement>();
-
-  private _panel = new FilterPanelController(this, this._content);
-
-  private _badgeTypes?: Map<string, string[]>;
-
-  protected render() {
-    const count = this.value?.length
-      ? this._count(this.value, this._badgeTypes!)
-      : 0;
-
-    return html`
-      <ha-expansion-panel
-        left-chevron
-        .expanded=${this.expanded}
-        @expanded-changed=${this._expandedChanged}
-      >
-        <div slot="header" class="header">
-          ${this._localize("ui.components.filter-entity-types.caption")}
-          ${
-            count
-              ? html`<div class="badge">${count}</div>
-                  <ha-icon-button
-                    .path=${mdiFilterVariantRemove}
-                    @click=${this._clearFilter}
-                  ></ha-icon-button>`
-              : nothing
-          }
-        </div>
-      </ha-expansion-panel>
-      ${this._panel.showContent ? this._renderContent() : nothing}
-    `;
-  }
-
-  private _renderContent() {
-    const rows = this._rows(
-      this._states,
-      this._localize,
-      this._i18n.locale.language,
-      this._filter,
-      this._expandedDomains
-    );
-    const rtl = computeRTL(
-      this._i18n.language,
-      this._i18n.translationMetadata.translations
-    );
-
-    return html`<div class="content" ${ref(this._content)}>
-      <ha-input-search
-        appearance="outlined"
-        .value=${this._filter}
-        @input=${this._handleSearchChange}
-      >
-      </ha-input-search>
-      <ha-list-selectable
-        multi
-        controlled
-        aria-label=${this._localize("ui.components.filter-entity-types.caption")}
-        @ha-list-item-selected=${this._handleItemToggled}
-        @ha-list-item-deselected=${this._handleItemToggled}
-      >
-        ${repeat(
-          rows,
-          (row) => row.key,
-          (row) => this._renderRow(row, rtl)
-        )}
-      </ha-list-selectable>
-    </div>`;
-  }
-
-  private _renderRow(row: TypeRow, rtl: boolean) {
-    const selected = this._isSelected(row);
-    const expandable = !!row.deviceClasses?.length;
-
-    return html`
-      <ha-list-item-option
-        appearance="checkbox"
-        selection-position="end"
-        class=${classMap({ child: !!row.deviceClass, rtl })}
-        .value=${row.key}
-        .selected=${selected}
-        .indeterminate=${!selected && this._isPartiallySelected(row)}
-      >
-        ${
-          row.deviceClass
-            ? html`<ha-tree-indicator
-                slot="start"
-                .end=${!!row.last}
-              ></ha-tree-indicator>`
-            : nothing
-        }
-        ${
-          row.deviceClass === NO_DEVICE_CLASS
-            ? html`<ha-svg-icon slot="start" .path=${mdiShape}></ha-svg-icon>`
-            : html`<ha-domain-icon
-                slot="start"
-                .icon=${FIXED_TYPE_ICONS[row.key]}
-                .domain=${row.domain}
-                .deviceClass=${row.deviceClass}
-                .state=${row.domain === "binary_sensor" ? "on" : undefined}
-                ?brand-fallback=${!row.deviceClass}
-              ></ha-domain-icon>`
-        }
-        <span slot="headline">${row.name}</span>
-        ${
-          expandable
-            ? html`<ha-icon-button
-                slot="end"
-                data-domain=${row.domain}
-                .path=${row.expanded ? mdiChevronUp : mdiChevronDown}
-                .label=${this._localize(
-                  row.expanded
-                    ? "ui.components.filter-entity-types.collapse"
-                    : "ui.components.filter-entity-types.expand"
-                )}
-                @click=${this._toggleDomain}
-                @keydown=${this._handleChevronKeydown}
-              ></ha-icon-button>`
-            : nothing
-        }
-      </ha-list-item-option>
-    `;
-  }
-
-  private _types = memoizeOne(usedEntityTypes);
-
-  // A selected domain counts for the classes it stands for, so that collapsing
-  // the last one does not drop the count to one.
-  private _count = memoizeOne(
-    (value: string[], types: Map<string, string[]>): number =>
-      value.reduce((count, key) => {
-        const { domain, deviceClass } = parseEntityType(key);
-        return (
-          count +
-          (deviceClass ? 1 : Math.max(types.get(domain)?.length ?? 0, 1))
-        );
-      }, 0)
-  );
-
-  private _rows = memoizeOne(
-    (
-      states: ContextType<typeof statesContext>,
-      localize: LocalizeFunc,
-      language: string | undefined,
-      filter: string | undefined,
-      expandedDomains: Set<string>
-    ): TypeRow[] => {
-      const types = this._types(states);
-
-      const domains = [...types.keys()]
-        .map((domain) => ({ domain, name: domainToName(localize, domain) }))
-        .sort((a, b) => stringCompare(a.name, b.name, language));
-
-      const rows: TypeRow[] = [];
-
-      for (const { domain, name } of domains) {
-        const deviceClasses = types
-          .get(domain)!
-          .map((deviceClass) => ({
-            deviceClass,
-            name: this._deviceClassName(localize, domain, deviceClass),
-          }))
-          .sort((a, b) => {
-            if (a.deviceClass === NO_DEVICE_CLASS) {
-              return 1;
-            }
-            if (b.deviceClass === NO_DEVICE_CLASS) {
-              return -1;
-            }
-            return stringCompare(a.name, b.name, language);
-          });
-
-        const matchingClasses = deviceClasses.filter((entry) =>
-          this._matches(filter, entry.deviceClass, entry.name)
-        );
-        const domainMatches = this._matches(filter, domain, name);
-
-        if (!domainMatches && !matchingClasses.length) {
-          continue;
-        }
-
-        // Only a search that matched nothing but device classes unfolds them.
-        const revealed = !!filter && !domainMatches;
-        const expanded = revealed || expandedDomains.has(domain);
-
-        rows.push({
-          key: domain,
-          domain,
-          name,
-          deviceClasses: deviceClasses.map((entry) => entry.deviceClass),
-          expanded,
-        });
-
-        if (!deviceClasses.length || !expanded) {
-          continue;
-        }
-
-        const children = revealed ? matchingClasses : deviceClasses;
-
-        children.forEach((entry, index) => {
-          rows.push({
-            key: entityTypeKey(domain, entry.deviceClass),
-            domain,
-            deviceClass: entry.deviceClass,
-            name: entry.name,
-            last: index === children.length - 1,
-          });
-        });
-      }
-
-      return rows;
-    }
-  );
-
-  private _deviceClassName(
-    localize: LocalizeFunc,
-    domain: string,
-    deviceClass: string
-  ): string {
-    return deviceClass === NO_DEVICE_CLASS
-      ? localize("ui.components.filter-entity-types.no_device_class")
-      : computeDeviceClassName(localize, domain, deviceClass);
-  }
-
-  private _matches(
-    filter: string | undefined,
-    slug: string,
-    name: string
-  ): boolean {
-    return (
-      !filter ||
-      slug.toLowerCase().includes(filter) ||
-      name.toLowerCase().includes(filter)
-    );
-  }
-
-  private _isSelected(row: TypeRow): boolean {
-    const value = this.value;
-    if (!value?.length) {
-      return false;
-    }
-    return value.includes(row.domain) || value.includes(row.key);
-  }
-
-  private _isPartiallySelected(row: TypeRow): boolean {
-    if (row.deviceClass || !this.value?.length) {
-      return false;
-    }
-    return this.value.some(
-      (key) => parseEntityType(key).domain === row.domain && key !== row.domain
-    );
-  }
-
-  public willUpdate(changed: PropertyValues<this>) {
-    super.willUpdate(changed);
-
-    // While closed, the badge reuses the classes it last saw rather than
-    // rescanning every entity on each state change.
-    if (this._panel.showContent || !this._badgeTypes) {
-      this._badgeTypes = this._types(this._states);
-    }
-
-    if (changed.has("expanded") && this.expanded) {
-      this._expandedDomains = new Set(
-        (this.value ?? [])
-          .map((key) => parseEntityType(key))
-          .filter((type) => type.deviceClass)
-          .map((type) => type.domain)
-      );
-    }
-  }
-
-  private _expandedChanged(ev) {
-    this.expanded = ev.detail.expanded;
-  }
-
-  // The list activates the focused row on Enter and Space, which would select
-  // the domain instead of expanding it.
-  private _handleChevronKeydown(ev: KeyboardEvent) {
-    if (ev.key === "Enter" || ev.key === " ") {
-      ev.stopPropagation();
-    }
-  }
-
-  private _toggleDomain(ev: Event) {
-    ev.stopPropagation();
-    const { domain } = (ev.currentTarget as HTMLElement).dataset;
-    if (!domain) {
-      return;
-    }
-    const expandedDomains = new Set(this._expandedDomains);
-    if (!expandedDomains.delete(domain)) {
-      expandedDomains.add(domain);
-    }
-    this._expandedDomains = expandedDomains;
-  }
-
-  private _handleItemToggled(ev: CustomEvent<number>) {
-    // The list indexes its items by registration order, which a search reorders,
-    // so read the key off the clicked option instead.
-    const option = this._list?.items[ev.detail] as HaListItemOption | undefined;
-    const key = option?.value;
-    if (!key) {
-      return;
-    }
-    const { domain, deviceClass } = parseEntityType(key);
-
-    const value = new Set(this.value ?? []);
-    const siblings = (this._types(this._states).get(domain) ?? []).map(
-      (entry) => entityTypeKey(domain, entry)
-    );
-
-    // Drops the classes the domain no longer exposes too, so that a stale key
-    // can never sit next to the domain that covers it.
-    const selectDomain = () => {
-      value.forEach((selected) => {
-        if (parseEntityType(selected).domain === domain) {
-          value.delete(selected);
-        }
-      });
-      value.add(domain);
-    };
-
-    if (!deviceClass) {
-      if (!value.delete(domain)) {
-        selectDomain();
-      }
-    } else if (value.delete(domain)) {
-      siblings.forEach((sibling) => {
-        if (sibling !== key) {
-          value.add(sibling);
-        }
-      });
-    } else if (!value.delete(key)) {
-      value.add(key);
-      if (siblings.length && siblings.every((sibling) => value.has(sibling))) {
-        selectDomain();
-      }
-    }
-
-    this.value = [...value];
-    fireEvent(this, "data-table-filter-changed", {
-      value: this.value.length ? this.value : undefined,
-      items: undefined,
-    });
-  }
-
-  private _clearFilter(ev: Event) {
-    ev.preventDefault();
-    this.value = undefined;
-    fireEvent(this, "data-table-filter-changed", {
-      value: undefined,
-      items: undefined,
-    });
-  }
-
-  private _handleSearchChange(ev: InputEvent) {
-    const target = ev.target as HaInputSearch;
-    this._filter = (target.value ?? "").toLowerCase();
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      filterPanelStyles,
-      css`
-        /* The list scrolls through its own container, not through the host. */
-        ha-list-selectable {
-          display: flex;
-          flex: 1;
-          min-height: 0;
-        }
-        ha-list-selectable::part(base) {
-          flex: 1;
-          min-height: 0;
-        }
-        .header {
-          display: flex;
-          align-items: center;
-        }
-        .header ha-icon-button {
-          margin-inline-start: auto;
-          margin-inline-end: 8px;
-        }
-        .badge {
-          display: inline-block;
-          margin-left: 8px;
-          margin-inline-start: 8px;
-          margin-inline-end: initial;
-          min-width: 16px;
-          box-sizing: border-box;
-          border-radius: var(--ha-border-radius-circle);
-          font-size: var(--ha-font-size-xs);
-          font-weight: var(--ha-font-weight-normal);
-          background-color: var(--primary-color);
-          line-height: var(--ha-line-height-normal);
-          text-align: center;
-          padding: 0px 2px;
-          color: var(--text-primary-color);
-        }
-        ha-input-search {
-          display: block;
-          padding: var(--ha-space-1) var(--ha-space-2) 0;
-        }
-        /* Keeps a row that carries the chevron as tall as one that does not. */
-        ha-list-item-option {
-          --ha-row-item-padding-block: var(--ha-space-2);
-        }
-        ha-list-item-option ha-icon-button {
-          --ha-icon-button-size: 32px;
-        }
-        .child::part(base) {
-          padding-inline-start: 48px;
-        }
-        ha-tree-indicator {
-          width: 56px;
-          position: absolute;
-          top: 0px;
-          left: 0px;
-        }
-        .rtl ha-tree-indicator {
-          right: 0px;
-          left: initial;
-          transform: scaleX(-1);
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-filter-entity-types": HaFilterEntityTypes;
-  }
-}
@@ -111,11 +111,6 @@ export class HaGenericPicker extends PickerMixin(LitElement) {

  @property({ type: Boolean, attribute: "no-sort" }) public noSort = false;

-  // Skip the "unknown value" highlight and note for a value that is not in the
-  // list but that the value renderer presents on its own.
-  @property({ type: Boolean, attribute: "no-unknown-state" })
-  public noUnknownState = false;
-
  @query(".container") private _containerElement?: HTMLDivElement;

  @query("ha-picker-combo-box") private _comboBox?: HaPickerComboBox;
@@ -153,10 +148,7 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
  private _unsubscribeTinyKeys?: () => void;

  protected willUpdate(changedProperties: PropertyValues<this>) {
-    if (
-      changedProperties.has("value") ||
-      changedProperties.has("noUnknownState")
-    ) {
+    if (changedProperties.has("value")) {
      this._setUnknownValue();
    }
  }
@@ -295,7 +287,6 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
  private _setUnknownValue = () => {
    const items = this.getItems();
    if (
-      this.noUnknownState ||
      this.allowCustomValue ||
      this.value === undefined ||
      this.value === null ||
@@ -1,45 +0,0 @@
-import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import type { DeviceClassSelector } from "../../data/selector";
-import "../ha-device-class-picker";
-
-@customElement("ha-selector-device_class")
-export class HaDeviceClassSelector extends LitElement {
-  @property({ attribute: false }) public selector!: DeviceClassSelector;
-
-  @property() public value?: string | string[];
-
-  @property() public label?: string;
-
-  @property() public helper?: string;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @property({ type: Boolean }) public required = true;
-
-  protected render() {
-    return html`
-      <ha-device-class-picker
-        .domain=${this.selector.device_class?.domain}
-        .value=${this.value}
-        .multiple=${this.selector.device_class?.multiple ?? false}
-        .label=${this.label}
-        .helper=${this.helper}
-        .disabled=${this.disabled}
-        .required=${this.required}
-      ></ha-device-class-picker>
-    `;
-  }
-
-  static styles = css`
-    ha-device-class-picker {
-      width: 100%;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-selector-device_class": HaDeviceClassSelector;
-  }
-}
@@ -30,7 +30,6 @@ const LOAD_ELEMENTS = {
  date: () => import("./ha-selector-date"),
  datetime: () => import("./ha-selector-datetime"),
  device: () => import("./ha-selector-device"),
-  device_class: () => import("./ha-selector-device-class"),
  duration: () => import("./ha-selector-duration"),
  entity: () => import("./ha-selector-entity"),
  entity_name: () => import("./ha-selector-entity-name"),
@@ -2,15 +2,15 @@ import type { HassServiceTarget } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import memoizeOne from "memoize-one";
 import { ensureArray } from "../common/array/ensure-array";
 import { fireEvent } from "../common/dom/fire_event";
+import { computeDomain } from "../common/entity/compute_domain";
 import type { DataTableFiltersValue } from "../data/data_table_filters";
 import type { HaEntityPickerEntityFilterFunc } from "../data/entity/entity";
-import { entityTypeFilterFunc } from "../data/entity/entity_type";
 import type { EntitySources } from "../data/entity/entity_sources";
 import type { HomeAssistant } from "../types";
-import "./ha-filter-entity-types";
+import "./ha-filter-device-classes";
+import "./ha-filter-domains";
 import "./ha-filter-integrations";
 import "./ha-target-picker";

@@ -19,8 +19,8 @@ import "./ha-target-picker";
 * confused with `EntitySources`, which maps an entity to its integration.
 */
 export interface SourceFilters {
-  /** Domains (`sensor`) and domains narrowed to a device class (`sensor/power`). */
-  types?: string[];
+  domains?: string[];
+  deviceClasses?: string[];
  integrations?: string[];
 }

@@ -44,30 +44,38 @@ export const countSourceFilters = (filters: SourceFilters): number =>
  Object.values(filters).filter((value) => value?.length).length;

 /**
- * Matches an entity against the selected filters: it is kept when it matches
- * every filter that has a selection. Undefined when nothing is selected.
+ * Narrows entity IDs down by the selected filters: an entity is kept when it
+ * matches every filter that has a selection.
 */
-export const sourceFilterFunc = (
+export const applySourceFilters = (
+  entityIds: string[],
  filters: SourceFilters,
  states: HomeAssistant["states"],
  entities: HomeAssistant["entities"],
  entitySources?: EntitySources
-): ((entityId: string) => boolean) | undefined => {
-  const matchesType = filters.types?.length
-    ? entityTypeFilterFunc(filters.types, states)
+): string[] => {
+  const domains = filters.domains?.length ? filters.domains : undefined;
+  const deviceClasses = filters.deviceClasses?.length
+    ? filters.deviceClasses
    : undefined;
  const integrations = filters.integrations?.length
    ? filters.integrations
    : undefined;

-  if (!matchesType && !integrations) {
-    return undefined;
+  if (!domains && !deviceClasses && !integrations) {
+    return entityIds;
  }

-  return (entityId: string) => {
-    if (matchesType && !matchesType(entityId)) {
+  return entityIds.filter((entityId) => {
+    if (domains && !domains.includes(computeDomain(entityId))) {
      return false;
    }
+    if (deviceClasses) {
+      const deviceClass = states[entityId]?.attributes.device_class;
+      if (!deviceClass || !deviceClasses.includes(deviceClass)) {
+        return false;
+      }
+    }
    if (integrations) {
      const integration =
        entities[entityId]?.platform ?? entitySources?.[entityId]?.domain;
@@ -76,24 +84,13 @@ export const sourceFilterFunc = (
      }
    }
    return true;
-  };
-};
-
-/** Narrows entity IDs down by the selected filters. */
-export const applySourceFilters = (
-  entityIds: string[],
-  filters: SourceFilters,
-  states: HomeAssistant["states"],
-  entities: HomeAssistant["entities"],
-  entitySources?: EntitySources
-): string[] => {
-  const matches = sourceFilterFunc(filters, states, entities, entitySources);
-  return matches ? entityIds.filter(matches) : entityIds;
+  });
 };

 /**
 * Picker for what a page shows: the targets to include, narrowed down by
- * entity type and integration. Meant to be placed in an `ha-filter-pane`.
+ * domain, device class and integration. Meant to be placed in an
+ * `ha-filter-pane`.
 *
 * The pages resolve every entity of a target, secondary ones included, so the
 * target picker counts them too.
@@ -109,8 +106,6 @@ export class HaSourcesPicker extends LitElement {
  @property({ attribute: false })
  public entityFilter?: HaEntityPickerEntityFilterFunc;

-  @property({ attribute: false }) public entitySources?: EntitySources;
-
  /** Explains what the page shows while no target is picked. */
  @property() public description?: string;

@@ -134,12 +129,6 @@ export class HaSourcesPicker extends LitElement {
        .hass=${this.hass}
        .value=${this.value}
        .entityFilter=${this.entityFilter}
-        .activeFilter=${this._activeFilter(
-          this.filters,
-          this.hass.states,
-          this.hass.entities,
-          this.entitySources
-        )}
        .primaryEntitiesOnly=${false}
        .disabled=${this.disabled}
        @value-changed=${this._targetsChanged}
@@ -147,12 +136,18 @@ export class HaSourcesPicker extends LitElement {
      <div
        class=${classMap({ filters: true, expanded: !!this._expandedFilter })}
      >
-        <ha-filter-entity-types
-          .value=${this.filters.types}
-          .expanded=${this._expandedFilter === "types"}
-          @data-table-filter-changed=${this._typesChanged}
-          @expanded-changed=${this._typesExpanded}
-        ></ha-filter-entity-types>
+        <ha-filter-domains
+          .value=${this.filters.domains}
+          .expanded=${this._expandedFilter === "domains"}
+          @data-table-filter-changed=${this._domainsChanged}
+          @expanded-changed=${this._domainsExpanded}
+        ></ha-filter-domains>
+        <ha-filter-device-classes
+          .value=${this.filters.deviceClasses}
+          .expanded=${this._expandedFilter === "deviceClasses"}
+          @data-table-filter-changed=${this._deviceClassesChanged}
+          @expanded-changed=${this._deviceClassesExpanded}
+        ></ha-filter-device-classes>
        <ha-filter-integrations
          .value=${this.filters.integrations}
          .expanded=${this._expandedFilter === "integrations"}
@@ -163,8 +158,6 @@ export class HaSourcesPicker extends LitElement {
    `;
  }

-  private _activeFilter = memoizeOne(sourceFilterFunc);
-
  protected firstUpdated() {
    // The filter panels label themselves with keys from the config panel.
    this.hass.loadFragmentTranslation("config");
@@ -175,8 +168,12 @@ export class HaSourcesPicker extends LitElement {
    fireEvent(this, "value-changed", { value: ev.detail.value || {} });
  }

-  private _typesChanged(ev: CustomEvent) {
-    this._filterChanged("types", ev);
+  private _domainsChanged(ev: CustomEvent) {
+    this._filterChanged("domains", ev);
+  }
+
+  private _deviceClassesChanged(ev: CustomEvent) {
+    this._filterChanged("deviceClasses", ev);
  }

  private _integrationsChanged(ev: CustomEvent) {
@@ -194,8 +191,12 @@ export class HaSourcesPicker extends LitElement {
    });
  }

-  private _typesExpanded(ev: CustomEvent) {
-    this._filterExpanded("types", ev);
+  private _domainsExpanded(ev: CustomEvent) {
+    this._filterExpanded("domains", ev);
+  }
+
+  private _deviceClassesExpanded(ev: CustomEvent) {
+    this._filterExpanded("deviceClasses", ev);
  }

  private _integrationsExpanded(ev: CustomEvent) {
@@ -108,13 +108,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
  @property({ attribute: false })
  public entityFilter?: HaEntityPickerEntityFilterFunc;

-  /**
-   * Entities that pass the filters the page currently has on. Narrows the
-   * counts, unlike `entityFilter`, which says what can be picked at all.
-   */
-  @property({ attribute: false })
-  public activeFilter?: (entityId: string) => boolean;
-
  @property({ type: Boolean, reflect: true }) public disabled = false;

  @state() private _selectedSection?: TargetTypeFloorless;
@@ -293,7 +286,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                  .items=${{ entity: entityIds }}
                  .deviceFilter=${this.deviceFilter}
                  .entityFilter=${this.entityFilter}
-                  .activeFilter=${this.activeFilter}
                  .includeDomains=${this.includeDomains}
                  .includeDeviceClasses=${this.includeDeviceClasses}
                  .primaryEntitiesOnly=${this.primaryEntitiesOnly}
@@ -314,7 +306,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                  .items=${{ device: deviceIds }}
                  .deviceFilter=${this.deviceFilter}
                  .entityFilter=${this.entityFilter}
-                  .activeFilter=${this.activeFilter}
                  .includeDomains=${this.includeDomains}
                  .includeDeviceClasses=${this.includeDeviceClasses}
                  .primaryEntitiesOnly=${this.primaryEntitiesOnly}
@@ -338,7 +329,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                  }}
                  .deviceFilter=${this.deviceFilter}
                  .entityFilter=${this.entityFilter}
-                  .activeFilter=${this.activeFilter}
                  .includeDomains=${this.includeDomains}
                  .includeDeviceClasses=${this.includeDeviceClasses}
                  .primaryEntitiesOnly=${this.primaryEntitiesOnly}
@@ -358,7 +348,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                  .items=${{ label: labelIds }}
                  .deviceFilter=${this.deviceFilter}
                  .entityFilter=${this.entityFilter}
-                  .activeFilter=${this.activeFilter}
                  .includeDomains=${this.includeDomains}
                  .includeDeviceClasses=${this.includeDeviceClasses}
                  .primaryEntitiesOnly=${this.primaryEntitiesOnly}
@@ -25,7 +25,6 @@ import { transform } from "../../common/decorators/transform";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { LeafletModuleType } from "../../common/dom/setup-leaflet-map";
 import { setupLeafletMap } from "../../common/dom/setup-leaflet-map";
-import type { MapBaseLayer } from "../../common/map/base-layer";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { getEntityLocation } from "../../common/entity/get_entity_location";
@@ -161,8 +160,6 @@ export class HaMap extends ReactiveElement {

  private Leaflet?: LeafletModuleType;

-  private _baseLayer?: MapBaseLayer;
-
  private _resizeObserver?: ResizeObserver;

  private _mapItems: (Marker | Circle)[] = [];
@@ -214,7 +211,6 @@ export class HaMap extends ReactiveElement {
      this.leafletMap.remove();
      this.leafletMap = undefined;
      this.Leaflet = undefined;
-      this._baseLayer = undefined;
    }

    // the control went away with the map, so don't hold on to it
@@ -312,7 +308,6 @@ export class HaMap extends ReactiveElement {
    map.classList.toggle("dark", this._darkMode);
    map.classList.toggle("forced-dark", this.themeMode === "dark");
    map.classList.toggle("forced-light", this.themeMode === "light");
-    this._baseLayer?.setDarkMode(this._darkMode);
  }

  private _loading = false;
@@ -327,23 +322,11 @@ export class HaMap extends ReactiveElement {
    }
    this._loading = true;
    try {
-      const setup = await setupLeafletMap(map, {
+      [this.leafletMap, this.Leaflet] = await setupLeafletMap(map, {
        latitude: this._config?.latitude ?? 52.3731339,
        longitude: this._config?.longitude ?? 4.8903147,
        zoom: this.zoom,
-        darkMode: this._darkMode,
      });
-      // Setting up fetches a style, so the element can be gone by now.
-      // `disconnectedCallback` had no map to tear down, and keeping this one
-      // would leave a live map - and its WebGL context - on a detached host,
-      // and its container too initialized to set up again on reconnect.
-      if (!this.isConnected) {
-        setup.map.remove();
-        return;
-      }
-      this.leafletMap = setup.map;
-      this.Leaflet = setup.leaflet;
-      this._baseLayer = setup.baseLayer;
      this._updateMapStyle();
      this.leafletMap.on("click", (ev) => {
        if (this._clickCount === 0) {
@@ -908,22 +891,9 @@ export class HaMap extends ReactiveElement {
      cursor: -moz-grabbing;
      cursor: -webkit-grabbing;
    }
-    /* Only the raster fallback is inverted for dark mode, the vector style
-       ships its own dark cartography. */
-    .leaflet-tile-pane .leaflet-tile {
+    .leaflet-tile-pane {
      filter: var(--map-filter);
    }
-    /* The only two rules the MapLibre canvas needs from its stylesheet, the
-       rest of it styles controls and popups we do not render. */
-    .maplibregl-map {
-      position: relative;
-      overflow: hidden;
-    }
-    .maplibregl-canvas {
-      position: absolute;
-      top: 0;
-      left: 0;
-    }
    .dark .leaflet-bar a {
      background-color: #1c1c1c;
      color: #ffffff;
@@ -470,19 +470,15 @@ export class HaMediaPlayerBrowse extends LitElement {
      ? MediaClassBrowserSettings[currentItem.children_media_class]
      : MediaClassBrowserSettings.directory;

-    const canPickCurrent =
-      currentItem?.can_play ||
-      (currentItem && this.accept?.includes("directory"));
-
    return html`
              ${
-                canPickCurrent || showSearch
+                currentItem.can_play || showSearch
                  ? html`
                      <div
                        class="header ${classMap({
                          "no-img": !currentItem.thumbnail,
                          "no-dialog": !this.dialog,
-                          "search-only": !canPickCurrent,
+                          "search-only": !currentItem.can_play,
                        })}"
                        @transitionend=${this._setHeaderHeight}
                      >
@@ -495,7 +491,7 @@ export class HaMediaPlayerBrowse extends LitElement {
                            : nothing
                        }
                        ${
-                          canPickCurrent
+                          currentItem.can_play
                            ? html`<div class="header-content">
                                ${
                                  currentItem.thumbnail
@@ -507,7 +503,7 @@ export class HaMediaPlayerBrowse extends LitElement {
                                          ></ha-media-browser-thumbnail>
                                          ${
                                            this.narrow &&
-                                            canPickCurrent &&
+                                            currentItem?.can_play &&
                                            (!this.accept ||
                                              canPlayChildren.has(
                                                currentItem.media_content_id
@@ -550,7 +546,7 @@ export class HaMediaPlayerBrowse extends LitElement {
                                    }
                                  </div>
                                  ${
-                                    canPickCurrent &&
+                                    currentItem.can_play &&
                                    (!currentItem.thumbnail || !this.narrow)
                                      ? html`
                                          <ha-button
@@ -129,21 +129,31 @@ export class HaMediaPlayerPicker extends LitElement {
        .filter(this._filterPlayerEntities)
        .map<MediaPlayerComboBoxItem>((stateObj) => {
          const friendlyName = computeStateName(stateObj);
-          const [entityName, deviceName, areaName] = computeEntityNameList(
-            stateObj,
-            [{ type: "entity" }, { type: "device" }, { type: "area" }],
-            this._entities,
-            this._devices,
-            this._areas,
-            this._floors
-          );
+          const [entityName, deviceName, parentDeviceName, areaName] =
+            computeEntityNameList(
+              stateObj,
+              [
+                { type: "entity" },
+                { type: "device" },
+                { type: "parent_device" },
+                { type: "area" },
+              ],
+              this._entities,
+              this._devices,
+              this._areas,
+              this._floors
+            );
          const entityId = stateObj.entity_id;
          const domainName = domainToName(
            this._i18n.localize,
            computeDomain(entityId)
          );
          const primary = entityName || deviceName || entityId;
-          const secondary = [areaName, entityName ? deviceName : undefined]
+          const secondary = [
+            areaName,
+            parentDeviceName,
+            entityName ? deviceName : undefined,
+          ]
            .filter(Boolean)
            .join(isRTL ? " ◂ " : " ▸ ");

@@ -157,6 +167,7 @@ export class HaMediaPlayerPicker extends LitElement {
            search_labels: {
              entityName: entityName || null,
              deviceName: deviceName || null,
+              parentDeviceName: parentDeviceName || null,
              areaName: areaName || null,
              domainName: domainName || null,
              friendlyName: friendlyName || null,
@@ -62,17 +62,27 @@ class HaMediaPlayerToggle extends LitElement {
      isRTL: boolean,
      stateObj: HassEntity
    ) => {
-      const [entityName, deviceName, areaName] = computeEntityNameList(
-        stateObj,
-        [{ type: "entity" }, { type: "device" }, { type: "area" }],
-        entities,
-        devices,
-        areas,
-        floors
-      );
+      const [entityName, deviceName, parentDeviceName, areaName] =
+        computeEntityNameList(
+          stateObj,
+          [
+            { type: "entity" },
+            { type: "device" },
+            { type: "parent_device" },
+            { type: "area" },
+          ],
+          entities,
+          devices,
+          areas,
+          floors
+        );

      const primary = entityName || deviceName || entityId;
-      const secondary = [areaName, entityName ? deviceName : undefined]
+      const secondary = [
+        areaName,
+        parentDeviceName,
+        entityName ? deviceName : undefined,
+      ]
        .filter(Boolean)
        .join(isRTL ? " ◂ " : " ▸ ");

@@ -118,16 +118,6 @@ class DialogTargetDetails extends LitElement implements HassDialog {
    );
  };

-  private _combinedFilter = memoizeOne(
-    (
-      entityFilter: HaEntityPickerEntityFilterFunc | undefined,
-      activeFilter: (entityId: string) => boolean
-    ): HaEntityPickerEntityFilterFunc =>
-      (stateObj) =>
-        (!entityFilter || entityFilter(stateObj)) &&
-        activeFilter(stateObj.entity_id)
-  );
-
  private _selectorTarget() {
    return this._params?.selector?.target || null;
  }
@@ -137,8 +127,6 @@ class DialogTargetDetails extends LitElement implements HassDialog {
      return nothing;
    }

-    const { activeFilter } = this._params;
-
    let deviceFilter: HaDevicePickerDeviceFilterFunc | undefined;
    let entityFilter: HaEntityPickerEntityFilterFunc | undefined;
    let includeDomains: string[] | undefined;
@@ -157,10 +145,6 @@ class DialogTargetDetails extends LitElement implements HassDialog {
      primaryEntitiesOnly = this._params.primaryEntitiesOnly;
    }

-    if (activeFilter) {
-      entityFilter = this._combinedFilter(entityFilter, activeFilter);
-    }
-
    const waitingForSources =
      this._params.selector &&
      this._hasIntegration(this._params.selector) &&
@@ -11,7 +11,6 @@ export interface TargetDetailsDialogParams {
  selector?: TargetSelector;
  deviceFilter?: HaDevicePickerDeviceFilterFunc;
  entityFilter?: HaEntityPickerEntityFilterFunc;
-  activeFilter?: (entityId: string) => boolean;
  includeDomains?: string[];
  includeDeviceClasses?: string[];
  primaryEntitiesOnly?: boolean;
@@ -34,9 +34,6 @@ export class HaTargetPickerItemGroup extends LitElement {
  @property({ attribute: false })
  public entityFilter?: HaEntityPickerEntityFilterFunc;

-  @property({ attribute: false })
-  public activeFilter?: (entityId: string) => boolean;
-
  /**
   * Show only targets with entities from specific domains.
   * @type {Array}
@@ -91,7 +88,6 @@ export class HaTargetPickerItemGroup extends LitElement {
                    .itemId=${item}
                    .deviceFilter=${this.deviceFilter}
                    .entityFilter=${this.entityFilter}
-                    .activeFilter=${this.activeFilter}
                    .includeDomains=${this.includeDomains}
                    .includeDeviceClasses=${this.includeDeviceClasses}
                    .primaryEntitiesOnly=${this.primaryEntitiesOnly}
@@ -7,7 +7,6 @@ import {
  mdiHome,
  mdiLabel,
  mdiMinusBox,
-  mdiSwapHorizontal,
  mdiTextureBox,
 } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
@@ -93,13 +92,6 @@ export class HaTargetPickerItemRow extends LitElement {
  @property({ attribute: false })
  public entityFilter?: HaEntityPickerEntityFilterFunc;

-  /**
-   * Entities that pass the filters the page currently has on. Narrows the
-   * count, and the target details, but not what the target resolves to.
-   */
-  @property({ attribute: false })
-  public activeFilter?: (entityId: string) => boolean;
-
  /**
   * Show only targets with entities from specific domains.
   * @type {Array}
@@ -178,51 +170,36 @@ export class HaTargetPickerItemRow extends LitElement {
                  referrerpolicy="no-referrer"
                  src=${this._iconImg}
                />`
-              : canMigrate
-                ? html`<ha-svg-icon .path=${mdiSwapHorizontal}></ha-svg-icon>`
-                : fallbackIconPath
-                  ? html`<ha-svg-icon .path=${fallbackIconPath}></ha-svg-icon>`
-                  : this.type === "entity"
-                    ? html`
-                        <ha-state-icon
-                          .stateObj=${
-                            stateObject ||
-                            ({
-                              entity_id: this.itemId,
-                              attributes: {},
-                            } as HassEntity)
-                          }
-                        >
-                        </ha-state-icon>
-                      `
-                    : nothing
+              : fallbackIconPath
+                ? html`<ha-svg-icon .path=${fallbackIconPath}></ha-svg-icon>`
+                : this.type === "entity"
+                  ? html`
+                      <ha-state-icon
+                        .stateObj=${
+                          stateObject ||
+                          ({
+                            entity_id: this.itemId,
+                            attributes: {},
+                          } as HassEntity)
+                        }
+                      >
+                      </ha-state-icon>
+                    `
+                  : nothing
        }
      </div>

-      <span slot="headline"
-        >${
-          canMigrate
-            ? this.hass.localize(
-                "ui.components.target-picker.device_replaced_headline"
-              )
-            : name
-        }</span
-      >
+      <div slot="headline">${(canMigrate && replacement?.name) || name}</div>
      ${
        notFound || (context && !this.hideContext)
          ? html`<span slot="supporting-text"
              >${
                notFound
                  ? canMigrate
-                    ? replacement!.candidates.length === 1 && replacement!.name
-                      ? this.hass.localize(
-                          "ui.components.target-picker.device_replaced_by_one",
-                          { device: replacement!.name }
-                        )
-                      : this.hass.localize(
-                          "ui.components.target-picker.device_replaced",
-                          { count: replacement!.candidates.length }
-                        )
+                    ? this.hass.localize(
+                        "ui.components.target-picker.device_replaced",
+                        { count: replacement!.candidates.length }
+                      )
                    : this.hass.localize(
                        `ui.components.target-picker.${this.type}_not_found`
                      )
@@ -245,7 +222,12 @@ export class HaTargetPickerItemRow extends LitElement {
                ${
                  this.expand || !entries.referenced_entities.length
                    ? html`<span class="main">
-                        ${this._entitiesLabel(entries)}
+                        ${this.hass.localize(
+                          "ui.components.target-picker.entities_count",
+                          {
+                            count: entries.referenced_entities.length,
+                          }
+                        )}
                      </span>`
                    : html`<ha-button
                        appearance="filled"
@@ -253,7 +235,12 @@ export class HaTargetPickerItemRow extends LitElement {
                        size="xs"
                        @click=${this._openDetails}
                      >
-                        ${this._entitiesLabel(entries)}
+                        ${this.hass.localize(
+                          "ui.components.target-picker.entities_count",
+                          {
+                            count: entries.referenced_entities.length,
+                          }
+                        )}
                      </ha-button>`
                }
              </div>
@@ -272,7 +259,7 @@ export class HaTargetPickerItemRow extends LitElement {
                @click=${this._migrate}
              >
                ${this.hass.localize(
-                  "ui.components.target-picker.replace_update"
+                  "ui.components.target-picker.replace_device"
                )}
              </ha-button>
            `
@@ -347,28 +334,6 @@ export class HaTargetPickerItemRow extends LitElement {
    `;
  }

-  private _entityCounts(entries: ExtractFromTargetResultReferenced) {
-    const total = entries.referenced_entities.length;
-    return {
-      total,
-      count: this.activeFilter
-        ? entries.referenced_entities.filter(this.activeFilter).length
-        : total,
-    };
-  }
-
-  private _entitiesLabel(entries: ExtractFromTargetResultReferenced): string {
-    const { count, total } = this._entityCounts(entries);
-    return this.activeFilter
-      ? this.hass.localize(
-          "ui.components.target-picker.entities_count_filtered",
-          { count, total }
-        )
-      : this.hass.localize("ui.components.target-picker.entities_count", {
-          count,
-        });
-  }
-
  private _renderEntries() {
    const entries = this.parentEntries || this._entries;

@@ -718,7 +683,7 @@ export class HaTargetPickerItemRow extends LitElement {
      const entityName = stateObject
        ? computeEntityName(stateObject, this.hass.entities, this.hass.devices)
        : item;
-      const { area, device } = stateObject
+      const { area, device, parentDevice } = stateObject
        ? getEntityContext(
            stateObject,
            this.hass.entities,
@@ -726,10 +691,17 @@ export class HaTargetPickerItemRow extends LitElement {
            this.hass.areas,
            this.hass.floors
          )
-        : { area: undefined, device: undefined };
+        : { area: undefined, device: undefined, parentDevice: undefined };
      const deviceName = device ? computeDeviceName(device) : undefined;
+      const parentDeviceName = parentDevice
+        ? computeDeviceName(parentDevice)
+        : undefined;
      const areaName = area ? computeAreaName(area) : undefined;
-      const context = [areaName, entityName ? deviceName : undefined]
+      const context = [
+        areaName,
+        parentDeviceName,
+        entityName ? deviceName : undefined,
+      ]
        .filter(Boolean)
        .join(
          computeRTL(
@@ -851,7 +823,6 @@ export class HaTargetPickerItemRow extends LitElement {
      itemId: this.itemId,
      deviceFilter: this.deviceFilter,
      entityFilter: this.entityFilter,
-      activeFilter: this.activeFilter,
      includeDomains: this.includeDomains,
      includeDeviceClasses: this.includeDeviceClasses,
      primaryEntitiesOnly: this.primaryEntitiesOnly,
@@ -1,5 +1,4 @@
 import { consume } from "@lit/context";
-import type { HassServiceTarget } from "home-assistant-js-websocket";
 import { dump } from "js-yaml";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -8,16 +7,8 @@ import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_tim
 import type { Trigger } from "../../data/automation";
 import { migrateAutomationTrigger } from "../../data/automation";
 import { describeCondition, describeTrigger } from "../../data/automation_i18n";
-import type { ConditionDescriptions } from "../../data/condition";
-import {
-  conditionDescriptionsContext,
-  fullEntitiesContext,
-  labelsContext,
-  manifestsContext,
-  triggerDescriptionsContext,
-} from "../../data/context";
+import { fullEntitiesContext, labelsContext } from "../../data/context";
 import type { EntityRegistryEntry } from "../../data/entity/entity_registry";
-import type { DomainManifestLookup } from "../../data/integration";
 import type { LabelRegistryEntry } from "../../data/label/label_registry";
 import type { LogbookEntry } from "../../data/logbook";
 import { describeAction } from "../../data/script_i18n";
@@ -26,12 +17,7 @@ import type {
  ChooseActionTraceStep,
  TraceExtended,
 } from "../../data/trace";
-import type { TargetSelector } from "../../data/selector";
 import { getDataFromPath, isTriggerPath } from "../../data/trace";
-import type { TriggerDescriptions } from "../../data/trigger";
-import { getDeviceTarget } from "../../panels/config/automation/target/get_device_target";
-import { getEntityTarget } from "../../panels/config/automation/target/get_entity_target";
-import "../../panels/config/automation/target/ha-automation-row-targets";
 import "../../panels/logbook/ha-logbook-renderer";
 import type { HomeAssistant } from "../../types";
 import "../ha-alert";
@@ -81,18 +67,6 @@ export class HaTracePathDetails extends LitElement {
  @consume({ context: labelsContext, subscribe: true })
  _labelReg!: LabelRegistryEntry[];

-  @state()
-  @consume({ context: manifestsContext, subscribe: true })
-  private _manifests?: DomainManifestLookup;
-
-  @state()
-  @consume({ context: triggerDescriptionsContext, subscribe: true })
-  private _triggerDescriptions?: TriggerDescriptions;
-
-  @state()
-  @consume({ context: conditionDescriptionsContext, subscribe: true })
-  private _conditionDescriptions?: ConditionDescriptions;
-
  protected render(): TemplateResult {
    return html`
      <div class="padded-box trace-info">
@@ -217,8 +191,51 @@ export class HaTracePathDetails extends LitElement {
            )}`;
          }

+          const selectedType = this.selected.type;
+
          return html`
-            ${this._renderStepHeading(curPath, currentDetail, pathParts)}
+            ${
+              curPath === this.selected.path
+                ? currentDetail.alias
+                  ? html`<h2>${currentDetail.alias}</h2>`
+                  : selectedType === "trigger"
+                    ? html`<h2>
+                        ${describeTrigger(
+                          migrateAutomationTrigger({
+                            ...currentDetail,
+                          }) as Trigger,
+                          this.hass,
+                          this._entityReg
+                        )}
+                      </h2>`
+                    : selectedType === "condition"
+                      ? html`<h2>
+                          ${describeCondition(
+                            currentDetail,
+                            this.hass,
+                            this._entityReg
+                          )}
+                        </h2>`
+                      : selectedType === "action"
+                        ? html`<h2>
+                            ${describeAction(
+                              this.hass,
+                              this._entityReg,
+                              currentDetail
+                            )}
+                          </h2>`
+                        : selectedType === "chooseOption"
+                          ? html`<h2>
+                              ${this.hass.localize(
+                                "ui.panel.config.automation.editor.actions.type.choose.option",
+                                { number: pathParts[pathParts.length - 1] }
+                              )}
+                            </h2>`
+                          : nothing
+                : html`<h2>
+                    ${curPath.substring(this.selected.path.length + 1)}
+                  </h2>`
+            }
            ${
              data.length === 1
                ? nothing
@@ -229,7 +246,17 @@ export class HaTracePathDetails extends LitElement {
                    )}
                  </h3>`
            }
-            ${this._renderNestedCondition(curPath, currentDetail)}
+            ${
+              curPath
+                .substring(this.selected.path.length + 1)
+                .includes("condition")
+                ? html`[${describeCondition(
+                      currentDetail,
+                      this.hass,
+                      this._entityReg
+                    )}]<br />`
+                : nothing
+            }
            ${this.hass!.localize(
              "ui.panel.config.automation.trace.path.executed",
              {
@@ -297,130 +324,6 @@ export class HaTracePathDetails extends LitElement {
    return parts;
  }

-  private _renderStepHeading(
-    curPath: string,
-    currentDetail: any,
-    pathParts: string[]
-  ) {
-    if (curPath !== this.selected.path) {
-      return html`<div class="heading">
-        <h2>${curPath.substring(this.selected.path.length + 1)}</h2>
-      </div>`;
-    }
-
-    const selectedType = this.selected.type;
-
-    const description = currentDetail.alias
-      ? currentDetail.alias
-      : selectedType === "trigger"
-        ? describeTrigger(
-            migrateAutomationTrigger({ ...currentDetail }) as Trigger,
-            this.hass,
-            this._entityReg
-          )
-        : selectedType === "condition"
-          ? describeCondition(currentDetail, this.hass, this._entityReg)
-          : selectedType === "action"
-            ? describeAction(
-                this.hass,
-                this._entityReg,
-                currentDetail,
-                undefined,
-                false,
-                this._manifests
-              )
-            : selectedType === "chooseOption"
-              ? this.hass.localize(
-                  "ui.panel.config.automation.editor.actions.type.choose.option",
-                  { number: pathParts[pathParts.length - 1] }
-                )
-              : undefined;
-
-    if (description === undefined) {
-      return nothing;
-    }
-
-    return html`<div class="heading">
-      <h2>${description}</h2>
-      ${this._renderTargets(currentDetail, selectedType)}
-    </div>`;
-  }
-
-  private _renderNestedCondition(curPath: string, currentDetail: any) {
-    if (
-      !curPath.substring(this.selected.path.length + 1).includes("condition")
-    ) {
-      return nothing;
-    }
-
-    return html`<div class="nested-condition">
-      ${describeCondition(currentDetail, this.hass, this._entityReg)}
-      ${this._renderTargets(currentDetail, "condition", "s")}
-    </div>`;
-  }
-
-  private _renderTargets(
-    config: any,
-    type: NodeInfo["type"],
-    size: "s" | "m" = "m"
-  ) {
-    const target = this._getTarget(config, type);
-    if (!target) {
-      return nothing;
-    }
-    const targetSpec = this._getTargetSelector(config, type);
-    return html`<div class="targets">
-      <ha-automation-row-targets
-        .target=${target}
-        .selector=${targetSpec ? { target: targetSpec } : undefined}
-        .size=${size}
-        interactive
-      ></ha-automation-row-targets>
-    </div>`;
-  }
-
-  private _getTargetSelector(
-    config: any,
-    type: NodeInfo["type"]
-  ): TargetSelector["target"] | undefined {
-    if (type === "trigger") {
-      return this._triggerDescriptions?.[config.trigger]?.target;
-    }
-    if (type === "condition") {
-      return this._conditionDescriptions?.[config.condition]?.target;
-    }
-    if (type === "action" && typeof config.action === "string") {
-      const [domain, service] = config.action.split(".", 2);
-      return this.hass.services?.[domain]?.[service]?.target;
-    }
-    return undefined;
-  }
-
-  private _getTarget(
-    config: any,
-    type: NodeInfo["type"]
-  ): HassServiceTarget | undefined {
-    if (config.target) {
-      return config.target;
-    }
-    if (type === "trigger" || type === "condition") {
-      const element = type === "trigger" ? config.trigger : config.condition;
-      if (element === "state" || element === "numeric_state") {
-        return getEntityTarget(config.entity_id);
-      }
-      if (element === "device") {
-        return getDeviceTarget(config.device_id);
-      }
-      return undefined;
-    }
-    if (type === "action") {
-      return config.entity_id
-        ? getEntityTarget(config.entity_id)
-        : getDeviceTarget(config.device_id);
-    }
-    return undefined;
-  }
-
  private _renderSelectedConfig() {
    if (!this.selected?.path) {
      return nothing;
@@ -560,42 +463,6 @@ export class HaTracePathDetails extends LitElement {
          min-height: 250px;
        }

-        .heading {
-          display: flex;
-          align-items: center;
-          flex-wrap: wrap;
-          gap: var(--ha-space-2);
-          margin: var(--ha-space-4) 0;
-        }
-
-        .heading h2 {
-          margin: 0;
-        }
-
-        .heading .targets {
-          margin-top: 0;
-        }
-
-        .targets {
-          display: flex;
-          align-items: center;
-          flex-wrap: wrap;
-          gap: var(--ha-space-2);
-          margin-top: var(--ha-space-2);
-        }
-
-        .nested-condition {
-          display: flex;
-          align-items: center;
-          flex-wrap: wrap;
-          gap: var(--ha-space-2);
-          margin-bottom: var(--ha-space-2);
-        }
-
-        .nested-condition .targets {
-          margin-top: 0;
-        }
-
        pre {
          margin: 0;
        }
@@ -480,40 +480,6 @@ export const migrateAutomationConfig = <
  return config;
 };

-// The fields of the row holding a trigger, condition or action, as opposed to
-// the configuration of its type. The UI editors of some types build their value
-// from scratch, so these have to be carried over explicitly.
-export const TRIGGER_ROW_CONFIG_KEYS = [
-  "alias",
-  "note",
-  "id",
-  "enabled",
-  "variables",
-] as const;
-
-export const CONDITION_ROW_CONFIG_KEYS = ["alias", "note", "enabled"] as const;
-
-export const ACTION_ROW_CONFIG_KEYS = [
-  "alias",
-  "note",
-  "enabled",
-  "continue_on_error",
-] as const;
-
-export const pickRowConfig = <T extends object>(
-  row: T,
-  keys: readonly string[]
-): Partial<T> => {
-  const source = row as Record<string, unknown>;
-  const config: Record<string, unknown> = {};
-  for (const key of keys) {
-    if (key in source) {
-      config[key] = source[key];
-    }
-  }
-  return config as Partial<T>;
-};
-
 export const migrateAutomationTrigger = (
  trigger: Trigger | Trigger[],
  report?: AutomationMigrationReport
@@ -149,6 +149,9 @@ const formatNumericLimitValue = (
 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 = (
@@ -207,7 +210,8 @@ const tryDescribeTrigger = (
  const description = describeLegacyTrigger(
    trigger as LegacyTrigger,
    hass,
-    entityRegistry
+    entityRegistry,
+    options?.hideEntities
  );

  if (description) {
@@ -231,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) {
@@ -262,7 +267,12 @@ const describeLegacyTrigger = (
  }

  // Numeric State Trigger
-  if (trigger.trigger === "numeric_state") {
+  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);
@@ -282,23 +292,82 @@ const describeLegacyTrigger = (
      ? describeDuration(hass.locale, trigger.for)
      : undefined;

-    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,
+    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`,
+        {
+          attribute: attribute,
+          entity: formatListWithOrs(hass.locale, entities),
+          numberOfEntities: entities.length,
+          above: formatNumericLimitValue(hass, trigger.above),
+          below: formatNumericLimitValue(hass, trigger.below),
+          duration: duration,
+        }
+      );
+    }
+    if (trigger.above !== undefined) {
+      return hass.localize(
+        `${triggerTranslationBaseKey}.numeric_state.description.above`,
+        {
+          attribute: attribute,
+          entity: formatListWithOrs(hass.locale, entities),
+          numberOfEntities: entities.length,
+          above: formatNumericLimitValue(hass, trigger.above),
+          duration: duration,
+        }
+      );
+    }
+    if (trigger.below !== undefined) {
+      return hass.localize(
+        `${triggerTranslationBaseKey}.numeric_state.description.below`,
+        {
+          attribute: attribute,
+          entity: formatListWithOrs(hass.locale, entities),
+          numberOfEntities: entities.length,
+          below: formatNumericLimitValue(hass, trigger.below),
+          duration: duration,
+        }
+      );
+    }
  }

  // State Trigger
  if (trigger.trigger === "state") {
+    const states = hass.states;
+
    const entityArray: string[] = ensureArray(trigger.entity_id);

    const stateObj = hass.states[entityArray?.[0]] as HassEntity | undefined;
@@ -394,12 +463,39 @@ 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.changed`,
+      `${triggerTranslationBaseKey}.state.description.full`,
      {
        hasAttribute: attribute !== "" ? "true" : "false",
        attribute: attribute,
-        anyChange: toChoice === "special" ? "true" : "false",
+        hasEntity: entities.length !== 0 ? "true" : "false",
+        entity: formatListWithOrs(hass.locale, entities),
        fromChoice: fromChoice,
        fromString: fromString,
        toChoice: toChoice,
@@ -941,7 +1037,8 @@ const tryDescribeCondition = (
  const description = describeLegacyCondition(
    condition as LegacyCondition,
    hass,
-    entityRegistry
+    entityRegistry,
+    options?.hideEntities
  );

  if (description) {
@@ -967,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);
@@ -1024,6 +1122,12 @@ const describeLegacyCondition = (

  // State Condition
  if (condition.condition === "state") {
+    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]
@@ -1080,14 +1184,51 @@ const describeLegacyCondition = (
      duration = describeDuration(hass.locale, condition.for) || "";
    }

-    if (states.length === 0) {
-      return hass.localize(`${conditionsTranslationBaseKey}.state.label`);
+    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.is`,
+      `${conditionsTranslationBaseKey}.state.description.full`,
      {
        hasAttribute: attribute !== "" ? "true" : "false",
        attribute: attribute,
+        numberOfEntities: entities.length,
+        // With "any", entities are joined with "or", which takes a singular
+        // verb in English even for multiple entities ("A or B is ...").
+        matchAny: condition.match === "any" ? "true" : "false",
+        entities:
+          condition.match === "any"
+            ? formatListWithOrs(hass.locale, entities)
+            : formatListWithAnds(hass.locale, entities),
+        numberOfStates: states.length,
        states: formatListWithOrs(hass.locale, states),
        hasDuration: duration !== "" ? "true" : "false",
        duration: duration,
@@ -1096,7 +1237,10 @@ const describeLegacyCondition = (
  }

  // Numeric State Condition
-  if (condition.condition === "numeric_state") {
+  if (
+    condition.condition === "numeric_state" &&
+    (condition.entity_id || hideEntities)
+  ) {
    const entity_ids = condition.entity_id
      ? ensureArray(condition.entity_id)
      : [];
@@ -1113,20 +1257,64 @@ const describeLegacyCondition = (
        : condition.attribute
      : undefined;

-    const suffix = numericThresholdSuffix(condition);
-    if (!suffix) {
+    if (hideEntities) {
+      const suffix = numericThresholdSuffix(condition);
+      if (!suffix) {
+        return hass.localize(
+          `${conditionsTranslationBaseKey}.numeric_state.label`
+        );
+      }
      return hass.localize(
-        `${conditionsTranslationBaseKey}.numeric_state.label`
+        `${conditionsTranslationBaseKey}.numeric_state.description.is_${suffix}`,
+        {
+          attribute,
+          above: formatNumericLimitValue(hass, condition.above),
+          below: formatNumericLimitValue(hass, condition.below),
+        }
      );
    }
-    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`,
+        {
+          attribute,
+          entity,
+          numberOfEntities: entity_ids.length,
+          above: formatNumericLimitValue(hass, condition.above),
+          below: formatNumericLimitValue(hass, condition.below),
+        }
+      );
+    }
+    if (condition.above !== undefined) {
+      return hass.localize(
+        `${conditionsTranslationBaseKey}.numeric_state.description.above`,
+        {
+          attribute,
+          entity,
+          numberOfEntities: entity_ids.length,
+          above: formatNumericLimitValue(hass, condition.above),
+        }
+      );
+    }
+    if (condition.below !== undefined) {
+      return hass.localize(
+        `${conditionsTranslationBaseKey}.numeric_state.description.below`,
+        {
+          attribute,
+          entity,
+          numberOfEntities: entity_ids.length,
+          below: formatNumericLimitValue(hass, condition.below),
+        }
+      );
+    }
  }

  // Time condition
@@ -3,16 +3,10 @@ import type { HomeAssistant } from "../types";

 type StrictConnectionMode = "disabled" | "guard_page" | "drop_connection";

-export interface CloudAutoLogin {
-  email: string;
-  failed: string | null;
-}
-
 interface CloudStatusNotLoggedIn {
  logged_in: false;
  cloud: "disconnected" | "connecting" | "connected";
  http_use_ssl: boolean;
-  auto_login: CloudAutoLogin | null;
 }

 export interface CertificateInformation {
@@ -108,15 +102,15 @@ export interface CloudLoginMFA extends CloudLoginBase {
  code: string;
 }

-export type CloudEvent =
-  | { type: "login" | "logout" | "auto_login_cancelled" }
-  | { type: "auto_login_failed"; translation_key: string };
-
 export const cloudLogin = ({
  hass,
  ...rest
 }: CloudLoginPassword | CloudLoginMFA) =>
-  hass.callApi<{ success: boolean }>("POST", "cloud/login", rest);
+  hass.callApi<{ success: boolean; cloud_pipeline?: string }>(
+    "POST",
+    "cloud/login",
+    rest
+  );

 export const cloudLogout = (hass: HomeAssistant) =>
  hass.callApi("POST", "cloud/logout");
@@ -136,33 +130,6 @@ export const cloudRegister = (
    password,
  });

-export const cloudRegisterAutoLogin = (
-  hass: HomeAssistant,
-  email: string,
-  password: string
-) =>
-  hass.callApi("POST", "cloud/register_auto_login", {
-    email,
-    password,
-  });
-
-export const attemptCloudAutoLoginNow = (hass: HomeAssistant) =>
-  hass.callWS({ type: "cloud/attempt_auto_login_now" });
-
-export const resendCloudAutoLoginConfirm = (hass: HomeAssistant) =>
-  hass.callWS({ type: "cloud/resend_auto_login_confirm" });
-
-export const cancelCloudAutoLogin = (hass: HomeAssistant) =>
-  hass.callWS({ type: "cloud/cancel_auto_login" });
-
-export const subscribeCloudEvents = (
-  hass: HomeAssistant,
-  callback: (event: CloudEvent) => void
-) =>
-  hass.connection.subscribeMessage<CloudEvent>(callback, {
-    type: "cloud/subscribe_events",
-  });
-
 export const cloudResendVerification = (hass: HomeAssistant, email: string) =>
  hass.callApi("POST", "cloud/resend_confirm", {
    email,
@@ -25,7 +25,6 @@ export interface ConfigEntry {
  pref_disable_polling: boolean;
  disabled_by: "user" | null;
  reason: string | null;
-  error_reason_translation_domain: string | null;
  error_reason_translation_key: string | null;
  error_reason_translation_placeholders: Record<string, string> | null;
 }
@@ -182,69 +182,26 @@ export const deviceAutomationEditorMode = (
    : "unknown-device";
 };

-const deviceAutomationsSameType = (a: DeviceAutomation, b: DeviceAutomation) =>
-  deviceAutomationIdentifiers
-    .filter((property) => property !== "device_id" && property !== "entity_id")
-    .every((property) => Object.is(a[property], b[property]));
-
-// An entity can be referenced by its registry id or by its entity id, and the
-// two sides do not have to agree.
-const deviceAutomationsSameEntity = (
-  entityRegistry: EntityRegistryEntry[],
+// Like deviceAutomationsEqual, but ignores device_id and entity_id so an
+// automation can be matched to the equivalent one on a different device (for
+// example when a referenced device was replaced by a split device).
+export const deviceAutomationsSimilar = (
  a: DeviceAutomation,
  b: DeviceAutomation
 ) => {
-  if (!a.entity_id && !b.entity_id) {
-    return true;
-  }
-  if (!a.entity_id || !b.entity_id) {
+  if (typeof a !== typeof b) {
    return false;
  }
-  return (
-    a.entity_id === b.entity_id ||
-    compareEntityIdWithEntityRegId(entityRegistry, a.entity_id, b.entity_id)
-  );
-};
-
-// A device exposes the same automation type once per entity, so the same type
-// on another entity is a different automation, not an equivalent one.
-export const findEquivalentDeviceAutomation = <T extends DeviceAutomation>(
-  entityRegistry: EntityRegistryEntry[],
-  automations: T[],
-  automation: DeviceAutomation
-): T | undefined =>
-  automations.find(
-    (candidate) =>
-      deviceAutomationsSameType(candidate, automation) &&
-      deviceAutomationsSameEntity(entityRegistry, candidate, automation)
-  );
-
-// Among the split devices that replaced a removed device, the ones that offer
-// the given automation. Nothing in the registry says which of them took it over,
-// so each candidate has to be asked.
-export const fetchReplacementDevices = async <T extends DeviceAutomation>(
-  hass: HomeAssistant,
-  entityRegistry: EntityRegistryEntry[],
-  automation: DeviceAutomation,
-  compositeSplits: DeviceCompositeSplits,
-  fetchDeviceAutomations: (callWS: CallWS, deviceId: string) => Promise<T[]>
-): Promise<string[]> => {
-  const candidates =
-    compositeSplits[automation.device_id]?.split_ids.filter(
-      (id) => id in hass.devices
-    ) ?? [];
-  const automationsPerCandidate = await Promise.all(
-    candidates.map((id) =>
-      fetchDeviceAutomations(hass.callWS, id).catch(() => [] as T[])
-    )
-  );
-  return candidates.filter((_id, index) =>
-    findEquivalentDeviceAutomation(
-      entityRegistry,
-      automationsPerCandidate[index],
-      automation
-    )
-  );
+  return deviceAutomationIdentifiers
+    .filter((property) => property !== "device_id" && property !== "entity_id")
+    .every((property) => {
+      const inA = property in a;
+      const inB = property in b;
+      if (!inA && !inB) {
+        return true;
+      }
+      return Object.is(a[property], b[property]);
+    });
 };

 const compareEntityIdWithEntityRegId = (
@@ -1,180 +0,0 @@
-// This file is auto-generated from Home Assistant Core's
-// entity platform device classes. Do not edit by hand.
-// Regenerate with `script/gen_device_classes`.
-
-export const DOMAIN_DEVICE_CLASSES: Record<string, string[]> = {
-  binary_sensor: [
-    "battery",
-    "battery_charging",
-    "carbon_monoxide",
-    "cold",
-    "connectivity",
-    "door",
-    "garage_door",
-    "gas",
-    "heat",
-    "light",
-    "lock",
-    "moisture",
-    "motion",
-    "moving",
-    "occupancy",
-    "opening",
-    "plug",
-    "power",
-    "presence",
-    "problem",
-    "running",
-    "safety",
-    "smoke",
-    "sound",
-    "tamper",
-    "update",
-    "vibration",
-    "window",
-  ],
-  button: ["identify", "restart", "update"],
-  cover: [
-    "awning",
-    "blind",
-    "curtain",
-    "damper",
-    "door",
-    "garage",
-    "gate",
-    "shade",
-    "shutter",
-    "window",
-  ],
-  event: ["button", "doorbell", "motion"],
-  humidifier: ["dehumidifier", "humidifier"],
-  infrared: ["emitter", "receiver"],
-  media_player: ["projector", "receiver", "speaker", "tv"],
-  number: [
-    "absolute_humidity",
-    "apparent_power",
-    "aqi",
-    "area",
-    "atmospheric_pressure",
-    "battery",
-    "blood_glucose_concentration",
-    "carbon_dioxide",
-    "carbon_monoxide",
-    "conductivity",
-    "current",
-    "data_rate",
-    "data_size",
-    "distance",
-    "duration",
-    "energy",
-    "energy_distance",
-    "energy_storage",
-    "frequency",
-    "gas",
-    "humidity",
-    "illuminance",
-    "irradiance",
-    "moisture",
-    "monetary",
-    "nitrogen_dioxide",
-    "nitrogen_monoxide",
-    "nitrous_oxide",
-    "ozone",
-    "ph",
-    "pm1",
-    "pm10",
-    "pm25",
-    "pm4",
-    "power",
-    "power_factor",
-    "precipitation",
-    "precipitation_intensity",
-    "pressure",
-    "radon",
-    "reactive_energy",
-    "reactive_power",
-    "signal_strength",
-    "sound_pressure",
-    "speed",
-    "sulphur_dioxide",
-    "temperature",
-    "temperature_delta",
-    "volatile_organic_compounds",
-    "volatile_organic_compounds_parts",
-    "voltage",
-    "volume",
-    "volume_flow_rate",
-    "volume_storage",
-    "water",
-    "weight",
-    "wind_direction",
-    "wind_speed",
-  ],
-  sensor: [
-    "absolute_humidity",
-    "apparent_power",
-    "aqi",
-    "area",
-    "atmospheric_pressure",
-    "battery",
-    "blood_glucose_concentration",
-    "carbon_dioxide",
-    "carbon_monoxide",
-    "conductivity",
-    "current",
-    "data_rate",
-    "data_size",
-    "date",
-    "distance",
-    "duration",
-    "energy",
-    "energy_distance",
-    "energy_storage",
-    "enum",
-    "frequency",
-    "gas",
-    "humidity",
-    "illuminance",
-    "irradiance",
-    "moisture",
-    "monetary",
-    "nitrogen_dioxide",
-    "nitrogen_monoxide",
-    "nitrous_oxide",
-    "ozone",
-    "ph",
-    "pm1",
-    "pm10",
-    "pm25",
-    "pm4",
-    "power",
-    "power_factor",
-    "precipitation",
-    "precipitation_intensity",
-    "pressure",
-    "radon",
-    "reactive_energy",
-    "reactive_power",
-    "signal_strength",
-    "sound_pressure",
-    "speed",
-    "sulphur_dioxide",
-    "temperature",
-    "temperature_delta",
-    "timestamp",
-    "uptime",
-    "volatile_organic_compounds",
-    "volatile_organic_compounds_parts",
-    "voltage",
-    "volume",
-    "volume_flow_rate",
-    "volume_storage",
-    "water",
-    "weight",
-    "wind_direction",
-    "wind_speed",
-  ],
-  switch: ["outlet", "switch"],
-  update: ["firmware"],
-  valve: ["gas", "water"],
-};
@@ -1,11 +0,0 @@
-import type { LocalizeFunc } from "../../common/translations/localize";
-
-export const NO_DEVICE_CLASS = "none";
-
-export const computeDeviceClassName = (
-  localize: LocalizeFunc,
-  domain: string,
-  deviceClass: string
-): string =>
-  localize(`component.${domain}.entity_component.${deviceClass}.name`) ||
-  deviceClass;
@@ -31,6 +31,10 @@ export const entityComboBoxKeys: FuseWeightedKey[] = [
    name: "search_labels.deviceName",
    weight: 7,
  },
+  {
+    name: "search_labels.parentDeviceName",
+    weight: 6,
+  },
  {
    name: "search_labels.areaName",
    weight: 6,
@@ -129,14 +133,20 @@ export const getEntities = (
    const stateObj = hass.states[entityId];

    const friendlyName = computeStateName(stateObj); // Keep this for search
-    const [entityName, deviceName, areaName] = computeEntityNameList(
-      stateObj,
-      [{ type: "entity" }, { type: "device" }, { type: "area" }],
-      hass.entities,
-      hass.devices,
-      hass.areas,
-      hass.floors
-    );
+    const [entityName, deviceName, parentDeviceName, areaName] =
+      computeEntityNameList(
+        stateObj,
+        [
+          { type: "entity" },
+          { type: "device" },
+          { type: "parent_device" },
+          { type: "area" },
+        ],
+        hass.entities,
+        hass.devices,
+        hass.areas,
+        hass.floors
+      );

    const domain = computeDomain(entityId);
    let domainName = domainNames.get(domain);
@@ -146,7 +156,11 @@ export const getEntities = (
    }

    const primary = entityName || deviceName || entityId;
-    const secondary = [areaName, entityName ? deviceName : undefined]
+    const secondary = [
+      areaName,
+      parentDeviceName,
+      entityName ? deviceName : undefined,
+    ]
      .filter(Boolean)
      .join(isRTL ? " ◂ " : " ▸ ");

@@ -159,6 +173,7 @@ export const getEntities = (
      search_labels: {
        entityName: entityName || null,
        deviceName: deviceName || null,
+        parentDeviceName: parentDeviceName || null,
        areaName: areaName || null,
        domainName: domainName || null,
        friendlyName: friendlyName || null,
@@ -1,92 +0,0 @@
-import { computeDomain } from "../../common/entity/compute_domain";
-import type { HomeAssistant } from "../../types";
-import { DOMAIN_DEVICE_CLASSES } from "../device_classes";
-import { NO_DEVICE_CLASS } from "./device_class";
-
-const SEPARATOR = "/";
-
-export interface EntityType {
-  domain: string;
-  deviceClass?: string;
-}
-
-export const entityTypeKey = (domain: string, deviceClass?: string): string =>
-  deviceClass ? `${domain}${SEPARATOR}${deviceClass}` : domain;
-
-export const parseEntityType = (key: string): EntityType => {
-  const index = key.indexOf(SEPARATOR);
-  return index === -1
-    ? { domain: key }
-    : {
-        domain: key.slice(0, index),
-        deviceClass: key.slice(index + SEPARATOR.length),
-      };
-};
-
-export const entityTypesNeedStates = (types?: string[]): boolean =>
-  !!types?.some((key) => key.includes(SEPARATOR));
-
-// A domain worth no split maps to an empty list rather than to its lone bucket.
-export const usedEntityTypes = (
-  states: HomeAssistant["states"]
-): Map<string, string[]> => {
-  const byDomain = new Map<string, Set<string>>();
-
-  for (const stateObj of Object.values(states)) {
-    const domain = computeDomain(stateObj.entity_id);
-    let classes = byDomain.get(domain);
-    if (!classes) {
-      classes = new Set();
-      byDomain.set(domain, classes);
-    }
-    if (domain in DOMAIN_DEVICE_CLASSES) {
-      classes.add(stateObj.attributes.device_class || NO_DEVICE_CLASS);
-    }
-  }
-
-  return new Map(
-    [...byDomain].map(([domain, classes]) => [
-      domain,
-      classes.size > 1 ? [...classes] : [],
-    ])
-  );
-};
-
-// Relies on a domain and its device classes never being selected at once.
-export const entityTypeFilterFunc = (
-  types: string[],
-  states: HomeAssistant["states"]
-): ((entityId: string) => boolean) => {
-  const domains = new Set<string>();
-  const deviceClasses = new Map<string, Set<string>>();
-
-  for (const key of types) {
-    const { domain, deviceClass } = parseEntityType(key);
-    if (deviceClass === undefined) {
-      domains.add(domain);
-    } else {
-      let classes = deviceClasses.get(domain);
-      if (!classes) {
-        classes = new Set();
-        deviceClasses.set(domain, classes);
-      }
-      classes.add(deviceClass);
-    }
-  }
-
-  return (entityId: string) => {
-    const domain = computeDomain(entityId);
-    if (domains.has(domain)) {
-      return true;
-    }
-    const classes = deviceClasses.get(domain);
-    if (!classes) {
-      return false;
-    }
-    const stateObj = states[entityId];
-    if (!stateObj) {
-      return false;
-    }
-    return classes.has(stateObj.attributes.device_class || NO_DEVICE_CLASS);
-  };
-};
@@ -35,18 +35,6 @@ export interface HomeFrontendSystemData {
  shortcuts?: ShortcutItem[];
 }

-export type SecurityAlertSeverity = "alert" | "warning";
-
-export interface SecurityAlertEntityConfig {
-  entity: string;
-  severity?: SecurityAlertSeverity;
-}
-
-export interface SecurityFrontendSystemData {
-  alert_entities?: SecurityAlertEntityConfig[];
-  favorite_entities?: string[];
-}
-
 export interface EnergyFrontendSystemData {
  // Stable "<view>.<card-type>" keys of energy dashboard cards the user has
  // hidden. An absent key or array means nothing is hidden (all cards visible),
@@ -63,7 +51,6 @@ declare global {
    core: CoreFrontendSystemData;
    home: HomeFrontendSystemData;
    energy: EnergyFrontendSystemData;
-    security: SecurityFrontendSystemData;
  }
 }

@@ -1,4 +1,3 @@
-import { timeCacheEntityPromiseFunc } from "../common/util/time-cache-entity-promise-func";
 import type { HomeAssistant } from "../types";
 import type { MediaPlayerItem, SearchMediaResult } from "./media-player";

@@ -8,7 +7,7 @@ export interface ResolvedMediaSource {
 }

 export const resolveMediaSource = (
-  hass: Pick<HomeAssistant, "callWS">,
+  hass: HomeAssistant,
  media_content_id: string
 ) =>
  hass.callWS<ResolvedMediaSource>({
@@ -16,23 +15,6 @@ export const resolveMediaSource = (
    media_content_id,
  });

-// Resolved URLs are signed and valid for 24 hours (CONTENT_AUTH_EXPIRY_TIME in
-// core). Resolving again returns a different signature, which would defeat the
-// browser cache, so reuse the resolved URL for just under its validity.
-export const RESOLVE_CACHE_TIME = 23 * 60 * 60 * 1000; // 23 hours
-
-export const resolveMediaSourceWithCache = (
-  hass: Pick<HomeAssistant, "callWS" | "hassUrl">,
-  media_content_id: string
-): Promise<ResolvedMediaSource> =>
-  timeCacheEntityPromiseFunc(
-    "_resolvedMediaSource",
-    RESOLVE_CACHE_TIME,
-    resolveMediaSource,
-    hass,
-    media_content_id
-  );
-
 export const browseLocalMediaPlayer = (
  hass: HomeAssistant,
  mediaContentId?: string
@@ -48,7 +48,6 @@ export type Selector =
  | DeviceSelector
  | FloorSelector
  | LegacyDeviceSelector
-  | DeviceClassSelector
  | DurationSelector
  | EntitySelector
  | EntityNameSelector
@@ -485,13 +484,6 @@ export interface SelectSelector {
  } | null;
 }

-export interface DeviceClassSelector {
-  device_class: {
-    domain: string;
-    multiple?: boolean;
-  } | null;
-}
-
 export interface SelectorSelector {
  selector: {} | null;
 }
@@ -1,5 +1,6 @@
 import { ensureArray } from "../../common/array/ensure-array";
 import { computeAreaName } from "../../common/entity/compute_area_name";
+import { DEFAULT_ENTITY_NAME } from "../../common/entity/compute_entity_name_display";
 import { blankBeforeUnit } from "../../common/translations/blank_before_unit";
 import type { HomeAssistant } from "../../types";
 import type { Selector } from "../selector";
@@ -82,10 +83,7 @@ export const formatSelectorValue = (
        if (!stateObj) {
          return entityId;
        }
-        const name = hass.formatEntityName(stateObj, [
-          { type: "device" },
-          { type: "entity" },
-        ]);
+        const name = hass.formatEntityName(stateObj, DEFAULT_ENTITY_NAME);
        return name || entityId;
      })
      .join(", ");
@@ -1,4 +1,4 @@
-import { SENSOR_NUMERIC_DEVICE_CLASSES } from "./sensor_entity_constants";
+import { SENSOR_NUMERIC_DEVICE_CLASSES } from "./sensor_numeric_device_classes";
 import type { HomeAssistant } from "../types";

 export const SENSOR_DEVICE_CLASS_BATTERY = "battery";
@@ -1,431 +0,0 @@
-// This file is auto-generated from Home Assistant Core's `DEVICE_CLASS_UNITS`
-// and `STATE_CLASS_UNITS`) and `SensorDeviceClass`
-// (all values minus `NON_NUMERIC_DEVICE_CLASSES`). Do not edit by hand.
-// Regenerate with `script/gen_sensor_entity_constants`.
-
-export const SENSOR_NUMERIC_DEVICE_CLASSES: string[] = [
-  "absolute_humidity",
-  "apparent_power",
-  "aqi",
-  "area",
-  "atmospheric_pressure",
-  "battery",
-  "blood_glucose_concentration",
-  "carbon_dioxide",
-  "carbon_monoxide",
-  "conductivity",
-  "current",
-  "data_rate",
-  "data_size",
-  "distance",
-  "duration",
-  "energy",
-  "energy_distance",
-  "energy_storage",
-  "frequency",
-  "gas",
-  "humidity",
-  "illuminance",
-  "irradiance",
-  "moisture",
-  "monetary",
-  "nitrogen_dioxide",
-  "nitrogen_monoxide",
-  "nitrous_oxide",
-  "ozone",
-  "ph",
-  "pm1",
-  "pm10",
-  "pm25",
-  "pm4",
-  "power",
-  "power_factor",
-  "precipitation",
-  "precipitation_intensity",
-  "pressure",
-  "radon",
-  "reactive_energy",
-  "reactive_power",
-  "signal_strength",
-  "sound_pressure",
-  "speed",
-  "sulphur_dioxide",
-  "temperature",
-  "temperature_delta",
-  "volatile_organic_compounds",
-  "volatile_organic_compounds_parts",
-  "voltage",
-  "volume",
-  "volume_flow_rate",
-  "volume_storage",
-  "water",
-  "weight",
-  "wind_direction",
-  "wind_speed",
-];
-
-export const SENSOR_DEVICE_CLASS_UNITS: Record<string, (string | null)[]> = {
-  absolute_humidity: ["g/m³", "mg/m³"],
-  apparent_power: ["kVA", "mVA", "VA"],
-  aqi: [null],
-  area: ["ac", "cm²", "ft²", "ha", "in²", "km²", "mi²", "mm²", "m²", "yd²"],
-  atmospheric_pressure: [
-    "bar",
-    "cbar",
-    "hPa",
-    "inHg",
-    "inH₂O",
-    "kPa",
-    "mbar",
-    "mmHg",
-    "mPa",
-    "Pa",
-    "psi",
-  ],
-  battery: ["%"],
-  blood_glucose_concentration: ["mg/dL", "mmol/L"],
-  carbon_monoxide: ["mg/m³", "ppb", "ppm", "μg/m³"],
-  carbon_dioxide: ["ppm"],
-  conductivity: ["mS/cm", "S/cm", "μS/cm"],
-  current: ["A", "mA", "μA"],
-  data_rate: [
-    "B/s",
-    "bit/s",
-    "GB/s",
-    "Gbit/s",
-    "GiB/s",
-    "kB/s",
-    "kbit/s",
-    "KiB/s",
-    "MB/s",
-    "Mbit/s",
-    "MiB/s",
-  ],
-  data_size: [
-    "B",
-    "bit",
-    "EB",
-    "EiB",
-    "GB",
-    "Gbit",
-    "GiB",
-    "kB",
-    "kbit",
-    "KiB",
-    "MB",
-    "Mbit",
-    "MiB",
-    "PB",
-    "PiB",
-    "TB",
-    "TiB",
-    "YB",
-    "YiB",
-    "ZB",
-    "ZiB",
-  ],
-  distance: ["cm", "ft", "in", "km", "m", "mi", "mm", "nmi", "yd"],
-  duration: ["d", "h", "min", "ms", "s", "μs"],
-  energy: [
-    "cal",
-    "Gcal",
-    "GJ",
-    "GWh",
-    "J",
-    "kcal",
-    "kJ",
-    "kWh",
-    "Mcal",
-    "MJ",
-    "MWh",
-    "mWh",
-    "TWh",
-    "Wh",
-  ],
-  energy_distance: ["km/kWh", "kWh/100km", "mi/kWh", "Wh/km"],
-  energy_storage: [
-    "cal",
-    "Gcal",
-    "GJ",
-    "GWh",
-    "J",
-    "kcal",
-    "kJ",
-    "kWh",
-    "Mcal",
-    "MJ",
-    "MWh",
-    "mWh",
-    "TWh",
-    "Wh",
-  ],
-  frequency: ["GHz", "Hz", "kHz", "MHz", "mHz"],
-  gas: ["CCF", "ft³", "L", "MCF", "m³"],
-  humidity: ["%"],
-  illuminance: ["lx"],
-  irradiance: ["BTU/(h⋅ft²)", "W/m²"],
-  moisture: ["%"],
-  nitrogen_dioxide: ["ppb", "ppm", "μg/m³"],
-  nitrogen_monoxide: ["ppb", "μg/m³"],
-  nitrous_oxide: ["μg/m³"],
-  ozone: ["ppb", "ppm", "μg/m³"],
-  ph: [null],
-  pm1: ["μg/m³"],
-  pm10: ["μg/m³"],
-  pm25: ["μg/m³"],
-  pm4: ["μg/m³"],
-  power_factor: ["%", null],
-  power: ["GW", "kW", "MW", "mW", "TW", "W"],
-  precipitation: ["cm", "in", "mm"],
-  precipitation_intensity: ["in/d", "in/h", "mm/d", "mm/h"],
-  pressure: [
-    "bar",
-    "cbar",
-    "hPa",
-    "inHg",
-    "inH₂O",
-    "kPa",
-    "mbar",
-    "mmHg",
-    "mPa",
-    "Pa",
-    "psi",
-  ],
-  radon: ["Bq/m³", "pCi/L"],
-  reactive_energy: ["kvarh", "varh"],
-  reactive_power: ["kvar", "mvar", "var"],
-  signal_strength: ["dB", "dBm"],
-  sound_pressure: ["dB", "dBA"],
-  speed: [
-    "Beaufort",
-    "ft/s",
-    "in/d",
-    "in/h",
-    "in/s",
-    "km/h",
-    "kn",
-    "m/min",
-    "m/s",
-    "mm/d",
-    "mm/h",
-    "mm/s",
-    "mph",
-  ],
-  sulphur_dioxide: ["ppb", "μg/m³"],
-  temperature: ["K", "°C", "°F"],
-  temperature_delta: ["K", "°C", "°F"],
-  volatile_organic_compounds: ["mg/m³", "μg/m³"],
-  volatile_organic_compounds_parts: ["ppb", "ppm"],
-  voltage: ["kV", "MV", "mV", "V", "μV"],
-  volume: ["CCF", "fl. oz.", "ft³", "gal", "L", "MCF", "mL", "m³"],
-  volume_flow_rate: [
-    "ft³/min",
-    "gal/d",
-    "gal/h",
-    "gal/min",
-    "L/h",
-    "L/min",
-    "L/s",
-    "mL/s",
-    "m³/h",
-    "m³/min",
-    "m³/s",
-  ],
-  volume_storage: ["CCF", "fl. oz.", "ft³", "gal", "L", "MCF", "mL", "m³"],
-  water: ["CCF", "ft³", "gal", "L", "MCF", "m³"],
-  weight: ["g", "kg", "lb", "mg", "oz", "st", "μg"],
-  wind_direction: ["°"],
-  wind_speed: [
-    "Beaufort",
-    "ft/s",
-    "in/s",
-    "km/h",
-    "kn",
-    "m/min",
-    "m/s",
-    "mm/s",
-    "mph",
-  ],
-};
-
-export const SENSOR_DEVICE_CLASS_CONVERTIBLE_UNITS: Record<
-  string,
-  (string | null)[]
-> = {
-  absolute_humidity: ["g/m³", "mg/m³"],
-  apparent_power: ["kVA", "mVA", "VA"],
-  area: ["ac", "cm²", "ft²", "ha", "in²", "km²", "mi²", "mm²", "m²", "yd²"],
-  atmospheric_pressure: [
-    "bar",
-    "cbar",
-    "hPa",
-    "inHg",
-    "inH₂O",
-    "kPa",
-    "mbar",
-    "mmHg",
-    "mPa",
-    "Pa",
-    "psi",
-  ],
-  blood_glucose_concentration: ["mg/dL", "mmol/L"],
-  carbon_monoxide: ["mg/m³", "ppb", "ppm", "μg/m³"],
-  conductivity: ["mS/cm", "S/cm", "μS/cm"],
-  current: ["A", "mA", "μA"],
-  data_rate: [
-    "B/s",
-    "bit/s",
-    "GB/s",
-    "Gbit/s",
-    "GiB/s",
-    "kB/s",
-    "kbit/s",
-    "KiB/s",
-    "MB/s",
-    "Mbit/s",
-    "MiB/s",
-  ],
-  data_size: [
-    "B",
-    "bit",
-    "EB",
-    "EiB",
-    "GB",
-    "Gbit",
-    "GiB",
-    "kB",
-    "kbit",
-    "KiB",
-    "MB",
-    "Mbit",
-    "MiB",
-    "PB",
-    "PiB",
-    "TB",
-    "TiB",
-    "YB",
-    "YiB",
-    "ZB",
-    "ZiB",
-  ],
-  distance: ["cm", "ft", "in", "km", "m", "mi", "mm", "nmi", "yd"],
-  duration: ["d", "h", "min", "ms", "s", "μs"],
-  energy: [
-    "cal",
-    "Gcal",
-    "GJ",
-    "GWh",
-    "J",
-    "kcal",
-    "kJ",
-    "kWh",
-    "Mcal",
-    "MJ",
-    "MWh",
-    "mWh",
-    "TWh",
-    "Wh",
-  ],
-  energy_distance: ["km/kWh", "kWh/100km", "mi/kWh", "Wh/km"],
-  energy_storage: [
-    "cal",
-    "Gcal",
-    "GJ",
-    "GWh",
-    "J",
-    "kcal",
-    "kJ",
-    "kWh",
-    "Mcal",
-    "MJ",
-    "MWh",
-    "mWh",
-    "TWh",
-    "Wh",
-  ],
-  frequency: ["GHz", "Hz", "kHz", "MHz", "mHz"],
-  gas: ["CCF", "ft³", "L", "MCF", "m³"],
-  nitrogen_dioxide: ["ppb", "ppm", "μg/m³"],
-  nitrogen_monoxide: ["ppb", "μg/m³"],
-  ozone: ["ppb", "ppm", "μg/m³"],
-  power: ["GW", "kW", "MW", "mW", "TW", "W"],
-  power_factor: ["%", null],
-  precipitation: ["cm", "in", "mm"],
-  precipitation_intensity: ["in/d", "in/h", "mm/d", "mm/h"],
-  pressure: [
-    "bar",
-    "cbar",
-    "hPa",
-    "inHg",
-    "inH₂O",
-    "kPa",
-    "mbar",
-    "mmHg",
-    "mPa",
-    "Pa",
-    "psi",
-  ],
-  radon: ["Bq/m³", "pCi/L"],
-  reactive_energy: ["kvarh", "varh"],
-  reactive_power: ["kvar", "mvar", "var"],
-  speed: [
-    "Beaufort",
-    "ft/s",
-    "in/d",
-    "in/h",
-    "in/s",
-    "km/h",
-    "kn",
-    "m/min",
-    "m/s",
-    "mm/d",
-    "mm/h",
-    "mm/s",
-    "mph",
-  ],
-  sulphur_dioxide: ["ppb", "μg/m³"],
-  temperature: ["K", "°C", "°F"],
-  temperature_delta: ["K", "°C", "°F"],
-  volatile_organic_compounds: ["mg/m³", "μg/m³"],
-  volatile_organic_compounds_parts: ["ppb", "ppm"],
-  voltage: ["kV", "MV", "mV", "V", "μV"],
-  volume: ["CCF", "fl. oz.", "ft³", "gal", "L", "MCF", "mL", "m³"],
-  volume_flow_rate: [
-    "ft³/min",
-    "gal/d",
-    "gal/h",
-    "gal/min",
-    "L/h",
-    "L/min",
-    "L/s",
-    "mL/s",
-    "m³/h",
-    "m³/min",
-    "m³/s",
-  ],
-  volume_storage: ["CCF", "fl. oz.", "ft³", "gal", "L", "MCF", "mL", "m³"],
-  water: ["CCF", "ft³", "gal", "L", "MCF", "m³"],
-  weight: ["g", "kg", "lb", "mg", "oz", "st", "μg"],
-  wind_speed: [
-    "Beaufort",
-    "ft/s",
-    "in/s",
-    "km/h",
-    "kn",
-    "m/min",
-    "m/s",
-    "mm/s",
-    "mph",
-  ],
-};
-
-export const SENSOR_STATE_CLASSES: string[] = [
-  "measurement",
-  "measurement_angle",
-  "total",
-  "total_increasing",
-];
-
-export const SENSOR_STATE_CLASS_UNITS: Record<string, string[]> = {
-  measurement_angle: ["°"],
-};
@@ -0,0 +1,64 @@
+// This file is auto-generated from Home Assistant Core's `SensorDeviceClass`
+// (all values minus `NON_NUMERIC_DEVICE_CLASSES`). Do not edit by hand.
+// Regenerate with `script/gen_numeric_device_classes`.
+
+export const SENSOR_NUMERIC_DEVICE_CLASSES: string[] = [
+  "absolute_humidity",
+  "apparent_power",
+  "aqi",
+  "area",
+  "atmospheric_pressure",
+  "battery",
+  "blood_glucose_concentration",
+  "carbon_dioxide",
+  "carbon_monoxide",
+  "conductivity",
+  "current",
+  "data_rate",
+  "data_size",
+  "distance",
+  "duration",
+  "energy",
+  "energy_distance",
+  "energy_storage",
+  "frequency",
+  "gas",
+  "humidity",
+  "illuminance",
+  "irradiance",
+  "moisture",
+  "monetary",
+  "nitrogen_dioxide",
+  "nitrogen_monoxide",
+  "nitrous_oxide",
+  "ozone",
+  "ph",
+  "pm1",
+  "pm10",
+  "pm25",
+  "pm4",
+  "power",
+  "power_factor",
+  "precipitation",
+  "precipitation_intensity",
+  "pressure",
+  "radon",
+  "reactive_energy",
+  "reactive_power",
+  "signal_strength",
+  "sound_pressure",
+  "speed",
+  "sulphur_dioxide",
+  "temperature",
+  "temperature_delta",
+  "volatile_organic_compounds",
+  "volatile_organic_compounds_parts",
+  "voltage",
+  "volume",
+  "volume_flow_rate",
+  "volume_storage",
+  "water",
+  "weight",
+  "wind_direction",
+  "wind_speed",
+];
@@ -10,7 +10,6 @@ import deepClone from "deep-clone-simple";
 import { deepActiveElement } from "../../common/dom/deep-active-element";
 import type { HASSDomEvent } from "../../common/dom/fire_event";
 import { fireEvent } from "../../common/dom/fire_event";
-import { nextRender } from "../../common/util/render-status";
 import "../../components/ha-button";
 import "../../components/ha-dialog";
 import "../../components/ha-dialog-footer";
@@ -124,7 +123,6 @@ export class DialogForm
    this._initialData = deepClone(this._data);
    this._error = undefined;
    this._resetDirtyTracking();
-    void this._focusActiveForm(nested);
  };

  private _popStack(): StackEntry | undefined {
@@ -144,125 +142,23 @@ export class DialogForm
    return prev;
  }

-  private async _afterFormRender(): Promise<void> {
-    await this.updateComplete;
-    await this._form?.updateComplete;
-    await nextRender();
-  }
-
-  private async _waitForSelectorElements(): Promise<void> {
-    const selectors = this._form?.shadowRoot?.querySelectorAll("ha-selector");
-    if (selectors?.length) {
-      await Promise.all(
-        Array.from(selectors, (element) =>
-          "updateComplete" in element
-            ? (element as LitElement).updateComplete
-            : undefined
-        )
-      );
-    }
-
-    const pending = this._undefinedCustomElements(this._form);
-    if (!pending.length) {
-      return;
-    }
-
-    await Promise.all(pending.map((tag) => customElements.whenDefined(tag)));
-    await nextRender();
-  }
-
-  private _undefinedCustomElements(root?: ParentNode): string[] {
-    const tags = new Set<string>();
-    const visit = (node: ParentNode) => {
-      if (node instanceof Element && node.shadowRoot) {
-        visit(node.shadowRoot);
-      }
-      for (const child of node.children) {
-        if (
-          child.localName.includes("-") &&
-          !customElements.get(child.localName)
-        ) {
-          tags.add(child.localName);
-        }
-        visit(child);
-      }
-    };
-    if (root) {
-      visit(root);
-    }
-    return [...tags];
-  }
-
-  private _focusFirstControl(root = this._form): void {
-    if (!root) {
-      return;
-    }
-
-    const visit = (node: ParentNode): HTMLElement | undefined => {
-      if (node instanceof Element && node.shadowRoot) {
-        const inShadow = visit(node.shadowRoot);
-        if (inShadow) {
-          return inShadow;
-        }
-      }
-
-      for (const child of node.children) {
-        if (
-          child instanceof HTMLElement &&
-          child.matches("input, textarea, select, button")
-        ) {
-          return child;
-        }
-        const found = visit(child);
-        if (found) {
-          return found;
-        }
-      }
-
-      return undefined;
-    };
-
-    visit(root)?.focus();
-  }
-
-  private async _focusActiveForm(
-    expectedParams: FormDialogParams
-  ): Promise<void> {
-    await this._afterFormRender();
-
-    if (!this.isConnected || !this._open || this._params !== expectedParams) {
-      return;
-    }
-
-    await this._waitForSelectorElements();
-
-    if (!this.isConnected || !this._open || this._params !== expectedParams) {
-      return;
-    }
-
-    this._focusFirstControl();
-  }
-
  private async _restoreFocusAndScroll(
    scrollTop: number,
    expectedParams: FormDialogParams,
    focusTarget?: Element
  ): Promise<void> {
-    await this._afterFormRender();
+    await this.updateComplete;
+    await this._form?.updateComplete;
+    await new Promise<void>((resolve) => {
+      requestAnimationFrame(() => resolve());
+    });

-    if (
-      !this.isConnected ||
-      !this._open ||
-      this._params !== expectedParams ||
-      !this._dialog
-    ) {
+    if (!this._open || this._params !== expectedParams || !this._dialog) {
      return;
    }

    if (focusTarget instanceof HTMLElement && focusTarget.isConnected) {
      focusTarget.focus();
-    } else {
-      this._focusFirstControl();
    }

    this._dialog.bodyContainer.scrollTop = scrollTop;
@@ -1,11 +1,9 @@
-import { mdiCheck, mdiContentCopy, mdiDevices, mdiTextureBox } from "@mdi/js";
 import { consume } from "@lit/context";
 import type { HassEntity } from "home-assistant-js-websocket";
-import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
+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 type { HASSDomCurrentTargetEvent } from "../../common/dom/fire_event";
 import { computeAreaName } from "../../common/entity/compute_area_name";
 import { computeDeviceNameDisplay } from "../../common/entity/compute_device_name";
 import { computeFloorName } from "../../common/entity/compute_floor_name";
@@ -13,16 +11,8 @@ 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-floor-icon";
-import "../../components/ha-icon";
-import "../../components/ha-icon-next";
-import "../../components/ha-label";
-import "../../components/ha-svg-icon";
-import "../../components/item/ha-list-item-button";
-import type { HaListItemButton } from "../../components/item/ha-list-item-button";
 import "../../components/item/ha-list-item-value";
 import "../../components/list/ha-grouped-list";
-import { copyToClipboard } from "../../common/util/copy-clipboard";
 import type { LocalizeKeys } from "../../common/translations/localize";
 import { labelsContext } from "../../data/context";
 import type { ExtEntityRegistryEntry } from "../../data/entity/entity_registry";
@@ -35,8 +25,6 @@ import { getFeatures } from "../../common/entity/get_domain_features";
 import { supportsFeature } from "../../common/entity/supports-feature";
 import { titleCase } from "../../common/string/title-case";
 import { stringCompare } from "../../common/string/compare";
-import { brandsUrl } from "../../util/brands-url";
-import { showToast } from "../../util/toast";

 interface DetailsViewParams {
  entityId: string;
@@ -45,10 +33,7 @@ interface DetailsViewParams {
 interface DetailEntry {
  translationKey: LocalizeKeys;
  value: string;
-  displayValue?: TemplateResult;
  href?: string;
-  icon?: TemplateResult;
-  copyable?: boolean;
 }

@customElement("ha-more-info-details")
@@ -67,17 +52,6 @@ class HaMoreInfoDetails extends LitElement {
  @state()
  private _labels?: LabelRegistryEntry[];

-  @state() private _copiedValue?: string;
-
-  private _copyFeedbackTimeout?: number;
-
-  public disconnectedCallback(): void {
-    super.disconnectedCallback();
-    window.clearTimeout(this._copyFeedbackTimeout);
-    this._copyFeedbackTimeout = undefined;
-    this._copiedValue = undefined;
-  }
-
  protected willUpdate(changedProps: PropertyValues<this>): void {
    super.willUpdate(changedProps);
    if (changedProps.has("entry") && this.entry) {
@@ -99,11 +73,8 @@ class HaMoreInfoDetails extends LitElement {
      stateEntries,
      attributes,
      yamlData: stateYamlData,
-    } = this._getDetailData(
-      this._stateObj,
-      this.hass.formatEntityAttributeName
-    );
-    const { floor, area, device } = getEntityContext(
+    } = this._getDetailData(this._stateObj);
+    const { floor, area, device, parentDevice } = getEntityContext(
      this._stateObj,
      this.hass.entities,
      this.hass.devices,
@@ -112,6 +83,13 @@ class HaMoreInfoDetails extends LitElement {
    );
    const floorName = floor ? computeFloorName(floor) : undefined;
    const areaName = area ? (computeAreaName(area) ?? area.area_id) : undefined;
+    const parentDeviceName = parentDevice
+      ? computeDeviceNameDisplay(
+          parentDevice,
+          this.hass.localize,
+          this.hass.states
+        )
+      : undefined;
    const deviceName = device
      ? computeDeviceNameDisplay(device, this.hass.localize, this.hass.states)
      : undefined;
@@ -119,12 +97,12 @@ class HaMoreInfoDetails extends LitElement {
      ? this.hass.localize(`component.${this.entry.platform}.title`) ||
        this.entry.platform
      : undefined;
-    const labels =
-      this.entry?.labels.map((labelId) => ({
-        id: labelId,
-        entry: this._labels?.find((label) => label.label_id === labelId),
-      })) ?? [];
-    const labelNames = labels.map(({ id, entry }) => entry?.name ?? id);
+    const labelNames =
+      this.entry?.labels.map(
+        (labelId) =>
+          this._labels?.find((label) => label.label_id === labelId)?.name ??
+          labelId
+      ) ?? [];
    const contextEntries: DetailEntry[] = [];

    if (floor && floorName) {
@@ -132,7 +110,6 @@ class HaMoreInfoDetails extends LitElement {
        translationKey: "ui.dialogs.more_info_control.floor",
        value: floorName,
        href: "/config/areas/dashboard",
-        icon: html`<ha-floor-icon slot="end" .floor=${floor}></ha-floor-icon>`,
      });
    }
    if (area && areaName) {
@@ -140,9 +117,13 @@ class HaMoreInfoDetails extends LitElement {
        translationKey: "ui.components.related-items.area",
        value: areaName,
        href: `/config/areas/area/${area.area_id}`,
-        icon: area.icon
-          ? html`<ha-icon slot="end" .icon=${area.icon}></ha-icon>`
-          : html`<ha-svg-icon slot="end" .path=${mdiTextureBox}></ha-svg-icon>`,
+      });
+    }
+    if (parentDevice && parentDeviceName) {
+      contextEntries.push({
+        translationKey: "ui.dialogs.more_info_control.parent_device",
+        value: parentDeviceName,
+        href: `/config/devices/device/${parentDevice.id}`,
      });
    }
    if (device && deviceName) {
@@ -150,7 +131,6 @@ class HaMoreInfoDetails extends LitElement {
        translationKey: "ui.components.related-items.device",
        value: deviceName,
        href: `/config/devices/device/${device.id}`,
-        icon: html`<ha-svg-icon slot="end" .path=${mdiDevices}></ha-svg-icon>`,
      });
    }
    if (this.entry?.platform && integrationName) {
@@ -160,63 +140,32 @@ class HaMoreInfoDetails extends LitElement {
        href: this.entry.config_entry_id
          ? `/config/integrations/integration/${this.entry.platform}#config_entry=${this.entry.config_entry_id}`
          : undefined,
-        icon: html`<img
-          slot="end"
-          alt=""
-          crossorigin="anonymous"
-          referrerpolicy="no-referrer"
-          src=${brandsUrl(
-            {
-              domain: this.entry.platform,
-              type: "icon",
-              darkOptimized: this.hass.themes?.darkMode,
-            },
-            this.hass.auth.data.hassUrl
-          )}
-        />`,
      });
    }

-    contextEntries.push(
+    const entityEntries: DetailEntry[] = [
      {
        translationKey: "ui.dialogs.more_info_control.entity_id",
        value: this.params.entityId,
-        copyable: true,
      },
      {
        translationKey: "ui.dialogs.more_info_control.labels",
        value: labelNames.join(", ") || this.hass.localize("ui.common.none"),
-        displayValue: labels.length
-          ? html`<div class="labels">
-              ${labels.map(
-                ({ id, entry }) => html`
-                  <ha-label
-                    class="text-ellipsis"
-                    .color=${entry?.color ?? undefined}
-                    .description=${entry?.description ?? undefined}
-                  >
-                    ${
-                      entry?.icon
-                        ? html`<ha-icon
-                            slot="icon"
-                            .icon=${entry.icon}
-                          ></ha-icon>`
-                        : nothing
-                    }
-                    ${entry?.name ?? id}
-                  </ha-label>
-                `
-              )}
-            </div>`
-          : undefined,
-      }
-    );
+      },
+    ];
    const yamlData = {
-      context: {
-        ...(floorName ? { floor: floorName } : {}),
-        ...(areaName ? { area: areaName } : {}),
-        ...(deviceName ? { device: deviceName } : {}),
-        ...(integrationName ? { integration: integrationName } : {}),
+      ...(contextEntries.length
+        ? {
+            context: {
+              ...(floorName ? { floor: floorName } : {}),
+              ...(areaName ? { area: areaName } : {}),
+              ...(parentDeviceName ? { parent_device: parentDeviceName } : {}),
+              ...(deviceName ? { device: deviceName } : {}),
+              ...(integrationName ? { integration: integrationName } : {}),
+            },
+          }
+        : {}),
+      entity: {
        entity_id: this.params.entityId,
        labels: labelNames,
      },
@@ -234,9 +183,17 @@ class HaMoreInfoDetails extends LitElement {
                in-dialog
              ></ha-yaml-editor>`
            : html`
-                <ha-grouped-list>
-                  ${this._renderEntries(contextEntries)}
-                </ha-grouped-list>
+                ${
+                  contextEntries.length
+                    ? html`<ha-grouped-list
+                        .header=${this.hass.localize(
+                          "ui.dialogs.more_info_control.context"
+                        )}
+                      >
+                        ${this._renderEntries(contextEntries)}
+                      </ha-grouped-list>`
+                    : nothing
+                }

                <ha-grouped-list
                  .header=${this.hass.localize(
@@ -246,6 +203,14 @@ class HaMoreInfoDetails extends LitElement {
                  ${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"
@@ -261,10 +226,7 @@ class HaMoreInfoDetails extends LitElement {

  private _getDetailData = memoizeOne(
    (
-      stateObj: HassEntity,
-      // cache key only: a new function is assigned when translation-based
-      // format functions reload, invalidating results formatted via this.hass
-      _formatEntityAttributeName: HomeAssistant["formatEntityAttributeName"]
+      stateObj: HassEntity
    ): {
      stateEntries: DetailEntry[];
      attributes: { name: string; label: string }[];
@@ -331,72 +293,17 @@ class HaMoreInfoDetails extends LitElement {
  }

  private _renderEntries(entries: DetailEntry[]) {
-    return entries.map((entry) => {
-      const label = this.hass.localize(entry.translationKey);
-
-      if (!entry.href && !entry.copyable) {
-        return html`
-          <ha-list-item-value .label=${label}
-            >${entry.displayValue ?? entry.value}</ha-list-item-value
-          >
-        `;
-      }
-
-      if (entry.copyable) {
-        return html`
-          <ha-list-item-button
-            aria-label=${this.hass.localize(
-              "ui.dialogs.more_info_control.copy_value",
-              { label, value: entry.value }
-            )}
-            data-value=${entry.value}
-            @click=${this._copyValue}
-          >
-            <div class="link-row" slot="content">
-              <div class="label">${label}</div>
-              <div class="value">${entry.value}</div>
-            </div>
-            <ha-svg-icon
-              class=${this._copiedValue === entry.value ? "copy-success" : ""}
-              slot="end"
-              .path=${
-                this._copiedValue === entry.value ? mdiCheck : mdiContentCopy
-              }
-            ></ha-svg-icon>
-          </ha-list-item-button>
-        `;
-      }
-
-      return html`
-        <ha-list-item-button .href=${entry.href}>
-          <div class="link-row" slot="content">
-            <div class="label">${label}</div>
-            <div class="value">${entry.value}</div>
-          </div>
-          ${entry.icon ?? nothing}
-          <ha-icon-next slot="end"></ha-icon-next>
-        </ha-list-item-button>
-      `;
-    });
-  }
-
-  private async _copyValue(ev: HASSDomCurrentTargetEvent<HaListItemButton>) {
-    const value = ev.currentTarget.dataset.value;
-    if (value === undefined) {
-      return;
-    }
-    await copyToClipboard(value);
-    const duration = 4000;
-    this._copiedValue = value;
-    window.clearTimeout(this._copyFeedbackTimeout);
-    this._copyFeedbackTimeout = window.setTimeout(() => {
-      this._copiedValue = undefined;
-      this._copyFeedbackTimeout = undefined;
-    }, duration);
-    showToast(this, {
-      message: this.hass.localize("ui.common.copied_clipboard"),
-      duration,
-    });
+    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: { name: string; label: string }[]) {
@@ -460,63 +367,11 @@ class HaMoreInfoDetails extends LitElement {
    }

    ha-grouped-list + ha-grouped-list {
-      margin-top: var(--ha-space-6);
+      margin-top: var(--ha-space-4);
    }

-    ha-list-item-button {
-      --ha-row-item-padding-block: var(--ha-space-2);
-      --ha-row-item-min-height: 40px;
-      --ha-row-item-gap: var(--ha-space-3);
-      --mdc-icon-size: 20px;
-    }
-
-    ha-list-item-button::part(end) {
-      gap: var(--ha-space-2);
-    }
-
-    ha-list-item-button img {
-      width: 20px;
-      height: 20px;
-      object-fit: contain;
-    }
-
-    .link-row {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: var(--ha-space-3);
-    }
-
-    .link-row .label {
-      flex: 1;
-      color: var(--secondary-text-color);
-    }
-
-    .link-row .value {
-      max-width: 60%;
-      min-width: 0;
-      text-align: end;
-      overflow-wrap: anywhere;
-    }
-
-    .labels {
-      display: flex;
-      justify-content: flex-end;
-      flex-wrap: wrap;
-      gap: var(--ha-space-1);
-    }
-
-    .labels ha-label {
-      min-width: 0;
-      max-width: 100%;
-    }
-
-    ha-icon-next {
-      color: var(--secondary-text-color);
-    }
-
-    ha-svg-icon.copy-success {
-      color: var(--success-color);
+    a {
+      color: var(--primary-color);
    }

    .empty {
@@ -28,7 +28,6 @@ import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import type { HASSDomEvent } from "../../common/dom/fire_event";
 import { fireEvent } from "../../common/dom/fire_event";
-import { mainWindow } from "../../common/dom/get_main_window";
 import { stopPropagation } from "../../common/dom/stop_propagation";
 import { computeAreaName } from "../../common/entity/compute_area_name";
 import { computeDeviceName } from "../../common/entity/compute_device_name";
@@ -48,10 +47,7 @@ import {
  replaceCurrentUrl,
  updateHistoryState,
 } from "../../common/navigate";
-import {
-  createMoreInfoUrl,
-  decodeMoreInfoUrl,
-} from "../../common/url/more-info-query-params";
+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";
@@ -235,13 +231,7 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
  }

  private _dialogClosed() {
-    // Restore the pre-dialog URL only while the URL still carries this
-    // dialog's deep-link params: navigate() waits for the close only up to
-    // DIALOG_WAIT_TIMEOUT and may have committed a new URL already.
-    if (
-      this._returnUrl &&
-      decodeMoreInfoUrl(mainWindow.location.search).entityId === this._entityId
-    ) {
+    if (this._returnUrl) {
      replaceCurrentUrl(this._returnUrl);
    }
    this._entityId = undefined;
@@ -625,11 +615,17 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
    const deviceName = context?.device
      ? computeDeviceName(context.device)
      : undefined;
+    const parentDeviceName = context?.parentDevice
+      ? computeDeviceName(context.parentDevice)
+      : undefined;
    const areaName = context?.area ? computeAreaName(context.area) : undefined;

-    const breadcrumb = [areaName, deviceName, entityName].filter(
-      (v): v is string => Boolean(v)
-    );
+    const breadcrumb = [
+      areaName,
+      parentDeviceName,
+      deviceName,
+      entityName,
+    ].filter((v): v is string => Boolean(v));
    const defaultTitle = breadcrumb.pop() || entityId;
    const addToTitle = this.hass.localize(
      "ui.dialogs.more_info_control.add_to.title",
@@ -1039,14 +1035,10 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
      }
    }

-    if (
-      this._currView === "settings" &&
-      this._entry &&
-      ((changedProps.has("_currView") &&
-        changedProps.get("_currView") !== "settings") ||
-        (changedProps.has("_entry") && !changedProps.get("_entry")))
-    ) {
-      this._initDirtyTracking({ type: "deep" });
+    if (changedProps.has("_currView") || changedProps.has("_entry")) {
+      if (this._currView === "settings" && this._entry) {
+        this._initDirtyTracking({ type: "deep" });
+      }
    }

    if (changedProps.has("_currView")) {
@@ -24,8 +24,6 @@ export interface RouteOptions {
  // Function to load the page.
  load?: () => Promise<unknown>;
  cache?: boolean;
-  // Recreate the page when the remaining path (the item id) changes.
-  itemId?: boolean;
  waitForReady?: boolean;
 }

@@ -140,23 +138,10 @@ export class HassRouterPage extends ReactiveElement {
    }

    if (this._currentPage === newPage) {
-      const oldRoute = changedProps.get("route");
-      const oldTail = oldRoute ? computeRouteTail(oldRoute).path : undefined;
-      const newTail = route ? this._computeTail(route).path : undefined;
-      if (
-        typeof routeOptions === "object" &&
-        routeOptions.itemId &&
-        oldTail !== newTail
-      ) {
-        // Fall through to the normal create path so `load` / loading screen
-        // still run. itemId pages are not cached, so this is a new element.
-        this._currentPage = "";
-      } else {
-        if (this.lastChild) {
-          this.updatePageEl(this.lastChild, changedProps);
-        }
-        return;
+      if (this.lastChild) {
+        this.updatePageEl(this.lastChild, changedProps);
      }
+      return;
    }

    if (!routeOptions) {
@@ -380,10 +365,7 @@ export class HassRouterPage extends ReactiveElement {
    this.updatePageEl(panelEl);
    this.appendChild(panelEl);

-    if (
-      (routerOptions.cacheAll || routeOptions.cache) &&
-      !routeOptions.itemId
-    ) {
+    if (routerOptions.cacheAll || routeOptions.cache) {
      this._cache[page] = panelEl;
    }
  }
@@ -42,24 +42,6 @@ export const climateEntityFilters: EntityFilter[] = [
  },
 ];

-export const hasClimateEntities = (hass: HomeAssistant): boolean => {
-  const hasAreaSensor = Object.values(hass.areas).some(
-    (area) =>
-      (area.temperature_entity_id && hass.states[area.temperature_entity_id]) ||
-      (area.humidity_entity_id && hass.states[area.humidity_entity_id])
-  );
-
-  if (hasAreaSensor) {
-    return true;
-  }
-
-  const entityIds = Object.keys(hass.states);
-
-  return climateEntityFilters.some((filter) =>
-    entityIds.some(generateEntityFilter(hass, filter))
-  );
-};
-
 const processAreasForClimate = (
  areaIds: string[],
  hass: HomeAssistant,
@@ -3,10 +3,6 @@ import { customElement, property, query } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { dynamicElement } from "../../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import {
-  ACTION_ROW_CONFIG_KEYS,
-  pickRowConfig,
-} from "../../../../data/automation";
 import "../../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
 import { COLLAPSIBLE_ACTION_ELEMENTS } from "../../../../data/action";
@@ -111,8 +107,9 @@ export default class HaAutomationActionEditor extends LitElement {
  private _onUiChanged(ev: CustomEvent) {
    ev.stopPropagation();
    const value = {
+      ...(this.action.alias ? { alias: this.action.alias } : {}),
+      ...(this.action.note ? { note: this.action.note } : {}),
      ...ev.detail.value,
-      ...pickRowConfig(this.action, ACTION_ROW_CONFIG_KEYS),
    };
    fireEvent(this, "value-changed", { value });
  }
@@ -62,11 +62,9 @@ import type {
  AutomationClipboard,
  Condition,
 } from "../../../../data/automation";
-import type { ConditionDescriptions } from "../../../../data/condition";
 import { CONDITION_BUILDING_BLOCKS } from "../../../../data/condition";
 import { validateConfig } from "../../../../data/config";
 import {
-  conditionDescriptionsContext,
  fullEntitiesContext,
  manifestsContext,
 } from "../../../../data/context";
@@ -92,8 +90,6 @@ import { isMac } from "../../../../util/is_mac";
 import { showEditorToast } from "../editor-toast";
 import "../ha-automation-editor-warning";
 import { overflowStyles, rowStyles } from "../styles";
-import { getDeviceTarget } from "../target/get_device_target";
-import { getEntityTarget } from "../target/get_entity_target";
 import "../target/ha-automation-row-targets";
 import "./ha-automation-action-editor";
 import type HaAutomationActionEditor from "./ha-automation-action-editor";
@@ -209,10 +205,6 @@ export default class HaAutomationActionRow extends LitElement {
  @consume({ context: manifestsContext, subscribe: true })
  private _manifests?: DomainManifestLookup;

-  @state()
-  @consume({ context: conditionDescriptionsContext, subscribe: true })
-  private _conditionDescriptions?: ConditionDescriptions;
-
  @state() private _running = false;

  @state() private _runResult?: {
@@ -300,19 +292,13 @@ export default class HaAutomationActionRow extends LitElement {
      ? this._extractTargets(this.action as ServiceAction)
      : type === "device_id" && (this.action as DeviceAction).device_id
        ? { device_id: (this.action as DeviceAction).device_id }
-        : type === "condition"
-          ? this._extractConditionTarget(this.action as Condition)
-          : undefined;
+        : undefined;

    const serviceTargetSpec =
-      type === "condition"
-        ? this._conditionDescriptions?.[(this.action as Condition).condition]
+      type === "service" && action
+        ? this.hass.services?.[computeDomain(action)]?.[computeObjectId(action)]
            ?.target
-        : type === "service" && action
-          ? this.hass.services?.[computeDomain(action)]?.[
-              computeObjectId(action)
-            ]?.target
-          : undefined;
+        : undefined;

    const noteTooltipText = truncateWithEllipsis(
      this.action.note?.trim() || "",
@@ -791,28 +777,6 @@ export default class HaAutomationActionRow extends LitElement {
    return {};
  }

-  private _extractConditionTarget(
-    condition: Condition
-  ): HassServiceTarget | undefined {
-    if (typeof condition !== "object") {
-      return undefined;
-    }
-    if ("target" in condition && condition.target) {
-      return condition.target;
-    }
-    if (
-      (condition.condition === "state" ||
-        condition.condition === "numeric_state") &&
-      "entity_id" in condition
-    ) {
-      return getEntityTarget(condition.entity_id);
-    }
-    if (condition.condition === "device" && "device_id" in condition) {
-      return getDeviceTarget(condition.device_id as string);
-    }
-    return undefined;
-  }
-
  private _renderTargets = memoizeOne(
    (
      target?: HassServiceTarget,
@@ -14,8 +14,6 @@ import type {
 } from "../../../../../data/device/device_automation";
 import {
  deviceAutomationEditorMode,
-  fetchReplacementDevices,
-  fetchDeviceActions,
  deviceAutomationsEqual,
  fetchDeviceActionCapabilities,
  localizeExtraFieldsComputeHelperCallback,
@@ -42,8 +40,6 @@ export class HaDeviceAction extends LitElement {

  @state() private _compositeSplits?: DeviceCompositeSplits;

-  @state() private _replacementDeviceIds?: string[];
-
  private _loadingCompositeSplits = false;

  @state()
@@ -99,27 +95,13 @@ export class HaDeviceAction extends LitElement {
    return true;
  }

-  private async _resolveReplacements(compositeSplits: DeviceCompositeSplits) {
-    this._replacementDeviceIds = await fetchReplacementDevices(
-      this.hass,
-      this._entityReg,
-      this.action,
-      compositeSplits,
-      fetchDeviceActions
-    );
-  }
-
  private async _loadCompositeSplits() {
    if (this._loadingCompositeSplits) {
      return;
    }
    this._loadingCompositeSplits = true;
    try {
-      // Resolve the candidates before exposing the split map, so the picker
-      // never offers one that cannot host the automation.
-      const compositeSplits = await fetchDeviceCompositeSplits(this.hass);
-      await this._resolveReplacements(compositeSplits);
-      this._compositeSplits = compositeSplits;
+      this._compositeSplits = await fetchDeviceCompositeSplits(this.hass);
    } catch (_err) {
      this._compositeSplits = {};
    } finally {
@@ -133,7 +115,6 @@ export class HaDeviceAction extends LitElement {
    return html`
      <ha-device-picker
        .value=${deviceId}
-        .replacementDeviceIds=${this._replacementDeviceIds}
        .disabled=${this.disabled}
        @value-changed=${this._devicePicked}
        .hass=${this.hass}
@@ -175,19 +156,6 @@ export class HaDeviceAction extends LitElement {
    `;
  }

-  protected willUpdate(changedProps: PropertyValues<this>) {
-    // The picked device only lives here until the configuration catches up.
-    // Once it points somewhere else, undo and redo included, it is stale.
-    const previous = changedProps.get("action");
-    if (previous && previous.device_id !== this.action.device_id) {
-      this._deviceId = undefined;
-      this._replacementDeviceIds = undefined;
-      if (this._compositeSplits) {
-        this._resolveReplacements(this._compositeSplits);
-      }
-    }
-  }
-
  protected firstUpdated() {
    this.hass.loadBackendTranslation("device_automation");
    if (!this._capabilities) {
@@ -217,15 +185,6 @@ export class HaDeviceAction extends LitElement {

  private _devicePicked(ev) {
    ev.stopPropagation();
-    // The automation exists as is on the replacement, so only the reference
-    // changes and the rest of the configuration is left untouched.
-    if (this._replacementDeviceIds?.includes(ev.target.value)) {
-      this._deviceId = undefined;
-      fireEvent(this, "value-changed", {
-        value: { ...this.action, device_id: ev.target.value },
-      });
-      return;
-    }
    this._deviceId = ev.target.value;
    if (this._deviceId === undefined) {
      fireEvent(this, "value-changed", {
@@ -977,16 +977,26 @@ class DialogAddAutomationElement
            );
          } else {
            const stateObj = this.hass.states[targetId];
-            const [entityName, deviceName, areaName] = computeEntityNameList(
-              stateObj,
-              [{ type: "entity" }, { type: "device" }, { type: "area" }],
-              this.hass.entities,
-              this.hass.devices,
-              this.hass.areas,
-              this.hass.floors
-            );
+            const [entityName, deviceName, parentDeviceName, areaName] =
+              computeEntityNameList(
+                stateObj,
+                [
+                  { type: "entity" },
+                  { type: "device" },
+                  { type: "parent_device" },
+                  { type: "area" },
+                ],
+                this.hass.entities,
+                this.hass.devices,
+                this.hass.areas,
+                this.hass.floors
+              );

-            subtitle = [areaName, entityName ? deviceName : undefined]
+            subtitle = [
+              areaName,
+              parentDeviceName,
+              entityName ? deviceName : undefined,
+            ]
              .filter(Boolean)
              .join(
                computeRTL(
@@ -7,11 +7,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
 import type { Condition } from "../../../../data/automation";
-import {
-  CONDITION_ROW_CONFIG_KEYS,
-  expandConditionWithShorthand,
-  pickRowConfig,
-} from "../../../../data/automation";
+import { expandConditionWithShorthand } from "../../../../data/automation";
 import type { ConditionDescription } from "../../../../data/condition";
 import { COLLAPSIBLE_CONDITION_ELEMENTS } from "../../../../data/condition";
 import type { HomeAssistant } from "../../../../types";
@@ -129,8 +125,9 @@ export default class HaAutomationConditionEditor extends LitElement {
  private _onUiChanged(ev: CustomEvent) {
    ev.stopPropagation();
    const value = {
+      ...(this.condition.alias ? { alias: this.condition.alias } : {}),
+      ...(this.condition.note ? { note: this.condition.note } : {}),
      ...ev.detail.value,
-      ...pickRowConfig(this.condition, CONDITION_ROW_CONFIG_KEYS),
    };
    fireEvent(this, "value-changed", { value });
  }
@@ -226,7 +226,9 @@ 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 || targetRequired
@@ -14,8 +14,6 @@ import type {
 } from "../../../../../data/device/device_automation";
 import {
  deviceAutomationEditorMode,
-  fetchReplacementDevices,
-  fetchDeviceConditions,
  deviceAutomationsEqual,
  fetchDeviceConditionCapabilities,
  localizeExtraFieldsComputeHelperCallback,
@@ -42,8 +40,6 @@ export class HaDeviceCondition extends LitElement {

  @state() private _compositeSplits?: DeviceCompositeSplits;

-  @state() private _replacementDeviceIds?: string[];
-
  private _loadingCompositeSplits = false;

  @state()
@@ -100,27 +96,13 @@ export class HaDeviceCondition extends LitElement {
    return true;
  }

-  private async _resolveReplacements(compositeSplits: DeviceCompositeSplits) {
-    this._replacementDeviceIds = await fetchReplacementDevices(
-      this.hass,
-      this._entityReg,
-      this.condition,
-      compositeSplits,
-      fetchDeviceConditions
-    );
-  }
-
  private async _loadCompositeSplits() {
    if (this._loadingCompositeSplits) {
      return;
    }
    this._loadingCompositeSplits = true;
    try {
-      // Resolve the candidates before exposing the split map, so the picker
-      // never offers one that cannot host the automation.
-      const compositeSplits = await fetchDeviceCompositeSplits(this.hass);
-      await this._resolveReplacements(compositeSplits);
-      this._compositeSplits = compositeSplits;
+      this._compositeSplits = await fetchDeviceCompositeSplits(this.hass);
    } catch (_err) {
      this._compositeSplits = {};
    } finally {
@@ -134,7 +116,6 @@ export class HaDeviceCondition extends LitElement {
    return html`
      <ha-device-picker
        .value=${deviceId}
-        .replacementDeviceIds=${this._replacementDeviceIds}
        @value-changed=${this._devicePicked}
        .hass=${this.hass}
        .disabled=${this.disabled}
@@ -176,19 +157,6 @@ export class HaDeviceCondition extends LitElement {
    `;
  }

-  protected willUpdate(changedProps: PropertyValues<this>) {
-    // The picked device only lives here until the configuration catches up.
-    // Once it points somewhere else, undo and redo included, it is stale.
-    const previous = changedProps.get("condition");
-    if (previous && previous.device_id !== this.condition.device_id) {
-      this._deviceId = undefined;
-      this._replacementDeviceIds = undefined;
-      if (this._compositeSplits) {
-        this._resolveReplacements(this._compositeSplits);
-      }
-    }
-  }
-
  protected firstUpdated() {
    this.hass.loadBackendTranslation("device_automation");
    if (!this._capabilities) {
@@ -219,15 +187,6 @@ export class HaDeviceCondition extends LitElement {

  private _devicePicked(ev) {
    ev.stopPropagation();
-    // The automation exists as is on the replacement, so only the reference
-    // changes and the rest of the configuration is left untouched.
-    if (this._replacementDeviceIds?.includes(ev.target.value)) {
-      this._deviceId = undefined;
-      fireEvent(this, "value-changed", {
-        value: { ...this.condition, device_id: ev.target.value },
-      });
-      return;
-    }
    this._deviceId = ev.target.value;
    if (this._deviceId === undefined) {
      fireEvent(this, "value-changed", {
@@ -278,9 +278,6 @@ export const AutomationScriptEditorMixin = <TConfig extends BaseEditorConfig>(
      const domain = hooks.domain;
      try {
        const config = await hooks.fetchFileConfig(this.hass, id);
-        if (!this.isConnected) {
-          return;
-        }
        this.readOnly = false;
        const report: AutomationMigrationReport = { deprecated: false };
        this.config = hooks.normalizeConfig(config, report);
@@ -297,9 +294,6 @@ export const AutomationScriptEditorMixin = <TConfig extends BaseEditorConfig>(
        );
        hooks.checkValidation();
      } catch (err: any) {
-        if (!this.isConnected) {
-          return;
-        }
        if (err.status_code !== 404) {
          const alertText =
            err.body?.message || err.body || err.error || "Unknown error";
@@ -47,11 +47,9 @@ class HaConfigAutomation extends HassRouterPage {
      },
      edit: {
        tag: "ha-automation-editor",
-        itemId: true,
      },
      show: {
        tag: "ha-automation-editor",
-        itemId: true,
      },
      trace: {
        tag: "ha-automation-trace",
@@ -7,7 +7,6 @@ import {
  mdiFormatListBulleted,
  mdiMenuDown,
  mdiShape,
-  mdiSwapHorizontal,
 } from "@mdi/js";
 import type { HassServiceTarget } from "home-assistant-js-websocket";
 import {
@@ -69,9 +68,6 @@ export class HaAutomationRowTargets extends LitElement {
  @property({ type: Boolean })
  public interactive = false;

-  @property({ reflect: true })
-  public size: "s" | "m" = "m";
-
  @state()
  @consume({ context: internationalizationContext, subscribe: true })
  private _i18n!: ContextType<typeof internationalizationContext>;
@@ -322,25 +318,14 @@ export class HaAutomationRowTargets extends LitElement {

    let lastTargetType: string | null = null;

-    // The collapsed summary hides the individual targets, so carry over the
-    // warning when any of them no longer exists.
-    const hasMissingTarget = rows.some(
-      ([targetType, targetId]) => !this._checkTargetExists(targetType, targetId)
-    );
-
    return html`
      <ha-dropdown
        @wa-select=${this._handleTargetSelect}
        @click=${stopPropagation}
        @keydown=${stopPropagation}
      >
-        <button
-          slot="trigger"
-          class=${classMap({ target: true, warning: hasMissingTarget })}
-        >
-          <ha-svg-icon
-            .path=${hasMissingTarget ? mdiAlert : mdiFormatListBulleted}
-          ></ha-svg-icon>
+        <button slot="trigger" class="target">
+          <ha-svg-icon .path=${mdiFormatListBulleted}></ha-svg-icon>
          <div class="label">
            ${this._i18n.localize(
              "ui.panel.config.automation.editor.target_summary.targets",
@@ -479,15 +464,9 @@ export class HaAutomationRowTargets extends LitElement {
        warning = true;
        badgeTargetId = undefined;
        badgeTargetType = undefined;
-        if (
-          targetType === "device" &&
-          this._compositeSplits?.[targetId]?.split_ids.some(
-            (id) => id in this._registries.devices
-          )
-        ) {
+        if (targetType === "device" && this._compositeSplits?.[targetId]) {
          // The device was replaced by one or more split devices; make clear
          // this reference needs to be updated, distinct from "unknown device".
-          icon = mdiSwapHorizontal;
          label = this._i18n.localize(
            "ui.panel.config.automation.editor.target_summary.device_replaced"
          );
@@ -673,23 +652,6 @@ export class HaAutomationRowTargets extends LitElement {
      align-items: center;
    }

-    :host([size="s"]) {
-      min-height: 24px;
-    }
-    :host([size="s"]) .target {
-      height: 24px;
-    }
-    /* A default 24px icon would fill the whole small chip. */
-    :host([size="s"]) .target ha-icon,
-    :host([size="s"]) .target ha-svg-icon,
-    :host([size="s"]) .target ha-domain-icon,
-    :host([size="s"]) .target ha-floor-icon {
-      --mdc-icon-size: 16px;
-    }
-    :host([size="s"]) .target ha-floor-icon {
-      height: 24px;
-    }
-
    button.target {
      cursor: pointer;
    }
@@ -704,9 +666,6 @@ export class HaAutomationRowTargets extends LitElement {
      background-color: var(--ha-color-fill-warning-quiet-resting);
      color: var(--ha-color-on-warning-normal);
    }
-    ha-dropdown-item.warning ha-svg-icon {
-      color: var(--ha-color-on-warning-normal);
-    }
    ha-dropdown-item.warning:hover {
      background-color: var(--ha-color-fill-warning-quiet-hover);
      color: var(--ha-color-on-warning-normal);
@@ -8,11 +8,7 @@ import "../../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
 import "../../../../components/input/ha-input";
 import type { Trigger } from "../../../../data/automation";
-import {
-  TRIGGER_ROW_CONFIG_KEYS,
-  migrateAutomationTrigger,
-  pickRowConfig,
-} from "../../../../data/automation";
+import { migrateAutomationTrigger } from "../../../../data/automation";
 import type { TriggerDescription } from "../../../../data/trigger";
 import { isTriggerList } from "../../../../data/trigger";
 import { haStyle } from "../../../../resources/styles";
@@ -148,8 +144,9 @@ export default class HaAutomationTriggerEditor extends LitElement {
    if (isTriggerList(this.trigger)) return;
    ev.stopPropagation();
    const value = {
+      ...(this.trigger.alias ? { alias: this.trigger.alias } : {}),
+      ...(this.trigger.note ? { note: this.trigger.note } : {}),
      ...ev.detail.value,
-      ...pickRowConfig(this.trigger, TRIGGER_ROW_CONFIG_KEYS),
    };
    fireEvent(this, "value-changed", { value });
  }
@@ -251,7 +251,9 @@ export default class HaAutomationTriggerRow extends LitElement {
      }
      <h3 slot="header">
        ${capitalizeFirstLetter(
-          describeTrigger(this.trigger, this.hass, this._entityReg)
+          describeTrigger(this.trigger, this.hass, this._entityReg, {
+            hideEntities: true,
+          })
        )}
        ${
          target !== undefined || targetRequired
@@ -16,8 +16,6 @@ import type {
 } from "../../../../../data/device/device_automation";
 import {
  deviceAutomationEditorMode,
-  fetchReplacementDevices,
-  fetchDeviceTriggers,
  deviceAutomationsEqual,
  fetchDeviceTriggerCapabilities,
  localizeExtraFieldsComputeHelperCallback,
@@ -44,8 +42,6 @@ export class HaDeviceTrigger extends LitElement {

  @state() private _compositeSplits?: DeviceCompositeSplits;

-  @state() private _replacementDeviceIds?: string[];
-
  private _loadingCompositeSplits = false;

  @state()
@@ -104,27 +100,13 @@ export class HaDeviceTrigger extends LitElement {
    return true;
  }

-  private async _resolveReplacements(compositeSplits: DeviceCompositeSplits) {
-    this._replacementDeviceIds = await fetchReplacementDevices(
-      this.hass,
-      this._entityReg,
-      this.trigger,
-      compositeSplits,
-      fetchDeviceTriggers
-    );
-  }
-
  private async _loadCompositeSplits() {
    if (this._loadingCompositeSplits) {
      return;
    }
    this._loadingCompositeSplits = true;
    try {
-      // Resolve the candidates before exposing the split map, so the picker
-      // never offers one that cannot host the automation.
-      const compositeSplits = await fetchDeviceCompositeSplits(this.hass);
-      await this._resolveReplacements(compositeSplits);
-      this._compositeSplits = compositeSplits;
+      this._compositeSplits = await fetchDeviceCompositeSplits(this.hass);
    } catch (_err) {
      this._compositeSplits = {};
    } finally {
@@ -138,7 +120,6 @@ export class HaDeviceTrigger extends LitElement {
    return html`
      <ha-device-picker
        .value=${deviceId}
-        .replacementDeviceIds=${this._replacementDeviceIds}
        @value-changed=${this._devicePicked}
        .hass=${this.hass}
        .disabled=${this.disabled}
@@ -180,19 +161,6 @@ export class HaDeviceTrigger extends LitElement {
    `;
  }

-  protected willUpdate(changedProps: PropertyValues<this>) {
-    // The picked device only lives here until the configuration catches up.
-    // Once it points somewhere else, undo and redo included, it is stale.
-    const previous = changedProps.get("trigger");
-    if (previous && previous.device_id !== this.trigger.device_id) {
-      this._deviceId = undefined;
-      this._replacementDeviceIds = undefined;
-      if (this._compositeSplits) {
-        this._resolveReplacements(this._compositeSplits);
-      }
-    }
-  }
-
  protected firstUpdated() {
    this.hass.loadBackendTranslation("device_automation");
    if (!this._capabilities) {
@@ -240,15 +208,6 @@ export class HaDeviceTrigger extends LitElement {

  private _devicePicked(ev) {
    ev.stopPropagation();
-    // The automation exists as is on the replacement, so only the reference
-    // changes and the rest of the configuration is left untouched.
-    if (this._replacementDeviceIds?.includes(ev.target.value)) {
-      this._deviceId = undefined;
-      fireEvent(this, "value-changed", {
-        value: { ...this.trigger, device_id: ev.target.value },
-      });
-      return;
-    }
    this._deviceId = ev.target.value;
    if (this._deviceId === undefined) {
      fireEvent(this, "value-changed", {
@@ -266,6 +225,9 @@ export class HaDeviceTrigger extends LitElement {
    ) {
      trigger = this._origTrigger;
    }
+    if (this.trigger.id) {
+      trigger.id = this.trigger.id;
+    }
    fireEvent(this, "value-changed", { value: trigger });
  }

@@ -9,7 +9,6 @@ import "../../../../../components/ha-checkbox";
 import "../../../../../components/ha-selector/ha-selector";
 import "../../../../../components/ha-settings-row";
 import type { PlatformTrigger } from "../../../../../data/automation";
-import { TRIGGER_ROW_CONFIG_KEYS } from "../../../../../data/automation";
 import type { IntegrationManifest } from "../../../../../data/integration";
 import { fetchIntegrationManifest } from "../../../../../data/integration";
 import type { TargetSelector } from "../../../../../data/selector";
@@ -28,11 +27,15 @@ const showOptionalToggle = (field: TriggerDescription["fields"][string]) =>
  !("boolean" in field.selector && field.default);

 const DEFAULT_KEYS: (keyof PlatformTrigger)[] = [
-  ...TRIGGER_ROW_CONFIG_KEYS,
  "trigger",
  "target",
+  "alias",
+  "note",
+  "id",
+  "variables",
+  "enabled",
  "options",
-];
+] as const;

@customElement("ha-automation-trigger-platform")
 export class HaPlatformTrigger extends LitElement {
@@ -21,10 +21,14 @@ import {
  completeCloudOnboarding,
  fetchCloudSubscriptionInfo,
  ONBOARDING_ITEMS,
+  removeCloudData,
 } from "../../../../data/cloud";
 import type { Webhook } from "../../../../data/webhook";
 import { fetchWebhooks } from "../../../../data/webhook";
-import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../../dialogs/generic/show-dialog-box";
 import "../../../../layouts/hass-subpage";
 import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../../resources/styles";
@@ -37,7 +41,6 @@ import {
 } from "./cloud-account-status";
 import { showCloudOnboardingDialog } from "./show-dialog-cloud-onboarding";
 import { showSupportPackageDialog } from "./show-dialog-cloud-support-package";
-import { confirmDeleteCloudData } from "../delete-cloud-data";

@customElement("cloud-account")
 export class CloudAccount extends SubscribeMixin(LitElement) {
@@ -294,7 +297,33 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
  }

  private async _deleteCloudData() {
-    await confirmDeleteCloudData(this, this.hass, { signOutFirst: true });
+    const confirm = await showConfirmationDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.cloud.account.reset_data_confirm_title"
+      ),
+      text: this.hass.localize(
+        "ui.panel.config.cloud.account.reset_data_confirm_text"
+      ),
+      confirmText: this.hass.localize("ui.panel.config.cloud.account.reset"),
+      destructive: true,
+    });
+    if (!confirm) {
+      return;
+    }
+    try {
+      await cloudLogout(this.hass);
+      await removeCloudData(this.hass);
+    } catch (err: any) {
+      showAlertDialog(this, {
+        title: this.hass.localize(
+          "ui.panel.config.cloud.account.reset_data_failed"
+        ),
+        text: err?.message,
+      });
+      return;
+    } finally {
+      fireEvent(this, "ha-refresh-cloud-status");
+    }
  }

  private async _downloadSupportPackage() {
@@ -1,63 +0,0 @@
-import { mdiDeleteForever, mdiDotsVertical, mdiDownload } from "@mdi/js";
-import type { TemplateResult } from "lit";
-import { html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import "../../../components/ha-dropdown";
-import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
-import "../../../components/ha-dropdown-item";
-import "../../../components/ha-icon-button";
-import "../../../components/ha-svg-icon";
-import type { HomeAssistant } from "../../../types";
-import { showSupportPackageDialog } from "./account/show-dialog-cloud-support-package";
-import { confirmDeleteCloudData } from "./delete-cloud-data";
-
-// Recovery actions for the signed-out cloud pages, which all need to reach them
-// — including while a registration is waiting on its email confirmation.
-@customElement("cloud-signed-out-menu")
-export class CloudSignedOutMenu extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  protected render(): TemplateResult {
-    return html`
-      <ha-dropdown @wa-select=${this._handleMenuAction}>
-        <ha-icon-button
-          slot="trigger"
-          .label=${this.hass.localize("ui.common.menu")}
-          .path=${mdiDotsVertical}
-        ></ha-icon-button>
-
-        <ha-dropdown-item value="reset">
-          ${this.hass.localize("ui.panel.config.cloud.account.reset_cloud_data")}
-          <ha-svg-icon slot="icon" .path=${mdiDeleteForever}></ha-svg-icon>
-        </ha-dropdown-item>
-        <ha-dropdown-item value="download">
-          ${this.hass.localize(
-            "ui.panel.config.cloud.account.download_support_package"
-          )}
-          <ha-svg-icon slot="icon" .path=${mdiDownload}></ha-svg-icon>
-        </ha-dropdown-item>
-      </ha-dropdown>
-    `;
-  }
-
-  private _handleMenuAction(ev: HaDropdownSelectEvent) {
-    switch (ev.detail.item.value) {
-      case "reset":
-        this._deleteCloudData();
-        break;
-      case "download":
-        showSupportPackageDialog(this);
-        break;
-    }
-  }
-
-  private async _deleteCloudData() {
-    await confirmDeleteCloudData(this, this.hass);
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "cloud-signed-out-menu": CloudSignedOutMenu;
-  }
-}
@@ -1,24 +0,0 @@
-import { css } from "lit";
-
-export const cloudSignedOutStyle = css`
-  .content {
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    padding-bottom: calc(var(--safe-area-inset-bottom) + var(--ha-space-6));
-  }
-  ha-card {
-    width: 100%;
-    margin-bottom: 0;
-  }
-  h2 {
-    margin: 0;
-    font-size: var(--ha-font-size-2xl);
-    font-weight: var(--ha-font-weight-normal);
-    line-height: var(--ha-line-height-condensed);
-    white-space: normal;
-    overflow: visible;
-    text-overflow: clip;
-    text-wrap: balance;
-  }
-`;
@@ -1,48 +0,0 @@
-import { fireEvent } from "../../../common/dom/fire_event";
-import { cloudLogout, removeCloudData } from "../../../data/cloud";
-import {
-  showAlertDialog,
-  showConfirmationDialog,
-} from "../../../dialogs/generic/show-dialog-box";
-import type { HomeAssistant } from "../../../types";
-
-// Confirms, then wipes every trace of the cloud account from this instance.
-// `signOutFirst` is for callers reached while signed in: the session has to go
-// before the data can.
-export const confirmDeleteCloudData = async (
-  element: HTMLElement,
-  hass: HomeAssistant,
-  { signOutFirst = false }: { signOutFirst?: boolean } = {}
-): Promise<boolean> => {
-  const confirm = await showConfirmationDialog(element, {
-    title: hass.localize(
-      "ui.panel.config.cloud.account.reset_data_confirm_title"
-    ),
-    text: hass.localize(
-      "ui.panel.config.cloud.account.reset_data_confirm_text"
-    ),
-    confirmText: hass.localize("ui.panel.config.cloud.account.reset"),
-    destructive: true,
-  });
-
-  if (!confirm) {
-    return false;
-  }
-
-  try {
-    if (signOutFirst) {
-      await cloudLogout(hass);
-    }
-    await removeCloudData(hass);
-  } catch (err: any) {
-    showAlertDialog(element, {
-      title: hass.localize("ui.panel.config.cloud.account.reset_data_failed"),
-      text: err?.message,
-    });
-    return false;
-  } finally {
-    fireEvent(element, "ha-refresh-cloud-status");
-  }
-
-  return true;
-};
@@ -169,8 +169,4 @@ declare global {
  interface HTMLElementTagNameMap {
    "cloud-forgot-password-card": CloudForgotPasswordCard;
  }
-
-  interface HASSDomEvents {
-    "cloud-done": { flashMessage: string };
-  }
 }
@@ -21,7 +21,7 @@ export class CloudForgotPassword extends LitElement {
      <hass-subpage
        .hass=${this.hass}
        .narrow=${this.narrow}
-        back-path="/config/cloud/login"
+        back-path="/config"
        .header=${this.hass.localize(
          "ui.panel.config.cloud.forgot_password.title"
        )}
@@ -1,14 +1,12 @@
 import type { PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { fireEvent } from "../../../common/dom/fire_event";
 import { navigate } from "../../../common/navigate";
 import type { CloudStatus } from "../../../data/cloud";
-import { cancelCloudAutoLogin } from "../../../data/cloud";
 import type { RouterOptions } from "../../../layouts/hass-router-page";
 import { HassRouterPage } from "../../../layouts/hass-router-page";
 import type { ValueChangedEvent, HomeAssistant, Route } from "../../../types";
 import "./account/cloud-account";
-import "./start/cloud-start";
+import "./login/cloud-login-panel";

 const LOGGED_IN_URLS = [
  "account",
@@ -20,12 +18,7 @@ const LOGGED_IN_URLS = [
  "webhooks",
 ] as const;

-const NOT_LOGGED_IN_URLS = [
-  "start",
-  "login",
-  "register",
-  "forgot-password",
-] as const;
+const NOT_LOGGED_IN_URLS = ["login", "register", "forgot-password"] as const;

 type CloudPage =
  (typeof LOGGED_IN_URLS)[number] | (typeof NOT_LOGGED_IN_URLS)[number];
@@ -43,7 +36,7 @@ class HaConfigCloud extends HassRouterPage {
  @property({ attribute: false }) public cloudStatus!: CloudStatus;

  protected routerOptions: RouterOptions = {
-    defaultPage: "start",
+    defaultPage: "login",
    showLoading: true,
    initialLoad: () => this._cloudStatusLoaded,
    // Guard the different pages based on if we're logged in.
@@ -52,30 +45,14 @@ class HaConfigCloud extends HassRouterPage {
        if (!LOGGED_IN_URLS.some((url) => url === page)) {
          return "account";
        }
-        return undefined;
+      } else if (!NOT_LOGGED_IN_URLS.some((url) => url === page)) {
+        return "login";
      }
-
-      if (!NOT_LOGGED_IN_URLS.some((url) => url === page)) {
-        return "start";
-      }
-
-      if (
-        page !== "register" &&
-        this.cloudStatus.auto_login &&
-        !this._autoLoginCancelled
-      ) {
-        return "register";
-      }
-
      return undefined;
    },
    routes: {
-      start: {
-        tag: "cloud-start",
-      },
      login: {
        tag: "cloud-login-panel",
-        load: () => import("./login/cloud-login-panel"),
      },
      register: {
        tag: "cloud-register",
@@ -119,10 +96,6 @@ class HaConfigCloud extends HassRouterPage {

  @state() private _loginEmail = "";

-  private _autoLoginCancelled = false;
-
-  private _lastPage = "";
-
  private _resolveCloudStatusLoaded!: () => void;

  private _cloudStatusLoaded = new Promise<void>((resolve) => {
@@ -149,14 +122,6 @@ class HaConfigCloud extends HassRouterPage {
        navigate(this.route.prefix, { replace: true });
      }
    }
-
-    // A flash belongs to the page it was routed to. Cleared here rather than in
-    // beforeRender, which runs inside update() where assigning state schedules a
-    // second cycle.
-    if (this._lastPage === "login" && this._currentPage !== "login") {
-      this._flashMessage = "";
-    }
-    this._lastPage = this._currentPage;
  }

  protected createElement(tag: string) {
@@ -167,27 +132,9 @@ class HaConfigCloud extends HassRouterPage {
    el.addEventListener("flash-message-changed", (ev) => {
      this._flashMessage = (ev as ValueChangedEvent<string>).detail.value;
    });
-    el.addEventListener("cloud-cancel-auto-login", () => {
-      this._autoLoginCancelled = true;
-      this._cancelAutoLogin();
-    });
-    el.addEventListener("cloud-auto-login-started", () => {
-      this._autoLoginCancelled = false;
-    });
    return el;
  }

-  private async _cancelAutoLogin() {
-    try {
-      await cancelCloudAutoLogin(this.hass);
-    } catch (_err) {
-      // Both callers are fire-and-forget navigations with nowhere to report
-      // this; the refresh below still reconciles whatever the backend kept.
-    } finally {
-      fireEvent(this, "ha-refresh-cloud-status");
-    }
-  }
-
  protected updatePageEl(el) {
    // We are not going to update if the current page if we are not logged in
    // and the current page requires being logged in. Happens when we log out.
@@ -1,14 +1,28 @@
+import { mdiDeleteForever, mdiDotsVertical, mdiDownload } from "@mdi/js";
 import type { TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { navigate } from "../../../../common/navigate";
 import "../../../../components/ha-alert";
+import "../../../../components/ha-card";
+import "../../../../components/ha-dropdown";
+import type { HaDropdownSelectEvent } from "../../../../components/ha-dropdown";
+import "../../../../components/ha-dropdown-item";
+import "../../../../components/ha-icon-next";
+import "../../../../components/ha-list";
+import "../../../../components/ha-list-item";
+import "../../../../components/ha-svg-icon";
+import { removeCloudData } from "../../../../data/cloud";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../../dialogs/generic/show-dialog-box";
 import "../../../../layouts/hass-subpage";
 import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
-import { cloudSignedOutStyle } from "../cloud-signed-out-style";
-import { cloudSubpageStyle } from "../account/cloud-subpage-style";
+import "../../ha-config-section";
+import { showSupportPackageDialog } from "../account/show-dialog-cloud-support-package";
 import "./cloud-login";
 import type { CloudLogin } from "./cloud-login";

@@ -16,88 +30,212 @@ import type { CloudLogin } from "./cloud-login";
 export class CloudLoginPanel extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
+
  @property({ type: Boolean }) public narrow = false;

  @property() public email?: string;

  @property({ attribute: false }) public flashMessage?: string;

-  @query("cloud-login") private _cloudLoginElement?: CloudLogin;
-
-  protected firstUpdated(): void {
-    this._focusEmail();
-  }
+  @query("cloud-login") private _cloudLoginElement!: CloudLogin;

  protected render(): TemplateResult {
    return html`
      <hass-subpage
        .hass=${this.hass}
        .narrow=${this.narrow}
-        back-path="/config/cloud/start"
-        .header=${this.hass.localize("ui.panel.config.cloud.login.sign_in")}
+        back-path="/config"
+        header="Home Assistant Cloud"
      >
-        <div class="content">
-          ${
-            this.flashMessage
-              ? html`<ha-alert
-                  dismissable
-                  @alert-dismissed-clicked=${this._dismissFlash}
-                >
-                  ${this.flashMessage}
-                </ha-alert>`
-              : nothing
-          }
-          <cloud-login
-            .hass=${this.hass}
-            .email=${this.email}
-            .localize=${this.hass.localize}
-            .lead=${this.hass.localize(
-              "ui.panel.config.cloud.login.sign_in_lead"
+        <ha-dropdown slot="toolbar-icon" @wa-select=${this._handleMenuAction}>
+          <ha-icon-button
+            slot="trigger"
+            .label=${this.hass.localize("ui.common.menu")}
+            .path=${mdiDotsVertical}
+          ></ha-icon-button>
+
+          <ha-dropdown-item value="reset">
+            ${this.hass.localize(
+              "ui.panel.config.cloud.account.reset_cloud_data"
            )}
-            check-connection
-            @cloud-forgot-password=${this._handleForgotPassword}
-          ></cloud-login>
+            <ha-svg-icon slot="icon" .path=${mdiDeleteForever}></ha-svg-icon>
+          </ha-dropdown-item>
+          <ha-dropdown-item value="download">
+            ${this.hass.localize(
+              "ui.panel.config.cloud.account.download_support_package"
+            )}
+            <ha-svg-icon slot="icon" .path=${mdiDownload}></ha-svg-icon>
+          </ha-dropdown-item>
+        </ha-dropdown>
+        <div class="content">
+          <ha-config-section .isWide=${this.isWide}>
+            <span slot="header">Home Assistant Cloud</span>
+            <div slot="introduction">
+              <p>
+                ${this.hass.localize(
+                  "ui.panel.config.cloud.login.introduction"
+                )}
+              </p>
+              <p>
+                ${this.hass.localize(
+                  "ui.panel.config.cloud.login.introduction2"
+                )}
+                <a
+                  href="https://www.nabucasa.com"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Nabu&nbsp;Casa,&nbsp;Inc</a
+                >${this.hass.localize(
+                  "ui.panel.config.cloud.login.introduction2a"
+                )}
+              </p>
+              <p>
+                ${this.hass.localize(
+                  "ui.panel.config.cloud.login.introduction3"
+                )}
+              </p>
+              <p>
+                <a
+                  href="https://www.nabucasa.com"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  ${this.hass.localize(
+                    "ui.panel.config.cloud.login.learn_more_link"
+                  )}
+                </a>
+              </p>
+            </div>
+
+            ${
+              this.flashMessage
+                ? html`<ha-alert
+                    dismissable
+                    @alert-dismissed-clicked=${this._dismissFlash}
+                  >
+                    ${this.flashMessage}
+                  </ha-alert>`
+                : ""
+            }
+
+            <cloud-login
+              .hass=${this.hass}
+              .email=${this.email}
+              .localize=${this.hass.localize}
+              @cloud-forgot-password=${this._handleForgotPassword}
+              check-connection
+            ></cloud-login>
+
+            <ha-card outlined>
+              <ha-list>
+                <ha-list-item @click=${this._handleRegister} twoline hasMeta>
+                  ${this.hass.localize(
+                    "ui.panel.config.cloud.login.start_trial"
+                  )}
+                  <span slot="secondary">
+                    ${this.hass.localize(
+                      "ui.panel.config.cloud.login.trial_info"
+                    )}
+                  </span>
+                  <ha-icon-next slot="meta"></ha-icon-next>
+                </ha-list-item>
+              </ha-list>
+            </ha-card>
+          </ha-config-section>
        </div>
      </hass-subpage>
    `;
  }

-  private async _focusEmail() {
-    const cloudLogin = this._cloudLoginElement;
-    if (!cloudLogin) {
-      return;
-    }
-    await cloudLogin.updateComplete;
-    cloudLogin.emailField?.focus();
-  }
-
  private _handleForgotPassword() {
    this._dismissFlash();
    fireEvent(this, "cloud-email-changed", {
-      value: this._cloudLoginElement?.emailField?.value ?? this.email ?? "",
+      value: this._cloudLoginElement.emailField.value ?? "",
    });
    navigate("/config/cloud/forgot-password");
  }

+  private _handleRegister() {
+    this._dismissFlash();
+
+    fireEvent(this, "cloud-email-changed", {
+      value: this._cloudLoginElement.emailField.value ?? "",
+    });
+    navigate("/config/cloud/register");
+  }
+
  private _dismissFlash() {
    fireEvent(this, "flash-message-changed", { value: "" });
  }

+  private _handleMenuAction(ev: HaDropdownSelectEvent) {
+    const value = ev.detail.item.value;
+    switch (value) {
+      case "reset":
+        this._deleteCloudData();
+        break;
+      case "download":
+        this._downloadSupportPackage();
+        break;
+    }
+  }
+
+  private async _deleteCloudData() {
+    const confirm = await showConfirmationDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.cloud.account.reset_data_confirm_title"
+      ),
+      text: this.hass.localize(
+        "ui.panel.config.cloud.account.reset_data_confirm_text"
+      ),
+      confirmText: this.hass.localize("ui.panel.config.cloud.account.reset"),
+      destructive: true,
+    });
+    if (!confirm) {
+      return;
+    }
+    try {
+      await removeCloudData(this.hass);
+    } catch (err: any) {
+      showAlertDialog(this, {
+        title: this.hass.localize(
+          "ui.panel.config.cloud.account.reset_data_failed"
+        ),
+        text: err?.message,
+      });
+      return;
+    } finally {
+      fireEvent(this, "ha-refresh-cloud-status");
+    }
+  }
+
+  private async _downloadSupportPackage() {
+    showSupportPackageDialog(this);
+  }
+
  static get styles() {
    return [
      haStyle,
-      cloudSubpageStyle,
-      cloudSignedOutStyle,
      css`
        .content {
-          gap: var(--ha-space-4);
+          padding-bottom: 24px;
        }
-        ha-alert,
-        cloud-login {
-          display: block;
-          width: 100%;
-          max-width: 600px;
-          margin-inline: auto;
+        [slot="introduction"] {
+          margin: -1em 0;
+        }
+        [slot="introduction"] a {
+          color: var(--primary-color);
+        }
+        ha-card {
+          overflow: hidden;
+        }
+        ha-card .card-header {
+          margin-bottom: -8px;
+        }
+        h1 {
+          margin: 0;
        }
      `,
    ];
@@ -9,12 +9,14 @@ import "../../../../components/ha-button";
 import "../../../../components/ha-card";
 import "../../../../components/input/ha-input";
 import type { HaInput } from "../../../../components/input/ha-input";
+import { setAssistPipelinePreferred } from "../../../../data/assist_pipeline";
 import { cloudLogin } from "../../../../data/cloud";
 import { loginHaCloud } from "../../../../data/onboarding";
 import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import {
  showAlertDialog,
+  showConfirmationDialog,
  showPromptDialog,
 } from "../../../lovelace/custom-card-helpers";
 import { showCloudAlreadyConnectedDialog } from "../dialog-cloud-already-connected/show-dialog-cloud-already-connected";
@@ -35,8 +37,6 @@ export class CloudLogin extends LitElement {

  @property({ type: Boolean, attribute: "card-less" }) public cardLess = false;

-  @property() public lead?: string;
-
  @query("#email", true) public emailField!: HaInput;

  @query("#password", true) private _passwordField!: HaInput;
@@ -50,13 +50,21 @@ export class CloudLogin extends LitElement {
      return this._renderLoginForm();
    }

-    return html`<ha-card outlined>${this._renderLoginForm()}</ha-card>`;
+    return html`
+      <ha-card
+        outlined
+        .header=${this.localize(
+          `ui.panel.${this.translationKeyPanel}.login.sign_in`
+        )}
+      >
+        ${this._renderLoginForm()}
+      </ha-card>
+    `;
  }

  private _renderLoginForm() {
    return html`
      <div class="card-content login-form">
-        ${this.lead ? html`<p class="lead">${this.lead}</p>` : nothing}
        ${
          this._error
            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
@@ -211,12 +219,28 @@ export class CloudLogin extends LitElement {

    try {
      if (this.hass) {
-        await cloudLogin({
+        const result = await cloudLogin({
          hass: this.hass,
          email,
          ...(code ? { code } : { password }),
          check_connection: checkConnection,
        });
+        if (result.cloud_pipeline) {
+          if (
+            await showConfirmationDialog(this, {
+              title: this.hass.localize(
+                "ui.panel.config.cloud.login.cloud_pipeline_title"
+              ),
+              text: this.hass.localize(
+                "ui.panel.config.cloud.login.cloud_pipeline_text"
+              ),
+              confirmText: this.hass.localize("ui.common.yes"),
+              dismissText: this.hass.localize("ui.common.no"),
+            })
+          ) {
+            setAssistPipelinePreferred(this.hass, result.cloud_pipeline);
+          }
+        }
      } else {
        // for onboarding
        await loginHaCloud({
@@ -293,6 +317,9 @@ export class CloudLogin extends LitElement {
        ha-card {
          overflow: hidden;
        }
+        ha-card .card-header {
+          margin-bottom: -8px;
+        }
        .card-actions {
          display: flex;
          justify-content: space-between;
@@ -302,11 +329,6 @@ export class CloudLogin extends LitElement {
          display: flex;
          flex-direction: column;
        }
-        .lead {
-          margin: 0 0 var(--ha-space-2);
-          color: var(--secondary-text-color);
-          line-height: var(--ha-line-height-normal);
-        }
      `,
    ];
  }
--- a/Show More
+++ b/Show More