Add device context to energy individual device names (#53603)

Add device context to energy individual device labels

Co-authored-by: Simon Lamon <[email protected]>

demo/src/stubs/devices.ts

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

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

@@ -1,3 +1,4 @@
+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";
@@ -8,6 +9,7 @@ import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervis
 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";
@@ -153,6 +155,9 @@ interface Sample {
   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[] = [
@@ -163,6 +168,14 @@ const SAMPLES: Sample[] = [
     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:
@@ -261,13 +274,23 @@ class DemoHaSelectorReplacedDevice
                 <ha-settings-row narrow slot=${slot}>
                   <span slot="heading">${sample.name}</span>
                   <span slot="description">${sample.description}</span>
-                  <ha-selector
-                    .hass=${this.hass}
-                    .selector=${sample.selector}
-                    .value=${this._values[idx]}
-                    .sampleIdx=${idx}
-                    @value-changed=${this._handleValueChanged}
-                  ></ha-selector>
+                  ${
+                    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>
               `
             )}

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

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

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

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

src/components/chart/state-history-chart-timeline.ts

@@ -22,10 +22,6 @@ import { hex2rgb } from "../../common/color/convert-color";
 import { measureTextWidth } from "../../util/text";
 import { fireEvent, type HASSDomEvent } from "../../common/dom/fire_event";
 
-const ROW_HEIGHT = 30;
-// Rows with their name drawn above the bar need room for both.
-const ROW_HEIGHT_INSIDE_LABELS = 64;
-
 @customElement("state-history-chart-timeline")
 export class StateHistoryChartTimeline extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -42,14 +38,6 @@ export class StateHistoryChartTimeline extends LitElement {
 
   @property({ attribute: "show-names", type: Boolean }) public showNames = true;
 
-  /**
-   * Draw each row's name inside the plot, above its bar, instead of in a label
-   * column next to it. Gives long names the full width, at the cost of taller
-   * rows.
-   */
-  @property({ attribute: "inside-labels", type: Boolean })
-  public insideLabels = false;
-
   @property({ attribute: "click-for-more-info", type: Boolean })
   public clickForMoreInfo = true;
 
@@ -79,7 +67,7 @@ export class StateHistoryChartTimeline extends LitElement {
       <ha-chart-base
         .hass=${this.hass}
         .options=${this._chartOptions}
-        .height=${`${this.data.length * (this.insideLabels ? ROW_HEIGHT_INSIDE_LABELS : ROW_HEIGHT) + 30}px`}
+        .height=${`${this.data.length * 30 + 30}px`}
         .data=${this._chartData as HaECSeries}
         small-controls
         @chart-click=${this._handleChartClick}
@@ -194,7 +182,6 @@ export class StateHistoryChartTimeline extends LitElement {
       changedProps.has("startTime") ||
       changedProps.has("endTime") ||
       changedProps.has("showNames") ||
-      changedProps.has("insideLabels") ||
       changedProps.has("paddingYAxis") ||
       changedProps.has("_yWidth")
     ) {
@@ -206,19 +193,14 @@ export class StateHistoryChartTimeline extends LitElement {
     const narrow = this.narrow;
     const showNames = this.chunked || this.showNames;
     const maxInternalLabelWidth = narrow ? 105 : 185;
-    const insideLabels = this.insideLabels;
-    const labelWidth =
-      showNames && !insideLabels
-        ? Math.max(this.paddingYAxis, this._yWidth)
-        : 0;
+    const labelWidth = showNames
+      ? Math.max(this.paddingYAxis, this._yWidth)
+      : 0;
     const labelMargin = 5;
     const rtl = computeRTL(
       this.hass.language,
       this.hass.translationMetadata.translations
     );
-    // Inside labels take no width of their own, but the plot still lines up
-    // with the line charts that share the y-axis padding.
-    const plotPadding = insideLabels ? this.paddingYAxis : labelWidth;
     this._chartOptions = {
       xAxis: {
         type: "time",
@@ -242,52 +224,37 @@ export class StateHistoryChartTimeline extends LitElement {
         axisLine: {
           show: false,
         },
-        axisLabel: insideLabels
-          ? {
-              show: showNames,
-              inside: true,
-              margin: 0,
-              // Sits on the row's baseline, lifted above the bar.
-              padding: [0, rtl ? 2 : 0, 14, rtl ? 0 : 2],
-              align: rtl ? "right" : "left",
-              verticalAlign: "bottom",
-              formatter: (id: string) =>
-                (this._chartData.find((d) => d.id === id)?.name as string) ??
-                "",
-              hideOverlap: true,
+        axisLabel: {
+          show: showNames,
+          width: labelWidth,
+          overflow: "truncate",
+          margin: labelMargin,
+          formatter: (id: string) => {
+            const label = this._chartData.find((d) => d.id === id)
+              ?.name as string;
+            const width = label
+              ? Math.min(
+                  measureTextWidth(label, 12) + labelMargin,
+                  maxInternalLabelWidth
+                )
+              : 0;
+            if (width > this._yWidth) {
+              this._yWidth = width;
+              fireEvent(this, "y-width-changed", {
+                value: this._yWidth,
+                chartIndex: this.chartIndex,
+              });
             }
-          : {
-              show: showNames,
-              width: labelWidth,
-              overflow: "truncate",
-              margin: labelMargin,
-              formatter: (id: string) => {
-                const label = this._chartData.find((d) => d.id === id)
-                  ?.name as string;
-                const width = label
-                  ? Math.min(
-                      measureTextWidth(label, 12) + labelMargin,
-                      maxInternalLabelWidth
-                    )
-                  : 0;
-                if (width > this._yWidth) {
-                  this._yWidth = width;
-                  fireEvent(this, "y-width-changed", {
-                    value: this._yWidth,
-                    chartIndex: this.chartIndex,
-                  });
-                }
-                return label;
-              },
-              hideOverlap: true,
-            },
+            return label;
+          },
+          hideOverlap: true,
+        },
       },
       grid: {
-        // Room for the first row's name above its bar.
-        top: insideLabels ? 20 : 10,
+        top: 10,
         bottom: 30,
-        left: rtl ? 1 : plotPadding,
-        right: rtl ? plotPadding : 1,
+        left: rtl ? 1 : labelWidth,
+        right: rtl ? labelWidth : 1,
       },
       tooltip: {
         renderMode: "html",

src/components/chart/state-history-charts.ts

@@ -79,10 +79,6 @@ export class StateHistoryCharts extends LitElement {
 
   @property({ attribute: "show-names", type: Boolean }) public showNames = true;
 
-  /** Draw timeline row names above their bar instead of in a label column. */
-  @property({ attribute: "inside-labels", type: Boolean, reflect: true })
-  public insideLabels = false;
-
   @property({ attribute: "click-for-more-info", type: Boolean })
   public clickForMoreInfo = true;
 
@@ -231,7 +227,6 @@ export class StateHistoryCharts extends LitElement {
         .startTime=${this._computedStartTime}
         .endTime=${this._computedEndTime}
         .showNames=${this.showNames}
-        .insideLabels=${this.insideLabels}
         .names=${this.names}
         .narrow=${this.narrow}
         .chunked=${this.virtualize}
@@ -429,12 +424,6 @@ export class StateHistoryCharts extends LitElement {
       padding-top: 8px;
     }
 
-    /* Names inside the plot sit close to the chart above them, so the groups
-       need more room between them to stay apart. */
-    :host([inside-labels]) .entry-container.timeline:not(:first-child) {
-      margin-top: var(--ha-space-8);
-    }
-
     .entry-container:hover {
       z-index: 1;
     }

src/components/date-picker/ha-date-range-nav.ts

@@ -1,79 +0,0 @@
-import { mdiCalendar } from "@mdi/js";
-import { css, html } from "lit";
-import { customElement } from "lit/decorators";
-import "../chips/ha-assist-chip";
-import "../ha-icon-button-next";
-import "../ha-icon-button-prev";
-import "../ha-svg-icon";
-import {
-  haDateRangePickerStyles,
-  HaDateRangePicker,
-} from "./ha-date-range-picker";
-
-/**
- * Date range picker as a single pill that also steps through ranges: a
- * previous button, the selected range and a next button. Meant for a toolbar,
- * next to other chips.
- */
-@customElement("ha-date-range-nav")
-export class HaDateRangeNav extends HaDateRangePicker {
-  protected override _renderField() {
-    return html`
-      <ha-icon-button-prev
-        class="step"
-        .label=${this._i18n.localize("ui.common.previous")}
-        .disabled=${this.disabled}
-        @click=${this._handlePrev}
-      ></ha-icon-button-prev>
-      <ha-assist-chip
-        id="field"
-        class="range"
-        .label=${this._formatRange(" – ")}
-        .disabled=${this.disabled}
-        @click=${this._openPicker}
-      >
-        <ha-svg-icon slot="icon" .path=${mdiCalendar}></ha-svg-icon>
-      </ha-assist-chip>
-      <ha-icon-button-next
-        class="step"
-        .label=${this._i18n.localize("ui.common.next")}
-        .disabled=${this.disabled}
-        @click=${this._handleNext}
-      ></ha-icon-button-next>
-    `;
-  }
-
-  static override styles = [
-    haDateRangePickerStyles,
-    css`
-      /* The three controls read as one pill, with the range chip's borders as
-         the dividers between them. */
-      .date-range-inputs {
-        gap: 0;
-        border: 1px solid var(--outline-color);
-        border-radius: var(--ha-assist-chip-container-shape, 10px);
-        background: var(--ha-assist-chip-container-color, transparent);
-        overflow: hidden;
-        width: fit-content;
-      }
-
-      .step {
-        --ha-icon-button-size: 32px;
-        --mdc-icon-size: 20px;
-      }
-
-      .range {
-        --md-assist-chip-outline-color: transparent;
-        --ha-assist-chip-container-shape: 0;
-        --ha-assist-chip-container-color: transparent;
-        border-inline: 1px solid var(--divider-color);
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-date-range-nav": HaDateRangeNav;
-  }
-}

src/components/date-picker/ha-date-range-picker.ts

@@ -42,67 +42,18 @@ const EXTENDED_RANGE_KEYS: DateRange[] = [
   "now-30d",
 ];
 
-export const haDateRangePickerStyles = css`
-  ha-icon-button {
-    direction: var(--direction);
-  }
-
-  .date-range-inputs {
-    display: flex;
-    align-items: center;
-    gap: var(--ha-space-2);
-  }
-
-  ha-textarea {
-    display: inline-block;
-    width: 340px;
-  }
-  @media only screen and (max-width: 460px) {
-    ha-textarea {
-      width: 100%;
-    }
-  }
-
-  wa-popover {
-    --wa-space-l: 0;
-  }
-
-  wa-popover::part(dialog)::backdrop {
-    opacity: 0;
-    transition: opacity var(--ha-animation-duration-normal) ease-out;
-  }
-
-  wa-popover.open::part(dialog)::backdrop {
-    opacity: 1;
-  }
-
-  :host(:not([backdrop])) wa-popover::part(dialog)::backdrop {
-    background: none;
-  }
-
-  wa-popover::part(body) {
-    min-width: max(var(--body-width), 250px);
-    max-width: calc(
-      100vw - var(--safe-area-inset-left) - var(--safe-area-inset-right) - var(
-          --ha-space-8
-        )
-    );
-    overflow: hidden;
-  }
-`;
-
 @customElement("ha-date-range-picker")
 export class HaDateRangePicker extends LitElement {
   @state()
   @consume({ context: internationalizationContext, subscribe: true })
-  protected _i18n!: ContextType<typeof internationalizationContext>;
+  private _i18n!: ContextType<typeof internationalizationContext>;
 
   @state()
   @consume({ context: configContext, subscribe: true })
   @transform<HomeAssistantConfig, HassConfig>({
     transformer: ({ config }) => config,
   })
-  protected _hassConfig!: HassConfig;
+  private _hassConfig!: HassConfig;
 
   @property({ attribute: false }) public startDate!: Date;
 
@@ -192,7 +143,73 @@ export class HaDateRangePicker extends LitElement {
   protected render(): TemplateResult {
     return html`
       <div class="container">
-        <div class="date-range-inputs">${this._renderField()}</div>
+        <div class="date-range-inputs">
+          ${
+            !this.minimal
+              ? html`<ha-textarea
+                    id="field"
+                    rows="1"
+                    resize="auto"
+                    @click=${this._openPicker}
+                    @keydown=${this._handleKeydown}
+                    .value=${
+                      (isThisYear(this.startDate)
+                        ? formatShortDateTime(
+                            this.startDate,
+                            this._i18n.locale,
+                            this._hassConfig
+                          )
+                        : formatShortDateTimeWithYear(
+                            this.startDate,
+                            this._i18n.locale,
+                            this._hassConfig
+                          )) +
+                      (window.innerWidth >= 459 ? " - " : " - \n") +
+                      (isThisYear(this.endDate)
+                        ? formatShortDateTime(
+                            this.endDate,
+                            this._i18n.locale,
+                            this._hassConfig
+                          )
+                        : formatShortDateTimeWithYear(
+                            this.endDate,
+                            this._i18n.locale,
+                            this._hassConfig
+                          ))
+                    }
+                    .label=${
+                      this._i18n.localize(
+                        "ui.components.date-range-picker.start_date"
+                      ) +
+                      " - " +
+                      this._i18n.localize(
+                        "ui.components.date-range-picker.end_date"
+                      )
+                    }
+                    .disabled=${this.disabled}
+                    readonly
+                  ></ha-textarea>
+                  <ha-icon-button-prev
+                    .label=${this._i18n.localize("ui.common.previous")}
+                    @click=${this._handlePrev}
+                  >
+                  </ha-icon-button-prev>
+                  <ha-icon-button-next
+                    .label=${this._i18n.localize("ui.common.next")}
+                    @click=${this._handleNext}
+                  >
+                  </ha-icon-button-next>`
+              : html`<ha-icon-button
+                  @click=${this._openPicker}
+                  .disabled=${this.disabled}
+                  id="field"
+                  .label=${this._i18n.localize(
+                    "ui.components.date-range-picker.select_date_range"
+                  )}
+                  .path=${mdiCalendar}
+                ></ha-icon-button>`
+          }
+        </div>
         ${
           this._pickerWrapperOpen || this._opened
             ? this._openedNarrow
@@ -231,63 +248,6 @@ export class HaDateRangePicker extends LitElement {
     `;
   }
 
-  /**
-   * The control that opens the picker. It has to carry `id="field"`, which the
-   * popover anchors to.
-   */
-  protected _renderField() {
-    if (this.minimal) {
-      return html`<ha-icon-button
-        @click=${this._openPicker}
-        .disabled=${this.disabled}
-        id="field"
-        .label=${this._i18n.localize(
-          "ui.components.date-range-picker.select_date_range"
-        )}
-        .path=${mdiCalendar}
-      ></ha-icon-button>`;
-    }
-
-    return html`<ha-textarea
-        id="field"
-        rows="1"
-        resize="auto"
-        @click=${this._openPicker}
-        @keydown=${this._handleKeydown}
-        .value=${this._formatRange(window.innerWidth >= 459 ? " - " : " - \n")}
-        .label=${
-          this._i18n.localize("ui.components.date-range-picker.start_date") +
-          " - " +
-          this._i18n.localize("ui.components.date-range-picker.end_date")
-        }
-        .disabled=${this.disabled}
-        readonly
-      ></ha-textarea>
-      <ha-icon-button-prev
-        .label=${this._i18n.localize("ui.common.previous")}
-        @click=${this._handlePrev}
-      >
-      </ha-icon-button-prev>
-      <ha-icon-button-next
-        .label=${this._i18n.localize("ui.common.next")}
-        @click=${this._handleNext}
-      >
-      </ha-icon-button-next>`;
-  }
-
-  /** The selected range as text, with the year only when it is not this year. */
-  protected _formatRange(separator: string): string {
-    const format = (date: Date) =>
-      isThisYear(date)
-        ? formatShortDateTime(date, this._i18n.locale, this._hassConfig)
-        : formatShortDateTimeWithYear(
-            date,
-            this._i18n.locale,
-            this._hassConfig
-          );
-    return format(this.startDate) + separator + format(this.endDate);
-  }
-
   private _renderPicker() {
     if (!this._opened) {
       return nothing;
@@ -343,12 +303,12 @@ export class HaDateRangePicker extends LitElement {
     this._opened = false;
   };
 
-  protected _handleNext(ev: MouseEvent): void {
+  private _handleNext(ev: MouseEvent): void {
     if (ev && ev.stopPropagation) ev.stopPropagation();
     this._shift(true);
   }
 
-  protected _handlePrev(ev: MouseEvent): void {
+  private _handlePrev(ev: MouseEvent): void {
     if (ev && ev.stopPropagation) ev.stopPropagation();
     this._shift(false);
   }
@@ -376,7 +336,7 @@ export class HaDateRangePicker extends LitElement {
     this._pickerWrapperOpen = false;
   }
 
-  protected _openPicker(ev?: Event) {
+  private _openPicker(ev?: Event) {
     if (this.disabled) {
       return;
     }
@@ -392,7 +352,7 @@ export class HaDateRangePicker extends LitElement {
     });
   }
 
-  protected _handleKeydown(ev: KeyboardEvent) {
+  private _handleKeydown(ev: KeyboardEvent) {
     if (ev.key === "Enter" || ev.key === " ") {
       ev.stopPropagation();
       this._openPicker(ev);
@@ -409,7 +369,56 @@ export class HaDateRangePicker extends LitElement {
     }
   }
 
-  static styles = [haDateRangePickerStyles];
+  static styles = [
+    css`
+      ha-icon-button {
+        direction: var(--direction);
+      }
+
+      .date-range-inputs {
+        display: flex;
+        align-items: center;
+        gap: var(--ha-space-2);
+      }
+
+      ha-textarea {
+        display: inline-block;
+        width: 340px;
+      }
+      @media only screen and (max-width: 460px) {
+        ha-textarea {
+          width: 100%;
+        }
+      }
+
+      wa-popover {
+        --wa-space-l: 0;
+      }
+
+      wa-popover::part(dialog)::backdrop {
+        opacity: 0;
+        transition: opacity var(--ha-animation-duration-normal) ease-out;
+      }
+
+      wa-popover.open::part(dialog)::backdrop {
+        opacity: 1;
+      }
+
+      :host(:not([backdrop])) wa-popover::part(dialog)::backdrop {
+        background: none;
+      }
+
+      wa-popover::part(body) {
+        min-width: max(var(--body-width), 250px);
+        max-width: calc(
+          100vw - var(--safe-area-inset-left) - var(
+              --safe-area-inset-right
+            ) - var(--ha-space-8)
+        );
+        overflow: hidden;
+      }
+    `,
+  ];
 }
 
 declare global {

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

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

src/components/ha-control-select.ts

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

src/components/ha-empty-state.ts

@@ -1,79 +0,0 @@
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
-import "./ha-svg-icon";
-
-/**
- * Centered placeholder for a surface that has nothing to show, with an icon, a
- * heading, an optional description and optional actions.
- *
- * @slot - Actions that help the user fill the surface, e.g. a button.
- */
-@customElement("ha-empty-state")
-export class HaEmptyState extends LitElement {
-  /** SVG path of the icon shown above the heading. */
-  @property() public icon?: string;
-
-  @property() public heading?: string;
-
-  @property() public description?: string;
-
-  protected render() {
-    return html`
-      <div class="content">
-        ${
-          this.icon
-            ? html`<ha-svg-icon .path=${this.icon}></ha-svg-icon>`
-            : nothing
-        }
-        ${this.heading ? html`<h2>${this.heading}</h2>` : nothing}
-        ${this.description ? html`<p>${this.description}</p>` : nothing}
-        <slot></slot>
-      </div>
-    `;
-  }
-
-  static styles = css`
-    :host {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      box-sizing: border-box;
-      height: 100%;
-      width: 100%;
-    }
-
-    .content {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: var(--ha-space-4);
-      box-sizing: border-box;
-      max-width: 500px;
-      padding: var(--ha-space-8) var(--ha-space-4);
-      text-align: center;
-    }
-
-    ha-svg-icon {
-      --mdc-icon-size: var(--ha-empty-state-icon-size, 64px);
-      color: var(--secondary-text-color);
-    }
-
-    h2 {
-      margin: 0;
-      font-size: var(--ha-font-size-xl);
-      font-weight: var(--ha-font-weight-medium);
-      line-height: var(--ha-line-height-condensed);
-    }
-
-    p {
-      margin: 0;
-      color: var(--secondary-text-color);
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-empty-state": HaEmptyState;
-  }
-}

src/components/ha-filter-device-classes.ts

@@ -1,256 +0,0 @@
-import { consume, type ContextType } from "@lit/context";
-import type { SelectedDetail } from "@material/mwc-list";
-import { mdiFilterVariantRemove } from "@mdi/js";
-import type { CSSResultGroup, PropertyValues } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { repeat } from "lit/directives/repeat";
-import memoizeOne from "memoize-one";
-import { consumeLocalize } from "../common/decorators/consume-context-entry";
-import { fireEvent } from "../common/dom/fire_event";
-import { computeStateDomain } from "../common/entity/compute_state_domain";
-import { stringCompare } from "../common/string/compare";
-import type { LocalizeFunc } from "../common/translations/localize";
-import { internationalizationContext, statesContext } from "../data/context";
-import { haStyleScrollbar } from "../resources/styles";
-import "./ha-check-list-item";
-import "./ha-expansion-panel";
-import "./ha-icon-button";
-import "./ha-list";
-import "./input/ha-input-search";
-import type { HaInputSearch } from "./input/ha-input-search";
-
-interface DeviceClassItem {
-  deviceClass: string;
-  name: string;
-}
-
-@customElement("ha-filter-device-classes")
-export class HaFilterDeviceClasses extends LitElement {
-  @state()
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
-
-  @consume({ context: statesContext, subscribe: true })
-  @state()
-  private _states!: ContextType<typeof statesContext>;
-
-  @consume({ context: internationalizationContext, subscribe: true })
-  @state()
-  private _i18n!: ContextType<typeof internationalizationContext>;
-
-  @property({ attribute: false }) public value?: string[];
-
-  @property({ type: Boolean }) public narrow = false;
-
-  @property({ type: Boolean, reflect: true }) public expanded = false;
-
-  @state() private _shouldRender = false;
-
-  @state() private _filter?: string;
-
-  @query("ha-list") private _list?: HTMLElement;
-
-  protected render() {
-    return html`
-      <ha-expansion-panel
-        left-chevron
-        .expanded=${this.expanded}
-        @expanded-will-change=${this._expandedWillChange}
-        @expanded-changed=${this._expandedChanged}
-      >
-        <div slot="header" class="header">
-          ${this._localize("ui.components.filter-device-classes.caption")}
-          ${
-            this.value?.length
-              ? html`<div class="badge">${this.value?.length}</div>
-                  <ha-icon-button
-                    .path=${mdiFilterVariantRemove}
-                    @click=${this._clearFilter}
-                  ></ha-icon-button>`
-              : nothing
-          }
-        </div>
-        ${
-          this._shouldRender
-            ? html`<ha-input-search
-                  appearance="outlined"
-                  .value=${this._filter}
-                  @input=${this._handleSearchChange}
-                >
-                </ha-input-search>
-                <ha-list
-                  class="ha-scrollbar"
-                  @selected=${this._handleItemSelected}
-                  multi
-                >
-                  ${repeat(
-                    this._deviceClasses(
-                      this._states,
-                      this._localize,
-                      this._i18n.locale.language,
-                      this._filter
-                    ),
-                    (item) => item.deviceClass,
-                    (item) =>
-                      html`<ha-check-list-item
-                        .value=${item.deviceClass}
-                        .selected=${(this.value || []).includes(item.deviceClass)}
-                      >
-                        ${item.name}
-                      </ha-check-list-item>`
-                  )}
-                </ha-list> `
-            : nothing
-        }
-      </ha-expansion-panel>
-    `;
-  }
-
-  private _deviceClasses = memoizeOne(
-    (
-      states: ContextType<typeof statesContext>,
-      localize: LocalizeFunc,
-      language: string | undefined,
-      filter: string | undefined
-    ): DeviceClassItem[] => {
-      // The same device class can be used by multiple domains; label it with
-      // the first domain that has a translation for it.
-      const names = new Map<string, string | undefined>();
-      Object.values(states).forEach((stateObj) => {
-        const deviceClass = stateObj.attributes.device_class;
-        if (!deviceClass || names.get(deviceClass)) {
-          return;
-        }
-        names.set(
-          deviceClass,
-          localize(
-            `component.${computeStateDomain(stateObj)}.entity_component.${deviceClass}.name`
-          )
-        );
-      });
-
-      return Array.from(names.entries())
-        .map(([deviceClass, name]) => ({
-          deviceClass,
-          name: name || deviceClass,
-        }))
-        .filter(
-          (item) =>
-            !filter ||
-            item.deviceClass.toLowerCase().includes(filter) ||
-            item.name.toLowerCase().includes(filter)
-        )
-        .sort((a, b) => stringCompare(a.name, b.name, language));
-    }
-  );
-
-  protected updated(changed: PropertyValues<this>) {
-    if (changed.has("expanded") && this.expanded) {
-      setTimeout(() => {
-        if (!this.expanded) return;
-        this._list!.style.height = `${this.clientHeight - 49 - 4 - 32}px`;
-        // 49px - height of a header + 1px
-        // 4px - padding-top of the search-input
-        // 32px - height of the search input
-      }, 300);
-    }
-  }
-
-  private _expandedWillChange(ev) {
-    this._shouldRender = ev.detail.expanded;
-  }
-
-  private _expandedChanged(ev) {
-    this.expanded = ev.detail.expanded;
-  }
-
-  private _handleItemSelected(ev: CustomEvent<SelectedDetail<Set<number>>>) {
-    const deviceClasses = this._deviceClasses(
-      this._states,
-      this._localize,
-      this._i18n.locale.language,
-      this._filter
-    );
-
-    const visible = new Set(deviceClasses.map((item) => item.deviceClass));
-    const preserved = (this.value || []).filter((d) => !visible.has(d));
-    const selected = [...ev.detail.index]
-      .map((i) => deviceClasses[i]?.deviceClass)
-      .filter((d): d is string => !!d);
-
-    this.value = [...preserved, ...selected];
-
-    fireEvent(this, "data-table-filter-changed", {
-      value: this.value.length ? this.value : undefined,
-      items: undefined,
-    });
-  }
-
-  private _clearFilter(ev) {
-    ev.preventDefault();
-    this.value = undefined;
-    fireEvent(this, "data-table-filter-changed", {
-      value: undefined,
-      items: undefined,
-    });
-  }
-
-  private _handleSearchChange(ev: InputEvent) {
-    const target = ev.target as HaInputSearch;
-    this._filter = (target.value ?? "").toLowerCase();
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyleScrollbar,
-      css`
-        :host {
-          border-bottom: 1px solid var(--divider-color);
-        }
-        :host([expanded]) {
-          flex: 1;
-          height: 0;
-        }
-        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
-          --expansion-panel-content-padding: 0;
-        }
-        .header {
-          display: flex;
-          align-items: center;
-        }
-        .header ha-icon-button {
-          margin-inline-start: auto;
-          margin-inline-end: 8px;
-        }
-        .badge {
-          display: inline-block;
-          margin-left: 8px;
-          margin-inline-start: 8px;
-          margin-inline-end: initial;
-          min-width: 16px;
-          box-sizing: border-box;
-          border-radius: var(--ha-border-radius-circle);
-          font-size: var(--ha-font-size-xs);
-          font-weight: var(--ha-font-weight-normal);
-          background-color: var(--primary-color);
-          line-height: var(--ha-line-height-normal);
-          text-align: center;
-          padding: 0px 2px;
-          color: var(--text-primary-color);
-        }
-        ha-input-search {
-          display: block;
-          padding: var(--ha-space-1) var(--ha-space-2) 0;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-filter-device-classes": HaFilterDeviceClasses;
-  }
-}

src/components/ha-filter-domains.ts

@@ -216,7 +216,7 @@ export class HaFilterDomains extends LitElement {
           align-items: center;
         }
         .header ha-icon-button {
-          margin-inline-start: auto;
+          margin-inline-start: initial;
           margin-inline-end: 8px;
         }
         ha-check-list-item {

src/components/ha-filter-pane-chip.ts

@@ -1,74 +0,0 @@
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
-import "./chips/ha-assist-chip";
-import "./ha-svg-icon";
-
-/**
- * Chip that opens a filter pane, with a badge showing how many filters are
- * active. Used in the toolbar of a filtered page and in the header of
- * `ha-filter-pane`.
- */
-@customElement("ha-filter-pane-chip")
-export class HaFilterPaneChip extends LitElement {
-  @property() public label = "";
-
-  /** SVG path of the leading icon. */
-  @property() public path?: string;
-
-  /** Number of active filters, shown as a badge when there is at least one. */
-  @property({ type: Number }) public count = 0;
-
-  @property({ type: Boolean }) public active = false;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  protected render() {
-    return html`
-      <ha-assist-chip
-        .label=${this.label}
-        .active=${this.active}
-        .disabled=${this.disabled}
-      >
-        ${
-          this.path
-            ? html`<ha-svg-icon slot="icon" .path=${this.path}></ha-svg-icon>`
-            : nothing
-        }
-      </ha-assist-chip>
-      ${this.count ? html`<div class="badge">${this.count}</div>` : nothing}
-    `;
-  }
-
-  static styles = css`
-    :host {
-      position: relative;
-      display: inline-block;
-      --ha-assist-chip-container-shape: 10px;
-    }
-
-    .badge {
-      position: absolute;
-      top: -4px;
-      right: -4px;
-      inset-inline-end: -4px;
-      inset-inline-start: initial;
-      min-width: 16px;
-      box-sizing: border-box;
-      border-radius: var(--ha-border-radius-circle);
-      font-size: var(--ha-font-size-xs);
-      font-weight: var(--ha-font-weight-normal);
-      background-color: var(--primary-color);
-      line-height: var(--ha-line-height-normal);
-      text-align: center;
-      padding: 0 2px;
-      color: var(--text-primary-color);
-      pointer-events: none;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-filter-pane-chip": HaFilterPaneChip;
-  }
-}

src/components/ha-filter-pane.ts

@@ -1,183 +0,0 @@
-import { mdiFilterVariant, mdiFilterVariantRemove } from "@mdi/js";
-import type { CSSResultGroup } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
-import { consumeLocalize } from "../common/decorators/consume-context-entry";
-import { fireEvent } from "../common/dom/fire_event";
-import type { LocalizeFunc } from "../common/translations/localize";
-import { haStyleScrollbar } from "../resources/styles";
-import "./ha-adaptive-dialog";
-import "./ha-button";
-import "./ha-dialog-footer";
-import "./ha-filter-pane-chip";
-import "./ha-icon-button";
-
-/**
- * Filter pane for a filtered page: a column next to the content on wide
- * screens, a bottom sheet on narrow ones. Mirrors the filter pane of
- * `hass-tabs-subpage-data-table` for pages that are not a data table.
- *
- * The page keeps ownership of whether the pane is shown, so that it can also
- * open it from elsewhere (e.g. an empty state) and hide its own toolbar chip
- * while it is open.
- *
- * @slot - Filter panels, e.g. `ha-filter-domains`.
- */
-@customElement("ha-filter-pane")
-export class HaFilterPane extends LitElement {
-  @property({ type: Boolean, reflect: true }) public narrow = false;
-
-  /** Header label, defaults to "Filters". */
-  @property() public label?: string;
-
-  /** SVG path of the header chip icon. */
-  @property() public path = mdiFilterVariant;
-
-  /** Number of active filters, shown as a badge. */
-  @property({ type: Number }) public count = 0;
-
-  /**
-   * Number of results the current filters resolve to, shown on the narrow
-   * confirm button. Leave undefined when the page shows everything.
-   */
-  @property({ attribute: false }) public resultCount?: number;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @state()
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
-
-  protected render() {
-    const label =
-      this.label ?? this._localize("ui.components.subpage-data-table.filters");
-
-    if (this.narrow) {
-      return html`
-        <ha-adaptive-dialog
-          open
-          flexcontent
-          .headerTitle=${label}
-          @closed=${this._close}
-        >
-          ${this._renderClearButton("headerActionItems")}
-          <div class="sheet-content">
-            <slot></slot>
-          </div>
-          <ha-dialog-footer slot="footer">
-            <ha-button slot="primaryAction" @click=${this._close}>
-              ${
-                this.resultCount === undefined
-                  ? this._localize("ui.common.close")
-                  : this._localize(
-                      "ui.components.subpage-data-table.show_results",
-                      { number: this.resultCount }
-                    )
-              }
-            </ha-button>
-          </ha-dialog-footer>
-        </ha-adaptive-dialog>
-      `;
-    }
-
-    return html`
-      <div class="header">
-        <ha-filter-pane-chip
-          active
-          .label=${label}
-          .path=${this.path}
-          .count=${this.count}
-          .disabled=${this.disabled}
-          @click=${this._close}
-        ></ha-filter-pane-chip>
-        ${this._renderClearButton()}
-      </div>
-      <div class="content ha-scrollbar">
-        <slot></slot>
-      </div>
-    `;
-  }
-
-  private _renderClearButton(slot?: string) {
-    if (!this.count) {
-      return nothing;
-    }
-    return html`
-      <ha-icon-button
-        slot=${ifDefined(slot)}
-        .path=${mdiFilterVariantRemove}
-        .disabled=${this.disabled}
-        .label=${this._localize("ui.components.subpage-data-table.clear_filter")}
-        @click=${this._clear}
-      ></ha-icon-button>
-    `;
-  }
-
-  private _close() {
-    fireEvent(this, "close-filter-pane");
-  }
-
-  private _clear() {
-    fireEvent(this, "clear-filter");
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyleScrollbar,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          flex: 0 0 var(--ha-filter-pane-width, 320px);
-          width: var(--ha-filter-pane-width, 320px);
-          box-sizing: border-box;
-          overflow: hidden;
-          border-inline-end: 1px solid var(--divider-color);
-        }
-
-        /* The bottom sheet positions itself, so the pane takes no space. */
-        :host([narrow]) {
-          display: contents;
-        }
-
-        .header {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          gap: var(--ha-space-4);
-          box-sizing: border-box;
-          height: 56px;
-          flex-shrink: 0;
-          padding: 0 16px;
-          background: var(--primary-background-color);
-          border-bottom: 1px solid var(--divider-color);
-        }
-
-        .content,
-        .sheet-content {
-          display: flex;
-          flex-direction: column;
-          flex: 1;
-          min-height: 0;
-          overflow-y: auto;
-        }
-
-        ha-adaptive-dialog {
-          --dialog-content-padding: 0;
-          /* Fixed height so the sheet does not resize while filtering. */
-          --ha-bottom-sheet-height: calc(100dvh - var(--ha-space-12));
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-filter-pane": HaFilterPane;
-  }
-  interface HASSDomEvents {
-    "close-filter-pane": undefined;
-  }
-}

src/components/ha-sources-picker.ts

@@ -1,269 +0,0 @@
-import type { HassServiceTarget } from "home-assistant-js-websocket";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
-import { ensureArray } from "../common/array/ensure-array";
-import { fireEvent } from "../common/dom/fire_event";
-import { computeDomain } from "../common/entity/compute_domain";
-import type { DataTableFiltersValue } from "../data/data_table_filters";
-import type { HaEntityPickerEntityFilterFunc } from "../data/entity/entity";
-import type { EntitySources } from "../data/entity/entity_sources";
-import type { HomeAssistant } from "../types";
-import "./ha-filter-device-classes";
-import "./ha-filter-domains";
-import "./ha-filter-integrations";
-import "./ha-target-picker";
-
-/**
- * Ways to narrow down the entities a target selection resolves to. Not to be
- * confused with `EntitySources`, which maps an entity to its integration.
- */
-export interface SourceFilters {
-  domains?: string[];
-  deviceClasses?: string[];
-  integrations?: string[];
-}
-
-const TARGET_KEYS = [
-  "floor_id",
-  "area_id",
-  "device_id",
-  "entity_id",
-  "label_id",
-] as const;
-
-/** Number of picked targets, no matter which type they are. */
-export const countTargets = (target: HassServiceTarget): number =>
-  TARGET_KEYS.reduce(
-    (count, key) => count + (target[key] ? ensureArray(target[key]).length : 0),
-    0
-  );
-
-/** Number of filters that have at least one option selected. */
-export const countSourceFilters = (filters: SourceFilters): number =>
-  Object.values(filters).filter((value) => value?.length).length;
-
-/**
- * Narrows entity IDs down by the selected filters: an entity is kept when it
- * matches every filter that has a selection. The integration filter is skipped
- * while the entity sources are still loading.
- */
-export const applySourceFilters = (
-  entityIds: string[],
-  filters: SourceFilters,
-  states: HomeAssistant["states"],
-  entitySources?: EntitySources
-): string[] => {
-  const domains = filters.domains?.length ? filters.domains : undefined;
-  const deviceClasses = filters.deviceClasses?.length
-    ? filters.deviceClasses
-    : undefined;
-  const integrations =
-    filters.integrations?.length && entitySources
-      ? filters.integrations
-      : undefined;
-
-  if (!domains && !deviceClasses && !integrations) {
-    return entityIds;
-  }
-
-  return entityIds.filter((entityId) => {
-    if (domains && !domains.includes(computeDomain(entityId))) {
-      return false;
-    }
-    if (deviceClasses) {
-      const deviceClass = states[entityId]?.attributes.device_class;
-      if (!deviceClass || !deviceClasses.includes(deviceClass)) {
-        return false;
-      }
-    }
-    if (integrations) {
-      const integration = entitySources![entityId]?.domain;
-      if (!integration || !integrations.includes(integration)) {
-        return false;
-      }
-    }
-    return true;
-  });
-};
-
-/**
- * Picker for what a page shows: the targets to include, narrowed down by
- * domain, device class and integration. Meant to be placed in an
- * `ha-filter-pane`.
- */
-@customElement("ha-sources-picker")
-export class HaSourcesPicker extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public value: HassServiceTarget = {};
-
-  @property({ attribute: false }) public filters: SourceFilters = {};
-
-  @property({ attribute: false })
-  public entityFilter?: HaEntityPickerEntityFilterFunc;
-
-  /** Explains what the page shows while no target is picked. */
-  @property() public description?: string;
-
-  @property({ type: Boolean }) public narrow = false;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  // Only one filter panel is expanded at a time, so that the expanded one can
-  // use the height that is left in the pane.
-  @state() private _expandedFilter?: keyof SourceFilters;
-
-  protected render() {
-    const noTargets = countTargets(this.value) === 0;
-
-    return html`
-      ${
-        this.description && noTargets
-          ? html`<div class="description">${this.description}</div>`
-          : nothing
-      }
-      <ha-target-picker
-        class=${classMap({ "no-padding-top": noTargets })}
-        .hass=${this.hass}
-        .value=${this.value}
-        .entityFilter=${this.entityFilter}
-        .disabled=${this.disabled}
-        @value-changed=${this._targetsChanged}
-      ></ha-target-picker>
-      <div
-        class=${classMap({ filters: true, expanded: !!this._expandedFilter })}
-      >
-        <ha-filter-domains
-          .value=${this.filters.domains}
-          .narrow=${this.narrow}
-          .expanded=${this._expandedFilter === "domains"}
-          @data-table-filter-changed=${this._domainsChanged}
-          @expanded-changed=${this._domainsExpanded}
-        ></ha-filter-domains>
-        <ha-filter-device-classes
-          .value=${this.filters.deviceClasses}
-          .narrow=${this.narrow}
-          .expanded=${this._expandedFilter === "deviceClasses"}
-          @data-table-filter-changed=${this._deviceClassesChanged}
-          @expanded-changed=${this._deviceClassesExpanded}
-        ></ha-filter-device-classes>
-        <ha-filter-integrations
-          .value=${this.filters.integrations}
-          .narrow=${this.narrow}
-          .expanded=${this._expandedFilter === "integrations"}
-          @data-table-filter-changed=${this._integrationsChanged}
-          @expanded-changed=${this._integrationsExpanded}
-        ></ha-filter-integrations>
-      </div>
-    `;
-  }
-
-  protected firstUpdated() {
-    // The filter panels label themselves with keys from the config panel.
-    this.hass.loadFragmentTranslation("config");
-  }
-
-  private _targetsChanged(ev: CustomEvent) {
-    ev.stopPropagation();
-    fireEvent(this, "value-changed", { value: ev.detail.value || {} });
-  }
-
-  private _domainsChanged(ev: CustomEvent) {
-    this._filterChanged("domains", ev);
-  }
-
-  private _deviceClassesChanged(ev: CustomEvent) {
-    this._filterChanged("deviceClasses", ev);
-  }
-
-  private _integrationsChanged(ev: CustomEvent) {
-    this._filterChanged("integrations", ev);
-  }
-
-  private _filterChanged(key: keyof SourceFilters, ev: CustomEvent) {
-    ev.stopPropagation();
-    const value = ev.detail.value as DataTableFiltersValue;
-    fireEvent(this, "source-filters-changed", {
-      value: {
-        ...this.filters,
-        [key]: Array.isArray(value) && value.length ? value : undefined,
-      },
-    });
-  }
-
-  private _domainsExpanded(ev: CustomEvent) {
-    this._filterExpanded("domains", ev);
-  }
-
-  private _deviceClassesExpanded(ev: CustomEvent) {
-    this._filterExpanded("deviceClasses", ev);
-  }
-
-  private _integrationsExpanded(ev: CustomEvent) {
-    this._filterExpanded("integrations", ev);
-  }
-
-  private _filterExpanded(key: keyof SourceFilters, ev: CustomEvent) {
-    if (ev.detail.expanded) {
-      this._expandedFilter = key;
-    } else if (this._expandedFilter === key) {
-      this._expandedFilter = undefined;
-    }
-  }
-
-  static styles = css`
-    /* The sections are laid out by the pane, so that an expanded filter
-         panel can use the height that is left. */
-    :host {
-      display: contents;
-    }
-
-    .description {
-      box-sizing: border-box;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 92px;
-      margin: var(--ha-space-4) var(--ha-space-4) 0;
-      padding: 0 var(--ha-space-6);
-      border-radius: var(--ha-border-radius-lg);
-      background-color: var(--ha-color-fill-neutral-quiet-resting);
-      text-align: center;
-      color: var(--secondary-text-color);
-    }
-
-    ha-target-picker {
-      display: block;
-      flex: none;
-      padding: var(--ha-space-4);
-    }
-
-    /* The description already spaces the picker from the pane header. */
-    ha-target-picker.no-padding-top {
-      padding-top: 0;
-    }
-
-    .filters {
-      display: flex;
-      flex-direction: column;
-      flex: 1 0 auto;
-      border-top: 1px solid var(--divider-color);
-    }
-
-    /* An expanded panel sizes itself to the space that is left over. */
-    .filters.expanded {
-      flex: 1 1 auto;
-      min-height: 0;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-sources-picker": HaSourcesPicker;
-  }
-  interface HASSDomEvents {
-    "source-filters-changed": { value: SourceFilters };
-  }
-}

src/components/ha-target-picker.ts

@@ -28,6 +28,7 @@ import {
   type DevicePickerItem,
 } from "../data/device/device_picker";
 import {
+  devicesInEffectiveArea,
   fetchDeviceCompositeSplits,
   type DeviceCompositeSplits,
 } from "../data/device/device_registry";
@@ -41,6 +42,9 @@ import { domainToName } from "../data/integration";
 import { getLabels, labelComboBoxKeys } from "../data/label/label_picker";
 import type { LabelRegistryEntry } from "../data/label/label_registry";
 import {
+  areaMeetsFilter,
+  deviceMeetsFilter,
+  entityRegMeetsFilter,
   getTargetComboBoxItemType,
   type TargetItem,
   type TargetType,
@@ -63,6 +67,7 @@ import type { PickerComboBoxItem } from "./ha-picker-combo-box";
 import "./ha-svg-icon";
 import "./ha-tree-indicator";
 import "./target-picker/ha-target-picker-item-group";
+import "./target-picker/ha-target-picker-value-chip";
 
 const SEPARATOR = "________";
 const CREATE_ID = "___create-new-entity___";
@@ -81,6 +86,8 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   @property() public helper?: string;
 
+  @property({ type: Boolean, reflect: true }) public compact = false;
+
   @property({ attribute: false }) public createDomains?: string[];
 
   @property({ type: Boolean, attribute: "primary-entities-only" })
@@ -110,6 +117,8 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
+  @property({ attribute: "add-on-top", type: Boolean }) public addOnTop = false;
+
   @state() private _selectedSection?: TargetTypeFloorless;
 
   @state() private _replaceTarget?: TargetItem;
@@ -150,6 +159,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
         excludeDevices,
         value,
         idPrefix,
+        nested: true,
       })
   );
 
@@ -244,9 +254,119 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     Fuse.createIndex(keys, states);
 
   protected render() {
+    if (this.addOnTop) {
+      return html` ${this._renderPicker()} ${this._renderItems()} `;
+    }
     return html` ${this._renderItems()} ${this._renderPicker()} `;
   }
 
+  private _renderValueChips() {
+    const entityIds = this.value?.entity_id
+      ? ensureArray(this.value.entity_id)
+      : [];
+    const deviceIds = this.value?.device_id
+      ? ensureArray(this.value.device_id)
+      : [];
+    const areaIds = this.value?.area_id ? ensureArray(this.value.area_id) : [];
+    const floorIds = this.value?.floor_id
+      ? ensureArray(this.value.floor_id)
+      : [];
+    const labelIds = this.value?.label_id
+      ? ensureArray(this.value.label_id)
+      : [];
+
+    if (
+      !entityIds.length &&
+      !deviceIds.length &&
+      !areaIds.length &&
+      !floorIds.length &&
+      !labelIds.length
+    ) {
+      return nothing;
+    }
+
+    return html`
+      <div class="items">
+        ${
+          floorIds.length
+            ? floorIds.map(
+                (floor_id) => html`
+                  <ha-target-picker-value-chip
+                    .hass=${this.hass}
+                    type="floor"
+                    .itemId=${floor_id}
+                    @remove-target-item=${this._handleRemove}
+                    @expand-target-item=${this._handleExpand}
+                  ></ha-target-picker-value-chip>
+                `
+              )
+            : nothing
+        }
+        ${
+          areaIds.length
+            ? areaIds.map(
+                (area_id) => html`
+                  <ha-target-picker-value-chip
+                    .hass=${this.hass}
+                    type="area"
+                    .itemId=${area_id}
+                    @remove-target-item=${this._handleRemove}
+                    @expand-target-item=${this._handleExpand}
+                  ></ha-target-picker-value-chip>
+                `
+              )
+            : nothing
+        }
+        ${
+          deviceIds.length
+            ? deviceIds.map(
+                (device_id) => html`
+                  <ha-target-picker-value-chip
+                    .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>
+                `
+              )
+            : nothing
+        }
+        ${
+          entityIds.length
+            ? entityIds.map(
+                (entity_id) => html`
+                  <ha-target-picker-value-chip
+                    .hass=${this.hass}
+                    type="entity"
+                    .itemId=${entity_id}
+                    @remove-target-item=${this._handleRemove}
+                    @expand-target-item=${this._handleExpand}
+                  ></ha-target-picker-value-chip>
+                `
+              )
+            : nothing
+        }
+        ${
+          labelIds.length
+            ? labelIds.map(
+                (label_id) => html`
+                  <ha-target-picker-value-chip
+                    .hass=${this.hass}
+                    type="label"
+                    .itemId=${label_id}
+                    @remove-target-item=${this._handleRemove}
+                    @expand-target-item=${this._handleExpand}
+                  ></ha-target-picker-value-chip>
+                `
+              )
+            : nothing
+        }
+      </div>
+    `;
+  }
+
   private _renderValueGroups() {
     const entityIds = this.value?.entity_id
       ? ensureArray(this.value.entity_id)
@@ -360,7 +480,9 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
   }
 
   private _renderItems() {
-    return html` ${this._renderValueGroups()} `;
+    return html`
+      ${this.compact ? this._renderValueChips() : this._renderValueGroups()}
+    `;
   }
 
   private _renderPicker() {
@@ -535,6 +657,162 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     });
   }
 
+  private _handleExpand(ev: HASSDomEvent<HASSDomEvents["expand-target-item"]>) {
+    const type = ev.detail.type;
+    const itemId = ev.detail.id;
+    const newAreas: string[] = [];
+    const newDevices: string[] = [];
+    const newEntities: string[] = [];
+
+    if (type === "floor") {
+      Object.values(this.hass.areas).forEach((area) => {
+        if (
+          area.floor_id === itemId &&
+          !this.value!.area_id?.includes(area.area_id) &&
+          areaMeetsFilter(
+            area,
+            this.hass.devices,
+            this.hass.entities,
+            this.deviceFilter,
+            this.includeDomains,
+            this.includeDeviceClasses,
+            this.hass.states,
+            this.entityFilter
+          )
+        ) {
+          newAreas.push(area.area_id);
+        }
+      });
+    } else if (type === "area") {
+      // Splitting an area yields its effective-area devices, so a child device
+      // that belongs to a different area is not pulled into this area.
+      devicesInEffectiveArea(this.hass.devices, itemId).forEach((device) => {
+        if (
+          !this.value!.device_id?.includes(device.id) &&
+          deviceMeetsFilter(
+            device,
+            this.hass.entities,
+            this.deviceFilter,
+            this.includeDomains,
+            this.includeDeviceClasses,
+            this.hass.states,
+            this.entityFilter
+          )
+        ) {
+          newDevices.push(device.id);
+        }
+      });
+      Object.values(this.hass.entities).forEach((entity) => {
+        if (
+          entity.area_id === itemId &&
+          !this.value!.entity_id?.includes(entity.entity_id) &&
+          entityRegMeetsFilter(
+            entity,
+            false,
+            this.includeDomains,
+            this.includeDeviceClasses,
+            this.hass.states,
+            this.entityFilter
+          )
+        ) {
+          newEntities.push(entity.entity_id);
+        }
+      });
+    } else if (type === "device") {
+      // Splitting a device into entities includes its child devices' entities,
+      // since targeting the device would target its children too.
+      const deviceIds = new Set([
+        itemId,
+        ...Object.values(this.hass.devices)
+          .filter((device) => device.parent_device_id === itemId)
+          .map((device) => device.id),
+      ]);
+      Object.values(this.hass.entities).forEach((entity) => {
+        if (
+          entity.device_id &&
+          deviceIds.has(entity.device_id) &&
+          !this.value!.entity_id?.includes(entity.entity_id) &&
+          entityRegMeetsFilter(
+            entity,
+            false,
+            this.includeDomains,
+            this.includeDeviceClasses,
+            this.hass.states,
+            this.entityFilter
+          )
+        ) {
+          newEntities.push(entity.entity_id);
+        }
+      });
+    } else if (type === "label") {
+      Object.values(this.hass.areas).forEach((area) => {
+        if (
+          area.labels.includes(itemId) &&
+          !this.value!.area_id?.includes(area.area_id) &&
+          areaMeetsFilter(
+            area,
+            this.hass.devices,
+            this.hass.entities,
+            this.deviceFilter,
+            this.includeDomains,
+            this.includeDeviceClasses,
+            this.hass.states,
+            this.entityFilter
+          )
+        ) {
+          newAreas.push(area.area_id);
+        }
+      });
+      Object.values(this.hass.devices).forEach((device) => {
+        if (
+          device.labels.includes(itemId) &&
+          !this.value!.device_id?.includes(device.id) &&
+          deviceMeetsFilter(
+            device,
+            this.hass.entities,
+            this.deviceFilter,
+            this.includeDomains,
+            this.includeDeviceClasses,
+            this.hass.states,
+            this.entityFilter
+          )
+        ) {
+          newDevices.push(device.id);
+        }
+      });
+      Object.values(this.hass.entities).forEach((entity) => {
+        if (
+          entity.labels.includes(itemId) &&
+          !this.value!.entity_id?.includes(entity.entity_id) &&
+          entityRegMeetsFilter(
+            entity,
+            true,
+            this.includeDomains,
+            this.includeDeviceClasses,
+            this.hass.states,
+            this.entityFilter
+          )
+        ) {
+          newEntities.push(entity.entity_id);
+        }
+      });
+    } else {
+      return;
+    }
+    let value = this.value;
+    if (newEntities.length) {
+      value = this._addItems(value, "entity_id", newEntities);
+    }
+    if (newDevices.length) {
+      value = this._addItems(value, "device_id", newDevices);
+    }
+    if (newAreas.length) {
+      value = this._addItems(value, "area_id", newAreas);
+    }
+    value = this._removeItem(value, type, itemId);
+    fireEvent(this, "value-changed", { value });
+  }
+
   private _handleReplace(
     ev: HASSDomEvent<HASSDomEvents["replace-target-item"]>
   ) {
@@ -574,6 +852,17 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     this._replaceTargetAnchor = undefined;
   }
 
+  private _addItems(
+    value: this["value"],
+    type: string,
+    ids: string[]
+  ): this["value"] {
+    return {
+      ...value,
+      [type]: value![type] ? ensureArray(value![type])!.concat(ids) : ids,
+    };
+  }
+
   private _removeItem(
     value: this["value"],
     type: TargetType,
@@ -724,6 +1013,28 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
       }
 
       if (!filterType || filterType === "device") {
+        const selectedDeviceIds = targetValue?.device_id
+          ? replacingDeviceId
+            ? ensureArray(targetValue.device_id).filter(
+                (deviceId) => deviceId !== replacingDeviceId
+              )
+            : ensureArray(targetValue.device_id)
+          : undefined;
+        // A selected parent device already targets its children, so exclude
+        // those children from the picker too (mirrors selecting a floor
+        // removing its areas from the list).
+        const excludeDeviceIds = selectedDeviceIds
+          ? [
+              ...selectedDeviceIds,
+              ...Object.values(this.hass.devices)
+                .filter(
+                  (device) =>
+                    device.parent_device_id !== null &&
+                    selectedDeviceIds.includes(device.parent_device_id)
+                )
+                .map((device) => device.id),
+            ]
+          : undefined;
         let deviceItems = this._getDevicesMemoized(
           this.hass,
           configEntryLookup,
@@ -731,26 +1042,41 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
           includeDeviceClasses,
           deviceFilter,
           entityFilter,
-          targetValue?.device_id
-            ? replacingDeviceId
-              ? ensureArray(targetValue.device_id).filter(
-                  (deviceId) => deviceId !== replacingDeviceId
-                )
-              : ensureArray(targetValue.device_id)
-            : undefined,
+          excludeDeviceIds,
           replacingDeviceId,
           `device${SEPARATOR}`
-        ).sort(this._sortBySortingLabel);
+        );
+        // getDevices already returns child devices nested under their parent
+        // with the top-level devices sorted; keep that order rather than
+        // re-sorting by label, which would separate children from their parent.
 
         if (searchTerm) {
+          // Keep the nested parent-then-children order (sort=false), matching
+          // the areas group; the default sorted search would reorder matches by
+          // relevance and pull children above their parent.
           deviceItems = this._filterGroup(
             "device",
             deviceItems,
             searchTerm,
-            deviceComboBoxKeys
+            deviceComboBoxKeys,
+            false
           );
         }
 
+        // Recompute the tree "last child" flag over the (possibly filtered)
+        // list so the last visible child of each parent draws its end connector.
+        deviceItems = deviceItems.map((item, index) => {
+          if (!(item as DevicePickerItem).is_child) {
+            return item;
+          }
+          const nextItem = deviceItems[index + 1] as
+            DevicePickerItem | undefined;
+          return {
+            ...item,
+            last: !nextItem || !nextItem.is_child,
+          };
+        });
+
         if (!filterType && deviceItems.length) {
           // show group title
           items.push(localize("ui.components.target-picker.type.devices"));
@@ -968,7 +1294,9 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     let hasFloor = false;
     let rtl = false;
     let showEntityId = false;
-    if (type === "area" || type === "floor") {
+    const isChildDeviceRow =
+      type === "device" && !!(item as DevicePickerItem).is_child;
+    if (type === "area" || type === "floor" || isChildDeviceRow) {
       rtl = computeRTL(
         this.hass.language,
         this.hass.translationMetadata.translations
@@ -988,13 +1316,15 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
         .type=${type === "empty" ? "text" : "button"}
         class=${type === "empty" ? "empty" : ""}
         style=${
-          (item as FloorComboBoxItem).type === "area" && hasFloor
+          ((item as FloorComboBoxItem).type === "area" && hasFloor) ||
+          isChildDeviceRow
             ? "--md-list-item-leading-space: var(--ha-space-12);"
             : ""
         }
       >
         ${
-          (item as FloorComboBoxItem).type === "area" && hasFloor
+          ((item as FloorComboBoxItem).type === "area" && hasFloor) ||
+          isChildDeviceRow
             ? html`
                 <ha-tree-indicator
                   style=${styleMap({
@@ -1005,10 +1335,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                     right: rtl ? "var(--ha-space-1)" : undefined,
                     transform: rtl ? "scaleX(-1)" : "",
                   })}
-                  .end=${
-                    (item as FloorComboBoxItem & { last?: boolean | undefined })
-                      .last
-                  }
+                  .end=${(item as { last?: boolean }).last}
                   slot="start"
                 ></ha-tree-indicator>
               `
@@ -1110,6 +1437,13 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
       width: 100%;
     }
 
+    .items {
+      z-index: 2;
+      display: flex;
+      flex-wrap: wrap;
+      padding: var(--ha-space-2) 0;
+      gap: var(--ha-space-2);
+    }
     .item-groups {
       overflow: hidden;
       border: var(--ha-border-width-sm) solid var(--divider-color);
@@ -1125,6 +1459,7 @@ declare global {
 
   interface HASSDomEvents {
     "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/ha-tree-indicator.ts

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

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

@@ -0,0 +1,314 @@
+import "@home-assistant/webawesome/dist/components/tag/tag";
+import { consume } from "@lit/context";
+import {
+  mdiAlertOutline,
+  mdiDevices,
+  mdiHome,
+  mdiLabel,
+  mdiTextureBox,
+  mdiUnfoldMoreVertical,
+} 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";
+import { fireEvent } from "../../common/dom/fire_event";
+import { computeDeviceNameDisplay } from "../../common/entity/compute_device_name";
+import { computeDomain } from "../../common/entity/compute_domain";
+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";
+import type { HomeAssistant } from "../../types";
+import { brandsUrl } from "../../util/brands-url";
+import "../ha-domain-icon";
+import { floorDefaultIconPath } from "../ha-floor-icon";
+import "../ha-icon";
+import "../ha-icon-button";
+import "../ha-state-icon";
+import "../ha-tooltip";
+
+@customElement("ha-target-picker-value-chip")
+export class HaTargetPickerValueChip extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public type!: TargetType;
+
+  @property({ attribute: "item-id" }) public itemId!: string;
+
+  @property({ attribute: false })
+  public compositeSplits?: DeviceCompositeSplits;
+
+  @state() private _domainName?: string;
+
+  @state() private _iconImg?: string;
+
+  @state()
+  @consume({ context: labelsContext, subscribe: true })
+  _labelRegistry!: LabelRegistryEntry[];
+
+  protected render() {
+    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=${classMap({ [this.type]: true, replaced })}
+        style=${color ? `--color: rgb(${color});` : ""}
+        @wa-remove=${this._removeItem}
+      >
+        <div class="icon">
+          ${
+            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">
+          ${
+            replaced
+              ? replacedName ||
+                this.hass.localize(
+                  "ui.components.target-picker.replaced_device"
+                )
+              : name
+          }
+        </span>
+        ${
+          this.type === "entity" || replaced
+            ? nothing
+            : html`<ha-tooltip .for="expand-${slugify(this.itemId)}"
+                  >${this.hass.localize(
+                    `ui.components.target-picker.expand_${this.type}_id`
+                  )}
+                </ha-tooltip>
+                <ha-icon-button
+                  class="expand-btn mdc-chip__icon mdc-chip__icon--trailing"
+                  .label=${this.hass.localize(
+                    "ui.components.target-picker.expand"
+                  )}
+                  .path=${mdiUnfoldMoreVertical}
+                  hide-title
+                  .id="expand-${slugify(this.itemId)}"
+                  .type=${this.type}
+                  @click=${this._handleExpand}
+                ></ha-icon-button>`
+        }
+      </wa-tag>
+    `;
+  }
+
+  private _itemData = memoizeOne((type: TargetType, itemId: string) => {
+    if (type === "floor") {
+      const floor = this.hass.floors?.[itemId];
+      return {
+        name: floor?.name || itemId,
+        iconPath: floor?.icon,
+        fallbackIconPath: floor ? floorDefaultIconPath(floor) : mdiHome,
+      };
+    }
+    if (type === "area") {
+      const area = this.hass.areas?.[itemId];
+      return {
+        name: area?.name || itemId,
+        iconPath: area?.icon,
+        fallbackIconPath: mdiTextureBox,
+      };
+    }
+    if (type === "device") {
+      const device = this.hass.devices?.[itemId];
+
+      if (device?.primary_config_entry) {
+        this._getDeviceDomain(device.primary_config_entry);
+      }
+
+      return {
+        name: device
+          ? computeDeviceNameDisplay(
+              device,
+              this.hass.localize,
+              this.hass.states
+            )
+          : itemId,
+        fallbackIconPath: mdiDevices,
+      };
+    }
+    if (type === "entity") {
+      this._setDomainName(computeDomain(itemId));
+
+      const stateObj = this.hass.states[itemId];
+      return {
+        name: computeStateName(stateObj) || itemId,
+        stateObject: stateObj,
+      };
+    }
+
+    // type label
+    const label = this._labelRegistry.find((lab) => lab.label_id === itemId);
+    let color = label?.color ? computeCssColor(label.color) : undefined;
+    if (color?.startsWith("var(")) {
+      const computedStyles = getComputedStyle(this);
+      color = computedStyles.getPropertyValue(
+        color.substring(4, color.length - 1)
+      );
+    }
+    if (color?.startsWith("#")) {
+      color = hex2rgb(color).join(",");
+    }
+    return {
+      name: label?.name || itemId,
+      iconPath: label?.icon,
+      fallbackIconPath: mdiLabel,
+      color,
+    };
+  });
+
+  private _setDomainName(domain: string) {
+    this._domainName = domainToName(this.hass.localize, domain);
+  }
+
+  private async _getDeviceDomain(configEntryId: string) {
+    try {
+      const data = await getConfigEntry(this.hass, configEntryId);
+      const domain = data.config_entry.domain;
+      this._iconImg = brandsUrl(
+        {
+          domain: domain,
+          type: "icon",
+          darkOptimized: this.hass.themes?.darkMode,
+        },
+        this.hass.auth.data.hassUrl
+      );
+
+      this._setDomainName(domain);
+    } catch {
+      // failed to load config entry -> ignore
+    }
+  }
+
+  private _removeItem(ev: MouseEvent) {
+    ev.stopPropagation();
+    fireEvent(this, "remove-target-item", {
+      type: this.type,
+      id: this.itemId,
+    });
+  }
+
+  private _handleExpand(ev: MouseEvent) {
+    ev.stopPropagation();
+    fireEvent(this, "expand-target-item", {
+      type: this.type,
+      id: this.itemId,
+    });
+  }
+
+  static styles = css`
+    :host {
+      display: inline-block;
+      max-width: 100%;
+    }
+    wa-tag {
+      background-color: var(--card-background-color);
+      border-width: var(--ha-border-width-md);
+      padding-inline-start: 0;
+      overflow: hidden;
+      max-width: 100%;
+      color: var(--primary-text-color);
+    }
+
+    wa-tag.entity {
+      border-color: var(--ha-color-green-80);
+      --background-color: var(--ha-color-green-80);
+    }
+    wa-tag.device {
+      border-color: var(--ha-color-primary-80);
+      --background-color: var(--ha-color-primary-80);
+    }
+    wa-tag.area {
+      border-color: var(--ha-color-orange-80);
+      --background-color: var(--ha-color-orange-80);
+    }
+    wa-tag.label {
+      border-color: var(--color);
+      --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;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .icon {
+      background-color: var(--background-color);
+      border-radius: var(--ha-border-radius-circle);
+      padding: var(--ha-space-2) var(--ha-space-1);
+      display: flex;
+    }
+    .expand-btn {
+      --ha-icon-button-size: 16px;
+      --mdc-icon-size: 14px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-target-picker-value-chip": HaTargetPickerValueChip;
+  }
+}

src/components/tile/ha-tile-container.ts

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

src/data/device/device_picker.ts

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

src/data/device/device_registry.ts

@@ -81,6 +81,75 @@ export type DeviceRegistryListEntry =
 export const isChildDevice = (device: DeviceRegistryEntry): boolean =>
   device.parent_device_id !== null;
 
+/**
+ * Devices whose effective area is the given area: devices with that area, and
+ * child devices that inherit it because they have no area of their own. Mirrors
+ * core's dr.async_entries_for_area, so a child device with a different explicit
+ * area is not part of its parent's area.
+ */
+export const devicesInEffectiveArea = (
+  devices: Record<string, DeviceRegistryEntry>,
+  areaId: string
+): DeviceRegistryEntry[] =>
+  Object.values(devices).filter((device) => {
+    if (device.area_id) {
+      return device.area_id === areaId;
+    }
+    if (device.parent_device_id) {
+      return devices[device.parent_device_id]?.area_id === areaId;
+    }
+    return false;
+  });
+
+export interface DeviceRowItem {
+  device: DeviceRegistryEntry;
+  isChild: boolean;
+  // True for the last child of a parent, so the tree connector draws its end.
+  isLastChild: boolean;
+}
+
+/**
+ * Order a flat device list so each child directly follows its parent, flagging
+ * children for indented rendering. The incoming order of the top-level devices
+ * (and of the children within each parent) is preserved. A child whose parent
+ * is not in the list is treated as a top-level device.
+ */
+export const groupDevicesByParent = (
+  devices: DeviceRegistryEntry[]
+): DeviceRowItem[] => {
+  const presentIds = new Set(devices.map((device) => device.id));
+  const childrenByParent = new Map<string, DeviceRegistryEntry[]>();
+  const topLevel: DeviceRegistryEntry[] = [];
+
+  for (const device of devices) {
+    const parentId = device.parent_device_id;
+    if (parentId && presentIds.has(parentId)) {
+      const siblings = childrenByParent.get(parentId);
+      if (siblings) {
+        siblings.push(device);
+      } else {
+        childrenByParent.set(parentId, [device]);
+      }
+    } else {
+      topLevel.push(device);
+    }
+  }
+
+  const result: DeviceRowItem[] = [];
+  for (const device of topLevel) {
+    result.push({ device, isChild: false, isLastChild: false });
+    const children = childrenByParent.get(device.id) ?? [];
+    children.forEach((child, index) => {
+      result.push({
+        device: child,
+        isChild: true,
+        isLastChild: index === children.length - 1,
+      });
+    });
+  }
+  return result;
+};
+
 export type DeviceEntityDisplayLookup = Record<
   string,
   EntityRegistryDisplayEntry[]

src/data/energy.ts

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

src/data/selector.ts

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

src/data/target.ts

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

src/panels/config/devices/device-detail/ha-device-child-devices-card.ts

@@ -0,0 +1,168 @@
+import { consume } from "@lit/context";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { computeDeviceNameDisplay } from "../../../../common/entity/compute_device_name";
+import { getDeviceArea } from "../../../../common/entity/context/get_device_context";
+import { caseInsensitiveStringCompare } from "../../../../common/string/compare";
+import "../../../../components/ha-card";
+import "../../../../components/ha-icon-next";
+import "../../../../components/ha-list-item";
+import { fullEntitiesContext } from "../../../../data/context";
+import type { DeviceRegistryEntry } from "../../../../data/device/device_registry";
+import type { EntityRegistryEntry } from "../../../../data/entity/entity_registry";
+import type { HomeAssistant } from "../../../../types";
+
+const MAX_VISIBLE_CHILD_DEVICES = 10;
+
+@customElement("ha-device-child-devices-card")
+export class HaDeviceChildDevicesCard extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public deviceId!: string;
+
+  @state() public _showAll = false;
+
+  @state()
+  @consume({ context: fullEntitiesContext, subscribe: true })
+  _entityReg: EntityRegistryEntry[] = [];
+
+  private _entityCounts = memoizeOne(
+    (entities: EntityRegistryEntry[]): Record<string, number> => {
+      const counts: Record<string, number> = {};
+      for (const entity of entities) {
+        if (entity.device_id) {
+          counts[entity.device_id] = (counts[entity.device_id] ?? 0) + 1;
+        }
+      }
+      return counts;
+    }
+  );
+
+  private _childDevices = memoizeOne(
+    (
+      deviceId: string,
+      devices: Record<string, DeviceRegistryEntry>
+    ): DeviceRegistryEntry[] =>
+      Object.values(devices)
+        .filter((device) => device.parent_device_id === deviceId)
+        .sort((d1, d2) =>
+          caseInsensitiveStringCompare(
+            computeDeviceNameDisplay(d1, this.hass.localize, this.hass.states),
+            computeDeviceNameDisplay(d2, this.hass.localize, this.hass.states),
+            this.hass.locale.language
+          )
+        )
+  );
+
+  protected render() {
+    const childDevices = this._childDevices(this.deviceId, this.hass.devices);
+
+    if (childDevices.length === 0) {
+      return nothing;
+    }
+
+    const entityCounts = this._entityCounts(this._entityReg);
+
+    return html`
+      <ha-card>
+        <h1 class="card-header">
+          ${this.hass.localize("ui.panel.config.devices.child_devices.heading")}
+        </h1>
+        ${(this._showAll
+          ? childDevices
+          : childDevices.slice(0, MAX_VISIBLE_CHILD_DEVICES)
+        ).map((childDevice) => {
+          const area = getDeviceArea(
+            childDevice,
+            this.hass.areas,
+            this.hass.devices
+          );
+          const entityCount = entityCounts[childDevice.id] ?? 0;
+          const secondary = [
+            area?.name,
+            entityCount
+              ? this.hass.localize(
+                  "ui.panel.config.common.quick_links.entities",
+                  { count: entityCount }
+                )
+              : undefined,
+          ]
+            .filter(Boolean)
+            .join(" • ");
+          return html`
+            <a href=${`/config/devices/device/${childDevice.id}`}>
+              <ha-list-item hasMeta .twoline=${!!secondary}>
+                ${computeDeviceNameDisplay(
+                  childDevice,
+                  this.hass.localize,
+                  this.hass.states
+                )}
+                ${
+                  secondary
+                    ? html`<span slot="secondary">${secondary}</span>`
+                    : nothing
+                }
+                <ha-icon-next slot="meta"></ha-icon-next>
+              </ha-list-item>
+            </a>
+          `;
+        })}
+        ${
+          !this._showAll && childDevices.length > MAX_VISIBLE_CHILD_DEVICES
+            ? html`
+                <button class="show-more" @click=${this._toggleShowAll}>
+                  ${this.hass.localize(
+                    "ui.panel.config.devices.child_devices.show_more",
+                    { count: childDevices.length - MAX_VISIBLE_CHILD_DEVICES }
+                  )}
+                </button>
+              `
+            : ""
+        }
+      </ha-card>
+    `;
+  }
+
+  private _toggleShowAll() {
+    this._showAll = !this._showAll;
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    .card-header {
+      padding-bottom: 0;
+    }
+
+    a {
+      text-decoration: none;
+      color: var(--primary-text-color);
+    }
+
+    button.show-more {
+      color: var(--primary-color);
+      text-align: left;
+      cursor: pointer;
+      background: none;
+      border-width: initial;
+      border-style: none;
+      border-color: initial;
+      border-image: initial;
+      padding: 16px;
+      font: inherit;
+    }
+    button.show-more:focus {
+      outline: none;
+      text-decoration: underline;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-device-child-devices-card": HaDeviceChildDevicesCard;
+  }
+}

src/panels/config/devices/device-detail/ha-device-info-card.ts

@@ -93,6 +93,27 @@ export class HaDeviceCard extends LitElement {
                 `
               : ""
           }
+          ${
+            this.device.parent_device_id
+              ? html`
+                  <div class="extra-info">
+                    ${this.hass.localize(
+                      "ui.panel.config.integrations.config_entry.part_of"
+                    )}
+                    <span class="hub"
+                      ><a
+                        href="/config/devices/device/${
+                          this.device.parent_device_id
+                        }"
+                        >${this._computeDeviceNameDisplay(
+                          this.device.parent_device_id
+                        )}</a
+                      ></span
+                    >
+                  </div>
+                `
+              : ""
+          }
           ${
             this.device.via_device_id
               ? html`

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

@@ -107,6 +107,7 @@ import { createSearchParam } from "../../../common/url/search-params";
 import { brandsUrl } from "../../../util/brands-url";
 import { fileDownload } from "../../../util/file_download";
 import "../../logbook/ha-logbook";
+import "./device-detail/ha-device-child-devices-card";
 import "./device-detail/ha-device-entities-card";
 import "./device-detail/ha-device-info-card";
 import "./device-detail/ha-device-linked-devices-card";
@@ -900,6 +901,10 @@ export class HaConfigDevicePage extends LitElement {
             : ""
         }
       </ha-device-info-card>
+      <ha-device-child-devices-card
+        .hass=${this.hass}
+        .deviceId=${this.deviceId}
+      ></ha-device-child-devices-card>
       <ha-device-linked-devices-card
         .hass=${this.hass}
         .deviceId=${this.deviceId}

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

@@ -459,6 +459,15 @@ export class HaConfigDeviceDashboard extends LitElement {
         ? new Map(labelReg.map((label) => [label.label_id, label]))
         : undefined;
 
+      // Ids of devices that have at least one child device, so a parent can be
+      // grouped together with its children.
+      const deviceIdsWithChildren = new Set<string>();
+      for (const dev of Object.values(devices)) {
+        if (dev.parent_device_id) {
+          deviceIdsWithChildren.add(dev.parent_device_id);
+        }
+      }
+
       const formattedOutputDevices = outputDevices.map((device) => {
         const deviceEntries = sortConfigEntries(
           device.config_entries
@@ -472,6 +481,15 @@ export class HaConfigDeviceDashboard extends LitElement {
           .map((lbl) => labelLookup!.get(lbl))
           .filter((entry): entry is LabelRegistryEntry => entry !== undefined);
 
+        const parentDevice = device.parent_device_id
+          ? this.hass.devices[device.parent_device_id]
+          : undefined;
+        // The device that identifies this device's family: its parent for a
+        // child device, itself for a device that has children.
+        const familyParentDevice =
+          parentDevice ??
+          (deviceIdsWithChildren.has(device.id) ? device : undefined);
+
         const { areaName } = computeDeviceAreaLabel(
           device,
           this.hass.areas,
@@ -527,6 +545,29 @@ export class HaConfigDeviceDashboard extends LitElement {
                 "ui.panel.config.devices.data_table.no_integration"
               ),
           domains: deviceEntries.map((entry) => entry.domain),
+          parent_device_name: parentDevice
+            ? computeDeviceNameDisplay(
+                parentDevice,
+                this.hass.localize,
+                this.hass.states,
+                deviceEntityLookup[parentDevice.id]
+              )
+            : "",
+          // Grouping key that keeps a device with its family: children group
+          // under their parent's name, a parent groups under its own name, and
+          // standalone devices stay ungrouped. The name is always computed from
+          // the family's parent device with the same arguments, so a parent and
+          // its children can never end up in different groups. Like the area and
+          // floor columns, this groups on the display name rather than the id,
+          // because the data table renders the raw group value as its header.
+          device_family_name: familyParentDevice
+            ? computeDeviceNameDisplay(
+                familyParentDevice,
+                this.hass.localize,
+                this.hass.states,
+                deviceEntityLookup[familyParentDevice.id]
+              )
+            : undefined,
           firmware_version: device.sw_version || undefined,
           battery_entity: [
             this._batteryEntity(device.id, deviceEntityLookup),
@@ -587,6 +628,16 @@ export class HaConfigDeviceDashboard extends LitElement {
         flex: 2,
         minWidth: "150px",
         extraTemplate: (device) => html`
+          ${
+            device.parent_device_name
+              ? html`<div style="color: var(--secondary-text-color);">
+                  ${localize(
+                    "ui.panel.config.devices.data_table.part_of_device",
+                    { name: device.parent_device_name }
+                  )}
+                </div>`
+              : nothing
+          }
           ${
             device.label_entries.length
               ? html`
@@ -607,6 +658,19 @@ export class HaConfigDeviceDashboard extends LitElement {
         groupable: true,
         minWidth: "120px",
       },
+      device_family_name: {
+        title: localize("ui.panel.config.devices.data_table.parent_device"),
+        // Keyed on the family name so grouping/sorting keeps a parent together
+        // with its children (grouping uses the column key directly). The cell
+        // only shows the parent name for child devices. Filterable stays on
+        // even when hidden, so searching a parent's name surfaces its children.
+        sortable: true,
+        filterable: true,
+        groupable: true,
+        defaultHidden: true,
+        minWidth: "120px",
+        template: (device) => device.parent_device_name || "",
+      },
       manufacturer: {
         title: localize("ui.panel.config.devices.data_table.manufacturer"),
         sortable: true,

src/panels/config/energy/components/ha-energy-device-settings-water.ts

@@ -11,6 +11,8 @@ import { css, html, LitElement, nothing } from "lit";
 import { repeat } from "lit/directives/repeat";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { computeAreaName } from "../../../../common/entity/compute_area_name";
+import { getEntityAreaId } from "../../../../common/entity/context/get_entity_context";
 import "../../../../components/ha-card";
 import "../../../../components/ha-button";
 import "../../../../components/ha-icon-button";
@@ -23,9 +25,11 @@ import type {
   EnergyPreferencesValidation,
   EnergyValidationIssue,
 } from "../../../../data/energy";
-import { saveEnergyPreferences } from "../../../../data/energy";
+import {
+  computeEnergyLabel,
+  saveEnergyPreferences,
+} from "../../../../data/energy";
 import type { StatisticsMetaData } from "../../../../data/recorder";
-import { getStatisticLabel } from "../../../../data/recorder";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -104,18 +108,7 @@ export class EnergyDeviceSettingsWater extends LitElement {
                                   .path=${mdiDragHorizontalVariant}
                                 ></ha-svg-icon>
                               </div>
-                              <span class="content"
-                                >${
-                                  device.name ||
-                                  getStatisticLabel(
-                                    this.hass,
-                                    device.stat_consumption,
-                                    this.statsMetadata?.[
-                                      device.stat_consumption
-                                    ]
-                                  )
-                                }</span
-                              >
+                              ${this._renderName(device)}
                               ${this._renderIssueIndicator(
                                 this.validationResult?.device_consumption_water[
                                   index
@@ -155,6 +148,32 @@ export class EnergyDeviceSettingsWater extends LitElement {
     `;
   }
 
+  private _renderName(device: DeviceConsumptionEnergyPreference) {
+    const name = computeEnergyLabel(
+      this.hass,
+      device.stat_consumption,
+      this.statsMetadata?.[device.stat_consumption],
+      device.name
+    );
+    const areaId = getEntityAreaId(
+      device.stat_consumption,
+      this.hass.entities,
+      this.hass.devices
+    );
+    const area = areaId ? this.hass.areas[areaId] : undefined;
+    const areaName = area ? computeAreaName(area) : undefined;
+    return html`
+      <div class="content">
+        <span class="label">${name}</span>
+        ${
+          areaName
+            ? html`<span class="label secondary">${areaName}</span>`
+            : nothing
+        }
+      </div>
+    `;
+  }
+
   private _renderIssueIndicator(
     issues: EnergyValidationIssue[] | undefined,
     index: number
@@ -280,6 +299,22 @@ export class EnergyDeviceSettingsWater extends LitElement {
       haStyle,
       energyCardStyles,
       css`
+        .row {
+          height: 58px;
+        }
+        .content {
+          display: flex;
+          flex-direction: column;
+        }
+        .label {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .label.secondary {
+          color: var(--secondary-text-color);
+          font-size: 0.9em;
+        }
         .handle {
           cursor: move; /* fallback if grab cursor is unsupported */
           cursor: grab;

src/panels/config/energy/components/ha-energy-device-settings.ts

@@ -11,6 +11,8 @@ import { css, html, LitElement, nothing } from "lit";
 import { repeat } from "lit/directives/repeat";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { computeAreaName } from "../../../../common/entity/compute_area_name";
+import { getEntityAreaId } from "../../../../common/entity/context/get_entity_context";
 import "../../../../components/ha-card";
 import "../../../../components/ha-button";
 import "../../../../components/ha-icon-button";
@@ -23,9 +25,11 @@ import type {
   EnergyPreferencesValidation,
   EnergyValidationIssue,
 } from "../../../../data/energy";
-import { saveEnergyPreferences } from "../../../../data/energy";
+import {
+  computeEnergyLabel,
+  saveEnergyPreferences,
+} from "../../../../data/energy";
 import type { StatisticsMetaData } from "../../../../data/recorder";
-import { getStatisticLabel } from "../../../../data/recorder";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -104,18 +108,7 @@ export class EnergyDeviceSettings extends LitElement {
                                   .path=${mdiDragHorizontalVariant}
                                 ></ha-svg-icon>
                               </div>
-                              <span class="content"
-                                >${
-                                  device.name ||
-                                  getStatisticLabel(
-                                    this.hass,
-                                    device.stat_consumption,
-                                    this.statsMetadata?.[
-                                      device.stat_consumption
-                                    ]
-                                  )
-                                }</span
-                              >
+                              ${this._renderName(device)}
                               ${this._renderIssueIndicator(
                                 this.validationResult?.device_consumption[
                                   index
@@ -155,6 +148,32 @@ export class EnergyDeviceSettings extends LitElement {
     `;
   }
 
+  private _renderName(device: DeviceConsumptionEnergyPreference) {
+    const name = computeEnergyLabel(
+      this.hass,
+      device.stat_consumption,
+      this.statsMetadata?.[device.stat_consumption],
+      device.name
+    );
+    const areaId = getEntityAreaId(
+      device.stat_consumption,
+      this.hass.entities,
+      this.hass.devices
+    );
+    const area = areaId ? this.hass.areas[areaId] : undefined;
+    const areaName = area ? computeAreaName(area) : undefined;
+    return html`
+      <div class="content">
+        <span class="label">${name}</span>
+        ${
+          areaName
+            ? html`<span class="label secondary">${areaName}</span>`
+            : nothing
+        }
+      </div>
+    `;
+  }
+
   private _renderIssueIndicator(
     issues: EnergyValidationIssue[] | undefined,
     index: number
@@ -276,6 +295,22 @@ export class EnergyDeviceSettings extends LitElement {
       haStyle,
       energyCardStyles,
       css`
+        .row {
+          height: 58px;
+        }
+        .content {
+          display: flex;
+          flex-direction: column;
+        }
+        .label {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .label.secondary {
+          color: var(--secondary-text-color);
+          font-size: 0.9em;
+        }
         .handle {
           cursor: move; /* fallback if grab cursor is unsupported */
           cursor: grab;

src/panels/config/energy/dialogs/dialog-energy-device-settings-water.ts

@@ -11,9 +11,11 @@ import "../../../../components/input/ha-input";
 import "./ha-energy-upstream-device-picker";
 import type { HaInput } from "../../../../components/input/ha-input";
 import type { DeviceConsumptionEnergyPreference } from "../../../../data/energy";
-import { energyStatisticHelpUrl } from "../../../../data/energy";
 import {
-  getStatisticLabel,
+  computeEnergyLabel,
+  energyStatisticHelpUrl,
+} from "../../../../data/energy";
+import {
   getStatisticMetadata,
   isExternalStatistic,
 } from "../../../../data/recorder";
@@ -174,7 +176,7 @@ export class DialogEnergyDeviceSettingsWater
           .value=${this._device?.name || ""}
           .placeholder=${
             this._device
-              ? getStatisticLabel(
+              ? computeEnergyLabel(
                   this.hass,
                   this._device.stat_consumption,
                   this._params?.statsMetadata?.[this._device.stat_consumption]

src/panels/config/energy/dialogs/dialog-energy-device-settings.ts

@@ -11,9 +11,11 @@ import "../../../../components/input/ha-input";
 import "./ha-energy-upstream-device-picker";
 import type { HaInput } from "../../../../components/input/ha-input";
 import type { DeviceConsumptionEnergyPreference } from "../../../../data/energy";
-import { energyStatisticHelpUrl } from "../../../../data/energy";
 import {
-  getStatisticLabel,
+  computeEnergyLabel,
+  energyStatisticHelpUrl,
+} from "../../../../data/energy";
+import {
   getStatisticMetadata,
   isExternalStatistic,
 } from "../../../../data/recorder";
@@ -170,7 +172,7 @@ export class DialogEnergyDeviceSettings
           .value=${this._device?.name || ""}
           .placeholder=${
             this._device
-              ? getStatisticLabel(
+              ? computeEnergyLabel(
                   this.hass,
                   this._device.stat_consumption,
                   this._params?.statsMetadata?.[this._device.stat_consumption]

src/panels/config/energy/dialogs/ha-energy-upstream-device-picker.ts

@@ -7,7 +7,6 @@ import memoizeOne from "memoize-one";
 import { computeEntityNameList } from "../../../../common/entity/compute_entity_name_display";
 import { computeStateName } from "../../../../common/entity/compute_state_name";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { computeRTL } from "../../../../common/util/compute_rtl";
 import "../../../../components/entity/state-badge";
 import "../../../../components/ha-combo-box-item";
 import "../../../../components/ha-generic-picker";
@@ -15,6 +14,7 @@ import type { PickerComboBoxItem } from "../../../../components/ha-picker-combo-
 import type { PickerValueRenderer } from "../../../../components/ha-picker-field";
 import "../../../../components/ha-svg-icon";
 import type { DeviceConsumptionEnergyPreference } from "../../../../data/energy";
+import { computeEnergyLabel } from "../../../../data/energy";
 import { domainToName } from "../../../../data/integration";
 import {
   getStatisticLabel,
@@ -73,20 +73,18 @@ export class HaEnergyUpstreamDevicePicker extends LitElement {
         this.hass.floors
       );
 
-      const isRTL = computeRTL(
-        this.hass.language,
-        this.hass.translationMetadata.translations
-      );
-
       const friendlyName = computeStateName(stateObj); // Keep this for search
-      const secondary = [areaName, entityName ? deviceName : undefined]
-        .filter(Boolean)
-        .join(isRTL ? " ◂ " : " ▸ ");
 
       return {
         id: statisticId,
-        primary: name || entityName || deviceName || statisticId,
-        secondary,
+        // Match the label shown in the device list and the graphs.
+        primary: computeEnergyLabel(
+          this.hass,
+          statisticId,
+          this.statsMetadata?.[statisticId],
+          name
+        ),
+        secondary: areaName,
         stateObj,
         search_labels: {
           entityName: entityName || null,

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

@@ -10,12 +10,15 @@ import {
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import { styleMap } from "lit/directives/style-map";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { computeDeviceNameDisplay } from "../../../common/entity/compute_device_name";
 import { getDeviceArea } from "../../../common/entity/context/get_device_context";
 import { navigate } from "../../../common/navigate";
+import { computeRTL } from "../../../common/util/compute_rtl";
 import "../../../components/ha-dropdown";
 import "../../../components/ha-dropdown-item";
+import "../../../components/ha-tree-indicator";
 import {
   disableConfigEntry,
   type ConfigEntry,
@@ -48,6 +51,13 @@ class HaConfigEntryDeviceRow extends LitElement {
 
   @property({ attribute: false }) public entities!: EntityRegistryEntry[];
 
+  // Rendered indented under its parent device.
+  @property({ type: Boolean, reflect: true, attribute: "is-child" })
+  public isChild = false;
+
+  // The last child of its parent, so the tree connector draws its end.
+  @property({ attribute: false }) public isLastChild = false;
+
   protected render() {
     const device = this.device;
 
@@ -55,6 +65,11 @@ class HaConfigEntryDeviceRow extends LitElement {
 
     const area = getDeviceArea(device, this.hass.areas, this.hass.devices);
 
+    const rtl = computeRTL(
+      this.hass.language,
+      this.hass.translationMetadata.translations
+    );
+
     const supportingText = [
       device.model || device.sw_version || device.manufacturer,
       area ? area.name : undefined,
@@ -65,6 +80,25 @@ class HaConfigEntryDeviceRow extends LitElement {
       @click=${this._handleNavigateToDevice}
       class=${classMap({ disabled: Boolean(device.disabled_by) })}
     >
+      ${
+        this.isChild
+          ? html`<ha-tree-indicator
+              style=${styleMap({
+                position: "absolute",
+                // Span the full row height so consecutive children form one
+                // continuous line; the elbow sits at the vertical centre.
+                top: "0",
+                // Align the connector under the parent device icon; the leading
+                // space (and thus the icon column) is smaller in narrow mode.
+                left: rtl ? undefined : this.narrow ? "4px" : "44px",
+                right: rtl ? (this.narrow ? "4px" : "44px") : undefined,
+                transform: rtl ? "scaleX(-1)" : "",
+              })}
+              .end=${this.isLastChild}
+              slot="start"
+            ></ha-tree-indicator>`
+          : nothing
+      }
       <ha-svg-icon
         .path=${
           device.entry_type === "service"
@@ -351,12 +385,22 @@ class HaConfigEntryDeviceRow extends LitElement {
         --md-ripple-hover-color: transparent;
         --md-ripple-pressed-color: transparent;
       }
+      :host([is-child]) ha-md-list-item {
+        --md-list-item-leading-space: 88px;
+      }
       .disabled {
         opacity: 0.5;
       }
       :host([narrow]) ha-md-list-item {
         --md-list-item-leading-space: 16px;
       }
+      :host([narrow][is-child]) ha-md-list-item {
+        --md-list-item-leading-space: 48px;
+      }
+      ha-tree-indicator {
+        width: 48px;
+        height: 100%;
+      }
       .vertical-divider {
         height: 100%;
         width: 1px;

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

@@ -45,6 +45,7 @@ import {
 } from "../../../data/config_entries";
 import type { DiagnosticInfo } from "../../../data/diagnostics";
 import { getConfigEntryDiagnosticsDownloadUrl } from "../../../data/diagnostics";
+import { groupDevicesByParent } from "../../../data/device/device_registry";
 import type { EntityRegistryEntry } from "../../../data/entity/entity_registry";
 import type { IntegrationManifest } from "../../../data/integration";
 import {
@@ -479,14 +480,16 @@ export class HaConfigEntryRow extends LitElement {
                       </ha-md-list-item>
                       ${
                         this._devicesExpanded
-                          ? ownDevices.map(
-                              (device) =>
+                          ? groupDevicesByParent(ownDevices).map(
+                              ({ device, isChild, isLastChild }) =>
                                 html`<ha-config-entry-device-row
                                   .hass=${this.hass}
                                   .narrow=${this.narrow}
                                   .entry=${item}
                                   .device=${device}
                                   .entities=${entities}
+                                  .isChild=${isChild}
+                                  .isLastChild=${isLastChild}
                                 ></ha-config-entry-device-row>`
                             )
                           : nothing
@@ -509,14 +512,16 @@ export class HaConfigEntryRow extends LitElement {
                 `
               )}`
             : html`
-                ${ownDevices.map(
-                  (device) =>
+                ${groupDevicesByParent(ownDevices).map(
+                  ({ device, isChild, isLastChild }) =>
                     html`<ha-config-entry-device-row
                       .hass=${this.hass}
                       .narrow=${this.narrow}
                       .entry=${item}
                       .device=${device}
                       .entities=${entities}
+                      .isChild=${isChild}
+                      .isLastChild=${isLastChild}
                     ></ha-config-entry-device-row>`
                 )}
               `

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

@@ -15,6 +15,7 @@ import "../../../components/ha-dropdown";
 import "../../../components/ha-dropdown-item";
 import type { ConfigEntry } from "../../../data/config_entries";
 import { deleteSubEntry, updateSubEntry } from "../../../data/config_entries";
+import { groupDevicesByParent } from "../../../data/device/device_registry";
 import type { DiagnosticInfo } from "../../../data/diagnostics";
 import type { EntityRegistryEntry } from "../../../data/entity/entity_registry";
 import type { IntegrationManifest } from "../../../data/integration";
@@ -191,14 +192,16 @@ class HaConfigSubEntryRow extends LitElement {
       ${
         this._expanded
           ? html`
-              ${devices.map(
-                (device) =>
+              ${groupDevicesByParent(devices).map(
+                ({ device, isChild, isLastChild }) =>
                   html`<ha-config-entry-device-row
                     .hass=${this.hass}
                     .narrow=${this.narrow}
                     .entry=${this.entry}
                     .device=${device}
                     .entities=${this.entities}
+                    .isChild=${isChild}
+                    .isLastChild=${isLastChild}
                   ></ha-config-entry-device-row>`
               )}
               ${services.map(

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

@@ -1,9 +1,8 @@
 import {
-  mdiChartBoxOutline,
   mdiDotsVertical,
   mdiDownload,
+  mdiFilterRemove,
   mdiImagePlus,
-  mdiTuneVariant,
 } from "@mdi/js";
 import { differenceInHours } from "date-fns";
 import type {
@@ -11,11 +10,10 @@ import type {
   UnsubscribeFunc,
 } from "home-assistant-js-websocket/dist/types";
 import type { PropertyValues } from "lit";
-import { LitElement, css, html, nothing } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { storage } from "../../common/decorators/storage";
-import type { HASSDomEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { navigate } from "../../common/navigate";
 import { constructUrlCurrentPath } from "../../common/url/construct-url";
@@ -31,25 +29,14 @@ import {
 import { MIN_TIME_BETWEEN_UPDATES } from "../../components/chart/ha-chart-base";
 import "../../components/chart/state-history-charts";
 import type { StateHistoryCharts } from "../../components/chart/state-history-charts";
-import "../../components/date-picker/ha-date-range-nav";
-import "../../components/ha-button";
+import "../../components/date-picker/ha-date-range-picker";
 import "../../components/ha-dropdown";
 import type { HaDropdownSelectEvent } from "../../components/ha-dropdown";
 import "../../components/ha-dropdown-item";
-import "../../components/ha-empty-state";
-import "../../components/ha-filter-pane-chip";
-import "../../components/ha-filter-pane";
 import "../../components/ha-icon-button";
-import {
-  applySourceFilters,
-  countSourceFilters,
-  countTargets,
-} from "../../components/ha-sources-picker";
-import type { SourceFilters } from "../../components/ha-sources-picker";
 import "../../components/ha-spinner";
+import "../../components/ha-target-picker";
 import "../../components/ha-top-app-bar-fixed";
-import type { EntitySources } from "../../data/entity/entity_sources";
-import { fetchEntitySourcesWithCache } from "../../data/entity/entity_sources";
 import type { HistoryResult } from "../../data/history";
 import {
   computeHistory,
@@ -65,8 +52,6 @@ import type { HomeAssistant } from "../../types";
 import { addEntitiesToLovelaceView } from "../lovelace/editor/add-entities-to-view";
 import { csvSafeString, csvDownload } from "../../util/csv";
 
-const EMPTY_STATES: HomeAssistant["states"] = {};
-
 @customElement("ha-panel-history")
 class HaPanelHistory extends LitElement {
   @property({ attribute: false }) hass!: HomeAssistant;
@@ -93,12 +78,6 @@ class HaPanelHistory extends LitElement {
 
   @state() private _isLoading = false;
 
-  @state() private _filters: SourceFilters = {};
-
-  @state() private _showSources = false;
-
-  @state() private _entitySources?: EntitySources;
-
   @state() private _stateHistory?: HistoryResult;
 
   private _mungedStateHistory?: HistoryResult;
@@ -140,18 +119,7 @@ class HaPanelHistory extends LitElement {
   }
 
   protected render() {
-    const targetCount = countTargets(this._targetPickerValue);
-    const sourceCount = targetCount + countSourceFilters(this._filters);
-    // History only shows something once a target is picked, so narrowing it
-    // down further does not make it any less empty.
-    const hasTargets = targetCount > 0;
-    const loading =
-      this._isLoading || (hasTargets && !this._mungedStateHistory);
-    const hasResults =
-      !!this._mungedStateHistory &&
-      (this._mungedStateHistory.line.length > 0 ||
-        this._mungedStateHistory.timeline.length > 0);
-
+    const entitiesSelected = this._getEntityIds().length > 0;
     return html`
       <ha-top-app-bar-fixed
         .narrow=${this.narrow}
@@ -160,6 +128,13 @@ class HaPanelHistory extends LitElement {
         <h1 class="page-title" slot="title">
           ${this.hass.localize("panel.history")}
         </h1>
+        <ha-icon-button
+          slot="actionItems"
+          @click=${this._removeAll}
+          .disabled=${this._isLoading || !entitiesSelected}
+          .path=${mdiFilterRemove}
+          .label=${this.hass.localize("ui.panel.history.remove_all")}
+        ></ha-icon-button>
         <ha-dropdown slot="actionItems" @wa-select=${this._handleMenuAction}>
           <ha-icon-button
             slot="trigger"
@@ -178,109 +153,51 @@ class HaPanelHistory extends LitElement {
           </ha-dropdown-item>
         </ha-dropdown>
 
-        <div class="content">
-          <div class="main">
-            ${
-              this._showSources
-                ? html`<ha-filter-pane
-                    .narrow=${this.narrow}
-                    .label=${this.hass.localize("ui.panel.history.sources")}
-                    .path=${mdiTuneVariant}
-                    .count=${sourceCount}
-                    .resultCount=${this._getEntityIds().length}
-                    .disabled=${this._isLoading}
-                    @close-filter-pane=${this._closeSources}
-                    @clear-filter=${this._clearSources}
-                  >
-                    <ha-sources-picker
-                      .hass=${this.hass}
-                      .value=${this._targetPickerValue}
-                      .filters=${this._filters}
-                      .narrow=${this.narrow}
-                      .disabled=${this._isLoading}
-                      .description=${this.hass.localize(
-                        "ui.panel.history.no_targets"
-                      )}
-                      @value-changed=${this._targetsChanged}
-                      @source-filters-changed=${this._filtersChanged}
-                    ></ha-sources-picker>
-                  </ha-filter-pane>`
-                : nothing
-            }
-            <div class="content-column">
-              <div class="toolbar">
-                ${
-                  this._showSources && !this.narrow
-                    ? nothing
-                    : html`<ha-filter-pane-chip
-                        .label=${this.hass.localize("ui.panel.history.sources")}
-                        .path=${mdiTuneVariant}
-                        .count=${sourceCount}
-                        .active=${sourceCount > 0}
-                        .disabled=${this._isLoading}
-                        @click=${this._toggleSources}
-                      ></ha-filter-pane-chip>`
-                }
-                <ha-date-range-nav
-                  .disabled=${this._isLoading}
-                  .startDate=${this._startDate}
-                  .endDate=${this._endDate}
-                  extended-presets
-                  time-picker
-                  @value-changed=${this._dateRangeChanged}
-                ></ha-date-range-nav>
-              </div>
-              <div class="results ha-scrollbar">
-                ${
-                  loading
-                    ? html`<div class="progress-wrapper">
-                        <ha-spinner></ha-spinner>
-                      </div>`
-                    : !hasTargets || !hasResults
-                      ? this._renderEmptyState(hasTargets)
-                      : html`
-                          <state-history-charts
-                            .hass=${this.hass}
-                            .historyData=${this._mungedStateHistory}
-                            .startTime=${this._startDate}
-                            .endTime=${this._endDate}
-                            .narrow=${this.narrow}
-                            inside-labels
-                            sync-charts
-                          >
-                          </state-history-charts>
-                        `
-                }
-              </div>
-            </div>
+        <div class="flex content ha-scrollbar">
+          <div class="filters">
+            <ha-date-range-picker
+              ?disabled=${this._isLoading}
+              .startDate=${this._startDate}
+              .endDate=${this._endDate}
+              extended-presets
+              time-picker
+              @value-changed=${this._dateRangeChanged}
+            ></ha-date-range-picker>
+            <ha-target-picker
+              .hass=${this.hass}
+              .value=${this._targetPickerValue}
+              .disabled=${this._isLoading}
+              add-on-top
+              @value-changed=${this._targetsChanged}
+              compact
+            ></ha-target-picker>
           </div>
+          ${
+            this._isLoading
+              ? html`<div class="progress-wrapper">
+                  <ha-spinner></ha-spinner>
+                </div>`
+              : !entitiesSelected
+                ? html`<div class="start-search">
+                    ${this.hass.localize("ui.panel.history.start_search")}
+                  </div>`
+                : html`
+                    <state-history-charts
+                      .hass=${this.hass}
+                      .historyData=${this._mungedStateHistory}
+                      .startTime=${this._startDate}
+                      .endTime=${this._endDate}
+                      .narrow=${this.narrow}
+                      sync-charts
+                    >
+                    </state-history-charts>
+                  `
+          }
         </div>
       </ha-top-app-bar-fixed>
     `;
   }
 
-  private _renderEmptyState(hasTargets: boolean) {
-    return html`
-      <ha-empty-state
-        .icon=${mdiChartBoxOutline}
-        .heading=${this.hass.localize(
-          hasTargets
-            ? "ui.panel.history.no_results_title"
-            : "ui.panel.history.start_search_title"
-        )}
-        .description=${this.hass.localize(
-          hasTargets
-            ? "ui.panel.history.no_results"
-            : "ui.panel.history.start_search"
-        )}
-      >
-        <ha-button appearance="plain" @click=${this._openSources}>
-          ${this.hass.localize("ui.panel.history.add_targets")}
-        </ha-button>
-      </ha-empty-state>
-    `;
-  }
-
   public willUpdate(changedProps: PropertyValues) {
     super.willUpdate(changedProps);
 
@@ -325,10 +242,6 @@ class HaPanelHistory extends LitElement {
 
   protected firstUpdated(changedProps: PropertyValues<this>) {
     super.firstUpdated(changedProps);
-    // Needed to map entities to their integration for the integration filter.
-    fetchEntitySourcesWithCache(this.hass).then((sources) => {
-      this._entitySources = sources;
-    });
     const searchParams = extractSearchParamsObject();
     if (searchParams.back === "1" && history.length > 1) {
       this._showBack = true;
@@ -343,8 +256,6 @@ class HaPanelHistory extends LitElement {
       changedProps.has("_startDate") ||
       changedProps.has("_endDate") ||
       changedProps.has("_targetPickerValue") ||
-      changedProps.has("_filters") ||
-      changedProps.has("_entitySources") ||
       (!this._stateHistory &&
         (changedProps.has("_deviceEntityLookup") ||
           changedProps.has("_areaEntityLookup") ||
@@ -355,26 +266,7 @@ class HaPanelHistory extends LitElement {
     }
   }
 
-  private _toggleSources() {
-    this._showSources = !this._showSources;
-  }
-
-  private _openSources() {
-    this._showSources = true;
-  }
-
-  private _closeSources() {
-    this._showSources = false;
-  }
-
-  private _filtersChanged(
-    ev: HASSDomEvent<HASSDomEvents["source-filters-changed"]>
-  ) {
-    this._filters = ev.detail.value;
-  }
-
-  private _clearSources() {
-    this._filters = {};
+  private _removeAll() {
     this._targetPickerValue = {};
     this._storedTargetPickerValue = this._targetPickerValue;
     this._updatePath();
@@ -487,39 +379,20 @@ class HaPanelHistory extends LitElement {
   private _getEntityIds(): string[] {
     return this.__getEntityIds(
       this._targetPickerValue,
-      this._filters,
       this.hass.entities,
       this.hass.devices,
-      this.hass.areas,
-      // Only the device class filter reads the states, so they stay out of the
-      // memoization key while it is not used.
-      this._filters.deviceClasses?.length ? this.hass.states : EMPTY_STATES,
-      this._entitySources
+      this.hass.areas
     );
   }
 
   private __getEntityIds = memoizeOne(
     (
       targetPickerValue: HassServiceTarget,
-      filters: SourceFilters,
       entities: HomeAssistant["entities"],
       devices: HomeAssistant["devices"],
-      areas: HomeAssistant["areas"],
-      states: HomeAssistant["states"],
-      entitySources: EntitySources | undefined
+      areas: HomeAssistant["areas"]
     ): string[] =>
-      applySourceFilters(
-        resolveEntityIDs(
-          this.hass,
-          targetPickerValue,
-          entities,
-          devices,
-          areas
-        ),
-        filters,
-        states,
-        entitySources
-      )
+      resolveEntityIDs(this.hass, targetPickerValue, entities, devices, areas)
   );
 
   private _dateRangeChanged(ev) {
@@ -700,15 +573,7 @@ class HaPanelHistory extends LitElement {
           line-height: inherit;
         }
 
-        :host {
-          /* The picker of the target picker is wider than the pane. */
-          --ha-generic-picker-width: min(400px, calc(100vw - 32px));
-          --ha-generic-picker-max-width: 400px;
-        }
-
         .content {
-          display: flex;
-          flex-direction: column;
           height: calc(
             100vh - var(--header-height, 0px) - var(
                 --safe-area-inset-top,
@@ -716,57 +581,13 @@ class HaPanelHistory extends LitElement {
               ) - var(--safe-area-inset-bottom, 0px)
           );
           box-sizing: border-box;
-          overflow: hidden;
+          overflow-x: hidden;
+          padding: 0 16px 16px;
         }
 
-        .main {
-          display: flex;
-          flex: 1;
-          min-height: 0;
-        }
-
-        .content-column {
-          display: flex;
-          flex-direction: column;
-          flex: 1;
-          min-width: 0;
-        }
-
-        /* Sits in the content column, so it shifts along with the pane. */
-        .toolbar {
-          display: flex;
-          align-items: center;
-          gap: var(--ha-space-4);
-          box-sizing: border-box;
-          height: 56px;
-          flex-shrink: 0;
-          padding: 0 16px;
-          background: var(--primary-background-color);
-          border-bottom: 1px solid var(--divider-color);
-          direction: var(--direction);
-          /* Keep the controls at their size and scroll them if they do not fit. */
-          overflow-x: auto;
-          scrollbar-width: none;
-        }
-
-        .toolbar::-webkit-scrollbar {
-          display: none;
-        }
-
-        .toolbar > * {
-          flex-shrink: 0;
-        }
-
-        .results {
-          flex: 1;
-          min-width: 0;
-          overflow: hidden auto;
-          padding: 16px 8px;
-        }
-
-        /* Line the charts up with the toolbar when there are no axis labels. */
-        :host([narrow]) .results {
-          padding-inline: 16px;
+        :host([virtualize]) {
+          height: 100%;
+          --ha-generic-picker-max-width: 400px;
         }
 
         .progress-wrapper {
@@ -776,6 +597,42 @@ class HaPanelHistory extends LitElement {
           flex-direction: column;
           padding: 16px;
         }
+
+        .filters {
+          display: flex;
+          align-items: flex-start;
+          margin-top: 16px;
+        }
+
+        ha-date-range-picker {
+          margin-right: 16px;
+          margin-inline-end: 16px;
+          margin-inline-start: initial;
+          max-width: 100%;
+          direction: var(--direction);
+        }
+
+        ha-target-picker {
+          flex: 1;
+          max-width: 100%;
+          min-width: 0;
+        }
+
+        @media all and (max-width: 1025px) {
+          .filters {
+            flex-direction: column;
+          }
+          ha-date-range-picker {
+            width: 100%;
+            margin-bottom: 8px;
+          }
+        }
+
+        .start-search {
+          padding-top: 16px;
+          text-align: center;
+          color: var(--secondary-text-color);
+        }
       `,
     ];
   }

src/panels/logbook/ha-logbook-renderer.ts

@@ -57,10 +57,6 @@ class HaLogbookRenderer extends LitElement {
 
   @state() private _showRelative = false;
 
-  // Index of the row at the top of the list, which the floating date header
-  // takes its day from.
-  @state() private _firstVisibleIndex = 0;
-
   protected willUpdate(changedProps: PropertyValues<this>) {
     if (
       (!this.hasUpdated && this.virtualize) ||
@@ -83,7 +79,6 @@ class HaLogbookRenderer extends LitElement {
       changedProps.has("entries") ||
       changedProps.has("traceContexts") ||
       changedProps.has("_showRelative" as never) ||
-      changedProps.has("_firstVisibleIndex" as never) ||
       languageChanged
     );
   }
@@ -97,26 +92,12 @@ class HaLogbookRenderer extends LitElement {
       `;
     }
 
-    // The virtualizer positions its rows, so an inline date header cannot
-    // stick. Instead one header floats above the list and follows the day of
-    // the row that is at the top.
-    const floatingEntry = this.virtualize
-      ? this.entries[this._firstVisibleIndex]
-      : undefined;
-
     return html`
       <div
         class="container ha-scrollbar"
         @scroll=${this._saveScrollPos}
         @logbook-toggle-time=${this._handleToggleTime}
       >
-        ${
-          floatingEntry
-            ? html`<h4 class="date floating-date">
-                ${this._formatDateHeader(new Date(floatingEntry.when * 1000))}
-              </h4>`
-            : nothing
-        }
         ${
           this.virtualize
             ? html`<lit-virtualizer
@@ -202,7 +183,6 @@ class HaLogbookRenderer extends LitElement {
 
   @eventOptions({ passive: true })
   private _visibilityChanged(e: VisibilityChangedEvent) {
-    this._firstVisibleIndex = Math.max(0, e.first);
     fireEvent(this, "hass-logbook-live", {
       enable: e.first === 0,
     });
@@ -229,25 +209,12 @@ class HaLogbookRenderer extends LitElement {
           font-weight: var(--ha-font-weight-medium);
         }
 
-        /* Floats above the virtualized list and lines up with the inline date
-           headers, so they scroll underneath it. */
-        .floating-date {
-          position: absolute;
-          top: 0;
-          inset-inline: 0;
-          z-index: 2;
-          margin: 0;
-          padding-bottom: var(--ha-space-2);
-          background-color: var(--card-background-color);
-        }
-
         .no-entries {
           text-align: center;
           color: var(--secondary-text-color);
         }
 
         .container {
-          position: relative;
           max-height: var(--logbook-max-height);
         }
 

src/panels/logbook/ha-logbook.ts

@@ -38,10 +38,6 @@ const idsChanged = (oldIds?: string[], newIds?: string[]) => {
   );
 };
 
-/**
- * @slot empty - Shown instead of the default text when there is no activity,
- * for surfaces that can offer a way out (e.g. changing the filters).
- */
 @customElement("ha-logbook")
 export class HaLogbook extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -130,11 +126,9 @@ export class HaLogbook extends LitElement {
     }
 
     if (this._logbookEntries.length === 0) {
-      return html`<slot name="empty">
-        <div class="no-entries">
-          ${this.hass.localize("ui.components.logbook.entries_not_found")}
-        </div>
-      </slot>`;
+      return html`<div class="no-entries">
+        ${this.hass.localize("ui.components.logbook.entries_not_found")}
+      </div>`;
     }
 
     return html`

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

@@ -3,17 +3,14 @@ import {
   mdiDownload,
   mdiFilterRemove,
   mdiRefresh,
-  mdiTextBoxOutline,
-  mdiTuneVariant,
 } from "@mdi/js";
 import type { HassServiceTarget } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fromUnixTime } from "date-fns";
 import { storage } from "../../common/decorators/storage";
-import type { HASSDomEvent } from "../../common/dom/fire_event";
 import { navigate } from "../../common/navigate";
 import { constructUrlCurrentPath } from "../../common/url/construct-url";
 import {
@@ -26,25 +23,14 @@ import {
   removeSearchParam,
 } from "../../common/url/search-params";
 import { deepEqual } from "../../common/util/deep-equal";
-import "../../components/date-picker/ha-date-range-nav";
-import "../../components/ha-button";
+import "../../components/date-picker/ha-date-range-picker";
 import "../../components/ha-dropdown";
 import type { HaDropdownSelectEvent } from "../../components/ha-dropdown";
 import "../../components/ha-dropdown-item";
-import "../../components/ha-empty-state";
-import "../../components/ha-filter-pane-chip";
-import "../../components/ha-filter-pane";
 import "../../components/ha-icon-button";
-import {
-  applySourceFilters,
-  countSourceFilters,
-  countTargets,
-} from "../../components/ha-sources-picker";
-import type { SourceFilters } from "../../components/ha-sources-picker";
+import "../../components/ha-target-picker";
 import "../../components/ha-top-app-bar-fixed";
 import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
-import type { EntitySources } from "../../data/entity/entity_sources";
-import { fetchEntitySourcesWithCache } from "../../data/entity/entity_sources";
 import { filterLogbookCompatibleEntities } from "../../data/logbook";
 import { resolveEntityIDs } from "../../data/selector";
 import { haStyle } from "../../resources/styles";
@@ -71,12 +57,6 @@ export class HaPanelLogbook extends LitElement {
   @state()
   private _showBack?: boolean;
 
-  @state() private _filters: SourceFilters = {};
-
-  @state() private _showSources = false;
-
-  @state() private _entitySources?: EntitySources;
-
   @state() private _targetPickerValue: HassServiceTarget = {};
 
   // Remembers the last user-picked selection as a fallback for visits without
@@ -95,16 +75,19 @@ export class HaPanelLogbook extends LitElement {
   }
 
   protected render() {
-    const entityIds = this._getEntityIds();
-    const sourceCount =
-      countTargets(this._targetPickerValue) + countSourceFilters(this._filters);
-
     return html`
       <ha-top-app-bar-fixed
         .narrow=${this.narrow}
         .backButton=${!!this._showBack}
       >
         <div slot="title">${this.hass.localize("panel.logbook")}</div>
+        <ha-icon-button
+          slot="actionItems"
+          @click=${this._resetLogbook}
+          .disabled=${this._isDefaultState()}
+          .path=${mdiFilterRemove}
+          .label=${this.hass.localize("ui.common.reset")}
+        ></ha-icon-button>
 
         <ha-dropdown slot="actionItems" @wa-select=${this._handleMenuAction}>
           <ha-icon-button
@@ -122,126 +105,40 @@ export class HaPanelLogbook extends LitElement {
             ${this.hass.localize("ui.panel.logbook.download_data")}
             <ha-svg-icon slot="icon" .path=${mdiDownload}></ha-svg-icon>
           </ha-dropdown-item>
-
-          <ha-dropdown-item value="reset" .disabled=${this._isDefaultState()}>
-            ${this.hass.localize("ui.common.reset")}
-            <ha-svg-icon slot="icon" .path=${mdiFilterRemove}></ha-svg-icon>
-          </ha-dropdown-item>
         </ha-dropdown>
 
         <div class="content">
-          <div class="main">
-            ${
-              this._showSources
-                ? html`<ha-filter-pane
-                    .narrow=${this.narrow}
-                    .label=${this.hass.localize("ui.panel.logbook.sources")}
-                    .path=${mdiTuneVariant}
-                    .count=${sourceCount}
-                    .resultCount=${entityIds?.length}
-                    @close-filter-pane=${this._closeSources}
-                    @clear-filter=${this._clearSources}
-                  >
-                    <ha-sources-picker
-                      .hass=${this.hass}
-                      .value=${this._targetPickerValue}
-                      .filters=${this._filters}
-                      .entityFilter=${this._filterFunc}
-                      .narrow=${this.narrow}
-                      .description=${this.hass.localize(
-                        "ui.panel.logbook.no_targets"
-                      )}
-                      @value-changed=${this._targetsChanged}
-                      @source-filters-changed=${this._filtersChanged}
-                    ></ha-sources-picker>
-                  </ha-filter-pane>`
-                : nothing
-            }
-            <div class="content-column">
-              <div class="toolbar">
-                ${
-                  this._showSources && !this.narrow
-                    ? nothing
-                    : html`<ha-filter-pane-chip
-                        .label=${this.hass.localize("ui.panel.logbook.sources")}
-                        .path=${mdiTuneVariant}
-                        .count=${sourceCount}
-                        .active=${sourceCount > 0}
-                        @click=${this._toggleSources}
-                      ></ha-filter-pane-chip>`
-                }
-                <ha-date-range-nav
-                  .startDate=${this._time.range[0]}
-                  .endDate=${this._time.range[1]}
-                  @value-changed=${this._dateRangeChanged}
-                  time-picker
-                ></ha-date-range-nav>
-              </div>
+          <div class="filters">
+            <ha-date-range-picker
+              .startDate=${this._time.range[0]}
+              .endDate=${this._time.range[1]}
+              @value-changed=${this._dateRangeChanged}
+              time-picker
+            ></ha-date-range-picker>
 
-              <ha-logbook
-                .hass=${this.hass}
-                .time=${this._time}
-                .entityIds=${entityIds}
-                .narrow=${this.narrow}
-                show-cause
-                virtualize
-              >
-                ${
-                  sourceCount > 0
-                    ? html`<ha-empty-state
-                        slot="empty"
-                        .icon=${mdiTextBoxOutline}
-                        .heading=${this.hass.localize(
-                          "ui.panel.logbook.no_results_title"
-                        )}
-                        .description=${this.hass.localize(
-                          "ui.panel.logbook.no_results"
-                        )}
-                      >
-                        <ha-button
-                          appearance="plain"
-                          @click=${this._openSources}
-                        >
-                          ${this.hass.localize(
-                            "ui.panel.logbook.change_sources"
-                          )}
-                        </ha-button>
-                      </ha-empty-state>`
-                    : nothing
-                }
-              </ha-logbook>
-            </div>
+            <ha-target-picker
+              .hass=${this.hass}
+              .entityFilter=${this._filterFunc}
+              .value=${this._targetPickerValue}
+              add-on-top
+              @value-changed=${this._targetsChanged}
+              compact
+            ></ha-target-picker>
           </div>
+
+          <ha-logbook
+            .hass=${this.hass}
+            .time=${this._time}
+            .entityIds=${this._getEntityIds()}
+            .narrow=${this.narrow}
+            show-cause
+            virtualize
+          ></ha-logbook>
         </div>
       </ha-top-app-bar-fixed>
     `;
   }
 
-  private _toggleSources() {
-    this._showSources = !this._showSources;
-  }
-
-  private _openSources() {
-    this._showSources = true;
-  }
-
-  private _closeSources() {
-    this._showSources = false;
-  }
-
-  private _filtersChanged(
-    ev: HASSDomEvent<HASSDomEvents["source-filters-changed"]>
-  ) {
-    this._filters = ev.detail.value;
-  }
-
-  private _clearSources() {
-    this._filters = {};
-    this._targetPickerValue = {};
-    this._storedTargetPickerValue = this._targetPickerValue;
-    this._updatePath();
-  }
-
   private _filterFunc: HaEntityPickerEntityFilterFunc = (entity) =>
     filterLogbookCompatibleEntities(entity);
 
@@ -258,10 +155,6 @@ export class HaPanelLogbook extends LitElement {
   protected firstUpdated(changedProps: PropertyValues<this>) {
     super.firstUpdated(changedProps);
     this.hass.loadBackendTranslation("title");
-    // Needed to map entities to their integration for the integration filter.
-    fetchEntitySourcesWithCache(this.hass).then((sources) => {
-      this._entitySources = sources;
-    });
 
     const searchParams = extractSearchParamsObject();
     if (searchParams.back === "1" && history.length > 1) {
@@ -286,30 +179,17 @@ export class HaPanelLogbook extends LitElement {
     this._applyURLParams();
   };
 
-  /**
-   * The entities to show activity for, or undefined for all of them. Filters
-   * without a target narrow down every entity the logbook can show.
-   */
   private _getEntityIds(): string[] | undefined {
-    const targetEntities = this.__getEntityIds(
+    const entities = this.__getEntityIds(
       this._targetPickerValue,
       this.hass.entities,
       this.hass.devices,
       this.hass.areas
     );
-
-    if (!countSourceFilters(this._filters)) {
-      return targetEntities.length ? targetEntities : undefined;
+    if (entities.length === 0) {
+      return undefined;
     }
-
-    return this.__filterEntityIds(
-      targetEntities.length
-        ? targetEntities
-        : this.__logbookEntityIds(this.hass.states),
-      this._filters,
-      this.hass.states,
-      this._entitySources
-    );
+    return entities;
   }
 
   private __getEntityIds = memoizeOne(
@@ -322,15 +202,6 @@ export class HaPanelLogbook extends LitElement {
       resolveEntityIDs(this.hass, targetPickerValue, entities, devices, areas)
   );
 
-  private __logbookEntityIds = memoizeOne(
-    (states: HomeAssistant["states"]): string[] =>
-      Object.values(states)
-        .filter((stateObj) => filterLogbookCompatibleEntities(stateObj))
-        .map((stateObj) => stateObj.entity_id)
-  );
-
-  private __filterEntityIds = memoizeOne(applySourceFilters);
-
   private _applyURLParams() {
     const queryParams = decodeHistoryLogbookQueryParams(
       extractSearchParamsObject()
@@ -413,7 +284,6 @@ export class HaPanelLogbook extends LitElement {
     this._time = defaultState.time;
     this._targetPickerValue = defaultState.targetPickerValue;
     this._storedTargetPickerValue = undefined;
-    this._filters = {};
     navigate("/logbook", { replace: true });
   }
 
@@ -430,9 +300,6 @@ export class HaPanelLogbook extends LitElement {
       case "refresh":
         this._refreshLogbook();
         break;
-      case "reset":
-        this._resetLogbook();
-        break;
     }
   }
 
@@ -496,8 +363,6 @@ export class HaPanelLogbook extends LitElement {
       haStyle,
       css`
         :host {
-          /* The picker of the target picker is wider than the pane. */
-          --ha-generic-picker-width: min(400px, calc(100vw - 32px));
           --ha-generic-picker-max-width: 400px;
         }
 
@@ -510,52 +375,59 @@ export class HaPanelLogbook extends LitElement {
                 0px
               ) - var(--safe-area-inset-bottom, 0px)
           );
-          box-sizing: border-box;
-          overflow: hidden;
-        }
-
-        .main {
-          display: flex;
-          flex: 1;
-          min-height: 0;
-        }
-
-        .content-column {
-          display: flex;
-          flex-direction: column;
-          flex: 1;
-          min-width: 0;
-        }
-
-        /* Sits in the content column, so it shifts along with the pane. */
-        .toolbar {
-          display: flex;
-          align-items: center;
-          gap: var(--ha-space-4);
-          box-sizing: border-box;
-          height: 56px;
-          flex-shrink: 0;
-          padding: 0 16px;
-          background: var(--primary-background-color);
-          border-bottom: 1px solid var(--divider-color);
-          direction: var(--direction);
-          /* Keep the controls at their size and scroll them if they do not fit. */
-          overflow-x: auto;
-          scrollbar-width: none;
-        }
-
-        .toolbar::-webkit-scrollbar {
-          display: none;
-        }
-
-        .toolbar > * {
-          flex-shrink: 0;
+          overflow-x: hidden;
+          padding: 0 0 16px;
         }
 
         ha-logbook {
           flex: 1;
           min-height: 0;
         }
+
+        ha-date-range-picker {
+          margin-right: 16px;
+          margin-inline-end: 16px;
+          margin-inline-start: initial;
+          max-width: 100%;
+          direction: var(--direction);
+        }
+
+        @media all and (max-width: 870px) {
+          ha-date-range-picker {
+            width: 100%;
+          }
+
+          .filters {
+            flex-direction: column;
+          }
+        }
+
+        :host([narrow]) ha-date-range-picker {
+          margin-right: 0;
+          margin-inline-end: 0;
+          margin-inline-start: initial;
+          direction: var(--direction);
+          margin-bottom: 8px;
+        }
+
+        .content {
+          overflow-x: hidden;
+        }
+
+        .filters {
+          display: flex;
+          padding: 16px 16px 0;
+        }
+
+        :host([narrow]) .filters {
+          flex-wrap: wrap;
+        }
+
+        ha-target-picker {
+          flex: 1;
+          max-width: 100%;
+          min-width: 0;
+        }
       `,
     ];
   }

src/panels/lovelace/card-features/common/feature-layout.ts

@@ -0,0 +1,33 @@
+import type {
+  LovelaceCardFeatureConfig,
+  LovelaceCardFeaturePosition,
+} from "../types";
+
+export interface CardFeatureLayout {
+  inline: LovelaceCardFeatureConfig[];
+  below: LovelaceCardFeatureConfig[];
+  /** Columns filled by the below features, 0 when there are none */
+  columns: number;
+}
+
+const INLINE_COLUMNS = 2;
+
+export const computeCardFeatureLayout = (
+  features: LovelaceCardFeatureConfig[] | undefined,
+  position: LovelaceCardFeaturePosition
+): CardFeatureLayout => {
+  if (position !== "inline") {
+    return { inline: [], below: features ?? [], columns: 1 };
+  }
+  const inline = features?.slice(0, 1) ?? [];
+  const below = features?.slice(1) ?? [];
+  return { inline, below, columns: Math.min(below.length, INLINE_COLUMNS) };
+};
+
+export const computeCardFeatureRows = (
+  features: LovelaceCardFeatureConfig[] | undefined,
+  position: LovelaceCardFeaturePosition
+): number => {
+  const { below, columns } = computeCardFeatureLayout(features, position);
+  return Math.ceil(below.length / Math.max(columns, 1));
+};

src/panels/lovelace/card-features/hui-card-features.ts

@@ -1,5 +1,6 @@
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import type { HomeAssistant } from "../../../types";
 import "./hui-card-feature";
 import type {
@@ -32,22 +33,32 @@ export class HuiCardFeatures extends LitElement {
   @property({ attribute: false })
   public position?: LovelaceCardFeaturePosition;
 
+  @property({ type: Number, reflect: true })
+  public columns = 1;
+
   protected render() {
     if (!this.features) {
       return nothing;
     }
+    const lastIndex = this.features.length - 1;
+    const columns = Math.max(this.columns, 1);
     return html`
-      ${this.features.map(
-        (feature) => html`
+      ${this.features.map((feature, index) => {
+        const column = index % columns;
+        return html`
           <hui-card-feature
+            class=${classMap({
+              divided: column > 0,
+              wide: column === 0 && index === lastIndex,
+            })}
             .hass=${this.hass}
             .context=${this.context}
             .color=${this.color}
             .feature=${feature}
             .position=${this.position}
           ></hui-card-feature>
-        `
-      )}
+        `;
+      })}
     `;
   }
 
@@ -55,20 +66,38 @@ export class HuiCardFeatures extends LitElement {
     :host {
       --feature-color: var(--state-icon-color);
       --feature-height: 42px;
+      --feature-columns: 1;
       --feature-border-radius: var(
         --ha-card-features-border-radius,
         var(--ha-border-radius-lg)
       );
       --feature-button-spacing: 12px;
+      --feature-column-gap: var(
+        --ha-card-feature-column-gap,
+        var(--ha-card-feature-gap, 12px)
+      );
+      --feature-divider-inset: var(--ha-card-feature-divider-inset, 0px);
       pointer-events: none;
       position: relative;
       width: 100%;
-      display: flex;
-      flex-direction: column;
-      gap: var(--ha-card-feature-gap, 12px);
-      width: 100%;
+      display: grid;
+      grid-template-columns: minmax(0, 1fr);
+      gap: var(--ha-card-feature-gap, 12px) var(--feature-column-gap);
       box-sizing: border-box;
-      justify-content: space-evenly;
+      align-content: space-evenly;
+    }
+    :host([columns="2"]) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    .wide {
+      grid-column: 1 / -1;
+    }
+    /* pull the divider out of the column and into the middle of the gutter */
+    .divided {
+      box-sizing: border-box;
+      margin-inline-start: calc(-1 * var(--feature-divider-inset));
+      padding-inline-start: var(--feature-divider-inset);
+      border-inline-start: var(--ha-card-feature-divider, none);
     }
   `;
 }

src/panels/lovelace/card-features/hui-media-player-playback-card-feature.ts

@@ -1,7 +1,7 @@
 import { consume } from "@lit/context";
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import {
   consumeEntityState,
@@ -202,14 +202,7 @@ class HuiMediaPlayerPlaybackCardFeature
     });
   }
 
-  static styles = [
-    cardFeatureStyles,
-    css`
-      ha-control-button-group {
-        overflow: hidden;
-      }
-    `,
-  ];
+  static styles = cardFeatureStyles;
 }
 
 declare global {

src/panels/lovelace/cards/energy/energy-devices-detail-graph-data.ts

@@ -8,13 +8,13 @@ import type {
 } from "../../../../data/energy";
 import {
   computeConsumptionData,
+  computeEnergyDeviceLabels,
   getSuggestedPeriod,
   getSummedData,
 } from "../../../../data/energy";
-import type { Statistics, StatisticsMetaData } from "../../../../data/recorder";
+import type { Statistics } from "../../../../data/recorder";
 import {
   calculateStatisticSumGrowth,
-  getStatisticLabel,
   isExternalStatistic,
 } from "../../../../data/recorder";
 import type { HomeAssistant } from "../../../../types";
@@ -69,13 +69,13 @@ interface ProcessContext {
   end: Date;
   compareStart?: Date;
   untrackedOrder: number;
+  deviceLabels: Record<string, string>;
 }
 
 function processDataSet(
   ctx: ProcessContext,
   computedStyle: CSSStyleDeclaration,
   statistics: Statistics,
-  statisticsMetaData: Record<string, StatisticsMetaData>,
   devices: DeviceConsumptionEnergyPreference[],
   sorted_devices: string[],
   childMap: Record<string, string[]>,
@@ -167,12 +167,7 @@ function processDataSet(
     }
 
     const name =
-      (source.name ||
-        getStatisticLabel(
-          ctx.hass,
-          source.stat_consumption,
-          statisticsMetaData[source.stat_consumption]
-        )) +
+      ctx.deviceLabels[source.stat_consumption] +
       (source.stat_consumption in childMap
         ? ` (${ctx.hass.localize("ui.panel.lovelace.cards.energy.energy_devices_detail_graph.untracked")})`
         : "");
@@ -351,6 +346,8 @@ export function generateEnergyDevicesDetailGraphData(
   const data = energyData.stats;
   const compareData = energyData.statsCompare;
 
+  const devices = energyData.prefs.device_consumption;
+
   const ctx: ProcessContext = {
     hass,
     config,
@@ -358,10 +355,13 @@ export function generateEnergyDevicesDetailGraphData(
     end,
     compareStart,
     untrackedOrder,
+    deviceLabels: computeEnergyDeviceLabels(
+      hass,
+      devices,
+      energyData.statsMetadata
+    ),
   };
 
-  const devices = energyData.prefs.device_consumption;
-
   const childMap: Record<string, string[]> = {};
   devices.forEach((d) => {
     if (d.included_in_stat) {
@@ -425,7 +425,6 @@ export function generateEnergyDevicesDetailGraphData(
       ctx,
       computedStyles,
       compareData,
-      energyData.statsMetadata,
       energyData.prefs.device_consumption,
       sorted_devices,
       childMap,
@@ -468,7 +467,6 @@ export function generateEnergyDevicesDetailGraphData(
     ctx,
     computedStyles,
     data,
-    energyData.statsMetadata,
     energyData.prefs.device_consumption,
     sorted_devices,
     childMap,

src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts

@@ -16,6 +16,7 @@ import "../../../../components/chart/ha-chart-tooltip-marker";
 import type { EnergyData } from "../../../../data/energy";
 import {
   computeConsumptionData,
+  computeEnergyDeviceLabels,
   getEnergyDataCollection,
   getSummedData,
   validateEnergyCollectionKey,
@@ -91,6 +92,8 @@ export class HuiEnergyDevicesGraphCard
 
   private _compoundStats: string[] = [];
 
+  private _deviceLabels: Record<string, string> = {};
+
   protected hassSubscribeRequiredHostProps = ["_config"];
 
   public hassSubscribe(): UnsubscribeFunc[] {
@@ -295,9 +298,8 @@ export class HuiEnergyDevicesGraphCard
       ? ` (${this.hass.localize("ui.panel.lovelace.cards.energy.energy_devices_graph.untracked")})`
       : "";
     return (
-      (this._data?.prefs.device_consumption.find(
-        (d) => d.stat_consumption === statisticId
-      )?.name ||
+      // The untracked slice is not a statistic, so it has no label.
+      (this._deviceLabels[statisticId] ||
         getStatisticLabel(
           this.hass,
           statisticId,
@@ -377,6 +379,12 @@ export class HuiEnergyDevicesGraphCard
       .map((d) => d.included_in_stat)
       .filter(Boolean) as string[];
 
+    this._deviceLabels = computeEnergyDeviceLabels(
+      this.hass,
+      energyData.prefs.device_consumption,
+      energyData.statsMetadata
+    );
+
     const devices = energyData.prefs.device_consumption;
     const devicesTotals: Record<string, number> = {};
     devices.forEach((device) => {

src/panels/lovelace/cards/energy/hui-energy-sankey-card.ts

@@ -8,6 +8,7 @@ import "../../../../components/ha-svg-icon";
 import type { EnergyData } from "../../../../data/energy";
 import {
   computeConsumptionData,
+  computeEnergyDeviceLabels,
   energySourcesByType,
   getEnergyDataCollection,
   getSummedData,
@@ -272,8 +273,14 @@ class HuiEnergySankeyCard
         ? calculateStatisticSumGrowth(this._data!.stats[statConsumption]) || 0
         : 0;
 
-    const deviceLabel = (statConsumption: string, name?: string) =>
-      name ||
+    const deviceLabels = computeEnergyDeviceLabels(
+      this.hass,
+      prefs.device_consumption,
+      this._data.statsMetadata
+    );
+
+    const deviceLabel = (statConsumption: string) =>
+      deviceLabels[statConsumption] ||
       getStatisticLabel(
         this.hass,
         statConsumption,

src/panels/lovelace/cards/energy/hui-power-sankey-card.ts

@@ -7,6 +7,7 @@ import "../../../../components/ha-card";
 import "../../../../components/ha-svg-icon";
 import type { EnergyData, EnergyPreferences } from "../../../../data/energy";
 import {
+  computeEnergyDeviceLabels,
   formatPowerShort,
   getEnergyDataCollection,
   getPowerFromState,
@@ -278,6 +279,13 @@ class HuiPowerSankeyCard
       }
     }
 
+    const deviceLabels = computeEnergyDeviceLabels(
+      this.hass,
+      prefs.device_consumption,
+      this._data.statsMetadata,
+      "stat_rate"
+    );
+
     const {
       deviceNodes,
       parentLinks,
@@ -294,7 +302,7 @@ class HuiPowerSankeyCard
       initialUntracked: homeNode.value,
       getId: (device) => device.stat_rate,
       getValue: (id) => this._getCurrentPower(id),
-      getLabel: (id, name) => name || this._getEntityLabel(id),
+      getLabel: (id) => deviceLabels[id] || this._getEntityLabel(id),
       getEntityId: (id) => id,
     });
     links.push(...deviceLinks);

src/panels/lovelace/cards/hui-area-card.ts

@@ -36,6 +36,10 @@ import { UNAVAILABLE, UNKNOWN } from "../../../data/entity/entity";
 import type { ActionHandlerEvent } from "../../../data/lovelace/action_handler";
 import type { HomeAssistant } from "../../../types";
 import "../card-features/hui-card-features";
+import {
+  computeCardFeatureLayout,
+  computeCardFeatureRows,
+} from "../card-features/common/feature-layout";
 import type { LovelaceCardFeatureContext } from "../card-features/types";
 import { actionHandler } from "../common/directives/action-handler-directive";
 import { handleAction } from "../common/handle-action";
@@ -151,14 +155,12 @@ export class HuiAreaCard extends LitElement implements LovelaceCard {
   }
 
   public getCardSize(): number {
-    const featuresPosition =
-      this._config && this._featurePosition(this._config);
     const displayType = this._config?.display_type || "picture";
-    const featuresCount = this._config?.features?.length || 0;
+    const featureRows = this._config ? this._featureRows(this._config) : 0;
     return (
       1 +
       (displayType === "compact" ? (this._config?.vertical ? 1 : 0) : 2) +
-      (featuresPosition === "inline" ? 0 : featuresCount)
+      featureRows
     );
   }
 
@@ -170,13 +172,12 @@ export class HuiAreaCard extends LitElement implements LovelaceCard {
       ? this._featurePosition(this._config)
       : "bottom";
     const featuresCount = this._config?.features?.length || 0;
-    if (featuresCount) {
+    if (this._config && featuresCount) {
       if (featurePosition === "inline") {
         min_columns = 12;
         columns = 12;
-      } else {
-        rows += featuresCount;
       }
+      rows += this._featureRows(this._config);
     }
 
     const displayType = this._config?.display_type || "picture";
@@ -555,15 +556,13 @@ export class HuiAreaCard extends LitElement implements LovelaceCard {
     return config.features_position || "bottom";
   });
 
-  private _displayedFeatures = memoizeOne((config: AreaCardConfig) => {
-    const features = config.features || [];
-    const featurePosition = this._featurePosition(config);
+  private _featureLayout = memoizeOne((config: AreaCardConfig) =>
+    computeCardFeatureLayout(config.features, this._featurePosition(config))
+  );
 
-    if (featurePosition === "inline") {
-      return features.slice(0, 1);
-    }
-    return features;
-  });
+  private _featureRows = memoizeOne((config: AreaCardConfig) =>
+    computeCardFeatureRows(config.features, this._featurePosition(config))
+  );
 
   public willUpdate(changedProps: PropertyValues) {
     if (changedProps.has("_config") || this._ratio === null) {
@@ -601,7 +600,7 @@ export class HuiAreaCard extends LitElement implements LovelaceCard {
     const secondary = this._computeSensorsDisplay();
 
     const featurePosition = this._featurePosition(this._config);
-    const features = this._displayedFeatures(this._config);
+    const features = this._featureLayout(this._config);
 
     const displayType = this._config.display_type || "picture";
 
@@ -620,8 +619,11 @@ export class HuiAreaCard extends LitElement implements LovelaceCard {
       "--tile-color": color,
     };
 
+    /* the picture takes the extra height, so only the compact type reserves a row */
     const fixedInfoHeight =
-      this.layout === "grid" && this._config.grid_options?.rows !== "auto";
+      displayType === "compact" &&
+      this.layout === "grid" &&
+      this._config.grid_options?.rows !== "auto";
 
     return html`
       <ha-card style=${styleMap(style)}>
@@ -710,19 +712,34 @@ export class HuiAreaCard extends LitElement implements LovelaceCard {
             .secondary=${secondary}
           ></ha-tile-info>
           ${
-            features.length > 0
+            features.inline.length > 0
               ? html`
                   <hui-card-features
-                    slot="features"
+                    slot="features-inline"
                     .hass=${this.hass}
                     .context=${this._featureContext}
                     .color=${this._config.color}
-                    .features=${features}
+                    .features=${features.inline}
                     .position=${featurePosition}
                   ></hui-card-features>
                 `
               : nothing
           }
+          ${
+            features.below.length > 0
+              ? html`
+                  <hui-card-features
+                    slot="features"
+                    .columns=${features.columns}
+                    .hass=${this.hass}
+                    .context=${this._featureContext}
+                    .color=${this._config.color}
+                    .features=${features.below}
+                    .position=${"bottom"}
+                  ></hui-card-features>
+                `
+              : nothing
+          }
         </ha-tile-container>
       </ha-card>
     `;

src/panels/lovelace/cards/hui-tile-card.ts

@@ -22,6 +22,10 @@ import type { ActionHandlerEvent } from "../../../data/lovelace/action_handler";
 import "../../../state-display/state-display";
 import type { HomeAssistant } from "../../../types";
 import "../card-features/hui-card-features";
+import {
+  computeCardFeatureLayout,
+  computeCardFeatureRows,
+} from "../card-features/common/feature-layout";
 import type { LovelaceCardFeatureContext } from "../card-features/types";
 import { findEntities } from "../common/find-entities";
 import { handleAction } from "../common/handle-action";
@@ -107,14 +111,8 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
   }
 
   public getCardSize(): number {
-    const featuresPosition =
-      this._config && this._featurePosition(this._config);
-    const featuresCount = this._config?.features?.length || 0;
-    return (
-      1 +
-      (this._config?.vertical ? 1 : 0) +
-      (featuresPosition === "inline" ? 0 : featuresCount)
-    );
+    const featureRows = this._config ? this._featureRows(this._config) : 0;
+    return 1 + (this._config?.vertical ? 1 : 0) + featureRows;
   }
 
   public getGridOptions(): LovelaceGridOptions {
@@ -123,12 +121,11 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
     let rows = 1;
     const featurePosition = this._config && this._featurePosition(this._config);
     const featuresCount = this._config?.features?.length || 0;
-    if (featuresCount) {
+    if (this._config && featuresCount) {
       if (featurePosition === "inline") {
         min_columns = 12;
-      } else {
-        rows += featuresCount;
       }
+      rows += this._featureRows(this._config);
     }
 
     if (this._config?.vertical) {
@@ -234,15 +231,13 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
     return config.features_position || "bottom";
   });
 
-  private _displayedFeatures = memoizeOne((config: TileCardConfig) => {
-    const features = config.features || [];
-    const featurePosition = this._featurePosition(config);
+  private _featureLayout = memoizeOne((config: TileCardConfig) =>
+    computeCardFeatureLayout(config.features, this._featurePosition(config))
+  );
 
-    if (featurePosition === "inline") {
-      return features.slice(0, 1);
-    }
-    return features;
-  });
+  private _featureRows = memoizeOne((config: TileCardConfig) =>
+    computeCardFeatureRows(config.features, this._featurePosition(config))
+  );
 
   protected render() {
     if (!this._config || !this.hass) {
@@ -286,7 +281,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
       : undefined;
 
     const featurePosition = this._featurePosition(this._config);
-    const features = this._displayedFeatures(this._config);
+    const features = this._featureLayout(this._config);
 
     const hasImage = Boolean(imageUrl);
 
@@ -341,14 +336,28 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
             }
           </ha-tile-info>
           ${
-            features.length > 0
+            features.inline.length > 0
               ? html`
                   <hui-card-features
-                    slot="features"
+                    slot="features-inline"
                     .hass=${this.hass}
                     .context=${this._featureContext}
                     .color=${this._config.color}
-                    .features=${features}
+                    .features=${features.inline}
+                  ></hui-card-features>
+                `
+              : nothing
+          }
+          ${
+            features.below.length > 0
+              ? html`
+                  <hui-card-features
+                    slot="features"
+                    .columns=${features.columns}
+                    .hass=${this.hass}
+                    .context=${this._featureContext}
+                    .color=${this._config.color}
+                    .features=${features.below}
                   ></hui-card-features>
                 `
               : nothing

src/panels/lovelace/cards/water/hui-water-flow-sankey-card.ts

@@ -6,6 +6,7 @@ import { classMap } from "lit/directives/class-map";
 import "../../../../components/ha-card";
 import type { EnergyData } from "../../../../data/energy";
 import {
+  computeEnergyDeviceLabels,
   formatFlowRateShort,
   getEnergyDataCollection,
   getFlowRateFromState,
@@ -241,6 +242,13 @@ class HuiWaterFlowSankeyCard
       }
     }
 
+    const deviceLabels = computeEnergyDeviceLabels(
+      this.hass,
+      prefs.device_consumption_water,
+      this._data.statsMetadata,
+      "stat_rate"
+    );
+
     const {
       deviceNodes,
       parentLinks,
@@ -257,7 +265,7 @@ class HuiWaterFlowSankeyCard
       initialUntracked: effectiveTotalInflow,
       getId: (device) => device.stat_rate,
       getValue: (id) => this._getCurrentFlowRate(id),
-      getLabel: (id, name) => name || this._getEntityLabel(id),
+      getLabel: (id) => deviceLabels[id] || this._getEntityLabel(id),
       getEntityId: (id) => id,
     });
     links.push(...deviceLinks);

src/panels/lovelace/cards/water/hui-water-sankey-card.ts

@@ -7,6 +7,7 @@ import "../../../../components/ha-card";
 import "../../../../components/ha-svg-icon";
 import type { EnergyData } from "../../../../data/energy";
 import {
+  computeEnergyDeviceLabels,
   getEnergyDataCollection,
   validateEnergyCollectionKey,
 } from "../../../../data/energy";
@@ -215,8 +216,14 @@ class HuiWaterSankeyCard
         ? calculateStatisticSumGrowth(this._data!.stats[statConsumption]) || 0
         : 0;
 
-    const deviceLabel = (statConsumption: string, name?: string) =>
-      name ||
+    const deviceLabels = computeEnergyDeviceLabels(
+      this.hass,
+      prefs.device_consumption_water,
+      this._data!.statsMetadata
+    );
+
+    const deviceLabel = (statConsumption: string) =>
+      deviceLabels[statConsumption] ||
       getStatisticLabel(
         this.hass,
         statConsumption,

src/translations/en.json

@@ -790,6 +790,11 @@
         }
       },
       "target-picker": {
+        "expand": "Expand",
+        "expand_floor_id": "Split this floor into separate areas",
+        "expand_area_id": "Split this area into separate devices and entities",
+        "expand_device_id": "Split this device into separate entities",
+        "expand_label_id": "Split this label into separate areas, devices and entities",
         "add_target": "Add target",
         "remove": "Remove",
         "remove_floor_id": "Remove floor",
@@ -802,6 +807,7 @@
         "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}",
@@ -835,9 +841,6 @@
         },
         "style": "Time format style"
       },
-      "filter-device-classes": {
-        "caption": "Device class"
-      },
       "subpage-data-table": {
         "filters": "Filters",
         "show_results": "Show {number} results",
@@ -6811,6 +6814,10 @@
             "heading": "Connected devices",
             "show_more": "+{count} devices not shown"
           },
+          "child_devices": {
+            "heading": "Sub-devices",
+            "show_more": "+{count} devices not shown"
+          },
           "linked_devices": {
             "heading": "Linked devices",
             "description": "These devices share hardware with this device and are managed by other integrations."
@@ -6892,6 +6899,8 @@
             "manufacturer": "Manufacturer",
             "model": "Model",
             "integration": "Integration",
+            "parent_device": "Parent device",
+            "part_of_device": "Part of {name}",
             "firmware_version": "Firmware",
             "battery": "Battery",
             "disabled_by": "Disabled",
@@ -7184,6 +7193,7 @@
             "disable_error": "Enabling or disabling of the integration failed",
             "manuf": "by {manufacturer}",
             "via": "Connected via",
+            "part_of": "Part of",
             "firmware": "Firmware: {version}",
             "hardware": "Hardware: {version}",
             "version": "Version {version}",
@@ -10462,7 +10472,7 @@
                 "bottom": "Bottom",
                 "bottom_description": "Displays all features stacked",
                 "inline": "Inline",
-                "inline_description": "Displays only the first feature"
+                "inline_description": "Displays features in two columns, starting next to the name"
               },
               "features_position_helper_vertical": "Always displayed at the bottom if the content layout is vertical",
               "content_layout": "Content layout",
@@ -11697,14 +11707,9 @@
         }
       },
       "history": {
-        "sources": "Sources",
-        "add_targets": "Add targets",
-        "no_targets": "No targets selected",
-        "start_search_title": "Nothing to show yet",
-        "start_search": "Select areas, devices, entities or labels to see their history",
-        "no_results_title": "No results found",
-        "no_results": "No history for the current selection. Try changing the targets, filters, or time range.",
+        "start_search": "Select areas, devices, entities or labels above",
         "add_all": "Add all entities",
+        "remove_all": "Remove all selections",
         "download_data": "Download data",
         "download_data_error": "Unable to download data",
         "add_card": "Add current view as card",
@@ -11712,11 +11717,6 @@
         "error_no_data": "You need to select some data sources first."
       },
       "logbook": {
-        "sources": "[%key:ui::panel::history::sources%]",
-        "change_sources": "Change sources",
-        "no_targets": "Showing all activity. Add targets to narrow it down.",
-        "no_results_title": "[%key:ui::panel::history::no_results_title%]",
-        "no_results": "No activity for the current selection. Try changing the targets, filters, or time range.",
         "download_data": "[%key:ui::panel::history::download_data%]",
         "download_data_error": "[%key:ui::panel::history::download_data_error%]",
         "error_no_data": "No activity for the selected target in the selected time range."

test/data/device_registry_effective_area.test.ts

@@ -0,0 +1,66 @@
+import { assert, describe, it } from "vitest";
+import { devicesInEffectiveArea } from "../../src/data/device/device_registry";
+import type { DeviceRegistryEntry } from "../../src/data/device/device_registry";
+
+const device = (
+  partial: Partial<DeviceRegistryEntry> & { id: string }
+): DeviceRegistryEntry =>
+  ({
+    area_id: null,
+    parent_device_id: null,
+    ...partial,
+  }) as DeviceRegistryEntry;
+
+describe("devicesInEffectiveArea", () => {
+  it("includes devices with the area set", () => {
+    const devices = {
+      a: device({ id: "a", area_id: "kitchen" }),
+      b: device({ id: "b", area_id: "bedroom" }),
+    };
+    assert.deepEqual(
+      devicesInEffectiveArea(devices, "kitchen").map((d) => d.id),
+      ["a"]
+    );
+  });
+
+  it("includes a child device inheriting its parent's area", () => {
+    const devices = {
+      parent: device({ id: "parent", area_id: "kitchen" }),
+      child: device({ id: "child", parent_device_id: "parent" }),
+    };
+    assert.deepEqual(
+      devicesInEffectiveArea(devices, "kitchen")
+        .map((d) => d.id)
+        .sort(),
+      ["child", "parent"]
+    );
+  });
+
+  it("excludes a child device with a different explicit area", () => {
+    const devices = {
+      parent: device({ id: "parent", area_id: "kitchen" }),
+      child: device({
+        id: "child",
+        area_id: "bedroom",
+        parent_device_id: "parent",
+      }),
+    };
+    assert.deepEqual(
+      devicesInEffectiveArea(devices, "kitchen").map((d) => d.id),
+      ["parent"]
+    );
+    // ...and the child belongs to its own area instead.
+    assert.deepEqual(
+      devicesInEffectiveArea(devices, "bedroom").map((d) => d.id),
+      ["child"]
+    );
+  });
+
+  it("excludes a child whose parent has no area", () => {
+    const devices = {
+      parent: device({ id: "parent" }),
+      child: device({ id: "child", parent_device_id: "parent" }),
+    };
+    assert.deepEqual(devicesInEffectiveArea(devices, "kitchen"), []);
+  });
+});

test/data/energy.test.ts

@@ -13,13 +13,19 @@ import {
 } from "../../src/data/translation";
 import {
   computeConsumptionSingle,
+  computeEnergyLabel,
+  computeEnergyDeviceLabels,
   formatConsumptionShort,
   calculateSolarConsumedGauge,
   formatPowerShort,
   getNextEnergyPeriodStart,
   getEnergyDefaultPeriodStorageKey,
 } from "../../src/data/energy";
+import type { DeviceRegistryEntry } from "../../src/data/device/device_registry";
+import type { EntityRegistryDisplayEntry } from "../../src/data/entity/entity_registry";
+import type { StatisticsMetaData } from "../../src/data/recorder";
 import type { HomeAssistant } from "../../src/types";
+import { createMockEntityState, createMockHass } from "../fixtures/hass";
 
 const checkConsumptionResult = (
   input: {
@@ -944,3 +950,151 @@ describe("getEnergyDefaultPeriodStorageKey", () => {
     );
   });
 });
+
+describe("computeEnergyLabel", () => {
+  const ENTITY_ID = "sensor.washer_energy";
+
+  const createEntry = (
+    entry: Partial<EntityRegistryDisplayEntry>
+  ): EntityRegistryDisplayEntry =>
+    ({
+      entity_id: ENTITY_ID,
+      labels: [],
+      ...entry,
+    }) as EntityRegistryDisplayEntry;
+
+  const createDevice = (
+    device: Partial<DeviceRegistryEntry>
+  ): DeviceRegistryEntry =>
+    ({ id: "device1", name_by_user: null, ...device }) as DeviceRegistryEntry;
+
+  const createHass = (
+    friendlyName: string,
+    entry?: Partial<EntityRegistryDisplayEntry>,
+    device?: Partial<DeviceRegistryEntry>
+  ) =>
+    createMockHass(
+      {
+        [ENTITY_ID]: createMockEntityState(ENTITY_ID, "1", {
+          friendly_name: friendlyName,
+        }),
+      },
+      {
+        entities: entry ? { [ENTITY_ID]: createEntry(entry) } : {},
+        devices: device ? { device1: createDevice(device) } : {},
+      }
+    );
+
+  it("composes the device and entity name", () => {
+    const hass = createHass(
+      "Washer Energy",
+      { name: "Energy", device_id: "device1" },
+      { name: "Washer" }
+    );
+
+    assert.equal(computeEnergyLabel(hass, ENTITY_ID), "Washer Energy");
+  });
+
+  it("uses the device name alone when the entity has no name of its own", () => {
+    const hass = createHass(
+      "Washer",
+      { name: "Washer", device_id: "device1" },
+      { name: "Washer" }
+    );
+
+    assert.equal(computeEnergyLabel(hass, ENTITY_ID), "Washer");
+  });
+
+  it("distinguishes entities sharing a name by their device", () => {
+    const hass = createHass(
+      "Energy",
+      { name: "Energy", device_id: "device1" },
+      { name: "Dishwasher" }
+    );
+
+    assert.equal(computeEnergyLabel(hass, ENTITY_ID), "Dishwasher Energy");
+  });
+
+  it("keeps a name set by the user", () => {
+    const hass = createHass(
+      "Washer Energy",
+      { name: "Energy", device_id: "device1" },
+      { name: "Washer" }
+    );
+
+    assert.equal(
+      computeEnergyLabel(hass, ENTITY_ID, undefined, "Laundry"),
+      "Laundry"
+    );
+  });
+
+  it("ignores an empty name", () => {
+    const hass = createHass(
+      "Washer Energy",
+      { name: "Energy", device_id: "device1" },
+      { name: "Washer" }
+    );
+
+    assert.equal(
+      computeEnergyLabel(hass, ENTITY_ID, undefined, ""),
+      "Washer Energy"
+    );
+  });
+
+  it("falls back to the friendly name for an entity outside the registry", () => {
+    const hass = createHass("Washer Energy");
+
+    assert.equal(computeEnergyLabel(hass, ENTITY_ID), "Washer Energy");
+  });
+
+  it("uses the statistic metadata name when there is no entity", () => {
+    const hass = createMockHass();
+
+    assert.equal(
+      computeEnergyLabel(hass, "external:solar", {
+        statistic_id: "external:solar",
+        name: "Solar production",
+      } as StatisticsMetaData),
+      "Solar production"
+    );
+  });
+
+  it("falls back to the statistic id when there is nothing to name it with", () => {
+    const hass = createMockHass();
+
+    assert.equal(computeEnergyLabel(hass, "external:solar"), "external:solar");
+  });
+});
+
+describe("computeEnergyDeviceLabels", () => {
+  const DEVICES = [
+    {
+      stat_consumption: "sensor.washer_energy",
+      stat_rate: "sensor.washer_power",
+    },
+    { stat_consumption: "sensor.heater_energy", name: "Heater" },
+  ];
+
+  const hass = createMockHass({
+    "sensor.washer_energy": createMockEntityState("sensor.washer_energy", "1", {
+      friendly_name: "Washer Energy",
+    }),
+    "sensor.washer_power": createMockEntityState("sensor.washer_power", "5", {
+      friendly_name: "Washer Power",
+    }),
+  });
+
+  it("keys labels by the consumption statistic", () => {
+    assert.deepEqual(computeEnergyDeviceLabels(hass, DEVICES), {
+      "sensor.washer_energy": "Washer Energy",
+      "sensor.heater_energy": "Heater",
+    });
+  });
+
+  it("keys labels by the rate statistic, skipping devices without one", () => {
+    assert.deepEqual(
+      computeEnergyDeviceLabels(hass, DEVICES, undefined, "stat_rate"),
+      { "sensor.washer_power": "Washer Power" }
+    );
+  });
+});

test/fixtures/hass.ts

@@ -1,9 +1,10 @@
 /**
  * Deterministic `HomeAssistant` stub covering exactly what the chart data
- * transforms read: states, entities, locale, config, localize, and entity
- * state formatting. Everything is stable across runs.
+ * transforms read: states, registries, locale, config, localize, and entity
+ * state/name formatting. Everything is stable across runs.
  */
 import type { HassEntities, HassEntity } from "home-assistant-js-websocket";
+import { computeEntityNameDisplay } from "../../src/common/entity/compute_entity_name_display";
 import type { LocalizeFunc } from "../../src/common/translations/localize";
 import {
   DateFormat,
@@ -43,21 +44,43 @@ export const createMockEntityState = (
   context: { id: "fixture", parent_id: null, user_id: null },
 });
 
-export const createMockHass = (states: HassEntities = {}): HomeAssistant =>
-  ({
+export const createMockHass = (
+  states: HassEntities = {},
+  registries: Partial<
+    Pick<HomeAssistant, "entities" | "devices" | "areas" | "floors">
+  > = {}
+): HomeAssistant => {
+  const entities = registries.entities ?? {};
+  const devices = registries.devices ?? {};
+  const areas = registries.areas ?? {};
+  const floors = registries.floors ?? {};
+
+  return {
     states,
-    entities: {},
-    devices: {},
-    areas: {},
-    floors: {},
+    entities,
+    devices,
+    areas,
+    floors,
     config: demoConfig,
     locale: mockLocale,
     language: "en",
     localize: mockLocalize,
+    translationMetadata: { translations: {} },
     formatEntityState: (stateObj: HassEntity, state?: string) =>
       state ?? stateObj.state,
     formatEntityAttributeValue: (stateObj: HassEntity, attribute: string) =>
       String(stateObj.attributes[attribute]),
     formatEntityAttributeName: (_stateObj: HassEntity, attribute: string) =>
       attribute,
-  }) as unknown as HomeAssistant;
+    formatEntityName: ((stateObj, name, options) =>
+      computeEntityNameDisplay(
+        stateObj,
+        name,
+        entities,
+        devices,
+        areas,
+        floors,
+        options
+      )) satisfies HomeAssistant["formatEntityName"],
+  } as unknown as HomeAssistant;
+};

test/panels/lovelace/card-features/common/feature-layout.test.ts

@@ -0,0 +1,65 @@
+import { describe, expect, it } from "vitest";
+import {
+  computeCardFeatureLayout,
+  computeCardFeatureRows,
+} from "../../../../../src/panels/lovelace/card-features/common/feature-layout";
+import type { LovelaceCardFeatureConfig } from "../../../../../src/panels/lovelace/card-features/types";
+
+const features = (count: number): LovelaceCardFeatureConfig[] =>
+  Array.from({ length: count }, () => ({ type: "toggle" }) as const);
+
+describe("computeCardFeatureLayout", () => {
+  it("stacks every feature in bottom position", () => {
+    const layout = computeCardFeatureLayout(features(3), "bottom");
+    expect(layout.inline).toHaveLength(0);
+    expect(layout.below).toHaveLength(3);
+    expect(layout.columns).toBe(1);
+  });
+
+  it("handles a missing feature list", () => {
+    expect(computeCardFeatureLayout(undefined, "inline")).toEqual({
+      inline: [],
+      below: [],
+      columns: 0,
+    });
+  });
+
+  it("puts the first feature inline and stacks the rest", () => {
+    const configs: LovelaceCardFeatureConfig[] = [
+      { type: "toggle" },
+      { type: "cover-open-close" },
+      { type: "cover-position" },
+    ];
+    const layout = computeCardFeatureLayout(configs, "inline");
+    expect(layout.inline).toEqual([configs[0]]);
+    expect(layout.below).toEqual([configs[1], configs[2]]);
+  });
+
+  it("fills no column when the inline feature is alone", () => {
+    expect(computeCardFeatureLayout(features(1), "inline").columns).toBe(0);
+  });
+
+  it("fills one column for a single feature below", () => {
+    expect(computeCardFeatureLayout(features(2), "inline").columns).toBe(1);
+  });
+
+  it("caps the features below at two columns", () => {
+    expect(computeCardFeatureLayout(features(5), "inline").columns).toBe(2);
+  });
+});
+
+describe("computeCardFeatureRows", () => {
+  it("counts one row per feature in bottom position", () => {
+    const rows = [0, 1, 2, 3].map((count) =>
+      computeCardFeatureRows(features(count), "bottom")
+    );
+    expect(rows).toEqual([0, 1, 2, 3]);
+  });
+
+  it("pairs the features below the inline one", () => {
+    const rows = [0, 1, 2, 3, 4, 5, 6].map((count) =>
+      computeCardFeatureRows(features(count), "inline")
+    );
+    expect(rows).toEqual([0, 0, 1, 1, 2, 2, 3]);
+  });
+});

test/panels/lovelace/cards/hui-tile-card.test.ts

@@ -0,0 +1,172 @@
+import { describe, expect, it, vi } from "vitest";
+import "../../../../src/panels/lovelace/cards/hui-tile-card";
+import type { LovelaceCardFeatureConfig } from "../../../../src/panels/lovelace/card-features/types";
+import type {
+  LovelaceCard,
+  LovelaceGridOptions,
+} from "../../../../src/panels/lovelace/types";
+import type { TileCardConfig } from "../../../../src/panels/lovelace/cards/types";
+
+// getCardSize() and getGridOptions() drive how much space the tile card claims
+// in masonry and sections views. In "inline" mode the first feature shares the
+// name row and the remaining features are laid out two per row below it, so the
+// counting differs from "bottom" mode; these tests pin that arithmetic down.
+
+// Bundler-defined globals the card's import graph reads at eval time.
+vi.hoisted(() => {
+  Object.assign(globalThis, {
+    __STATIC_PATH__: "/",
+    __HASS_URL__: "",
+    __BUILD__: "modern",
+    __VERSION__: "test",
+    __BACKWARDS_COMPAT__: false,
+    __SUPERVISOR__: false,
+    __NAMESPACE__: "frontend",
+  });
+});
+
+const features = (count: number): LovelaceCardFeatureConfig[] =>
+  Array.from(
+    { length: count },
+    () => ({ type: "toggle" }) as LovelaceCardFeatureConfig
+  );
+
+const makeCard = (config: Partial<TileCardConfig>): LovelaceCard => {
+  const card = document.createElement("hui-tile-card") as LovelaceCard;
+  card.setConfig({
+    type: "tile",
+    entity: "light.test",
+    ...config,
+  } as TileCardConfig);
+  return card;
+};
+
+describe("hui-tile-card getCardSize", () => {
+  it("is 1 for a bare tile", () => {
+    expect(makeCard({}).getCardSize()).toBe(1);
+  });
+
+  it("adds a row for the vertical layout", () => {
+    expect(makeCard({ vertical: true }).getCardSize()).toBe(2);
+  });
+
+  it("counts every feature in bottom mode", () => {
+    expect(
+      makeCard({
+        features_position: "bottom",
+        features: features(3),
+      }).getCardSize()
+    ).toBe(4);
+  });
+
+  it("pairs the features below the inline one", () => {
+    const sizes = [1, 2, 3, 4, 5, 6].map((count) =>
+      makeCard({
+        features_position: "inline",
+        features: features(count),
+      }).getCardSize()
+    );
+    expect(sizes).toEqual([1, 2, 2, 3, 3, 4]);
+  });
+
+  it("does not add rows for a single inline feature", () => {
+    expect(
+      makeCard({
+        features_position: "inline",
+        features: features(1),
+      }).getCardSize()
+    ).toBe(1);
+  });
+
+  it("does not add rows for inline mode with no features", () => {
+    expect(
+      makeCard({
+        features_position: "inline",
+        features: features(0),
+      }).getCardSize()
+    ).toBe(1);
+  });
+
+  it("ignores inline mode when the layout is vertical", () => {
+    // vertical forces bottom positioning, so all features are stacked
+    expect(
+      makeCard({
+        vertical: true,
+        features_position: "inline",
+        features: features(2),
+      }).getCardSize()
+    ).toBe(4);
+  });
+});
+
+describe("hui-tile-card getGridOptions", () => {
+  const gridOptions = (config: Partial<TileCardConfig>): LovelaceGridOptions =>
+    makeCard(config).getGridOptions!();
+
+  it("is a single 6-wide row for a bare tile", () => {
+    expect(gridOptions({})).toEqual({
+      columns: 6,
+      rows: 1,
+      min_columns: 6,
+      min_rows: 1,
+    });
+  });
+
+  it("adds one row per feature in bottom mode", () => {
+    expect(
+      gridOptions({ features_position: "bottom", features: features(3) })
+    ).toEqual({
+      columns: 6,
+      rows: 4,
+      min_columns: 6,
+      min_rows: 4,
+    });
+  });
+
+  it("widens to 12 columns and pairs the extra features in inline mode", () => {
+    expect(
+      gridOptions({ features_position: "inline", features: features(3) })
+    ).toEqual({
+      columns: 6,
+      rows: 2,
+      min_columns: 12,
+      min_rows: 2,
+    });
+  });
+
+  it("adds a row per pair of features below the inline one", () => {
+    const rows = [1, 2, 3, 4, 5, 6].map(
+      (count) =>
+        gridOptions({ features_position: "inline", features: features(count) })
+          .rows
+    );
+    expect(rows).toEqual([1, 2, 2, 3, 3, 4]);
+  });
+
+  it("keeps a single row for one inline feature", () => {
+    expect(
+      gridOptions({ features_position: "inline", features: features(1) })
+    ).toEqual({
+      columns: 6,
+      rows: 1,
+      min_columns: 12,
+      min_rows: 1,
+    });
+  });
+
+  it("stacks all features and narrows columns in vertical mode", () => {
+    // vertical forces bottom positioning and adds its own row
+    expect(
+      gridOptions({
+        vertical: true,
+        features_position: "inline",
+        features: features(2),
+      })
+    ).toEqual({
+      columns: 6,
+      rows: 4,
+      min_columns: 3,
+      min_rows: 4,
+    });
+  });
+});