Revamp user settings page & navigation (#52070 )

* refactor(profile): split general section into subpages with dashboard navigation Replace the two-tab profile layout (general/security) with a dashboard-first navigation structure. The general section is split into three focused subpages (preferences, localization, browser), each wrapping the original row components unchanged. A new dashboard page provides a user card (name, owner badge, logout) and a navigation list linking to all four subpages. Add ha-navigation-list as a reusable component for page navigation lists. Co-Authored-By: Claude Sonnet 4.6 <[email protected]> * refactor: remove orphan translation keys after general section split Drop tabs.general and current_user, which were only used in the now-deleted ha-profile-section-general.ts and the old profileSections tab config. Co-Authored-By: Claude Sonnet 4.6 <[email protected]> * refactor(profile): align dashboard layout with Bluetooth panel pattern Replace .content with .container (padding on wrapper, max-width/margin on cards) to match the layout convention used in protocol panels like Bluetooth. Always show the chevron in ha-navigation-list, removing the narrow condition. Drop the unused narrow prop from ha-navigation-list. Co-Authored-By: Claude Sonnet 4.6 <[email protected]> * refactor: move ha-config-navigation-list to src/components Makes the component available outside the config panel. Update import paths in the two existing config consumers and use it in the profile dashboard. Remove the now-unused ha-navigation-list (which relied on ha-md-list/ha-md-list-item). Co-Authored-By: Claude Sonnet 4.6 <[email protected]> * fix: security subpage width and card spacing Use .container > * instead of ha-card to apply max-width and margin, since the security cards are custom elements whose inner ha-card lives in their own shadow DOM and is unreachable from the parent stylesheet. Co-Authored-By: Claude Sonnet 4.6 <[email protected]> * refactor(profile): move language setting to localization subpage Language is a regional/cultural preference, consistent with the other settings in localization (time zone, date and time formats). Co-Authored-By: Claude Sonnet 4.6 <[email protected]> * refactor(profile): rename profile subpage labels - "User preferences" -> "Appearance" - "Browser settings" -> "This browser" - "Mobile app settings" -> "This mobile app" * feat(profile): surface theme picker on dashboard page Move ha-pick-theme-row from the Appearance subpage to the profile dashboard, between the user card and the navigation list. Theme and dark mode are now accessible directly without navigating to a subpage. Update Appearance description to reflect its new scope. Co-Authored-By: Claude Sonnet 4.6 <[email protected]> * refactor(profile): restructure theme row layout and labels Split dark mode and color pickers into separate ha-settings-row elements with headings. Move reset button outside the color-row to keep the label vertically stable when the button appears. Add padding to reset row. Rename "Reset" to "Reset colors" for clarity. Co-Authored-By: Claude Sonnet 4.6 <[email protected]> * add title to theme settings card * refactor(profile): apply theme row layout improvements to ha-theme-settings Migrate the dark mode and color pickers layout from ha-pick-theme-row into ha-theme-settings: use separate ha-settings-row elements with headings for dark mode and custom colors, move reset button outside as a sibling element. Add colors label to ThemeSettingsLabels interface. Co-Authored-By: Claude Sonnet 4.6 <[email protected]> * refactor(profile): migrate theme settings to ha-list-item-base layout Replace ha-settings-row elements in ha-theme-settings with ha-list-item-base inside ha-list-base for a more compact appearance. Split color pickers into individual rows (one per color). Reduce vertical padding to --ha-space-2. Co-Authored-By: Claude Sonnet 4.6 <[email protected]> * refactor(profile): combine color pickers into single row with label Merge primary and accent color pickers into one ha-list-item-base row under a "Custom colors" headline. Restore labels on individual pickers and increase their min-width to 150px. Co-Authored-By: Claude Sonnet 4.6 <[email protected]> * fix(profile): stack theme settings rows vertically in narrow mode Reflect narrow prop on host and use ::part(base/end) to stack all ha-list-item-base rows in column layout on narrow screens, preventing headline truncation from oversized end slot controls. Co-Authored-By: Claude Sonnet 4.6 <[email protected]> * Fix test:e2e:demo * fix broken links * Add my links * Use s instead of smal for ha-button size Co-authored-by: Maarten Lakerveld <[email protected]> --------- Co-authored-by: Claude Sonnet 4.6 <[email protected]> Co-authored-by: Maarten Lakerveld <[email protected]>
Update dependency @lokalise/node-api to v16.4.0 (#53865 )
2026-08-29 02:16:15 +00:00 · 2026-08-28 21:57:59 +02:00 · 2026-08-28 21:57:46 +02:00 · 2026-08-28 21:57:43 +02:00 · 2026-08-28 17:21:14 +02:00 · 2026-08-28 16:50:01 +02:00
169 changed files with 9194 additions and 2846 deletions
@@ -74,3 +74,6 @@ test/e2e/app/dist/
 .serena

 test/benchmarks/results/
+
+# Downloaded map glyph and sprite archives
+.map-assets/
@@ -4,6 +4,7 @@ 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);
@@ -89,7 +90,7 @@ function copyQrScannerWorker(staticDir) {
  copyFileDir(npmPath("qr-scanner/qr-scanner-worker.min.js"), staticPath("js"));
 }

-function copyMapPanel(staticDir) {
+async function copyMapPanel(staticDir) {
  const staticPath = genStaticPath(staticDir);
  copyFileDir(
    npmPath("leaflet/dist/leaflet.css"),
@@ -103,6 +104,14 @@ 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/"));
+  copyFileDir(
+    npmPath("@mapbox/mapbox-gl-rtl-text/dist/mapbox-gl-rtl-text.js"),
+    staticPath("map/")
+  );
 }

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

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

  // Qr Scanner assets
  copyZXingWasm(staticDir);
@@ -155,7 +164,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);
-  copyMapPanel(paths.demo_output_static);
+  await copyMapPanel(paths.demo_output_static);
  copyFonts(paths.demo_output_static);
  copyTranslations(paths.demo_output_static);
  copyLocaleData(paths.demo_output_static);
@@ -168,7 +177,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);
-  copyMapPanel(paths.cast_output_static);
+  await copyMapPanel(paths.cast_output_static);
  copyFonts(paths.cast_output_static);
  copyTranslations(paths.cast_output_static);
  copyLocaleData(paths.cast_output_static);
@@ -184,7 +193,7 @@ gulp.task("copy-static-gallery", async () => {
    paths.gallery_output_root
  );

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

  copyPolyfills(paths.e2eTestApp_output_static);
-  copyMapPanel(paths.e2eTestApp_output_static);
+  await copyMapPanel(paths.e2eTestApp_output_static);
  copyFonts(paths.e2eTestApp_output_static);
  copyTranslations(paths.e2eTestApp_output_static);
  copyLocaleData(paths.e2eTestApp_output_static);
@@ -14,6 +14,7 @@ import "./gen-icons-json.js";
 import "./gen-sensor-entity-constants.js";
 import "./landing-page.js";
 import "./locale-data.js";
+import "./map-assets.js";
 import "./rspack.js";
 import "./service-worker.js";
 import "./translations.js";
@@ -0,0 +1,218 @@
+// 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";
+import { addLatinLabels } from "./map-labels.js";
+
+// 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 = addLatinLabels(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;
@@ -0,0 +1,42 @@
+// Adds the English name to labels whose local name is not in Latin script.
+// Shortbread tiles carry `name`, `name_en` and `name_de` only.
+
+const NAME = ["get", "name"];
+const NAME_EN = ["get", "name_en"];
+
+// Strings compare by code point: anything from Basic Latin up to Latin
+// Extended-B, digits and punctuation included.
+const IS_LATIN = ["<", NAME, "ɐ"];
+
+const ENGLISH_SCALE = 0.8;
+
+// Streets are line-placed and cannot break lines.
+const withEnglish = (placement) =>
+  placement === "line"
+    ? ["concat", NAME, " (", NAME_EN, ")"]
+    : ["format", NAME, {}, "\n", {}, NAME_EN, { "font-scale": ENGLISH_SCALE }];
+
+const isNameLabel = (layer) =>
+  JSON.stringify(layer.layout?.["text-field"]) === JSON.stringify(NAME);
+
+export const addLatinLabels = (style) => ({
+  ...style,
+  layers: style.layers.map((layer) =>
+    isNameLabel(layer)
+      ? {
+          ...layer,
+          layout: {
+            ...layer.layout,
+            "text-field": [
+              "case",
+              IS_LATIN,
+              NAME,
+              ["!", ["has", "name_en"]],
+              NAME,
+              withEnglish(layer.layout["symbol-placement"]),
+            ],
+          },
+        }
+      : layer
+  ),
+});
@@ -19,6 +19,7 @@ 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,6 +424,23 @@ 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,6 +39,7 @@ 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,6 +75,8 @@
    "@lit/context": "1.1.6",
    "@lit/reactive-element": "2.1.2",
    "@lit/task": "1.0.3",
+    "@mapbox/mapbox-gl-rtl-text": "0.4.0",
+    "@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",
@@ -94,7 +96,7 @@
    "color-name": "2.1.1",
    "comlink": "4.4.2",
    "core-js": "3.50.0",
-    "cropperjs": "1.6.2",
+    "cropperjs": "1.6.3",
    "culori": "4.0.2",
    "date-fns": "4.4.0",
    "deep-clone-simple": "1.1.1",
@@ -108,14 +110,15 @@
    "home-assistant-js-websocket": "9.6.0",
    "idb-keyval": "6.3.0",
    "intl-messageformat": "11.2.14",
-    "js-yaml": "5.3.0",
+    "js-yaml": "5.4.0",
    "leaflet": "1.9.4",
    "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
    "leaflet.markercluster": "1.5.3",
    "lit": "3.3.3",
    "lit-html": "3.3.3",
    "luxon": "3.7.2",
-    "marked": "18.0.10",
+    "maplibre-gl": "5.24.0",
+    "marked": "18.0.11",
    "memoize-one": "6.0.0",
    "node-vibrant": "4.0.4",
    "object-hash": "3.0.0",
@@ -147,7 +150,7 @@
    "@eslint/js": "10.0.1",
    "@gfx/zopfli": "1.0.15",
    "@html-eslint/eslint-plugin": "0.65.0",
-    "@lokalise/node-api": "16.3.0",
+    "@lokalise/node-api": "16.4.0",
    "@octokit/auth-oauth-device": "8.0.4",
    "@octokit/plugin-retry": "8.1.1",
    "@octokit/rest": "22.0.1",
@@ -170,13 +173,14 @@
    "@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.9.1",
    "eslint-config-prettier": "10.1.8",
    "eslint-import-resolver-webpack": "0.13.11",
    "eslint-plugin-import-x": "4.17.1",
@@ -186,7 +190,7 @@
    "eslint-plugin-wc": "3.1.0",
    "fancy-log": "2.0.0",
    "fs-extra": "11.4.0",
-    "generate-license-file": "4.2.1",
+    "generate-license-file": "4.2.3",
    "glob": "13.0.6",
    "globals": "17.11.0",
    "gulp": "5.0.1",
@@ -203,7 +207,7 @@
    "lodash.merge": "4.6.2",
    "lodash.template": "4.18.1",
    "map-stream": "0.0.7",
-    "minify-literals": "2.1.0",
+    "minify-literals": "2.2.0",
    "pinst": "3.0.0",
    "prettier": "3.9.6",
    "rspack-manifest-plugin": "5.2.2",
@@ -213,7 +217,7 @@
    "terser-webpack-plugin": "5.6.1",
    "ts-lit-plugin": "2.0.2",
    "typescript": "6.0.3",
-    "typescript-eslint": "8.67.0",
+    "typescript-eslint": "8.68.0",
    "vite-tsconfig-paths": "6.1.1",
    "vitest": "4.1.11",
    "webpack-stats-plugin": "1.1.3",
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"

 [project]
 name         = "home-assistant-frontend"
-version      = "20260729.0"
+version      = "20260826.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"
@@ -27,6 +27,7 @@ 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",
@@ -1,13 +1,26 @@
-import type { Map, TileLayer } from "leaflet";
+import type { Map } from "leaflet";
+import type { MapBaseLayer } from "../map/base-layer";
+import { createBaseLayer, MAP_MAX_ZOOM, MAP_MIN_ZOOM } from "../map/base-layer";

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

  await import("leaflet.markercluster");

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

-  const tileLayer = createTileLayer(Leaflet).addTo(map);
-
-  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,
-    }
+  // 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
  );
+
+  return { map, leaflet: Leaflet, baseLayer };
+};
@@ -0,0 +1,251 @@
+import type { maplibreGL } from "@maplibre/maplibre-gl-leaflet";
+import type { Map as LeafletMap } from "leaflet";
+import type { setRTLTextPlugin, 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;
+
+// Without it Arabic and Hebrew labels render reversed. Loaded by MapLibre's
+// worker, hence a URL rather than an import.
+const RTL_TEXT_PLUGIN_URL = "/static/map/mapbox-gl-rtl-text.js";
+
+// 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;
+};
+
+// Global to MapLibre, and it throws when set twice.
+let rtlTextPluginRequested = false;
+const ensureRTLTextPlugin = (setPlugin: typeof setRTLTextPlugin) => {
+  if (rtlTextPluginRequested) {
+    return;
+  }
+  rtlTextPluginRequested = true;
+  setPlugin(new URL(RTL_TEXT_PLUGIN_URL, location.href).href, true).catch(
+    () => {
+      // RTL labels stay reversed; everything else still renders.
+    }
+  );
+};
+
+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 }, maplibre] = await Promise.all([
+        import("@maplibre/maplibre-gl-leaflet"),
+        import("maplibre-gl"),
+      ]);
+      ensureRTLTextPlugin(maplibre.setRTLTextPlugin);
+      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);
+};
@@ -80,6 +80,67 @@ const ensureDialogsClosed = async (timestamp: number): Promise<boolean> => {
  return ensureDialogsClosed(timestamp);
 };

+/**
+ * Lets a page with unsaved changes (e.g. the automation editor) veto
+ * navigation. `isDirty` is read live at navigation time; `prompt` resolves
+ * true when navigation may proceed.
+ */
+export interface UnsavedChangesGuard {
+  isDirty(): boolean;
+  prompt(): Promise<boolean>;
+}
+
+const unsavedChangesGuards = new Set<UnsavedChangesGuard>();
+
+export const registerUnsavedChangesGuard = (guard: UnsavedChangesGuard) => {
+  unsavedChangesGuards.add(guard);
+};
+
+export const unregisterUnsavedChangesGuard = (guard: UnsavedChangesGuard) => {
+  unsavedChangesGuards.delete(guard);
+};
+
+let pendingUnsavedPrompt: Promise<boolean> | undefined;
+
+/**
+ * Counts navigations that changed the history entry, so a navigation held up
+ * by an unsaved-changes prompt can tell whether a newer one has moved the app
+ * on in the meantime.
+ */
+let committedNavigations = 0;
+
+/**
+ * Asks each dirty guard whether navigation may proceed. Returns true when
+ * nothing is dirty or every prompt was confirmed. Concurrent navigations
+ * share one pending prompt instead of stacking dialogs; the dirty check runs
+ * before joining it, so a navigation triggered from inside a prompt (e.g. by
+ * its save action) cannot deadlock on its own promise.
+ */
+const ensureUnsavedChangesConfirmed = (): Promise<boolean> => {
+  const dirtyGuards = [...unsavedChangesGuards].filter((guard) =>
+    guard.isDirty()
+  );
+  if (!dirtyGuards.length) {
+    return Promise.resolve(true);
+  }
+  if (!pendingUnsavedPrompt) {
+    pendingUnsavedPrompt = (async () => {
+      try {
+        for (const guard of dirtyGuards) {
+          // eslint-disable-next-line no-await-in-loop
+          if (!(await guard.prompt())) {
+            return false;
+          }
+        }
+        return true;
+      } finally {
+        pendingUnsavedPrompt = undefined;
+      }
+    })();
+  }
+  return pendingUnsavedPrompt;
+};
+
 const buildHistoryState = (
  data: Record<string, unknown> | undefined,
  from?: string
@@ -91,7 +152,7 @@ const buildHistoryState = (
  return { ...state, from };
 };

-export const navigate = async (path: string, options?: NavigateOptions) => {
+const performNavigation = async (path: string, options?: NavigateOptions) => {
  const canProceed = await ensureDialogsClosed(Date.now());
  if (!canProceed) {
    return false;
@@ -127,9 +188,28 @@ export const navigate = async (path: string, options?: NavigateOptions) => {
  fireEvent(mainWindow, "location-changed", {
    replace,
  });
+  committedNavigations += 1;
  return true;
 };

+export const navigate = async (path: string, options?: NavigateOptions) => {
+  // Only guard actual departures: navigating to the current path keeps the
+  // page, and any unsaved state on it, mounted.
+  if (path !== currentPath()) {
+    const navigationsBeforePrompt = committedNavigations;
+    if (!(await ensureUnsavedChangesConfirmed())) {
+      return false;
+    }
+    if (committedNavigations !== navigationsBeforePrompt) {
+      // Another navigation landed while the prompt was waiting for an answer,
+      // so this destination is stale. Dropping it keeps a late answer from
+      // pulling the user back off the page they are on now.
+      return false;
+    }
+  }
+  return performNavigation(path, options);
+};
+
 /**
 * Whether the previous history entry is a page this app navigated away from.
 * `history.length` cannot answer this: a login redirect goes through
@@ -142,6 +222,9 @@ export const canGoBack = (): boolean =>
 /**
 * Navigate back to the page we came from, falling back to a path when the
 * previous entry is not ours (deep link, login redirect, fresh tab).
+ * Deliberately not guarded against unsaved changes: pages with such a guard
+ * confirm in their own back handlers, and delete flows leave through here
+ * after the edited item is already gone.
 */
 export const goBack = async (fallbackPath?: string): Promise<void> => {
  const canProceed = await ensureDialogsClosed(Date.now());
@@ -156,5 +239,5 @@ export const goBack = async (fallbackPath?: string): Promise<void> => {
    return;
  }

-  await navigate(fallbackPath || "/", { replace: true });
+  await performNavigation(fallbackPath || "/", { replace: true });
 };
@@ -0,0 +1,37 @@
+import deepFreeze from "deep-freeze";
+
+const inFlightRequests = new WeakMap<object, Map<string, Promise<unknown>>>();
+
+export const shareInFlightRequest = <T>(
+  owner: object,
+  key: string,
+  fetcher: () => Promise<T>
+): Promise<T> => {
+  let requests = inFlightRequests.get(owner);
+  if (!requests) {
+    requests = new Map();
+    inFlightRequests.set(owner, requests);
+  }
+
+  const ownerRequests = requests;
+  const existing = ownerRequests.get(key);
+  if (existing) {
+    return existing as Promise<T>;
+  }
+
+  const request = fetcher()
+    .then((result) => deepFreeze(result) as T)
+    .finally(() => {
+      if (ownerRequests.get(key) !== request) {
+        return;
+      }
+
+      ownerRequests.delete(key);
+      if (ownerRequests.size === 0) {
+        inFlightRequests.delete(owner);
+      }
+    });
+
+  ownerRequests.set(key, request);
+  return request;
+};
@@ -3,6 +3,27 @@ import type { TooltipPositionCallback } from "echarts/types/dist/shared";
 export const TOOLTIP_GAP_PX = 12;
 export const TOOLTIP_TOP_OFFSET_PX = 10;

+const offsetFromCursor = (
+  cursorX: number,
+  dom: unknown,
+  viewW: number,
+  tipW: number
+) => {
+  const rtl =
+    dom instanceof HTMLElement && getComputedStyle(dom).direction === "rtl";
+
+  const rightOfCursor = cursorX + TOOLTIP_GAP_PX;
+  const leftOfCursor = cursorX - TOOLTIP_GAP_PX - tipW;
+
+  let x = rtl ? leftOfCursor : rightOfCursor;
+  const overflowsRight = x + tipW > viewW;
+  const overflowsLeft = x < 0;
+  if (overflowsRight || overflowsLeft) {
+    x = rtl ? rightOfCursor : leftOfCursor;
+  }
+  return Math.max(0, Math.min(x, viewW - tipW));
+};
+
 /**
 * Pins the tooltip near the top of the chart and offsets it horizontally
 * from the cursor so it never covers the data point being inspected.
@@ -20,21 +41,29 @@ export const sideTooltipPosition: TooltipPositionCallback = (
  const [viewW, viewH] = size.viewSize;
  const [tipW, tipH] = size.contentSize;

-  const rtl =
-    dom instanceof HTMLElement && getComputedStyle(dom).direction === "rtl";
-
-  const rightOfCursor = cursorX + TOOLTIP_GAP_PX;
-  const leftOfCursor = cursorX - TOOLTIP_GAP_PX - tipW;
-
-  let x = rtl ? leftOfCursor : rightOfCursor;
-  const overflowsRight = x + tipW > viewW;
-  const overflowsLeft = x < 0;
-  if (overflowsRight || overflowsLeft) {
-    x = rtl ? rightOfCursor : leftOfCursor;
-  }
-  x = Math.max(0, Math.min(x, viewW - tipW));
-
+  const x = offsetFromCursor(cursorX, dom, viewW, tipW);
  const y = Math.max(0, Math.min(TOOLTIP_TOP_OFFSET_PX, viewH - tipH));

  return [x, y];
 };
+
+/**
+ * Offsets the tooltip horizontally from the cursor and keeps it level with it.
+ * For item-trigger tooltips where the cursor's row is what the tooltip shows.
+ */
+export const itemTooltipPosition: TooltipPositionCallback = (
+  point,
+  _params,
+  dom,
+  _rect,
+  size
+) => {
+  const [cursorX, cursorY] = point;
+  const [viewW, viewH] = size.viewSize;
+  const [tipW, tipH] = size.contentSize;
+
+  const x = offsetFromCursor(cursorX, dom, viewW, tipW);
+  const y = Math.max(0, Math.min(cursorY - tipH / 2, viewH - tipH));
+
+  return [x, y];
+};
@@ -10,12 +10,16 @@ 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;
@@ -49,6 +53,25 @@ 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],
 >(
@@ -82,7 +105,10 @@ export function downSampleLineData<
      const pointData = getPointData(point);
      if (!Array.isArray(pointData)) continue;
      const x = Number(pointData[0]);
-      const y = Number(pointData[1]);
+      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);
      if (isNaN(x) || isNaN(y)) continue;

      const frameIndex = Math.floor(x / step);
@@ -120,21 +146,34 @@ export function downSampleLineData<
    const pointData = getPointData(point);
    if (!Array.isArray(pointData)) continue;
    const x = Number(pointData[0]);
-    const y = Number(pointData[1]);
-    if (isNaN(x) || isNaN(y)) continue;
+    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 frameIndex = Math.floor(x / step);
    const frame = frames.get(frameIndex);
    if (!frame) {
-      frames.set(frameIndex, {
-        minPoint: point,
-        minX: x,
-        minY: y,
-        maxPoint: point,
-        maxX: x,
-        maxY: y,
-      });
-    } else {
+      frames.set(frameIndex, newFrame(point, x, y, undefined));
+    } else if (frame.hasValue) {
      // Match the original strict-less / strict-greater comparisons so the
      // first occurrence wins on ties.
      if (y < frame.minY) {
@@ -147,18 +186,40 @@ 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()) {
-    // 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.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);
+      }
    }
-    result.push(frame.minPoint as T);
-    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);
+      }
    }
  }

