Rename entity ID format card and move registry settings to a dedicated file

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

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

@@ -0,0 +1,23 @@
+---
+title: Replaced device selectors
+subtitle: How device and target selectors surface devices that were split into separate devices
+---
+
+A device that used to belong to multiple config entries is split into one
+device per config entry. The original composite device is removed from the
+registry, so existing references to it (targets in automations, device
+selectors) point at a device that no longer exists.
+
+When a selector holds such a reference, it shows a **replaced** state instead of
+a plain "not found", and offers to point the reference at the replacement
+device(s). The candidate replacements are filtered through the selector's own
+filters, so in practice usually a single device matches:
+
+- **Target selector** — the replaced device row offers **Replace**, which adds
+  every replacement device that matches the target filters and removes the old
+  reference.
+- **Device selector** — when exactly one replacement matches, **Replace** swaps
+  to it in one click; when several match, a dialog lets you pick one.
+
+All samples below reference the removed composite device `old_composite`, which
+was split into a light device and a switch device.

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

@@ -0,0 +1,318 @@
+import type { HassServiceTarget } from "home-assistant-js-websocket";
+import type { TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
+import { customElement, state } from "lit/decorators";
+import { mockConfigEntries } from "../../../../demo/src/stubs/config_entries";
+import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
+import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
+import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
+import type { HASSDomEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/components/ha-selector/ha-selector";
+import "../../../../src/components/ha-settings-row";
+import "../../../../src/components/ha-target-picker";
+import type { AreaRegistryEntry } from "../../../../src/data/area/area_registry";
+import type { DeviceRegistryEntry } from "../../../../src/data/device/device_registry";
+import type { EntityRegistryDisplayEntry } from "../../../../src/data/entity/entity_registry";
+import type { Selector } from "../../../../src/data/selector";
+import {
+  showDialog,
+  type ShowDialogParams,
+} from "../../../../src/dialogs/make-dialog-manager";
+import { provideHass } from "../../../../src/fake_data/provide_hass";
+import type { ProvideHassElement } from "../../../../src/mixins/provide-hass-lit-mixin";
+import type { HomeAssistant } from "../../../../src/types";
+import "../../components/demo-black-white-row";
+
+// The composite device "old_composite" is intentionally NOT in the registry:
+// it was split into "device_light" and "device_switch". References to the old
+// id (targets, device selectors) should surface a "replaced" state.
+const DEVICES: DeviceRegistryEntry[] = [
+  {
+    area_id: "bedroom",
+    configuration_url: null,
+    config_entries: ["config_entry_light"],
+    config_entries_subentries: {},
+    connections: [],
+    disabled_by: null,
+    entry_type: null,
+    id: "device_light",
+    identifiers: [["demo", "light"] as [string, string]],
+    manufacturer: null,
+    model: null,
+    model_id: null,
+    name_by_user: null,
+    name: "Living room lamp",
+    sw_version: null,
+    hw_version: null,
+    via_device_id: null,
+    serial_number: null,
+    labels: [],
+    created_at: 0,
+    modified_at: 0,
+    primary_config_entry: null,
+  },
+  {
+    area_id: "backyard",
+    configuration_url: null,
+    config_entries: ["config_entry_switch"],
+    config_entries_subentries: {},
+    connections: [],
+    disabled_by: null,
+    entry_type: null,
+    id: "device_switch",
+    identifiers: [["demo", "switch"] as [string, string]],
+    manufacturer: null,
+    model: null,
+    model_id: null,
+    name_by_user: null,
+    name: "Garden socket",
+    sw_version: null,
+    hw_version: null,
+    via_device_id: null,
+    serial_number: null,
+    labels: [],
+    created_at: 0,
+    modified_at: 0,
+    primary_config_entry: null,
+  },
+];
+
+const ENTITIES = [
+  {
+    entity_id: "light.living_room_lamp",
+    state: "on",
+    attributes: { friendly_name: "Living room lamp" },
+  },
+  {
+    entity_id: "switch.garden_socket",
+    state: "off",
+    attributes: { friendly_name: "Garden socket" },
+  },
+];
+
+// Registry display entries link the demo entities to the split devices so the
+// pickers can filter split candidates by domain.
+const ENTITY_REGISTRY: Record<string, EntityRegistryDisplayEntry> = {
+  "light.living_room_lamp": {
+    entity_id: "light.living_room_lamp",
+    name: "Living room lamp",
+    device_id: "device_light",
+    area_id: "bedroom",
+    platform: "demo",
+    labels: [],
+  },
+  "switch.garden_socket": {
+    entity_id: "switch.garden_socket",
+    name: "Garden socket",
+    device_id: "device_switch",
+    area_id: "backyard",
+    platform: "demo",
+    labels: [],
+  },
+};
+
+const AREAS: AreaRegistryEntry[] = [
+  {
+    area_id: "backyard",
+    floor_id: null,
+    name: "Backyard",
+    icon: null,
+    picture: null,
+    aliases: [],
+    labels: [],
+    temperature_entity_id: null,
+    humidity_entity_id: null,
+    created_at: 0,
+    modified_at: 0,
+  },
+  {
+    area_id: "bedroom",
+    floor_id: null,
+    name: "Bedroom",
+    icon: "mdi:bed",
+    picture: null,
+    aliases: [],
+    labels: [],
+    temperature_entity_id: null,
+    humidity_entity_id: null,
+    created_at: 0,
+    modified_at: 0,
+  },
+];
+
+// Maps the removed composite device to the devices that replaced it.
+const COMPOSITE_SPLITS = {
+  old_composite: {
+    split_ids: ["device_light", "device_switch"],
+    primary_id: "device_light",
+  },
+};
+
+interface Sample {
+  name: string;
+  description: string;
+  selector: Selector;
+  value: unknown;
+  // Render ha-target-picker directly in compact (chip) mode instead of the
+  // ha-selector, which does not expose the compact option.
+  compact?: boolean;
+}
+
+const SAMPLES: Sample[] = [
+  {
+    name: "Target",
+    description:
+      "Migrate adds every replacement device that matches the target filters (here both).",
+    selector: { target: {} },
+    value: { device_id: ["old_composite"] },
+  },
+  {
+    name: "Target (compact)",
+    description:
+      "In compact mode the replaced reference is shown as a warning chip.",
+    selector: { target: {} },
+    value: { device_id: ["old_composite"] },
+    compact: true,
+  },
+  {
+    name: "Device (unfiltered, multiple matches)",
+    description:
+      "Both replacement devices qualify, so Replace opens a dialog to pick one.",
+    selector: { device: {} },
+    value: "old_composite",
+  },
+  {
+    name: "Device (filtered to lights, single match)",
+    description:
+      "Only the light device passes the filter, so Replace swaps to it in one click.",
+    selector: { device: { entity: [{ domain: "light" }] } },
+    value: "old_composite",
+  },
+  {
+    name: "Device (multiple)",
+    description: "Each slot resolves independently to a matching replacement.",
+    selector: { device: { multiple: true } },
+    value: ["old_composite"],
+  },
+];
+
+@customElement("demo-components-ha-selector-replaced-device")
+class DemoHaSelectorReplacedDevice
+  extends LitElement
+  implements ProvideHassElement
+{
+  @state() public hass!: HomeAssistant;
+
+  private _values = SAMPLES.map((sample) => sample.value);
+
+  constructor() {
+    super();
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("config", "en");
+    hass.addEntities(ENTITIES);
+    mockEntityRegistry(hass);
+    mockDeviceRegistry(hass, DEVICES);
+    mockConfigEntries(hass);
+    mockHassioSupervisor(hass);
+    // Provide the demo areas and link the demo entities to the split devices.
+    // Set them directly via updateHass (typed against the real registry types)
+    // instead of the area stub, whose demo-specific type differs.
+    const areas: Record<string, AreaRegistryEntry> = {};
+    AREAS.forEach((area) => {
+      areas[area.area_id] = area;
+    });
+    hass.updateHass({ areas, entities: ENTITY_REGISTRY });
+    hass.mockWS(
+      "config/device_registry/list_composite_splits",
+      () => COMPOSITE_SPLITS
+    );
+    hass.mockWS("extract_from_target", () => ({
+      referenced_entities: [],
+      referenced_devices: [],
+      referenced_areas: [],
+    }));
+    hass.mockWS("auth/sign_path", (params) => params);
+  }
+
+  public provideHass(el) {
+    el.hass = this.hass;
+  }
+
+  public connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("show-dialog", this._dialogManager);
+  }
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("show-dialog", this._dialogManager);
+  }
+
+  private _dialogManager = (e: HASSDomEvent<ShowDialogParams<unknown>>) => {
+    const { dialogTag, dialogImport, dialogParams, addHistory, parentElement } =
+      e.detail;
+    showDialog(
+      this,
+      dialogTag,
+      dialogParams,
+      dialogImport,
+      parentElement,
+      addHistory
+    );
+  };
+
+  protected render(): TemplateResult {
+    return html`
+      ${SAMPLES.map(
+        (sample, idx) => html`
+          <demo-black-white-row .title=${sample.name}>
+            ${["light", "dark"].map(
+              (slot) => html`
+                <ha-settings-row narrow slot=${slot}>
+                  <span slot="heading">${sample.name}</span>
+                  <span slot="description">${sample.description}</span>
+                  ${
+                    sample.compact
+                      ? html`<ha-target-picker
+                          compact
+                          .hass=${this.hass}
+                          .value=${this._values[idx] as HassServiceTarget}
+                          .sampleIdx=${idx}
+                          @value-changed=${this._handleValueChanged}
+                        ></ha-target-picker>`
+                      : html`<ha-selector
+                          .hass=${this.hass}
+                          .selector=${sample.selector}
+                          .value=${this._values[idx]}
+                          .sampleIdx=${idx}
+                          @value-changed=${this._handleValueChanged}
+                        ></ha-selector>`
+                  }
+                </ha-settings-row>
+              `
+            )}
+          </demo-black-white-row>
+        `
+      )}
+    `;
+  }
+
+  private _handleValueChanged(ev) {
+    const idx = ev.target.sampleIdx;
+    this._values[idx] = ev.detail.value;
+    this.requestUpdate();
+  }
+
+  static styles = css`
+    ha-settings-row {
+      --settings-row-content-width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-selector-replaced-device": DemoHaSelectorReplacedDevice;
+  }
+}

src/common/entity/compute_entity_id_format_example.ts

@@ -0,0 +1,15 @@
+import type { EntityIdPart } from "../../data/entity_id_format";
+import { slugify } from "../string/slugify";
+
+export const computeEntityIdFormatExample = (
+  format: EntityIdPart[],
+  examples: Record<EntityIdPart, string>
+): string => {
+  const parts = format
+    .map((item) => examples[item])
+    .filter(Boolean)
+    .map((part) => slugify(part, "_"))
+    .filter(Boolean);
+
+  return parts.join("_") || "unknown";
+};

src/components/buttons/ha-progress-button.ts

@@ -126,7 +126,7 @@ export class HaProgressButton extends LitElement {
       visibility: hidden;
     }
 
-    :host([appearance="brand"]) ha-svg-icon {
+    .progress ha-svg-icon {
       color: var(--white-color);
     }
   `;

src/components/chips/ha-input-chip.ts

@@ -27,6 +27,7 @@ export class HaInputChip extends InputChip {
         );
         --ha-input-chip-selected-container-opacity: 1;
         --md-input-chip-label-text-font: Roboto, sans-serif;
+        --md-input-chip-label-text-weight: 400;
       }
       /** Set the size of mdc icons **/
       ::slotted([slot="icon"]) {

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

@@ -0,0 +1,142 @@
+import { mdiDevices } from "@mdi/js";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../../common/dom/fire_event";
+import { computeAreaName } from "../../common/entity/compute_area_name";
+import { computeDeviceName } from "../../common/entity/compute_device_name";
+import { getDeviceArea } from "../../common/entity/context/get_device_context";
+import type { HomeAssistant } from "../../types";
+import type { HassDialog } from "../../dialogs/make-dialog-manager";
+import "../ha-dialog";
+import "../ha-svg-icon";
+import "../item/ha-list-item-button";
+import "../list/ha-list-base";
+import type { DeviceReplacedDialogParams } from "./show-dialog-device-replaced";
+
+@customElement("dialog-device-replaced")
+export class DialogDeviceReplaced
+  extends LitElement
+  implements HassDialog<DeviceReplacedDialogParams>
+{
+  @state() private _params?: DeviceReplacedDialogParams;
+
+  @state() private _open = false;
+
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  public async showDialog(params: DeviceReplacedDialogParams): Promise<void> {
+    this._params = params;
+    this._open = true;
+  }
+
+  public closeDialog(): boolean {
+    this._open = false;
+    return true;
+  }
+
+  private _dialogClosed(): void {
+    this._params = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  private _pick(ev: Event): void {
+    const item = (ev.target as HTMLElement).closest("ha-list-item-button") as
+      (HTMLElement & { deviceId?: string }) | null;
+    if (!item?.deviceId) {
+      return;
+    }
+    this._params?.onResolved(item.deviceId);
+    this.closeDialog();
+  }
+
+  private _items = memoizeOne(
+    (
+      candidates: string[],
+      primaryId: string | null,
+      devices: HomeAssistant["devices"],
+      areas: HomeAssistant["areas"]
+    ) =>
+      candidates.map((deviceId) => {
+        const device = devices[deviceId];
+        const area = device ? getDeviceArea(device, areas) : undefined;
+        return {
+          deviceId,
+          name: device ? computeDeviceName(device) : deviceId,
+          secondary: area ? computeAreaName(area) : undefined,
+          isPrimary: deviceId === primaryId,
+        };
+      })
+  );
+
+  protected render() {
+    if (!this._params || !this.hass) {
+      return nothing;
+    }
+
+    return html`
+      <ha-dialog
+        .open=${this._open}
+        .headerTitle=${this.hass.localize(
+          "ui.components.device-picker.replaced_dialog.title"
+        )}
+        @closed=${this._dialogClosed}
+      >
+        <p class="description">
+          ${this.hass.localize(
+            "ui.components.device-picker.replaced_dialog.description"
+          )}
+        </p>
+        <ha-list-base @click=${this._pick}>
+          ${this._items(
+            this._params.candidates,
+            this._params.primaryId,
+            this.hass.devices,
+            this.hass.areas
+          ).map(
+            (item) => html`
+              <ha-list-item-button .deviceId=${item.deviceId}>
+                <ha-svg-icon slot="start" .path=${mdiDevices}></ha-svg-icon>
+                <span slot="headline">${item.name}</span>
+                ${
+                  item.secondary || item.isPrimary
+                    ? html`<span slot="supporting-text">
+                        ${[
+                          item.secondary,
+                          item.isPrimary
+                            ? this.hass.localize(
+                                "ui.components.device-picker.replaced_dialog.recommended"
+                              )
+                            : undefined,
+                        ]
+                          .filter(Boolean)
+                          .join(" • ")}
+                      </span>`
+                    : nothing
+                }
+              </ha-list-item-button>
+            `
+          )}
+        </ha-list-base>
+      </ha-dialog>
+    `;
+  }
+
+  static styles = css`
+    ha-dialog {
+      --dialog-content-padding: 0;
+      --ha-row-item-padding-inline: var(--ha-space-6);
+    }
+    .description {
+      margin: 0;
+      padding: 0 var(--ha-space-6) var(--ha-space-4);
+      color: var(--secondary-text-color);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-device-replaced": DialogDeviceReplaced;
+  }
+}

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

@@ -12,6 +12,7 @@ import { fullEntitiesContext } from "../../data/context";
 import type { DeviceAutomation } from "../../data/device/device_automation";
 import {
   deviceAutomationsEqual,
+  deviceAutomationsSimilar,
   sortDeviceAutomations,
 } from "../../data/device/device_automation";
 import type { EntityRegistryEntry } from "../../data/entity/entity_registry";
@@ -201,12 +202,22 @@ export abstract class HaDeviceAutomationPicker<
       : // No device, clear the list of automations
         [];
 
-    // If there is no value, or if we have changed the device ID, reset the value.
+    // If there is no value, or if we have changed the device ID, reset the
+    // value. When the device changed (for example after replacing a removed
+    // device), try to keep the same automation type/subtype on the new device
+    // before falling back to the first available automation.
     if (!this.value || this.value.device_id !== this.deviceId) {
+      const equivalent =
+        this.value && this.deviceId
+          ? this._automations.find((automation) =>
+              deviceAutomationsSimilar(automation, this.value!)
+            )
+          : undefined;
       this._setValue(
-        this._automations.length
-          ? this._automations[0]
-          : this._createNoAutomation(this.deviceId)
+        equivalent ||
+          (this._automations.length
+            ? this._automations[0]
+            : this._createNoAutomation(this.deviceId))
       );
     }
     this._renderEmpty = true;

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

@@ -1,6 +1,7 @@
+import { mdiAlertOutline } from "@mdi/js";
 import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import type { HassEntity } from "home-assistant-js-websocket";
-import { html, LitElement, nothing, type PropertyValues } from "lit";
+import { css, html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -13,12 +14,20 @@ import {
   getDevices,
   type DevicePickerItem,
 } from "../../data/device/device_picker";
-import type { DeviceRegistryEntry } from "../../data/device/device_registry";
+import {
+  fetchDeviceCompositeSplits,
+  type DeviceCompositeSplits,
+  type DeviceRegistryEntry,
+} from "../../data/device/device_registry";
 import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
 import type { HomeAssistant } from "../../types";
 import { brandsUrl } from "../../util/brands-url";
+import "../ha-alert";
+import "../ha-button";
 import "../ha-generic-picker";
 import type { HaGenericPicker } from "../ha-generic-picker";
+import "../ha-svg-icon";
+import { showDeviceReplacedDialog } from "./show-dialog-device-replaced";
 
 export type HaDevicePickerDeviceFilterFunc = (
   device: DeviceRegistryEntry
@@ -95,6 +104,10 @@ export class HaDevicePicker extends LitElement {
 
   @state() private _configEntryLookup: Record<string, ConfigEntry> = {};
 
+  @state() private _compositeSplits?: DeviceCompositeSplits;
+
+  private _loadingCompositeSplits = false;
+
   private _getDevicesMemoized = memoizeOne(
     (
       _devices: HomeAssistant["devices"],
@@ -123,6 +136,29 @@ export class HaDevicePicker extends LitElement {
     this._loadConfigEntries();
   }
 
+  protected willUpdate(changedProperties: PropertyValues<this>): void {
+    if (
+      !this.hass ||
+      !this.value ||
+      this._compositeSplits !== undefined ||
+      this._loadingCompositeSplits
+    ) {
+      return;
+    }
+    const oldHass = changedProperties.get("hass") as HomeAssistant | undefined;
+    const devicesChanged =
+      changedProperties.has("hass") && this.hass.devices !== oldHass?.devices;
+    if (
+      (changedProperties.has("value") || devicesChanged) &&
+      !this.hass.devices[this.value]
+    ) {
+      // The selected device is not in the registry; it might be a legacy
+      // composite device that was split into separate devices. Fetch the
+      // split map so we can offer to replace the reference.
+      this._loadCompositeSplits();
+    }
+  }
+
   private async _loadConfigEntries() {
     const configEntries = await getConfigEntries(this.hass);
     this._configEntryLookup = Object.fromEntries(
@@ -130,6 +166,43 @@ export class HaDevicePicker extends LitElement {
     );
   }
 
+  private async _loadCompositeSplits() {
+    this._loadingCompositeSplits = true;
+    try {
+      this._compositeSplits = await fetchDeviceCompositeSplits(this.hass);
+    } catch (_err) {
+      this._compositeSplits = {};
+    } finally {
+      this._loadingCompositeSplits = false;
+    }
+  }
+
+  private _getReplacement = memoizeOne(
+    (
+      value: string | undefined,
+      _devices: HomeAssistant["devices"],
+      compositeSplits: DeviceCompositeSplits | undefined,
+      items: (DevicePickerItem | string)[]
+    ) => {
+      if (!value || !compositeSplits || this.hass.devices[value]) {
+        return undefined;
+      }
+      const split = compositeSplits[value];
+      if (!split) {
+        return undefined;
+      }
+      // Keep only the split devices that pass this picker's filters. In
+      // practice usually exactly one of the split devices matches.
+      const selectableIds = new Set(
+        items
+          .filter((item): item is DevicePickerItem => typeof item !== "string")
+          .map((item) => item.id)
+      );
+      const candidates = split.split_ids.filter((id) => selectableIds.has(id));
+      return { candidates, primaryId: split.primary_id };
+    }
+  );
+
   private _getItems = () =>
     this._getDevicesMemoized(
       this.hass.devices,
@@ -144,49 +217,66 @@ export class HaDevicePicker extends LitElement {
     );
 
   private _valueRenderer = memoizeOne(
-    (configEntriesLookup: Record<string, ConfigEntry>) => (value: string) => {
-      const deviceId = value;
-      const device = this.hass.devices[deviceId];
+    (
+      configEntriesLookup: Record<string, ConfigEntry>,
+      replacementName: string | undefined
+    ) =>
+      (value: string) => {
+        const deviceId = value;
+        const device = this.hass.devices[deviceId];
 
-      if (!device) {
-        return html`<span slot="headline">${deviceId}</span>`;
-      }
-
-      const area = getDeviceArea(device, this.hass.areas);
-
-      const deviceName = device ? computeDeviceName(device) : undefined;
-      const areaName = area ? computeAreaName(area) : undefined;
-
-      const primary = deviceName;
-      const secondary = areaName;
-
-      const configEntry = device.primary_config_entry
-        ? configEntriesLookup[device.primary_config_entry]
-        : undefined;
-
-      return html`
-        ${
-          configEntry
-            ? html`<img
+        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) {
+            return html`
+              <ha-svg-icon
                 slot="start"
-                alt=""
-                crossorigin="anonymous"
-                referrerpolicy="no-referrer"
-                src=${brandsUrl(
-                  {
-                    domain: configEntry.domain,
-                    type: "icon",
-                    darkOptimized: this.hass.themes?.darkMode,
-                  },
-                  this.hass.auth.data.hassUrl
-                )}
-              />`
-            : nothing
+                style="color: var(--warning-color)"
+                .path=${mdiAlertOutline}
+              ></ha-svg-icon>
+              <span slot="headline">${replacementName}</span>
+            `;
+          }
+          return html`<span slot="headline">${deviceId}</span>`;
         }
-        <span slot="headline">${primary}</span>
-        <span slot="supporting-text">${secondary}</span>
-      `;
-    }
+
+        const area = getDeviceArea(device, this.hass.areas);
+
+        const deviceName = device ? computeDeviceName(device) : undefined;
+        const areaName = area ? computeAreaName(area) : undefined;
+
+        const primary = deviceName;
+        const secondary = areaName;
+
+        const configEntry = device.primary_config_entry
+          ? configEntriesLookup[device.primary_config_entry]
+          : undefined;
+
+        return html`
+          ${
+            configEntry
+              ? html`<img
+                  slot="start"
+                  alt=""
+                  crossorigin="anonymous"
+                  referrerpolicy="no-referrer"
+                  src=${brandsUrl(
+                    {
+                      domain: configEntry.domain,
+                      type: "icon",
+                      darkOptimized: this.hass.themes?.darkMode,
+                    },
+                    this.hass.auth.data.hassUrl
+                  )}
+                />`
+              : nothing
+          }
+          <span slot="headline">${primary}</span>
+          <span slot="supporting-text">${secondary}</span>
+        `;
+      }
   );
 
   private _rowRenderer: RenderItemFunction<DevicePickerItem> = (item) => html`
@@ -235,7 +325,39 @@ export class HaDevicePicker extends LitElement {
       this.placeholder ??
       this.hass.localize("ui.components.device-picker.placeholder");
 
-    const valueRenderer = this._valueRenderer(this._configEntryLookup);
+    // Only resolve a replacement (which needs the full item list) when the
+    // value is a missing device that we know was replaced, to avoid computing
+    // the item list on every render for the common case.
+    const replacement =
+      this.value &&
+      !this.hass.devices[this.value] &&
+      this._compositeSplits?.[this.value]
+        ? this._getReplacement(
+            this.value,
+            this.hass.devices,
+            this._compositeSplits,
+            this._getItems()
+          )
+        : undefined;
+
+    // Only treat the value as "replaced" when there is an available
+    // replacement device; otherwise fall back to normal "not found" behavior.
+    const canReplace = !!replacement?.candidates.length;
+    const replacementName = canReplace
+      ? computeDeviceName(
+          this.hass.devices[
+            replacement!.primaryId &&
+            replacement!.candidates.includes(replacement!.primaryId)
+              ? replacement!.primaryId
+              : replacement!.candidates[0]
+          ]
+        )
+      : undefined;
+
+    const valueRenderer = this._valueRenderer(
+      this._configEntryLookup,
+      replacementName
+    );
 
     return html`
       <ha-generic-picker
@@ -256,15 +378,84 @@ export class HaDevicePicker extends LitElement {
         .hideClearIcon=${this.hideClearIcon}
         .valueRenderer=${valueRenderer}
         .searchKeys=${deviceComboBoxKeys}
-        .unknownItemText=${this.hass.localize(
-          "ui.components.device-picker.unknown"
-        )}
+        .unknownItemText=${
+          replacement?.candidates.length
+            ? this.hass.localize(
+                "ui.components.device-picker.device_replaced_count",
+                { count: replacement.candidates.length }
+              )
+            : this.hass.localize("ui.components.device-picker.unknown")
+        }
         @value-changed=${this._valueChanged}
       >
       </ha-generic-picker>
+      ${canReplace ? this._renderReplacedAlert(replacement!) : nothing}
     `;
   }
 
+  private _renderReplacedAlert(replacement: {
+    candidates: string[];
+    primaryId: string | null;
+  }) {
+    const { candidates } = replacement;
+
+    const replacementName =
+      candidates.length === 1
+        ? computeDeviceName(this.hass.devices[candidates[0]])
+        : undefined;
+
+    return html`
+      <ha-alert alert-type="warning">
+        ${
+          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"
+          @click=${this._handleReplace}
+        >
+          ${this.hass.localize("ui.components.device-picker.replace_device")}
+        </ha-button>
+      </ha-alert>
+    `;
+  }
+
+  private _handleReplace = () => {
+    const replacement = this._getReplacement(
+      this.value,
+      this.hass.devices,
+      this._compositeSplits,
+      this._getItems()
+    );
+    if (!replacement?.candidates.length) {
+      return;
+    }
+    const { candidates, primaryId } = replacement;
+    if (candidates.length === 1) {
+      this._setValue(candidates[0]);
+      return;
+    }
+    showDeviceReplacedDialog(this, {
+      originalDeviceId: this.value!,
+      candidates,
+      primaryId,
+      onResolved: (deviceId) => this._setValue(deviceId),
+    });
+  };
+
+  private _setValue(value: string) {
+    this.value = value;
+    fireEvent(this, "value-changed", { value });
+  }
+
   public async open() {
     await this.updateComplete;
     await this._picker?.open();
@@ -281,6 +472,13 @@ export class HaDevicePicker extends LitElement {
     this.hass.localize("ui.components.device-picker.no_match", {
       term: html`<b>‘${search}’</b>`,
     });
+
+  static styles = css`
+    ha-alert {
+      display: block;
+      margin-top: 8px;
+    }
+  `;
 }
 
 declare global {

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

@@ -0,0 +1,22 @@
+import { fireEvent } from "../../common/dom/fire_event";
+
+export interface DeviceReplacedDialogParams {
+  /** The removed composite device that is being referenced. */
+  originalDeviceId: string;
+  /** The split devices the reference can be pointed at. */
+  candidates: string[];
+  /** The split device that took over the composite's primary config entry. */
+  primaryId: string | null;
+  /** Called with the device the user picked as replacement. */
+  onResolved: (deviceId: string) => void;
+}
+
+export const showDeviceReplacedDialog = (
+  element: HTMLElement,
+  params: DeviceReplacedDialogParams
+) =>
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-device-replaced",
+    dialogImport: () => import("./dialog-device-replaced"),
+    dialogParams: params,
+  });

src/components/ha-target-picker.ts

@@ -27,6 +27,10 @@ import {
   getDevices,
   type DevicePickerItem,
 } from "../data/device/device_picker";
+import {
+  fetchDeviceCompositeSplits,
+  type DeviceCompositeSplits,
+} from "../data/device/device_registry";
 import type { HaEntityPickerEntityFilterFunc } from "../data/entity/entity";
 import {
   entityComboBoxKeys,
@@ -122,6 +126,10 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   @state() private _configEntryLookup: Record<string, ConfigEntry> = {};
 
+  @state() private _compositeSplits?: DeviceCompositeSplits;
+
+  private _loadingCompositeSplits = false;
+
   @state()
   @consume({ context: labelsContext, subscribe: true })
   private _labelRegistry!: LabelRegistryEntry[];
@@ -211,6 +219,24 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
       this._loadConfigEntries();
     }
 
+    const devicesChanged =
+      changedProps.has("hass") &&
+      this.hass.devices !== changedProps.get("hass")?.devices;
+    if (
+      (changedProps.has("value") || devicesChanged) &&
+      this.hass &&
+      this._compositeSplits === undefined &&
+      !this._loadingCompositeSplits &&
+      this.value?.device_id &&
+      ensureArray(this.value.device_id).some(
+        (deviceId) => !this.hass.devices[deviceId]
+      )
+    ) {
+      // A referenced device is missing from the registry; it might be a legacy
+      // composite device that was split. Fetch the split map to offer a fix.
+      this._loadCompositeSplits();
+    }
+
     if (
       this._pendingEntityId &&
       changedProps.has("hass") &&
@@ -297,6 +323,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                     .hass=${this.hass}
                     type="device"
                     .itemId=${device_id}
+                    .compositeSplits=${this._compositeSplits}
                     @remove-target-item=${this._handleRemove}
                     @expand-target-item=${this._handleExpand}
                   ></ha-target-picker-value-chip>
@@ -390,6 +417,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                 <ha-target-picker-item-group
                   @remove-target-item=${this._handleRemove}
                   @replace-target-item=${this._handleReplace}
+                  @migrate-target-item=${this._handleMigrate}
                   type="device"
                   .hass=${this.hass}
                   .items=${{ device: deviceIds }}
@@ -398,6 +426,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                   .includeDomains=${this.includeDomains}
                   .includeDeviceClasses=${this.includeDeviceClasses}
                   .primaryEntitiesOnly=${this.primaryEntitiesOnly}
+                  .compositeSplits=${this._compositeSplits}
                 >
                 </ha-target-picker-item-group>
               `
@@ -1175,6 +1204,31 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     );
   }
 
+  private async _loadCompositeSplits() {
+    this._loadingCompositeSplits = true;
+    try {
+      this._compositeSplits = await fetchDeviceCompositeSplits(this.hass);
+    } catch (_err) {
+      this._compositeSplits = {};
+    } finally {
+      this._loadingCompositeSplits = false;
+    }
+  }
+
+  private _handleMigrate(
+    ev: HASSDomEvent<HASSDomEvents["migrate-target-item"]>
+  ) {
+    const { id, replacements } = ev.detail;
+    let value = this._removeItem(this.value, "device", id);
+    for (const replacement of replacements) {
+      value = this._addTargetToValue(value, {
+        type: "device",
+        id: replacement,
+      });
+    }
+    fireEvent(this, "value-changed", { value });
+  }
+
   private _renderRow = (
     item:
       | PickerComboBoxItem
@@ -1357,6 +1411,7 @@ declare global {
     "remove-target-item": TargetItem;
     "expand-target-item": TargetItem;
     "replace-target-item": TargetItem;
+    "migrate-target-item": { id: string; replacements: string[] };
     "remove-target-group": string;
   }
 }

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

@@ -1,5 +1,6 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
+import type { DeviceCompositeSplits } from "../../data/device/device_registry";
 import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
 import type { TargetType, TargetTypeFloorless } from "../../data/target";
 import type { HomeAssistant } from "../../types";
@@ -52,6 +53,9 @@ export class HaTargetPickerItemGroup extends LitElement {
   @property({ type: Boolean, attribute: "primary-entities-only" })
   public primaryEntitiesOnly?: boolean;
 
+  @property({ attribute: false })
+  public compositeSplits?: DeviceCompositeSplits;
+
   protected render() {
     let count = 0;
     Object.values(this.items).forEach((items) => {
@@ -87,6 +91,7 @@ export class HaTargetPickerItemGroup extends LitElement {
                     .includeDomains=${this.includeDomains}
                     .includeDeviceClasses=${this.includeDeviceClasses}
                     .primaryEntitiesOnly=${this.primaryEntitiesOnly}
+                    .compositeSplits=${this.compositeSplits}
                   ></ha-target-picker-item-row>`
               )
             : nothing

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

@@ -34,7 +34,10 @@ import { computeRTL } from "../../common/util/compute_rtl";
 import type { AreaRegistryEntry } from "../../data/area/area_registry";
 import { getConfigEntry } from "../../data/config_entries";
 import { labelsContext } from "../../data/context";
-import type { DeviceRegistryEntry } from "../../data/device/device_registry";
+import type {
+  DeviceCompositeSplits,
+  DeviceRegistryEntry,
+} from "../../data/device/device_registry";
 import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
 import type { FloorRegistryEntry } from "../../data/floor_registry";
 import { domainToName } from "../../data/integration";
@@ -54,6 +57,7 @@ import type { HomeAssistant } from "../../types";
 import { brandsUrl } from "../../util/brands-url";
 import type { HaDevicePickerDeviceFilterFunc } from "../device/ha-device-picker";
 import { floorDefaultIconPath } from "../ha-floor-icon";
+import "../ha-button";
 import "../ha-icon-button";
 import "../ha-state-icon";
 import "../ha-svg-icon";
@@ -108,6 +112,9 @@ export class HaTargetPickerItemRow extends LitElement {
   @property({ type: Boolean, attribute: "primary-entities-only" })
   public primaryEntitiesOnly?: boolean;
 
+  @property({ attribute: false })
+  public compositeSplits?: DeviceCompositeSplits;
+
   @state() private _iconImg?: string;
 
   @state() private _domainName?: string;
@@ -128,6 +135,15 @@ export class HaTargetPickerItemRow extends LitElement {
     const { name, context, iconPath, fallbackIconPath, stateObject, notFound } =
       this._itemData(this.type, this.itemId);
 
+    const replacement =
+      this.type === "device" && notFound
+        ? this._getReplacement(this.itemId)
+        : undefined;
+    // Only surface the "replaced" state when there is at least one available
+    // replacement device to migrate to. If every replacement device was
+    // deleted (or filtered out), fall back to the plain "not found" state.
+    const canMigrate = !!replacement?.candidates.length;
+
     const showEntities = this.type !== "entity" && !notFound;
 
     const entries = this.parentEntries || this._entries;
@@ -174,15 +190,20 @@ export class HaTargetPickerItemRow extends LitElement {
         }
       </div>
 
-      <div slot="headline">${name}</div>
+      <div slot="headline">${(canMigrate && replacement?.name) || name}</div>
       ${
         notFound || (context && !this.hideContext)
           ? html`<span slot="supporting-text"
               >${
                 notFound
-                  ? this.hass.localize(
-                      `ui.components.target-picker.${this.type}_not_found`
-                    )
+                  ? canMigrate
+                    ? this.hass.localize(
+                        "ui.components.target-picker.device_replaced",
+                        { count: replacement!.candidates.length }
+                      )
+                    : this.hass.localize(
+                        `ui.components.target-picker.${this.type}_not_found`
+                      )
                   : context
               }</span
             >`
@@ -229,6 +250,24 @@ export class HaTargetPickerItemRow extends LitElement {
             `
           : nothing
       }
+      ${
+        canMigrate
+          ? html`
+              <ha-button
+                class="migrate"
+                slot="end"
+                appearance="plain"
+                variant="warning"
+                size="s"
+                @click=${this._migrate}
+              >
+                ${this.hass.localize(
+                  "ui.components.target-picker.replace_device"
+                )}
+              </ha-button>
+            `
+          : nothing
+      }
       ${
         !this.expand && !this.subEntry
           ? html`
@@ -707,6 +746,51 @@ export class HaTargetPickerItemRow extends LitElement {
     });
   }
 
+  // Returns the split devices that replaced a removed composite device and
+  // pass this row's filters, or undefined if the item is not a replaced device.
+  private _getReplacement(item: string) {
+    const split = this.compositeSplits?.[item];
+    if (!split || this.hass.devices[item]) {
+      return undefined;
+    }
+    const candidates = split.split_ids.filter((id) => {
+      const device = this.hass.devices[id];
+      return (
+        device &&
+        deviceMeetsFilter(
+          device,
+          this.hass.entities,
+          this.deviceFilter,
+          this.includeDomains,
+          this.includeDeviceClasses,
+          this.hass.states,
+          this.entityFilter,
+          !this.primaryEntitiesOnly
+        )
+      );
+    });
+    // Display the replaced reference using the primary replacement device's
+    // name instead of the removed composite device id. Fall back to the first
+    // available candidate if the primary device itself was deleted.
+    const nameDevice =
+      (split.primary_id && this.hass.devices[split.primary_id]) ||
+      (candidates.length ? this.hass.devices[candidates[0]] : undefined);
+    const name = nameDevice ? computeDeviceName(nameDevice) : undefined;
+    return { candidates, name };
+  }
+
+  private _migrate = (ev: MouseEvent) => {
+    ev.stopPropagation();
+    const replacement = this._getReplacement(this.itemId);
+    if (!replacement?.candidates.length) {
+      return;
+    }
+    fireEvent(this, "migrate-target-item", {
+      id: this.itemId,
+      replacements: replacement.candidates,
+    });
+  };
+
   private _openDetails(ev: MouseEvent) {
     ev.stopPropagation();
     showTargetDetailsDialog(this, {
@@ -746,6 +830,11 @@ export class HaTargetPickerItemRow extends LitElement {
         color: var(--ha-color-on-warning-normal);
       }
 
+      .migrate {
+        align-self: center;
+        white-space: nowrap;
+      }
+
       .replaceable {
         cursor: pointer;
       }

src/components/target-picker/ha-target-picker-value-chip.ts

@@ -1,6 +1,7 @@
 import "@home-assistant/webawesome/dist/components/tag/tag";
 import { consume } from "@lit/context";
 import {
+  mdiAlertOutline,
   mdiDevices,
   mdiHome,
   mdiLabel,
@@ -9,6 +10,7 @@ import {
 } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { computeCssColor } from "../../common/color/compute-color";
 import { hex2rgb } from "../../common/color/convert-color";
@@ -19,6 +21,7 @@ import { computeStateName } from "../../common/entity/compute_state_name";
 import { slugify } from "../../common/string/slugify";
 import { getConfigEntry } from "../../data/config_entries";
 import { labelsContext } from "../../data/context";
+import type { DeviceCompositeSplits } from "../../data/device/device_registry";
 import { domainToName } from "../../data/integration";
 import type { LabelRegistryEntry } from "../../data/label/label_registry";
 import type { TargetType } from "../../data/target";
@@ -39,6 +42,9 @@ export class HaTargetPickerValueChip extends LitElement {
 
   @property({ attribute: "item-id" }) public itemId!: string;
 
+  @property({ attribute: false })
+  public compositeSplits?: DeviceCompositeSplits;
+
   @state() private _domainName?: string;
 
   @state() private _iconImg?: string;
@@ -51,38 +57,74 @@ export class HaTargetPickerValueChip extends LitElement {
     const { name, iconPath, fallbackIconPath, stateObject, color } =
       this._itemData(this.type, this.itemId);
 
+    const split =
+      this.type === "device" && !this.hass.devices?.[this.itemId]
+        ? this.compositeSplits?.[this.itemId]
+        : undefined;
+    // Show the replaced reference using the primary replacement device's name,
+    // falling back to the first still-existing split device if the primary
+    // device itself was deleted. If no replacement device exists at all, fall
+    // back to the normal "not found" display.
+    const replacementDevice = split
+      ? (split.primary_id && this.hass.devices?.[split.primary_id]) ||
+        split.split_ids
+          .map((id) => this.hass.devices?.[id])
+          .find((device) => device)
+      : undefined;
+    const replaced = !!replacementDevice;
+    const replacedName = replacementDevice
+      ? computeDeviceNameDisplay(
+          replacementDevice,
+          this.hass.localize,
+          this.hass.states
+        )
+      : undefined;
+
     return html`
       <wa-tag
         pill
         with-remove
-        class=${this.type}
+        class=${classMap({ [this.type]: true, replaced })}
         style=${color ? `--color: rgb(${color});` : ""}
         @wa-remove=${this._removeItem}
       >
         <div class="icon">
           ${
-            iconPath
-              ? html`<ha-icon .icon=${iconPath}></ha-icon>`
-              : this._iconImg
-                ? html`<img
-                    alt=${this._domainName || ""}
-                    width="24"
-                    crossorigin="anonymous"
-                    referrerpolicy="no-referrer"
-                    src=${this._iconImg}
-                  />`
-                : fallbackIconPath
-                  ? html`<ha-svg-icon .path=${fallbackIconPath}></ha-svg-icon>`
-                  : stateObject
-                    ? html`<ha-state-icon
-                        .stateObj=${stateObject}
-                      ></ha-state-icon>`
-                    : nothing
+            replaced
+              ? html`<ha-svg-icon .path=${mdiAlertOutline}></ha-svg-icon>`
+              : iconPath
+                ? html`<ha-icon .icon=${iconPath}></ha-icon>`
+                : this._iconImg
+                  ? html`<img
+                      alt=${this._domainName || ""}
+                      width="24"
+                      crossorigin="anonymous"
+                      referrerpolicy="no-referrer"
+                      src=${this._iconImg}
+                    />`
+                  : fallbackIconPath
+                    ? html`<ha-svg-icon
+                        .path=${fallbackIconPath}
+                      ></ha-svg-icon>`
+                    : stateObject
+                      ? html`<ha-state-icon
+                          .stateObj=${stateObject}
+                        ></ha-state-icon>`
+                      : nothing
           }
         </div>
-        <span class="name"> ${name} </span>
+        <span class="name">
+          ${
+            replaced
+              ? replacedName ||
+                this.hass.localize(
+                  "ui.components.target-picker.replaced_device"
+                )
+              : name
+          }
+        </span>
         ${
-          this.type === "entity"
+          this.type === "entity" || replaced
             ? nothing
             : html`<ha-tooltip .for="expand-${slugify(this.itemId)}"
                   >${this.hass.localize(
@@ -125,7 +167,7 @@ export class HaTargetPickerValueChip extends LitElement {
     if (type === "device") {
       const device = this.hass.devices?.[itemId];
 
-      if (device.primary_config_entry) {
+      if (device?.primary_config_entry) {
         this._getDeviceDomain(device.primary_config_entry);
       }
 
@@ -240,6 +282,11 @@ export class HaTargetPickerValueChip extends LitElement {
       --background-color: var(--color);
       --icon-primary-color: var(--primary-text-color);
     }
+    wa-tag.replaced {
+      border-color: var(--ha-color-border-warning-normal, var(--warning-color));
+      --background-color: var(--warning-color);
+      color: var(--ha-color-on-warning-normal, var(--warning-color));
+    }
 
     .name {
       overflow: hidden;

src/data/device/device_automation.ts

@@ -2,9 +2,10 @@ import type { HassEntities } from "home-assistant-js-websocket";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import type { LocalizeFunc } from "../../common/translations/localize";
 import type { HaFormSchema } from "../../components/ha-form/types";
-import type { CallWS } from "../../types";
+import type { CallWS, HomeAssistant } from "../../types";
 import type { BaseTrigger } from "../automation";
 import { migrateAutomationTrigger } from "../automation";
+import type { DeviceCompositeSplits } from "./device_registry";
 import type { EntityRegistryEntry } from "../entity/entity_registry";
 import {
   entityRegistryByEntityId,
@@ -158,6 +159,51 @@ export const deviceAutomationsEqual = (
   return true;
 };
 
+// Decides how a device automation editor should handle its referenced device.
+// A missing device that was replaced by a split device stays editable so the
+// device picker can offer to fix the reference; a genuinely unknown device
+// cannot be edited visually. Returns "loading" while the split map is unknown.
+export const deviceAutomationEditorMode = (
+  hass: HomeAssistant,
+  deviceId: string | undefined,
+  compositeSplits: DeviceCompositeSplits | undefined
+): "editable" | "loading" | "unknown-device" => {
+  if (!deviceId || deviceId in hass.devices) {
+    return "editable";
+  }
+  if (compositeSplits === undefined) {
+    return "loading";
+  }
+  // Only editable if at least one of the split (replacement) devices still
+  // exists; otherwise the reference is stale and cannot be fixed here.
+  const split = compositeSplits[deviceId];
+  return split?.split_ids.some((id) => id in hass.devices)
+    ? "editable"
+    : "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 = (
+  a: DeviceAutomation,
+  b: DeviceAutomation
+) => {
+  if (typeof a !== typeof b) {
+    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]);
+    });
+};
+
 const compareEntityIdWithEntityRegId = (
   entityRegistry: EntityRegistryEntry[],
   entityIdA?: string,

src/data/device/device_registry.ts

@@ -1,3 +1,4 @@
+import type { Connection } from "home-assistant-js-websocket";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { caseInsensitiveStringCompare } from "../../common/string/compare";
 import type { HomeAssistant } from "../../types";
@@ -54,6 +55,52 @@ export interface DeviceRegistryEntryMutableParams {
   labels?: string[];
 }
 
+/**
+ * Describes how a legacy composite device (that lived on multiple config
+ * entries) was split into separate devices. The composite device no longer
+ * exists in the registry; references to it (in automations, targets, ...) now
+ * need to point at one or more of the split devices instead.
+ */
+export interface DeviceCompositeSplit {
+  /** Ids of the devices that replaced the composite device. */
+  split_ids: string[];
+  /** The split device that took over the composite's primary config entry. */
+  primary_id: string | null;
+}
+
+/** Map of removed composite device id -> its split information. */
+export type DeviceCompositeSplits = Record<string, DeviceCompositeSplit>;
+
+// The composite split migration in core is a one-time operation, so the split
+// map is static for the lifetime of the connection. Cache the request per
+// connection so it is fetched once and shared across all pickers, instead of
+// being requested again by every device/target picker.
+const compositeSplitsCache = new WeakMap<
+  Connection,
+  Promise<DeviceCompositeSplits>
+>();
+
+export const fetchDeviceCompositeSplits = (
+  hass: Pick<HomeAssistant, "connection" | "callWS">
+): Promise<DeviceCompositeSplits> => {
+  const conn = hass.connection;
+
+  let request = compositeSplitsCache.get(conn);
+  if (!request) {
+    request = hass
+      .callWS<DeviceCompositeSplits>({
+        type: "config/device_registry/list_composite_splits",
+      })
+      .catch((err) => {
+        // Don't cache failures so the next caller retries.
+        compositeSplitsCache.delete(conn);
+        throw err;
+      });
+    compositeSplitsCache.set(conn, request);
+  }
+  return request;
+};
+
 export const fallbackDeviceName = (
   hass: HomeAssistant,
   entities: EntityRegistryEntry[] | EntityRegistryDisplayEntry[] | string[]

src/data/entity/entity_registry_settings.ts

@@ -0,0 +1,22 @@
+import type { HomeAssistantApi } from "../../types";
+import type { EntityIdFormat } from "../entity_id_format";
+
+export interface EntityRegistrySettings {
+  entity_id_parts: EntityIdFormat | null;
+}
+
+export const fetchEntityRegistrySettings = (
+  api: HomeAssistantApi
+): Promise<EntityRegistrySettings> =>
+  api.callWS<EntityRegistrySettings>({
+    type: "config/entity_registry/settings/get",
+  });
+
+export const updateEntityRegistrySettings = (
+  api: HomeAssistantApi,
+  updates: Partial<EntityRegistrySettings>
+): Promise<EntityRegistrySettings> =>
+  api.callWS<EntityRegistrySettings>({
+    type: "config/entity_registry/settings/update",
+    ...updates,
+  });

src/data/entity_id_format.ts

@@ -0,0 +1,12 @@
+export type EntityIdPart = "area" | "device" | "entity" | "floor";
+
+export type EntityIdFormat = EntityIdPart[];
+
+export const DEFAULT_ENTITY_ID_FORMAT: EntityIdFormat = [
+  "area",
+  "device",
+  "entity",
+];
+
+export const isDefaultEntityIdFormat = (format: EntityIdFormat): boolean =>
+  JSON.stringify(format) === JSON.stringify(DEFAULT_ENTITY_ID_FORMAT);

src/layouts/hass-router-page.ts

@@ -5,6 +5,7 @@ import memoizeOne from "memoize-one";
 import { navigate } from "../common/navigate";
 import { computeRouteTail } from "../common/url/route";
 import type { Route } from "../types";
+import { PanelReady } from "./panel-ready";
 
 const extractPage = (path: string, defaultPage: string) => {
   if (path === "") {
@@ -22,6 +23,7 @@ export interface RouteOptions {
   // Function to load the page.
   load?: () => Promise<unknown>;
   cache?: boolean;
+  waitForReady?: boolean;
 }
 
 export interface RouterOptions {
@@ -53,6 +55,8 @@ export class HassRouterPage extends ReactiveElement {
 
   private _currentLoadProm?: Promise<void>;
 
+  private _panelReady = new PanelReady();
+
   private _cache = {};
 
   private _initialLoadDone = false;
@@ -180,6 +184,10 @@ export class HassRouterPage extends ReactiveElement {
     // If we don't show loading screen, just show the panel.
     // It will be automatically upgraded when loading done.
     if (!routerOptions.showLoading) {
+      const loadComplete = () => {
+        this._currentLoadProm = undefined;
+      };
+      this._currentLoadProm = loadProm.then(loadComplete, loadComplete);
       this._createPanel(routerOptions, newPage, routeOptions);
       return;
     }
@@ -287,7 +295,15 @@ export class HassRouterPage extends ReactiveElement {
    * Promise that resolves when the page has rendered.
    */
   protected get pageRendered(): Promise<void> {
-    return this.updateComplete.then(() => this._currentLoadProm);
+    return this.updateComplete
+      .then(() => this._currentLoadProm)
+      .then(() => {
+        const page = this.lastElementChild;
+        return Promise.all([
+          this._panelReady.ready,
+          page instanceof HassRouterPage ? page.pageRendered : undefined,
+        ]).then(() => undefined);
+      });
   }
 
   protected createElement(tag: string) {
@@ -312,6 +328,7 @@ export class HassRouterPage extends ReactiveElement {
     }
 
     const panelEl = this._cache[page] || this.createElement(routeOptions.tag);
+    this._panelReady.track(panelEl, routeOptions.waitForReady);
     this.updatePageEl(panelEl);
     this.appendChild(panelEl);
 

src/layouts/home-assistant.ts

@@ -17,10 +17,7 @@ import { HassElement } from "../state/hass-element";
 import QuickBarMixin from "../state/quick-bar-mixin";
 import type { HomeAssistant, Route } from "../types";
 import { storeState } from "../util/ha-pref-storage";
-import {
-  removeLaunchScreen,
-  renderLaunchScreenContent,
-} from "../util/launch-screen";
+import { renderLaunchScreenContent } from "../util/launch-screen";
 import { checkOnboardingSurveyToast } from "../util/onboarding-survey";
 import {
   registerServiceWorker,
@@ -136,16 +133,9 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
     ) {
       this.render = this.renderHass;
       this.update = super.update;
-      // Apps with a native splash screen keep covering the frontend until
-      // frontend/loaded, so the launch screen stays up (invisibly) until the
-      // first panel has rendered and partial-panel-resolver removes it and
-      // fires frontend/loaded.
-      if (
-        !this.hass.auth.external?.config.hasSplashscreen &&
-        removeLaunchScreen()
-      ) {
-        this.hass.auth.external?.fireMessage({ type: "frontend/loaded" });
-      }
+      // partial-panel-resolver removes the launch screen after the first panel
+      // is ready. Native apps request instant removal because their own splash
+      // screen covers the frontend until frontend/loaded is sent.
     }
     super.update(changedProps);
   }

src/layouts/panel-ready.ts

@@ -0,0 +1,30 @@
+import { ReactiveElement } from "lit";
+import { fireEvent } from "../common/dom/fire_event";
+
+declare global {
+  interface HASSDomEvents {
+    "hass-panel-ready": undefined;
+  }
+}
+
+export const panelIsReady = async (element: HTMLElement) => {
+  if (element instanceof ReactiveElement) {
+    // Ensure pending Lit changes are rendered before revealing the panel.
+    await element.updateComplete;
+  }
+  fireEvent(element, "hass-panel-ready");
+};
+
+export class PanelReady {
+  public ready?: Promise<void>;
+
+  public track(element: HTMLElement, waitForReady = false) {
+    this.ready = waitForReady
+      ? new Promise((resolve) => {
+          element.addEventListener("hass-panel-ready", () => resolve(), {
+            once: true,
+          });
+        })
+      : undefined;
+  }
+}

src/layouts/partial-panel-resolver.ts

@@ -8,6 +8,7 @@ import type { PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { deepActiveElement } from "../common/dom/deep-active-element";
 import { deepEqual } from "../common/util/deep-equal";
+import { promiseTimeout } from "../common/util/promise-timeout";
 import { narrowViewportContext } from "../data/context";
 import { getDefaultPanel } from "../data/panel";
 import type { CustomPanelInfo } from "../data/panel_custom";
@@ -17,6 +18,7 @@ import type { RouteOptions, RouterOptions } from "./hass-router-page";
 import { HassRouterPage } from "./hass-router-page";
 
 const CACHE_URL_PATHS = ["lovelace", "home", "config"];
+const PANEL_READY_TIMEOUT = 2000;
 const COMPONENTS = {
   app: () => import("../panels/app/ha-panel-app"),
   energy: () => import("../panels/energy/ha-panel-energy"),
@@ -219,9 +221,12 @@ class PartialPanelResolver extends HassRouterPage {
       )
     ) {
       await this.rebuild();
-      await this.pageRendered;
+      await promiseTimeout(PANEL_READY_TIMEOUT, this.pageRendered).catch(
+        () => undefined
+      );
       // Only fire frontend/loaded when this call actually removed the launch
-      // screen, so later panel updates do not fire it again.
+      // screen, so later panel updates do not fire it again. Native apps remove
+      // it instantly because their own splash screen is still visible.
       if (
         removeLaunchScreen(!!this.hass.auth.external?.config.hasSplashscreen)
       ) {

src/panels/config/automation/action/types/ha-automation-action-device_id.ts

@@ -13,11 +13,16 @@ import type {
   DeviceCapabilities,
 } from "../../../../../data/device/device_automation";
 import {
+  deviceAutomationEditorMode,
   deviceAutomationsEqual,
   fetchDeviceActionCapabilities,
   localizeExtraFieldsComputeHelperCallback,
   localizeExtraFieldsComputeLabelCallback,
 } from "../../../../../data/device/device_automation";
+import {
+  fetchDeviceCompositeSplits,
+  type DeviceCompositeSplits,
+} from "../../../../../data/device/device_registry";
 import type { EntityRegistryEntry } from "../../../../../data/entity/entity_registry";
 import type { HomeAssistant } from "../../../../../types";
 
@@ -33,6 +38,10 @@ export class HaDeviceAction extends LitElement {
 
   @state() private _capabilities?: DeviceCapabilities;
 
+  @state() private _compositeSplits?: DeviceCompositeSplits;
+
+  private _loadingCompositeSplits = false;
+
   @state()
   @consume({ context: fullEntitiesContext, subscribe: true })
   _entityReg: EntityRegistryEntry[] = [];
@@ -59,14 +68,19 @@ export class HaDeviceAction extends LitElement {
     }
   );
 
-  public shouldUpdate(changedProperties: PropertyValues<this>) {
-    if (!changedProperties.has("action")) {
-      return true;
+  public shouldUpdate(_changedProperties: PropertyValues<this>) {
+    const mode = deviceAutomationEditorMode(
+      this.hass,
+      this.action.device_id,
+      this._compositeSplits
+    );
+    if (mode === "loading") {
+      // The device is missing; wait for the composite split map before deciding
+      // whether it is a replaced device (editable) or genuinely unknown (YAML).
+      this._loadCompositeSplits();
+      return false;
     }
-    if (
-      this.action.device_id &&
-      !(this.action.device_id in this.hass.devices)
-    ) {
+    if (mode === "unknown-device") {
       fireEvent(
         this,
         "ui-mode-not-available",
@@ -81,6 +95,20 @@ export class HaDeviceAction extends LitElement {
     return true;
   }
 
+  private async _loadCompositeSplits() {
+    if (this._loadingCompositeSplits) {
+      return;
+    }
+    this._loadingCompositeSplits = true;
+    try {
+      this._compositeSplits = await fetchDeviceCompositeSplits(this.hass);
+    } catch (_err) {
+      this._compositeSplits = {};
+    } finally {
+      this._loadingCompositeSplits = false;
+    }
+  }
+
   protected render() {
     const deviceId = this._deviceId || this.action.device_id;
 

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

@@ -13,11 +13,16 @@ import type {
   DeviceCondition,
 } from "../../../../../data/device/device_automation";
 import {
+  deviceAutomationEditorMode,
   deviceAutomationsEqual,
   fetchDeviceConditionCapabilities,
   localizeExtraFieldsComputeHelperCallback,
   localizeExtraFieldsComputeLabelCallback,
 } from "../../../../../data/device/device_automation";
+import {
+  fetchDeviceCompositeSplits,
+  type DeviceCompositeSplits,
+} from "../../../../../data/device/device_registry";
 import type { EntityRegistryEntry } from "../../../../../data/entity/entity_registry";
 import type { HomeAssistant } from "../../../../../types";
 
@@ -33,6 +38,10 @@ export class HaDeviceCondition extends LitElement {
 
   @state() private _capabilities?: DeviceCapabilities;
 
+  @state() private _compositeSplits?: DeviceCompositeSplits;
+
+  private _loadingCompositeSplits = false;
+
   @state()
   @consume({ context: fullEntitiesContext, subscribe: true })
   _entityReg: EntityRegistryEntry[] = [];
@@ -60,14 +69,19 @@ export class HaDeviceCondition extends LitElement {
     }
   );
 
-  public shouldUpdate(changedProperties: PropertyValues<this>) {
-    if (!changedProperties.has("condition")) {
-      return true;
+  public shouldUpdate(_changedProperties: PropertyValues<this>) {
+    const mode = deviceAutomationEditorMode(
+      this.hass,
+      this.condition.device_id,
+      this._compositeSplits
+    );
+    if (mode === "loading") {
+      // The device is missing; wait for the composite split map before deciding
+      // whether it is a replaced device (editable) or genuinely unknown (YAML).
+      this._loadCompositeSplits();
+      return false;
     }
-    if (
-      this.condition.device_id &&
-      !(this.condition.device_id in this.hass.devices)
-    ) {
+    if (mode === "unknown-device") {
       fireEvent(
         this,
         "ui-mode-not-available",
@@ -82,6 +96,20 @@ export class HaDeviceCondition extends LitElement {
     return true;
   }
 
+  private async _loadCompositeSplits() {
+    if (this._loadingCompositeSplits) {
+      return;
+    }
+    this._loadingCompositeSplits = true;
+    try {
+      this._compositeSplits = await fetchDeviceCompositeSplits(this.hass);
+    } catch (_err) {
+      this._compositeSplits = {};
+    } finally {
+      this._loadingCompositeSplits = false;
+    }
+  }
+
   protected render() {
     const deviceId = this._deviceId || this.condition.device_id;
 

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

@@ -33,11 +33,16 @@ import type { ConfigEntry } from "../../../../data/config_entries";
 import {
   apiContext,
   configEntriesContext,
+  connectionContext,
   internationalizationContext,
   labelsContext,
   registriesContext,
   statesContext,
 } from "../../../../data/context";
+import {
+  fetchDeviceCompositeSplits,
+  type DeviceCompositeSplits,
+} from "../../../../data/device/device_registry";
 import type { LabelRegistryEntry } from "../../../../data/label/label_registry";
 import {
   deviceMeetsTargetSelector,
@@ -89,9 +94,16 @@ export class HaAutomationRowTargets extends LitElement {
   @consume({ context: apiContext, subscribe: true })
   private _api!: ContextType<typeof apiContext>;
 
+  @consume({ context: connectionContext, subscribe: true })
+  private _connection!: ContextType<typeof connectionContext>;
+
   @consume({ context: statesContext, subscribe: true })
   private _states!: ContextType<typeof statesContext>;
 
+  @state() private _compositeSplits?: DeviceCompositeSplits;
+
+  private _loadingCompositeSplits = false;
+
   private _countCache = new Map<
     string,
     Promise<number | undefined> | number | undefined
@@ -108,6 +120,43 @@ export class HaAutomationRowTargets extends LitElement {
     ) {
       this._rerenderCount = true;
     }
+
+    if (
+      (changedProps.has("target") || changedProps.has("_registries")) &&
+      this._compositeSplits === undefined &&
+      !this._loadingCompositeSplits &&
+      this._hasMissingDevice()
+    ) {
+      // A referenced device is missing from the registry; it might be a legacy
+      // composite device that was split. Fetch the split map so we can flag it.
+      this._loadCompositeSplits();
+    }
+  }
+
+  private _hasMissingDevice(): boolean {
+    const deviceIds = this.target?.device_id
+      ? ensureArray(this.target.device_id)
+      : [];
+    return deviceIds.some(
+      (id) => !isTemplate(id) && !this._registries?.devices?.[id]
+    );
+  }
+
+  private async _loadCompositeSplits() {
+    if (!this._api || !this._connection) {
+      return;
+    }
+    this._loadingCompositeSplits = true;
+    try {
+      this._compositeSplits = await fetchDeviceCompositeSplits({
+        connection: this._connection.connection,
+        callWS: this._api.callWS,
+      });
+    } catch (_err) {
+      this._compositeSplits = {};
+    } finally {
+      this._loadingCompositeSplits = false;
+    }
   }
 
   protected updated(changedProps: PropertyValues) {
@@ -342,7 +391,8 @@ export class HaAutomationRowTargets extends LitElement {
     error = false,
     targetId?: string,
     targetType?: string,
-    countTemplate: unknown = nothing
+    countTemplate: unknown = nothing,
+    title?: string
   ) {
     if (!this.interactive || !targetId || !targetType) {
       return html`<div
@@ -351,6 +401,7 @@ export class HaAutomationRowTargets extends LitElement {
           warning,
           error,
         })}
+        title=${title ?? nothing}
         .targetId=${targetId}
         .targetType=${targetType}
         .label=${label}
@@ -366,6 +417,7 @@ export class HaAutomationRowTargets extends LitElement {
         warning,
         error,
       })}
+      title=${title ?? nothing}
       .targetId=${targetId}
       .targetType=${targetType}
       .label=${label}
@@ -385,6 +437,7 @@ export class HaAutomationRowTargets extends LitElement {
     let icon: string | undefined;
     let label: string;
     let warning = false;
+    let title: string | undefined;
     let badgeTargetId: string | undefined = targetId;
     let badgeTargetType: string | undefined = targetType;
     let countTemplate: unknown = nothing;
@@ -408,17 +461,28 @@ export class HaAutomationRowTargets extends LitElement {
       const exists = this._checkTargetExists(targetType, targetId);
       if (!exists) {
         icon = mdiAlert;
-        label = getTargetText(
-          this._registries,
-          this._states,
-          this._i18n.localize,
-          targetType,
-          targetId,
-          this._getLabel
-        );
         warning = true;
         badgeTargetId = undefined;
         badgeTargetType = undefined;
+        if (targetType === "device" && this._compositeSplits?.[targetId]) {
+          // The device was replaced by one or more split devices; make clear
+          // this reference needs to be updated, distinct from "unknown device".
+          label = this._i18n.localize(
+            "ui.panel.config.automation.editor.target_summary.device_replaced"
+          );
+          title = this._i18n.localize(
+            "ui.panel.config.automation.editor.target_summary.device_replaced_description"
+          );
+        } else {
+          label = getTargetText(
+            this._registries,
+            this._states,
+            this._i18n.localize,
+            targetType,
+            targetId,
+            this._getLabel
+          );
+        }
       } else {
         label = getTargetText(
           this._registries,
@@ -456,6 +520,7 @@ export class HaAutomationRowTargets extends LitElement {
           targetType: badgeTargetType,
           label,
         }}
+        title=${title ?? nothing}
         class=${classMap({
           warning,
         })}
@@ -470,7 +535,8 @@ export class HaAutomationRowTargets extends LitElement {
       false,
       badgeTargetId,
       badgeTargetType,
-      countTemplate
+      countTemplate,
+      title
     );
   }
 

src/panels/config/automation/trigger/types/ha-automation-trigger-device.ts

@@ -15,11 +15,16 @@ import type {
   DeviceTrigger,
 } from "../../../../../data/device/device_automation";
 import {
+  deviceAutomationEditorMode,
   deviceAutomationsEqual,
   fetchDeviceTriggerCapabilities,
   localizeExtraFieldsComputeHelperCallback,
   localizeExtraFieldsComputeLabelCallback,
 } from "../../../../../data/device/device_automation";
+import {
+  fetchDeviceCompositeSplits,
+  type DeviceCompositeSplits,
+} from "../../../../../data/device/device_registry";
 import type { EntityRegistryEntry } from "../../../../../data/entity/entity_registry";
 import type { HomeAssistant } from "../../../../../types";
 
@@ -35,6 +40,10 @@ export class HaDeviceTrigger extends LitElement {
 
   @state() private _capabilities?: DeviceCapabilities;
 
+  @state() private _compositeSplits?: DeviceCompositeSplits;
+
+  private _loadingCompositeSplits = false;
+
   @state()
   @consume({ context: fullEntitiesContext, subscribe: true })
   _entityReg: EntityRegistryEntry[] = [];
@@ -64,14 +73,19 @@ export class HaDeviceTrigger extends LitElement {
     }
   );
 
-  public shouldUpdate(changedProperties: PropertyValues<this>) {
-    if (!changedProperties.has("trigger")) {
-      return true;
+  public shouldUpdate(_changedProperties: PropertyValues<this>) {
+    const mode = deviceAutomationEditorMode(
+      this.hass,
+      this.trigger.device_id,
+      this._compositeSplits
+    );
+    if (mode === "loading") {
+      // The device is missing; wait for the composite split map before deciding
+      // whether it is a replaced device (editable) or genuinely unknown (YAML).
+      this._loadCompositeSplits();
+      return false;
     }
-    if (
-      this.trigger.device_id &&
-      !(this.trigger.device_id in this.hass.devices)
-    ) {
+    if (mode === "unknown-device") {
       fireEvent(
         this,
         "ui-mode-not-available",
@@ -86,6 +100,20 @@ export class HaDeviceTrigger extends LitElement {
     return true;
   }
 
+  private async _loadCompositeSplits() {
+    if (this._loadingCompositeSplits) {
+      return;
+    }
+    this._loadingCompositeSplits = true;
+    try {
+      this._compositeSplits = await fetchDeviceCompositeSplits(this.hass);
+    } catch (_err) {
+      this._compositeSplits = {};
+    } finally {
+      this._loadingCompositeSplits = false;
+    }
+  }
+
   protected render() {
     const deviceId = this._deviceId || this.trigger.device_id;
 

src/panels/config/config-sections.ts

@@ -22,6 +22,7 @@ import {
   mdiPuzzle,
   mdiRadioTower,
   mdiRemote,
+  mdiRenameOutline,
   mdiRobot,
   mdiScrewdriver,
   mdiScriptText,
@@ -494,6 +495,14 @@ export const configSections: Record<string, PageNavigation[]> = {
       component: "backup",
       adminOnly: true,
     },
+    {
+      path: "/config/entity-id-format",
+      translationKey: "entity_id_format",
+      iconPath: mdiRenameOutline,
+      iconColor: "#24a5cb",
+      core: true,
+      adminOnly: true,
+    },
     {
       path: "/config/analytics",
       translationKey: "analytics",

src/panels/config/core/ha-config-entity-id-format.ts

@@ -0,0 +1,229 @@
+import { consume, type ContextType } from "@lit/context";
+import { mdiRestore } from "@mdi/js";
+import type { PropertyValues } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { consumeLocalize } from "../../../common/decorators/consume-context-entry";
+import { computeEntityIdFormatExample } from "../../../common/entity/compute_entity_id_format_example";
+import type { LocalizeFunc } from "../../../common/translations/localize";
+import type { HaProgressButton } from "../../../components/buttons/ha-progress-button";
+import "../../../components/buttons/ha-progress-button";
+import "../../../components/ha-alert";
+import "../../../components/ha-button";
+import "../../../components/ha-card";
+import "../../../components/ha-svg-icon";
+import { apiContext, configContext } from "../../../data/context";
+import {
+  fetchEntityRegistrySettings,
+  updateEntityRegistrySettings,
+} from "../../../data/entity/entity_registry_settings";
+import {
+  DEFAULT_ENTITY_ID_FORMAT,
+  isDefaultEntityIdFormat,
+  type EntityIdFormat,
+  type EntityIdPart,
+} from "../../../data/entity_id_format";
+import { haStyle } from "../../../resources/styles";
+import { documentationUrl } from "../../../util/documentation-url";
+import "./ha-entity-id-format-editor";
+
+const EXAMPLE_DOMAIN = "sensor";
+
+@customElement("ha-config-entity-id-format")
+export class HaConfigEntityIdFormat extends LitElement {
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
+  @state()
+  @consume({ context: apiContext, subscribe: true })
+  private _api!: ContextType<typeof apiContext>;
+
+  @state()
+  @consume({ context: configContext, subscribe: true })
+  private _config!: ContextType<typeof configContext>;
+
+  @state() private _format?: EntityIdFormat;
+
+  @state() private _error?: string;
+
+  protected async firstUpdated(changedProps: PropertyValues<this>) {
+    super.firstUpdated(changedProps);
+    try {
+      const settings = await fetchEntityRegistrySettings(this._api);
+      this._format = settings.entity_id_parts ?? DEFAULT_ENTITY_ID_FORMAT;
+    } catch (err: any) {
+      this._error = err.message;
+    }
+  }
+
+  private _examples = memoizeOne(
+    (localize: LocalizeFunc): Record<EntityIdPart, string> => ({
+      area: localize(
+        "ui.panel.config.entity_id_format.card.editor.examples.area"
+      ),
+      device: localize(
+        "ui.panel.config.entity_id_format.card.editor.examples.device"
+      ),
+      entity: localize(
+        "ui.panel.config.entity_id_format.card.editor.examples.entity"
+      ),
+      floor: localize(
+        "ui.panel.config.entity_id_format.card.editor.examples.floor"
+      ),
+    })
+  );
+
+  protected render() {
+    return html`
+      <ha-card
+        outlined
+        .header=${this._localize(
+          "ui.panel.config.entity_id_format.card.header"
+        )}
+      >
+        <div class="card-content">
+          ${
+            this._error
+              ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+              : nothing
+          }
+          <p class="description">
+            ${this._localize(
+              "ui.panel.config.entity_id_format.card.description"
+            )}
+            <a
+              href=${documentationUrl(
+                this._config,
+                "/docs/configuration/customizing-devices/"
+              )}
+              target="_blank"
+              rel="noreferrer"
+              >${this._localize(
+                "ui.panel.config.entity_id_format.card.learn_more"
+              )}</a
+            >
+          </p>
+          ${
+            this._format
+              ? html`
+                  <ha-entity-id-format-editor
+                    .value=${this._format}
+                    .label=${this._localize(
+                      "ui.panel.config.entity_id_format.card.editor.label"
+                    )}
+                    @value-changed=${this._formatChanged}
+                  ></ha-entity-id-format-editor>
+                  ${this._renderPreview()}
+                `
+              : nothing
+          }
+        </div>
+        <div class="card-actions">
+          <ha-button
+            appearance="plain"
+            @click=${this._reset}
+            .disabled=${!this._format || isDefaultEntityIdFormat(this._format)}
+          >
+            <ha-svg-icon slot="start" .path=${mdiRestore}></ha-svg-icon>
+            ${this._localize("ui.panel.config.entity_id_format.card.reset")}
+          </ha-button>
+          <ha-progress-button
+            appearance="filled"
+            @click=${this._save}
+            .disabled=${!this._format}
+          >
+            ${this._localize("ui.common.save")}
+          </ha-progress-button>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  private _renderPreview() {
+    const example = computeEntityIdFormatExample(
+      this._format!,
+      this._examples(this._localize)
+    );
+    return html`
+      <div class="preview">
+        <span class="preview-label">
+          ${this._localize("ui.panel.config.entity_id_format.card.preview")}
+        </span>
+        <code>${EXAMPLE_DOMAIN}.${example}</code>
+      </div>
+    `;
+  }
+
+  private _formatChanged(ev: CustomEvent) {
+    this._format = ev.detail.value;
+  }
+
+  private _reset() {
+    this._format = [...DEFAULT_ENTITY_ID_FORMAT];
+  }
+
+  private async _save(ev: Event) {
+    const button = ev.currentTarget as HaProgressButton;
+    if (button.progress) {
+      return;
+    }
+    button.progress = true;
+    this._error = undefined;
+    try {
+      const format = this._format!;
+      const settings = await updateEntityRegistrySettings(this._api, {
+        entity_id_parts: isDefaultEntityIdFormat(format) ? null : format,
+      });
+      this._format = settings.entity_id_parts ?? DEFAULT_ENTITY_ID_FORMAT;
+      button.actionSuccess();
+    } catch (err: any) {
+      button.actionError();
+      this._error = err.message;
+    } finally {
+      button.progress = false;
+    }
+  }
+
+  static styles = [
+    haStyle,
+    css`
+      :host {
+        display: block;
+      }
+      .description {
+        margin-top: 0;
+        color: var(--secondary-text-color);
+      }
+      .preview {
+        display: flex;
+        flex-direction: column;
+        gap: var(--ha-space-1);
+        margin-top: var(--ha-space-5);
+      }
+      .preview-label {
+        font-weight: 500;
+      }
+      .preview code {
+        display: block;
+        padding: var(--ha-space-3);
+        border-radius: var(--ha-border-radius-md);
+        background-color: var(--secondary-background-color);
+        font-family: var(--ha-font-family-code);
+        overflow-wrap: anywhere;
+      }
+      .card-actions {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-config-entity-id-format": HaConfigEntityIdFormat;
+  }
+}

src/panels/config/core/ha-config-section-entity-id-format.ts

@@ -0,0 +1,51 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../layouts/hass-subpage";
+import type { HomeAssistant } from "../../../types";
+import "./ha-config-entity-id-format";
+
+@customElement("ha-config-section-entity-id-format")
+export class HaConfigSectionEntityIdFormat extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean }) public narrow = false;
+
+  protected render() {
+    return html`
+      <hass-subpage
+        back-path="/config/system"
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        .header=${this.hass.localize(
+          "ui.panel.config.entity_id_format.caption"
+        )}
+      >
+        <div class="content">
+          <ha-config-entity-id-format></ha-config-entity-id-format>
+        </div>
+      </hass-subpage>
+    `;
+  }
+
+  static styles = css`
+    .content {
+      padding: var(--ha-space-7) var(--ha-space-5) 0;
+      max-width: 1040px;
+      margin: 0 auto;
+      display: flex;
+      flex-direction: column;
+      gap: var(--ha-space-5);
+    }
+    ha-config-entity-id-format {
+      max-width: 600px;
+      margin: 0 auto;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-config-section-entity-id-format": HaConfigSectionEntityIdFormat;
+  }
+}

src/panels/config/core/ha-entity-id-format-editor.ts

@@ -0,0 +1,348 @@
+import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
+import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { repeat } from "lit/directives/repeat";
+import memoizeOne from "memoize-one";
+import { consumeLocalize } from "../../../common/decorators/consume-context-entry";
+import { fireEvent } from "../../../common/dom/fire_event";
+import type { LocalizeFunc } from "../../../common/translations/localize";
+import "../../../components/chips/ha-assist-chip";
+import "../../../components/chips/ha-chip-set";
+import "../../../components/chips/ha-input-chip";
+import "../../../components/ha-combo-box-item";
+import "../../../components/ha-generic-picker";
+import type { HaGenericPicker } from "../../../components/ha-generic-picker";
+import type { PickerComboBoxItem } from "../../../components/ha-picker-combo-box";
+import "../../../components/ha-sortable";
+import "../../../components/ha-svg-icon";
+import type {
+  EntityIdFormat,
+  EntityIdPart,
+} from "../../../data/entity_id_format";
+import type { ValueChangedEvent } from "../../../types";
+
+const STRUCTURAL_TYPES = ["area", "device", "entity", "floor"] as const;
+
+const REQUIRED_TYPES: readonly EntityIdPart[] = ["device", "entity"];
+
+const rowRenderer: RenderItemFunction<PickerComboBoxItem> = (item) => html`
+  <ha-combo-box-item type="button" compact>
+    <span slot="headline">${item.primary}</span>
+  </ha-combo-box-item>
+`;
+
+const encodeType = (type: EntityIdPart) => `___${type}___`;
+
+const decodeType = (value: string): EntityIdPart | undefined => {
+  const type =
+    value.startsWith("___") && value.endsWith("___")
+      ? value.slice(3, -3)
+      : value;
+  return (STRUCTURAL_TYPES as readonly string[]).includes(type)
+    ? (type as EntityIdPart)
+    : undefined;
+};
+
+@customElement("ha-entity-id-format-editor")
+export class HaEntityIdFormatEditor extends LitElement {
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
+  @property({ attribute: false }) public value: EntityIdFormat = [];
+
+  @property() public label?: string;
+
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
+  @query("ha-generic-picker") private _picker?: HaGenericPicker;
+
+  private _editIndex?: number;
+
+  protected render() {
+    return html`
+      <div class="container">
+        ${this.label ? html`<label>${this.label}</label>` : nothing}
+        <ha-generic-picker
+          .disabled=${this.disabled}
+          .getItems=${this._getFilteredItems}
+          .rowRenderer=${rowRenderer}
+          .value=${this._getPickerValue()}
+          @value-changed=${this._pickerValueChanged}
+          .searchLabel=${this._localize(
+            "ui.panel.config.entity_id_format.card.editor.search"
+          )}
+        >
+          <div slot="field" class="field">
+            <ha-sortable
+              no-style
+              @item-moved=${this._moveItem}
+              .disabled=${this.disabled}
+              handle-selector="button.primary.action"
+              filter=".add"
+            >
+              <ha-chip-set>
+                ${repeat(
+                  this.value,
+                  (item) => item,
+                  (item: EntityIdPart, idx) => {
+                    const label = this._formatType(item);
+                    if (REQUIRED_TYPES.includes(item)) {
+                      return html`
+                        <ha-assist-chip
+                          filled
+                          class="required"
+                          .label=${label}
+                          .disabled=${this.disabled}
+                        >
+                          <ha-svg-icon
+                            slot="icon"
+                            .path=${mdiDragHorizontalVariant}
+                          ></ha-svg-icon>
+                        </ha-assist-chip>
+                      `;
+                    }
+                    return html`
+                      <ha-input-chip
+                        data-idx=${idx}
+                        @remove=${this._removeItem}
+                        @click=${this._editItem}
+                        .label=${label}
+                        .selected=${!this.disabled}
+                        .disabled=${this.disabled}
+                      >
+                        <ha-svg-icon
+                          slot="icon"
+                          .path=${mdiDragHorizontalVariant}
+                        ></ha-svg-icon>
+                      </ha-input-chip>
+                    `;
+                  }
+                )}
+                ${
+                  this.disabled
+                    ? nothing
+                    : html`
+                        <ha-assist-chip
+                          @click=${this._addItem}
+                          .disabled=${this.disabled}
+                          label=${this._localize(
+                            "ui.panel.config.entity_id_format.card.editor.add"
+                          )}
+                          class="add"
+                        >
+                          <ha-svg-icon
+                            slot="icon"
+                            .path=${mdiPlus}
+                          ></ha-svg-icon>
+                        </ha-assist-chip>
+                      `
+                }
+              </ha-chip-set>
+            </ha-sortable>
+          </div>
+        </ha-generic-picker>
+      </div>
+    `;
+  }
+
+  private async _addItem(ev: Event) {
+    ev.stopPropagation();
+    this._editIndex = undefined;
+    await this.updateComplete;
+    await this._picker?.open();
+  }
+
+  private async _editItem(ev: Event) {
+    ev.stopPropagation();
+    const idx = parseInt(
+      (ev.currentTarget as HTMLElement).dataset.idx || "",
+      10
+    );
+    this._editIndex = idx;
+    await this.updateComplete;
+    await this._picker?.open();
+  }
+
+  private _moveItem(ev: CustomEvent) {
+    ev.stopPropagation();
+    const { oldIndex, newIndex } = ev.detail;
+    const newValue = this.value.concat();
+    const element = newValue.splice(oldIndex, 1)[0];
+    newValue.splice(newIndex, 0, element);
+    this._setValue(newValue);
+  }
+
+  private _removeItem(ev: Event) {
+    ev.stopPropagation();
+    const value = [...this.value];
+    const idx = parseInt((ev.target as HTMLElement).dataset.idx || "", 10);
+    value.splice(idx, 1);
+    this._setValue(value);
+  }
+
+  private _pickerValueChanged(ev: ValueChangedEvent<string>): void {
+    ev.stopPropagation();
+    const value = ev.detail.value;
+
+    if (this.disabled || !value) {
+      return;
+    }
+
+    const type = decodeType(value);
+    if (!type) {
+      return;
+    }
+
+    const newValue = [...this.value];
+
+    if (this._editIndex != null) {
+      newValue[this._editIndex] = type;
+      this._editIndex = undefined;
+    } else {
+      newValue.push(type);
+    }
+
+    this._setValue(newValue);
+
+    if (this._picker) {
+      this._picker.value = undefined;
+    }
+  }
+
+  private _setValue(value: EntityIdFormat) {
+    this.value = value;
+    fireEvent(this, "value-changed", { value });
+  }
+
+  private _formatType = (type: EntityIdPart) =>
+    this._localize(`ui.components.entity.entity-name-picker.types.${type}`);
+
+  private _getItems = memoizeOne(
+    (localize: LocalizeFunc): PickerComboBoxItem[] =>
+      STRUCTURAL_TYPES.map((type) => {
+        const primary = localize(
+          `ui.components.entity.entity-name-picker.types.${type}`
+        );
+        const id = encodeType(type);
+        return {
+          id,
+          primary,
+          search_labels: { primary, id },
+          sorting_label: primary,
+        };
+      })
+  );
+
+  private _getPickerValue(): string | undefined {
+    if (this._editIndex != null) {
+      const item = this.value[this._editIndex];
+      return item ? encodeType(item) : undefined;
+    }
+    return undefined;
+  }
+
+  private _getFilteredItems = (): PickerComboBoxItem[] => {
+    const items = this._getItems(this._localize);
+    const currentValue =
+      this._editIndex != null
+        ? encodeType(this.value[this._editIndex])
+        : undefined;
+
+    const usedValues = new Set(this.value.map((item) => encodeType(item)));
+
+    return items.filter(
+      (item) => !usedValues.has(item.id) || item.id === currentValue
+    );
+  };
+
+  static styles = css`
+    :host {
+      position: relative;
+      width: 100%;
+    }
+
+    .container {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ha-space-2);
+    }
+
+    label {
+      display: block;
+      font-weight: 500;
+    }
+
+    ha-generic-picker {
+      width: 100%;
+    }
+
+    .field {
+      position: relative;
+      background-color: var(--mdc-text-field-fill-color, whitesmoke);
+      border-radius: var(--ha-border-radius-sm);
+      border-end-end-radius: var(--ha-border-radius-square);
+      border-end-start-radius: var(--ha-border-radius-square);
+    }
+    .field:after {
+      display: block;
+      content: "";
+      position: absolute;
+      pointer-events: none;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 1px;
+      width: 100%;
+      background-color: var(
+        --mdc-text-field-idle-line-color,
+        rgba(0, 0, 0, 0.42)
+      );
+    }
+    :host([disabled]) .field:after {
+      background-color: var(
+        --mdc-text-field-disabled-line-color,
+        rgba(0, 0, 0, 0.42)
+      );
+    }
+    .field:focus-within:after {
+      height: 2px;
+      background-color: var(--mdc-theme-primary);
+    }
+
+    ha-chip-set {
+      padding: var(--ha-space-3);
+    }
+
+    ha-assist-chip.required {
+      --ha-assist-chip-filled-container-color: rgba(
+        var(--rgb-primary-text-color),
+        0.15
+      );
+    }
+
+    .add {
+      order: 1;
+    }
+
+    .sortable-fallback {
+      display: none;
+      opacity: 0;
+    }
+
+    .sortable-ghost {
+      opacity: 0.4;
+    }
+
+    .sortable-drag {
+      cursor: grabbing;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-entity-id-format-editor": HaEntityIdFormatEditor;
+  }
+}

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

@@ -82,6 +82,7 @@ class HaPanelConfig extends HassRouterPage {
       info: {
         tag: "ha-config-info",
         load: () => import("./info/ha-config-info"),
+        waitForReady: true,
       },
       // customize was removed in 2021.12, fallback to dashboard
       customize: "dashboard",
@@ -170,6 +171,10 @@ class HaPanelConfig extends HassRouterPage {
         tag: "ha-config-section-ai-tasks",
         load: () => import("./core/ha-config-section-ai-tasks"),
       },
+      "entity-id-format": {
+        tag: "ha-config-section-entity-id-format",
+        load: () => import("./core/ha-config-section-entity-id-format"),
+      },
       zha: {
         tag: "zha-config-dashboard-router",
         load: () =>

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

@@ -24,6 +24,7 @@ import { fetchHassioInfo } from "../../../data/hassio/supervisor";
 import { subscribeSystemHealthInfo } from "../../../data/system_health";
 import { showShortcutsDialog } from "../../../dialogs/shortcuts/show-shortcuts-dialog";
 import "../../../layouts/hass-subpage";
+import { panelIsReady } from "../../../layouts/panel-ready";
 import { mdiHomeAssistant } from "../../../resources/home-assistant-logo-svg";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../types";
@@ -289,6 +290,7 @@ class HaConfigInfo extends LitElement {
       if (info?.homeassistant) {
         this._installationMethod = info.homeassistant.info.installation_type;
         unsubSystemHealth.then((unsub) => unsub());
+        panelIsReady(this);
       }
     });
   }

src/translations/en.json

@@ -804,6 +804,9 @@
         "device_not_found": "Device not found",
         "entity_not_found": "Entity not found",
         "label_not_found": "Label not found",
+        "replaced_device": "Replaced device",
+        "device_replaced": "Replaced by {count} {count, plural,\n one {device}\n other {devices}\n}",
+        "replace_device": "Replace",
         "devices_count": "{count} {count, plural,\n one {device}\n other {devices}\n}",
         "entities_count": "{count} {count, plural,\n one {entity}\n other {entities}\n}",
         "target_details": "Target details",
@@ -916,7 +919,16 @@
         "unnamed_device": "Unnamed device",
         "no_area": "No area",
         "placeholder": "Select a device",
-        "unknown": "Unknown device selected"
+        "unknown": "Unknown device selected",
+        "device_replaced_count": "Replaced by {count} {count, plural,\n one {device}\n other {devices}\n}",
+        "device_replaced_by_one": "This device was replaced by {device}.",
+        "device_replaced_by_multiple": "This device was replaced by {count} devices.",
+        "replace_device": "Replace",
+        "replaced_dialog": {
+          "title": "Replace device",
+          "description": "This device was replaced by multiple devices. Choose which one to use.",
+          "recommended": "Recommended"
+        }
       },
       "category-picker": {
         "clear": "Clear",
@@ -5208,6 +5220,8 @@
               "all_entities": "All entities",
               "none_entities": "No entities",
               "template": "Template",
+              "device_replaced": "Replaced device",
+              "device_replaced_description": "This device was replaced by one or more new devices. Update this automation to use them.",
               "types": {
                 "entity": "[%key:ui::components::target-picker::type::entities%]",
                 "device": "[%key:ui::components::target-picker::type::devices%]",
@@ -6410,7 +6424,7 @@
           "account": {
             "thank_you_title": "Thank you!",
             "getting_renewal_date": "Getting renewal date…",
-            "funding_note": "Every subscription funds Home Assistant and the Open Home Foundation, paying full-time developers and keeping the project independent. No private equity, no ads, and no data harvesting.",
+            "funding_note": "Every Cloud subscription funds the Open Home Foundation, paying full-time developers to work on and keep the Home Assistant project independent. No private equity, no ads, no data harvesting.",
             "email": "Email",
             "show_email": "Show email",
             "hide_email": "Hide email",
@@ -6542,7 +6556,7 @@
             "reset_data_confirm_text": "This will reset all your cloud settings. This includes your remote connection, Google Assistant, and Amazon Alexa integrations. This action cannot be undone.",
             "reset": "Reset",
             "reset_data_failed": "Failed to reset cloud data",
-            "thank_you_note": "Thank you for being part of Home Assistant Cloud. It's because of people like you that we are able to make a great home automation experience for everyone. Thank you!",
+            "thank_you_note": "It's because of people like you that we are able to make a great home automation experience for everyone.",
             "nabu_casa_account": "Nabu Casa account",
             "connection_status": "Cloud connection status",
             "manage_account": "Manage account",
@@ -8618,6 +8632,28 @@
           "caption": "AI tasks",
           "description": "Configure AI suggestions and task preferences"
         },
+        "entity_id_format": {
+          "caption": "Entity ID format",
+          "description": "Manage the format of newly created entity IDs",
+          "card": {
+            "header": "Entity ID format for new entities",
+            "description": "Entity IDs are used to reference entities in automations, scripts, and dashboards. This format only applies when a new entity is created. Using it is optional, and you can still rename each entity ID afterwards in its settings",
+            "learn_more": "Learn more",
+            "preview": "Preview",
+            "reset": "Reset to default",
+            "editor": {
+              "label": "Format",
+              "add": "Add",
+              "search": "Search part",
+              "examples": {
+                "area": "Living room",
+                "device": "Thermostat",
+                "entity": "Temperature",
+                "floor": "Ground floor"
+              }
+            }
+          }
+        },
         "labs": {
           "caption": "Labs",
           "custom_integration": "Custom integration",

test/layouts/hass-router-page.test.ts

@@ -0,0 +1,111 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ReactiveElement } from "lit";
+import { state } from "lit/decorators";
+import type { RouterOptions } from "../../src/layouts/hass-router-page";
+import { HassRouterPage } from "../../src/layouts/hass-router-page";
+import { panelIsReady } from "../../src/layouts/panel-ready";
+
+class TestRouter extends HassRouterPage {
+  protected routerOptions: RouterOptions = {
+    routes: {
+      immediate: { tag: "test-immediate-panel" },
+      deferred: { tag: "test-deferred-panel", waitForReady: true },
+      loaded: {
+        tag: "test-loaded-panel",
+        load: () => loadedPanelImport,
+        waitForReady: true,
+      },
+    },
+  };
+
+  public get rendered() {
+    return this.pageRendered;
+  }
+}
+
+class ImmediatePanel extends HTMLElement {}
+
+class DeferredPanel extends ReactiveElement {
+  @state() public loaded = false;
+}
+
+let resolveLoadedPanelImport: () => void;
+const loadedPanelImport = new Promise<void>((resolve) => {
+  resolveLoadedPanelImport = resolve;
+});
+
+class LoadedPanel extends HTMLElement {}
+
+customElements.define("test-router", TestRouter);
+customElements.define("test-immediate-panel", ImmediatePanel);
+customElements.define("test-deferred-panel", DeferredPanel);
+
+let router: TestRouter | undefined;
+
+const mountRouter = async (path: string) => {
+  router = document.createElement("test-router") as TestRouter;
+  router.route = { prefix: "", path };
+  document.body.append(router);
+  await router.updateComplete;
+  return router;
+};
+
+afterEach(() => {
+  router?.remove();
+  router = undefined;
+});
+
+describe("HassRouterPage panel readiness", () => {
+  it("resolves when a routed panel has no readiness promise", async () => {
+    const element = await mountRouter("/immediate");
+
+    await expect(element.rendered).resolves.toBeUndefined();
+  });
+
+  it("waits for the routed panel readiness promise", async () => {
+    const element = await mountRouter("/deferred");
+    let ready = false;
+    element.rendered.then(() => {
+      ready = true;
+    });
+
+    await Promise.resolve();
+    expect(ready).toBe(false);
+
+    const panel = element.lastElementChild as DeferredPanel;
+    panel.loaded = true;
+    panelIsReady(panel);
+    await Promise.resolve();
+    expect(ready).toBe(false);
+
+    await expect(element.rendered).resolves.toBeUndefined();
+    expect(panel.loaded).toBe(true);
+  });
+
+  it("waits for a dynamically loaded panel before reading its readiness", async () => {
+    const element = await mountRouter("/loaded");
+    let ready = false;
+    element.rendered.then(() => {
+      ready = true;
+    });
+
+    resolveLoadedPanelImport();
+    customElements.define("test-loaded-panel", LoadedPanel);
+    await vi.waitFor(() => {
+      expect(element.lastElementChild).toBeInstanceOf(LoadedPanel);
+    });
+    expect(ready).toBe(false);
+
+    panelIsReady(element.lastElementChild as HTMLElement);
+    await expect(element.rendered).resolves.toBeUndefined();
+  });
+});
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "test-router": TestRouter;
+    "test-immediate-panel": ImmediatePanel;
+    "test-deferred-panel": DeferredPanel;
+    "test-loaded-panel": LoadedPanel;
+  }
+}