@@ -328,6 +328,7 @@ export class StateHistoryChartLine extends LitElement {
          ...createYAxisPrecisionBounds({
            min: this._clampYAxis(minYAxis),
            max: this._clampYAxis(maxYAxis),
+            unit: this.unit,
            onFractionDigits: (digits) => {
              if (digits !== this._yAxisFractionDigits) {
                this._yAxisFractionDigits = digits;
@@ -1,4 +1,3 @@
-import { ResizeController } from "@lit-labs/observers/resize-controller";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -13,7 +12,7 @@ import { computeRTL } from "../../common/util/compute_rtl";
 import type { TimelineEntity } from "../../data/history";
 import type { HomeAssistant } from "../../types";
 import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
-import { sideTooltipPosition } from "./chart-tooltip-position";
+import { itemTooltipPosition } from "./chart-tooltip-position";
 import "./ha-chart-tooltip-marker";
 import { computeTimelineColor } from "./timeline-color";
 import type { HaECOption, HaECSeries } from "../../resources/echarts/echarts";
@@ -24,7 +23,6 @@ import { measureTextWidth } from "../../util/text";
 import { fireEvent, type HASSDomEvent } from "../../common/dom/fire_event";

 const ROW_HEIGHT = 30;
-const ROW_HEIGHT_INSIDE_LABELS = 64;
 const GRID_BOTTOM = 30;

@customElement("state-history-chart-timeline")
@@ -43,10 +41,6 @@ export class StateHistoryChartTimeline extends LitElement {

  @property({ attribute: "show-names", type: Boolean }) public showNames = true;

-  /** Draw each row's name above its bar instead of in a label column. */
-  @property({ attribute: "inside-labels", type: Boolean })
-  public insideLabels = false;
-
  @property({ attribute: "click-for-more-info", type: Boolean })
  public clickForMoreInfo = true;

@@ -69,13 +63,6 @@ export class StateHistoryChartTimeline extends LitElement {

  @state() private _yWidth = 0;

-  private _width = 0;
-
-  private _resize = new ResizeController(this, {
-    skipInitial: true,
-    callback: (entries) => entries[0]?.contentRect.width,
-  });
-
  private _chartTime: Date = new Date();

  protected render() {
@@ -83,7 +70,7 @@ export class StateHistoryChartTimeline extends LitElement {
      <ha-chart-base
        .hass=${this.hass}
        .options=${this._chartOptions}
-        .height=${`${this.data.length * (this.insideLabels ? ROW_HEIGHT_INSIDE_LABELS : ROW_HEIGHT) + GRID_BOTTOM}px`}
+        .height=${`${this.data.length * ROW_HEIGHT + GRID_BOTTOM}px`}
        .data=${this._chartData as HaECSeries}
        small-controls
        @chart-click=${this._handleChartClick}
@@ -193,19 +180,13 @@ export class StateHistoryChartTimeline extends LitElement {
      this._generateData();
    }

-    const width = this.insideLabels ? Math.round(this._resize.value ?? 0) : 0;
-    const widthChanged = width !== this._width;
-    this._width = width;
-
    if (
      !this.hasUpdated ||
      changedProps.has("startTime") ||
      changedProps.has("endTime") ||
      changedProps.has("showNames") ||
-      changedProps.has("insideLabels") ||
      changedProps.has("paddingYAxis") ||
-      changedProps.has("_yWidth") ||
-      widthChanged
+      changedProps.has("_yWidth")
    ) {
      this._createOptions();
    }
@@ -215,22 +196,14 @@ export class StateHistoryChartTimeline extends LitElement {
    const narrow = this.narrow;
    const showNames = this.chunked || this.showNames;
    const maxInternalLabelWidth = narrow ? 105 : 185;
-    const insideLabels = this.insideLabels;
-    const labelWidth =
-      showNames && !insideLabels
-        ? Math.max(this.paddingYAxis, this._yWidth)
-        : 0;
+    const labelWidth = showNames
+      ? Math.max(this.paddingYAxis, this._yWidth)
+      : 0;
    const labelMargin = 5;
    const rtl = computeRTL(
      this.hass.language,
      this.hass.translationMetadata.translations
    );
-    // Keeps the plot aligned with the line charts sharing the y-axis padding.
-    const plotPadding = insideLabels ? this.paddingYAxis : labelWidth;
-    // A zero width hides the labels instead of truncating them.
-    const insideLabelWidth = this._width
-      ? Math.max(0, this._width - plotPadding - labelMargin)
-      : undefined;
    this._chartOptions = {
      xAxis: {
        type: "time",
@@ -254,56 +227,41 @@ export class StateHistoryChartTimeline extends LitElement {
        axisLine: {
          show: false,
        },
-        axisLabel: insideLabels
-          ? {
-              show: showNames,
-              inside: true,
-              margin: 0,
-              padding: [0, rtl ? 2 : 0, 14, rtl ? 0 : 2],
-              align: rtl ? "right" : "left",
-              verticalAlign: "bottom",
-              width: insideLabelWidth,
-              overflow: "truncate",
-              formatter: (id: string) =>
-                (this._chartData.find((d) => d.id === id)?.name as string) ??
-                "",
-              hideOverlap: true,
+        axisLabel: {
+          show: showNames,
+          width: labelWidth,
+          overflow: "truncate",
+          margin: labelMargin,
+          formatter: (id: string) => {
+            const label = this._chartData.find((d) => d.id === id)
+              ?.name as string;
+            const width = label
+              ? Math.min(
+                  measureTextWidth(label, 12) + labelMargin,
+                  maxInternalLabelWidth
+                )
+              : 0;
+            if (width > this._yWidth) {
+              this._yWidth = width;
+              fireEvent(this, "y-width-changed", {
+                value: this._yWidth,
+                chartIndex: this.chartIndex,
+              });
            }
-          : {
-              show: showNames,
-              width: labelWidth,
-              overflow: "truncate",
-              margin: labelMargin,
-              formatter: (id: string) => {
-                const label = this._chartData.find((d) => d.id === id)
-                  ?.name as string;
-                const width = label
-                  ? Math.min(
-                      measureTextWidth(label, 12) + labelMargin,
-                      maxInternalLabelWidth
-                    )
-                  : 0;
-                if (width > this._yWidth) {
-                  this._yWidth = width;
-                  fireEvent(this, "y-width-changed", {
-                    value: this._yWidth,
-                    chartIndex: this.chartIndex,
-                  });
-                }
-                return label;
-              },
-              hideOverlap: true,
-            },
+            return label;
+          },
+          hideOverlap: true,
+        },
      },
      grid: {
-        top: insideLabels ? 20 : 10,
+        top: 10,
        bottom: GRID_BOTTOM,
-        left: rtl ? 1 : plotPadding,
-        right: rtl ? plotPadding : 1,
+        left: rtl ? 1 : labelWidth,
+        right: rtl ? labelWidth : 1,
      },
      tooltip: {
        renderMode: "html",
-        position: sideTooltipPosition,
+        position: itemTooltipPosition,
        confine: true,
        formatter: this._renderTooltip,
      },
@@ -443,10 +401,6 @@ export class StateHistoryChartTimeline extends LitElement {
  }

  static styles = css`
-    :host {
-      display: block;
-    }
-
    ha-chart-base {
      --chart-max-height: none;
    }
@@ -79,10 +79,6 @@ export class StateHistoryCharts extends LitElement {

  @property({ attribute: "show-names", type: Boolean }) public showNames = true;

-  /** Draw timeline row names above their bar instead of in a label column. */
-  @property({ attribute: "inside-labels", type: Boolean, reflect: true })
-  public insideLabels = false;
-
  @property({ attribute: "click-for-more-info", type: Boolean })
  public clickForMoreInfo = true;

@@ -231,7 +227,6 @@ export class StateHistoryCharts extends LitElement {
        .startTime=${this._computedStartTime}
        .endTime=${this._computedEndTime}
        .showNames=${this.showNames}
-        .insideLabels=${this.insideLabels}
        .names=${this.names}
        .narrow=${this.narrow}
        .chunked=${this.virtualize}
@@ -429,12 +424,6 @@ export class StateHistoryCharts extends LitElement {
      padding-top: 8px;
    }

-    /* Names inside the plot sit close to the chart above them, so the groups
-       need more room between them to stay apart. */
-    :host([inside-labels]) .entry-container.timeline:not(:first-child) {
-      margin-top: var(--ha-space-8);
-    }
-
    .entry-container:hover {
      z-index: 1;
    }
@@ -446,6 +446,7 @@ export class StatisticsChart extends LitElement {
        ...createYAxisPrecisionBounds({
          min: this._clampYAxis(minYAxis),
          max: this._clampYAxis(maxYAxis),
+          unit: this.unit,
          // Bar charts stay anchored at 0, so precision must reflect the
          // 0-based range that is actually rendered.
          includeZero: !yAxisScale,
@@ -1,13 +1,32 @@
+import { intervalScaleEnsureValidExtent } from "echarts/lib/scale/helper";
+import { getPrecision, nice, round } from "echarts/lib/util/number";
+
 // A range smaller than this fraction of the axis magnitude is floating-point
 // noise (e.g. from summed statistics), not real precision.
 const NEGLIGIBLE_RANGE_RATIO = 1e-10;

+// Intervals the axis aims for. Passed to ECharts rather than assumed, so the
+// precision derived here cannot drift from the ticks it renders.
+const SPLIT_NUMBER = 5;
+
+// How thin a gap between the data and the plot edge counts as no gap at all,
+// as a fraction of the data span. ECharts floors the axis minimum and ceils the
+// maximum to a tick multiple, which usually leaves headroom, but quantized
+// states often land exactly on a tick and get none — collapsing area-filled
+// series, which are drawn from their value down to the axis minimum. Widening
+// the extent by this much before that rounding bumps any axis with less
+// headroom out to a full tick, and leaves the rest where they are.
+const GAP_FRACTION_OF_SPAN = 0.02;
+
+// A percentage has a real ceiling the way zero is a real floor, so the gap must
+// not push the axis past it. Not every `%` sensor is bounded — power factor is
+// signed and can read over 100 — so this only applies while the data stays under.
+const PERCENT_MAX = 100;
+
 // Derive the number of decimal digits to use for Y-axis labels from the
-// observed data range. We mirror how ECharts sizes its ticks: it splits the
-// range into ~5 intervals (its default `splitNumber`) and rounds that raw
-// interval to a "nice" 1/2/3/5×10ⁿ value, then reports the decimals that nice
-// interval needs. This matches the precision ECharts actually renders, so
-// labels are neither truncated to identical values nor padded with extra zeros.
+// observed data range, by asking ECharts for the same tick interval it will
+// render. This matches the precision it actually draws, so labels are neither
+// truncated to identical values nor padded with extra zeros.
 export function computeYAxisFractionDigits(
  min: number,
  max: number,
@@ -22,13 +41,7 @@ export function computeYAxisFractionDigits(
  // with a tail of zeros (e.g. "0.20000000000000"), so treat it as flat.
  const magnitude = Math.max(Math.abs(lo), Math.abs(hi));
  if (range <= magnitude * NEGLIGIBLE_RANGE_RATIO) return 1;
-  const rawInterval = range / 5;
-  const exponent = Math.floor(Math.log10(rawInterval));
-  const mantissa = rawInterval / 10 ** exponent; // in [1, 10)
-  // Rounding the mantissa to a nice value only ever carries to the next power
-  // of ten (mantissa ≥ 7 → 10), which needs one fewer decimal.
-  const niceExponent = mantissa >= 7 ? exponent + 1 : exponent;
-  return Math.max(0, -niceExponent);
+  return getPrecision(nice(range / SPLIT_NUMBER, true));
 }

 interface YAxisExtentValues {
@@ -44,34 +57,116 @@ const resolveYAxisBound = (
  values: YAxisExtentValues
 ): number | undefined => (typeof bound === "function" ? bound(values) : bound);

-// Wrap the Y-axis `min`/`max` options in callbacks so the tick-label precision
-// tracks the currently visible axis extent. ECharts re-invokes these callbacks
-// with the extent of the visible (zoom-filtered) data on every dataZoom, and
-// always before the label formatter runs, so recomputing the fraction digits
-// here keeps zoomed-in labels distinct. The callbacks return the original
-// bounds unchanged, so auto-scaling still applies when a bound is not set.
+// A constant series has no span for the gap to be a fraction of, so ECharts
+// falls back to `Math.abs(min)` when sizing it. That makes the extent unequal,
+// which in turn stops `intervalScaleEnsureValidExtent` from applying the ±|v|/2
+// expansion a flat series relies on for its window. Run that expansion here and
+// return fixed bounds, which also suppresses the gap.
+const flatSeriesExtent = (value: number, fixed: [boolean, boolean]) => {
+  const [lo, hi] = intervalScaleEnsureValidExtent([value, value], fixed);
+  const interval = nice((hi - lo) / SPLIT_NUMBER, true);
+  const precision = getPrecision(interval);
+  return {
+    min: round(Math.floor(lo / interval) * interval, precision),
+    max: round(Math.ceil(hi / interval) * interval, precision),
+  };
+};
+
+// Build the `yAxis` options that keep tick-label precision and the plot-edge gap
+// in agreement with the extent ECharts renders. It re-invokes the `min`/`max`
+// callbacks with the extent of the visible (zoom-filtered) data on every
+// dataZoom, and always before the label formatter runs, so the fraction digits
+// recomputed here track the zoomed range. A callback returns `undefined`
+// wherever auto-scaling should stand, and a number only where the axis has to be
+// pinned: an explicit bound, the zero anchor, or a constant series.
 export function createYAxisPrecisionBounds(options: {
  min?: YAxisBound;
  max?: YAxisBound;
  // Set for bar axes anchored at 0, so precision reflects the 0-based range.
+  // Such an axis also gets no gap: pushing it below zero would defeat the zero
+  // anchoring and leave the bars floating above the axis.
  includeZero?: boolean;
+  // Used to recognise a bounded quantity, so the gap cannot widen the axis past
+  // a limit the data itself never crosses.
+  unit?: string;
  onFractionDigits: (digits: number) => void;
 }): {
  min: (values: YAxisExtentValues) => number | undefined;
  max: (values: YAxisExtentValues) => number | undefined;
+  boundaryGap: [number, number];
+  splitNumber: number;
 } {
-  const { min, max, includeZero, onFractionDigits } = options;
+  const { min, max, includeZero, unit, onFractionDigits } = options;
+  const naturalMax = unit === "%" ? PERCENT_MAX : undefined;
+
+  const resolveBounds = (values: YAxisExtentValues) => {
+    const resolvedMin = resolveYAxisBound(min, values);
+    const resolvedMax = resolveYAxisBound(max, values);
+    if (
+      includeZero ||
+      !Number.isFinite(values.min) ||
+      !Number.isFinite(values.max)
+    ) {
+      return { min: resolvedMin, max: resolvedMax, gap: 0 };
+    }
+    if (values.min === values.max) {
+      const flat = flatSeriesExtent(values.min, [
+        resolvedMin !== undefined,
+        resolvedMax !== undefined,
+      ]);
+      // The expansion is a fraction of the magnitude, so a constant series near
+      // the ceiling would otherwise overshoot it too.
+      const flatMax =
+        naturalMax !== undefined && values.max <= naturalMax
+          ? Math.min(flat.max, naturalMax)
+          : flat.max;
+      return {
+        min: resolvedMin ?? flat.min,
+        max: resolvedMax ?? flatMax,
+        gap: 0,
+      };
+    }
+    const gap = (values.max - values.min) * GAP_FRACTION_OF_SPAN;
+    // Never let the gap carry a series past a boundary it does not itself cross.
+    const floor = values.min >= 0 ? 0 : undefined;
+    const ceiling =
+      naturalMax !== undefined && values.max <= naturalMax
+        ? naturalMax
+        : values.max <= 0
+          ? 0
+          : undefined;
+    return {
+      min:
+        resolvedMin ??
+        (floor !== undefined && values.min - floor < gap ? floor : undefined),
+      max:
+        resolvedMax ??
+        (ceiling !== undefined && ceiling - values.max < gap
+          ? ceiling
+          : undefined),
+      gap,
+    };
+  };
+
  return {
+    // Always emit the key. `setOption` merges the Y axis rather than replacing
+    // it, so a conditionally spread gap would survive a chart switching to a
+    // zero-anchored type and leave its bars floating.
+    boundaryGap: includeZero
+      ? [0, 0]
+      : [GAP_FRACTION_OF_SPAN, GAP_FRACTION_OF_SPAN],
+    splitNumber: SPLIT_NUMBER,
    min: (values) => {
-      const resolvedMin = resolveYAxisBound(min, values);
-      const resolvedMax = resolveYAxisBound(max, values);
-      const extentMin = resolvedMin ?? values.min;
-      const extentMax = resolvedMax ?? values.max;
+      const bounds = resolveBounds(values);
      onFractionDigits(
-        computeYAxisFractionDigits(extentMin, extentMax, includeZero)
+        computeYAxisFractionDigits(
+          bounds.min ?? values.min - bounds.gap,
+          bounds.max ?? values.max + bounds.gap,
+          includeZero
+        )
      );
-      return resolvedMin;
+      return bounds.min;
    },
-    max: (values) => resolveYAxisBound(max, values),
+    max: (values) => resolveBounds(values).max,
  };
 }
@@ -12,7 +12,6 @@ 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";
@@ -180,12 +179,15 @@ export abstract class HaDeviceAutomationPicker<
      (a, idx) => value === `${a.device_id}_${idx}`
    );

-    const text = automation
+    const described =
+      automation ?? (this.value?.domain ? this.value : undefined);
+
+    const text = described
      ? this._localizeDeviceAutomation(
          this.hass.localize,
          this.hass.states,
          this._entityReg,
-          automation
+          described
        )
      : value === NO_AUTOMATION_KEY
        ? this.NO_AUTOMATION_TEXT
@@ -195,29 +197,24 @@ 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)
+          await this._fetchDeviceAutomations(
+            this.hass.callWS,
+            this.deviceId
+          ).catch(() => [] as T[])
        ).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. 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 there is no value, or if we have changed the device ID, reset the value.
    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(
-        equivalent ||
-          (this._automations.length
-            ? this._automations[0]
-            : this._createNoAutomation(this.deviceId))
+        this._automations.length
+          ? this._automations[0]
+          : this._createNoAutomation(this.deviceId)
      );
    }
    this._renderEmpty = true;
@@ -1,4 +1,4 @@
-import { mdiAlertOutline } from "@mdi/js";
+import { mdiSwapHorizontal } 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,6 +22,7 @@ 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";
@@ -104,6 +105,14 @@ 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> = {};
@@ -187,7 +196,8 @@ export class HaDevicePicker extends LitElement {
      value: string | undefined,
      _devices: HomeAssistant["devices"],
      compositeSplits: DeviceCompositeSplits | undefined,
-      items: (DevicePickerItem | string)[]
+      items: (DevicePickerItem | string)[],
+      replacementDeviceIds: string[] | undefined
    ) => {
      if (!value || !compositeSplits || this.hass.devices[value]) {
        return undefined;
@@ -203,7 +213,11 @@ 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));
+      const candidates = split.split_ids.filter(
+        (id) =>
+          selectableIds.has(id) &&
+          (!replacementDeviceIds || replacementDeviceIds.includes(id))
+      );
      return { candidates, primaryId: split.primary_id };
    }
  );
@@ -250,26 +264,26 @@ export class HaDevicePicker extends LitElement {
  };

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

        if (!device) {
-          // 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) {
+          // 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) {
            return html`
              <ha-svg-icon
                slot="start"
-                style="color: var(--warning-color)"
-                .path=${mdiAlertOutline}
+                .path=${mdiSwapHorizontal}
              ></ha-svg-icon>
-              <span slot="headline">${replacementName}</span>
+              <span slot="headline"
+                >${this.hass.localize(
+                  "ui.components.device-picker.device_replaced"
+                )}</span
+              >
            `;
          }
          return html`<span slot="headline">${deviceId}</span>`;
@@ -399,31 +413,23 @@ export class HaDevicePicker extends LitElement {
            this.value,
            this.hass.devices,
            this._compositeSplits,
-            this._getItems()
+            this._getItems(),
+            this.replacementDeviceIds
          )
        : 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,
-      replacementName
+      canReplace
    );

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

-    const replacementName =
-      candidates.length === 1
-        ? computeDeviceName(this.hass.devices[candidates[0]])
-        : undefined;
+    // 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;

    return html`
      <ha-alert alert-type="warning">
        ${
-          replacementName
+          replacementName && replacementDomain
            ? 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 }
+                "ui.components.device-picker.device_replaced_by_one_integration",
+                {
+                  device: replacementName,
+                  integration: domainToName(
+                    this.hass.localize,
+                    replacementDomain
+                  ),
+                }
              )
+            : 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}
        >
-          ${this.hass.localize("ui.components.device-picker.replace_device")}
+          ${
+            candidates.length === 1
+              ? this.hass.localize("ui.components.device-picker.replace_update")
+              : this.hass.localize("ui.components.device-picker.replace_choose")
+          }
        </ha-button>
      </ha-alert>
    `;
@@ -498,7 +521,8 @@ export class HaDevicePicker extends LitElement {
      this.value,
      this.hass.devices,
      this._compositeSplits,
-      this._getItems()
+      this._getItems(),
+      this.replacementDeviceIds
    );
    if (!replacement?.candidates.length) {
      return;
@@ -16,10 +16,10 @@ import { computeStateName } from "../../common/entity/compute_state_name";
 import { computeRTL } from "../../common/util/compute_rtl";
 import { domainToName } from "../../data/integration";
 import {
-  getStatisticIds,
  getStatisticLabel,
  type StatisticsMetaData,
 } from "../../data/recorder";
+import { getStatisticIds } from "../../data/recorder_statistic_ids";
 import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
 import "../ha-combo-box-item";
@@ -90,7 +90,7 @@ class HaAlert extends LitElement {
  static styles = css`
    .issue-type {
      position: relative;
-      padding: 8px;
+      padding: var(--ha-alert-padding, 8px);
      display: flex;
    }
    .icon {
@@ -1,12 +1,12 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../../../components/ha-icon-next";
-import "../../../components/ha-svg-icon";
-import "../../../components/item/ha-list-item-button";
-import "../../../components/list/ha-list-nav";
-import type { PageNavigation } from "../../../layouts/hass-tabs-subpage";
-import type { HomeAssistant } from "../../../types";
+import "./ha-icon-next";
+import "./ha-svg-icon";
+import "./item/ha-list-item-button";
+import "./list/ha-list-nav";
+import type { PageNavigation } from "../layouts/hass-tabs-subpage";
+import type { HomeAssistant } from "../types";

@customElement("ha-config-navigation-list")
 class HaConfigNavigationList extends LitElement {
@@ -0,0 +1,216 @@
+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;
+  }
+}
@@ -95,6 +95,10 @@ export class HaDrawer extends LitElement {
  }

  private _handleAfterHide(ev: Event) {
+    // Ignore wa-after-hide from nested Web Awesome components (e.g. tooltips)
+    if (ev.target !== ev.currentTarget) {
+      return;
+    }
    ev.stopPropagation();
    this.open = false;
    fireEvent(this, "hass-drawer-closed");
@@ -1,6 +1,13 @@
-import type { Selector } from "../../data/selector";
+import {
+  getSelectorInitialValue,
+  getSelectorInitialValueOrUndefined,
+} from "./get-selector-initial-value";
 import type { HaFormData, HaFormSchema } from "./types";

+interface ComputeInitialHaFormDataOptions {
+  skipUnsupportedSelectors?: boolean;
+}
+
 const setDefaultValue = (
  field: HaFormSchema,
  value: HaFormData | undefined
@@ -18,7 +25,8 @@ const setDefaultValue = (
 };

 export const computeInitialHaFormData = (
-  schema: HaFormSchema[] | readonly HaFormSchema[]
+  schema: HaFormSchema[] | readonly HaFormSchema[],
+  options?: ComputeInitialHaFormDataOptions
 ): Record<string, any> => {
  const data = {};
  schema.forEach((field) => {
@@ -33,7 +41,7 @@ export const computeInitialHaFormData = (
    } else if ("default" in field) {
      data[field.name] = setDefaultValue(field, field.default);
    } else if (field.type === "expandable") {
-      const expandableData = computeInitialHaFormData(field.schema);
+      const expandableData = computeInitialHaFormData(field.schema, options);
      if (field.required || Object.keys(expandableData).length) {
        // Only add expandable data if it's required or any of its children have initial values.
        data[field.name] = expandableData;
@@ -62,104 +70,11 @@ export const computeInitialHaFormData = (
        seconds: 0,
      };
    } else if ("selector" in field) {
-      const selector: Selector = field.selector;
-
-      if ("device" in selector) {
-        data[field.name] = selector.device?.multiple ? [] : "";
-      } else if ("entity" in selector) {
-        data[field.name] = selector.entity?.multiple ? [] : "";
-      } else if ("area" in selector) {
-        data[field.name] = selector.area?.multiple ? [] : "";
-      } else if ("label" in selector) {
-        data[field.name] = selector.label?.multiple ? [] : "";
-      } else if ("boolean" in selector) {
-        data[field.name] = false;
-      } else if (
-        "addon" in selector ||
-        "attribute" in selector ||
-        "file" in selector ||
-        "icon" in selector ||
-        "serial_port" in selector ||
-        "template" in selector ||
-        "text" in selector ||
-        "theme" in selector ||
-        "object" in selector
-      ) {
-        data[field.name] = "";
-      } else if ("number" in selector) {
-        data[field.name] = selector.number?.min ?? 0;
-      } else if ("select" in selector) {
-        if (selector.select?.options.length) {
-          const firstOption = selector.select.options[0];
-          const val =
-            typeof firstOption === "string" ? firstOption : firstOption.value;
-          data[field.name] = selector.select.multiple ? [val] : val;
-        }
-      } else if ("country" in selector) {
-        if (selector.country?.countries?.length) {
-          data[field.name] = selector.country.countries[0];
-        }
-      } else if ("language" in selector) {
-        if (selector.language?.languages?.length) {
-          data[field.name] = selector.language.languages[0];
-        }
-      } else if ("duration" in selector) {
-        data[field.name] = {
-          hours: 0,
-          minutes: 0,
-          seconds: 0,
-        };
-      } else if ("time" in selector) {
-        data[field.name] = "00:00:00";
-      } else if ("date" in selector || "datetime" in selector) {
-        const now = new Date().toISOString().slice(0, 10);
-        data[field.name] = `${now}T00:00:00`;
-      } else if ("color_rgb" in selector) {
-        data[field.name] = [0, 0, 0];
-      } else if ("color_temp" in selector) {
-        data[field.name] = selector.color_temp?.min_mireds ?? 153;
-      } else if (
-        "action" in selector ||
-        "trigger" in selector ||
-        "condition" in selector
-      ) {
-        data[field.name] = [];
-      } else if ("media" in selector || "target" in selector) {
-        data[field.name] = {};
-      } else if ("state" in selector) {
-        data[field.name] = selector.state?.multiple ? [] : "";
-      } else if ("choose" in selector) {
-        const firstChoice = Object.keys(selector.choose.choices)[0];
-        if (!firstChoice) {
-          data[field.name] = {};
-        } else {
-          data[field.name] = {
-            active_choice: firstChoice,
-            [firstChoice]: computeInitialHaFormData([
-              {
-                name: firstChoice,
-                selector: selector.choose.choices[firstChoice].selector,
-              },
-            ])[firstChoice],
-          };
-        }
-      } else if ("numeric_threshold" in selector) {
-        const mode = selector.numeric_threshold?.mode ?? "crossed";
-        const type = mode === "changed" ? "any" : "above";
-        data[field.name] =
-          type === "any"
-            ? { type }
-            : {
-                type,
-                value: {
-                  number: selector.numeric_threshold?.number?.min ?? 0,
-                  active_choice: "number",
-                },
-              };
-      } else {
-        throw new Error(
-          `Selector ${Object.keys(selector)[0]} not supported in initial form data`
-        );
+      const initialValue = options?.skipUnsupportedSelectors
+        ? getSelectorInitialValueOrUndefined(field.selector)
+        : getSelectorInitialValue(field.selector);
+      if (initialValue !== undefined) {
+        data[field.name] = initialValue;
      }
    }
  });
@@ -1,25 +1,89 @@
 import { DEFAULT_MIN_KELVIN } from "../../common/color/convert-light-color";
-import type { Selector } from "../../data/selector";
+import type {
+  Selector,
+  SelectorForType,
+  SelectorType,
+} from "../../data/selector";
+
+type SelectorFallbackValues = {
+  [T in SelectorType]: ((selector: SelectorForType<T>) => unknown) | undefined;
+};
+
+const SELECTOR_FALLBACK_VALUES = {
+  action: undefined,
+  addon: undefined,
+  automation_behavior: undefined,
+  app: undefined,
+  area: undefined,
+  areas_display: undefined,
+  attribute: undefined,
+  assist_pipeline: undefined,
+  boolean: () => false,
+  choose: undefined,
+  color_rgb: undefined,
+  condition: undefined,
+  config_entry: undefined,
+  conversation_agent: undefined,
+  constant: (selector) => selector.constant?.value,
+  country: undefined,
+  date: undefined,
+  datetime: undefined,
+  device: undefined,
+  device_class: undefined,
+  duration: undefined,
+  entity: undefined,
+  entity_name: undefined,
+  statistic: undefined,
+  file: undefined,
+  floor: undefined,
+  label: undefined,
+  language: undefined,
+  navigation: undefined,
+  number: (selector) => selector.number?.min ?? 0,
+  numeric_threshold: undefined,
+  object: undefined,
+  period: undefined,
+  qr_code: undefined,
+  select: undefined,
+  selector: undefined,
+  serial_port: undefined,
+  state: undefined,
+  backup_location: undefined,
+  stt: undefined,
+  target: undefined,
+  template: undefined,
+  text: undefined,
+  time: undefined,
+  icon: undefined,
+  media: undefined,
+  theme: undefined,
+  timezone: undefined,
+  button_toggle: undefined,
+  trigger: undefined,
+  tts: undefined,
+  tts_voice: undefined,
+  location: undefined,
+  color_temp: (selector) => {
+    if (selector.color_temp?.unit === "kelvin") {
+      return selector.color_temp.min ?? DEFAULT_MIN_KELVIN;
+    }
+
+    return selector.color_temp?.min ?? selector.color_temp?.min_mireds ?? 153;
+  },
+  ui_action: undefined,
+  ui_clock_date_format: undefined,
+  ui_color: undefined,
+  ui_state_content: undefined,
+  ui_time_format: undefined,
+} satisfies SelectorFallbackValues;

 /**
 * Value a selector already displays when no field value is set.
 * Used when enabling an optional service/trigger/condition field.
 */
 export const getSelectorFallbackValue = (selector: Selector): unknown => {
-  if ("constant" in selector) {
-    return selector.constant?.value;
-  }
-  if ("boolean" in selector) {
-    return false;
-  }
-  if ("number" in selector) {
-    return selector.number?.min ?? 0;
-  }
-  if ("color_temp" in selector) {
-    if (selector.color_temp?.unit === "kelvin") {
-      return selector.color_temp.min ?? DEFAULT_MIN_KELVIN;
-    }
-    return selector.color_temp?.min ?? selector.color_temp?.min_mireds ?? 153;
-  }
-  return undefined;
+  const type = Object.keys(selector)[0] as SelectorType;
+  const fallbackValue = SELECTOR_FALLBACK_VALUES[type];
+
+  return fallbackValue?.(selector as never);
 };
@@ -0,0 +1,133 @@
+import type {
+  Selector,
+  SelectorForType,
+  SelectorType,
+} from "../../data/selector";
+
+type SelectorInitialValues = {
+  [T in SelectorType]: ((selector: SelectorForType<T>) => unknown) | undefined;
+};
+
+const SELECTOR_INITIAL_VALUES = {
+  action: () => [],
+  addon: () => "",
+  automation_behavior: undefined,
+  app: undefined,
+  area: (selector) => (selector.area?.multiple ? [] : ""),
+  areas_display: undefined,
+  attribute: () => "",
+  assist_pipeline: undefined,
+  boolean: () => false,
+  choose: (selector) => {
+    const firstChoice = Object.keys(selector.choose.choices)[0];
+
+    if (!firstChoice) {
+      return {};
+    }
+
+    const childValue = getSelectorInitialValueOrUndefined(
+      selector.choose.choices[firstChoice].selector
+    );
+
+    return childValue === undefined
+      ? { active_choice: firstChoice }
+      : { active_choice: firstChoice, [firstChoice]: childValue };
+  },
+  color_rgb: () => [0, 0, 0],
+  condition: () => [],
+  config_entry: undefined,
+  conversation_agent: undefined,
+  constant: (selector) => selector.constant?.value,
+  country: (selector) => selector.country?.countries?.[0],
+  date: () => `${new Date().toISOString().slice(0, 10)}T00:00:00`,
+  datetime: () => `${new Date().toISOString().slice(0, 10)}T00:00:00`,
+  device: (selector) => (selector.device?.multiple ? [] : ""),
+  device_class: (selector) =>
+    selector.device_class?.multiple ? [] : undefined,
+  duration: () => ({
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+  }),
+  entity: (selector) => (selector.entity?.multiple ? [] : ""),
+  entity_name: undefined,
+  statistic: undefined,
+  file: () => "",
+  floor: undefined,
+  label: (selector) => (selector.label?.multiple ? [] : ""),
+  language: (selector) => selector.language?.languages?.[0],
+  navigation: undefined,
+  number: (selector) => selector.number?.min ?? 0,
+  numeric_threshold: (selector) => {
+    const mode = selector.numeric_threshold?.mode ?? "crossed";
+    const type = mode === "changed" ? "any" : "above";
+
+    return type === "any"
+      ? { type }
+      : {
+          type,
+          value: {
+            number: selector.numeric_threshold?.number?.min ?? 0,
+            active_choice: "number",
+          },
+        };
+  },
+  object: (selector) => (selector.object?.multiple ? [] : ""),
+  period: undefined,
+  qr_code: undefined,
+  select: (selector) => {
+    const select = selector.select;
+
+    if (!select?.options.length) {
+      return undefined;
+    }
+
+    const firstOption = select.options[0];
+    const value =
+      typeof firstOption === "string" ? firstOption : firstOption.value;
+
+    return select.multiple ? [value] : value;
+  },
+  selector: undefined,
+  serial_port: () => "",
+  state: (selector) => (selector.state?.multiple ? [] : ""),
+  backup_location: undefined,
+  stt: undefined,
+  target: () => ({}),
+  template: () => "",
+  text: (selector) => (selector.text?.multiple ? [] : ""),
+  time: () => "00:00:00",
+  icon: () => "",
+  media: () => ({}),
+  theme: () => "",
+  timezone: undefined,
+  button_toggle: undefined,
+  trigger: () => [],
+  tts: undefined,
+  tts_voice: undefined,
+  location: undefined,
+  color_temp: (selector) => selector.color_temp?.min_mireds ?? 153,
+  ui_action: undefined,
+  ui_clock_date_format: undefined,
+  ui_color: undefined,
+  ui_state_content: undefined,
+  ui_time_format: undefined,
+} satisfies SelectorInitialValues;
+
+export const getSelectorInitialValueOrUndefined = (
+  selector: Selector
+): unknown => {
+  const type = Object.keys(selector)[0] as SelectorType;
+  return SELECTOR_INITIAL_VALUES[type]?.(selector as never);
+};
+
+export const getSelectorInitialValue = (selector: Selector): unknown => {
+  const type = Object.keys(selector)[0] as SelectorType;
+  const initialValue = SELECTOR_INITIAL_VALUES[type];
+
+  if (!initialValue) {
+    throw new Error(`Selector ${type} not supported in initial form data`);
+  }
+
+  return initialValue(selector as never);
+};
@@ -111,6 +111,11 @@ 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;
@@ -148,7 +153,10 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
  private _unsubscribeTinyKeys?: () => void;

  protected willUpdate(changedProperties: PropertyValues<this>) {
-    if (changedProperties.has("value")) {
+    if (
+      changedProperties.has("value") ||
+      changedProperties.has("noUnknownState")
+    ) {
      this._setUnknownValue();
    }
  }
@@ -287,6 +295,7 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
  private _setUnknownValue = () => {
    const items = this.getItems();
    if (
+      this.noUnknownState ||
      this.allowCustomValue ||
      this.value === undefined ||
      this.value === null ||
@@ -0,0 +1,45 @@
+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;
+  }
+}
@@ -67,15 +67,16 @@ export class HaNumberSelector extends LitElement {
      }
    }

-    // On iOS/iPadOS the numeric and decimal on-screen keypads have no minus key,
-    // so negatives can only be typed with the full "text" keyboard. Other
-    // platforms include a minus on their number keypads, so restrict this
-    // workaround to Safari/WebKit and only when the selector allows negatives
-    // (e.g. numeric_state triggers/conditions).
-    const useTextInputMode =
+    // On iOS/iPadOS the numeric and decimal on-screen keypads have no minus key.
+    // Leaving inputmode unset on a number input gives the "Numbers and
+    // Punctuation" keyboard there, which does include a minus. Other platforms
+    // include a minus on their number keypads, so restrict this workaround to
+    // Safari/WebKit and only when the selector allows negatives: either an
+    // explicit negative min, or no min at all (e.g. the numeric threshold
+    // selector used by the power triggers).
+    const useSafariNegativeKeyboard =
      isSafari &&
-      this.selector.number?.min !== undefined &&
-      this.selector.number.min < 0;
+      (this.selector.number?.min === undefined || this.selector.number.min < 0);

    const translationKey = this.selector.number?.translation_key;
    let unit = this.selector.number?.unit_of_measurement;
@@ -112,8 +113,8 @@ export class HaNumberSelector extends LitElement {
        }
        <ha-input
          .inputmode=${
-            useTextInputMode
-              ? "text"
+            useSafariNegativeKeyboard
+              ? undefined
              : this.selector.number?.step === "any" ||
                  (this.selector.number?.step ?? 1) % 1 !== 0
                ? "decimal"
@@ -13,6 +13,7 @@ import type { ObjectSelector } from "../../data/selector";
 import { formatSelectorValue } from "../../data/selector/format_selector_value";
 import { showFormDialog } from "../../dialogs/form/show-form-dialog";
 import type { HomeAssistant } from "../../types";
+import { computeInitialHaFormData } from "../ha-form/compute-initial-ha-form-data";
 import type { HaFormSchema } from "../ha-form/types";
 import "../ha-input-helper-text";
 import "../ha-md-list";
@@ -237,10 +238,14 @@ export class HaObjectSelector extends LitElement {
  private async _addItem(ev) {
    ev.stopPropagation();

+    const schema = this._schema(this.selector);
+
    const newItem = await showFormDialog(this, {
      title: this.hass.localize("ui.common.add"),
-      schema: this._schema(this.selector),
-      data: {},
+      schema,
+      data: computeInitialHaFormData(schema, {
+        skipUnsupportedSelectors: true,
+      }),
      computeLabel: this._computeLabel,
      computeHelper: this._computeHelper,
      submitText: this.hass.localize("ui.common.add"),
@@ -293,7 +298,7 @@ export class HaObjectSelector extends LitElement {
    const index = ev.currentTarget.index;

    if (!this.selector.object!.multiple) {
-      fireEvent(this, "value-changed", { value: undefined });
+      fireEvent(this, "value-changed", { value: "" });
      return;
    }

@@ -3,7 +3,7 @@ import { html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
-import type { Selector } from "../../data/selector";
+import type { Selector, SelectorType } from "../../data/selector";
 import {
  handleLegacyDeviceSelector,
  handleLegacyEntitySelector,
@@ -30,6 +30,7 @@ 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"),
@@ -69,7 +70,7 @@ const LOAD_ELEMENTS = {
  ui_color: () => import("./ha-selector-ui-color"),
  ui_state_content: () => import("./ha-selector-ui-state-content"),
  ui_time_format: () => import("./ha-selector-ui-time-format"),
-};
+} satisfies Record<SelectorType, () => Promise<unknown>>;

 const LEGACY_UI_SELECTORS = new Set(["ui-action", "ui-color"]);

@@ -9,7 +9,8 @@ import {
 } from "../resources/theme/color/color.globals";
 import type { HomeAssistant, ThemeSettings, ValueChangedEvent } from "../types";
 import "./ha-button";
-import "./ha-settings-row";
+import "./item/ha-list-item-base";
+import "./list/ha-list-base";
 import "./ha-theme-picker";
 import "./input/ha-input";
 import "./radio/ha-radio-group";
@@ -25,6 +26,7 @@ export interface ThemeSettingsLabels {
  autoMode?: string;
  lightMode?: string;
  darkMode?: string;
+  colors?: string;
  primaryColor?: string;
  accentColor?: string;
  reset?: string;
@@ -42,7 +44,7 @@ export class HaThemeSettings extends LitElement {

  @property() public heading?: string;

-  @property({ type: Boolean }) public narrow = false;
+  @property({ type: Boolean, reflect: true }) public narrow = false;

  @property({ attribute: "include-default", type: Boolean })
  public includeDefault = false;
@@ -62,98 +64,121 @@ export class HaThemeSettings extends LitElement {
        ? this.hass.themes.default_dark_theme || this.hass.themes.default_theme
        : this.hass.themes.default_theme;

+    const showDarkMode =
+      curTheme === HOME_ASSISTANT_THEME ||
+      (curThemeIsUseDefault &&
+        this.hass.themes.default_dark_theme &&
+        this.hass.themes.default_theme) ||
+      this._supportsModeSelection(curTheme);
+
    return html`
-      <ha-settings-row .narrow=${this.narrow} ?empty=${!this.showThemePicker}>
-        ${
-          this.heading
-            ? html`<span slot="heading">${this.heading}</span>`
-            : nothing
-        }
-        ${
-          this.description
-            ? html`<span slot="description">${this.description}</span>`
-            : nothing
-        }
+      <ha-list-base>
        ${
          this.showThemePicker
            ? html`
-                <ha-theme-picker
-                  .label=${this.labels?.theme}
-                  .noThemeLabel=${this.labels?.noTheme}
-                  .value=${themeSettings?.theme || undefined}
-                  .disabled=${this.themePickerDisabled}
-                  ?include-default=${this.includeDefault}
-                  @value-changed=${this._handleThemeSelection}
-                ></ha-theme-picker>
+                <ha-list-item-base>
+                  ${
+                    this.heading
+                      ? html`<span slot="headline">${this.heading}</span>`
+                      : nothing
+                  }
+                  ${
+                    this.description
+                      ? html`<span slot="supporting-text"
+                          >${this.description}</span
+                        >`
+                      : nothing
+                  }
+                  <ha-theme-picker
+                    slot="end"
+                    .label=${this.labels?.theme}
+                    .noThemeLabel=${this.labels?.noTheme}
+                    .value=${themeSettings?.theme || undefined}
+                    .disabled=${this.themePickerDisabled}
+                    ?include-default=${this.includeDefault}
+                    @value-changed=${this._handleThemeSelection}
+                  ></ha-theme-picker>
+                </ha-list-item-base>
              `
            : nothing
        }
-      </ha-settings-row>
-      ${
-        curTheme === HOME_ASSISTANT_THEME ||
-        (curThemeIsUseDefault &&
-          this.hass.themes.default_dark_theme &&
-          this.hass.themes.default_theme) ||
-        this._supportsModeSelection(curTheme)
-          ? html`<div class="inputs">
-              <ha-radio-group
-                @change=${this._handleDarkMode}
-                name="dark_mode"
-                .ariaLabel=${this.labels?.mode ?? "Theme mode"}
-                .value=${
-                  themeSettings?.dark === undefined
-                    ? "auto"
-                    : themeSettings.dark
-                      ? "dark"
-                      : "light"
+        ${
+          showDarkMode
+            ? html`
+                <ha-list-item-base>
+                  <span slot="headline"
+                    >${this.labels?.mode ?? "Theme mode"}</span
+                  >
+                  <ha-radio-group
+                    slot="end"
+                    @change=${this._handleDarkMode}
+                    name="dark_mode"
+                    .value=${
+                      themeSettings?.dark === undefined
+                        ? "auto"
+                        : themeSettings.dark
+                          ? "dark"
+                          : "light"
+                    }
+                    orientation="horizontal"
+                  >
+                    <ha-radio-option value="auto">
+                      ${this.labels?.autoMode ?? "Auto"}
+                    </ha-radio-option>
+                    <ha-radio-option value="light">
+                      ${this.labels?.lightMode ?? "Light"}
+                    </ha-radio-option>
+                    <ha-radio-option value="dark">
+                      ${this.labels?.darkMode ?? "Dark"}
+                    </ha-radio-option>
+                  </ha-radio-group>
+                </ha-list-item-base>
+              `
+            : nothing
+        }
+        ${
+          curTheme === HOME_ASSISTANT_THEME
+            ? html`
+                <ha-list-item-base>
+                  <span slot="headline"
+                    >${this.labels?.colors ?? "Custom colors"}</span
+                  >
+                  <div slot="end" class="color-pickers">
+                    <ha-input
+                      .value=${themeSettings?.primaryColor || DefaultPrimaryColor}
+                      type="color"
+                      .label=${this.labels?.primaryColor ?? "Primary color"}
+                      .name=${"primaryColor"}
+                      @change=${this._handleColorChange}
+                    ></ha-input>
+                    <ha-input
+                      .value=${themeSettings?.accentColor || DefaultAccentColor}
+                      type="color"
+                      .label=${this.labels?.accentColor ?? "Accent color"}
+                      .name=${"accentColor"}
+                      @change=${this._handleColorChange}
+                    ></ha-input>
+                  </div>
+                </ha-list-item-base>
+                ${
+                  themeSettings?.primaryColor || themeSettings?.accentColor
+                    ? html`
+                        <div class="reset-row">
+                          <ha-button
+                            appearance="plain"
+                            size="s"
+                            @click=${this._resetColors}
+                          >
+                            ${this.labels?.reset ?? "Reset"}
+                          </ha-button>
+                        </div>
+                      `
+                    : nothing
                }
-                orientation="horizontal"
-              >
-                <ha-radio-option value="auto">
-                  ${this.labels?.autoMode ?? "Auto"}
-                </ha-radio-option>
-                <ha-radio-option value="light">
-                  ${this.labels?.lightMode ?? "Light"}
-                </ha-radio-option>
-                <ha-radio-option value="dark">
-                  ${this.labels?.darkMode ?? "Dark"}
-                </ha-radio-option>
-              </ha-radio-group>
-              ${
-                curTheme === HOME_ASSISTANT_THEME
-                  ? html`<div class="color-pickers">
-                      <ha-input
-                        .value=${themeSettings?.primaryColor || DefaultPrimaryColor}
-                        type="color"
-                        .label=${this.labels?.primaryColor ?? "Primary color"}
-                        .name=${"primaryColor"}
-                        @change=${this._handleColorChange}
-                      ></ha-input>
-                      <ha-input
-                        .value=${themeSettings?.accentColor || DefaultAccentColor}
-                        type="color"
-                        .label=${this.labels?.accentColor ?? "Accent color"}
-                        .name=${"accentColor"}
-                        @change=${this._handleColorChange}
-                      ></ha-input>
-                      ${
-                        themeSettings?.primaryColor ||
-                        themeSettings?.accentColor
-                          ? html` <ha-button
-                              appearance="plain"
-                              size="s"
-                              @click=${this._resetColors}
-                            >
-                              ${this.labels?.reset ?? "Reset"}
-                            </ha-button>`
-                          : nothing
-                      }
-                    </div>`
-                  : nothing
-              }
-            </div>`
-          : nothing
-      }
+              `
+            : nothing
+        }
+      </ha-list-base>
    `;
  }

@@ -231,33 +256,36 @@ export class HaThemeSettings extends LitElement {
    a {
      color: var(--primary-color);
    }
-    .inputs {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      margin: 0 var(--ha-space-3);
+    ha-list-base {
+      --ha-row-item-padding-block: var(--ha-space-2);
    }
-    ha-radio-group {
-      display: flex;
-      justify-content: center;
-      margin-inline-end: var(--ha-space-3);
+    ha-theme-picker {
+      min-width: 150px;
    }
    .color-pickers {
      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      flex-grow: 1;
+      gap: var(--ha-space-2);
    }
-    ha-input {
-      min-width: 75px;
-      flex-grow: 1;
-      margin: 0 var(--ha-space-1);
+    .color-pickers ha-input {
+      min-width: 150px;
+      flex: 1;
    }
-
-    ha-theme-picker {
-      display: block;
+    :host([narrow]) ha-list-item-base::part(base) {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+    :host([narrow]) ha-list-item-base::part(end) {
      width: 100%;
    }
+    :host([narrow]) .color-pickers {
+      width: 100%;
+    }
+    .reset-row {
+      display: flex;
+      justify-content: flex-end;
+      padding-inline-end: var(--ha-space-4);
+      padding-bottom: var(--ha-space-4);
+    }
  `;
 }

@@ -25,6 +25,7 @@ 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";
@@ -160,6 +161,8 @@ export class HaMap extends ReactiveElement {

  private Leaflet?: LeafletModuleType;

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

  private _mapItems: (Marker | Circle)[] = [];
@@ -211,6 +214,7 @@ 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
@@ -308,6 +312,7 @@ 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;
@@ -322,11 +327,23 @@ export class HaMap extends ReactiveElement {
    }
    this._loading = true;
    try {
-      [this.leafletMap, this.Leaflet] = await setupLeafletMap(map, {
+      const setup = 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) {
@@ -891,9 +908,22 @@ export class HaMap extends ReactiveElement {
      cursor: -moz-grabbing;
      cursor: -webkit-grabbing;
    }
-    .leaflet-tile-pane {
+    /* Only the raster fallback is inverted for dark mode, the vector style
+       ships its own dark cartography. */
+    .leaflet-tile-pane .leaflet-tile {
      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;
@@ -7,6 +7,7 @@ import {
  mdiHome,
  mdiLabel,
  mdiMinusBox,
+  mdiSwapHorizontal,
  mdiTextureBox,
 } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
@@ -177,36 +178,51 @@ export class HaTargetPickerItemRow extends LitElement {
                  referrerpolicy="no-referrer"
                  src=${this._iconImg}
                />`
-              : 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
+              : 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
        }
      </div>

-      <span slot="headline">${(canMigrate && replacement?.name) || name}</span>
+      <span slot="headline"
+        >${
+          canMigrate
+            ? this.hass.localize(
+                "ui.components.target-picker.device_replaced_headline"
+              )
+            : name
+        }</span
+      >
      ${
        notFound || (context && !this.hideContext)
          ? html`<span slot="supporting-text"
              >${
                notFound
                  ? canMigrate
-                    ? this.hass.localize(
-                        "ui.components.target-picker.device_replaced",
-                        { count: replacement!.candidates.length }
-                      )
+                    ? 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.${this.type}_not_found`
                      )
@@ -256,7 +272,7 @@ export class HaTargetPickerItemRow extends LitElement {
                @click=${this._migrate}
              >
                ${this.hass.localize(
-                  "ui.components.target-picker.replace_device"
+                  "ui.components.target-picker.replace_update"
                )}
              </ha-button>
            `
@@ -548,75 +564,73 @@ export class HaTargetPickerItemRow extends LitElement {
        this.primaryEntitiesOnly
      );

+      let referencedAreas = entries.referenced_areas;
      const hiddenAreaIds: string[] = [];
      if (this.type === "floor" || this.type === "label") {
-        entries.referenced_areas = entries.referenced_areas.filter(
-          (area_id) => {
-            const area = this.hass.areas[area_id];
-            // Absent from the registry is not a filter decision: drop the id
-            // without marking it hidden, so entities targeted through their
-            // own area or label are not dropped along with it.
-            if (!area) {
-              return false;
-            }
-            if (
-              (this.type === "floor" || area.labels.includes(this.itemId)) &&
-              areaMeetsFilter(
-                area,
-                this.hass.devices,
-                this.hass.entities,
-                this.deviceFilter,
-                this.includeDomains,
-                this.includeDeviceClasses,
-                this.hass.states,
-                this.entityFilter,
-                !this.primaryEntitiesOnly
-              )
-            ) {
-              return true;
-            }
-
-            hiddenAreaIds.push(area_id);
+        referencedAreas = referencedAreas.filter((area_id) => {
+          const area = this.hass.areas[area_id];
+          // Absent from the registry is not a filter decision: drop the id
+          // without marking it hidden, so entities targeted through their
+          // own area or label are not dropped along with it.
+          if (!area) {
            return false;
          }
-        );
+          if (
+            (this.type === "floor" || area.labels.includes(this.itemId)) &&
+            areaMeetsFilter(
+              area,
+              this.hass.devices,
+              this.hass.entities,
+              this.deviceFilter,
+              this.includeDomains,
+              this.includeDeviceClasses,
+              this.hass.states,
+              this.entityFilter,
+              !this.primaryEntitiesOnly
+            )
+          ) {
+            return true;
+          }
+
+          hiddenAreaIds.push(area_id);
+          return false;
+        });
      }

+      let referencedDevices = entries.referenced_devices;
      const hiddenDeviceIds: string[] = [];
      if (
        this.type === "floor" ||
        this.type === "area" ||
        this.type === "label"
      ) {
-        entries.referenced_devices = entries.referenced_devices.filter(
-          (device_id) => {
-            const device = this.hass.devices[device_id];
-            if (!device) {
-              return false;
-            }
-            if (
-              !hiddenAreaIds.includes(device.area_id || "") &&
-              deviceMeetsFilter(
-                device,
-                this.hass.entities,
-                this.deviceFilter,
-                this.includeDomains,
-                this.includeDeviceClasses,
-                this.hass.states,
-                this.entityFilter,
-                !this.primaryEntitiesOnly
-              )
-            ) {
-              return true;
-            }
-
-            hiddenDeviceIds.push(device_id);
+        referencedDevices = referencedDevices.filter((device_id) => {
+          const device = this.hass.devices[device_id];
+          if (!device) {
            return false;
          }
-        );
+          if (
+            !hiddenAreaIds.includes(device.area_id || "") &&
+            deviceMeetsFilter(
+              device,
+              this.hass.entities,
+              this.deviceFilter,
+              this.includeDomains,
+              this.includeDeviceClasses,
+              this.hass.states,
+              this.entityFilter,
+              !this.primaryEntitiesOnly
+            )
+          ) {
+            return true;
+          }
+
+          hiddenDeviceIds.push(device_id);
+          return false;
+        });
      }

-      entries.referenced_entities = entries.referenced_entities.filter(
+      const referencedEntities = entries.referenced_entities.filter(
        (entity_id) => {
          const entity = this.hass.entities[entity_id];
          // Core can reference entities that are absent from the display
@@ -631,9 +645,9 @@ export class HaTargetPickerItemRow extends LitElement {
            (this.type === "area" && entity.area_id === this.itemId) ||
            (this.type === "floor" &&
              entity.area_id &&
-              entries.referenced_areas.includes(entity.area_id)) ||
+              referencedAreas.includes(entity.area_id)) ||
            (this.type === "label" && entity.labels.includes(this.itemId)) ||
-            entries.referenced_devices.includes(entity.device_id || "")
+            referencedDevices.includes(entity.device_id || "")
          ) {
            return entityRegMeetsFilter(
              entity,
@@ -648,7 +662,12 @@ export class HaTargetPickerItemRow extends LitElement {
        }
      );

-      this._entries = entries;
+      this._entries = {
+        ...entries,
+        referenced_areas: referencedAreas,
+        referenced_devices: referencedDevices,
+        referenced_entities: referencedEntities,
+      };
    } catch (e) {
      // eslint-disable-next-line no-console
      console.error("Failed to extract target", e);
@@ -480,6 +480,40 @@ 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
@@ -3,10 +3,16 @@ 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 {
@@ -102,15 +108,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; cloud_pipeline?: string }>(
-    "POST",
-    "cloud/login",
-    rest
-  );
+  hass.callApi<{ success: boolean }>("POST", "cloud/login", rest);

 export const cloudLogout = (hass: HomeAssistant) =>
  hass.callApi("POST", "cloud/logout");
@@ -130,6 +136,33 @@ 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,6 +25,7 @@ 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,26 +182,69 @@ export const deviceAutomationEditorMode = (
    : "unknown-device";
 };

-// 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 = (
+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[],
  a: DeviceAutomation,
  b: DeviceAutomation
 ) => {
-  if (typeof a !== typeof b) {
+  if (!a.entity_id && !b.entity_id) {
+    return true;
+  }
+  if (!a.entity_id || !b.entity_id) {
    return false;
  }
-  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]);
-    });
+  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
+    )
+  );
 };

 const compareEntityIdWithEntityRegId = (
@@ -1553,7 +1553,8 @@ export const formatConsumptionShort = (
  hass: HomeAssistant,
  consumption: number | null,
  unit: string,
-  targetUnit?: string
+  targetUnit?: string,
+  displayPrecision?: number
 ): string => {
  const units = ["Wh", "kWh", "MWh", "GWh", "TWh"];
  let pickedUnit = unit;
@@ -1583,10 +1584,19 @@ export const formatConsumptionShort = (
    pickedUnit = units[unitIndex];
  }
  return (
-    formatNumber(val, hass.locale, {
-      maximumFractionDigits:
-        Math.abs(val) < 10 ? 2 : Math.abs(val) < 100 ? 1 : 0,
-    }) +
+    formatNumber(
+      val,
+      hass.locale,
+      displayPrecision !== undefined && pickedUnit === unit
+        ? {
+            minimumFractionDigits: displayPrecision,
+            maximumFractionDigits: displayPrecision,
+          }
+        : {
+            maximumFractionDigits:
+              Math.abs(val) < 10 ? 2 : Math.abs(val) < 100 ? 1 : 0,
+          }
+    ) +
    " " +
    pickedUnit
  );
@@ -1909,20 +1919,13 @@ export const downloadEnergyData = (
  const device_consumption_water = energyData.prefs.device_consumption_water;
  const stats = energyData.state.stats;

-  const timeSet = new Set<number>();
-  Object.values(stats).forEach((stat) => {
-    stat.forEach((datapoint) => {
-      timeSet.add(datapoint.start);
-    });
-  });
-  const times = Array.from(timeSet).sort();
-
-  const headers =
-    "entity_id,type,unit," +
-    times.map((t) => new Date(t).toISOString()).join(",") +
-    "\n";
-  const csv: string[] = [];
-  csv[0] = headers;
+  interface CsvRow {
+    id: string;
+    type: string;
+    unit: string;
+    data: StatisticValue[];
+  }
+  const rows: CsvRow[] = [];

  const processCsvRow = function (
    id: string,
@@ -1930,20 +1933,7 @@ export const downloadEnergyData = (
    unit: string,
    data: StatisticValue[]
  ) {
-    let n = 0;
-    const row: string[] = [];
-    row.push(id);
-    row.push(type);
-    row.push(unit.normalize("NFKD"));
-    times.forEach((t) => {
-      if (n < data.length && data[n].start === t) {
-        row.push((data[n].change ?? "").toString());
-        n++;
-      } else {
-        row.push("");
-      }
-    });
-    csv.push(row.join(",") + "\n");
+    rows.push({ id, type, unit, data });
  };

  const processStat = function (stat: string, type: string, unit: string) {
@@ -2190,6 +2180,33 @@ export const downloadEnergyData = (
    );
  }

+  const timeSet = new Set<number>();
+  rows.forEach((row) => {
+    row.data.forEach((datapoint) => {
+      timeSet.add(datapoint.start);
+    });
+  });
+  const times = Array.from(timeSet).sort();
+
+  const csv: string[] = [
+    "entity_id,type,unit," +
+      times.map((t) => new Date(t).toISOString()).join(",") +
+      "\n",
+  ];
+  rows.forEach(({ id, type, unit, data }) => {
+    let n = 0;
+    const row: string[] = [id, type, unit.normalize("NFKD")];
+    times.forEach((t) => {
+      if (n < data.length && data[n].start === t) {
+        row.push((data[n].change ?? "").toString());
+        n++;
+      } else {
+        row.push("");
+      }
+    });
+    csv.push(row.join(",") + "\n");
+  });
+
  const blob = new Blob(csv, {
    type: "text/csv",
  });
@@ -1,71 +1,7 @@
 import type { LocalizeFunc } from "../../common/translations/localize";
-import { SENSOR_NUMERIC_DEVICE_CLASSES } from "../sensor_entity_constants";

 export const NO_DEVICE_CLASS = "none";

-// Mirrors core's `<Domain>DeviceClass` enums, until the backend exposes them.
-export const DOMAIN_DEVICE_CLASSES: Record<string, readonly 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"],
-  image_processing: ["alpr", "face", "ocr"],
-  infrared: ["emitter", "receiver"],
-  media_player: ["projector", "receiver", "speaker", "tv"],
-  number: SENSOR_NUMERIC_DEVICE_CLASSES,
-  sensor: [
-    ...SENSOR_NUMERIC_DEVICE_CLASSES,
-    "date",
-    "enum",
-    "timestamp",
-    "uptime",
-  ],
-  switch: ["outlet", "switch"],
-  update: ["firmware"],
-  valve: ["gas", "water"],
-};
-
 export const computeDeviceClassName = (
  localize: LocalizeFunc,
  domain: string,
@@ -50,9 +50,6 @@ export const DOMAIN_ATTRIBUTES_UNITS = {
    azimuth: "°",
    elevation: "°",
  },
-  vacuum: {
-    battery_level: "%",
-  },
  valve: {
    current_position: "%",
  },
@@ -1,6 +1,7 @@
 import { computeDomain } from "../../common/entity/compute_domain";
 import type { HomeAssistant } from "../../types";
-import { DOMAIN_DEVICE_CLASSES, NO_DEVICE_CLASS } from "./device_class";
+import { DOMAIN_DEVICE_CLASSES } from "../device_classes";
+import { NO_DEVICE_CLASS } from "./device_class";

 const SEPARATOR = "/";

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

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

 export const resolveMediaSource = (
-  hass: HomeAssistant,
+  hass: Pick<HomeAssistant, "callWS">,
  media_content_id: string
 ) =>
  hass.callWS<ResolvedMediaSource>({
@@ -15,6 +16,23 @@ 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
@@ -40,8 +40,7 @@ export const searchPlaces = (
      limit ? `&limit=${limit}` : ""
    }${addressdetails ? "&addressdetails=1" : ""}&accept-language=${
      hass.locale.language
-    }&[email protected]`,
-    { headers: { "User-Agent": `HomeAssistant/${hass.config.version}` } }
+    }&[email protected]`
  ).then((res) => {
    if (res.ok) {
      return res.json();
@@ -59,8 +58,7 @@ export const reverseGeocode = (
      location[1]
    }&accept-language=${hass.locale.language}&zoom=${
      zoom ?? 18
-    }&format=jsonv2&[email protected]`,
-    { headers: { "User-Agent": `HomeAssistant/${hass.config.version}` } }
+    }&format=jsonv2&[email protected]`
  ).then((res) => {
    if (res.ok) {
      return res.json();
@@ -160,15 +160,6 @@ export const getRecorderEntityOptions = (
    entity_id,
  });

-export const getStatisticIds = (
-  hass: Pick<HomeAssistant, "callWS">,
-  statistic_type?: "mean" | "sum"
-) =>
-  hass.callWS<StatisticsMetaData[]>({
-    type: "recorder/list_statistic_ids",
-    statistic_type,
-  });
-
 export const getStatisticMetadata = (
  hass: HomeAssistant,
  statistic_ids?: string[]
@@ -0,0 +1,21 @@
+import { shareInFlightRequest } from "../common/util/share-in-flight-request";
+import type { HomeAssistant } from "../types";
+import type { StatisticsMetaData } from "./recorder";
+
+type StatisticIdsType = "mean" | "sum";
+
+type StatisticIdsApi = Pick<HomeAssistant, "callWS">;
+
+export const getStatisticIds = (
+  hass: StatisticIdsApi,
+  statistic_type?: StatisticIdsType
+) =>
+  shareInFlightRequest(
+    hass.callWS,
+    `recorder/list_statistic_ids:${statistic_type ?? "all"}`,
+    () =>
+      hass.callWS<StatisticsMetaData[]>({
+        type: "recorder/list_statistic_ids",
+        statistic_type,
+      })
+  );
@@ -48,6 +48,7 @@ export type Selector =
  | DeviceSelector
  | FloorSelector
  | LegacyDeviceSelector
+  | DeviceClassSelector
  | DurationSelector
  | EntitySelector
  | EntityNameSelector
@@ -87,6 +88,20 @@ export type Selector =
  | UiTimeFormatSelector
  | BackupLocationSelector;

+type KeysOfUnion<T> = T extends T ? keyof T : never;
+export type SelectorType = KeysOfUnion<Selector>;
+
+type UnionMemberWithKey<U, K extends PropertyKey> = U extends unknown
+  ? K extends keyof U
+    ? U
+    : never
+  : never;
+
+export type SelectorForType<T extends SelectorType> = UnionMemberWithKey<
+  Selector,
+  T
+>;
+
 export interface ActionSelector {
  action: {
    optionsInSidebar?: boolean;
@@ -484,6 +499,13 @@ export interface SelectSelector {
  } | null;
 }

+export interface DeviceClassSelector {
+  device_class: {
+    domain: string;
+    multiple?: boolean;
+  } | null;
+}
+
 export interface SelectorSelector {
  selector: {} | null;
 }
@@ -14,6 +14,7 @@ import {
 import type { HaEntityPickerEntityFilterFunc } from "./entity/entity";
 import type { EntityComboBoxItem } from "./entity/entity_picker";
 import type { EntityRegistryDisplayEntry } from "./entity/entity_registry";
+import { shareInFlightRequest } from "../common/util/share-in-flight-request";

 export const TARGET_SEPARATOR = "________";

@@ -54,13 +55,18 @@ export const extractFromTarget = async (
  target: HassServiceTarget,
  expandGroup = false,
  primaryEntitiesOnly = true
-) =>
-  callWS<ExtractFromTargetResult>({
-    type: "extract_from_target",
+) => {
+  const request = {
+    type: "extract_from_target" as const,
    target,
    expand_group: expandGroup,
    primary_entities_only: primaryEntitiesOnly,
-  });
+  };
+
+  return shareInFlightRequest(callWS, JSON.stringify(request), () =>
+    callWS<ExtractFromTargetResult>(request)
+  );
+};

 export const getTargetEntityCount = (target?: HassServiceTarget): number => {
  const tempTarget = {
@@ -526,6 +526,16 @@ export const fetchZwaveNetworkStatus = (
  });
 };

+/** Node IDs of the nodes each node can reach directly, keyed by node ID. */
+export const fetchZwaveNetworkNeighbors = (
+  hass: HomeAssistant,
+  entry_id: string
+): Promise<Record<number, number[]>> =>
+  hass.callWS({
+    type: "zwave_js/network_neighbors",
+    entry_id,
+  });
+
 export const fetchZwaveDataCollectionStatus = (
  hass: HomeAssistant,
  entry_id: string
@@ -230,13 +230,13 @@ export class DialogForm
  ): Promise<void> {
    await this._afterFormRender();

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

    await this._waitForSelectorElements();

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

@@ -250,7 +250,12 @@ export class DialogForm
  ): Promise<void> {
    await this._afterFormRender();

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

@@ -116,10 +116,7 @@ export class HaMoreInfoViewVacuumSegmentMapping extends LitElement {
        ></ha-vacuum-segment-area-mapper>

        <div class="footer">
-          <ha-button
-            @click=${this._save}
-            .disabled=${!this._dirtyState?.isDirty || this._submitting}
-          >
+          <ha-button @click=${this._save} .disabled=${this._submitting}>
            ${this.hass.localize("ui.common.save")}
          </ha-button>
        </div>
@@ -1,9 +1,11 @@
+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 } from "lit";
+import type { CSSResultGroup, PropertyValues, TemplateResult } 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";
@@ -11,8 +13,16 @@ 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";
@@ -25,6 +35,8 @@ 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;
@@ -33,7 +45,10 @@ interface DetailsViewParams {
 interface DetailEntry {
  translationKey: LocalizeKeys;
  value: string;
+  displayValue?: TemplateResult;
  href?: string;
+  icon?: TemplateResult;
+  copyable?: boolean;
 }

@customElement("ha-more-info-details")
@@ -52,6 +67,17 @@ 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) {
@@ -93,12 +119,12 @@ class HaMoreInfoDetails extends LitElement {
      ? this.hass.localize(`component.${this.entry.platform}.title`) ||
        this.entry.platform
      : undefined;
-    const labelNames =
-      this.entry?.labels.map(
-        (labelId) =>
-          this._labels?.find((label) => label.label_id === labelId)?.name ??
-          labelId
-      ) ?? [];
+    const 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 contextEntries: DetailEntry[] = [];

    if (floor && floorName) {
@@ -106,6 +132,7 @@ 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) {
@@ -113,6 +140,9 @@ 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 (device && deviceName) {
@@ -120,6 +150,7 @@ 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) {
@@ -129,31 +160,63 @@ 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
+          )}
+        />`,
      });
    }

-    const entityEntries: DetailEntry[] = [
+    contextEntries.push(
      {
        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 = {
-      ...(contextEntries.length
-        ? {
-            context: {
-              ...(floorName ? { floor: floorName } : {}),
-              ...(areaName ? { area: areaName } : {}),
-              ...(deviceName ? { device: deviceName } : {}),
-              ...(integrationName ? { integration: integrationName } : {}),
-            },
-          }
-        : {}),
-      entity: {
+      context: {
+        ...(floorName ? { floor: floorName } : {}),
+        ...(areaName ? { area: areaName } : {}),
+        ...(deviceName ? { device: deviceName } : {}),
+        ...(integrationName ? { integration: integrationName } : {}),
        entity_id: this.params.entityId,
        labels: labelNames,
      },
@@ -171,17 +234,9 @@ class HaMoreInfoDetails extends LitElement {
                in-dialog
              ></ha-yaml-editor>`
            : html`
-                ${
-                  contextEntries.length
-                    ? html`<ha-grouped-list
-                        .header=${this.hass.localize(
-                          "ui.dialogs.more_info_control.context"
-                        )}
-                      >
-                        ${this._renderEntries(contextEntries)}
-                      </ha-grouped-list>`
-                    : nothing
-                }
+                <ha-grouped-list>
+                  ${this._renderEntries(contextEntries)}
+                </ha-grouped-list>

                <ha-grouped-list
                  .header=${this.hass.localize(
@@ -191,14 +246,6 @@ 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"
@@ -284,17 +331,72 @@ class HaMoreInfoDetails extends LitElement {
  }

  private _renderEntries(entries: DetailEntry[]) {
-    return entries.map(
-      (entry) => html`
-        <ha-list-item-value .label=${this.hass.localize(entry.translationKey)}>
-          ${
-            entry.href
-              ? html`<a href=${entry.href}>${entry.value}</a>`
-              : entry.value
-          }
-        </ha-list-item-value>
-      `
-    );
+    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,
+    });
  }

  private _renderAttributes(attributes: { name: string; label: string }[]) {
@@ -358,11 +460,63 @@ class HaMoreInfoDetails extends LitElement {
    }

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

-    a {
-      color: var(--primary-color);
+    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);
    }

    .empty {
@@ -28,6 +28,7 @@ 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";
@@ -47,7 +48,10 @@ import {
  replaceCurrentUrl,
  updateHistoryState,
 } from "../../common/navigate";
-import { createMoreInfoUrl } from "../../common/url/more-info-query-params";
+import {
+  createMoreInfoUrl,
+  decodeMoreInfoUrl,
+} 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";
@@ -231,7 +235,13 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
  }

  private _dialogClosed() {
-    if (this._returnUrl) {
+    // 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
+    ) {
      replaceCurrentUrl(this._returnUrl);
    }
    this._entityId = undefined;
@@ -235,7 +235,7 @@ class DialogShortcuts extends DialogMixin(LitElement) {

        <ha-alert slot="footer">
          ${this._i18n.localize("ui.dialogs.shortcuts.enable_shortcuts_hint", {
-            user_profile: html`<a href="/profile/general#shortcuts"
+            user_profile: html`<a href="/profile/browser#shortcuts"
              >${this._i18n.localize(
                "ui.dialogs.shortcuts.enable_shortcuts_hint_user_profile"
              )}</a
@@ -24,6 +24,8 @@ 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;
 }

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

    if (this._currentPage === newPage) {
-      if (this.lastChild) {
-        this.updatePageEl(this.lastChild, changedProps);
+      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;
      }
-      return;
    }

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

-    if (routerOptions.cacheAll || routeOptions.cache) {
+    if (
+      (routerOptions.cacheAll || routeOptions.cache) &&
+      !routeOptions.itemId
+    ) {
      this._cache[page] = panelEl;
    }
  }
@@ -1,5 +1,9 @@
 import type { LitElement, PropertyValues } from "lit";
-import { isNavigationClick } from "../common/dom/is-navigation-click";
+import type { UnsavedChangesGuard } from "../common/navigate";
+import {
+  registerUnsavedChangesGuard,
+  unregisterUnsavedChangesGuard,
+} from "../common/navigate";
 import type { Constructor } from "../types";

 export const PreventUnsavedMixin = <T extends Constructor<LitElement>>(
@@ -9,45 +13,34 @@ export const PreventUnsavedMixin = <T extends Constructor<LitElement>>(
    /** Provided by `DirtyStateProviderMixin`. */
    declare isDirtyState: boolean;

-    private _handleClick = async (e: MouseEvent) => {
-      // get the right target, otherwise the composedPath would return <home-assistant> in the new event
-      const target = e.composedPath()[0];
-      if (!isNavigationClick(e)) {
-        return;
-      }
-
-      const result = await this.promptDiscardChanges();
-      if (result) {
-        this._removeListeners();
-        if (target) {
-          const newEvent = new MouseEvent(e.type, e);
-          target.dispatchEvent(newEvent);
-        }
-      }
-    };
-
    private _handleUnload = (e: BeforeUnloadEvent) => e.preventDefault();

-    private _removeListeners() {
-      window.removeEventListener("click", this._handleClick, true);
-      window.removeEventListener("beforeunload", this._handleUnload);
+    private _unsavedChangesGuard: UnsavedChangesGuard = {
+      isDirty: () => this.isDirtyState,
+      prompt: () => this.promptDiscardChanges(),
+    };
+
+    public connectedCallback(): void {
+      super.connectedCallback();
+
+      registerUnsavedChangesGuard(this._unsavedChangesGuard);
    }

    protected willUpdate(changedProperties: PropertyValues<this>): void {
      super.willUpdate(changedProperties);

      if (this.isDirtyState && this.isConnected) {
-        window.addEventListener("click", this._handleClick, true);
        window.addEventListener("beforeunload", this._handleUnload);
      } else {
-        this._removeListeners();
+        window.removeEventListener("beforeunload", this._handleUnload);
      }
    }

    public disconnectedCallback(): void {
      super.disconnectedCallback();

-      this._removeListeners();
+      unregisterUnsavedChangesGuard(this._unsavedChangesGuard);
+      window.removeEventListener("beforeunload", this._handleUnload);
    }

    protected async promptDiscardChanges(): Promise<boolean> {
@@ -16,6 +16,7 @@ import {
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import memoize from "memoize-one";
 import { firstWeekdayIndex } from "../../common/datetime/first_weekday";
 import { resolveTimeZone } from "../../common/datetime/resolve-time-zone";
@@ -77,6 +78,10 @@ export class HAFullCalendar extends LitElement {

  @property({ attribute: "add-fab", type: Boolean }) public addFab = false;

+  @property({ attribute: "add-fab-size" }) public addFabSize = "large";
+
+  @property({ attribute: "add-fab-style" }) public addFabStyle = "on_top";
+
  @property({ attribute: false }) public events: CalendarEvent[] = [];

  @property({ attribute: false }) public calendars: CalendarData[] = [];
@@ -172,13 +177,34 @@ export class HAFullCalendar extends LitElement {
                          </ha-icon-button-next>
                        </div>
                        <h1>${this.calendar.view.title}</h1>
-                        <ha-button-toggle-group
-                          .buttons=${viewToggleButtons}
-                          .active=${this._activeView}
-                          size="s"
-                          no-wrap
-                          @value-changed=${this._handleView}
-                        ></ha-button-toggle-group>
+                        <div>
+                          <ha-button-toggle-group
+                            .buttons=${viewToggleButtons}
+                            .active=${this._activeView}
+                            size="s"
+                            no-wrap
+                            @value-changed=${this._handleView}
+                          ></ha-button-toggle-group>
+                          ${
+                            this.addFab &&
+                            this._hasMutableCalendars &&
+                            this.addFabStyle === "header"
+                              ? html`<ha-button
+                                  size="s"
+                                  class="fab-header"
+                                  aria-label=${this.hass.localize(
+                                    "ui.components.calendar.event.add"
+                                  )}
+                                  @click=${this._createEvent}
+                                >
+                                  <ha-svg-icon
+                                    slot=""
+                                    .path=${mdiPlus}
+                                  ></ha-svg-icon>
+                                </ha-button>`
+                              : nothing
+                          }
+                        </div>
                      `
                    : html`
                        <div class="controls">
@@ -208,13 +234,34 @@ export class HAFullCalendar extends LitElement {
                              "ui.components.calendar.today"
                            )}</ha-button
                          >
-                          <ha-button-toggle-group
-                            .buttons=${viewToggleButtons}
-                            .active=${this._activeView}
-                            size="s"
-                            no-wrap
-                            @value-changed=${this._handleView}
-                          ></ha-button-toggle-group>
+                          <div>
+                            <ha-button-toggle-group
+                              .buttons=${viewToggleButtons}
+                              .active=${this._activeView}
+                              size="s"
+                              no-wrap
+                              @value-changed=${this._handleView}
+                            ></ha-button-toggle-group>
+                            ${
+                              this.addFab &&
+                              this._hasMutableCalendars &&
+                              this.addFabStyle === "header"
+                                ? html`<ha-button
+                                    size="s"
+                                    class="fab-header"
+                                    aria-label=${this.hass.localize(
+                                      "ui.components.calendar.event.add"
+                                    )}
+                                    @click=${this._createEvent}
+                                  >
+                                    <ha-svg-icon
+                                      slot=""
+                                      .path=${mdiPlus}
+                                    ></ha-svg-icon>
+                                  </ha-button>`
+                                : nothing
+                            }
+                          </div>
                        </div>
                      `
                }
@@ -225,8 +272,15 @@ export class HAFullCalendar extends LitElement {

      <div id="calendar"></div>
      ${
-        this.addFab && this._hasMutableCalendars
-          ? html`<ha-button size="l" slot="fab" @click=${this._createEvent}>
+        this.addFab &&
+        this._hasMutableCalendars &&
+        this.addFabStyle !== "header"
+          ? html`<ha-button
+              size=${this.addFabSize.charAt(0)}
+              class=${classMap({ below: this.addFabStyle === "below" })}
+              slot="fab"
+              @click=${this._createEvent}
+            >
              <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
              ${this.hass.localize("ui.components.calendar.event.add")}
            </ha-button>`
@@ -574,6 +628,17 @@ export class HAFullCalendar extends LitElement {
          --ha-button-box-shadow: var(--ha-box-shadow-l);
        }

+        ha-button.below[slot="fab"] {
+          position: relative;
+          margin-inline-start: auto;
+          padding-top: var(--ha-space-2);
+          left: 0;
+          right: 0;
+          bottom: 0;
+          top: 0;
+          --ha-button-box-shadow: none;
+        }
+
        #calendar {
          flex-grow: 1;
          background-color: var(
@@ -3,6 +3,10 @@ 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";
@@ -107,9 +111,8 @@ 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 });
  }
@@ -14,6 +14,8 @@ import type {
 } from "../../../../../data/device/device_automation";
 import {
  deviceAutomationEditorMode,
+  fetchReplacementDevices,
+  fetchDeviceActions,
  deviceAutomationsEqual,
  fetchDeviceActionCapabilities,
  localizeExtraFieldsComputeHelperCallback,
@@ -40,6 +42,8 @@ export class HaDeviceAction extends LitElement {

  @state() private _compositeSplits?: DeviceCompositeSplits;

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

  @state()
@@ -95,13 +99,27 @@ 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 {
-      this._compositeSplits = await fetchDeviceCompositeSplits(this.hass);
+      // 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;
    } catch (_err) {
      this._compositeSplits = {};
    } finally {
@@ -115,6 +133,7 @@ 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}
@@ -156,6 +175,19 @@ 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) {
@@ -185,6 +217,15 @@ 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", {
@@ -1,4 +1,5 @@
 import "@home-assistant/webawesome/dist/components/tree-item/tree-item";
+import type WaTreeItem from "@home-assistant/webawesome/dist/components/tree-item/tree-item";
 import "@home-assistant/webawesome/dist/components/tree/tree";
 import type { WaSelectionChangeEvent } from "@home-assistant/webawesome/dist/events/selection-change";
 import { consume, type ContextType } from "@lit/context";
@@ -360,6 +361,7 @@ export default class HaAutomationAddFromTarget extends LitElement {
                  ? html`<ha-list-base>${floorAreas}</ha-list-base>`
                  : html`<wa-tree
                      @wa-selection-change=${this._handleSelectionChange}
+                      @dblclick=${this._handleDoubleClick}
                      >${floorAreas}</wa-tree
                    >`
              }`
@@ -1444,6 +1446,26 @@ export default class HaAutomationAddFromTarget extends LitElement {
    this._toggleItem(targetId, false);
  }

+  private _handleDoubleClick(ev: MouseEvent) {
+    // the expand button and non-selectable items already toggle on single click
+    if (
+      ev
+        .composedPath()
+        .some((el) => (el as HTMLElement).classList?.contains("expand-button"))
+    ) {
+      return;
+    }
+    const item = (ev.target as HTMLElement).closest<
+      WaTreeItem & { target: string }
+    >("wa-tree-item");
+    if (!item || item.isLeaf || item.preventSelection) {
+      return;
+    }
+    // avoid leaving the label text selected by the double click
+    window.getSelection()?.removeAllRanges();
+    this._toggleItem(item.target, !item.expanded);
+  }
+
  private async _loadConfigEntries() {
    const configEntries = await getConfigEntries(this.hass);
    this._configEntryLookup = Object.fromEntries(
@@ -7,7 +7,11 @@ 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 { expandConditionWithShorthand } from "../../../../data/automation";
+import {
+  CONDITION_ROW_CONFIG_KEYS,
+  expandConditionWithShorthand,
+  pickRowConfig,
+} from "../../../../data/automation";
 import type { ConditionDescription } from "../../../../data/condition";
 import { COLLAPSIBLE_CONDITION_ELEMENTS } from "../../../../data/condition";
 import type { HomeAssistant } from "../../../../types";
@@ -125,9 +129,8 @@ 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 });
  }
@@ -14,6 +14,8 @@ import type {
 } from "../../../../../data/device/device_automation";
 import {
  deviceAutomationEditorMode,
+  fetchReplacementDevices,
+  fetchDeviceConditions,
  deviceAutomationsEqual,
  fetchDeviceConditionCapabilities,
  localizeExtraFieldsComputeHelperCallback,
@@ -40,6 +42,8 @@ export class HaDeviceCondition extends LitElement {

  @state() private _compositeSplits?: DeviceCompositeSplits;

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

  @state()
@@ -96,13 +100,27 @@ 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 {
-      this._compositeSplits = await fetchDeviceCompositeSplits(this.hass);
+      // 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;
    } catch (_err) {
      this._compositeSplits = {};
    } finally {
@@ -116,6 +134,7 @@ 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}
@@ -157,6 +176,19 @@ 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) {
@@ -187,6 +219,15 @@ 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", {
@@ -150,11 +150,6 @@ export class HaAutomationEditor extends AutomationScriptEditorMixin<AutomationCo
    return super.isDirtyState || !!this.yamlErrors;
  }

-  protected override resetEditorState() {
-    super.resetEditorState();
-    this._undoRedoController.reset();
-  }
-
  protected willUpdate(changedProps: PropertyValues<this>) {
    super.willUpdate(changedProps);

@@ -662,9 +657,6 @@ export class HaAutomationEditor extends AutomationScriptEditorMixin<AutomationCo
      );

    const oldAutomationId = changedProps.get("automationId");
-    this.resetOnItemSwitch(oldAutomationId, this.automationId);
-    this.resetOnItemSwitch(changedProps.get("entityId"), this.entityId);
-
    if (
      changedProps.has("automationId") &&
      this.automationId &&
@@ -712,11 +704,7 @@ export class HaAutomationEditor extends AutomationScriptEditorMixin<AutomationCo
    }

    if (changedProps.has("entityId") && this.entityId) {
-      const generation = ++this.loadGeneration;
      getAutomationStateConfig(this.hass, this.entityId).then((c) => {
-        if (generation !== this.loadGeneration) {
-          return;
-        }
        this.config = normalizeAutomationConfig(c.config);
        this._initDirtyTracking(
          { type: "deep" },
@@ -908,10 +896,15 @@ export class HaAutomationEditor extends AutomationScriptEditorMixin<AutomationCo
            return;
          }

+          this.yamlErrors = undefined;
          resolve(true);
        },
        onClose: () => resolve(false),
-        onDiscard: () => resolve(true),
+        onDiscard: () => {
+          this.yamlErrors = undefined;
+          this._markDirtyStateClean();
+          resolve(true);
+        },
        entityRegistryUpdate: this.entityRegistryUpdate,
        entityRegistryEntry: this.registryEntry,
        title: this.hass.localize(
@@ -931,7 +924,6 @@ export class HaAutomationEditor extends AutomationScriptEditorMixin<AutomationCo

  private async _takeControl() {
    const config = this.config as BlueprintAutomationConfig;
-    const generation = this.loadGeneration;

    try {
      const result = await substituteBlueprint(
@@ -940,9 +932,6 @@ export class HaAutomationEditor extends AutomationScriptEditorMixin<AutomationCo
        config.use_blueprint.path,
        config.use_blueprint.input || {}
      );
-      if (generation !== this.loadGeneration) {
-        return;
-      }

      const newConfig = {
        ...normalizeAutomationConfig(result.substituted_config),
@@ -1066,7 +1055,6 @@ export class HaAutomationEditor extends AutomationScriptEditorMixin<AutomationCo

    await this._saveAutomation(id);
    if (!this.automationId) {
-      this.justSavedId = id;
      navigate(`/config/automation/edit/${id}`, { replace: true });
    }
  }
@@ -1076,8 +1064,7 @@ export class HaAutomationEditor extends AutomationScriptEditorMixin<AutomationCo
    this.validationErrors = undefined;

    let entityRegPromise: Promise<EntityRegistryEntry> | undefined;
-    const entityRegistryUpdate = this.entityRegistryUpdate;
-    if (entityRegistryUpdate !== undefined && !this.currentEntityId) {
+    if (this.entityRegistryUpdate !== undefined && !this.currentEntityId) {
      this._newAutomationId = id;
      entityRegPromise = new Promise<EntityRegistryEntry>((resolve) => {
        this.entityRegCreated = resolve;
@@ -1087,7 +1074,7 @@ export class HaAutomationEditor extends AutomationScriptEditorMixin<AutomationCo
    try {
      await saveAutomationConfig(this.hass, id, this.config!);

-      if (entityRegistryUpdate !== undefined) {
+      if (this.entityRegistryUpdate !== undefined) {
        let entityId = this.currentEntityId;

        // wait for automation to appear in entity registry when creating a new automation
@@ -1122,10 +1109,10 @@ export class HaAutomationEditor extends AutomationScriptEditorMixin<AutomationCo
        if (entityId) {
          await updateEntityRegistryEntry(this.hass, entityId, {
            categories: {
-              automation: entityRegistryUpdate.category || null,
+              automation: this.entityRegistryUpdate.category || null,
            },
-            labels: entityRegistryUpdate.labels || [],
-            area_id: entityRegistryUpdate.area || null,
+            labels: this.entityRegistryUpdate.labels || [],
+            area_id: this.entityRegistryUpdate.area || null,
          });
        }
      }
@@ -155,16 +155,6 @@ export const AutomationScriptEditorMixin = <TConfig extends BaseEditorConfig>(
      value: PromiseLike<EntityRegistryEntry> | EntityRegistryEntry
    ) => void;

-    /**
-     * Id of an item that was just saved from the "new" editor. The follow-up
-     * navigation from edit/new to edit/<id> reuses this element and must not
-     * reset the editor state.
-     */
-    protected justSavedId?: string;
-
-    /** Bumped when the edited item changes so stale item loads are ignored. */
-    protected loadGeneration = 0;
-
    private _relatedContextAreaId?: string;

    protected willUpdate(changedProps: PropertyValues): void {
@@ -283,54 +273,12 @@ export const AutomationScriptEditorMixin = <TConfig extends BaseEditorConfig>(
      return Promise.resolve(true);
    }

-    /**
-     * Reset per-item state when the edited item changes while this element is
-     * reused (same route page, different id), emulating a freshly opened
-     * editor. `saving` and `entityRegCreated` are deliberately absent: they
-     * are owned by an in-flight save.
-     */
-    protected resetEditorState() {
-      this.loadGeneration++;
-      this.config = undefined;
-      this.mode = "gui";
-      this.readOnly = false;
-      this.errors = undefined;
-      this.yamlErrors = undefined;
-      this.validationErrors = undefined;
-      this.blueprintConfig = undefined;
-      this.deprecatedConfigMigrated = false;
-      this.entityRegistryUpdate = undefined;
-      this.currentEntityId = undefined;
-      this._initDirtyTracking({ type: "deep" });
-    }
-
-    /**
-     * Invoke from `updated()` with a changed id property's old and new value.
-     * Resets the editor state on a switch to a different item, except when
-     * the old value is `undefined` (the first assignment on a fresh element)
-     * or the id was just assigned by saving a new item.
-     */
-    protected resetOnItemSwitch(
-      oldId: string | null | undefined,
-      newId: string | null
-    ) {
-      if (oldId === undefined || oldId === newId) {
-        return;
-      }
-      if (newId && newId === this.justSavedId) {
-        this.justSavedId = undefined;
-      } else {
-        this.resetEditorState();
-      }
-    }
-
    protected async loadConfig(id: string) {
      const hooks = this.domainHooks;
      const domain = hooks.domain;
-      const generation = ++this.loadGeneration;
      try {
        const config = await hooks.fetchFileConfig(this.hass, id);
-        if (generation !== this.loadGeneration) {
+        if (!this.isConnected) {
          return;
        }
        this.readOnly = false;
@@ -349,7 +297,7 @@ export const AutomationScriptEditorMixin = <TConfig extends BaseEditorConfig>(
        );
        hooks.checkValidation();
      } catch (err: any) {
-        if (generation !== this.loadGeneration) {
+        if (!this.isConnected) {
          return;
        }
        if (err.status_code !== 404) {
@@ -47,9 +47,11 @@ class HaConfigAutomation extends HassRouterPage {
      },
      edit: {
        tag: "ha-automation-editor",
+        itemId: true,
      },
      show: {
        tag: "ha-automation-editor",
+        itemId: true,
      },
      trace: {
        tag: "ha-automation-trace",
@@ -7,6 +7,7 @@ import {
  mdiFormatListBulleted,
  mdiMenuDown,
  mdiShape,
+  mdiSwapHorizontal,
 } from "@mdi/js";
 import type { HassServiceTarget } from "home-assistant-js-websocket";
 import {
@@ -321,14 +322,25 @@ 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="target">
-          <ha-svg-icon .path=${mdiFormatListBulleted}></ha-svg-icon>
+        <button
+          slot="trigger"
+          class=${classMap({ target: true, warning: hasMissingTarget })}
+        >
+          <ha-svg-icon
+            .path=${hasMissingTarget ? mdiAlert : mdiFormatListBulleted}
+          ></ha-svg-icon>
          <div class="label">
            ${this._i18n.localize(
              "ui.panel.config.automation.editor.target_summary.targets",
@@ -467,9 +479,15 @@ export class HaAutomationRowTargets extends LitElement {
        warning = true;
        badgeTargetId = undefined;
        badgeTargetType = undefined;
-        if (targetType === "device" && this._compositeSplits?.[targetId]) {
+        if (
+          targetType === "device" &&
+          this._compositeSplits?.[targetId]?.split_ids.some(
+            (id) => id in this._registries.devices
+          )
+        ) {
          // 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"
          );
@@ -686,6 +704,9 @@ 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,7 +8,11 @@ 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 { migrateAutomationTrigger } from "../../../../data/automation";
+import {
+  TRIGGER_ROW_CONFIG_KEYS,
+  migrateAutomationTrigger,
+  pickRowConfig,
+} from "../../../../data/automation";
 import type { TriggerDescription } from "../../../../data/trigger";
 import { isTriggerList } from "../../../../data/trigger";
 import { haStyle } from "../../../../resources/styles";
@@ -144,9 +148,8 @@ 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 });
  }
@@ -16,6 +16,8 @@ import type {
 } from "../../../../../data/device/device_automation";
 import {
  deviceAutomationEditorMode,
+  fetchReplacementDevices,
+  fetchDeviceTriggers,
  deviceAutomationsEqual,
  fetchDeviceTriggerCapabilities,
  localizeExtraFieldsComputeHelperCallback,
@@ -42,6 +44,8 @@ export class HaDeviceTrigger extends LitElement {

  @state() private _compositeSplits?: DeviceCompositeSplits;

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

  @state()
@@ -100,13 +104,27 @@ 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 {
-      this._compositeSplits = await fetchDeviceCompositeSplits(this.hass);
+      // 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;
    } catch (_err) {
      this._compositeSplits = {};
    } finally {
@@ -120,6 +138,7 @@ 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}
@@ -161,6 +180,19 @@ 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) {
@@ -208,6 +240,15 @@ 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", {
@@ -225,9 +266,6 @@ export class HaDeviceTrigger extends LitElement {
    ) {
      trigger = this._origTrigger;
    }
-    if (this.trigger.id) {
-      trigger.id = this.trigger.id;
-    }
    fireEvent(this, "value-changed", { value: trigger });
  }

@@ -9,6 +9,7 @@ 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";
@@ -27,15 +28,11 @@ 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 {
@@ -57,7 +57,7 @@ export class CloudAccountOverview extends LitElement {

  private _renderTopCard(): TemplateResult {
    return html`
-      <ha-card outlined>
+      <ha-card outlined class="summary-card">
        <div class="card-content">
          <div
            class="thank-you-header"
@@ -121,8 +121,8 @@ export class CloudAccountOverview extends LitElement {
          <p class="muted">
            ${this.hass.localize("ui.panel.config.cloud.account.funding_note")}
          </p>
-          ${this._renderSubscriptionState()}
        </div>
+        ${this._renderSubscriptionState()}
      </ha-card>
    `;
  }
@@ -132,6 +132,7 @@ export class CloudAccountOverview extends LitElement {
      case "trial":
        return html`
          <ha-alert
+            class="subscription-alert"
            alert-type="warning"
            .title=${this.hass.localize(
              "ui.panel.config.cloud.account.overview.trial_title"
@@ -156,6 +157,7 @@ export class CloudAccountOverview extends LitElement {
      case "canceled":
        return html`
          <ha-alert
+            class="subscription-alert"
            alert-type="warning"
            .title=${this.hass.localize(
              "ui.panel.config.cloud.account.overview.canceled_title"
@@ -181,6 +183,7 @@ export class CloudAccountOverview extends LitElement {
      case "expired":
        return html`
          <ha-alert
+            class="subscription-alert"
            alert-type="error"
            .title=${this.hass.localize(
              "ui.panel.config.cloud.account.overview.expired_title"
@@ -636,11 +639,15 @@ export class CloudAccountOverview extends LitElement {
          width: auto;
          color: var(--primary-text-color);
        }
-        ha-alert {
-          display: block;
-          margin-top: var(--ha-space-3);
+        /* Prevent the embedded .subscription-alert ha-alert from bleeding outside the card */
+        .summary-card {
+          overflow: hidden;
        }
-        ha-alert ha-button[slot="action"] {
+        .subscription-alert {
+          display: block;
+          --ha-alert-padding: var(--ha-space-3);
+        }
+        .subscription-alert ha-button[slot="action"] {
          width: max-content;
          white-space: nowrap;
        }
@@ -21,14 +21,10 @@ import {
  completeCloudOnboarding,
  fetchCloudSubscriptionInfo,
  ONBOARDING_ITEMS,
-  removeCloudData,
 } from "../../../../data/cloud";
 import type { Webhook } from "../../../../data/webhook";
 import { fetchWebhooks } from "../../../../data/webhook";
-import {
-  showAlertDialog,
-  showConfirmationDialog,
-} from "../../../../dialogs/generic/show-dialog-box";
+import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
 import "../../../../layouts/hass-subpage";
 import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../../resources/styles";
@@ -41,6 +37,7 @@ 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) {
@@ -297,33 +294,7 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
  }

  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 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");
-    }
+    await confirmDeleteCloudData(this, this.hass, { signOutFirst: true });
  }

  private async _downloadSupportPackage() {
@@ -0,0 +1,63 @@
+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;
+  }
+}
@@ -0,0 +1,24 @@
+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;
+  }
+`;
@@ -0,0 +1,48 @@
+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,4 +169,8 @@ 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"
+        back-path="/config/cloud/login"
        .header=${this.hass.localize(
          "ui.panel.config.cloud.forgot_password.title"
        )}
@@ -1,12 +1,14 @@
 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 "./login/cloud-login-panel";
+import "./start/cloud-start";

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

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

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

  protected routerOptions: RouterOptions = {
-    defaultPage: "login",
+    defaultPage: "start",
    showLoading: true,
    initialLoad: () => this._cloudStatusLoaded,
    // Guard the different pages based on if we're logged in.
@@ -45,14 +52,30 @@ class HaConfigCloud extends HassRouterPage {
        if (!LOGGED_IN_URLS.some((url) => url === page)) {
          return "account";
        }
-      } else if (!NOT_LOGGED_IN_URLS.some((url) => url === page)) {
-        return "login";
+        return undefined;
      }
+
+      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",
@@ -96,6 +119,10 @@ class HaConfigCloud extends HassRouterPage {

  @state() private _loginEmail = "";

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

  private _cloudStatusLoaded = new Promise<void>((resolve) => {
@@ -122,6 +149,14 @@ 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) {
@@ -132,9 +167,27 @@ 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,28 +1,14 @@
-import { mdiDeleteForever, mdiDotsVertical, mdiDownload } from "@mdi/js";
 import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } 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 "../../ha-config-section";
-import { showSupportPackageDialog } from "../account/show-dialog-cloud-support-package";
+import { cloudSignedOutStyle } from "../cloud-signed-out-style";
+import { cloudSubpageStyle } from "../account/cloud-subpage-style";
 import "./cloud-login";
 import type { CloudLogin } from "./cloud-login";

@@ -30,212 +16,88 @@ 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;
+  @query("cloud-login") private _cloudLoginElement?: CloudLogin;
+
+  protected firstUpdated(): void {
+    this._focusEmail();
+  }

  protected render(): TemplateResult {
    return html`
      <hass-subpage
        .hass=${this.hass}
        .narrow=${this.narrow}
-        back-path="/config"
-        header="Home Assistant Cloud"
+        back-path="/config/cloud/start"
+        .header=${this.hass.localize("ui.panel.config.cloud.login.sign_in")}
      >
-        <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"
-            )}
-            <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"
+          ${
+            this.flashMessage
+              ? html`<ha-alert
+                  dismissable
+                  @alert-dismissed-clicked=${this._dismissFlash}
                >
-                  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>
+                  ${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"
+            )}
+            check-connection
+            @cloud-forgot-password=${this._handleForgotPassword}
+          ></cloud-login>
        </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 ?? "",
+      value: this._cloudLoginElement?.emailField?.value ?? this.email ?? "",
    });
    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 {
-          padding-bottom: 24px;
+          gap: var(--ha-space-4);
        }
-        [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;
+        ha-alert,
+        cloud-login {
+          display: block;
+          width: 100%;
+          max-width: 600px;
+          margin-inline: auto;
        }
      `,
    ];
@@ -9,14 +9,12 @@ 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";
@@ -37,6 +35,8 @@ 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,21 +50,13 @@ export class CloudLogin extends LitElement {
      return this._renderLoginForm();
    }

-    return html`
-      <ha-card
-        outlined
-        .header=${this.localize(
-          `ui.panel.${this.translationKeyPanel}.login.sign_in`
-        )}
-      >
-        ${this._renderLoginForm()}
-      </ha-card>
-    `;
+    return html`<ha-card outlined>${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>`
@@ -219,28 +211,12 @@ export class CloudLogin extends LitElement {

    try {
      if (this.hass) {
-        const result = await cloudLogin({
+        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({
@@ -317,9 +293,6 @@ export class CloudLogin extends LitElement {
        ha-card {
          overflow: hidden;
        }
-        ha-card .card-header {
-          margin-bottom: -8px;
-        }
        .card-actions {
          display: flex;
          justify-content: space-between;
@@ -329,6 +302,11 @@ 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);
+        }
      `,
    ];
  }
@@ -1,212 +1,377 @@
-import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { mdiEmailCheckOutline } from "@mdi/js";
+import type { UnsubscribeFunc } from "home-assistant-js-websocket";
+import type { PropertyValues, TemplateResult } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { navigate } from "../../../../common/navigate";
 import "../../../../components/buttons/ha-progress-button";
 import "../../../../components/ha-alert";
+import "../../../../components/ha-button";
 import "../../../../components/ha-card";
+import "../../../../components/ha-spinner";
+import "../../../../components/ha-svg-icon";
 import "../../../../components/input/ha-input";
 import type { HaInput } from "../../../../components/input/ha-input";
-import { cloudRegister, cloudResendVerification } from "../../../../data/cloud";
+import type { CloudAutoLogin, CloudStatus } from "../../../../data/cloud";
+import {
+  attemptCloudAutoLoginNow,
+  cloudRegisterAutoLogin,
+  resendCloudAutoLoginConfirm,
+  subscribeCloudEvents,
+} from "../../../../data/cloud";
 import "../../../../layouts/hass-subpage";
 import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
-import "../../ha-config-section";
+import { showToast } from "../../../../util/toast";
+import "../cloud-signed-out-menu";
+import { cloudSignedOutStyle } from "../cloud-signed-out-style";
+import { cloudSubpageStyle } from "../account/cloud-subpage-style";
+
+const BACK_PATH = "/config/cloud/start";

@customElement("cloud-register")
 export class CloudRegister 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 cloudStatus?: CloudStatus;
+
+  @state() private _view: "form" | "confirm" = "form";
+
  @state() private _requestInProgress = false;

-  @state() private _password = "";
+  @state() private _resendInProgress = false;
+
+  @state() private _autoLoginError?: string;

  @state() private _error?: string;

-  @query("#email", true) private _emailField!: HaInput;
+  @state() private _success?: string;

-  @query("#password", true) private _passwordField!: HaInput;
+  @state() private _registeredEmail = "";
+
+  private _unsubCloudEvents?: Promise<UnsubscribeFunc>;
+
+  @query("#email") private _emailField?: HaInput;
+
+  @query("#password") private _passwordField?: HaInput;
+
+  @query("#confirm-title") private _confirmTitle?: HTMLElement;
+
+  private get _autoLogin(): CloudAutoLogin | null {
+    const status = this.cloudStatus;
+    if (!status || status.logged_in) {
+      return null;
+    }
+    return status.auto_login ?? null;
+  }
+
+  private get _pendingEmail(): string {
+    return this._registeredEmail || this._autoLogin?.email || "";
+  }
+
+  public connectedCallback(): void {
+    super.connectedCallback();
+    if (this._autoLogin) {
+      this._view = "confirm";
+    }
+  }
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._stopWatchingAutoLogin();
+  }
+
+  protected updated(changedProps: PropertyValues) {
+    super.updated(changedProps);
+
+    if (this._view !== "confirm") {
+      return;
+    }
+
+    const failedKey = this._autoLogin?.failed;
+    if (failedKey && !this._autoLoginError) {
+      this._failAutoLogin(failedKey);
+      return;
+    }
+
+    this._watchAutoLogin();
+  }

  protected render(): TemplateResult {
+    const confirming = this._view === "confirm";
    return html`
      <hass-subpage
        .hass=${this.hass}
        .narrow=${this.narrow}
-        back-path="/config"
-        .header=${this.hass.localize("ui.panel.config.cloud.register.title")}
+        back-path=${BACK_PATH}
+        .backCallback=${confirming ? this._handleConfirmBack : undefined}
+        .header=${this.hass.localize("ui.panel.config.cloud.register.headline")}
      >
+        <cloud-signed-out-menu
+          slot="toolbar-icon"
+          .hass=${this.hass}
+        ></cloud-signed-out-menu>
        <div class="content">
-          <ha-config-section .isWide=${this.isWide}>
-            <span slot="header"
-              >${this.hass.localize(
-                "ui.panel.config.cloud.register.headline"
-              )}</span
-            >
-            <div slot="introduction">
-              <p>
-                ${this.hass.localize(
-                  "ui.panel.config.cloud.register.information"
-                )}
-              </p>
-              <p>
-                ${this.hass.localize(
-                  "ui.panel.config.cloud.register.information2"
-                )}
-              </p>
-              <ul>
-                <li>
-                  ${this.hass.localize(
-                    "ui.panel.config.cloud.register.feature_remote_control"
-                  )}
-                </li>
-                <li>
-                  ${this.hass.localize(
-                    "ui.panel.config.cloud.register.feature_google_home"
-                  )}
-                </li>
-                <li>
-                  ${this.hass.localize(
-                    "ui.panel.config.cloud.register.feature_amazon_alexa"
-                  )}
-                </li>
-                <li>
-                  ${this.hass.localize(
-                    "ui.panel.config.cloud.register.feature_webhook_apps"
-                  )}
-                </li>
-              </ul>
-              <p>
-                ${this.hass.localize(
-                  "ui.panel.config.cloud.register.information3"
-                )}
-                <a
-                  href="https://www.nabucasa.com"
-                  target="_blank"
-                  rel="noreferrer"
-                  >Nabu&nbsp;Casa,&nbsp;Inc</a
-                >
-                ${this.hass.localize(
-                  "ui.panel.config.cloud.register.information3a"
-                )}
-              </p>
-              <p>
-                ${this.hass.localize(
-                  "ui.panel.config.cloud.register.information4"
-                )}
-              </p>
-              <ul>
-                <li>
-                  <a
-                    href="https://www.nabucasa.com/tos/"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    ${this.hass.localize(
-                      "ui.panel.config.cloud.register.link_terms_conditions"
-                    )}
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="https://www.nabucasa.com/privacy_policy/"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    ${this.hass.localize(
-                      "ui.panel.config.cloud.register.link_privacy_policy"
-                    )}
-                  </a>
-                </li>
-              </ul>
-            </div>
-            <ha-card
-              outlined
-              .header=${this.hass.localize(
-                "ui.panel.config.cloud.register.create_account"
-              )}
-              ><div class="card-content register-form">
-                ${
-                  this._error
-                    ? html`<ha-alert alert-type="error"
-                        >${this._error}</ha-alert
-                      >`
-                    : ""
-                }
-                <ha-input
-                  autofocus
-                  id="email"
-                  name="email"
-                  .label=${this.hass.localize(
-                    "ui.panel.config.cloud.register.email_address"
-                  )}
-                  type="email"
-                  autocomplete="email"
-                  required
-                  .value=${this.email ?? ""}
-                  @keydown=${this._keyDown}
-                  .validationMessage=${this.hass.localize(
-                    "ui.panel.config.cloud.register.email_error_msg"
-                  )}
-                ></ha-input>
-                <ha-input
-                  id="password"
-                  type="password"
-                  password-toggle
-                  name="password"
-                  .label=${this.hass.localize(
-                    "ui.panel.config.cloud.register.password"
-                  )}
-                  .value=${this._password}
-                  autocomplete="new-password"
-                  minlength="8"
-                  required
-                  @keydown=${this._keyDown}
-                  .validationMessage=${this.hass.localize(
-                    "ui.panel.config.cloud.register.password_error_msg"
-                  )}
-                ></ha-input>
-              </div>
-              <div class="card-actions">
-                <button
-                  class="link"
-                  .disabled=${this._requestInProgress}
-                  @click=${this._handleResendVerifyEmail}
-                >
-                  ${this.hass.localize(
-                    "ui.panel.config.cloud.register.resend_confirm_email"
-                  )}
-                </button>
-                <ha-progress-button
-                  @click=${this._handleRegister}
-                  .progress=${this._requestInProgress}
-                  >${this.hass.localize(
-                    "ui.panel.config.cloud.register.start_trial"
-                  )}</ha-progress-button
-                >
-              </div>
-            </ha-card>
-          </ha-config-section>
+          ${confirming ? this._renderConfirm() : this._renderForm()}
        </div>
      </hass-subpage>
    `;
  }

+  private _renderForm(): TemplateResult {
+    return html`
+      <ha-card outlined>
+        <div class="card-header-block">
+          <h2>
+            ${this.hass.localize(
+              "ui.panel.config.cloud.register.create_account"
+            )}
+          </h2>
+          <p>
+            ${this.hass.localize("ui.panel.config.cloud.register.information")}
+          </p>
+        </div>
+        <div class="card-content register-form">
+          ${
+            this._error
+              ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+              : nothing
+          }
+          <ha-input
+            autofocus
+            id="email"
+            name="email"
+            .label=${this.hass.localize(
+              "ui.panel.config.cloud.register.email_address"
+            )}
+            type="email"
+            autocomplete="email"
+            required
+            .value=${this.email ?? ""}
+            .disabled=${this._requestInProgress}
+            @keydown=${this._keyDown}
+            .validationMessage=${this.hass.localize(
+              "ui.panel.config.cloud.register.email_error_msg"
+            )}
+          ></ha-input>
+          <ha-input
+            id="password"
+            type="password"
+            password-toggle
+            name="password"
+            .label=${this.hass.localize(
+              "ui.panel.config.cloud.register.password"
+            )}
+            autocomplete="new-password"
+            minlength="8"
+            required
+            .disabled=${this._requestInProgress}
+            @keydown=${this._keyDown}
+            .validationMessage=${this.hass.localize(
+              "ui.panel.config.cloud.register.password_error_msg"
+            )}
+          ></ha-input>
+          <p class="terms">
+            ${this.hass.localize(
+              "ui.panel.config.cloud.register.terms_notice",
+              {
+                terms: html`<a
+                  href="https://www.nabucasa.com/tos/"
+                  target="_blank"
+                  rel="noreferrer"
+                  >${this.hass.localize(
+                    "ui.panel.config.cloud.register.link_terms_conditions"
+                  )}</a
+                >`,
+                privacy_policy: html`<a
+                  href="https://www.nabucasa.com/privacy_policy/"
+                  target="_blank"
+                  rel="noreferrer"
+                  >${this.hass.localize(
+                    "ui.panel.config.cloud.register.link_privacy_policy"
+                  )}</a
+                >`,
+              }
+            )}
+          </p>
+        </div>
+        <div class="card-actions split">
+          <ha-button
+            appearance="plain"
+            .disabled=${this._requestInProgress}
+            @click=${this._handleSignInInstead}
+          >
+            ${this.hass.localize(
+              "ui.panel.config.cloud.register.sign_in_instead"
+            )}
+          </ha-button>
+          <ha-progress-button
+            @click=${this._handleRegister}
+            .progress=${this._requestInProgress}
+            >${this.hass.localize(
+              "ui.panel.config.cloud.register.start_trial"
+            )}</ha-progress-button
+          >
+        </div>
+      </ha-card>
+    `;
+  }
+
+  private _renderConfirm(): TemplateResult {
+    return html`
+      <ha-card outlined>
+        <div class="card-content confirm">
+          ${
+            this._autoLoginError
+              ? html`<ha-alert alert-type="error">
+                  ${this._autoLoginError}
+                </ha-alert>`
+              : nothing
+          }
+          ${
+            this._error
+              ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+              : nothing
+          }
+          ${
+            this._success
+              ? html`<ha-alert alert-type="success">${this._success}</ha-alert>`
+              : nothing
+          }
+          <div class="confirm-icon">
+            <ha-svg-icon .path=${mdiEmailCheckOutline}></ha-svg-icon>
+          </div>
+          <h2 id="confirm-title" tabindex="-1">
+            ${this.hass.localize(
+              "ui.panel.config.cloud.register.check_your_email"
+            )}
+          </h2>
+          <p>
+            ${this.hass.localize(
+              "ui.panel.config.cloud.register.confirm_email_body",
+              {
+                email: html`<span class="email">${this._pendingEmail}</span>`,
+              }
+            )}
+          </p>
+          ${
+            this._autoLoginError
+              ? nothing
+              : html`
+                  <div class="waiting">
+                    <ha-spinner size="tiny"></ha-spinner>
+                    <span>
+                      ${this.hass.localize(
+                        "ui.panel.config.cloud.register.waiting_for_confirmation"
+                      )}
+                    </span>
+                  </div>
+                `
+          }
+        </div>
+        <div class="card-actions split confirm-actions">
+          <ha-button appearance="plain" @click=${this._handleCancelPending}>
+            ${this.hass.localize("ui.common.cancel")}
+          </ha-button>
+          ${
+            this._autoLoginError
+              ? html`<ha-button
+                  appearance="accent"
+                  @click=${this._handleSignInInstead}
+                >
+                  ${this.hass.localize("ui.panel.config.cloud.login.sign_in")}
+                </ha-button>`
+              : html`<ha-button
+                  appearance="accent"
+                  @click=${this._handleAttemptNow}
+                >
+                  ${this.hass.localize(
+                    "ui.panel.config.cloud.register.clicked_confirm"
+                  )}
+                </ha-button>`
+          }
+        </div>
+      </ha-card>
+      ${
+        this._autoLoginError
+          ? nothing
+          : html`
+              <p class="footnote">
+                ${this.hass.localize(
+                  "ui.panel.config.cloud.register.nothing_arrived",
+                  {
+                    resend_link: html`<button
+                      class="link"
+                      .disabled=${this._resendInProgress}
+                      @click=${this._handleResendVerifyEmail}
+                    >
+                      ${this.hass.localize(
+                        "ui.panel.config.cloud.register.resend_link"
+                      )}
+                    </button>`,
+                  }
+                )}
+              </p>
+            `
+      }
+    `;
+  }
+
  private _keyDown(ev: KeyboardEvent) {
    if (ev.key === "Enter") {
      this._handleRegister();
    }
  }

+  private _handleSignInInstead() {
+    const confirming = this._view === "confirm";
+    fireEvent(this, "cloud-email-changed", {
+      // The field wins on the form: it holds whatever was typed after a cancel.
+      value: this._emailField?.value || this._pendingEmail || this.email || "",
+    });
+    this._stopWatchingAutoLogin();
+    if (confirming) {
+      fireEvent(this, "cloud-cancel-auto-login");
+    }
+    // Replaces only from the waiting view, whose registration is being
+    // cancelled: browser-back must not return to it. The form is a page worth
+    // going back to.
+    navigate("/config/cloud/login", { replace: confirming });
+  }
+
+  private _handleConfirmBack = () => {
+    this._stopWatchingAutoLogin();
+    fireEvent(this, "cloud-cancel-auto-login");
+    navigate(BACK_PATH, { replace: true });
+  };
+
+  private _handleCancelPending() {
+    this._resetToForm();
+    fireEvent(this, "cloud-cancel-auto-login");
+  }
+
+  private _resetToForm() {
+    this._stopWatchingAutoLogin();
+    this._view = "form";
+    this._autoLoginError = undefined;
+    this._registeredEmail = "";
+    this._error = undefined;
+    this._success = undefined;
+  }
+
  private async _handleRegister() {
    const emailField = this._emailField;
    const passwordField = this._passwordField;

+    if (!emailField || !passwordField) {
+      return;
+    }
+
    if (!emailField.reportValidity()) {
      passwordField.reportValidity();
      emailField.focus();
@@ -222,92 +387,246 @@ export class CloudRegister extends LitElement {
    const password = passwordField.value || "";

    this._requestInProgress = true;
+    this._error = undefined;

    try {
-      await cloudRegister(this.hass, email, password);
-      this._verificationEmailSent(email, "account_created");
+      await cloudRegisterAutoLogin(this.hass, email, password);
    } catch (err: any) {
-      this._password = "";
      this._requestInProgress = false;
+      passwordField.value = "";
      this._error =
-        err && err.body && err.body.message
-          ? err.body.message
-          : "Unknown error";
-    }
-  }
-
-  private async _handleResendVerifyEmail() {
-    const emailField = this._emailField;
-
-    if (!emailField.reportValidity()) {
-      emailField.focus();
+        err?.body?.message || this.hass.localize("ui.common.unknown_error");
      return;
    }

-    const email = emailField.value || "";
-
-    this._requestInProgress = true;
-
-    const doResend = async (username: string) => {
-      try {
-        await cloudResendVerification(this.hass, username);
-        this._verificationEmailSent(username, "verification_email_sent");
-      } catch (err: any) {
-        const errCode = err && err.body && err.body.code;
-        if (errCode === "usernotfound" && username !== username.toLowerCase()) {
-          await doResend(username.toLowerCase());
-        } else {
-          this._requestInProgress = false;
-          this._error =
-            err && err.body && err.body.message
-              ? err.body.message
-              : "Unknown error";
-        }
-      }
-    };
-
-    await doResend(email);
+    this._registeredEmail = email;
+    this._requestInProgress = false;
+    this._view = "confirm";
+    this._autoLoginError = undefined;
+    fireEvent(this, "cloud-email-changed", { value: email });
+    fireEvent(this, "cloud-auto-login-started");
+    fireEvent(this, "ha-refresh-cloud-status");
+    this._watchAutoLogin();
+    await this.updateComplete;
+    this._confirmTitle?.focus();
  }

-  private _verificationEmailSent(
-    email: string,
-    messageKey: "account_created" | "verification_email_sent"
-  ) {
-    this._requestInProgress = false;
-    this._password = "";
-    fireEvent(this, "cloud-email-changed", { value: email });
-    fireEvent(this, "cloud-done", {
-      flashMessage: this.hass.localize(
-        `ui.panel.config.cloud.register.${messageKey}`
-      ),
+  private _watchAutoLogin() {
+    if (this._unsubCloudEvents || this._autoLoginError) {
+      return;
+    }
+
+    const subscription = subscribeCloudEvents(this.hass, (event) => {
+      if (event.type === "login") {
+        fireEvent(this, "ha-refresh-cloud-status");
+      } else if (event.type === "auto_login_failed") {
+        this._failAutoLogin(event.translation_key);
+      } else if (event.type === "auto_login_cancelled") {
+        this._resetToForm();
+        fireEvent(this, "ha-refresh-cloud-status");
+      }
    });
+    this._unsubCloudEvents = subscription;
+
+    subscription.catch(() => {
+      if (this._unsubCloudEvents === subscription) {
+        this._unsubCloudEvents = undefined;
+      }
+    });
+  }
+
+  private async _localizeBackendMessage(
+    key: string,
+    domain = "cloud"
+  ): Promise<string | undefined> {
+    const localize = await this.hass.loadBackendTranslation(
+      "exceptions",
+      domain
+    );
+    return (
+      localize(`component.${domain}.exceptions.${key}.message`) || undefined
+    );
+  }
+
+  private async _websocketErrorMessage(err: any): Promise<string> {
+    if (err?.translation_key) {
+      const message = await this._localizeBackendMessage(
+        err.translation_key,
+        err.translation_domain
+      );
+      if (message) {
+        return message;
+      }
+    }
+    return err?.message || this.hass.localize("ui.common.unknown_error");
+  }
+
+  private async _failAutoLogin(translationKey?: string | null) {
+    this._stopWatchingAutoLogin();
+    const reason = translationKey
+      ? await this._localizeBackendMessage(translationKey)
+      : undefined;
+    this._error = undefined;
+    this._success = undefined;
+    this._autoLoginError =
+      reason ||
+      this.hass.localize("ui.panel.config.cloud.register.auto_login_failed");
+    fireEvent(this, "ha-refresh-cloud-status");
+  }
+
+  private _stopWatchingAutoLogin() {
+    this._unsubCloudEvents?.then((unsub) => unsub()).catch(() => undefined);
+    this._unsubCloudEvents = undefined;
+  }
+
+  private async _handleAttemptNow() {
+    this._watchAutoLogin();
+
+    try {
+      await attemptCloudAutoLoginNow(this.hass);
+    } catch (err: any) {
+      showToast(this, { message: await this._websocketErrorMessage(err) });
+      return;
+    }
+
+    showToast(this, {
+      message: {
+        translationKey: "ui.panel.config.cloud.register.checking_confirmation",
+      },
+    });
+  }
+
+  private async _handleResendVerifyEmail() {
+    if (this._resendInProgress) {
+      return;
+    }
+
+    this._error = undefined;
+    this._success = undefined;
+    this._resendInProgress = true;
+
+    try {
+      await resendCloudAutoLoginConfirm(this.hass);
+      this._success = this.hass.localize(
+        "ui.panel.config.cloud.register.verification_email_sent"
+      );
+    } catch (err: any) {
+      this._error = await this._websocketErrorMessage(err);
+    } finally {
+      this._resendInProgress = false;
+    }
  }

  static get styles() {
    return [
      haStyle,
+      cloudSubpageStyle,
+      cloudSignedOutStyle,
      css`
-        [slot="introduction"] {
-          margin: -1em 0;
+        .content {
+          gap: var(--ha-space-3);
        }
-        [slot="introduction"] a {
-          color: var(--primary-color);
+
+        .card-header-block {
+          padding: var(--ha-space-4) var(--ha-space-4) 0;
        }
-        a {
-          color: var(--primary-color);
-        }
-        h1 {
-          margin: 0;
+        .card-header-block p {
+          margin: var(--ha-space-2) 0 0;
+          color: var(--secondary-text-color);
+          line-height: var(--ha-line-height-normal);
        }
+
        .register-form {
          display: flex;
          flex-direction: column;
        }
-        .card-actions {
+        .terms {
+          margin: var(--ha-space-2) 0 0;
+          font-size: var(--ha-font-size-s);
+          color: var(--secondary-text-color);
+          line-height: var(--ha-line-height-normal);
+        }
+        .terms a,
+        .footnote a,
+        .footnote button.link {
+          color: var(--primary-color);
+        }
+
+        .card-actions.split {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
+        .card-actions.confirm-actions {
+          border-top: none;
+        }
+
+        .confirm {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          text-align: center;
+          gap: var(--ha-space-3);
+          padding: var(--ha-space-8) var(--ha-space-4) var(--ha-space-5);
+        }
+        .confirm ha-alert {
+          width: 100%;
+          text-align: initial;
+        }
+        .confirm-icon {
+          width: 56px;
+          height: 56px;
+          border-radius: var(--ha-border-radius-pill);
+          background: color-mix(in srgb, var(--info-color) 18%, transparent);
+          color: var(--info-color);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          --mdc-icon-size: 28px;
+        }
+        /* Focused programmatically to announce the view; no visible ring. */
+        #confirm-title:focus {
+          outline: none;
+        }
+        .confirm p {
+          margin: 0;
+          max-width: 420px;
+          color: var(--secondary-text-color);
+          line-height: var(--ha-line-height-normal);
+        }
+        .confirm .email {
+          display: inline-block;
+          max-width: 100%;
+          overflow-wrap: anywhere;
+        }
+        .waiting {
+          display: flex;
+          align-items: center;
+          gap: var(--ha-space-2);
+          font-size: var(--ha-font-size-s);
+          color: var(--secondary-text-color);
+        }
+
+        .footnote {
+          display: block;
+          width: 100%;
+          max-width: 600px;
+          margin: 0 auto;
+          font-size: var(--ha-font-size-s);
+          color: var(--secondary-text-color);
+          text-align: center;
+          text-wrap: pretty;
+        }
+
+        /* Not column-reverse: that paints the buttons against DOM order, so
+           keyboard and screen-reader users reach them back to front. */
+        @media (max-width: 500px) {
+          .card-actions.split {
+            flex-direction: column;
+            align-items: stretch;
+            gap: var(--ha-space-2);
+          }
+        }
      `,
    ];
  }
@@ -319,6 +638,7 @@ declare global {
  }

  interface HASSDomEvents {
-    "cloud-done": { flashMessage: string };
+    "cloud-cancel-auto-login": undefined;
+    "cloud-auto-login-started": undefined;
  }
 }
@@ -0,0 +1,300 @@
+import {
+  mdiBackupRestore,
+  mdiCellphone,
+  mdiEarth,
+  mdiHandHeart,
+  mdiMicrophone,
+  mdiMicrophoneMessage,
+} from "@mdi/js";
+import type { TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
+import { navigate } from "../../../../common/navigate";
+import "../../../../components/ha-button";
+import "../../../../components/ha-card";
+import "../../../../components/ha-svg-icon";
+import "../../../../layouts/hass-subpage";
+import { haStyle } from "../../../../resources/styles";
+import type { HomeAssistant } from "../../../../types";
+import "../cloud-signed-out-menu";
+import { cloudSignedOutStyle } from "../cloud-signed-out-style";
+import { cloudSubpageStyle } from "../account/cloud-subpage-style";
+
+const FEATURES = [
+  { icon: mdiHandHeart, color: "--red-color", key: "feature_support" },
+  { icon: mdiEarth, color: "--blue-color", key: "feature_remote" },
+  { icon: mdiBackupRestore, color: "--green-color", key: "feature_backup" },
+  {
+    icon: mdiMicrophoneMessage,
+    color: "--cyan-color",
+    key: "feature_voice_control",
+  },
+  {
+    icon: mdiMicrophone,
+    color: "--purple-color",
+    key: "feature_voice_quality",
+  },
+  { icon: mdiCellphone, color: "--primary-color", key: "feature_companion" },
+] as const;
+
+@customElement("cloud-start")
+export class CloudStart extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean }) public narrow = false;
+
+  protected render(): TemplateResult {
+    return html`
+      <hass-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        back-path="/config"
+        .header=${this.hass.localize(
+          "ui.panel.config.cloud.login.landing_title"
+        )}
+      >
+        <cloud-signed-out-menu
+          slot="toolbar-icon"
+          .hass=${this.hass}
+        ></cloud-signed-out-menu>
+        <div class="content">
+          <div class="landing">
+            <div class="pitch">
+              <h2>
+                ${this.hass.localize("ui.panel.config.cloud.login.hero_title")}
+              </h2>
+              <p class="lead">
+                ${this.hass.localize("ui.panel.config.cloud.login.hero_lead")}
+              </p>
+            </div>
+
+            <ha-card outlined class="features">
+              <div class="card-content feature-list">
+                ${FEATURES.map(
+                  (feature) => html`
+                    <div class="feature">
+                      <div
+                        class="icon-tile"
+                        style=${styleMap({
+                          "--feature-tint": `var(${feature.color})`,
+                        })}
+                      >
+                        <ha-svg-icon .path=${feature.icon}></ha-svg-icon>
+                      </div>
+                      <div class="feature-text">
+                        <div class="feature-title">
+                          ${this.hass.localize(
+                            `ui.panel.config.cloud.login.${feature.key}_title`
+                          )}
+                        </div>
+                        <p>
+                          ${this.hass.localize(
+                            `ui.panel.config.cloud.login.${feature.key}_body`
+                          )}
+                        </p>
+                      </div>
+                    </div>
+                  `
+                )}
+              </div>
+            </ha-card>
+
+            <div class="actions">
+              <div class="action-buttons">
+                <ha-button
+                  size="l"
+                  appearance="accent"
+                  @click=${this._handleRegister}
+                >
+                  ${this.hass.localize(
+                    "ui.panel.config.cloud.register.headline"
+                  )}
+                </ha-button>
+                <ha-button appearance="plain" @click=${this._handleSignIn}>
+                  ${this.hass.localize("ui.panel.config.cloud.login.sign_in")}
+                </ha-button>
+              </div>
+              <p class="trial-note">
+                ${this.hass.localize("ui.panel.config.cloud.login.trial_note")}
+              </p>
+            </div>
+          </div>
+
+          <p class="footnote">
+            ${this.hass.localize("ui.panel.config.cloud.login.partner_note", {
+              nabu_casa_link: html`<a
+                href="https://www.nabucasa.com"
+                target="_blank"
+                rel="noreferrer"
+                >Nabu&nbsp;Casa,&nbsp;Inc</a
+              >`,
+            })}
+          </p>
+        </div>
+      </hass-subpage>
+    `;
+  }
+
+  private _handleSignIn() {
+    navigate("/config/cloud/login");
+  }
+
+  private _handleRegister() {
+    navigate("/config/cloud/register");
+  }
+
+  static get styles() {
+    return [
+      haStyle,
+      cloudSubpageStyle,
+      cloudSignedOutStyle,
+      css`
+        .content {
+          min-height: 100%;
+          gap: var(--ha-space-4);
+          container-type: inline-size;
+        }
+
+        .landing {
+          display: flex;
+          flex-direction: column;
+          gap: var(--ha-space-5);
+          width: 100%;
+          max-width: 600px;
+          margin-inline: auto;
+        }
+
+        .pitch .lead {
+          margin: var(--ha-space-2) 0 0;
+          line-height: var(--ha-line-height-normal);
+          color: var(--secondary-text-color);
+          text-wrap: pretty;
+        }
+
+        .feature-list {
+          display: flex;
+          flex-direction: column;
+          gap: var(--ha-space-5);
+          padding: var(--ha-space-5) var(--ha-space-4);
+        }
+        .feature {
+          display: flex;
+          gap: var(--ha-space-3);
+          align-items: flex-start;
+        }
+        .feature-title {
+          font-size: var(--ha-font-size-m);
+          font-weight: var(--ha-font-weight-medium);
+        }
+        .feature-text p {
+          margin: var(--ha-space-1) 0 0;
+          font-size: var(--ha-font-size-s);
+          color: var(--secondary-text-color);
+          line-height: var(--ha-line-height-normal);
+          text-wrap: pretty;
+        }
+        .icon-tile {
+          width: 40px;
+          height: 40px;
+          border-radius: var(--ha-border-radius-pill);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+          background: color-mix(in srgb, var(--feature-tint) 15%, transparent);
+          color: var(--feature-tint);
+        }
+
+        /* Keeps the primary action reachable while the feature list scrolls. */
+        .actions {
+          position: sticky;
+          bottom: 0;
+          z-index: 1;
+          display: flex;
+          flex-direction: column;
+          gap: var(--ha-space-2);
+          padding: var(--ha-space-3) 0
+            calc(var(--safe-area-inset-bottom) + var(--ha-space-3));
+          background: var(--primary-background-color);
+          box-shadow: 0 -1px 0 var(--divider-color);
+        }
+        .action-buttons {
+          display: flex;
+          gap: var(--ha-space-2);
+        }
+        .action-buttons ha-button {
+          flex: 1;
+          /* Matches the primary action's size="l" height without also giving
+             the secondary its larger type. */
+          --ha-button-height: 48px;
+        }
+        .trial-note {
+          margin: 0;
+          font-size: var(--ha-font-size-s);
+          color: var(--secondary-text-color);
+          text-align: center;
+        }
+
+        .footnote {
+          width: 100%;
+          max-width: 960px;
+          /* Keep the footer at the bottom on short pages. */
+          margin: auto auto 0;
+          font-size: var(--ha-font-size-s);
+          color: var(--secondary-text-color);
+          text-align: center;
+          text-wrap: pretty;
+        }
+        .footnote a {
+          color: var(--primary-color);
+        }
+
+        @container (min-width: 700px) {
+          .landing {
+            display: grid;
+            grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+            grid-template-rows: auto auto 1fr;
+            column-gap: var(--ha-space-7);
+            row-gap: var(--ha-space-6);
+            align-items: start;
+            max-width: 960px;
+          }
+          .pitch {
+            grid-column: 1;
+            grid-row: 1;
+          }
+          .actions {
+            grid-column: 1;
+            grid-row: 2;
+            position: static;
+            padding: 0;
+            background: none;
+            box-shadow: none;
+          }
+          .features {
+            grid-column: 2;
+            grid-row: 1 / 4;
+          }
+          .action-buttons {
+            flex-direction: column;
+            max-width: 340px;
+          }
+          .action-buttons ha-button {
+            flex: initial;
+            width: 100%;
+          }
+          .trial-note {
+            text-align: start;
+          }
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "cloud-start": CloudStart;
+  }
+}
@@ -28,7 +28,7 @@ import { showRestartDialog } from "../../../dialogs/restart/show-dialog-restart"
 import "../../../layouts/hass-subpage";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
-import "../components/ha-config-navigation-list";
+import "../../../components/ha-config-navigation-list";
 import "../ha-config-section";
 import { configSections } from "../config-sections";

@@ -14,7 +14,7 @@ import {
  type RegisterChildPanelReady,
 } from "../../../layouts/panel-ready";
 import type { HomeAssistant } from "../../../types";
-import "../components/ha-config-navigation-list";
+import "../../../components/ha-config-navigation-list";

@customElement("ha-config-navigation")
 class HaConfigNavigation extends LitElement {
@@ -201,7 +201,7 @@ export class DialogVacuumSegmentMapping
          <ha-button
            slot="primaryAction"
            @click=${this._save}
-            .disabled=${this._submitting || !this.isDirtyState}
+            .disabled=${this._submitting}
          >
            ${this.hass.localize("ui.common.save")}
          </ha-button>
@@ -1,9 +1,10 @@
+import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { listenMediaQuery } from "../../common/dom/media_query";
 import type { CloudStatus } from "../../data/cloud";
-import { fetchCloudStatus } from "../../data/cloud";
+import { fetchCloudStatus, subscribeCloudEvents } from "../../data/cloud";
 import {
  entityRegistryByEntityId,
  entityRegistryById,
@@ -256,6 +257,10 @@ class HaPanelConfig extends HassRouterPage {

  private _listeners: (() => void)[] = [];

+  private _unsubCloudEvents?: Promise<UnsubscribeFunc>;
+
+  private _cloudStatusRequestId = 0;
+
  public connectedCallback() {
    super.connectedCallback();
    this._listeners.push(
@@ -268,6 +273,10 @@ class HaPanelConfig extends HassRouterPage {
        this._wideSidebar = matches;
      })
    );
+    if (this.hass && isComponentLoaded(this.hass.config, "cloud")) {
+      this._subscribeCloudEvents();
+      this._updateCloudStatus();
+    }
  }

  public disconnectedCallback() {
@@ -275,19 +284,42 @@ class HaPanelConfig extends HassRouterPage {
    while (this._listeners.length) {
      this._listeners.pop()!();
    }
+    this._unsubCloudEvents?.then((unsub) => unsub()).catch(() => undefined);
+    this._unsubCloudEvents = undefined;
    entityRegistryByEntityId.clear();
    entityRegistryById.clear();
  }

+  private _subscribeCloudEvents() {
+    if (
+      this._unsubCloudEvents ||
+      !this.hass ||
+      !isComponentLoaded(this.hass.config, "cloud")
+    ) {
+      return;
+    }
+
+    const subscription = subscribeCloudEvents(this.hass, () => {
+      this._updateCloudStatus();
+    });
+    this._unsubCloudEvents = subscription;
+
+    subscription.catch(() => {
+      if (this._unsubCloudEvents === subscription) {
+        this._unsubCloudEvents = undefined;
+      }
+    });
+  }
+
  protected firstUpdated(changedProps: PropertyValues<this>) {
    super.firstUpdated(changedProps);
    this.hass.loadBackendTranslation("title");
    this.hass.loadBackendTranslation("services");
    if (isComponentLoaded(this.hass.config, "cloud")) {
-      this._updateCloudStatus();
      this.addEventListener("connection-status", (ev) => {
        if (ev.detail === "connected") {
          this._updateCloudStatus();
+          this._subscribeCloudEvents();
        }
      });
    }
@@ -321,7 +353,13 @@ class HaPanelConfig extends HassRouterPage {
  }

  private async _updateCloudStatus() {
-    this._cloudStatus = await fetchCloudStatus(this.hass);
+    const requestId = ++this._cloudStatusRequestId;
+    const status = await fetchCloudStatus(this.hass);
+
+    if (requestId !== this._cloudStatusRequestId) {
+      return;
+    }
+    this._cloudStatus = status;

    if (
      // Relayer connecting
@@ -101,12 +101,16 @@ export const renderConfigEntryError = (
 ): TemplateResult => {
  if (entry.reason) {
    if (entry.error_reason_translation_key) {
+      // The error may be translated by another integration, e.g. one raised by
+      // a shared helper and owned by the homeassistant integration.
+      const translationDomain =
+        entry.error_reason_translation_domain || entry.domain;
      const lokalisePromExc = hass
-        .loadBackendTranslation("exceptions", entry.domain)
+        .loadBackendTranslation("exceptions", translationDomain)
        .then(
          (localize) =>
            localize(
-              `component.${entry.domain}.exceptions.${entry.error_reason_translation_key}.message`,
+              `component.${translationDomain}.exceptions.${entry.error_reason_translation_key}.message`,
              entry.error_reason_translation_placeholders ?? undefined
            ) || entry.reason
        );
@@ -267,6 +267,7 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin(
          pref_disable_polling: false,
          disabled_by: null,
          reason: null,
+          error_reason_translation_domain: null,
          error_reason_translation_key: null,
          error_reason_translation_placeholders: null,
        })
@@ -256,10 +256,14 @@ class MqttSubscribeCard extends LitElement {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
+      gap: var(--ha-space-2);
+    }
+    ha-button {
+      align-self: flex-start;
+      margin-top: var(--ha-space-3);
    }
    ha-select {
      width: 96px;
-      margin: 0 8px;
    }
    ha-input {
      flex: 1;
@@ -281,10 +285,6 @@ class MqttSubscribeCard extends LitElement {
    @media screen and (max-width: 600px) {
      ha-select {
        display: block;
-        margin-left: 0px;
-        margin-top: 8px;
-        margin-inline-start: 0px;
-        margin-inline-end: initial;
      }
      ha-input {
        flex: auto;
@@ -1,11 +1,13 @@
+import { mdiContentCopy } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { copyToClipboard } from "../../../../../common/util/copy-clipboard";
-import "../../../../../components/ha-button";
-import "../../../../../components/ha-dialog";
-import "../../../../../components/ha-dialog-footer";
+import "../../../../../components/ha-adaptive-dialog";
+import "../../../../../components/ha-icon-button";
+import "../../../../../components/item/ha-list-item-value";
+import "../../../../../components/list/ha-grouped-list";
 import type { HomeAssistant } from "../../../../../types";
 import { showToast } from "../../../../../util/toast";
 import type { SerialPortInfoDialogParams } from "./show-dialog-serial-port-info";
@@ -85,64 +87,34 @@ class DialogSerialPortInfo extends LitElement {
    }

    return html`
-      <ha-dialog
+      <ha-adaptive-dialog
        .open=${this._open}
        header-title=${this.hass.localize(
          "ui.panel.config.serial.port_information"
        )}
        @closed=${this._dialogClosed}
      >
-        <table>
-          <tbody>
-            ${this._fields().map(
-              ([label, value]) => html`
-                <tr>
-                  <th>${label}</th>
-                  <td>${value}</td>
-                </tr>
-              `
-            )}
-          </tbody>
-        </table>
-        <ha-dialog-footer slot="footer">
-          <ha-button
-            slot="secondaryAction"
-            appearance="plain"
-            @click=${this._copyToClipboard}
-          >
-            ${this.hass.localize("ui.common.copy")}
-          </ha-button>
-          <ha-button slot="primaryAction" @click=${this.closeDialog}>
-            ${this.hass.localize("ui.common.close")}
-          </ha-button>
-        </ha-dialog-footer>
-      </ha-dialog>
+        <ha-icon-button
+          slot="headerActionItems"
+          .label=${this.hass.localize("ui.common.copy")}
+          .path=${mdiContentCopy}
+          @click=${this._copyToClipboard}
+        ></ha-icon-button>
+        <ha-grouped-list>
+          ${this._fields().map(
+            ([label, value]) =>
+              html`<ha-list-item-value .label=${label}
+                >${value}</ha-list-item-value
+              >`
+          )}
+        </ha-grouped-list>
+      </ha-adaptive-dialog>
    `;
  }

  static readonly styles: CSSResultGroup = css`
-    table {
-      width: 100%;
-      border-collapse: collapse;
-    }
-
-    th {
-      text-align: start;
-      vertical-align: top;
-      white-space: nowrap;
-      padding-inline-end: var(--ha-space-4);
-      color: var(--secondary-text-color);
-      font-weight: var(--ha-font-weight-normal);
-    }
-
-    td {
-      width: 100%;
-      word-break: break-all;
-    }
-
-    tr:not(:first-child) th,
-    tr:not(:first-child) td {
-      padding-top: var(--ha-space-2);
+    ha-grouped-list {
+      --ha-list-item-value-max-width: 80%;
    }
  `;
 }
@@ -192,6 +192,16 @@ export class SerialConfigDashboard extends LitElement {
        });
  }

+  private _renderConsumerIcon(src: string, alt: string): TemplateResult {
+    return html`<img
+      slot="start"
+      .src=${src}
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+      alt=${alt}
+    />`;
+  }
+
  private _renderConsumer(consumer: SerialPortConsumer): TemplateResult {
    const href =
      consumer.kind === "config_entry"
@@ -202,21 +212,26 @@ export class SerialConfigDashboard extends LitElement {
      <ha-md-list-item type="link" href=${href} class="consumer">
        ${
          consumer.kind === "config_entry"
-            ? html`<img
-                slot="start"
-                .src=${brandsUrl(
+            ? this._renderConsumerIcon(
+                brandsUrl(
                  {
                    domain: consumer.domain!,
                    type: "icon",
                    darkOptimized: this.hass.themes?.darkMode,
                  },
                  this.hass.auth.data.hassUrl
-                )}
-                crossorigin="anonymous"
-                referrerpolicy="no-referrer"
-                alt=${consumer.domain!}
-              />`
-            : html`<ha-svg-icon slot="start" .path=${mdiPuzzle}></ha-svg-icon>`
+                ),
+                consumer.domain!
+              )
+            : consumer.kind === "app"
+              ? this._renderConsumerIcon(
+                  `/api/hassio/addons/${consumer.slug}/icon`,
+                  consumer.slug!
+                )
+              : html`<ha-svg-icon
+                  slot="start"
+                  .path=${mdiPuzzle}
+                ></ha-svg-icon>`
        }
        <div slot="headline">${this._consumerName(consumer)}</div>
        <ha-icon-next slot="end"></ha-icon-next>
@@ -12,6 +12,15 @@ function getLQIWidth(lqi: number): number {
  return lqi > 200 ? 3 : lqi > 100 ? 2 : 1;
 }

+const RELATIONSHIP_PRIORITY: Record<string, number> = {
+  Parent: 0,
+  Sibling: 1,
+  NoneOfTheAbove: 2,
+  Child: 3,
+  PreviousChild: 5,
+};
+const UNKNOWN_RELATIONSHIP_PRIORITY = 4;
+
 export function createZHANetworkChartData(
  devices: ZHADevice[],
  hass: HomeAssistant,
@@ -159,40 +168,80 @@ export function createZHANetworkChartData(
          existingLinks.push(link);
        }
      });
-    } else if (existingLinks.length === 0) {
-      // If there are no links, create a link to the closest neighbor
-      const neighbors: { ieee: string; lqi: string }[] = device.neighbors ?? [];
-      if (neighbors.length === 0) {
-        // If there are no neighbors, look for links from other devices
-        devices.forEach((d) => {
-          if (d.neighbors && d.neighbors.length > 0) {
-            const neighbor = d.neighbors.find((n) => n.ieee === device.ieee);
-            if (neighbor) {
-              neighbors.push({ ieee: d.ieee, lqi: neighbor.lqi });
-            }
-          }
-        });
-      }
-      const closestNeighbor = neighbors.sort(
-        (a, b) => parseInt(b.lqi) - parseInt(a.lqi)
-      )[0];
-      if (closestNeighbor) {
-        links.push({
-          source: device.ieee,
-          target: closestNeighbor.ieee,
-          value: parseInt(closestNeighbor.lqi),
-          symbolSize: 5,
-          lineStyle: {
-            width: 1,
-            color: style.getPropertyValue("--dark-primary-color"),
-            type: "dotted",
-          },
-          ignoreForceLayout: true,
-        });
-      }
    }
  });

+  // For every device whose routing table was empty (so it got no link
+  // above), independently compute its preferred fallback neighbor before
+  // creating any of these links. Doing this device-by-device while
+  // creating links (as before) meant whichever device the backend happens
+  // to list first "claims" the connection, and a sibling router listed
+  // later never gets to contribute its own — often better — choice,
+  // splitting the graph into islands depending on backend device order.
+  const fallbackTargets = new Map<string, { ieee: string; lqi: string }>();
+  devices.forEach((device) => {
+    const hasLink = links.some(
+      (link) => link.source === device.ieee || link.target === device.ieee
+    );
+    if (hasLink) {
+      return;
+    }
+    const neighbors: { ieee: string; lqi: string; relationship?: string }[] =
+      device.neighbors ?? [];
+    if (neighbors.length === 0) {
+      // If there are no neighbors, look for links from other devices
+      devices.forEach((d) => {
+        if (d.neighbors && d.neighbors.length > 0) {
+          const neighbor = d.neighbors.find((n) => n.ieee === device.ieee);
+          if (neighbor) {
+            neighbors.push({ ieee: d.ieee, lqi: neighbor.lqi });
+          }
+        }
+      });
+    }
+    // Prefer a neighbor the device's own Zigbee stack reports as its
+    // parent: picking by raw LQI alone regularly favors a nearby child end
+    // device (e.g. a plug sitting right next to its router) over the
+    // router's actual uplink, which severs it from the rest of the mesh in
+    // the visualization even though the real network is connected.
+    const closestNeighbor = neighbors.sort((a, b) => {
+      const aPriority =
+        RELATIONSHIP_PRIORITY[a.relationship ?? ""] ??
+        UNKNOWN_RELATIONSHIP_PRIORITY;
+      const bPriority =
+        RELATIONSHIP_PRIORITY[b.relationship ?? ""] ??
+        UNKNOWN_RELATIONSHIP_PRIORITY;
+      const priorityDiff = aPriority - bPriority;
+      return priorityDiff !== 0
+        ? priorityDiff
+        : parseInt(b.lqi) - parseInt(a.lqi);
+    })[0];
+    if (closestNeighbor) {
+      fallbackTargets.set(device.ieee, closestNeighbor);
+    }
+  });
+
+  const addedFallbackPairs = new Set<string>();
+  fallbackTargets.forEach((target, ieee) => {
+    const pairKey = [ieee, target.ieee].sort().join("|");
+    if (addedFallbackPairs.has(pairKey)) {
+      return;
+    }
+    addedFallbackPairs.add(pairKey);
+    links.push({
+      source: ieee,
+      target: target.ieee,
+      value: parseInt(target.lqi),
+      symbolSize: 5,
+      lineStyle: {
+        width: 1,
+        color: style.getPropertyValue("--dark-primary-color"),
+        type: "dotted",
+      },
+      ignoreForceLayout: true,
+    });
+  });
+
  // Now set ignoreForceLayout to false for the best connection of each device
  // Except for the coordinator which can have multiple strong connections
  devices.forEach((device) => {
@@ -1,3 +1,4 @@
+import { mdiSpiderWeb } from "@mdi/js";
 import type {
  CallbackDataParams,
  TopLevelFormatterParams,
@@ -16,6 +17,7 @@ import type {
  NetworkLink,
  NetworkNode,
 } from "../../../../../components/chart/ha-network-graph";
+import "../../../../../components/ha-icon-button";
 import "../../../../../components/input/ha-input-search";
 import type { HaInputSearch } from "../../../../../components/input/ha-input-search";
 import type { DeviceRegistryEntry } from "../../../../../data/device/device_registry";
@@ -25,6 +27,7 @@ import type {
  ZWaveJSNodeStatus,
 } from "../../../../../data/zwave_js";
 import {
+  fetchZwaveNetworkNeighbors,
  fetchZwaveNetworkStatus,
  getNodeIdFromDevice,
  NodeStatus,
@@ -33,6 +36,7 @@ import {
 import "../../../../../layouts/hass-subpage";
 import { SubscribeMixin } from "../../../../../mixins/subscribe-mixin";
 import type { HomeAssistant, Route } from "../../../../../types";
+import { showToast } from "../../../../../util/toast";

@customElement("zwave_js-network-visualization")
 export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
@@ -55,11 +59,19 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {

  @state() private _devices: Record<string, DeviceRegistryEntry> = {};

+  @state() private _neighbors?: Record<number, number[]>;
+
+  @state() private _showNeighbors = false;
+
  @state() private _searchFilter = "";

  // Route statistics reference repeaters by device registry ID
  private _nodeIdsByDeviceId: Record<string, number> = {};

+  private _neighborLinks = new Set<string>();
+
+  private _loadingNeighbors = false;
+
  public hassSubscribe() {
    const subscriptions: Promise<UnsubscribeFunc>[] = [];
    const devices: Record<number, DeviceRegistryEntry> = {};
@@ -89,6 +101,32 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
    return subscriptions;
  }

+  private async _toggleNeighbors() {
+    this._showNeighbors = !this._showNeighbors;
+    if (!this._showNeighbors || this._neighbors || this._loadingNeighbors) {
+      return;
+    }
+    // fetched on demand: reading neighbors turns the radio off briefly
+    this._loadingNeighbors = true;
+    try {
+      this._neighbors = await fetchZwaveNetworkNeighbors(
+        this.hass,
+        this.configEntryId
+      );
+    } catch (err: unknown) {
+      this._showNeighbors = false;
+      showToast(this, {
+        message:
+          (err as { message?: string }).message ??
+          this.hass.localize(
+            "ui.panel.config.zwave_js.visualization.neighbors_error"
+          ),
+      });
+    } finally {
+      this._loadingNeighbors = false;
+    }
+  }
+
  public connectedCallback() {
    super.connectedCallback();
    this._fetchNetworkStatus();
@@ -116,13 +154,23 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
          .searchFilter=${this._searchFilter}
          .data=${this._getNetworkData(
            this._nodeStatuses,
-            this._nodeStatistics
+            this._nodeStatistics,
+            this._showNeighbors ? this._neighbors : undefined
          )}
          .searchableAttributes=${this._getSearchableAttributes}
          .tooltipFormatter=${this._tooltipFormatter}
          @chart-click=${this._handleChartClick}
        >
          ${!this.narrow ? this._renderInputSearch("search") : nothing}
+          <ha-icon-button
+            slot="button"
+            class=${this._showNeighbors ? "active" : "inactive"}
+            .path=${mdiSpiderWeb}
+            .label=${this.hass.localize(
+              "ui.panel.config.zwave_js.visualization.toggle_neighbors"
+            )}
+            @click=${this._toggleNeighbors}
+          ></ha-icon-button>
        </ha-network-graph>
      </hass-subpage>
    `;
@@ -184,6 +232,13 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
        sourceDevice?.name_by_user ?? sourceDevice?.name ?? source;
      const targetName =
        targetDevice?.name_by_user ?? targetDevice?.name ?? target;
+      if (this._neighborLinks.has(`${source}>${target}`)) {
+        return html`${sourceName} ↔ ${targetName}<br /><b
+            >${this.hass.localize(
+              "ui.panel.config.zwave_js.visualization.neighbor"
+            )}</b
+          >`;
+      }
      // links point away from the controller, so the route belongs to the target
      const stats =
        this._nodeStatistics[target] ?? this._nodeStatistics[source];
@@ -263,7 +318,8 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
  private _getNetworkData = memoizeOne(
    (
      nodeStatuses: Record<number, ZWaveJSNodeStatus>,
-      nodeStatistics: Record<number, ZWaveJSNodeStatisticsUpdatedMessage>
+      nodeStatistics: Record<number, ZWaveJSNodeStatisticsUpdatedMessage>,
+      neighbors: Record<number, number[]> | undefined
    ): NetworkData => {
      const style = getComputedStyle(this);
      const nodes: NetworkNode[] = [];
@@ -420,7 +476,49 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
        });
      });

-      return { nodes, links, categories };
+      // Neighbors are the nodes a node can reach directly. They are symmetric
+      // and carry no signal information, so they fill in the mesh underneath
+      // the measured routes without overriding them.
+      const neighborLinks: NetworkLink[] = [];
+      const neighborKeys = new Set<string>();
+      Object.entries(neighbors ?? {}).forEach(([nodeId, neighborIds]) => {
+        neighborIds.forEach((neighborId) => {
+          const target = String(neighborId);
+          if (!nodeStatuses[neighborId] || target === nodeId) {
+            return;
+          }
+          const [a, b] = [nodeId, target].sort();
+          const key = `${a}>${b}`;
+          if (
+            neighborKeys.has(key) ||
+            links.some(
+              (link) =>
+                (link.source === nodeId && link.target === target) ||
+                (link.source === target && link.target === nodeId)
+            )
+          ) {
+            return;
+          }
+          neighborKeys.add(key);
+          neighborLinks.push({
+            source: a,
+            target: b,
+            // equal values in both directions render the link without an arrow
+            value: 1,
+            reverseValue: 1,
+            lineStyle: {
+              width: 1,
+              color: style.getPropertyValue("--disabled-color"),
+              type: "dashed",
+            },
+            // neighbors are plentiful, let the routes shape the layout
+            ignoreForceLayout: true,
+          });
+        });
+      });
+      this._neighborLinks = neighborKeys;
+
+      return { nodes, links: [...neighborLinks, ...links], categories };
    }
  );

@@ -460,6 +558,17 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
        ha-input-search {
          flex: 1;
        }
+        /* ha-chart-base can't style re-slotted buttons, so mirror its look */
+        ha-icon-button[slot="button"] {
+          background: var(--card-background-color);
+          border-radius: var(--ha-border-radius-sm);
+          --ha-icon-button-size: 32px;
+          color: var(--primary-color);
+          border: 1px solid var(--divider-color);
+        }
+        ha-icon-button[slot="button"].inactive {
+          color: var(--state-inactive-color);
+        }
      `,
    ];
  }
@@ -40,6 +40,7 @@ class HaConfigScene extends HassRouterPage {
      },
      edit: {
        tag: "ha-scene-editor",
+        itemId: true,
      },
    },
  };
@@ -164,16 +164,6 @@ export class HaSceneEditor extends DirtyStateProviderMixin<number>()(

  private _newSceneId?: string;

-  /**
-   * Id of a scene that was just saved from the "new" editor. The follow-up
-   * navigation from edit/new to edit/<id> reuses this element and must not
-   * reset the editor state.
-   */
-  private _justSavedId?: string;
-
-  /** Bumped when the edited scene changes so stale scene loads are ignored. */
-  private _loadGeneration = 0;
-
  private _entityRegCreated?: (
    value: PromiseLike<EntityRegistryEntry> | EntityRegistryEntry
  ) => void;
@@ -298,7 +288,7 @@ export class HaSceneEditor extends DirtyStateProviderMixin<number>()(
            <ha-svg-icon slot="icon" .path=${mdiPencil}></ha-svg-icon>
          </ha-dropdown-item>

-          <ha-dropdown-item value="toggle-yaml" .disabled=${!this._config}>
+          <ha-dropdown-item value="toggle-yaml">
            ${this.hass.localize(
              `ui.panel.config.automation.editor.edit_${this._mode !== "yaml" ? "yaml" : "ui"}`
            )}
@@ -677,14 +667,6 @@ export class HaSceneEditor extends DirtyStateProviderMixin<number>()(

    const oldscene = changedProps.get("sceneId");

-    if (oldscene !== undefined && oldscene !== this.sceneId) {
-      if (this.sceneId && this.sceneId === this._justSavedId) {
-        this._justSavedId = undefined;
-      } else {
-        this._resetEditorState();
-      }
-    }
-
    if (
      changedProps.has("sceneId") &&
      this.sceneId &&
@@ -857,20 +839,15 @@ export class HaSceneEditor extends DirtyStateProviderMixin<number>()(
  private _enterYamlMode() {
    if (this._mode === "live") {
      this._generateConfigFromLive();
-      this._stopLiveMode();
+      if (this._unsubscribeEvents) {
+        this._unsubscribeEvents();
+        this._unsubscribeEvents = undefined;
+      }
+      applyScene(this.hass, this._storedStates);
    }
    this._mode = "yaml";
  }

-  /** Unsubscribe from live updates and restore the pre-live entity states. */
-  private _stopLiveMode() {
-    if (this._unsubscribeEvents) {
-      this._unsubscribeEvents();
-      this._unsubscribeEvents = undefined;
-    }
-    applyScene(this.hass, this._storedStates);
-  }
-
  private async _toggleLiveMode() {
    if (this._mode === "live") {
      this._exitLiveMode();
@@ -904,7 +881,11 @@ export class HaSceneEditor extends DirtyStateProviderMixin<number>()(

  private _exitLiveMode() {
    this._generateConfigFromLive();
-    this._stopLiveMode();
+    if (this._unsubscribeEvents) {
+      this._unsubscribeEvents();
+      this._unsubscribeEvents = undefined;
+    }
+    applyScene(this.hass, this._storedStates);
    this._mode = "review";
  }

@@ -934,7 +915,7 @@ export class HaSceneEditor extends DirtyStateProviderMixin<number>()(
      (event) => this._stateChanged(event),
      "state_changed"
    );
-    if (this._mode !== "live") {
+    if (!this.isConnected || this._mode !== "live") {
      unsubscribe();
      return;
    }
@@ -947,12 +928,11 @@ export class HaSceneEditor extends DirtyStateProviderMixin<number>()(
  }

  private async _loadConfig() {
-    const generation = ++this._loadGeneration;
    let config: SceneConfig;
    try {
      config = await getSceneConfig(this.hass, this.sceneId!);
    } catch (err: any) {
-      if (generation !== this._loadGeneration) {
+      if (!this.isConnected) {
        return;
      }
      await showAlertDialog(this, {
@@ -970,7 +950,7 @@ export class HaSceneEditor extends DirtyStateProviderMixin<number>()(
      return;
    }

-    if (generation !== this._loadGeneration) {
+    if (!this.isConnected) {
      return;
    }

@@ -989,27 +969,6 @@ export class HaSceneEditor extends DirtyStateProviderMixin<number>()(
    this._config = config;
  }

-  /** Emulate a freshly opened editor when the edited scene changes. */
-  private _resetEditorState() {
-    this._loadGeneration++;
-    if (this._mode === "live") {
-      this._stopLiveMode();
-    }
-    this._config = undefined;
-    this._mode = "review";
-    this._errors = undefined;
-    this._yamlErrors = undefined;
-    this._scene = undefined;
-    this._entities = [];
-    this._single_entities = [];
-    this._devices = [];
-    this._storedStates = {};
-    this._activateContextId = undefined;
-    this._entityRegistryUpdate = undefined;
-    this._sceneRevision = 0;
-    this._initDirtyTracking({ type: "shallow" }, 0);
-  }
-
  private _initEntities(config: SceneConfig) {
    this._entities = Object.keys(config.entities);
    this._single_entities = [];
@@ -1167,20 +1126,24 @@ export class HaSceneEditor extends DirtyStateProviderMixin<number>()(
  }

  private async _confirmUnsavedChanged(): Promise<boolean> {
-    if (this.isDirtyState) {
-      return showConfirmationDialog(this, {
-        title: this.hass!.localize(
-          "ui.panel.config.scene.editor.unsaved_confirm_title"
-        ),
-        text: this.hass!.localize(
-          "ui.panel.config.scene.editor.unsaved_confirm_text"
-        ),
-        confirmText: this.hass!.localize("ui.common.leave"),
-        dismissText: this.hass!.localize("ui.common.stay"),
-        destructive: true,
-      });
+    if (!this.isDirtyState) {
+      return true;
    }
-    return true;
+    const confirmed = await showConfirmationDialog(this, {
+      title: this.hass!.localize(
+        "ui.panel.config.scene.editor.unsaved_confirm_title"
+      ),
+      text: this.hass!.localize(
+        "ui.panel.config.scene.editor.unsaved_confirm_text"
+      ),
+      confirmText: this.hass!.localize("ui.common.leave"),
+      dismissText: this.hass!.localize("ui.common.stay"),
+      destructive: true,
+    });
+    if (confirmed) {
+      this._markDirtyStateClean();
+    }
+    return confirmed;
  }

  private async _duplicate() {
@@ -1307,8 +1270,7 @@ export class HaSceneEditor extends DirtyStateProviderMixin<number>()(
    this._saving = true;

    let entityRegPromise: Promise<EntityRegistryEntry> | undefined;
-    const entityRegistryUpdate = this._entityRegistryUpdate;
-    if (entityRegistryUpdate !== undefined && !this.sceneId) {
+    if (this._entityRegistryUpdate !== undefined && !this.sceneId) {
      this._newSceneId = id;
      entityRegPromise = new Promise<EntityRegistryEntry>((resolve) => {
        this._entityRegCreated = resolve;
@@ -1319,7 +1281,7 @@ export class HaSceneEditor extends DirtyStateProviderMixin<number>()(
      await saveScene(this.hass, id, this._config!);
      this._errors = undefined;

-      if (entityRegistryUpdate !== undefined) {
+      if (this._entityRegistryUpdate !== undefined) {
        let entityId = this._scene?.entity_id;

        // wait for scene to appear in entity registry when creating a new scene
@@ -1353,10 +1315,10 @@ export class HaSceneEditor extends DirtyStateProviderMixin<number>()(

        if (entityId) {
          await updateEntityRegistryEntry(this.hass, entityId, {
-            area_id: entityRegistryUpdate.area || null,
-            labels: entityRegistryUpdate.labels || [],
+            area_id: this._entityRegistryUpdate.area || null,
+            labels: this._entityRegistryUpdate.labels || [],
            categories: {
-              scene: entityRegistryUpdate.category || null,
+              scene: this._entityRegistryUpdate.category || null,
            },
          });
        }
@@ -1364,7 +1326,6 @@ export class HaSceneEditor extends DirtyStateProviderMixin<number>()(

      this._markDirtyStateClean();
      if (isNewScene) {
-        this._justSavedId = id;
        navigate(`/config/scene/edit/${id}`, { replace: true });
      }
    } catch (err: any) {
--- a/Show More
+++ b/Show More