Update dependency marked to v18.0.10 (#53725 )

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Fix stacked toasts when a dashboard is updated in another session (#53719 )
2026-08-21 06:08:25 +00:00 · 2026-08-21 06:37:46 +02:00 · 2026-08-20 21:34:08 +02:00 · 2026-08-20 21:01:27 +02:00 · 2026-08-20 20:54:59 +02:00 · 2026-08-20 16:49:55 +02:00
93 changed files with 7369 additions and 3314 deletions
@@ -1,36 +1,52 @@
 [modern]
 # Modern builds target recent browsers supporting the latest features to minimize transpilation, polyfills, etc.
 # It is served to browsers meeting the following requirements:
-# - released in the last year + current alpha/beta versions
-# - Firefox extended support release (ESR)
-# - with global utilization at or above 0.5%
+# - released in the last 2 years + current alpha/beta versions
 # - exclude dead browsers (no security maintenance for 2+ years)
-# - exclude KaiOS, QQ, and UC browsers due to lack of sufficient feature support data
+# - exclude QQ, and UC browsers due to lack of sufficient feature support data
 unreleased versions
-last 1 year
-Firefox ESR
->= 0.5%
+last 2 years
 not dead
-not KaiOS > 0
 not QQAndroid > 0
 not UCAndroid > 0

 [legacy]
-# Legacy builds are served when modern requirements are not met and support browsers:
-# - released in the last 7 years + current alpha/beta versionss
-# - with global utilization at or above 0.05%
-# - exclude dead browsers (no security maintenance for 2+ years)
-# - exclude Opera Mini which does not support web sockets
-unreleased versions
-last 7 years
->= 0.05%
-not dead
-not op_mini all
+# Legacy builds are served when modern requirements are not met.
+# Floors are pinned explicitly (not usage-based) so the support policy is
+# deliberate and does not drift with global usage statistics, which do not
+# represent old tablets and wall displays used as Home Assistant dashboards:
+# - iOS/Safari >= 12: iPad Air 1 / mini 2 / mini 3 (last supported iOS).
+#   Older iPads (iPad 2/3/mini 1 on iOS 9.3, iPad 4 on iOS 10.3) cannot run
+#   the app: their engines lack custom elements, shadow DOM, and/or CSS grid.
+# - Chrome >= 59: Fire OS 5 tablets (Fire 7/HD 8/HD 10 through ~2017) have
+#   their system WebView pinned at Chromium 59 and commonly run Fully Kiosk;
+#   also covers old kiosk browsers and no-longer-updating webviews above it.
+# - Edge >= 79: all Chromium-based Edge. Costs nothing (above the Chrome
+#   floor); mainly catches Edge 109 on Windows 7/8.1 and update-frozen
+#   enterprise installs, whose engines can run the legacy build fine.
+# - Firefox >= 94: the zero-cost floor, not a chased population — pinning it
+#   adds no babel transforms, core-js modules, or Lightning CSS prefixes to
+#   the output. Mozilla-supported Firefox (incl. current ESR) always matches
+#   [modern]; Firefox on old OSes is not supported (use Chrome 109 instead).
+#   If Firefox ever becomes the pin forcing extra output, raise it first.
+# - Samsung >= 9: Samsung Internet on old Galaxy tablets
+Chrome >= 59
+ChromeAndroid >= 59
+Edge >= 79
+Firefox >= 94
+FirefoxAndroid >= 94
+iOS >= 12
+Safari >= 12
+Samsung >= 9

 [legacy-sw]
-# Same as legacy plus supports service workers
-unreleased versions
-last 7 years
->= 0.05% and supports serviceworkers
-not dead
-not op_mini all
+# Same as legacy, restricted to browsers that support service workers
+# (currently resolves to the same set; guards the service worker build if the legacy floor ever drops below them)
+Chrome >= 59 and supports serviceworkers
+ChromeAndroid >= 59 and supports serviceworkers
+Edge >= 79 and supports serviceworkers
+Firefox >= 94 and supports serviceworkers
+FirefoxAndroid >= 94 and supports serviceworkers
+iOS >= 12 and supports serviceworkers
+Safari >= 12 and supports serviceworkers
+Samsung >= 9 and supports serviceworkers
@@ -1,15 +1,15 @@
 {
  "_comment": "Initial JS budget (raw/uncompressed bytes) for the cold-load critical entrypoints. Enforced by build-scripts/check-bundle-size.cjs in CI. Re-seed after an intentional change with `--update --headroom=<percent>`.",
  "frontend-modern": {
-    "app": 585518,
-    "core": 57048,
-    "authorize": 552423,
-    "onboarding": 666818
+    "app": 576583,
+    "core": 54790,
+    "authorize": 543547,
+    "onboarding": 655556
  },
  "frontend-legacy": {
-    "app": 887384,
-    "core": 244482,
-    "authorize": 844995,
-    "onboarding": 1008816
+    "app": 717124,
+    "core": 181583,
+    "authorize": 699175,
+    "onboarding": 816133
  }
 }
@@ -63,8 +63,10 @@ module.exports.htmlMinifierOptions = {
 };

 module.exports.terserOptions = ({ latestBuild, isTestBuild }) => ({
-  safari10: !latestBuild,
-  ecma: latestBuild ? 2015 : 5,
+  // Highest syntax the minifier may emit; it never downlevels. Every browser
+  // in [modern] is well past ES2020 (universal since spring 2020); the
+  // [legacy] floors (Chrome 59 / Safari 12) top out at ES2017.
+  ecma: latestBuild ? 2020 : 2017,
  module: latestBuild,
  format: { comments: false },
  sourceMap: !isTestBuild,
@@ -25,6 +25,9 @@ title: Button
  <ha-button appearance="filled">
    filled button
  </ha-button>
+  <ha-button appearance="outlined">
+    outlined button
+  </ha-button>

  <ha-button size="s">
    small
@@ -65,7 +68,7 @@ Check the [webawesome documentation](https://webawesome.com/docs/components/butt

 | Name       | Type                                           | Default  | Description                                                                       |
 | ---------- | ---------------------------------------------- | -------- | --------------------------------------------------------------------------------- |
-| appearance | "accent"/"filled"/"plain"                      | "accent" | Sets the button appearance.                                                       |
+| appearance | "accent"/"filled"/"outlined"/"plain"           | "accent" | Sets the button appearance.                                                       |
 | variants   | "brand"/"danger"/"neutral"/"warning"/"success" | "brand"  | Sets the button color variant. "brand" is default.                                |
 | size       | "xs"/"s"/"m"/"l"/"xl"                          | "m"      | Sets the button size.                                                             |
 | loading    | Boolean                                        | false    | Shows a loading indicator instead of the buttons label and disable buttons click. |
@@ -9,7 +9,7 @@ import "../../../../src/components/ha-svg-icon";
 import { mdiHomeAssistant } from "../../../../src/resources/home-assistant-logo-svg";
 import { THEME_COMPARISON_PANELS } from "../../components/demo-theme-comparison";

-const appearances = ["accent", "filled", "plain"];
+const appearances = ["accent", "filled", "outlined", "plain"];
 const variants = ["brand", "danger", "neutral", "warning", "success"];

@customElement("demo-components-ha-button")
@@ -29,6 +29,50 @@ const positions: Position[] = ["start", "end"];
 const selectedStates = [false, true];
 const disabledStates = [false, true];

+interface TreeChild {
+  key: string;
+  label: string;
+}
+
+interface TreeGroup {
+  key: string;
+  label: string;
+  children: TreeChild[];
+}
+
+const treeGroups: TreeGroup[] = [
+  {
+    key: "binary_sensor",
+    label: "Binary sensor",
+    children: [
+      { key: "door", label: "Door" },
+      { key: "motion", label: "Motion" },
+      { key: "window", label: "Window" },
+    ],
+  },
+  {
+    key: "cover",
+    label: "Cover",
+    children: [
+      { key: "garage", label: "Garage" },
+      { key: "shutter", label: "Shutter" },
+    ],
+  },
+];
+
+interface TreeRow {
+  group: TreeGroup;
+  child?: TreeChild;
+}
+
+const treeRows: TreeRow[] = treeGroups.flatMap((group) => [
+  { group },
+  ...group.children.map((child) => ({ group, child })),
+]);
+
+const treeKey = (group: TreeGroup, child: TreeChild) =>
+  `${group.key}/${child.key}`;
+
@customElement("demo-components-ha-list")
 export class DemoHaList extends LitElement {
  @state() private _buttonClicks = 0;
@@ -41,6 +85,8 @@ export class DemoHaList extends LitElement {

  @state() private _multiCheckEnd: number | Set<number> = new Set();

+  @state() private _tree = new Set<string>();
+
  private _options = ["Alpha", "Beta", "Gamma", "Delta", "Epsilon"];

  protected render(): TemplateResult {
@@ -274,6 +320,45 @@ selected: ${JSON.stringify(this._toJson(this._multiCheckStart))}</pre>
 selected: ${JSON.stringify(this._toJson(this._multiCheckEnd))}</pre>
      </ha-card>

+      <ha-card header="Controlled selection with indeterminate groups">
+        <ha-list-selectable
+          multi
+          controlled
+          aria-label="Controlled tree"
+          @ha-list-item-selected=${this._onTreeToggle}
+          @ha-list-item-deselected=${this._onTreeToggle}
+        >
+          ${treeGroups.map((group) => {
+            const groupState = this._groupState(group);
+            return html`
+              <ha-list-item-option
+                appearance="checkbox"
+                selection-position="end"
+                .value=${group.key}
+                ?selected=${groupState === "all"}
+                ?indeterminate=${groupState === "some"}
+              >
+                <span slot="headline">${group.label}</span>
+              </ha-list-item-option>
+              ${group.children.map(
+                (child) => html`
+                  <ha-list-item-option
+                    class="child"
+                    appearance="checkbox"
+                    selection-position="end"
+                    .value=${treeKey(group, child)}
+                    ?selected=${this._tree.has(treeKey(group, child))}
+                  >
+                    <span slot="headline">${child.label}</span>
+                  </ha-list-item-option>
+                `
+              )}
+            `;
+          })}
+        </ha-list-selectable>
+        <pre>selected: ${JSON.stringify([...this._tree])}</pre>
+      </ha-card>
+
      <ha-card header="Option: all combinations">
        <div class="grid">
          ${appearances.map((appearance) =>
@@ -361,6 +446,43 @@ selected: ${JSON.stringify(this._toJson(this._multiCheckEnd))}</pre>
    return next;
  }

+  private _groupState(group: TreeGroup): "none" | "some" | "all" {
+    const selected = group.children.filter((child) =>
+      this._tree.has(treeKey(group, child))
+    ).length;
+    if (selected === 0) {
+      return "none";
+    }
+    return selected === group.children.length ? "all" : "some";
+  }
+
+  private _onTreeToggle = (ev: CustomEvent<number>) => {
+    const row = treeRows[ev.detail];
+    if (!row) {
+      return;
+    }
+    const next = new Set(this._tree);
+    if (row.child) {
+      const key = treeKey(row.group, row.child);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+    } else {
+      const select = this._groupState(row.group) !== "all";
+      row.group.children.forEach((child) => {
+        const key = treeKey(row.group, child);
+        if (select) {
+          next.add(key);
+        } else {
+          next.delete(key);
+        }
+      });
+    }
+    this._tree = next;
+  };
+
  private _onSingle = (ev: CustomEvent<number>) => {
    this._single = ev.detail;
  };
@@ -443,6 +565,9 @@ selected: ${JSON.stringify(this._toJson(this._multiCheckEnd))}</pre>
    .drag-handle {
      cursor: grab;
    }
+    .child::part(base) {
+      padding-inline-start: var(--ha-space-12);
+    }
  `;
 }

@@ -1,4 +1,3 @@
-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";
@@ -9,7 +8,6 @@ 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";
@@ -155,9 +153,6 @@ 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[] = [
@@ -168,14 +163,6 @@ 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:
@@ -274,23 +261,13 @@ class DemoHaSelectorReplacedDevice
                <ha-settings-row narrow slot=${slot}>
                  <span slot="heading">${sample.name}</span>
                  <span slot="description">${sample.description}</span>
-                  ${
-                    sample.compact
-                      ? html`<ha-target-picker
-                          compact
-                          .hass=${this.hass}
-                          .value=${this._values[idx] as HassServiceTarget}
-                          .sampleIdx=${idx}
-                          @value-changed=${this._handleValueChanged}
-                        ></ha-target-picker>`
-                      : html`<ha-selector
-                          .hass=${this.hass}
-                          .selector=${sample.selector}
-                          .value=${this._values[idx]}
-                          .sampleIdx=${idx}
-                          @value-changed=${this._handleValueChanged}
-                        ></ha-selector>`
-                  }
+                  <ha-selector
+                    .hass=${this.hass}
+                    .selector=${sample.selector}
+                    .value=${this._values[idx]}
+                    .sampleIdx=${idx}
+                    @value-changed=${this._handleValueChanged}
+                  ></ha-selector>
                </ha-settings-row>
              `
            )}
@@ -42,14 +42,14 @@
    "@babel/runtime": "8.0.0",
    "@braintree/sanitize-url": "7.1.2",
    "@codemirror/autocomplete": "6.20.3",
-    "@codemirror/commands": "6.10.4",
+    "@codemirror/commands": "6.11.0",
    "@codemirror/lang-jinja": "6.0.1",
    "@codemirror/lang-yaml": "6.1.3",
    "@codemirror/language": "6.12.4",
    "@codemirror/lint": "6.9.7",
    "@codemirror/search": "6.7.1",
    "@codemirror/state": "6.7.1",
-    "@codemirror/view": "6.43.8",
+    "@codemirror/view": "6.43.9",
    "@date-fns/tz": "1.5.0",
    "@egjs/hammerjs": "2.0.17",
    "@formatjs/intl-datetimeformat": "7.6.0",
@@ -89,7 +89,7 @@
    "@vvo/tzdb": "6.198.0",
    "@webcomponents/scoped-custom-element-registry": "0.0.10",
    "@webcomponents/webcomponentsjs": "2.8.0",
-    "barcode-detector": "3.2.1",
+    "barcode-detector": "3.2.2",
    "cally": "0.9.2",
    "color-name": "2.1.1",
    "comlink": "4.4.2",
@@ -101,12 +101,13 @@
    "deep-freeze": "0.0.1",
    "dialog-polyfill": "0.5.6",
    "echarts": "6.1.0",
+    "echarts-extension-chart2music": "0.1.0",
    "element-internals-polyfill": "3.0.2",
    "fuse.js": "7.5.0",
    "hls.js": "1.7.0",
    "home-assistant-js-websocket": "9.6.0",
    "idb-keyval": "6.3.0",
-    "intl-messageformat": "11.2.13",
+    "intl-messageformat": "11.2.14",
    "js-yaml": "5.3.0",
    "leaflet": "1.9.4",
    "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
@@ -114,7 +115,7 @@
    "lit": "3.3.3",
    "lit-html": "3.3.3",
    "luxon": "3.7.2",
-    "marked": "18.0.9",
+    "marked": "18.0.10",
    "memoize-one": "6.0.0",
    "node-vibrant": "4.0.4",
    "object-hash": "3.0.0",
@@ -145,7 +146,7 @@
    "@bundle-stats/plugin-webpack-filter": "4.22.2",
    "@eslint/js": "10.0.1",
    "@gfx/zopfli": "1.0.15",
-    "@html-eslint/eslint-plugin": "0.64.0",
+    "@html-eslint/eslint-plugin": "0.65.0",
    "@lokalise/node-api": "16.3.0",
    "@octokit/auth-oauth-device": "8.0.4",
    "@octokit/plugin-retry": "8.1.1",
@@ -172,6 +173,7 @@
    "@vitest/coverage-v8": "4.1.10",
    "babel-loader": "10.1.1",
    "babel-plugin-polyfill-corejs3": "1.0.0",
+    "browserslist": "4.28.8",
    "browserslist-useragent-regexp": "4.1.4",
    "del": "8.0.1",
    "eslint": "10.8.1",
@@ -195,6 +197,7 @@
    "jsdom": "30.0.1",
    "jszip": "3.10.1",
    "license-checker-rseidelsohn": "5.0.1",
+    "lightningcss": "1.33.0",
    "lint-staged": "17.3.0",
    "lit-analyzer": "2.0.3",
    "lodash.merge": "4.6.2",
@@ -0,0 +1,217 @@
+import type {
+  ReactiveController,
+  ReactiveControllerHost,
+} from "@lit/reactive-element/reactive-controller";
+import { css, type LitElement } from "lit";
+import type { Ref } from "lit/directives/ref";
+import { parseAnimationDuration } from "../util/parse-animation-duration";
+
+type FilterPanelHost = ReactiveControllerHost &
+  LitElement & { expanded: boolean };
+
+const EASING = "cubic-bezier(0.4, 0, 0.2, 1)";
+
+/**
+ * Layout the controller relies on: the filter is a flex column made of its
+ * header (`ha-expansion-panel`) and a `.content` wrapper. Collapsed, it is as
+ * tall as its header; expanded, it fills what is left of the pane and hands
+ * that space down to the list through the wrapper.
+ */
+export const filterPanelStyles = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--divider-color);
+  }
+  :host([expanded]) {
+    flex: 1;
+    height: 0;
+  }
+  ha-expansion-panel {
+    flex: none;
+    --ha-card-border-radius: var(--ha-border-radius-square);
+  }
+  ha-expansion-panel::part(summary) {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+  .content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+  }
+`;
+
+const panels = new Set<FilterPanelController>();
+
+let pending: Set<FilterPanelController> | undefined;
+
+const flush = () => {
+  const batch = [...pending!].filter((panel) => panel.host.isConnected);
+  pending = undefined;
+  batch.forEach((panel) => panel.prepare());
+  batch.forEach((panel) => panel.measure());
+  batch.forEach((panel) => panel.play());
+};
+
+// Filters that change in the same frame (one closing while another opens) are
+// animated as one batch: every filter is measured before any of them has
+// changed the DOM, and the closing ones are parked at their final height so
+// the opening one reads its own final height from the real layout.
+const enqueue = (panel: FilterPanelController) => {
+  if (!pending) {
+    pending = new Set();
+    panels.forEach((other) => other.snapshot());
+    requestAnimationFrame(flush);
+  }
+  pending.add(panel);
+};
+
+const clearInlineStyles = (element?: HTMLElement) => {
+  element?.style.removeProperty("height");
+  element?.style.removeProperty("flex");
+  element?.style.removeProperty("overflow");
+};
+
+/**
+ * Animates a filter of the filter pane between its collapsed and expanded
+ * heights whenever `expanded` changes, and tells the host when to render its
+ * content: from the moment it expands until its collapse animation has ended.
+ *
+ * During the animation the content keeps its final size and the host clips
+ * it, so the list is revealed rather than resized.
+ */
+export class FilterPanelController implements ReactiveController {
+  public showContent = false;
+
+  public host: FilterPanelHost;
+
+  private _content: Ref<HTMLElement>;
+
+  private _expanded?: boolean;
+
+  private _first = 0;
+
+  private _last = 0;
+
+  private _contentHeight = 0;
+
+  private _animation?: Animation;
+
+  constructor(host: FilterPanelHost, content: Ref<HTMLElement>) {
+    this.host = host;
+    this._content = content;
+    host.addController(this);
+  }
+
+  public hostConnected() {
+    panels.add(this);
+  }
+
+  public hostDisconnected() {
+    panels.delete(this);
+    this._animation?.cancel();
+    this._animation = undefined;
+    clearInlineStyles(this.host);
+    clearInlineStyles(this._content.value);
+  }
+
+  public hostUpdate() {
+    const expanded = this.host.expanded;
+    if (this._expanded === undefined) {
+      this._expanded = expanded;
+      this.showContent = expanded;
+      return;
+    }
+    if (expanded === this._expanded) {
+      return;
+    }
+    this._expanded = expanded;
+    if (!this.host.isConnected) {
+      this.showContent = expanded;
+      return;
+    }
+    if (expanded) {
+      this.showContent = true;
+    }
+    enqueue(this);
+  }
+
+  public snapshot() {
+    this._first = this.host.getBoundingClientRect().height;
+  }
+
+  public prepare() {
+    this._animation?.cancel();
+    this._animation = undefined;
+    const host = this.host;
+    const content = this._content.value;
+    clearInlineStyles(host);
+    clearInlineStyles(content);
+    if (host.expanded) {
+      return;
+    }
+    this._last =
+      host.getBoundingClientRect().height -
+      (content?.getBoundingClientRect().height ?? 0);
+    this._contentHeight = this._first - this._last;
+    host.style.flex = "none";
+    host.style.height = `${this._last}px`;
+  }
+
+  public measure() {
+    if (!this.host.expanded) {
+      return;
+    }
+    this._last = this.host.getBoundingClientRect().height;
+    this._contentHeight =
+      this._content.value?.getBoundingClientRect().height ?? 0;
+  }
+
+  public play() {
+    const host = this.host;
+    if (this._first === this._last) {
+      this._finish();
+      return;
+    }
+    const content = this._content.value;
+    host.style.flex = "none";
+    host.style.overflow = "hidden";
+    if (content) {
+      content.style.flex = "none";
+      content.style.height = `${this._contentHeight}px`;
+    }
+    const animation = host.animate(
+      [{ height: `${this._first}px` }, { height: `${this._last}px` }],
+      {
+        duration:
+          parseAnimationDuration(
+            getComputedStyle(host).getPropertyValue(
+              "--ha-animation-duration-normal"
+            )
+          ) || 250,
+        easing: EASING,
+        fill: "forwards",
+      }
+    );
+    animation.onfinish = () => this._finish(animation);
+    this._animation = animation;
+  }
+
+  private async _finish(animation?: Animation) {
+    if (!this.host.expanded) {
+      this.showContent = false;
+      this.host.requestUpdate();
+      await this.host.updateComplete;
+    }
+    if (this._animation !== animation) {
+      return;
+    }
+    clearInlineStyles(this.host);
+    clearInlineStyles(this._content.value);
+    this._animation?.cancel();
+    this._animation = undefined;
+  }
+}
@@ -25,6 +25,7 @@ export type LocalizeKeys =
  | `ui.dialogs.unsupported.reasons.${string}`
  | `ui.panel.config.${string}.${"caption" | "description"}`
  | `ui.panel.config.dashboard.${string}`
+  | `ui.panel.config.mqtt.${string}`
  | `ui.panel.config.storage.segments.${string}`
  | `ui.panel.config.zha.${string}`
  | `ui.panel.config.zwave_js.${string}`
@@ -1,4 +1,5 @@
 import type { HassServiceTarget } from "home-assistant-js-websocket";
+import { deepEqual } from "../util/deep-equal";
 import {
  createQueryString,
  decodeQueryParams,
@@ -35,6 +36,15 @@ export const historyLogbookTargetFromQueryParams = (
 ): HassServiceTarget | undefined =>
  serviceTargetFromQueryParams(params, historyLogbookTargetParamKeys);

+export const historyLogbookTargetsEqual = (
+  a: HassServiceTarget,
+  b: HassServiceTarget
+): boolean =>
+  deepEqual(
+    queryParamsFromServiceTarget(a, historyLogbookTargetParamKeys),
+    queryParamsFromServiceTarget(b, historyLogbookTargetParamKeys)
+  );
+
 export const createHistoryLogbookUrl = (
  path: string,
  target: HassServiceTarget,
@@ -0,0 +1,268 @@
+import type { HassConfig } from "home-assistant-js-websocket";
+import type { EChartsType } from "echarts/core";
+import type { XAXisOption, YAXisOption } from "echarts/types/dist/shared";
+import { ensureArray } from "../../common/array/ensure-array";
+import { formatDateTime } from "../../common/datetime/format_date_time";
+import type { LocalizeFunc } from "../../common/translations/localize";
+import type { FrontendLocaleData } from "../../data/translation";
+import type {
+  HaECSeries,
+  HaECSeriesItem,
+} from "../../resources/echarts/echarts";
+
+export interface ChartSonification {
+  update: () => void;
+  dispose: () => void;
+}
+
+// Series types the Chart2Music ECharts extension can turn into data points. Our
+// other series (custom timelines, sankey, network graphs) have no equivalent, and
+// the extension refuses the whole chart if a single series is unsupported.
+const SONIFIABLE_SERIES_TYPES = new Set(["bar", "line", "pie", "scatter"]);
+
+// Languages shipped by chart2music. Anything else falls back to its English.
+const SONIFICATION_LANGUAGES = new Set(["de", "en", "es", "fr", "hmn", "it"]);
+
+// Fewer than this and there is nothing to walk between, so a focus stop would
+// lead nowhere.
+const MIN_NAVIGABLE_POINTS = 2;
+
+// Mirrors the extension's own reading of a point: it takes `value` as [x, y] and
+// drops anything whose y is not a real number. That rejects gap-only series, and
+// also value-first pairs like the energy device charts' [amount, "sensor.foo"].
+// Counts no further than `limit` so this stays cheap on charts with many points.
+const countNumericPoints = (data: unknown, limit: number): number => {
+  if (!Array.isArray(data)) {
+    return 0;
+  }
+  let found = 0;
+  for (const raw of data) {
+    let y: unknown = raw;
+    if (Array.isArray(raw)) {
+      y = raw.length > 1 ? raw[1] : raw[0];
+    } else if (raw && typeof raw === "object") {
+      const { value } = raw as { value?: unknown };
+      y = Array.isArray(value)
+        ? value.length > 1
+          ? value[1]
+          : value[0]
+        : value;
+    }
+    if (typeof y === "number" && !Number.isNaN(y)) {
+      found += 1;
+      if (found >= limit) {
+        break;
+      }
+    }
+  }
+  return found;
+};
+
+const countNavigablePoints = (
+  series: readonly ({ data?: unknown } | undefined)[]
+): number => {
+  let total = 0;
+  for (const s of series) {
+    total += countNumericPoints(s?.data, MIN_NAVIGABLE_POINTS - total);
+    if (total >= MIN_NAVIGABLE_POINTS) {
+      break;
+    }
+  }
+  return total;
+};
+
+export const canSonifyChart = (
+  data: HaECSeries,
+  // Legend-hidden series reach ECharts with their data stripped, so they cannot
+  // be sonified either.
+  hiddenDatasets?: ReadonlySet<string>
+): boolean => {
+  const series = ensureArray(data);
+  const visible = hiddenDatasets?.size
+    ? series.filter((s) => !hiddenDatasets.has(String(s.id ?? s.name)))
+    : series;
+  return (
+    // Cards commonly push empty placeholder series, so judge the chart by the
+    // points the extension can actually read — but every type has to be
+    // convertible too.
+    countNavigablePoints(visible) >= MIN_NAVIGABLE_POINTS &&
+    series.every((s) => SONIFIABLE_SERIES_TYPES.has(s.type as string))
+  );
+};
+
+interface SonifyChartOptions {
+  cc: HTMLElement;
+  localize: LocalizeFunc;
+  locale: FrontendLocaleData;
+  config: HassConfig;
+  onError: (error: string) => void;
+}
+
+// Chart2Music appends its help and options dialogs straight to document.body, so
+// they can only be themed from a document-level stylesheet.
+let stylesAppended = false;
+const appendSonificationStyles = () => {
+  if (stylesAppended) {
+    return;
+  }
+  stylesAppended = true;
+  const style = document.createElement("style");
+  style.textContent = `
+    dialog.chart2music-dialog {
+      box-sizing: border-box;
+      max-width: min(600px, calc(100vw - 32px));
+      max-height: calc(100vh - 32px);
+      overflow: auto;
+      padding: var(--ha-space-6);
+      border: none;
+      border-radius: var(--ha-border-radius-lg);
+      background-color: var(--card-background-color);
+      color: var(--primary-text-color);
+      font-family: var(--ha-font-family-body);
+      font-size: var(--ha-font-size-m);
+      box-shadow: var(--ha-box-shadow-l);
+    }
+    dialog.chart2music-dialog::backdrop {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+    dialog.chart2music-dialog h1 {
+      font-size: var(--ha-font-size-2xl);
+      font-weight: var(--ha-font-weight-normal);
+      margin-block: 0 var(--ha-space-4);
+      padding-inline-end: var(--ha-space-8);
+    }
+    dialog.chart2music-dialog table {
+      border-collapse: collapse;
+      width: 100%;
+    }
+    dialog.chart2music-dialog th,
+    dialog.chart2music-dialog td {
+      text-align: start;
+      padding: var(--ha-space-1) var(--ha-space-2);
+      border-bottom: 1px solid var(--divider-color);
+    }
+    dialog.chart2music-dialog a {
+      color: var(--primary-color);
+    }
+    dialog.chart2music-dialog > button {
+      /* The extension inlines "right", which does not mirror in RTL, and inline
+         styles can only be beaten with !important. */
+      inset-inline-end: var(--ha-space-4) !important;
+      inset-inline-start: auto !important;
+      top: var(--ha-space-4);
+      min-width: 32px;
+      min-height: 32px;
+      cursor: pointer;
+      border: 1px solid var(--divider-color);
+      border-radius: var(--ha-border-radius-sm);
+      background-color: transparent;
+      color: var(--primary-text-color);
+      font: inherit;
+    }
+  `;
+  document.head.append(style);
+};
+
+export const sonifyChart = async (
+  chart: EChartsType,
+  options: SonifyChartOptions
+): Promise<ChartSonification | null> => {
+  const { connect } = await import("echarts-extension-chart2music");
+  const { localize, locale, config } = options;
+  appendSonificationStyles();
+
+  // ECharts nulls its model on dispose, and the instance can be disposed while
+  // the chunk is in flight.
+  const chartOptions = chart.getOption() as ReturnType<
+    EChartsType["getOption"]
+  > | null;
+  if (!chartOptions) {
+    return null;
+  }
+  const xAxis = ensureArray(chartOptions.xAxis)[0] as XAXisOption | undefined;
+  const yAxis = ensureArray(chartOptions.yAxis)[0] as YAXisOption | undefined;
+
+  // Chart2Music throws while validating a group with no points, which is what
+  // placeholder, legend-hidden and all-null series turn into, so only offer it
+  // the series carrying points it can read.
+  const allSeries = ensureArray(chartOptions.series) as (
+    HaECSeriesItem | undefined
+  )[];
+  const readable = allSeries.filter((s) => countNumericPoints(s?.data, 1));
+  // A single point is not navigable, so it does not earn a focus stop either.
+  if (countNavigablePoints(readable) < MIN_NAVIGABLE_POINTS) {
+    return null;
+  }
+  const seriesIndex = readable.map((s) => allSeries.indexOf(s));
+
+  // Chart2Music always reads out an axis label, and the extension picks the wrong
+  // axis to name when there is no category axis, so label both explicitly.
+  const isTimeAxis = xAxis?.type === "time";
+  const x = {
+    label:
+      xAxis?.name ||
+      localize(
+        isTimeAxis
+          ? "ui.components.history_charts.time"
+          : "ui.components.history_charts.category"
+      ),
+    // Time series carry raw timestamps, which would otherwise be announced as
+    // epoch milliseconds.
+    format: isTimeAxis
+      ? (value: number) => formatDateTime(new Date(value), locale, config)
+      : undefined,
+  };
+  const y = {
+    label: yAxis?.name || localize("ui.components.history_charts.value"),
+  };
+
+  let connection: ReturnType<typeof connect>;
+  try {
+    connection = connect(chart, {
+      cc: options.cc,
+      seriesIndex,
+      title: localize("ui.components.history_charts.chart"),
+      lang: SONIFICATION_LANGUAGES.has(locale.language)
+        ? locale.language
+        : "en",
+      errorCallback: options.onError,
+      axes: { x, y },
+    });
+  } catch (err) {
+    options.onError(err instanceof Error ? err.message : String(err));
+    return null;
+  }
+  if (!connection) {
+    return null;
+  }
+  // Chart2Music bails out silently on mobile user agents, returning an instance
+  // that never wired anything up. Turning the caption container into a live
+  // region is the last thing it does, so use that as the "really connected" test
+  // rather than leaving a focus stop that does nothing.
+  if (!options.cc.hasAttribute("aria-live")) {
+    connection.dispose();
+    return null;
+  }
+  const connected = connection;
+
+  // The extension re-reads the chart from ECharts' own "finished" event. Run that
+  // through a guard of our own so a conversion failure cannot escape into
+  // ECharts' event dispatch and leave the chart half-rendered.
+  const update = () => {
+    try {
+      connected.update();
+    } catch (_err) {
+      // Keep whatever Chart2Music last read successfully.
+    }
+  };
+  chart.off("finished", connected.update);
+  chart.on("finished", update);
+
+  return {
+    update,
+    dispose: () => {
+      chart.off("finished", update);
+      connected.dispose();
+    },
+  };
+};
@@ -22,6 +22,7 @@ import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import { ensureArray } from "../../common/array/ensure-array";
 import { getAllGraphColors } from "../../common/color/colors";
@@ -47,6 +48,8 @@ import { isMac } from "../../util/is_mac";
 import "../chips/ha-assist-chip";
 import "../ha-icon-button";
 import { formatTimeLabel } from "./axis-label";
+import type { ChartSonification } from "./chart-sonification";
+import { canSonifyChart, sonifyChart } from "./chart-sonification";
 import { downSampleLineData } from "./down-sample";
 import { wrapLitTooltipFormatter } from "./lit-tooltip-formatter";

@@ -146,6 +149,17 @@ export class HaChartBase extends LitElement {

  @query(".chart") private _chartContainer?: HTMLDivElement;

+  @query(".sonification-output")
+  private _sonificationOutput?: HTMLDivElement;
+
+  private _sonification?: ChartSonification;
+
+  @state() private _sonificationLoading = false;
+
+  @state() private _sonificationUnavailable = false;
+
+  @state() private _sonificationFocusHeld = false;
+
  private _modifierPressed = false;

  private _isTouchDevice = "ontouchstart" in window;
@@ -198,6 +212,7 @@ export class HaChartBase extends LitElement {
    while (this._listeners.length) {
      this._listeners.pop()!();
    }
+    this._disposeSonification();
    this.chart?.dispose();
    this.chart = undefined;
    this._originalZrFlush = undefined;
@@ -312,6 +327,18 @@ export class HaChartBase extends LitElement {
    }
    if (changedProps.has("data") || changedProps.has("_hiddenDatasets")) {
      chartOptions.series = this._getSeries();
+      // New data, or a series shown again, may well be convertible where the
+      // last set was not.
+      this._sonificationUnavailable = false;
+      // The connection is built from the series that had data at the time, so
+      // drop it and let the next focus rebuild it against the current set.
+      if (
+        this._sonification &&
+        (changedProps.has("_hiddenDatasets") ||
+          !canSonifyChart(this.data, this._hiddenDatasets))
+      ) {
+        this._disposeSonification();
+      }
    }
    if (changedProps.has("options")) {
      chartOptions = { ...chartOptions, ...this._createOptions() };
@@ -337,6 +364,9 @@ export class HaChartBase extends LitElement {
  }

  protected render() {
+    const sonifiable =
+      !this._sonificationUnavailable &&
+      canSonifyChart(this.data, this._hiddenDatasets);
    return html`
      <div
        class="container ${classMap({ "has-height": !!this.height })}"
@@ -348,8 +378,23 @@ export class HaChartBase extends LitElement {
            height: this.height ? undefined : `${this._getDefaultHeight()}px`,
          })}
        >
-          <div class="chart"></div>
+          <div
+            class="chart"
+            role=${ifDefined(sonifiable ? "application" : undefined)}
+            tabindex=${ifDefined(
+              sonifiable ? "0" : this._sonificationFocusHeld ? "-1" : undefined
+            )}
+            aria-label=${ifDefined(
+              sonifiable
+                ? this.hass.localize("ui.components.history_charts.chart")
+                : undefined
+            )}
+            aria-busy=${ifDefined(this._sonificationLoading ? "true" : undefined)}
+            @focus=${this._handleChartFocus}
+            @blur=${this._handleChartBlur}
+          ></div>
        </div>
+        <div class="sonification-output"></div>
        ${this._renderLegend()}
        <div class="top-controls ${classMap({ small: this.smallControls })}">
          <slot name="search"></slot>
@@ -521,6 +566,60 @@ export class HaChartBase extends LitElement {
    </div>`;
  }

+  // Chart2Music adds ~45 kB gzipped, so it is only fetched once someone actually
+  // moves keyboard focus into a chart.
+  private async _handleChartFocus() {
+    // Dropping tabindex off the active element resets focus to the document and
+    // costs the user their place in the tab order, so stay programmatically
+    // focusable for as long as we hold focus, however we stop being sonifiable.
+    this._sonificationFocusHeld = true;
+    if (this._sonification || this._sonificationLoading || !this.chart) {
+      return;
+    }
+    this._sonificationLoading = true;
+    try {
+      const sonification = await sonifyChart(this.chart, {
+        cc: this._sonificationOutput!,
+        localize: this.hass.localize,
+        locale: this.hass.locale,
+        config: this.hass.config,
+        onError: () => {
+          // Charts the extension cannot describe stay silent rather than
+          // dropping an error on someone who only pressed Tab.
+        },
+      });
+      if (!this.isConnected || !this.chart) {
+        sonification?.dispose();
+        return;
+      }
+      if (!sonification) {
+        // Nothing came back, so stop offering a focus stop that leads nowhere.
+        this._sonificationUnavailable = true;
+        return;
+      }
+      this._sonification = sonification;
+      if (this.shadowRoot?.activeElement === this._chartContainer) {
+        // Chart2Music reads its summary and key hints on focus, which already
+        // happened while it was still being fetched.
+        this._chartContainer!.dispatchEvent(new FocusEvent("focus"));
+      }
+    } catch (_err) {
+      // Never let a failure here escape a focus handler. The tab stop stays, so
+      // focusing the chart again retries.
+    } finally {
+      this._sonificationLoading = false;
+    }
+  }
+
+  private _handleChartBlur() {
+    this._sonificationFocusHeld = false;
+  }
+
+  private _disposeSonification() {
+    this._sonification?.dispose();
+    this._sonification = undefined;
+  }
+
  private _formatTimeLabel = (value: number | Date) =>
    formatTimeLabel(
      value,
@@ -533,6 +632,9 @@ export class HaChartBase extends LitElement {
    if (this._loading) return;
    this._loading = true;
    try {
+      // The connection holds a reference to the chart instance, so it cannot
+      // outlive it. Focusing the chart again reconnects.
+      this._disposeSonification();
      if (this.chart) {
        this.chart.dispose();
      }
@@ -1450,6 +1552,23 @@ export class HaChartBase extends LitElement {
      height: 100%;
      width: 100%;
    }
+    .chart:focus-visible {
+      outline: 2px solid var(--primary-color);
+      outline-offset: 2px;
+      border-radius: var(--ha-border-radius-sm);
+    }
+    /* Chart2Music renders its announcements here. It must stay in the layout for
+       screen readers to pick up the live region, so hide it visually only. */
+    .sonification-output {
+      position: absolute;
+      overflow: hidden;
+      clip: rect(0 0 0 0);
+      height: 1px;
+      width: 1px;
+      margin: -1px;
+      padding: 0;
+      border: 0;
+    }
    .top-controls {
      position: absolute;
      top: var(--ha-space-4);
@@ -1,3 +1,4 @@
+import { ResizeController } from "@lit-labs/observers/resize-controller";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -22,6 +23,10 @@ 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;
+const ROW_HEIGHT_INSIDE_LABELS = 64;
+const GRID_BOTTOM = 30;
+
@customElement("state-history-chart-timeline")
 export class StateHistoryChartTimeline extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;
@@ -38,6 +43,10 @@ export class StateHistoryChartTimeline extends LitElement {

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

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

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

  @state() private _yWidth = 0;

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

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

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

  static styles = css`
+    :host {
+      display: block;
+    }
+
    ha-chart-base {
      --chart-max-height: none;
    }
@@ -79,6 +79,10 @@ 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;

@@ -227,6 +231,7 @@ 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}
@@ -424,6 +429,12 @@ 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;
    }
@@ -163,12 +163,15 @@ export function generateStatisticsChartData(
        return;
      }
      const isLineChart = chartType === "line";
+      // Points carry their time as epoch milliseconds, not Date objects:
+      // ECharts accepts both, but Chart2Music only reads a numeric x, and a
+      // Date would make it announce points by index instead of time.
      // For bar charts, optionally center the bar within its time range. The
      // centered time is shared by every series of this data point.
      const barTime =
        !isLineChart && centerBars
-          ? new Date((start.getTime() + end.getTime()) / 2)
-          : start;
+          ? (start.getTime() + end.getTime()) / 2
+          : start.getTime();
      // Whether a gap needs to be drawn before this data point (line charts).
      const drawGap =
        isLineChart &&
@@ -182,10 +185,10 @@ export function generateStatisticsChartData(
          if (drawGap) {
            // if the end of the previous data doesn't match the start of the current data,
            // we have to draw a gap so add a value at the end time, and then an empty value.
-            d.data!.push([prevEndTime!, ...prevValues![i]!]);
-            d.data!.push([prevEndTime!, null]);
+            d.data!.push([prevEndTime!.getTime(), ...prevValues![i]!]);
+            d.data!.push([prevEndTime!.getTime(), null]);
          }
-          d.data!.push([start, ...dataValue!]);
+          d.data!.push([start.getTime(), ...dataValue!]);
          // For band-top rows dataValues[i] is [diff, top]; the actual Y is
          // the last element. For regular rows it's [value]. Same call works.
          trackY(dataValue[dataValue.length - 1]);
@@ -387,7 +390,7 @@ export function generateStatisticsChartData(
    const lastValues = prevValues;
    if (chartType === "line" && lastEndTime && lastValues) {
      statDataSets.forEach((d, i) => {
-        d.data!.push([lastEndTime, ...lastValues[i]!]);
+        d.data!.push([lastEndTime.getTime(), ...lastValues[i]!]);
      });
    }

@@ -423,7 +426,7 @@ export function generateStatisticsChartData(
              } else {
                val.push(currentValue);
              }
-              statDataSets[i].data!.push([now, ...val]);
+              statDataSets[i].data!.push([now.getTime(), ...val]);
              trackY(val[val.length - 1]);
            });
          }
@@ -0,0 +1,79 @@
+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;
+  }
+}
@@ -2,7 +2,6 @@ import "@home-assistant/webawesome/dist/components/popover/popover";
 import { consume, type ContextType } from "@lit/context";
 import { mdiCalendar } from "@mdi/js";
 import "cally";
-import { isThisYear } from "date-fns";
 import type { HassConfig } from "home-assistant-js-websocket/dist/types";
 import type { PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -11,10 +10,7 @@ import { tinykeys } from "tinykeys";
 import { shiftDateRange } from "../../common/datetime/calc_date";
 import type { DateRange } from "../../common/datetime/calc_date_range";
 import { calcDateRange } from "../../common/datetime/calc_date_range";
-import {
-  formatShortDateTime,
-  formatShortDateTimeWithYear,
-} from "../../common/datetime/format_date_time";
+import { formatShortDateTimeWithConditionalYear } from "../../common/datetime/format_date_time";
 import { transform } from "../../common/decorators/transform";
 import { fireEvent } from "../../common/dom/fire_event";
 import { configContext, internationalizationContext } from "../../data/context";
@@ -42,18 +38,67 @@ 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 })
-  private _i18n!: ContextType<typeof internationalizationContext>;
+  protected _i18n!: ContextType<typeof internationalizationContext>;

  @state()
  @consume({ context: configContext, subscribe: true })
  @transform<HomeAssistantConfig, HassConfig>({
    transformer: ({ config }) => config,
  })
-  private _hassConfig!: HassConfig;
+  protected _hassConfig!: HassConfig;

  @property({ attribute: false }) public startDate!: Date;

@@ -143,73 +188,7 @@ export class HaDateRangePicker extends LitElement {
  protected render(): TemplateResult {
    return html`
      <div class="container">
-        <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>
+        <div class="date-range-inputs">${this._renderField()}</div>
        ${
          this._pickerWrapperOpen || this._opened
            ? this._openedNarrow
@@ -248,6 +227,60 @@ 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>`;
+  }
+
+  protected _formatRange(separator: string): string {
+    const format = (date: Date) =>
+      formatShortDateTimeWithConditionalYear(
+        date,
+        this._i18n.locale,
+        this._hassConfig
+      );
+    return format(this.startDate) + separator + format(this.endDate);
+  }
+
  private _renderPicker() {
    if (!this._opened) {
      return nothing;
@@ -303,12 +336,12 @@ export class HaDateRangePicker extends LitElement {
    this._opened = false;
  };

-  private _handleNext(ev: MouseEvent): void {
+  protected _handleNext(ev: MouseEvent): void {
    if (ev && ev.stopPropagation) ev.stopPropagation();
    this._shift(true);
  }

-  private _handlePrev(ev: MouseEvent): void {
+  protected _handlePrev(ev: MouseEvent): void {
    if (ev && ev.stopPropagation) ev.stopPropagation();
    this._shift(false);
  }
@@ -336,7 +369,7 @@ export class HaDateRangePicker extends LitElement {
    this._pickerWrapperOpen = false;
  }

-  private _openPicker(ev?: Event) {
+  protected _openPicker(ev?: Event) {
    if (this.disabled) {
      return;
    }
@@ -352,7 +385,7 @@ export class HaDateRangePicker extends LitElement {
    });
  }

-  private _handleKeydown(ev: KeyboardEvent) {
+  protected _handleKeydown(ev: KeyboardEvent) {
    if (ev.key === "Enter" || ev.key === " ") {
      ev.stopPropagation();
      this._openPicker(ev);
@@ -369,56 +402,7 @@ export class HaDateRangePicker extends LitElement {
    }
  }

-  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;
-      }
-    `,
-  ];
+  static styles = [haDateRangePickerStyles];
 }

 declare global {
@@ -0,0 +1,141 @@
+import { mdiAlertOctagram, mdiCheckBold } from "@mdi/js";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, state } from "lit/decorators";
+import "./ha-spinner";
+import "./ha-svg-icon";
+
+type ActionResult = "success" | "error";
+
+// Keep in sync with ha-progress-button
+const RESULT_DURATION = 2000;
+
+// Long enough that fast actions go straight to their result without a flash
+const SPINNER_DELAY = 150;
+
+/**
+ * Home Assistant action result component
+ *
+ * @element ha-action-result
+ *
+ * @summary
+ * Wraps the content of an action trigger, for example an `ha-control-button`,
+ * and swaps it for a spinner while a slow action runs and for a success or
+ * error icon once it settles.
+ *
+ * @slot - Content of the trigger.
+ */
+@customElement("ha-action-result")
+export class HaActionResult extends LitElement {
+  @state() private _loading = false;
+
+  @state() private _showSpinner = false;
+
+  @state() private _result?: ActionResult;
+
+  private _timeout?: number;
+
+  private _spinnerTimeout?: number;
+
+  public get busy(): boolean {
+    return this._loading;
+  }
+
+  public async run(action: Promise<unknown>): Promise<void> {
+    clearTimeout(this._timeout);
+    clearTimeout(this._spinnerTimeout);
+    this._result = undefined;
+    this._loading = true;
+    this._spinnerTimeout = window.setTimeout(() => {
+      this._showSpinner = true;
+    }, SPINNER_DELAY);
+    try {
+      await action;
+      this._result = "success";
+    } catch (_err) {
+      this._result = "error";
+    } finally {
+      clearTimeout(this._spinnerTimeout);
+      this._loading = false;
+      this._showSpinner = false;
+      this._timeout = window.setTimeout(() => {
+        this._result = undefined;
+      }, RESULT_DURATION);
+    }
+  }
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+    clearTimeout(this._timeout);
+    clearTimeout(this._spinnerTimeout);
+    this._showSpinner = false;
+    this._result = undefined;
+  }
+
+  protected render() {
+    const busy = this._showSpinner || this._result !== undefined;
+
+    return html`
+      <span class="content ${busy ? "hidden" : ""}"><slot></slot></span>
+      ${
+        busy
+          ? html`<div class="indicator">${this._renderIndicator()}</div>`
+          : nothing
+      }
+    `;
+  }
+
+  private _renderIndicator() {
+    if (!this._result) {
+      return html`<ha-spinner></ha-spinner>`;
+    }
+    return html`
+      <ha-svg-icon
+        class=${this._result}
+        .path=${this._result === "success" ? mdiCheckBold : mdiAlertOctagram}
+      ></ha-svg-icon>
+    `;
+  }
+
+  static styles = css`
+    /* Prefer no box so the host inherits the layout of the slot it sits in.
+       A ::slotted() rule in the host component can still override this. */
+    :host {
+      display: contents;
+    }
+    .content {
+      transition: opacity var(--ha-animation-duration-instant) ease-in-out;
+    }
+    .content.hidden {
+      opacity: 0;
+    }
+    .indicator {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      animation: fade-in var(--ha-animation-duration-instant) ease-in-out;
+    }
+    ha-spinner {
+      --ha-spinner-size: var(--mdc-icon-size, 24px);
+      --track-width: 2px;
+    }
+    /* Overshoot so the icon lands with a small pop */
+    ha-svg-icon {
+      animation: scale var(--ha-animation-duration-fast)
+        cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+    ha-svg-icon.success {
+      color: var(--ha-color-on-success-quiet);
+    }
+    ha-svg-icon.error {
+      color: var(--ha-color-on-danger-quiet);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-action-result": HaActionResult;
+  }
+}
@@ -12,6 +12,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
+import { transform } from "../common/decorators/transform";
 import { supportsFeature } from "../common/entity/supports-feature";
 import type { LocalizeFunc } from "../common/translations/localize";
 import {
@@ -24,6 +25,7 @@ import {
 import {
  configContext,
  connectionContext,
+  internationalizationContext,
  statesContext,
 } from "../data/context";
 import { ConversationEntityFeature } from "../data/conversation";
@@ -33,8 +35,13 @@ import type {
  HomeAssistant,
  HomeAssistantConfig,
  HomeAssistantConnection,
+  HomeAssistantInternationalization,
 } from "../types";
 import { AudioRecorder } from "../util/audio-recorder";
+import {
+  findAvailableLanguage,
+  getTranslation,
+} from "../util/common-translation";
 import { documentationUrl } from "../util/documentation-url";
 import "./ha-alert";
 import "./ha-markdown";
@@ -67,6 +74,17 @@ export const assistPipelineChanged = (
  current: AssistPipeline | undefined
 ): boolean => previous?.id !== current?.id;

+export const greetingTranslationLanguage = (
+  pipelineLanguage: string | undefined,
+  interfaceLanguage: string | undefined
+): string | undefined => {
+  if (!pipelineLanguage || pipelineLanguage === interfaceLanguage) {
+    return undefined;
+  }
+  const language = findAvailableLanguage(pipelineLanguage);
+  return language && language !== interfaceLanguage ? language : undefined;
+};
+
@customElement("ha-assist-chat")
 export class HaAssistChat extends LitElement {
  @property({ attribute: false }) public pipeline?: AssistPipeline;
@@ -101,6 +119,13 @@ export class HaAssistChat extends LitElement {
  @consumeLocalize()
  private _localize!: LocalizeFunc;

+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  @transform<HomeAssistantInternationalization, string>({
+    transformer: ({ language }) => language,
+  })
+  private _language!: string;
+
  @state()
  @consume({ context: statesContext, subscribe: true })
  private _states!: HomeAssistant["states"];
@@ -115,6 +140,8 @@ export class HaAssistChat extends LitElement {

  private _conversationId: string | null = null;

+  private _greetingLoadToken = 0;
+
  private _initialPromptSubmitted = false;

  private _audioRecorder?: AudioRecorder;
@@ -131,17 +158,44 @@ export class HaAssistChat extends LitElement {
      (changedProperties.has("pipeline") &&
        assistPipelineChanged(changedProperties.get("pipeline"), this.pipeline))
    ) {
-      this._conversation = [
-        {
-          who: "hass",
-          text: this._localize("ui.dialogs.voice_command.how_can_i_help"),
-          thinking: "",
-          tool_calls: {},
-        },
-      ];
+      this._conversation = [];
+      this._loadGreeting();
    }
  }

+  private async _loadGreeting(): Promise<void> {
+    const token = ++this._greetingLoadToken;
+    const language = greetingTranslationLanguage(
+      this.pipeline?.language,
+      this._language
+    );
+    let greeting: string | undefined;
+    if (language) {
+      try {
+        const result = await getTranslation(null, language, false);
+        if (result.language === language) {
+          greeting = result.data["ui.dialogs.voice_command.how_can_i_help"];
+        }
+      } catch (_err) {
+        // Translation failed to load; fall back to the interface language.
+      }
+    }
+    if (token !== this._greetingLoadToken) {
+      // The pipeline changed while loading; a newer load owns the greeting.
+      return;
+    }
+    this._conversation = [
+      {
+        who: "hass",
+        text:
+          greeting || this._localize("ui.dialogs.voice_command.how_can_i_help"),
+        thinking: "",
+        tool_calls: {},
+      },
+      ...this._conversation,
+    ];
+  }
+
  protected firstUpdated(changedProperties: PropertyValues<this>): void {
    super.firstUpdated(changedProperties);
    if (
@@ -157,7 +211,7 @@ export class HaAssistChat extends LitElement {

  protected updated(changedProps: PropertyValues) {
    super.updated(changedProps);
-    if (changedProps.has("_conversation")) {
+    if (changedProps.has("_conversation") && this._conversation.length) {
      this._scrollMessagesBottom();
    }
    if (
@@ -1,161 +0,0 @@
-import type { HassEntity } from "home-assistant-js-websocket";
-import type { CSSResultGroup, PropertyValues } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { computeAttributeNameDisplay } from "../common/entity/compute_attribute_display";
-import { computeStateDomain } from "../common/entity/compute_state_domain";
-import {
-  STATE_ATTRIBUTES,
-  STATE_ATTRIBUTES_DOMAIN_CLASS,
-} from "../data/entity/entity_attributes";
-import { haStyle } from "../resources/styles";
-import type { HomeAssistant } from "../types";
-import "./ha-attribute-value";
-import "./ha-expansion-panel";
-
-@customElement("ha-attributes")
-class HaAttributes extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public stateObj?: HassEntity;
-
-  @property({ attribute: "extra-filters" }) public extraFilters?: string;
-
-  @state() private _expanded = false;
-
-  private get _filteredAttributes() {
-    return this._computeDisplayAttributes(
-      STATE_ATTRIBUTES.concat(
-        this.extraFilters ? this.extraFilters.split(",") : [],
-        (this.stateObj &&
-          STATE_ATTRIBUTES_DOMAIN_CLASS[computeStateDomain(this.stateObj)]?.[
-            this.stateObj.attributes?.device_class
-          ]) ||
-          []
-      )
-    );
-  }
-
-  protected willUpdate(changedProperties: PropertyValues<this>): void {
-    if (
-      changedProperties.has("extraFilters") ||
-      changedProperties.has("stateObj")
-    ) {
-      this.toggleAttribute("empty", this._filteredAttributes.length === 0);
-    }
-  }
-
-  protected render() {
-    if (!this.stateObj) {
-      return nothing;
-    }
-
-    const attributes = this._filteredAttributes;
-
-    if (attributes.length === 0) {
-      return nothing;
-    }
-
-    return html`
-      <ha-expansion-panel
-        .header=${this.hass.localize(
-          "ui.components.attributes.expansion_header"
-        )}
-        outlined
-        @expanded-will-change=${this._expandedChanged}
-      >
-        <div class="attribute-container">
-          ${
-            this._expanded
-              ? html`
-                  ${attributes.map(
-                    (attribute) => html`
-                      <div class="data-entry">
-                        <div class="key">
-                          ${computeAttributeNameDisplay(
-                            this.hass.localize,
-                            this.stateObj!,
-                            this.hass.entities,
-                            attribute
-                          )}
-                        </div>
-                        <div class="value">
-                          <ha-attribute-value
-                            .attribute=${attribute}
-                            .stateObj=${this.stateObj}
-                          ></ha-attribute-value>
-                        </div>
-                      </div>
-                    `
-                  )}
-                `
-              : ""
-          }
-        </div>
-      </ha-expansion-panel>
-      ${
-        this.stateObj.attributes.attribution
-          ? html`
-              <div class="attribution">
-                ${this.stateObj.attributes.attribution}
-              </div>
-            `
-          : ""
-      }
-    `;
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      css`
-        .attribute-container {
-          margin-bottom: 8px;
-          direction: ltr;
-        }
-        .data-entry {
-          display: flex;
-          flex-direction: row;
-          justify-content: space-between;
-        }
-        .data-entry .value {
-          max-width: 60%;
-          overflow-wrap: break-word;
-          text-align: right;
-        }
-        .key {
-          flex-grow: 1;
-        }
-        .attribution {
-          color: var(--secondary-text-color);
-          text-align: center;
-          margin-top: 16px;
-        }
-        hr {
-          border-color: var(--divider-color);
-          border-bottom: none;
-          margin: 16px 0;
-        }
-      `,
-    ];
-  }
-
-  private _computeDisplayAttributes(filtersArray: string[]): string[] {
-    if (!this.stateObj) {
-      return [];
-    }
-    return Object.keys(this.stateObj.attributes).filter(
-      (key) => filtersArray.indexOf(key) === -1
-    );
-  }
-
-  private _expandedChanged(ev) {
-    this._expanded = ev.detail.expanded;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-attributes": HaAttributes;
-  }
-}
@@ -29,7 +29,7 @@ export type Appearance = "accent" | "filled" | "outlined" | "plain";
 *
 * @attr {("xs"|"s"|"m"|"l"|"xl")} size - Sets the button size.
 * @attr {("brand"|"neutral"|"danger"|"warning"|"success")} variant - Sets the button color variant. "primary" is default.
- * @attr {("accent"|"filled"|"plain")} appearance - Sets the button appearance.
+ * @attr {("accent"|"filled"|"outlined"|"plain")} appearance - Sets the button appearance.
 * @attr {boolean} loading - shows a loading indicator instead of the buttons label and disable buttons click.
 * @attr {boolean} disabled - Disables the button and prevents user interaction.
 */
@@ -199,6 +199,7 @@ export class HaButton extends Button {
        :host([appearance~="outlined"]) .button.disabled {
          background-color: transparent;
          color: var(--ha-color-on-disabled-quiet);
+          border-color: var(--ha-color-on-disabled-quiet);
        }

        @media (hover: hover) {
@@ -33,6 +33,7 @@ import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import { getEntityContext } from "../common/entity/context/get_entity_context";
 import { computeDeviceName } from "../common/entity/compute_device_name";
+import { computeEntityName } from "../common/entity/compute_entity_name";
 import { computeAreaName } from "../common/entity/compute_area_name";
 import { computeFloorName } from "../common/entity/compute_floor_name";
 import { copyToClipboard } from "../common/util/copy-clipboard";
@@ -752,6 +753,19 @@ export class HaCodeEditor extends ReactiveElement {
      this._states![key]
    );

+    const entityName = computeEntityName(
+      this._states![key],
+      this._registries!.entities,
+      this._registries!.devices
+    );
+    const deviceName = context.device
+      ? computeDeviceName(context.device)
+      : undefined;
+    const areaName = context.area ? computeAreaName(context.area) : undefined;
+    const floorName = context.floor
+      ? computeFloorName(context.floor)
+      : undefined;
+
    const completionItems: CompletionItem[] = [
      {
        label: this._i18n!.localize(
@@ -759,31 +773,39 @@ export class HaCodeEditor extends ReactiveElement {
        ),
        value: formattedState,
        subValue:
-          // If the state exactly matches the formatted state, don't show the raw state
          this._states![key].state === formattedState
            ? undefined
            : this._states![key].state,
      },
    ];

-    if (context.device && context.device.name) {
+    if (entityName) {
+      completionItems.push({
+        label: this._i18n!.localize(
+          "ui.components.entity.entity-picker.entity"
+        ),
+        value: entityName,
+      });
+    }
+
+    if (deviceName) {
      completionItems.push({
        label: this._i18n!.localize("ui.components.device-picker.device"),
-        value: context.device.name,
+        value: deviceName,
      });
    }

-    if (context.area && context.area.name) {
+    if (areaName) {
      completionItems.push({
        label: this._i18n!.localize("ui.components.area-picker.area"),
-        value: context.area.name,
+        value: areaName,
      });
    }

-    if (context.floor && context.floor.name) {
+    if (floorName) {
      completionItems.push({
        label: this._i18n!.localize("ui.components.floor-picker.floor"),
-        value: context.floor.name,
+        value: floorName,
      });
    }

@@ -0,0 +1,79 @@
+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;
+  }
+}
@@ -2,7 +2,12 @@ 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 { customElement, property, state } from "lit/decorators";
+import { createRef, ref } from "lit/directives/ref";
+import {
+  FilterPanelController,
+  filterPanelStyles,
+} from "../common/controllers/filter-panel-controller";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import type { LocalizeFunc } from "../common/translations/localize";
 import { fireEvent } from "../common/dom/fire_event";
@@ -34,11 +39,11 @@ export class HaFilterBlueprints extends LitElement {

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

-  @state() private _shouldRender = false;
-
  @state() private _blueprints?: Blueprints;

-  @query("ha-list") private _list?: HTMLElement;
+  private _content = createRef<HTMLElement>();
+
+  private _panel = new FilterPanelController(this, this._content);

  public willUpdate(properties: PropertyValues<this>) {
    super.willUpdate(properties);
@@ -56,7 +61,6 @@ export class HaFilterBlueprints extends LitElement {
      <ha-expansion-panel
        left-chevron
        .expanded=${this.expanded}
-        @expanded-will-change=${this._expandedWillChange}
        @expanded-changed=${this._expandedChanged}
      >
        <div slot="header" class="header">
@@ -71,29 +75,38 @@ export class HaFilterBlueprints extends LitElement {
              : nothing
          }
        </div>
-        ${
-          this._blueprints && this._shouldRender
-            ? html`
-                <ha-list
-                  @selected=${this._blueprintsSelected}
-                  multi
-                  class="ha-scrollbar"
-                >
-                  ${Object.entries(this._blueprints).map(([id, blueprint]) =>
-                    "error" in blueprint
-                      ? nothing
-                      : html`<ha-check-list-item
-                          .value=${id}
-                          .selected=${(this.value || []).includes(id)}
-                        >
-                          ${blueprint.metadata.name || id}
-                        </ha-check-list-item>`
-                  )}
-                </ha-list>
-              `
-            : nothing
-        }
      </ha-expansion-panel>
+      ${
+        this._panel.showContent
+          ? html`
+              <div class="content" ${ref(this._content)}>
+                ${
+                  this._blueprints
+                    ? html`
+                        <ha-list
+                          @selected=${this._blueprintsSelected}
+                          multi
+                          class="ha-scrollbar"
+                        >
+                          ${Object.entries(this._blueprints).map(
+                            ([id, blueprint]) =>
+                              "error" in blueprint
+                                ? nothing
+                                : html`<ha-check-list-item
+                                    .value=${id}
+                                    .selected=${(this.value || []).includes(id)}
+                                  >
+                                    ${blueprint.metadata.name || id}
+                                  </ha-check-list-item>`
+                          )}
+                        </ha-list>
+                      `
+                    : nothing
+                }
+              </div>
+            `
+          : nothing
+      }
    `;
  }

@@ -104,19 +117,6 @@ export class HaFilterBlueprints extends LitElement {
    this._blueprints = await fetchBlueprints(this.hass, this.type);
  }

-  protected updated(changed: PropertyValues<this>) {
-    if (changed.has("expanded") && this.expanded) {
-      setTimeout(() => {
-        if (this.narrow || !this.expanded) return;
-        this._list!.style.height = `${this.clientHeight - 49}px`;
-      }, 300);
-    }
-  }
-
-  private _expandedWillChange(ev) {
-    this._shouldRender = ev.detail.expanded;
-  }
-
  private _expandedChanged(ev) {
    this.expanded = ev.detail.expanded;
  }
@@ -191,17 +191,11 @@ export class HaFilterBlueprints extends LitElement {
  static get styles(): CSSResultGroup {
    return [
      haStyleScrollbar,
+      filterPanelStyles,
      css`
-        :host {
-          border-bottom: 1px solid var(--divider-color);
-        }
-        :host([expanded]) {
+        ha-list {
          flex: 1;
-          height: 0;
-        }
-        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
-          --expansion-panel-content-padding: 0;
+          min-height: 0;
        }
        .header {
          display: flex;
@@ -8,9 +8,14 @@ import {
  mdiTag,
 } from "@mdi/js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
-import type { CSSResultGroup, PropertyValues } from "lit";
+import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import { createRef, ref } from "lit/directives/ref";
+import {
+  FilterPanelController,
+  filterPanelStyles,
+} from "../common/controllers/filter-panel-controller";
 import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import type { CategoryRegistryEntry } from "../data/category_registry";
@@ -47,9 +52,9 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {

  @state() private _categories: CategoryRegistryEntry[] = [];

-  @state() private _shouldRender = false;
+  private _content = createRef<HTMLElement>();

-  @query("ha-list") private _list?: HTMLElement;
+  private _panel = new FilterPanelController(this, this._content);

  protected hassSubscribeRequiredHostProps = ["scope"];

@@ -70,7 +75,6 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
      <ha-expansion-panel
        left-chevron
        .expanded=${this.expanded}
-        @expanded-will-change=${this._expandedWillChange}
        @expanded-changed=${this._expandedChanged}
      >
        <div slot="header" class="header">
@@ -85,9 +89,11 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
              : nothing
          }
        </div>
-        ${
-          this._shouldRender
-            ? html`
+      </ha-expansion-panel>
+      ${
+        this._panel.showContent
+          ? html`
+              <div class="content" ${ref(this._content)}>
                <ha-list
                  @selected=${this._categorySelected}
                  class="ha-scrollbar"
@@ -158,34 +164,17 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
                      </ha-list-item>`
                  )}
                </ha-list>
-              `
-            : nothing
-        }
-      </ha-expansion-panel>
-      ${
-        this.expanded
-          ? html`<ha-list-item
-              graphic="icon"
-              @click=${this._addCategory}
-              class="add"
-            >
-              <ha-svg-icon slot="graphic" .path=${mdiPlus}></ha-svg-icon>
-              ${this.hass.localize("ui.panel.config.category.editor.add")}
-            </ha-list-item>`
+                <ha-list-item graphic="icon" @click=${this._addCategory}>
+                  <ha-svg-icon slot="graphic" .path=${mdiPlus}></ha-svg-icon>
+                  ${this.hass.localize("ui.panel.config.category.editor.add")}
+                </ha-list-item>
+              </div>
+            `
          : nothing
      }
    `;
  }

-  protected updated(changed: PropertyValues<this>) {
-    if (changed.has("expanded") && this.expanded) {
-      setTimeout(() => {
-        if (!this.expanded) return;
-        this._list!.style.height = `${this.clientHeight - (49 + 48)}px`;
-      }, 300);
-    }
-  }
-
  private _handleAction(ev: HaDropdownSelectEvent) {
    const categoryId = (ev.currentTarget as any).categoryId;
    const action = ev.detail.item.value;
@@ -244,10 +233,6 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
    });
  }

-  private _expandedWillChange(ev) {
-    this._shouldRender = ev.detail.expanded;
-  }
-
  private _expandedChanged(ev) {
    this.expanded = ev.detail.expanded;
  }
@@ -287,19 +272,8 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
  static get styles(): CSSResultGroup {
    return [
      haStyleScrollbar,
+      filterPanelStyles,
      css`
-        :host {
-          border-bottom: 1px solid var(--divider-color);
-          position: relative;
-        }
-        :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;
@@ -325,6 +299,8 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
          color: var(--text-primary-color);
        }
        ha-list {
+          flex: 1;
+          min-height: 0;
          --mdc-list-item-meta-size: auto;
          --mdc-list-side-padding-right: var(--ha-space-1);
          --mdc-list-side-padding-left: var(--ha-space-4);
@@ -339,12 +315,6 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
        .warning {
          color: var(--error-color);
        }
-        .add {
-          position: absolute;
-          bottom: 0;
-          right: 0;
-          left: 0;
-        }
      `,
    ];
  }
@@ -0,0 +1,287 @@
+import { consume, type ContextType } from "@lit/context";
+import type { SelectedDetail } from "@material/mwc-list";
+import { mdiFilterVariantRemove } from "@mdi/js";
+import type { CSSResultGroup, PropertyValues } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { repeat } from "lit/directives/repeat";
+import memoizeOne from "memoize-one";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
+import { fireEvent, type HASSDomEvent } from "../common/dom/fire_event";
+import { computeStateDomain } from "../common/entity/compute_state_domain";
+import { stringCompare } from "../common/string/compare";
+import type { LocalizeFunc } from "../common/translations/localize";
+import { internationalizationContext, statesContext } from "../data/context";
+import { haStyleScrollbar } from "../resources/styles";
+import "./ha-check-list-item";
+import "./ha-domain-icon";
+import "./ha-expansion-panel";
+import "./ha-icon-button";
+import "./ha-list";
+import "./input/ha-input-search";
+import type { HaInputSearch } from "./input/ha-input-search";
+
+interface DeviceClassItem {
+  deviceClass: string;
+  domain: string;
+  name: string;
+}
+
+@customElement("ha-filter-device-classes")
+export class HaFilterDeviceClasses extends LitElement {
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
+  @consume({ context: statesContext, subscribe: true })
+  @state()
+  private _states!: ContextType<typeof statesContext>;
+
+  @consume({ context: internationalizationContext, subscribe: true })
+  @state()
+  private _i18n!: ContextType<typeof internationalizationContext>;
+
+  @property({ attribute: false }) public value?: string[];
+
+  @property({ type: Boolean, reflect: true }) public expanded = false;
+
+  @state() private _shouldRender = false;
+
+  @state() private _filter?: string;
+
+  @query("ha-list") private _list?: HTMLElement;
+
+  protected render() {
+    return html`
+      <ha-expansion-panel
+        left-chevron
+        .expanded=${this.expanded}
+        @expanded-will-change=${this._expandedWillChange}
+        @expanded-changed=${this._expandedChanged}
+      >
+        <div slot="header" class="header">
+          ${this._localize("ui.components.filter-device-classes.caption")}
+          ${
+            this.value?.length
+              ? html`<div class="badge">${this.value?.length}</div>
+                  <ha-icon-button
+                    .path=${mdiFilterVariantRemove}
+                    @click=${this._clearFilter}
+                  ></ha-icon-button>`
+              : nothing
+          }
+        </div>
+        ${
+          this._shouldRender
+            ? html`<ha-input-search
+                  appearance="outlined"
+                  .value=${this._filter}
+                  @input=${this._handleSearchChange}
+                >
+                </ha-input-search>
+                <ha-list
+                  class="ha-scrollbar"
+                  @selected=${this._handleItemSelected}
+                  multi
+                >
+                  ${repeat(
+                    this._deviceClasses(
+                      this._states,
+                      this._localize,
+                      this._i18n.locale.language,
+                      this._filter
+                    ),
+                    (item) => item.deviceClass,
+                    (item) =>
+                      html`<ha-check-list-item
+                        .value=${item.deviceClass}
+                        .selected=${(this.value || []).includes(item.deviceClass)}
+                        graphic="icon"
+                      >
+                        <ha-domain-icon
+                          slot="graphic"
+                          .domain=${item.domain}
+                          .deviceClass=${item.deviceClass}
+                          .state=${item.domain === "binary_sensor" ? "on" : undefined}
+                        ></ha-domain-icon>
+                        ${item.name}
+                      </ha-check-list-item>`
+                  )}
+                </ha-list> `
+            : nothing
+        }
+      </ha-expansion-panel>
+    `;
+  }
+
+  private _deviceClasses = memoizeOne(
+    (
+      states: ContextType<typeof statesContext>,
+      localize: LocalizeFunc,
+      language: string | undefined,
+      filter: string | undefined
+    ): DeviceClassItem[] =>
+      this._deviceClassItems(this._deviceClassDomains(states), localize)
+        .filter(
+          (item) =>
+            !filter ||
+            item.deviceClass.toLowerCase().includes(filter) ||
+            item.name.toLowerCase().includes(filter)
+        )
+        .sort((a, b) => stringCompare(a.name, b.name, language))
+  );
+
+  private _deviceClassDomains = memoizeOne(
+    (states: ContextType<typeof statesContext>): Map<string, string[]> => {
+      const domains = new Map<string, string[]>();
+      Object.values(states).forEach((stateObj) => {
+        const deviceClass = stateObj.attributes.device_class;
+        if (!deviceClass) {
+          return;
+        }
+        const domain = computeStateDomain(stateObj);
+        const known = domains.get(deviceClass);
+        if (!known) {
+          domains.set(deviceClass, [domain]);
+        } else if (!known.includes(domain)) {
+          known.push(domain);
+        }
+      });
+      return domains;
+    }
+  );
+
+  private _deviceClassItems = memoizeOne(
+    (
+      deviceClassDomains: Map<string, string[]>,
+      localize: LocalizeFunc
+    ): DeviceClassItem[] =>
+      [...deviceClassDomains].map(([deviceClass, domains]) => {
+        for (const domain of domains) {
+          const name = localize(
+            `component.${domain}.entity_component.${deviceClass}.name`
+          );
+          if (name) {
+            return { deviceClass, domain, name };
+          }
+        }
+        return { deviceClass, domain: domains[0], name: deviceClass };
+      }),
+    ([domainsA, localizeA], [domainsB, localizeB]) =>
+      localizeA === localizeB &&
+      domainsA.size === domainsB.size &&
+      [...domainsA].every(
+        ([deviceClass, domains]) =>
+          domainsB.get(deviceClass)?.join() === domains.join()
+      )
+  );
+
+  protected updated(changed: PropertyValues<this>) {
+    if (changed.has("expanded") && this.expanded) {
+      setTimeout(() => {
+        if (!this.expanded) return;
+        this._list!.style.height = `${this.clientHeight - 49 - 4 - 32}px`;
+        // 49px - height of a header + 1px
+        // 4px - padding-top of the search-input
+        // 32px - height of the search input
+      }, 300);
+    }
+  }
+
+  private _expandedWillChange(ev: HASSDomEvent<{ expanded: boolean }>) {
+    this._shouldRender = ev.detail.expanded;
+  }
+
+  private _expandedChanged(ev: HASSDomEvent<{ expanded: boolean }>) {
+    this.expanded = ev.detail.expanded;
+  }
+
+  private _handleItemSelected(ev: CustomEvent<SelectedDetail<Set<number>>>) {
+    const deviceClasses = this._deviceClasses(
+      this._states,
+      this._localize,
+      this._i18n.locale.language,
+      this._filter
+    );
+
+    const visible = new Set(deviceClasses.map((item) => item.deviceClass));
+    const preserved = (this.value || []).filter((d) => !visible.has(d));
+    const selected = [...ev.detail.index]
+      .map((i) => deviceClasses[i]?.deviceClass)
+      .filter((d): d is string => !!d);
+
+    this.value = [...preserved, ...selected];
+
+    fireEvent(this, "data-table-filter-changed", {
+      value: this.value.length ? this.value : undefined,
+      items: undefined,
+    });
+  }
+
+  private _clearFilter(ev: Event) {
+    ev.preventDefault();
+    this.value = undefined;
+    fireEvent(this, "data-table-filter-changed", {
+      value: undefined,
+      items: undefined,
+    });
+  }
+
+  private _handleSearchChange(ev: InputEvent) {
+    const target = ev.target as HaInputSearch;
+    this._filter = (target.value ?? "").toLowerCase();
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyleScrollbar,
+      css`
+        :host {
+          border-bottom: 1px solid var(--divider-color);
+        }
+        :host([expanded]) {
+          flex: 1;
+          height: 0;
+        }
+        ha-expansion-panel {
+          --ha-card-border-radius: var(--ha-border-radius-square);
+          --expansion-panel-content-padding: 0;
+        }
+        .header {
+          display: flex;
+          align-items: center;
+        }
+        .header ha-icon-button {
+          margin-inline-start: auto;
+          margin-inline-end: 8px;
+        }
+        .badge {
+          display: inline-block;
+          margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: initial;
+          min-width: 16px;
+          box-sizing: border-box;
+          border-radius: var(--ha-border-radius-circle);
+          font-size: var(--ha-font-size-xs);
+          font-weight: var(--ha-font-weight-normal);
+          background-color: var(--primary-color);
+          line-height: var(--ha-line-height-normal);
+          text-align: center;
+          padding: 0px 2px;
+          color: var(--text-primary-color);
+        }
+        ha-input-search {
+          display: block;
+          padding: var(--ha-space-1) var(--ha-space-2) 0;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-filter-device-classes": HaFilterDeviceClasses;
+  }
+}
@@ -3,7 +3,12 @@ import { mdiFilterVariantRemove } from "@mdi/js";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { createRef, ref } from "lit/directives/ref";
 import memoizeOne from "memoize-one";
+import {
+  FilterPanelController,
+  filterPanelStyles,
+} from "../common/controllers/filter-panel-controller";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeDeviceNameDisplay } from "../common/entity/compute_device_name";
@@ -59,13 +64,15 @@ export class HaFilterDevices extends LitElement {

  @property({ type: Boolean }) public narrow = false;

-  @state() private _shouldRender = false;
-
  @state() private _filter?: string;

  @query("ha-list-selectable-virtualized")
  private _listElement?: HaListSelectableVirtualized;

+  private _content = createRef<HTMLElement>();
+
+  private _panel = new FilterPanelController(this, this._content);
+
  public willUpdate(properties: PropertyValues<this>) {
    super.willUpdate(properties);

@@ -77,26 +84,11 @@ export class HaFilterDevices extends LitElement {
    }
  }

-  protected updated(changed: PropertyValues<this>) {
-    if (changed.has("expanded") && this.expanded) {
-      setTimeout(() => {
-        if (!this.expanded || !this._listElement) {
-          return;
-        }
-        this._listElement.style.height = `${this.clientHeight - 49 - 4 - 38}px`;
-        // 49px - height of a header + 1px
-        // 4px - padding-top of the search-input
-        // 38px - height of the search input
-      }, 300);
-    }
-  }
-
  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">
@@ -112,31 +104,33 @@ export class HaFilterDevices extends LitElement {
              : nothing
          }
        </div>
-        ${
-          this._shouldRender
-            ? html`<ha-input-search
-                  appearance="outlined"
-                  .value=${this._filter}
-                  @input=${this._handleSearchChange}
-                  @keydown=${this._handleSearchKeydown}
-                >
-                </ha-input-search>
-                <ha-list-selectable-virtualized
-                  multi
-                  .rows=${this._devices(
-                    this._devicesReg,
-                    this._filter || "",
-                    this._localize,
-                    this._states,
-                    this._i18n.locale.language
-                  )}
-                  .rowRenderer=${this._renderItem}
-                  @ha-list-item-selected=${this._handleAdded}
-                  @ha-list-item-deselected=${this._handleRemoved}
-                ></ha-list-selectable-virtualized>`
-            : nothing
-        }
      </ha-expansion-panel>
+      ${
+        this._panel.showContent
+          ? html`<div class="content" ${ref(this._content)}>
+              <ha-input-search
+                appearance="outlined"
+                .value=${this._filter}
+                @input=${this._handleSearchChange}
+                @keydown=${this._handleSearchKeydown}
+              >
+              </ha-input-search>
+              <ha-list-selectable-virtualized
+                multi
+                .rows=${this._devices(
+                  this._devicesReg,
+                  this._filter || "",
+                  this._localize,
+                  this._states,
+                  this._i18n.locale.language
+                )}
+                .rowRenderer=${this._renderItem}
+                @ha-list-item-selected=${this._handleAdded}
+                @ha-list-item-deselected=${this._handleRemoved}
+              ></ha-list-selectable-virtualized>
+            </div>`
+          : nothing
+      }
    `;
  }

@@ -177,10 +171,6 @@ export class HaFilterDevices extends LitElement {
    this.value = (this.value ?? []).filter((deviceId) => deviceId !== id);
  }

-  private _expandedWillChange(ev) {
-    this._shouldRender = ev.detail.expanded;
-  }
-
  private _expandedChanged(ev) {
    this.expanded = ev.detail.expanded;
  }
@@ -271,58 +261,43 @@ export class HaFilterDevices extends LitElement {
    this._listElement?.clearSelection();
  }

-  static styles = css`
-    :host {
-      border-bottom: 1px solid var(--divider-color);
-    }
-    :host([expanded]) {
-      flex: 1;
-      height: 0;
-      display: flex;
-      flex-direction: column;
-    }
-
-    ha-expansion-panel {
-      --ha-card-border-radius: var(--ha-border-radius-square);
-      --expansion-panel-content-padding: 0;
-    }
-    :host([expanded]) ha-expansion-panel {
-      flex: 1;
-      min-height: 0;
-    }
-    ha-list-selectable-virtualized {
-      flex: 1;
-      min-height: 0;
-    }
-    .header {
-      display: flex;
-      align-items: center;
-    }
-    .header ha-icon-button {
-      margin-inline-start: auto;
-      margin-inline-end: 8px;
-    }
-    .badge {
-      display: inline-block;
-      margin-left: 8px;
-      margin-inline-start: 8px;
-      margin-inline-end: 0;
-      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;
-    }
-  `;
+  static styles = [
+    filterPanelStyles,
+    css`
+      ha-list-selectable-virtualized {
+        flex: 1;
+        min-height: 0;
+      }
+      .header {
+        display: flex;
+        align-items: center;
+      }
+      .header ha-icon-button {
+        margin-inline-start: auto;
+        margin-inline-end: 8px;
+      }
+      .badge {
+        display: inline-block;
+        margin-left: 8px;
+        margin-inline-start: 8px;
+        margin-inline-end: 0;
+        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 {
@@ -1,11 +1,16 @@
 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 type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import { createRef, ref } from "lit/directives/ref";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
+import {
+  FilterPanelController,
+  filterPanelStyles,
+} from "../common/controllers/filter-panel-controller";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeDomain } from "../common/entity/compute_domain";
@@ -41,18 +46,17 @@ export class HaFilterDomains extends LitElement {

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

-  @state() private _shouldRender = false;
-
  @state() private _filter?: string;

-  @query("ha-list") private _list?: HTMLElement;
+  private _content = createRef<HTMLElement>();
+
+  private _panel = new FilterPanelController(this, this._content);

  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">
@@ -67,46 +71,48 @@ export class HaFilterDomains extends LitElement {
              : 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._domains(
-                      this._states,
-                      this._localize,
-                      this._i18n.locale.language,
-                      this._filter,
-                      this.value
-                    ),
-                    (i) => i,
-                    (domain) =>
-                      html`<ha-check-list-item
-                        .value=${domain}
-                        .selected=${(this.value || []).includes(domain)}
-                        graphic="icon"
-                      >
-                        <ha-domain-icon
-                          slot="graphic"
-                          .domain=${domain}
-                          brand-fallback
-                        ></ha-domain-icon>
-                        ${domainToName(this._localize, domain)}
-                      </ha-check-list-item>`
-                  )}
-                </ha-list> `
-            : nothing
-        }
      </ha-expansion-panel>
+      ${
+        this._panel.showContent
+          ? html`<div class="content" ${ref(this._content)}>
+              <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._domains(
+                    this._states,
+                    this._localize,
+                    this._i18n.locale.language,
+                    this._filter,
+                    this.value
+                  ),
+                  (i) => i,
+                  (domain) =>
+                    html`<ha-check-list-item
+                      .value=${domain}
+                      .selected=${(this.value || []).includes(domain)}
+                      graphic="icon"
+                    >
+                      <ha-domain-icon
+                        slot="graphic"
+                        .domain=${domain}
+                        brand-fallback
+                      ></ha-domain-icon>
+                      ${domainToName(this._localize, domain)}
+                    </ha-check-list-item>`
+                )}
+              </ha-list>
+            </div>`
+          : nothing
+      }
    `;
  }

@@ -139,22 +145,6 @@ export class HaFilterDomains extends LitElement {
    }
  );

-  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;
  }
@@ -199,17 +189,11 @@ export class HaFilterDomains extends LitElement {
  static get styles(): CSSResultGroup {
    return [
      haStyleScrollbar,
+      filterPanelStyles,
      css`
-        :host {
-          border-bottom: 1px solid var(--divider-color);
-        }
-        :host([expanded]) {
+        ha-list {
          flex: 1;
-          height: 0;
-        }
-        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
-          --expansion-panel-content-padding: 0;
+          min-height: 0;
        }
        .header {
          display: flex;
@@ -2,8 +2,13 @@ import { consume, type ContextType } from "@lit/context";
 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 { customElement, property, state } from "lit/decorators";
+import { createRef, ref } from "lit/directives/ref";
 import memoizeOne from "memoize-one";
+import {
+  FilterPanelController,
+  filterPanelStyles,
+} from "../common/controllers/filter-panel-controller";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
@@ -52,11 +57,11 @@ export class HaFilterEntities extends LitElement {

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

-  @state() private _shouldRender = false;
-
  @state() private _filter?: string;

-  @query("ha-list") private _list?: HTMLElement;
+  private _content = createRef<HTMLElement>();
+
+  private _panel = new FilterPanelController(this, this._content);

  public willUpdate(properties: PropertyValues<this>) {
    super.willUpdate(properties);
@@ -78,7 +83,6 @@ export class HaFilterEntities extends LitElement {
      <ha-expansion-panel
        left-chevron
        .expanded=${this.expanded}
-        @expanded-will-change=${this._expandedWillChange}
        @expanded-changed=${this._expandedChanged}
      >
        <div slot="header" class="header">
@@ -93,9 +97,11 @@ export class HaFilterEntities extends LitElement {
              : nothing
          }
        </div>
-        ${
-          this._shouldRender
-            ? html`
+      </ha-expansion-panel>
+      ${
+        this._panel.showContent
+          ? html`
+              <div class="content" ${ref(this._content)}>
                <ha-input-search
                  appearance="outlined"
                  .value=${this._filter}
@@ -118,25 +124,13 @@ export class HaFilterEntities extends LitElement {
                  >
                  </lit-virtualizer>
                </ha-list>
-              `
-            : nothing
-        }
-      </ha-expansion-panel>
+              </div>
+            `
+          : nothing
+      }
    `;
  }

-  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 _keyFunction = (entity) => entity?.entity_id;

  private _renderItem = (entity) =>
@@ -173,10 +167,6 @@ export class HaFilterEntities extends LitElement {
    listItem.selected = this.value?.includes(value);
  }

-  private _expandedWillChange(ev) {
-    this._shouldRender = ev.detail.expanded;
-  }
-
  private _expandedChanged(ev) {
    this.expanded = ev.detail.expanded;
  }
@@ -255,17 +245,11 @@ export class HaFilterEntities extends LitElement {
  static get styles(): CSSResultGroup {
    return [
      haStyleScrollbar,
+      filterPanelStyles,
      css`
-        :host {
-          border-bottom: 1px solid var(--divider-color);
-        }
-        :host([expanded]) {
+        ha-list {
          flex: 1;
-          height: 0;
-        }
-        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
-          --expansion-panel-content-padding: 0;
+          min-height: 0;
        }
        .header {
          display: flex;
@@ -4,8 +4,13 @@ import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import { createRef, ref } from "lit/directives/ref";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
+import {
+  FilterPanelController,
+  filterPanelStyles,
+} from "../common/controllers/filter-panel-controller";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeRTL } from "../common/util/compute_rtl";
@@ -64,10 +69,12 @@ export class HaFilterFloorAreas extends LitElement {

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

-  @state() private _shouldRender = false;
-
  @query("ha-list-selectable") private _list?: HaListSelectable;

+  private _content = createRef<HTMLElement>();
+
+  private _panel = new FilterPanelController(this, this._content);
+
  public willUpdate(properties: PropertyValues<this>) {
    super.willUpdate(properties);

@@ -86,7 +93,6 @@ export class HaFilterFloorAreas extends LitElement {
      <ha-expansion-panel
        left-chevron
        .expanded=${this.expanded}
-        @expanded-will-change=${this._expandedWillChange}
        @expanded-changed=${this._expandedChanged}
      >
        <div slot="header" class="header">
@@ -107,9 +113,11 @@ export class HaFilterFloorAreas extends LitElement {
              : nothing
          }
        </div>
-        ${
-          this._shouldRender
-            ? html`
+      </ha-expansion-panel>
+      ${
+        this._panel.showContent
+          ? html`
+              <div class="content" ${ref(this._content)}>
                <ha-list-selectable
                  class="ha-scrollbar"
                  multi
@@ -154,10 +162,10 @@ export class HaFilterFloorAreas extends LitElement {
                    (area) => this._renderArea(area)
                  )}
                </ha-list-selectable>
-              `
-            : nothing
-        }
-      </ha-expansion-panel>
+              </div>
+            `
+          : nothing
+      }
    `;
  }

@@ -243,19 +251,6 @@ export class HaFilterFloorAreas extends LitElement {
    };
  }

-  protected updated(changed: PropertyValues<this>) {
-    if (changed.has("expanded") && this.expanded) {
-      setTimeout(() => {
-        if (!this.expanded) return;
-        this._list!.style.height = `${this.clientHeight - 49}px`;
-      }, 300);
-    }
-  }
-
-  private _expandedWillChange(ev) {
-    this._shouldRender = ev.detail.expanded;
-  }
-
  private _expandedChanged(ev) {
    this.expanded = ev.detail.expanded;
  }
@@ -347,17 +342,11 @@ export class HaFilterFloorAreas extends LitElement {
  static get styles(): CSSResultGroup {
    return [
      haStyleScrollbar,
+      filterPanelStyles,
      css`
-        :host {
-          border-bottom: 1px solid var(--divider-color);
-        }
-        :host([expanded]) {
+        ha-list-selectable {
          flex: 1;
-          height: 0;
-        }
-        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
-          --expansion-panel-content-padding: 0;
+          min-height: 0;
        }
        .header {
          display: flex;
@@ -1,11 +1,16 @@
 import type { SelectedDetail } from "@material/mwc-list";
 import { consume, type ContextType } from "@lit/context";
 import { mdiFilterVariantRemove } from "@mdi/js";
-import type { CSSResultGroup, PropertyValues } from "lit";
+import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import { createRef, ref } from "lit/directives/ref";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
+import {
+  FilterPanelController,
+  filterPanelStyles,
+} from "../common/controllers/filter-panel-controller";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import { stringCompare } from "../common/string/compare";
@@ -44,11 +49,11 @@ export class HaFilterIntegrations extends LitElement {
      Object.values(manifests)
  );

-  @state() private _shouldRender = false;
-
  @state() private _filter?: string;

-  @query("ha-list") private _list?: HTMLElement;
+  private _content = createRef<HTMLElement>();
+
+  private _panel = new FilterPanelController(this, this._content);

  protected render() {
    const manifests = this._manifests
@@ -59,7 +64,6 @@ export class HaFilterIntegrations extends LitElement {
      <ha-expansion-panel
        left-chevron
        .expanded=${this.expanded}
-        @expanded-will-change=${this._expandedWillChange}
        @expanded-changed=${this._expandedChanged}
      >
        <div slot="header" class="header">
@@ -74,67 +78,57 @@ export class HaFilterIntegrations extends LitElement {
              : nothing
          }
        </div>
-        ${
-          manifests && this._shouldRender
-            ? html`<ha-input-search
-                  appearance="outlined"
-                  .value=${this._filter}
-                  @input=${this._handleSearchChange}
-                >
-                </ha-input-search>
-                <ha-list
-                  class="ha-scrollbar"
-                  @selected=${this._itemSelected}
-                  multi
-                >
-                  ${repeat(
-                    this._integrations(
-                      this._localize,
-                      manifests,
-                      this._filter,
-                      this.value,
-                      this._i18n.locale.language
-                    ),
-                    (i) => i.domain,
-                    (integration) =>
-                      html`<ha-check-list-item
-                        .value=${integration.domain}
-                        .selected=${(this.value || []).includes(
-                          integration.domain
-                        )}
-                        graphic="icon"
-                      >
-                        <ha-domain-icon
-                          slot="graphic"
-                          .domain=${integration.domain}
-                          brand-fallback
-                        ></ha-domain-icon>
-                        ${integration.name}
-                      </ha-check-list-item>`
-                  )}
-                </ha-list> `
-            : nothing
-        }
      </ha-expansion-panel>
+      ${
+        this._panel.showContent
+          ? html`<div class="content" ${ref(this._content)}>
+              ${
+                manifests
+                  ? html`<ha-input-search
+                        appearance="outlined"
+                        .value=${this._filter}
+                        @input=${this._handleSearchChange}
+                      >
+                      </ha-input-search>
+                      <ha-list
+                        class="ha-scrollbar"
+                        @selected=${this._itemSelected}
+                        multi
+                      >
+                        ${repeat(
+                          this._integrations(
+                            this._localize,
+                            manifests,
+                            this._filter,
+                            this.value,
+                            this._i18n.locale.language
+                          ),
+                          (i) => i.domain,
+                          (integration) =>
+                            html`<ha-check-list-item
+                              .value=${integration.domain}
+                              .selected=${(this.value || []).includes(
+                                integration.domain
+                              )}
+                              graphic="icon"
+                            >
+                              <ha-domain-icon
+                                slot="graphic"
+                                .domain=${integration.domain}
+                                brand-fallback
+                              ></ha-domain-icon>
+                              ${integration.name}
+                            </ha-check-list-item>`
+                        )}
+                      </ha-list>`
+                  : nothing
+              }
+            </div>`
+          : nothing
+      }
    `;
  }

-  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;
  }
@@ -213,17 +207,11 @@ export class HaFilterIntegrations extends LitElement {
  static get styles(): CSSResultGroup {
    return [
      haStyleScrollbar,
+      filterPanelStyles,
      css`
-        :host {
-          border-bottom: 1px solid var(--divider-color);
-        }
-        :host([expanded]) {
+        ha-list {
          flex: 1;
-          height: 0;
-        }
-        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
-          --expansion-panel-content-padding: 0;
+          min-height: 0;
        }
        .header {
          display: flex;
@@ -1,11 +1,16 @@
 import { consume, type ContextType } from "@lit/context";
 import type { SelectedDetail } from "@material/mwc-list";
 import { mdiCog, mdiFilterVariantRemove } from "@mdi/js";
-import type { CSSResultGroup, PropertyValues } from "lit";
+import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import { createRef, ref } from "lit/directives/ref";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
+import {
+  FilterPanelController,
+  filterPanelStyles,
+} from "../common/controllers/filter-panel-controller";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import { navigate } from "../common/navigate";
@@ -44,11 +49,11 @@ export class HaFilterLabels extends LitElement {
  @state()
  private _labels?: LabelRegistryEntry[];

-  @state() private _shouldRender = false;
-
  @state() private _filter?: string;

-  @query("ha-list") private _list?: HTMLElement;
+  private _content = createRef<HTMLElement>();
+
+  private _panel = new FilterPanelController(this, this._content);

  private _filteredLabels = memoizeOne(
    // `_value` used to recalculate the memoization when the selection changes
@@ -75,7 +80,6 @@ export class HaFilterLabels extends LitElement {
      <ha-expansion-panel
        left-chevron
        .expanded=${this.expanded}
-        @expanded-will-change=${this._expandedWillChange}
        @expanded-changed=${this._expandedChanged}
      >
        <div slot="header" class="header">
@@ -90,89 +94,66 @@ export class HaFilterLabels extends LitElement {
              : nothing
          }
        </div>
-        ${
-          this._shouldRender
-            ? html`<ha-input-search
-                  appearance="outlined"
-                  .value=${this._filter}
-                  @input=${this._handleSearchChange}
-                >
-                </ha-input-search>
-                <ha-list
-                  @selected=${this._labelSelected}
-                  class="ha-scrollbar"
-                  multi
-                >
-                  ${repeat(
-                    this._filteredLabels(
-                      this._labels || [],
-                      this._filter,
-                      this._i18n.locale.language,
-                      this.value
-                    ),
-                    (label) => label.label_id,
-                    (label) =>
-                      html`<ha-check-list-item
-                        .value=${label.label_id}
-                        .selected=${(this.value || []).includes(label.label_id)}
-                        hasMeta
-                      >
-                        <ha-label
-                          .color=${label.color}
-                          .description=${label.description}
-                        >
-                          ${
-                            label.icon
-                              ? html`<ha-icon
-                                  slot="icon"
-                                  .icon=${label.icon}
-                                ></ha-icon>`
-                              : nothing
-                          }
-                          ${label.name}
-                        </ha-label>
-                      </ha-check-list-item>`
-                  )}
-                </ha-list> `
-            : nothing
-        }
      </ha-expansion-panel>
      ${
-        this.expanded
-          ? html`<ha-list-item
-              graphic="icon"
-              @click=${this._manageLabels}
-              class="add"
-            >
-              <ha-svg-icon slot="graphic" .path=${mdiCog}></ha-svg-icon>
-              ${this._localize("ui.panel.config.labels.manage_labels")}
-            </ha-list-item>`
+        this._panel.showContent
+          ? html`<div class="content" ${ref(this._content)}>
+              <ha-input-search
+                appearance="outlined"
+                .value=${this._filter}
+                @input=${this._handleSearchChange}
+              >
+              </ha-input-search>
+              <ha-list
+                @selected=${this._labelSelected}
+                class="ha-scrollbar"
+                multi
+              >
+                ${repeat(
+                  this._filteredLabels(
+                    this._labels || [],
+                    this._filter,
+                    this._i18n.locale.language,
+                    this.value
+                  ),
+                  (label) => label.label_id,
+                  (label) =>
+                    html`<ha-check-list-item
+                      .value=${label.label_id}
+                      .selected=${(this.value || []).includes(label.label_id)}
+                      hasMeta
+                    >
+                      <ha-label
+                        .color=${label.color}
+                        .description=${label.description}
+                      >
+                        ${
+                          label.icon
+                            ? html`<ha-icon
+                                slot="icon"
+                                .icon=${label.icon}
+                              ></ha-icon>`
+                            : nothing
+                        }
+                        ${label.name}
+                      </ha-label>
+                    </ha-check-list-item>`
+                )}
+              </ha-list>
+              <ha-list-item graphic="icon" @click=${this._manageLabels}>
+                <ha-svg-icon slot="graphic" .path=${mdiCog}></ha-svg-icon>
+                ${this._localize("ui.panel.config.labels.manage_labels")}
+              </ha-list-item>
+            </div>`
          : nothing
      }
    `;
  }

-  protected updated(changed: PropertyValues<this>) {
-    if (changed.has("expanded") && this.expanded) {
-      setTimeout(() => {
-        if (!this.expanded) return;
-        this._list!.style.height = `${this.clientHeight - (49 + 48 + 32 + 4)}px`;
-        // 49px - height of a header + 1px
-        // 4px - padding-top of the search-input
-        // 32px - height of the search input
-        // 48px - height of ha-list-item
-      }, 300);
-    }
-  }
-
  private _manageLabels() {
    navigate("/config/labels");
  }

-  private _expandedWillChange(ev) {
-    this._shouldRender = ev.detail.expanded;
-  }
-
  private _expandedChanged(ev) {
    this.expanded = ev.detail.expanded;
  }
@@ -227,18 +208,11 @@ export class HaFilterLabels extends LitElement {
  static get styles(): CSSResultGroup {
    return [
      haStyleScrollbar,
+      filterPanelStyles,
      css`
-        :host {
-          position: relative;
-          border-bottom: 1px solid var(--divider-color);
-        }
-        :host([expanded]) {
+        ha-list {
          flex: 1;
-          height: 0;
-        }
-        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
-          --expansion-panel-content-padding: 0;
+          min-height: 0;
        }
        .header {
          display: flex;
@@ -267,12 +241,6 @@ export class HaFilterLabels extends LitElement {
        .warning {
          color: var(--error-color);
        }
-        .add {
-          position: absolute;
-          bottom: 0;
-          right: 0;
-          left: 0;
-        }
        ha-input-search {
          display: block;
          padding: var(--ha-space-1) var(--ha-space-2) 0;
@@ -0,0 +1,182 @@
+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, shows the clear button when above zero. */
+  @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" data-dialog="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}
+          .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;
+  }
+}
@@ -1,8 +1,13 @@
-import type { List, SelectedDetail } from "@material/mwc-list";
+import type { SelectedDetail } from "@material/mwc-list";
 import { mdiFilterVariantRemove } from "@mdi/js";
-import type { CSSResultGroup, PropertyValues } from "lit";
+import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
+import { createRef, ref } from "lit/directives/ref";
+import {
+  FilterPanelController,
+  filterPanelStyles,
+} from "../common/controllers/filter-panel-controller";
 import { fireEvent } from "../common/dom/fire_event";
 import { haStyleScrollbar } from "../resources/styles";
 import "./ha-check-list-item";
@@ -27,9 +32,9 @@ export class HaFilterStates extends LitElement {

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

-  @state() private _shouldRender = false;
+  private _content = createRef<HTMLElement>();

-  @query("ha-list") private _list!: List;
+  private _panel = new FilterPanelController(this, this._content);

  protected render() {
    if (!this.states) {
@@ -40,7 +45,6 @@ export class HaFilterStates extends LitElement {
      <ha-expansion-panel
        left-chevron
        .expanded=${this.expanded}
-        @expanded-will-change=${this._expandedWillChange}
        @expanded-changed=${this._expandedChanged}
      >
        <div slot="header" class="header">
@@ -55,9 +59,11 @@ export class HaFilterStates extends LitElement {
              : nothing
          }
        </div>
-        ${
-          this._shouldRender
-            ? html`
+      </ha-expansion-panel>
+      ${
+        this._panel.showContent
+          ? html`
+              <div class="content" ${ref(this._content)}>
                <ha-list
                  @selected=${this._statesSelected}
                  multi
@@ -82,36 +88,13 @@ export class HaFilterStates extends LitElement {
                      </ha-check-list-item>`
                  )}
                </ha-list>
-              `
-            : nothing
-        }
-      </ha-expansion-panel>
+              </div>
+            `
+          : nothing
+      }
    `;
  }

-  protected willUpdate(changed: PropertyValues<this>) {
-    if (changed.has("expanded") && this.expanded) {
-      this._shouldRender = true;
-    }
-  }
-
-  protected updated(changed: PropertyValues<this>) {
-    if ((changed.has("expanded") || changed.has("states")) && this.expanded) {
-      setTimeout(async () => {
-        if (!this.expanded) return;
-        const list = this._list;
-        if (!list) {
-          return;
-        }
-        list.style.height = `${this.clientHeight - 49}px`;
-      }, 300);
-    }
-  }
-
-  private _expandedWillChange(ev) {
-    this._shouldRender = ev.detail.expanded;
-  }
-
  private _expandedChanged(ev) {
    this.expanded = ev.detail.expanded;
  }
@@ -152,17 +135,11 @@ export class HaFilterStates extends LitElement {
  static get styles(): CSSResultGroup {
    return [
      haStyleScrollbar,
+      filterPanelStyles,
      css`
-        :host {
-          border-bottom: 1px solid var(--divider-color);
-        }
-        :host([expanded]) {
+        ha-list {
          flex: 1;
-          height: 0;
-        }
-        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
-          --expansion-panel-content-padding: 0;
+          min-height: 0;
        }
        .header {
          display: flex;
@@ -2,8 +2,13 @@ import type { SelectedDetail } from "@material/mwc-list";
 import { mdiFilterVariantRemove } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import { createRef, ref } from "lit/directives/ref";
 import { repeat } from "lit/directives/repeat";
+import {
+  FilterPanelController,
+  filterPanelStyles,
+} from "../common/controllers/filter-panel-controller";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import type { LocalizeFunc } from "../common/translations/localize";
 import { fireEvent } from "../common/dom/fire_event";
@@ -34,16 +39,15 @@ export class HaFilterVoiceAssistants extends LitElement {

  @state() private _voiceAssistantOptions: string[] = [];

-  @state() private _shouldRender = false;
+  private _content = createRef<HTMLElement>();

-  @query("ha-list") private _list?: HTMLElement;
+  private _panel = new FilterPanelController(this, this._content);

  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">
@@ -58,9 +62,11 @@ export class HaFilterVoiceAssistants extends LitElement {
              : nothing
          }
        </div>
-        ${
-          this._shouldRender
-            ? html`<ha-list
+      </ha-expansion-panel>
+      ${
+        this._panel.showContent
+          ? html`<div class="content" ${ref(this._content)}>
+              <ha-list
                @selected=${this._assistantsSelected}
                class="ha-scrollbar"
                multi
@@ -83,10 +89,10 @@ export class HaFilterVoiceAssistants extends LitElement {
                      ${voiceAssistants[voiceAssistantId].name}
                    </ha-check-list-item>`
                )}
-              </ha-list> `
-            : nothing
-        }
-      </ha-expansion-panel>
+              </ha-list>
+            </div>`
+          : nothing
+      }
    `;
  }

@@ -95,19 +101,6 @@ export class HaFilterVoiceAssistants extends LitElement {
    this._voiceAssistantOptions = Object.keys(voiceAssistants);
  }

-  protected updated(changed: PropertyValues<this>) {
-    if (changed.has("expanded") && this.expanded) {
-      setTimeout(() => {
-        if (!this.expanded) return;
-        this._list!.style.height = `${this.clientHeight - 49}px`;
-      }, 300);
-    }
-  }
-
-  private _expandedWillChange(ev) {
-    this._shouldRender = ev.detail.expanded;
-  }
-
  private _expandedChanged(ev) {
    this.expanded = ev.detail.expanded;
  }
@@ -148,18 +141,11 @@ export class HaFilterVoiceAssistants extends LitElement {
  static get styles(): CSSResultGroup {
    return [
      haStyleScrollbar,
+      filterPanelStyles,
      css`
-        :host {
-          position: relative;
-          border-bottom: 1px solid var(--divider-color);
-        }
-        :host([expanded]) {
+        ha-list {
          flex: 1;
-          height: 0;
-        }
-        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
-          --expansion-panel-content-padding: 0;
+          min-height: 0;
        }
        .header {
          display: flex;
@@ -43,6 +43,8 @@ const CUSTOM_ICONS: Record<string, () => Promise<string>> = {
    import("../resources/esphome-logo-svg").then((mod) => mod.mdiEsphomeLogo),
  matter: () =>
    import("../resources/matter-logo-svg").then((mod) => mod.mdiMatterLogo),
+  mqtt: () =>
+    import("../resources/mqtt-logo-svg").then((mod) => mod.mdiMqttLogo),
 };

@customElement("ha-icon")
@@ -0,0 +1,268 @@
+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.
+ */
+export const applySourceFilters = (
+  entityIds: string[],
+  filters: SourceFilters,
+  states: HomeAssistant["states"],
+  entities: HomeAssistant["entities"],
+  entitySources?: EntitySources
+): string[] => {
+  const domains = filters.domains?.length ? filters.domains : undefined;
+  const deviceClasses = filters.deviceClasses?.length
+    ? filters.deviceClasses
+    : undefined;
+  const integrations = filters.integrations?.length
+    ? filters.integrations
+    : undefined;
+
+  if (!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 =
+        entities[entityId]?.platform ?? 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`.
+ *
+ * The pages resolve every entity of a target, secondary ones included, so the
+ * target picker counts them too.
+ */
+@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 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}
+        .primaryEntitiesOnly=${false}
+        .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}
+          .expanded=${this._expandedFilter === "domains"}
+          @data-table-filter-changed=${this._domainsChanged}
+          @expanded-changed=${this._domainsExpanded}
+        ></ha-filter-domains>
+        <ha-filter-device-classes
+          .value=${this.filters.deviceClasses}
+          .expanded=${this._expandedFilter === "deviceClasses"}
+          @data-table-filter-changed=${this._deviceClassesChanged}
+          @expanded-changed=${this._deviceClassesExpanded}
+        ></ha-filter-device-classes>
+        <ha-filter-integrations
+          .value=${this.filters.integrations}
+          .expanded=${this._expandedFilter === "integrations"}
+          @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 };
+  }
+}
@@ -28,7 +28,6 @@ import {
  type DevicePickerItem,
 } from "../data/device/device_picker";
 import {
-  devicesInEffectiveArea,
  fetchDeviceCompositeSplits,
  type DeviceCompositeSplits,
 } from "../data/device/device_registry";
@@ -42,9 +41,6 @@ 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,
@@ -67,7 +63,6 @@ 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___";
@@ -86,8 +81,6 @@ 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" })
@@ -117,8 +110,6 @@ 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;
@@ -254,119 +245,9 @@ 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)
@@ -480,9 +361,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
  }

  private _renderItems() {
-    return html`
-      ${this.compact ? this._renderValueChips() : this._renderValueGroups()}
-    `;
+    return html` ${this._renderValueGroups()} `;
  }

  private _renderPicker() {
@@ -657,162 +536,6 @@ 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"]>
  ) {
@@ -852,17 +575,6 @@ 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,
@@ -1438,13 +1150,6 @@ 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);
@@ -1460,7 +1165,6 @@ 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;
@@ -24,6 +24,7 @@ export type HaListItemOptionSelectionPosition = "start" | "end";
 * @cssprop --ha-list-item-selected-background - Background color when selected (`appearance="line"`).
 *
 * @attr {boolean} selected - Whether the option is selected. Set by the parent `ha-list-selectable`.
+ * @attr {boolean} indeterminate - Draws the checkbox in an indeterminate state, for a row that stands for a partially selected set.
 * @attr {string} value - Value identifying the option.
 * @attr {("line"|"checkbox")} appearance - Visual style. "line" highlights the row; "checkbox" renders an `ha-checkbox`.
 * @attr {("start"|"end")} selection-position - Side the checkbox sits on when `appearance="checkbox"`.
@@ -32,6 +33,8 @@ export type HaListItemOptionSelectionPosition = "start" | "end";
 export class HaListItemOption extends HaListItemBase {
  @property({ type: Boolean, reflect: true }) public selected = false;

+  @property({ type: Boolean, reflect: true }) public indeterminate = false;
+
  @property({ type: String }) public value?: string;

  @property({ type: String, reflect: true })
@@ -80,6 +83,7 @@ export class HaListItemOption extends HaListItemBase {
    return html`<div part="checkbox" class="checkbox" inert>
      <ha-checkbox
        .checked=${this.selected}
+        .indeterminate=${this.indeterminate}
        .disabled=${this.disabled}
      ></ha-checkbox>
    </div>`;
@@ -10,6 +10,8 @@ export const SelectableMixin = <T extends Constructor<HaListBase>>(
  class SelectableClass extends superClass {
    @property({ type: Boolean, reflect: true }) public multi = false;

+    @property({ type: Boolean, reflect: true }) public controlled = false;
+
    protected override readonly hostRole = "listbox";

    public connectedCallback(): void {
@@ -67,15 +69,19 @@ export const SelectableMixin = <T extends Constructor<HaListBase>>(
              `ha-list-item-${el.selected ? "deselected" : "selected"}`,
              index
            );
-            el.toggleAttribute("selected");
+            if (!this.controlled) {
+              el.toggleAttribute("selected");
+            }
            return;
          }

          if (!el.selected) {
            fireEvent(this, "ha-list-item-selected", index);
-            // deselect the other optional selected item
-            this.clearSelection();
-            el.toggleAttribute("selected", true);
+            if (!this.controlled) {
+              // deselect the other optional selected item
+              this.clearSelection();
+              el.toggleAttribute("selected", true);
+            }
          }
        }
      }
@@ -20,6 +20,9 @@ import { HaListVirtualized } from "./ha-list-virtualized";
 *
 * @attr {boolean} multi - Whether multiple options can be selected at once. In
 *   single-select mode, selecting a row clears any previous selection.
+ * @attr {boolean} controlled - Only notify on click, never toggle a row's `selected` state.
+ *   Set it when the consumer derives `selected` from its own state, for example when a row stands
+ *   for a group whose click also changes its children.
 *
 * @fires ha-list-item-selected - Fires when the user selects a row.
 *   `detail` is the row's index (number).
@@ -11,6 +11,9 @@ import { SelectableMixin } from "./ha-list-selectable-mixin";
 * Toggle single vs multi selection via the `multi` attribute.
 *
 * @attr {boolean} multi - Whether multiple options can be selected at once.
+ * @attr {boolean} controlled - Only notify on click, never toggle an option's `selected` state.
+ *   Set it when the consumer derives `selected` from its own state, for example when a row stands
+ *   for a group whose click also changes its children.
 *
 * @fires ha-list-item-selected - An option was selected. `detail: number` (option index).
 * @fires ha-list-item-deselected - An option was deselected (multi mode only). `detail: number` (option index).
@@ -1,314 +0,0 @@
-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;
-  }
-}
@@ -1,6 +1,7 @@
 import type { Connection } from "home-assistant-js-websocket";
 import type { HaFormSchema } from "../components/ha-form/types";
 import type { ConfigEntry } from "./config_entries";
+import type { RepairsIssue } from "./repairs";

 export type FlowType =
  "config_flow" | "config_subentries_flow" | "options_flow" | "repair_flow";
@@ -56,26 +57,31 @@ export interface DataEntryFlowStepExternal {
  translation_domain?: string;
 }

-export interface DataEntryFlowStepCreateEntry {
+export interface DataEntryFlowStepCreateEntry<
+  TResult extends ConfigEntry | RepairsIssue = ConfigEntry,
+> {
  type: "create_entry";
  version: number;
  flow_id: string;
  next_flow?: [FlowType, string]; // [flow_type, flow_id]
  handler: string;
  title: string;
-  result?: ConfigEntry;
+  result?: TResult;
  description: string;
  description_placeholders?: Record<string, string>;
  translation_domain?: string;
 }

-export interface DataEntryFlowStepAbort {
+export interface DataEntryFlowStepAbort<
+  TResult extends ConfigEntry | RepairsIssue = ConfigEntry,
+> {
  type: "abort";
  flow_id: string;
  handler: string;
  reason: string;
  description_placeholders?: Record<string, string>;
  translation_domain?: string;
+  result?: TResult;
  next_flow?: [FlowType, string]; // [flow_type, flow_id]
 }

@@ -1,38 +1,5 @@
-import type { HassEntity } from "home-assistant-js-websocket";
 import { formatDurationDigital } from "../../common/datetime/format_duration";
 import type { FrontendLocaleData } from "../translation";
-import { computeStateDomain } from "../../common/entity/compute_state_domain";
-
-export const STATE_ATTRIBUTES = [
-  "entity_id",
-  "assumed_state",
-  "attribution",
-  "custom_ui_more_info",
-  "custom_ui_state_card",
-  "device_class",
-  "editable",
-  "emulated_hue_name",
-  "emulated_hue",
-  "entity_picture",
-  "event_types",
-  "friendly_name",
-  "haaska_hidden",
-  "haaska_name",
-  "icon",
-  "initial_state",
-  "last_reset",
-  "restored",
-  "state_class",
-  "supported_features",
-  "unit_of_measurement",
-  "available_tones",
-];
-
-export const STATE_ATTRIBUTES_DOMAIN_CLASS = {
-  sensor: {
-    enum: ["options"],
-  },
-};

 export const TEMPERATURE_ATTRIBUTES = new Set([
  "temperature",
@@ -210,15 +177,3 @@ export const STATE_CONDITION_HIDDEN_ATTRIBUTES = [
  "swing_modes",
  "token",
 ];
-
-export const computeShownAttributes = (stateObj: HassEntity) => {
-  const domain = computeStateDomain(stateObj);
-  const filtersArray = STATE_ATTRIBUTES.concat(
-    STATE_ATTRIBUTES_DOMAIN_CLASS[domain]?.[
-      stateObj.attributes?.device_class
-    ] || []
-  );
-  return Object.keys(stateObj.attributes).filter(
-    (key) => filtersArray.indexOf(key) === -1
-  );
-};
@@ -126,11 +126,18 @@ export const listDatadisks = async (
    timeout: null,
  });

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

 export type MatterPingResult = Record<string, boolean>;

+export type MatterTopologyNodeKind =
+  "matter" | "border_router" | "thread_unknown" | "wifi_ap";
+
+export type MatterTopologyStrength =
+  "strong" | "medium" | "weak" | "none" | "unknown";
+
+export interface MatterTopologyDirectionInfo {
+  strength: MatterTopologyStrength;
+  lqi?: number | null;
+  rssi?: number | null;
+}
+
+export interface MatterNetworkTopologyNode {
+  id: string;
+  kind: MatterTopologyNodeKind;
+  network_type: string;
+  node_id?: number | null;
+  ha_device_id?: string | null;
+  role?: string | null;
+  available?: boolean | null;
+  is_bridge?: boolean | null;
+  ext_address?: string | null;
+  rloc16?: number | null;
+  ext_pan_id?: string | null;
+  network_name?: string | null;
+  ssid?: string | null;
+  bssid?: string | null;
+  host_name?: string | null;
+  vendor_name?: string | null;
+  model_name?: string | null;
+  last_seen?: number | null;
+}
+
+export interface MatterNetworkTopologyConnection {
+  source: string;
+  target: string;
+  network: string;
+  strength: MatterTopologyStrength;
+  source_to_target?: MatterTopologyDirectionInfo | null;
+  target_to_source?: MatterTopologyDirectionInfo | null;
+  via_route_table?: boolean | null;
+  path_cost?: number | null;
+}
+
+export interface MatterNetworkTopology {
+  collected_at: number;
+  nodes: MatterNetworkTopologyNode[];
+  connections: MatterNetworkTopologyConnection[];
+}
+
+export const fetchMatterNetworkTopology = (
+  hass: HomeAssistant,
+  refresh = false
+): Promise<MatterNetworkTopology> =>
+  hass.callWS({
+    type: "matter/network_topology",
+    refresh,
+  });
+
+export const subscribeMatterNetworkTopology = (
+  hass: HomeAssistant,
+  callback: (topology: MatterNetworkTopology) => void
+): Promise<UnsubscribeFunc> =>
+  hass.connection.subscribeMessage<MatterNetworkTopology>(callback, {
+    type: "matter/subscribe_network_topology",
+  });
+
 export interface MatterCommissioningParameters {
  setup_pin_code: number;
  setup_manual_code: string;
@@ -1135,6 +1135,10 @@ export const resolveEntityIDs = (
    expanded.areas.forEach((id) => targetAreas.add(id));
  });

+  // Devices only reached through an area do not pull in entities that are
+  // explicitly assigned to another area, matching core.
+  const devicesNotViaArea = new Set(targetDevices);
+
  targetAreas.forEach((areaId) => {
    const expanded = expandAreaTarget(
      hass,
@@ -1153,6 +1157,7 @@ export const resolveEntityIDs = (
  Object.values(devices).forEach((device) => {
    if (device.parent_device_id && directDevices.has(device.parent_device_id)) {
      targetDevices.add(device.id);
+      devicesNotViaArea.add(device.id);
    }
  });

@@ -1163,7 +1168,11 @@ export const resolveEntityIDs = (
      entities,
      targetSelector
    );
-    expanded.entities.forEach((id) => targetEntities.add(id));
+    expanded.entities.forEach((id) => {
+      if (devicesNotViaArea.has(deviceId) || !entities[id]?.area_id) {
+        targetEntities.add(id);
+      }
+    });
  });

  return Array.from(targetEntities);
@@ -184,6 +184,7 @@ export const checkForEntityUpdates = async (
  }

  showToast(element, {
+    id: "check-updates",
    message: hass.localize("ui.panel.config.updates.checking_updates"),
  });

@@ -194,6 +195,7 @@ export const checkForEntityUpdates = async (
      if (computeDomain(event.data.entity_id) === "update") {
        updated++;
        showToast(element, {
+          id: "check-updates",
          message: hass.localize("ui.panel.config.updates.updates_refreshed", {
            count: updated,
          }),
@@ -216,6 +218,7 @@ export const checkForEntityUpdates = async (

  if (updated === 0) {
    showToast(element, {
+      id: "check-updates",
      message: hass.localize("ui.panel.config.updates.no_new_updates"),
    });
  }
@@ -526,16 +526,6 @@ export const fetchZwaveNetworkStatus = (
  });
 };

-/** Node IDs of the nodes each node can reach directly, keyed by node ID. */
-export const fetchZwaveNetworkNeighbors = (
-  hass: HomeAssistant,
-  entry_id: string
-): Promise<Record<number, number[]>> =>
-  hass.callWS({
-    type: "zwave_js/network_neighbors",
-    entry_id,
-  });
-
 export const fetchZwaveDataCollectionStatus = (
  hass: HomeAssistant,
  entry_id: string
@@ -12,12 +12,14 @@ import "../../components/ha-button";
 import "../../components/ha-dialog";
 import "../../components/ha-dialog-footer";
 import "../../components/ha-icon-button";
+import type { ConfigEntry } from "../../data/config_entries";
 import type { DataEntryFlowStep } from "../../data/data_entry_flow";
 import {
  subscribeDataEntryFlowProgress,
  subscribeDataEntryFlowProgressed,
 } from "../../data/data_entry_flow";
 import type { DeviceRegistryEntry } from "../../data/device/device_registry";
+import type { RepairsIssue } from "../../data/repairs";
 import { DirtyStateProviderMixin } from "../../mixins/dirty-state-provider-mixin";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
@@ -30,6 +32,7 @@ import type {
 } from "./show-dialog-data-entry-flow";
 import { showOptionsFlowDialog } from "./show-dialog-options-flow";
 import { showSubConfigFlowDialog } from "./show-dialog-sub-config-flow";
+import { showRepairsFlowDialog } from "../repairs-flow/show-dialog-repair-flow";
 import "./step-flow-abort";
 import "./step-flow-create-entry";
 import "./step-flow-external";
@@ -218,7 +221,9 @@ class DataEntryFlowDialog extends DirtyStateProviderMixin<
      this._params.dialogClosedCallback({
        flowFinished,
        entryId:
-          "result" in this._step ? this._step.result?.entry_id : undefined,
+          "result" in this._step
+            ? (this._step.result as ConfigEntry)?.entry_id
+            : undefined,
      });
    }

@@ -279,7 +284,7 @@ class DataEntryFlowDialog extends DirtyStateProviderMixin<
        const devicesLength = this._devices(
          this._params.flowConfig.showDevices,
          Object.values(this.hass.devices),
-          this._step.result?.entry_id,
+          (this._step.result as ConfigEntry)?.entry_id,
          this._params.carryOverDevices
        ).length;
        return this.hass.localize(
@@ -485,7 +490,8 @@ class DataEntryFlowDialog extends DirtyStateProviderMixin<
                                      .devices=${this._devices(
                                        this._params.flowConfig.showDevices,
                                        Object.values(this.hass.devices),
-                                        this._step.result?.entry_id,
+                                        (this._step.result as ConfigEntry)
+                                          ?.entry_id,
                                        this._params.carryOverDevices
                                      )}
                                    ></step-flow-create-entry>
@@ -575,7 +581,7 @@ class DataEntryFlowDialog extends DirtyStateProviderMixin<
        const devices = this._devices(
          this._params!.flowConfig.showDevices,
          Object.values(this.hass.devices),
-          this._step.result?.entry_id,
+          (this._step.result as ConfigEntry)?.entry_id,
          this._params!.carryOverDevices
        );

@@ -681,21 +687,23 @@ class DataEntryFlowDialog extends DirtyStateProviderMixin<
          dialogClosedCallback: this._params!.dialogClosedCallback,
        });
      } else if (_step.next_flow[0] === "options_flow") {
-        if (_step.type === "create_entry") {
-          showOptionsFlowDialog(this, _step.result!, {
-            continueFlowId: _step.next_flow[1],
-            navigateToResult: this._params!.navigateToResult,
-            dialogClosedCallback: this._params!.dialogClosedCallback,
-          });
-        }
+        showOptionsFlowDialog(this, _step.result!, {
+          continueFlowId: _step.next_flow[1],
+          navigateToResult: this._params!.navigateToResult,
+          dialogClosedCallback: this._params!.dialogClosedCallback,
+        });
      } else if (_step.next_flow[0] === "config_subentries_flow") {
-        if (_step.type === "create_entry") {
-          showSubConfigFlowDialog(this, _step.result!, "", {
-            continueFlowId: _step.next_flow[1],
-            navigateToResult: this._params!.navigateToResult,
-            dialogClosedCallback: this._params!.dialogClosedCallback,
-          });
-        }
+        showSubConfigFlowDialog(this, _step.result!, "", {
+          continueFlowId: _step.next_flow[1],
+          navigateToResult: this._params!.navigateToResult,
+          dialogClosedCallback: this._params!.dialogClosedCallback,
+        });
+      } else if (_step.next_flow[0] === "repair_flow") {
+        showRepairsFlowDialog(this, _step.result as unknown as RepairsIssue, {
+          continueFlowId: _step.next_flow[1],
+          navigateToResult: this._params!.navigateToResult,
+          dialogClosedCallback: this._params!.dialogClosedCallback,
+        });
      } else {
        this.closeDialog();
        showAlertDialog(this, {
@@ -15,6 +15,7 @@ import type { HaInput } from "../../components/input/ha-input";
 import { assistSatelliteSupportsSetupFlow } from "../../data/assist_satellite";
 import { getConfigEntries } from "../../data/config_entries";
 import type { DataEntryFlowStepCreateEntry } from "../../data/data_entry_flow";
+import type { ConfigEntry } from "../../data/config_entries";
 import type { DeviceRegistryEntry } from "../../data/device/device_registry";
 import { updateDeviceRegistryEntry } from "../../data/device/device_registry";
 import {
@@ -40,7 +41,8 @@ class StepFlowCreateEntry extends LitElement {

  @property({ attribute: false }) public hass!: HomeAssistant;

-  @property({ attribute: false }) public step!: DataEntryFlowStepCreateEntry;
+  @property({ attribute: false })
+  public step!: DataEntryFlowStepCreateEntry<ConfigEntry>;

  @property({ attribute: false }) public devices!: DeviceRegistryEntry[];

@@ -79,7 +81,7 @@ class StepFlowCreateEntry extends LitElement {
    if (
      this.devices.length !== 1 ||
      this.devices[0].primary_config_entry !== this.step.result?.entry_id ||
-      this.step.result.domain === "voip"
+      this.step.result?.domain === "voip"
    ) {
      return;
    }
@@ -34,12 +34,4 @@ export const moreInfoControlStyle = css`
  .buttons > * {
    margin: var(--ha-space-2);
  }
-
-  ha-attributes {
-    display: block;
-    width: 100%;
-  }
-  ha-more-info-control-select-container + ha-attributes:not([empty]) {
-    margin-top: var(--ha-space-4);
-  }
 `;
@@ -5,7 +5,6 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { computeAreaName } from "../../common/entity/compute_area_name";
-import { computeAttributeNameDisplay } from "../../common/entity/compute_attribute_display";
 import { computeDeviceNameDisplay } from "../../common/entity/compute_device_name";
 import { computeFloorName } from "../../common/entity/compute_floor_name";
 import { getEntityContext } from "../../common/entity/context/get_entity_context";
@@ -15,7 +14,6 @@ import "../../components/ha-attribute-value";
 import "../../components/item/ha-list-item-value";
 import "../../components/list/ha-grouped-list";
 import type { LocalizeKeys } from "../../common/translations/localize";
-import { computeShownAttributes } from "../../data/entity/entity_attributes";
 import { labelsContext } from "../../data/context";
 import type { ExtEntityRegistryEntry } from "../../data/entity/entity_registry";
 import type { LabelRegistryEntry } from "../../data/label/label_registry";
@@ -26,6 +24,7 @@ import type { FeatureEnum } from "../../common/entity/get_domain_features";
 import { getFeatures } from "../../common/entity/get_domain_features";
 import { supportsFeature } from "../../common/entity/supports-feature";
 import { titleCase } from "../../common/string/title-case";
+import { stringCompare } from "../../common/string/compare";

 interface DetailsViewParams {
  entityId: string;
@@ -215,7 +214,7 @@ class HaMoreInfoDetails extends LitElement {
      stateObj: HassEntity
    ): {
      stateEntries: DetailEntry[];
-      attributes: string[];
+      attributes: { name: string; label: string }[];
      yamlData: {
        state: {
          translated: string;
@@ -228,11 +227,14 @@ class HaMoreInfoDetails extends LitElement {
    } => {
      const translatedState = this.hass.formatEntityState(stateObj);

-      const detailsAttributes = computeShownAttributes(stateObj);
-      const detailsAttributeSet = new Set(detailsAttributes);
-      const builtInAttributes = Object.keys(stateObj.attributes).filter(
-        (attribute) => !detailsAttributeSet.has(attribute)
-      );
+      const attributes = Object.keys(stateObj.attributes)
+        .map((a) => ({
+          name: a,
+          label: this.hass.formatEntityAttributeName(stateObj, a),
+        }))
+        .sort((a, b) =>
+          stringCompare(a.label, b.label, this.hass.locale.language)
+        );

      return {
        stateEntries: [
@@ -253,7 +255,7 @@ class HaMoreInfoDetails extends LitElement {
            value: this._formatTimestamp(stateObj.last_updated),
          },
        ],
-        attributes: [...detailsAttributes, ...builtInAttributes],
+        attributes,
        yamlData: {
          state: {
            translated: translatedState,
@@ -289,7 +291,7 @@ class HaMoreInfoDetails extends LitElement {
    );
  }

-  private _renderAttributes(attributes: string[]) {
+  private _renderAttributes(attributes: { name: string; label: string }[]) {
    if (attributes.length === 0) {
      return html`<div class="empty">
        ${this.hass.localize("ui.common.none")}
@@ -304,20 +306,13 @@ class HaMoreInfoDetails extends LitElement {

    return attributes.map(
      (attribute) => html`
-        <ha-list-item-value
-          .label=${computeAttributeNameDisplay(
-            this.hass.localize,
-            this._stateObj!,
-            this.hass.entities,
-            attribute
-          )}
-        >
+        <ha-list-item-value .label=${attribute.label}>
          ${
-            attribute === "supported_features" && featureEnum
+            attribute.name === "supported_features" && featureEnum
              ? this._renderFeatures(featureEnum, this._stateObj!)
              : html`
                  <ha-attribute-value
-                    .attribute=${attribute}
+                    .attribute=${attribute.name}
                    .stateObj=${this._stateObj}
                  ></ha-attribute-value>
                `
@@ -1,8 +1,8 @@
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import type { HomeAssistant } from "../../../types";
-import { domainToName } from "../../../data/integration";
-import type { RepairsIssue } from "../../../data/repairs";
+import type { HomeAssistant } from "../../types";
+import { domainToName } from "../../data/integration";
+import type { RepairsIssue } from "../../data/repairs";

@customElement("dialog-repairs-issue-subtitle")
 class DialogRepairsIssueSubtitle extends LitElement {
@@ -1,18 +1,19 @@
 import { html, nothing } from "lit";
-import type { DataEntryFlowStep } from "../../../data/data_entry_flow";
-import { domainToName } from "../../../data/integration";
-import type { RepairsIssue } from "../../../data/repairs";
+import type { DataEntryFlowStep } from "../../data/data_entry_flow";
+import { domainToName } from "../../data/integration";
+import type { RepairsIssue } from "../../data/repairs";
 import {
  createRepairsFlow,
  deleteRepairsFlow,
  fetchRepairsFlow,
  handleRepairsFlowStep,
-} from "../../../data/repairs";
+} from "../../data/repairs";
+import type { DataEntryFlowDialogParams } from "../config-flow/show-dialog-data-entry-flow";
 import {
  loadDataEntryFlowDialog,
  showFlowDialog,
-} from "../../../dialogs/config-flow/show-dialog-data-entry-flow";
-import type { HomeAssistant } from "../../../types";
+} from "../config-flow/show-dialog-data-entry-flow";
+import type { HomeAssistant } from "../../types";
 import "./dialog-repairs-issue-subtitle";

 const mergePlaceholders = (issue: RepairsIssue, step: DataEntryFlowStep) =>
@@ -36,14 +37,14 @@ export const loadRepairFlowDialog = loadDataEntryFlowDialog;
 export const showRepairsFlowDialog = (
  element: HTMLElement,
  issue: RepairsIssue,
-  dialogClosedCallback?: (params: { flowFinished: boolean }) => void
+  dialogParams?: Omit<DataEntryFlowDialogParams, "flowConfig">
 ): void =>
  showFlowDialog(
    element,
    {
      startFlowHandler: issue.domain,
      domain: issue.domain,
-      dialogClosedCallback,
+      ...dialogParams,
    },
    {
      flowType: "repair_flow",
@@ -28,8 +28,8 @@ import type {
  SortingDirection,
 } from "../components/data-table/ha-data-table";
 import { showDataTableSettingsDialog } from "../components/data-table/show-dialog-data-table-settings";
+import "../components/ha-adaptive-dialog";
 import "../components/ha-button";
-import "../components/ha-dialog";
 import "../components/ha-dialog-footer";
 import "../components/ha-dropdown";
 import type { HaDropdownSelectEvent } from "../components/ha-dropdown";
@@ -566,16 +566,17 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
      </hass-tabs-subpage>
      ${
        this.showFilters && !showPane
-          ? html`<ha-dialog
-              .open=${true}
+          ? html`<ha-adaptive-dialog
+              open
+              flexcontent
              width="full"
              header-title=${localize("ui.components.subpage-data-table.filters")}
              @closed=${this._closeFilters}
            >
              <ha-icon-button
                slot="headerNavigationIcon"
+                data-dialog="close"
                .path=${mdiClose}
-                @click=${this._closeFilters}
                .label=${localize(
                  "ui.components.subpage-data-table.close_filter"
                )}
@@ -596,13 +597,13 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
                <slot name="filter-pane"></slot>
              </div>
              <ha-dialog-footer slot="footer">
-                <ha-button slot="primaryAction" @click=${this._closeFilters}>
+                <ha-button slot="primaryAction" data-dialog="close">
                  ${localize("ui.components.subpage-data-table.show_results", {
                    number: this.data.length,
                  })}
                </ha-button>
              </ha-dialog-footer>
-            </ha-dialog>`
+            </ha-adaptive-dialog>`
          : nothing
      }
    `;
@@ -934,20 +935,19 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
      --md-assist-chip-trailing-space: 8px;
    }

-    ha-dialog {
+    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));
+      --ha-dialog-min-height: calc(var(--safe-height) - var(--ha-space-20));
    }

    .filter-dialog-content {
-      height: calc(
-        100vh -
-          70px - var(--header-height, 0px) - var(
-            --safe-area-inset-top,
-            0px
-          ) - var(--safe-area-inset-bottom, 0px)
-      );
      display: flex;
      flex-direction: column;
+      flex: 1;
+      min-height: 0;
+      overflow-y: auto;
    }

    ha-dropdown ha-assist-chip {
@@ -545,7 +545,7 @@ class SupervisorAppInfo extends MobileAwareMixin(LitElement) {
              ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
              : nothing
          }
-          ${this._currentAddon.description}.<br />
+          <div class="description-text">${this._currentAddon.description}</div>
          ${this.i18n.localize(
            "ui.panel.config.apps.dashboard.visit_app_page",
            {
@@ -1658,6 +1658,15 @@ class SupervisorAppInfo extends MobileAwareMixin(LitElement) {
          color: var(--primary-color);
        }

+        .description:dir(rtl) > .description-text {
+          text-align: right;
+          direction: ltr;
+        }
+
+        .long-description {
+          direction: ltr;
+        }
+
        img.logo {
          max-width: 100%;
          max-height: 40px;
@@ -124,7 +124,7 @@ class HaBackupConfigData extends LitElement {

  private async _fetchStorageInfo() {
    try {
-      this._storageInfo = await fetchHostDisksUsage(this.hass);
+      this._storageInfo = await fetchHostDisksUsage(this.hass, "default", 3);
    } catch (_err: any) {
      this._storageInfo = null;
    }
@@ -33,23 +33,31 @@ interface ProgressSegment {

 const HA_STAGES: CreateBackupStage[] = ["home_assistant"];

-const ADDON_STAGES: CreateBackupStage[] = [
-  "addons",
-  "apps",
+// Quick metadata writes emitted while the backup is initialized, before the
+// Home Assistant stage (docker_config only by older Supervisors)
+const SETUP_STAGES: CreateBackupStage[] = [
  "addon_repositories",
  "app_repositories",
  "docker_config",
+];
+
+const ADDON_STAGES: CreateBackupStage[] = ["addons", "apps"];
+
+const MEDIA_STAGES: CreateBackupStage[] = ["folders", "finishing_file"];
+
+// Emitted after the backup file is finished, when the backend waits for
+// cold-backup add-ons to come back up
+const AWAIT_RESTART_STAGES: CreateBackupStage[] = [
  "await_addon_restarts",
  "await_app_restarts",
 ];

-const MEDIA_STAGES: CreateBackupStage[] = ["folders", "finishing_file"];
-
-// Ordered groups matching actual backend execution order
+// Ordered groups matching actual backend execution order. The await restart
+// stages share the last creation group to keep the progress monotonic.
 const STAGE_ORDER: CreateBackupStage[][] = [
+  [...SETUP_STAGES, ...HA_STAGES],
  ADDON_STAGES,
-  MEDIA_STAGES,
-  HA_STAGES,
+  [...MEDIA_STAGES, ...AWAIT_RESTART_STAGES],
  ["upload_to_agents"],
  ["cleaning_up"],
 ];
@@ -165,21 +173,21 @@ export class HaBackupOverviewProgress extends LitElement {
      return [
        {
          label: this.hass.localize(
-            "ui.panel.config.backup.overview.progress.segments.apps"
+            "ui.panel.config.backup.overview.progress.segments.home_assistant"
          ),
          state: this._getSegmentState(0, currentGroupIndex),
          flex: 2,
        },
        {
          label: this.hass.localize(
-            "ui.panel.config.backup.overview.progress.segments.media"
+            "ui.panel.config.backup.overview.progress.segments.apps"
          ),
          state: this._getSegmentState(1, currentGroupIndex),
          flex: 2,
        },
        {
          label: this.hass.localize(
-            "ui.panel.config.backup.overview.progress.segments.home_assistant"
+            "ui.panel.config.backup.overview.progress.segments.media"
          ),
          state: this._getSegmentState(2, currentGroupIndex),
          flex: 2,
@@ -201,18 +209,18 @@ export class HaBackupOverviewProgress extends LitElement {
      ];
    }

-    // Non-HAOS: No app segment, just Media, HA, Upload and Cleaning up
+    // Non-HAOS: No app segment, just HA, Media, Upload and Cleaning up
    return [
      {
        label: this.hass.localize(
-          "ui.panel.config.backup.overview.progress.segments.media"
+          "ui.panel.config.backup.overview.progress.segments.home_assistant"
        ),
-        state: this._getSegmentState(1, currentGroupIndex),
+        state: this._getSegmentState(0, currentGroupIndex),
        flex: 2,
      },
      {
        label: this.hass.localize(
-          "ui.panel.config.backup.overview.progress.segments.home_assistant"
+          "ui.panel.config.backup.overview.progress.segments.media"
        ),
        state: this._getSegmentState(2, currentGroupIndex),
        flex: 2,
@@ -39,6 +39,7 @@ import {
 import memoizeOne from "memoize-one";
 import type { PageNavigation } from "../../layouts/hass-tabs-subpage";
 import type { HomeAssistant } from "../../types";
+import { mdiMqttLogo } from "../../resources/mqtt-logo-svg";

 const getHasDomainCheck = (domain: string) => {
  const prefix = `${domain}.`;
@@ -142,6 +143,14 @@ export const configSections: Record<string, PageNavigation[]> = {
      translationKey: "knx",
      adminOnly: true,
    },
+    {
+      path: "/config/mqtt",
+      iconPath: mdiMqttLogo,
+      iconColor: "#660066",
+      component: "mqtt",
+      translationKey: "mqtt",
+      adminOnly: true,
+    },
    {
      path: "/config/thread",
      iconPath:
@@ -1393,7 +1393,7 @@ export class EntityRegistrySettingsEditor extends LitElement {
            invert: this._switchAsInvert,
            target_domain: this._switchAsDomain,
          }
-        )) as DataEntryFlowStepCreateEntry;
+        )) as DataEntryFlowStepCreateEntry<ConfigEntry>;
        if (configFlowResult.result?.entry_id) {
          try {
            const entry = await this._waitForEntityRegistryUpdate(
@@ -1459,7 +1459,7 @@ export class EntityRegistrySettingsEditor extends LitElement {
              invert: this._switchAsInvert,
              target_domain: this._switchAsDomain,
            }
-          )) as DataEntryFlowStepCreateEntry;
+          )) as DataEntryFlowStepCreateEntry<ConfigEntry>;
          if (configFlowResult.result?.entry_id) {
            try {
              const entry = await this._waitForEntityRegistryUpdate(
@@ -5,6 +5,7 @@ import {
  mdiPlus,
  mdiShape,
  mdiTune,
+  mdiVectorPolyline,
 } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -144,6 +145,10 @@ export class MatterConfigDashboard extends LitElement {
      <ha-card class="nav-card">
        <div class="card-header">
          ${this.hass.localize("ui.panel.config.matter.panel.my_network_title")}
+          <ha-button appearance="filled" href="/config/matter/visualization">
+            <ha-svg-icon slot="start" .path=${mdiVectorPolyline}></ha-svg-icon>
+            ${this.hass.localize("ui.panel.config.matter.panel.show_map")}
+          </ha-button>
        </div>
        <div class="card-content">
          <ha-md-list>
@@ -252,6 +257,9 @@ export class MatterConfigDashboard extends LitElement {
        }

        .nav-card .card-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
          padding-bottom: var(--ha-space-2);
        }

@@ -27,6 +27,10 @@ class MatterConfigRouter extends HassRouterPage {
        tag: "matter-options-page",
        load: () => import("./matter-options-page"),
      },
+      visualization: {
+        tag: "matter-network-visualization",
+        load: () => import("./matter-network-visualization"),
+      },
    },
  };

@@ -0,0 +1,360 @@
+import { getDeviceArea } from "../../../../../common/entity/context/get_device_context";
+import type {
+  NetworkData,
+  NetworkLink,
+  NetworkNode,
+} from "../../../../../components/chart/ha-network-graph";
+import type {
+  MatterNetworkTopology,
+  MatterNetworkTopologyNode,
+  MatterTopologyStrength,
+} from "../../../../../data/matter";
+import type { HomeAssistant } from "../../../../../types";
+
+const CATEGORY_HOME_ASSISTANT = 0;
+const CATEGORY_BORDER_ROUTER = 1;
+const CATEGORY_ROUTER = 2;
+const CATEGORY_END_DEVICE = 3;
+const CATEGORY_WIFI_AP = 4;
+const CATEGORY_OFFLINE = 5;
+const CATEGORY_UNKNOWN = 6;
+
+const ROUTER_ROLES = new Set(["leader", "router", "reed"]);
+
+// HA is not a Matter node; the frontend synthesizes it as the graph root.
+export const HOME_ASSISTANT_NODE_ID = "ha";
+const HOME_ASSISTANT_LABEL = "Home Assistant";
+
+// 0 is never returned: a falsy link value re-enables the direction arrow
+// in ha-network-graph
+export const strengthToScale = (
+  strength?: MatterTopologyStrength | null
+): number => {
+  switch (strength) {
+    case "strong":
+      return 4;
+    case "medium":
+      return 3;
+    case "weak":
+      return 2;
+    // "unknown" (no measurement, link presumed up) sits above "none"/dead so it
+    // reads as a present link, not a degraded one
+    case "unknown":
+      return 2;
+    default:
+      return 1;
+  }
+};
+
+// links are colored by transport; signal level stays on the line width.
+// Both hues clear 3:1 on the light and the dark card background -- named
+// palette colors have no dark variant, so a darker pick would vanish.
+export const networkToColorVar = (network?: string | null): string => {
+  switch (network) {
+    case "thread":
+      return "--purple-color";
+    case "wifi":
+      return "--orange-color";
+    // `network` is a plain string on the wire: "ethernet" and anything a newer
+    // server invents still draw, just neutrally
+    default:
+      return "--secondary-text-color";
+  }
+};
+
+const strengthToWidth = (strength?: MatterTopologyStrength | null): number =>
+  strength === "strong" ? 3 : strength === "medium" ? 2 : 1;
+
+export const getTopologyNodeCategory = (
+  node: MatterNetworkTopologyNode
+): number => {
+  if (node.kind === "border_router") {
+    return CATEGORY_BORDER_ROUTER;
+  }
+  if (node.kind === "wifi_ap") {
+    return CATEGORY_WIFI_AP;
+  }
+  if (node.kind === "thread_unknown") {
+    return CATEGORY_UNKNOWN;
+  }
+  if (node.available === false) {
+    return CATEGORY_OFFLINE;
+  }
+  return node.role && ROUTER_ROLES.has(node.role)
+    ? CATEGORY_ROUTER
+    : CATEGORY_END_DEVICE;
+};
+
+export const getTopologyNodeName = (
+  node: MatterNetworkTopologyNode,
+  hass: HomeAssistant
+): string => {
+  const device = node.ha_device_id
+    ? hass.devices[node.ha_device_id]
+    : undefined;
+  if (device) {
+    return device.name_by_user || device.name || node.id;
+  }
+  if (node.kind === "border_router") {
+    return (
+      // many vendors report an identical vendor/model pair on every unit
+      node.host_name ||
+      [node.vendor_name, node.model_name].filter(Boolean).join(" ") ||
+      hass.localize("ui.panel.config.matter.visualization.border_router")
+    );
+  }
+  if (node.kind === "wifi_ap") {
+    return (
+      // the SSID names the network; network_name still holds the BSSID here
+      node.ssid ||
+      node.network_name ||
+      hass.localize("ui.panel.config.matter.visualization.wifi_ap")
+    );
+  }
+  if (node.kind === "thread_unknown") {
+    return hass.localize("ui.panel.config.matter.visualization.unknown_device");
+  }
+  if (node.node_id != null) {
+    return hass.localize("ui.panel.config.matter.visualization.node", {
+      node_id: node.node_id,
+    });
+  }
+  return node.id;
+};
+
+const isHub = (category: number): boolean =>
+  category === CATEGORY_BORDER_ROUTER || category === CATEGORY_WIFI_AP;
+
+export function createMatterNetworkChartData(
+  topology: MatterNetworkTopology,
+  hass: HomeAssistant,
+  element: Element
+): NetworkData {
+  const style = getComputedStyle(element);
+
+  // a hub wears its transport's colour, the same hue as the links behind it
+  const categoryColors = [
+    style.getPropertyValue("--primary-color"),
+    style.getPropertyValue(networkToColorVar("thread")),
+    style.getPropertyValue("--cyan-color"),
+    style.getPropertyValue("--teal-color"),
+    style.getPropertyValue(networkToColorVar("wifi")),
+    style.getPropertyValue("--error-color"),
+    style.getPropertyValue("--disabled-color"),
+  ];
+  const categories = [
+    {
+      name: HOME_ASSISTANT_LABEL,
+      symbol: "roundRect",
+      itemStyle: { color: categoryColors[CATEGORY_HOME_ASSISTANT] },
+    },
+    {
+      name: hass.localize("ui.panel.config.matter.visualization.border_router"),
+      symbol: "roundRect",
+      itemStyle: { color: categoryColors[CATEGORY_BORDER_ROUTER] },
+    },
+    {
+      name: hass.localize("ui.panel.config.matter.visualization.router"),
+      symbol: "circle",
+      itemStyle: { color: categoryColors[CATEGORY_ROUTER] },
+    },
+    {
+      name: hass.localize("ui.panel.config.matter.visualization.end_device"),
+      symbol: "circle",
+      itemStyle: { color: categoryColors[CATEGORY_END_DEVICE] },
+    },
+    {
+      name: hass.localize("ui.panel.config.matter.visualization.wifi_ap"),
+      symbol: "roundRect",
+      itemStyle: { color: categoryColors[CATEGORY_WIFI_AP] },
+    },
+    {
+      name: hass.localize("ui.panel.config.matter.visualization.offline"),
+      symbol: "circle",
+      itemStyle: { color: categoryColors[CATEGORY_OFFLINE] },
+    },
+    {
+      name: hass.localize(
+        "ui.panel.config.matter.visualization.unknown_devices"
+      ),
+      symbol: "circle",
+      itemStyle: { color: categoryColors[CATEGORY_UNKNOWN] },
+    },
+  ];
+
+  const threadNetworks = new Set(
+    topology.nodes.map((node) => node.ext_pan_id).filter(Boolean)
+  );
+  const multiNetwork = threadNetworks.size > 1;
+
+  const nodes: NetworkNode[] = [
+    {
+      id: HOME_ASSISTANT_NODE_ID,
+      name: HOME_ASSISTANT_LABEL,
+      category: CATEGORY_HOME_ASSISTANT,
+      value: 4,
+      symbol: "roundRect",
+      symbolSize: 45,
+      polarDistance: 0,
+      fixed: true,
+      itemStyle: { color: categoryColors[CATEGORY_HOME_ASSISTANT] },
+    },
+  ];
+  const nodeCategories = new Map<string, number>();
+  topology.nodes.forEach((node) => {
+    const category = getTopologyNodeCategory(node);
+    nodeCategories.set(node.id, category);
+    const device = node.ha_device_id
+      ? hass.devices[node.ha_device_id]
+      : undefined;
+    const area = device
+      ? getDeviceArea(device, hass.areas, hass.devices)
+      : undefined;
+    const name = getTopologyNodeName(node, hass);
+    // an AP is named by its SSID, so its own radio address is what tells two
+    // radios of one mesh apart; everything else is named by its network
+    const networkLabel =
+      node.kind === "wifi_ap"
+        ? node.bssid || node.network_name
+        : node.ssid || node.network_name;
+    const contextParts: string[] = [];
+    if (area) {
+      contextParts.push(area.name);
+    }
+    // skip a label that just repeats the name, e.g. an AP with no SSID
+    if ((multiNetwork || !area) && networkLabel && networkLabel !== name) {
+      contextParts.push(networkLabel);
+    }
+    nodes.push({
+      id: node.id,
+      name,
+      context: contextParts.join(" • ") || undefined,
+      category,
+      value: isHub(category) ? 3 : category === CATEGORY_ROUTER ? 2 : 1,
+      symbol: isHub(category) ? "roundRect" : "circle",
+      symbolSize: isHub(category) ? 40 : category === CATEGORY_ROUTER ? 30 : 20,
+      itemStyle: {
+        color: categoryColors[category],
+        ...(node.role === "leader"
+          ? {
+              borderColor: style.getPropertyValue("--primary-color"),
+              borderWidth: 2,
+            }
+          : {}),
+      },
+      polarDistance: isHub(category)
+        ? 0.1
+        : category === CATEGORY_ROUTER
+          ? 0.4
+          : 0.8,
+    });
+  });
+
+  const links: NetworkLink[] = [];
+  topology.connections.forEach((conn) => {
+    if (!nodeCategories.has(conn.source) || !nodeCategories.has(conn.target)) {
+      return;
+    }
+    // the summary strength is the strongest observed direction, so "none" means
+    // every direction is dead -- a stale neighbour entry the dashboard also
+    // refuses to draw
+    if (conn.strength === "none") {
+      return;
+    }
+    let { source, target } = conn;
+    let forward = conn.source_to_target;
+    let reverse = conn.target_to_source;
+    if (!forward && reverse) {
+      // normalize so the arrow points in the observed direction
+      [source, target] = [target, source];
+      forward = reverse;
+      reverse = undefined;
+    }
+    const oneWay = Boolean(forward) && !reverse;
+    const asymmetric =
+      forward && reverse && forward.strength !== reverse.strength;
+    // an edge is lower confidence when an endpoint is inferred rather than
+    // commissioned, or is offline -- the dashboard dashes on the same two
+    const lowConfidence = [source, target].some((id) => {
+      const category = nodeCategories.get(id);
+      return category === CATEGORY_UNKNOWN || category === CATEGORY_OFFLINE;
+    });
+    const width = strengthToWidth(conn.strength);
+    links.push({
+      source,
+      target,
+      value: strengthToScale(forward?.strength ?? conn.strength),
+      // route-table edges without per-direction info are not directional
+      reverseValue: oneWay
+        ? undefined
+        : strengthToScale(reverse?.strength ?? conn.strength),
+      symbolSize: oneWay ? width * 2 + 3 : undefined,
+      lineStyle: {
+        width,
+        color: style.getPropertyValue(networkToColorVar(conn.network)),
+        type:
+          oneWay || asymmetric || lowConfidence
+            ? "dashed"
+            : !forward && conn.via_route_table
+              ? "dotted"
+              : "solid",
+      },
+      ignoreForceLayout: !(
+        isHub(nodeCategories.get(source)!) || isHub(nodeCategories.get(target)!)
+      ),
+    });
+  });
+
+  // Only a hub gets an edge to HA, and it is a real path. A node whose route we
+  // cannot see gets nothing: inventing an edge to HA reads as a physical link.
+  // It keeps the HA node's own color rather than a transport hue.
+  // `symbol: "none"` is what keeps the arrowhead off these edges -- ha-network-graph
+  // keys arrow suppression on `reverseValue`, not on `value` -- so it must stay.
+  const haLink = (target: string, network: string): NetworkLink => ({
+    source: HOME_ASSISTANT_NODE_ID,
+    target,
+    value: 0,
+    symbol: "none",
+    lineStyle: {
+      width: 3,
+      // the same hue as the radio links behind this hub, so one transport
+      // reads as one colour all the way back to Home Assistant
+      color: style.getPropertyValue(networkToColorVar(network)),
+      type: "solid",
+    },
+  });
+
+  // HA reaches the mesh through the border routers and Wi-Fi access points
+  topology.nodes
+    .filter((node) => node.kind === "border_router" || node.kind === "wifi_ap")
+    .forEach((node) =>
+      links.push(haLink(node.id, node.kind === "wifi_ap" ? "wifi" : "thread"))
+    );
+
+  // keep the strongest link of every node in the force layout so
+  // nodes hang near their best connection instead of floating free
+  nodes.forEach((node) => {
+    let bestLink: NetworkLink | undefined;
+    const hasActiveLink = links.some((link) => {
+      if (link.source !== node.id && link.target !== node.id) {
+        return false;
+      }
+      if (!link.ignoreForceLayout) {
+        return true;
+      }
+      const linkValue = Math.max(link.value ?? 0, link.reverseValue ?? 0);
+      if (
+        linkValue >
+        Math.max(bestLink?.value ?? -1, bestLink?.reverseValue ?? -1)
+      ) {
+        bestLink = link;
+      }
+      return false;
+    });
+    if (!hasActiveLink && bestLink) {
+      bestLink.ignoreForceLayout = false;
+    }
+  });
+
+  return { nodes, links, categories };
+}
@@ -0,0 +1,508 @@
+import { mdiRefresh } from "@mdi/js";
+import type {
+  CallbackDataParams,
+  TopLevelFormatterParams,
+} from "echarts/types/dist/shared";
+import type { UnsubscribeFunc } from "home-assistant-js-websocket";
+import type { CSSResultGroup, TemplateResult } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { relativeTime } from "../../../../../common/datetime/relative_time";
+import { getDeviceArea } from "../../../../../common/entity/context/get_device_context";
+import { navigate } from "../../../../../common/navigate";
+import type { LocalizeKeys } from "../../../../../common/translations/localize";
+import { throttle } from "../../../../../common/util/throttle";
+import "../../../../../components/chart/ha-network-graph";
+import "../../../../../components/ha-alert";
+import "../../../../../components/ha-icon-button";
+import "../../../../../components/ha-spinner";
+import "../../../../../components/input/ha-input-search";
+import type { HaInputSearch } from "../../../../../components/input/ha-input-search";
+import type {
+  MatterNetworkTopology,
+  MatterNetworkTopologyConnection,
+  MatterNetworkTopologyNode,
+  MatterTopologyDirectionInfo,
+} from "../../../../../data/matter";
+import {
+  fetchMatterNetworkTopology,
+  subscribeMatterNetworkTopology,
+} from "../../../../../data/matter";
+import "../../../../../layouts/hass-subpage";
+import type { HomeAssistant, Route } from "../../../../../types";
+import {
+  createMatterNetworkChartData,
+  getTopologyNodeName,
+  HOME_ASSISTANT_NODE_ID,
+} from "./matter-network-data";
+
+const UPDATE_THROTTLE_TIME = 5000;
+
+@customElement("matter-network-visualization")
+export class MatterNetworkVisualization extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean, reflect: true }) public narrow = false;
+
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
+
+  @property({ attribute: false }) public route!: Route;
+
+  @state() private _topology?: MatterNetworkTopology;
+
+  @state() private _notSupported = false;
+
+  @state() private _error?: string;
+
+  @state() private _refreshing = false;
+
+  @state() private _searchFilter = "";
+
+  private _unsub?: Promise<UnsubscribeFunc>;
+
+  private _throttledUpdateTopology = throttle(
+    (topology: MatterNetworkTopology) => {
+      this._topology = topology;
+    },
+    UPDATE_THROTTLE_TIME
+  );
+
+  public connectedCallback(): void {
+    super.connectedCallback();
+    if (this.hass && !this._unsub) {
+      this._subscribe();
+    }
+  }
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._throttledUpdateTopology.cancel();
+    if (this._unsub) {
+      this._unsub.then((unsub) => unsub()).catch(() => undefined);
+      this._unsub = undefined;
+    }
+  }
+
+  private _subscribe(): void {
+    this._unsub = subscribeMatterNetworkTopology(this.hass, (topology) => {
+      if (!this._topology) {
+        this._topology = topology;
+      } else {
+        this._throttledUpdateTopology(topology);
+      }
+    });
+    this._unsub.catch((err: { code?: string; message?: string }) => {
+      this._unsub = undefined;
+      if (err?.code === "not_supported" || err?.code === "unknown_command") {
+        this._notSupported = true;
+      } else {
+        this._error = err?.message || String(err);
+      }
+    });
+  }
+
+  protected render() {
+    return html`
+      <hass-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        .header=${this.hass.localize(
+          "ui.panel.config.matter.visualization.header"
+        )}
+        back-path="/config/matter/dashboard"
+      >
+        ${
+          this.narrow && this._topology?.nodes.length
+            ? html`<div slot="header">${this._renderInputSearch()}</div>`
+            : nothing
+        }
+        ${this._renderContent()}
+      </hass-subpage>
+    `;
+  }
+
+  private _renderContent() {
+    if (this._notSupported) {
+      return html`<div class="center">
+        <ha-alert alert-type="info">
+          ${this.hass.localize(
+            "ui.panel.config.matter.visualization.not_supported"
+          )}
+        </ha-alert>
+      </div>`;
+    }
+    if (this._error) {
+      return html`<div class="center">
+        <ha-alert alert-type="error">
+          ${this.hass.localize(
+            "ui.panel.config.matter.visualization.error_loading",
+            { error: this._error }
+          )}
+        </ha-alert>
+      </div>`;
+    }
+    if (!this._topology) {
+      return html`<div class="center"><ha-spinner></ha-spinner></div>`;
+    }
+    if (!this._topology.nodes.length) {
+      return html`<div class="center empty">
+        ${this.hass.localize("ui.panel.config.matter.visualization.empty")}
+      </div>`;
+    }
+    return html`
+      <ha-network-graph
+        .hass=${this.hass}
+        .searchFilter=${this._searchFilter}
+        .data=${this._formatNetworkData(
+          this._topology,
+          this.hass.devices,
+          this.hass.areas,
+          this.hass.themes,
+          this.hass.language
+        )}
+        .searchableAttributes=${this._getSearchableAttributes}
+        .tooltipFormatter=${this._tooltipFormatter}
+        @chart-click=${this._handleChartClick}
+      >
+        ${!this.narrow ? this._renderInputSearch("search") : nothing}
+        <ha-icon-button
+          slot="button"
+          class="refresh-button"
+          .disabled=${this._refreshing}
+          .path=${mdiRefresh}
+          @click=${this._refreshTopology}
+          label=${this.hass.localize(
+            "ui.panel.config.matter.visualization.refresh_topology"
+          )}
+        ></ha-icon-button>
+      </ha-network-graph>
+    `;
+  }
+
+  private _renderInputSearch(slot = "") {
+    return html`<ha-input-search
+      appearance="outlined"
+      slot=${slot}
+      .value=${this._searchFilter}
+      @input=${this._handleSearchChange}
+    ></ha-input-search>`;
+  }
+
+  private _handleSearchChange(ev: InputEvent): void {
+    this._searchFilter = (ev.target as HaInputSearch).value ?? "";
+  }
+
+  private async _refreshTopology(): Promise<void> {
+    if (this._refreshing) {
+      return;
+    }
+    this._refreshing = true;
+    try {
+      this._topology = await fetchMatterNetworkTopology(this.hass, true);
+    } catch (err: unknown) {
+      this._error = (err as { message?: string })?.message || String(err);
+    } finally {
+      this._refreshing = false;
+    }
+  }
+
+  private _formatNetworkData = memoizeOne(
+    (
+      topology: MatterNetworkTopology,
+      _devices: HomeAssistant["devices"],
+      _areas: HomeAssistant["areas"],
+      // node/link colors and labels also depend on the theme and language,
+      // so both take part in the cache key even though they are read via hass
+      _themes: HomeAssistant["themes"],
+      _language: HomeAssistant["language"]
+    ) => createMatterNetworkChartData(topology, this.hass, this)
+  );
+
+  private _getTopologyNode(id: string): MatterNetworkTopologyNode | undefined {
+    return this._topology?.nodes.find((node) => node.id === id);
+  }
+
+  private _getConnection(
+    source: string,
+    target: string
+  ): MatterNetworkTopologyConnection | undefined {
+    return this._topology?.connections.find(
+      (conn) =>
+        (conn.source === source && conn.target === target) ||
+        (conn.source === target && conn.target === source)
+    );
+  }
+
+  private _getNodeName(id: string): string {
+    const node = this._getTopologyNode(id);
+    return node ? getTopologyNodeName(node, this.hass) : id;
+  }
+
+  private _getSearchableAttributes = (nodeId: string): string[] => {
+    const node = this._getTopologyNode(nodeId);
+    if (!node) {
+      return [];
+    }
+    const attributes: string[] = [];
+    if (node.node_id != null) {
+      attributes.push(String(node.node_id));
+    }
+    if (node.network_name) {
+      attributes.push(node.network_name);
+    }
+    if (node.ext_address) {
+      attributes.push(node.ext_address);
+    }
+    if (node.vendor_name) {
+      attributes.push(node.vendor_name);
+    }
+    if (node.model_name) {
+      attributes.push(node.model_name);
+    }
+    if (node.host_name) {
+      attributes.push(node.host_name);
+    }
+    const device = node.ha_device_id
+      ? this.hass.devices[node.ha_device_id]
+      : undefined;
+    if (device?.manufacturer) {
+      attributes.push(device.manufacturer);
+    }
+    if (device?.model) {
+      attributes.push(device.model);
+    }
+    device?.connections.forEach((connection) => {
+      attributes.push(connection[1]);
+    });
+    return attributes;
+  };
+
+  private _localizeDynamic(prefix: string, value: string): string {
+    return (
+      this.hass.localize(
+        `ui.panel.config.matter.${prefix}.${value}` as LocalizeKeys
+      ) || value
+    );
+  }
+
+  private _formatDirection(direction: MatterTopologyDirectionInfo): string {
+    const strength = this._localizeDynamic(
+      "visualization.strength",
+      direction.strength
+    );
+    if (direction.lqi != null) {
+      return `${strength} (LQI ${direction.lqi})`;
+    }
+    if (direction.rssi != null) {
+      return `${strength} (RSSI ${direction.rssi} dBm)`;
+    }
+    return strength;
+  }
+
+  private _tooltipFormatter = (params: TopLevelFormatterParams) => {
+    const { dataType, data } = params as CallbackDataParams;
+    if (dataType === "edge") {
+      const { source, target } = data as { source: string; target: string };
+      const conn = this._getConnection(source, target);
+      if (!conn) {
+        return nothing;
+      }
+      const lines: TemplateResult[] = [];
+      // the link color now encodes the transport, and the graph legend can
+      // only describe nodes, so name it here
+      lines.push(
+        html`<br /><b
+            >${this.hass.localize(
+              "ui.panel.config.matter.visualization.network"
+            )}:</b
+          >
+          ${this._localizeDynamic("network_type", conn.network)}`
+      );
+      if (conn.source_to_target) {
+        lines.push(
+          html`<br />${this._getNodeName(conn.source)} →
+            ${this._getNodeName(conn.target)}:
+            ${this._formatDirection(conn.source_to_target)}`
+        );
+      }
+      if (conn.target_to_source) {
+        lines.push(
+          html`<br />${this._getNodeName(conn.target)} →
+            ${this._getNodeName(conn.source)}:
+            ${this._formatDirection(conn.target_to_source)}`
+        );
+      }
+      if (!conn.source_to_target && !conn.target_to_source) {
+        // no per-direction reading: state the overall strength the width is
+        // drawn from, so this edge class is not left unexplained
+        const details = [
+          this._localizeDynamic("visualization.strength", conn.strength),
+        ];
+        if (conn.via_route_table) {
+          details.push(
+            this.hass.localize(
+              "ui.panel.config.matter.visualization.via_route_table"
+            )
+          );
+        }
+        lines.push(html`<br />${details.join(" • ")}`);
+      }
+      return html`<b
+          >${this._getNodeName(conn.source)} ↔
+          ${this._getNodeName(conn.target)}</b
+        >${lines}`;
+    }
+    const { id } = data as { id: string };
+    if (id === HOME_ASSISTANT_NODE_ID) {
+      return html`<b>Home Assistant</b>`;
+    }
+    const node = this._getTopologyNode(id);
+    if (!node) {
+      return nothing;
+    }
+    const device = node.ha_device_id
+      ? this.hass.devices[node.ha_device_id]
+      : undefined;
+    const area = device
+      ? getDeviceArea(device, this.hass.areas, this.hass.devices)
+      : undefined;
+    const lines: TemplateResult[] = [];
+    if (node.node_id != null) {
+      lines.push(
+        html`<br /><b
+            >${this.hass.localize(
+              "ui.panel.config.matter.visualization.node_id"
+            )}:</b
+          >
+          ${node.node_id}`
+      );
+    }
+    lines.push(
+      html`<br /><b
+          >${this.hass.localize(
+            "ui.panel.config.matter.visualization.network"
+          )}:</b
+        >
+        ${this._localizeDynamic("network_type", node.network_type)}${
+          node.network_name ? html` (${node.network_name})` : nothing
+        }`
+    );
+    if (node.role) {
+      lines.push(
+        html`<br /><b
+            >${this.hass.localize(
+              "ui.panel.config.matter.visualization.role"
+            )}:</b
+          >
+          ${this._localizeDynamic("visualization.roles", node.role)}`
+      );
+    }
+    if (node.available != null) {
+      lines.push(
+        html`<br /><b
+            >${this.hass.localize(
+              "ui.panel.config.matter.visualization.status"
+            )}:</b
+          >
+          ${this.hass.localize(
+            node.available
+              ? "ui.panel.config.matter.visualization.online"
+              : "ui.panel.config.matter.visualization.offline"
+          )}`
+      );
+    }
+    if (device?.manufacturer || node.vendor_name) {
+      lines.push(
+        html`<br /><b
+            >${this.hass.localize(
+              "ui.panel.config.matter.visualization.manufacturer"
+            )}:</b
+          >
+          ${device?.manufacturer || node.vendor_name}`
+      );
+    }
+    if (device?.model || node.model_name) {
+      lines.push(
+        html`<br /><b
+            >${this.hass.localize(
+              "ui.panel.config.matter.visualization.model"
+            )}:</b
+          >
+          ${device?.model || node.model_name}`
+      );
+    }
+    if (area) {
+      lines.push(
+        html`<br /><b
+            >${this.hass.localize(
+              "ui.panel.config.matter.visualization.area"
+            )}:</b
+          >
+          ${area.name}`
+      );
+    }
+    if (node.last_seen != null) {
+      lines.push(
+        html`<br /><b
+            >${this.hass.localize(
+              "ui.panel.config.matter.visualization.last_seen"
+            )}:</b
+          >
+          ${relativeTime(new Date(node.last_seen), this.hass.locale)}`
+      );
+    }
+    return html`<b>${this._getNodeName(id)}</b>${lines}`;
+  };
+
+  private _handleChartClick(e: CustomEvent): void {
+    if (
+      e.detail.dataType === "node" &&
+      e.detail.event.target.cursor === "pointer"
+    ) {
+      const { id } = e.detail.data;
+      const node = this._getTopologyNode(id);
+      if (node?.ha_device_id) {
+        navigate(`/config/devices/device/${node.ha_device_id}`);
+      }
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      css`
+        ha-network-graph {
+          height: 100%;
+        }
+        [slot="header"] {
+          display: flex;
+          align-items: center;
+        }
+        ha-input-search {
+          flex: 1;
+        }
+        .center {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          height: 100%;
+          padding: var(--ha-space-4);
+          box-sizing: border-box;
+        }
+        ha-alert {
+          max-width: 500px;
+        }
+        .empty {
+          color: var(--secondary-text-color);
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "matter-network-visualization": MatterNetworkVisualization;
+  }
+}
@@ -1,14 +1,27 @@
-import type { CSSResultGroup, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import {
+  mdiAlertCircleOutline,
+  mdiCheck,
+  mdiDevices,
+  mdiShape,
+  mdiTune,
+} from "@mdi/js";
 import { storage } from "../../../../../common/decorators/storage";
 import "../../../../../components/ha-button";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-code-editor";
 import "../../../../../components/ha-formfield";
+import "../../../../../components/ha-icon-next";
+import "../../../../../components/ha-md-list";
+import "../../../../../components/ha-md-list-item";
+import "../../../../../components/ha-svg-icon";
 import type { HaSelectSelectEvent } from "../../../../../components/ha-select";
 import "../../../../../components/ha-switch";
 import "../../../../../components/input/ha-input";
+import type { ConfigEntry } from "../../../../../data/config_entries";
 import { getConfigEntries } from "../../../../../data/config_entries";
 import type { Action } from "../../../../../data/script";
 import { callExecuteScript } from "../../../../../data/service";
@@ -18,6 +31,10 @@ import { haStyle } from "../../../../../resources/styles";
 import type { HomeAssistant } from "../../../../../types";
 import { showToast } from "../../../../../util/toast";
 import "./mqtt-subscribe-card";
+import { brandsUrl } from "../../../../../util/brands-url";
+import { showConfigFlowDialog } from "../../../../../dialogs/config-flow/show-dialog-config-flow";
+import { fetchIntegrationManifest } from "../../../../../data/integration";
+import { mdiMqttLogo } from "../../../../../resources/mqtt-logo-svg";

 const qosLevel = ["0", "1", "2"];

@@ -59,78 +76,240 @@ export class MQTTConfigPanel extends LitElement {
  })
  private _retain = false;

-  protected render(): TemplateResult {
+  @state() private _configEntry?: ConfigEntry;
+
+  protected firstUpdated(changedProperties: PropertyValues<this>) {
+    super.firstUpdated(changedProperties);
+    if (this.hass) {
+      this._fetchConfigEntry();
+    }
+  }
+
+  private _MQTTDeviceIds = memoizeOne(
+    (
+      devices: HomeAssistant["devices"],
+      configEntryId?: string
+    ): Set<string> => {
+      if (!configEntryId) {
+        return new Set();
+      }
+      return new Set(
+        Object.values(devices)
+          .filter((device) => device.config_entries.includes(configEntryId))
+          .map((device) => device.id)
+      );
+    }
+  );
+
+  private _entityCount = memoizeOne(
+    (entities: HomeAssistant["entities"], deviceIds: Set<string>): number =>
+      Object.values(entities).filter(
+        (entity) => entity.device_id && deviceIds.has(entity.device_id)
+      ).length
+  );
+
+  protected render(): TemplateResult | typeof nothing {
+    if (!this._configEntry) {
+      return nothing;
+    }
+    const isOnline = this._configEntry.state === "loaded";
+    const deviceIds = this._MQTTDeviceIds(
+      this.hass.devices,
+      this._configEntry.entry_id
+    );
+    const entityCount = this._entityCount(this.hass.entities, deviceIds);
+
    return html`
      <hass-subpage
        .narrow=${this.narrow}
        .hass=${this.hass}
+        header="MQTT"
        back-path="/config/integrations/integration/mqtt"
+        has-fab
      >
        <div class="content">
-          <ha-card
-            .header=${this.hass.localize("ui.panel.config.mqtt.settings_title")}
-          >
-            <div class="card-actions">
-              <ha-button appearance="plain" @click=${this._openOptionFlow}
-                >${this.hass.localize(
-                  "ui.panel.config.mqtt.option_flow"
-                )}</ha-button
-              >
-            </div>
-          </ha-card>
-          <ha-card
-            .header=${this.hass.localize(
-              "ui.panel.config.mqtt.description_publish"
-            )}
-          >
-            <div class="card-content">
-              <div class="panel-dev-mqtt-fields">
-                <ha-input
-                  .label=${this.hass.localize("ui.panel.config.mqtt.topic")}
-                  .value=${this._topic}
-                  @change=${this._handleTopic}
-                ></ha-input>
-                <ha-select
-                  .label=${this.hass.localize("ui.panel.config.mqtt.qos")}
-                  .value=${this._qos}
-                  @selected=${this._handleQos}
-                  .options=${qosLevel}
-                >
-                </ha-select>
-                <ha-formfield
-                  label=${this.hass!.localize("ui.panel.config.mqtt.retain")}
-                >
-                  <ha-switch
-                    @change=${this._handleRetain}
-                    .checked=${this._retain}
-                  ></ha-switch>
-                </ha-formfield>
-              </div>
-              <p>${this.hass.localize("ui.panel.config.mqtt.payload")}</p>
-              <ha-code-editor
-                mode="jinja2"
-                autocomplete-entities
-                autocomplete-icons
-                .value=${this._payload}
-                @value-changed=${this._handlePayload}
-                dir="ltr"
-              ></ha-code-editor>
-            </div>
-            <div class="card-actions">
-              <ha-button appearance="plain" @click=${this._publish}
-                >${this.hass.localize(
-                  "ui.panel.config.mqtt.publish"
-                )}</ha-button
-              >
-            </div>
-          </ha-card>
-
-          <mqtt-subscribe-card .hass=${this.hass}></mqtt-subscribe-card>
+          <div class="container">
+            ${this._renderNetworkStatus(isOnline, deviceIds.size)}
+            ${this._renderMyNetworkCard(deviceIds.size, entityCount)}
+            ${this._renderNavigationCard()} ${this._renderPublishCard()}
+            <mqtt-subscribe-card .hass=${this.hass}></mqtt-subscribe-card>
+          </div>
        </div>
      </hass-subpage>
    `;
  }

+  private _renderNetworkStatus(isOnline: boolean, deviceCount: number) {
+    return html`
+      <ha-card class="content network-status">
+        <div class="card-content">
+          <div class="heading">
+            <div class="icon ${isOnline ? "success" : "error"}">
+              <ha-svg-icon
+                .path=${isOnline ? mdiCheck : mdiAlertCircleOutline}
+              ></ha-svg-icon>
+            </div>
+            <div class="details">
+              ${this.hass.localize(
+                `ui.panel.config.mqtt.status_${isOnline ? "online" : "offline"}`
+              )}<br />
+              <small>
+                ${this.hass.localize("ui.panel.config.mqtt.devices", {
+                  count: deviceCount,
+                })}
+              </small>
+            </div>
+            <img
+              class="logo"
+              alt="MQTT"
+              crossorigin="anonymous"
+              referrerpolicy="no-referrer"
+              src=${brandsUrl(
+                {
+                  domain: "mqtt",
+                  type: "icon",
+                  darkOptimized: this.hass.themes?.darkMode,
+                },
+                this.hass.auth.data.hassUrl
+              )}
+            />
+          </div>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  private _renderMyNetworkCard(deviceCount: number, entityCount: number) {
+    return html`
+      <ha-card class="nav-card">
+        <div class="card-header">
+          ${this.hass.localize("ui.panel.config.mqtt.my_network_title")}
+        </div>
+        <div class="card-content">
+          <ha-md-list>
+            <ha-md-list-item
+              type="link"
+              href=${`/config/devices/dashboard?historyBack=1&config_entry=${this._configEntry?.entry_id}`}
+            >
+              <ha-svg-icon slot="start" .path=${mdiDevices}></ha-svg-icon>
+              <div slot="headline">
+                ${this.hass.localize("ui.panel.config.mqtt.device_count", {
+                  count: deviceCount,
+                })}
+              </div>
+              <ha-icon-next slot="end"></ha-icon-next>
+            </ha-md-list-item>
+            <ha-md-list-item
+              type="link"
+              href=${`/config/entities/dashboard?historyBack=1&config_entry=${this._configEntry?.entry_id}`}
+            >
+              <ha-svg-icon slot="start" .path=${mdiShape}></ha-svg-icon>
+              <div slot="headline">
+                ${this.hass.localize("ui.panel.config.mqtt.entity_count", {
+                  count: entityCount,
+                })}
+              </div>
+              <ha-icon-next slot="end"></ha-icon-next>
+            </ha-md-list-item>
+          </ha-md-list>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  private _renderNavigationCard() {
+    return html`
+      <ha-card class="nav-card">
+        <div class="card-content">
+          <ha-md-list>
+            <ha-md-list-item type="link" @click=${this._openOptionFlow}>
+              <ha-svg-icon slot="start" .path=${mdiTune}></ha-svg-icon>
+              <div slot="headline">
+                ${this.hass.localize("ui.panel.config.mqtt.option_flow")}
+              </div>
+              <div slot="supporting-text">
+                ${this.hass.localize(
+                  "ui.panel.config.mqtt.option_flow_description"
+                )}
+              </div>
+              <ha-icon-next slot="end"></ha-icon-next>
+            </ha-md-list-item>
+            <ha-md-list-item type="link" @click=${this._openConfigFlow}>
+              <ha-svg-icon slot="start" .path=${mdiMqttLogo}></ha-svg-icon>
+              <div slot="headline">
+                ${this.hass.localize("ui.panel.config.mqtt.config_flow")}
+              </div>
+              <div slot="supporting-text">
+                ${this.hass.localize(
+                  "ui.panel.config.mqtt.config_flow_description"
+                )}
+              </div>
+              <ha-icon-next slot="end"></ha-icon-next>
+            </ha-md-list-item>
+          </ha-md-list>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  private _renderPublishCard() {
+    return html`
+      <ha-card
+        .header=${this.hass.localize(
+          "ui.panel.config.mqtt.description_publish"
+        )}
+      >
+        <div class="card-content">
+          <div class="panel-dev-mqtt-fields">
+            <ha-input
+              .label=${this.hass.localize("ui.panel.config.mqtt.topic")}
+              .value=${this._topic}
+              @change=${this._handleTopic}
+            ></ha-input>
+            <ha-select
+              .label=${this.hass.localize("ui.panel.config.mqtt.qos")}
+              .value=${this._qos}
+              @selected=${this._handleQos}
+              .options=${qosLevel}
+            >
+            </ha-select>
+            <ha-formfield
+              label=${this.hass!.localize("ui.panel.config.mqtt.retain")}
+            >
+              <ha-switch
+                @change=${this._handleRetain}
+                .checked=${this._retain}
+              ></ha-switch>
+            </ha-formfield>
+          </div>
+          <p>${this.hass.localize("ui.panel.config.mqtt.payload")}</p>
+          <ha-code-editor
+            mode="jinja2"
+            autocomplete-entities
+            autocomplete-icons
+            .value=${this._payload}
+            @value-changed=${this._handlePayload}
+            dir="ltr"
+          ></ha-code-editor>
+        </div>
+        <div class="card-actions">
+          <ha-button appearance="plain" @click=${this._publish}
+            >${this.hass.localize("ui.panel.config.mqtt.publish")}</ha-button
+          >
+        </div>
+      </ha-card>
+    `;
+  }
+
+  private async _fetchConfigEntry(): Promise<void> {
+    const configEntries = await getConfigEntries(this.hass, {
+      domain: "mqtt",
+    });
+    this._configEntry = configEntries.find(
+      (entry) => entry.disabled_by === null && entry.source !== "ignore"
+    );
+  }
+
  private _handleTopic(ev: InputEvent) {
    this._topic = (ev.target as HTMLInputElement).value;
  }
@@ -175,19 +354,23 @@ export class MQTTConfigPanel extends LitElement {
  }

  private async _openOptionFlow() {
-    const searchParams = new URLSearchParams(window.location.search);
-    if (!searchParams.has("config_entry")) {
+    showOptionsFlowDialog(this, this._configEntry!);
+  }
+
+  private _openConfigFlow = async () => {
+    if (!this._configEntry) {
      return;
    }
-    const configEntryId = searchParams.get("config_entry") as string;
-    const configEntries = await getConfigEntries(this.hass, {
-      domain: "mqtt",
+    showConfigFlowDialog(this, {
+      startFlowHandler: this._configEntry.domain,
+      manifest: await fetchIntegrationManifest(
+        this.hass,
+        this._configEntry.domain
+      ),
+      entryId: this._configEntry.entry_id,
+      navigateToResult: true,
    });
-    const configEntry = configEntries.find(
-      (entry) => entry.entry_id === configEntryId
-    );
-    showOptionsFlowDialog(this, configEntry!);
-  }
+  };

  static get styles(): CSSResultGroup {
    return [
@@ -199,17 +382,37 @@ export class MQTTConfigPanel extends LitElement {
          -moz-user-select: initial;
        }

-        .content {
-          padding: 24px 0 32px;
-          max-width: 600px;
-          margin: 0 auto;
-          direction: ltr;
+        .nav-card {
+          overflow: hidden;
        }
+
+        .nav-card .card-content {
+          padding: 0;
+        }
+
+        .nav-card .card-header {
+          padding-bottom: var(--ha-space-2);
+        }
+        .content {
+          margin-top: var(--ha-space-6);
+        }
+
        .panel-dev-mqtt-fields {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
        }
+        ha-card {
+          margin: 0 auto var(--ha-space-4);
+          max-width: 600px;
+        }
+        ha-md-list {
+          background: none;
+          padding: 0;
+        }
+        ha-md-list-item {
+          --md-item-overflow: visible;
+        }
        ha-select {
          width: 96px;
          margin: 0 8px;
@@ -236,6 +439,78 @@ export class MQTTConfigPanel extends LitElement {
          display: block;
          margin: 16px auto;
        }
+        .network-status div.heading {
+          display: flex;
+          align-items: center;
+          column-gap: var(--ha-space-4);
+        }
+
+        .network-status div.heading .logo {
+          height: 40px;
+          width: 40px;
+          margin-inline-start: auto;
+          object-fit: contain;
+        }
+
+        .network-status div.heading .icon {
+          position: relative;
+          border-radius: var(--ha-border-radius-2xl);
+          width: 40px;
+          height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          overflow: hidden;
+          flex-shrink: 0;
+          --icon-color: var(--primary-color);
+        }
+
+        .network-status div.heading .icon.success {
+          --icon-color: var(--success-color);
+        }
+
+        .network-status div.heading .icon.error {
+          --icon-color: var(--error-color);
+        }
+
+        .network-status div.heading .icon::before {
+          display: block;
+          content: "";
+          position: absolute;
+          inset: 0;
+          background-color: var(--icon-color);
+          opacity: 0.2;
+        }
+
+        .network-status div.heading .icon ha-svg-icon {
+          color: var(--icon-color);
+          width: 24px;
+          height: 24px;
+        }
+
+        .network-status div.heading .details {
+          font-size: var(--ha-font-size-xl);
+          font-weight: var(--ha-font-weight-normal);
+          line-height: var(--ha-line-height-condensed);
+          color: var(--primary-text-color);
+        }
+
+        .network-status small {
+          font-size: var(--ha-font-size-m);
+          font-weight: var(--ha-font-weight-normal);
+          line-height: var(--ha-line-height-condensed);
+          letter-spacing: 0.25px;
+          color: var(--secondary-text-color);
+        }
+
+        .container {
+          padding: var(--ha-space-2) var(--ha-space-4)
+            calc(var(--ha-space-16) + var(--safe-area-inset-bottom, 0px));
+        }
+
+        a[slot="fab"] {
+          text-decoration: none;
+        }
      `,
    ];
  }
@@ -1,15 +1,20 @@
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { mdiContentCopy } from "@mdi/js";
 import { formatTime } from "../../../../../common/datetime/format_time";
+import { copyToClipboard } from "../../../../../common/util/copy-clipboard";
 import "../../../../../components/ha-button";
 import "../../../../../components/ha-card";
+import "../../../../../components/ha-icon-button";
+import "../../../../../components/ha-markdown";
 import type { HaSelectSelectEvent } from "../../../../../components/ha-select";
 import "../../../../../components/ha-select";
 import "../../../../../components/input/ha-input";
 import type { MQTTMessage } from "../../../../../data/mqtt";
 import { subscribeMQTTTopic } from "../../../../../data/mqtt";
 import type { HomeAssistant } from "../../../../../types";
+import { showToast } from "../../../../../util/toast";

 import { storage } from "../../../../../common/decorators/storage";
 import "../../../../../components/ha-formfield";
@@ -68,53 +73,56 @@ class MqttSubscribeCard extends LitElement {
    return html`
      <ha-card
        header=${this.hass.localize("ui.panel.config.mqtt.description_listen")}
+        class="content_subscribe_panel"
      >
-        <form>
-          <p>
-            <ha-formfield
-              label=${this.hass!.localize(
-                "ui.panel.config.mqtt.json_formatting"
-              )}
-            >
-              <ha-switch
-                @change=${this._handleJSONFormat}
-                .checked=${this._json_format}
-              ></ha-switch>
-            </ha-formfield>
-          </p>
-          <div class="panel-dev-mqtt-subscribe-fields">
-            <ha-input
-              .label=${
-                this._subscribed
-                  ? this.hass.localize("ui.panel.config.mqtt.listening_to")
-                  : this.hass.localize("ui.panel.config.mqtt.subscribe_to")
-              }
-              .disabled=${this._subscribed !== undefined}
-              .value=${this._topic}
-              @change=${this._handleTopic}
-            ></ha-input>
-            <ha-select
-              .label=${this.hass.localize("ui.panel.config.mqtt.qos")}
-              .disabled=${this._subscribed !== undefined}
-              .value=${this._qos}
-              @selected=${this._handleQos}
-              .options=${qosLevel}
-            >
-            </ha-select>
-            <ha-button
-              appearance="plain"
-              size="s"
-              .disabled=${this._topic === ""}
-              @click=${this._handleSubmit}
-            >
-              ${
-                this._subscribed
-                  ? this.hass.localize("ui.panel.config.mqtt.stop_listening")
-                  : this.hass.localize("ui.panel.config.mqtt.start_listening")
-              }
-            </ha-button>
-          </div>
-        </form>
+        <div class="card-content">
+          <form>
+            <p>
+              <ha-formfield
+                label=${this.hass!.localize(
+                  "ui.panel.config.mqtt.json_formatting"
+                )}
+              >
+                <ha-switch
+                  @change=${this._handleJSONFormat}
+                  .checked=${this._json_format}
+                ></ha-switch>
+              </ha-formfield>
+            </p>
+            <div class="panel-dev-mqtt-subscribe-fields">
+              <ha-input
+                .label=${
+                  this._subscribed
+                    ? this.hass.localize("ui.panel.config.mqtt.listening_to")
+                    : this.hass.localize("ui.panel.config.mqtt.subscribe_to")
+                }
+                .disabled=${this._subscribed !== undefined}
+                .value=${this._topic}
+                @change=${this._handleTopic}
+              ></ha-input>
+              <ha-select
+                .label=${this.hass.localize("ui.panel.config.mqtt.qos")}
+                .disabled=${this._subscribed !== undefined}
+                .value=${this._qos}
+                @selected=${this._handleQos}
+                .options=${qosLevel}
+              >
+              </ha-select>
+              <ha-button
+                appearance="plain"
+                size="s"
+                .disabled=${this._topic === ""}
+                @click=${this._handleSubmit}
+              >
+                ${
+                  this._subscribed
+                    ? this.hass.localize("ui.panel.config.mqtt.stop_listening")
+                    : this.hass.localize("ui.panel.config.mqtt.start_listening")
+                }
+              </ha-button>
+            </div>
+          </form>
+        </div>
        <div class="events">
          ${this._messages.map(
            (msg) => html`
@@ -128,7 +136,17 @@ class MqttSubscribeCard extends LitElement {
                    this.hass!.config
                  ),
                })}
-                <pre>${msg.payload}</pre>
+                <div class="code-block">
+                  <ha-icon-button
+                    class="copy-button"
+                    .path=${mdiContentCopy}
+                    @click=${this._handleCopyClick}
+                    data-payload=${msg.payload}
+                  ></ha-icon-button>
+                  <ha-markdown
+                    .content=${`\`\`\`${this._json_format ? "json" : ""}\n${msg.payload}\n\`\`\``}
+                  ></ha-markdown>
+                </div>
                <div class="bottom">
                  QoS: ${msg.message.qos} - Retain:
                  ${Boolean(msg.message.retain)}
@@ -156,6 +174,16 @@ class MqttSubscribeCard extends LitElement {
    this._json_format = (ev.target! as any).checked;
  }

+  private async _handleCopyClick(ev: Event): Promise<void> {
+    const payload = (ev.target as HTMLElement).getAttribute("data-payload");
+    if (payload) {
+      await copyToClipboard(payload);
+      showToast(this, {
+        message: this.hass.localize("ui.common.copied_clipboard"),
+      });
+    }
+  }
+
  private async _handleSubmit(): Promise<void> {
    if (this._subscribed) {
      this._subscribed();
@@ -199,6 +227,12 @@ class MqttSubscribeCard extends LitElement {
      padding: var(--ha-space-4);
      padding-bottom: var(--ha-space-8);
    }
+    .content_subscribe_panel {
+      margin-top: var(--ha-space-6);
+      max-width: 600px;
+      margin: 0 auto;
+      direction: ltr;
+    }
    .events {
      margin: -16px 0;
      padding: 0 16px;
@@ -230,6 +264,20 @@ class MqttSubscribeCard extends LitElement {
    ha-input {
      flex: 1;
    }
+    .code-block {
+      position: relative;
+      margin-bottom: 16px;
+    }
+    .code-block ha-markdown {
+      padding-right: 40px;
+    }
+    .copy-button {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      z-index: 1;
+      color: var(--secondary-text-color);
+    }
    @media screen and (max-width: 600px) {
      ha-select {
        display: block;
@@ -1,4 +1,3 @@
-import { mdiSpiderWeb } from "@mdi/js";
 import type {
  CallbackDataParams,
  TopLevelFormatterParams,
@@ -17,7 +16,6 @@ import type {
  NetworkLink,
  NetworkNode,
 } from "../../../../../components/chart/ha-network-graph";
-import "../../../../../components/ha-icon-button";
 import "../../../../../components/input/ha-input-search";
 import type { HaInputSearch } from "../../../../../components/input/ha-input-search";
 import type { DeviceRegistryEntry } from "../../../../../data/device/device_registry";
@@ -27,7 +25,6 @@ import type {
  ZWaveJSNodeStatus,
 } from "../../../../../data/zwave_js";
 import {
-  fetchZwaveNetworkNeighbors,
  fetchZwaveNetworkStatus,
  getNodeIdFromDevice,
  NodeStatus,
@@ -36,7 +33,6 @@ import {
 import "../../../../../layouts/hass-subpage";
 import { SubscribeMixin } from "../../../../../mixins/subscribe-mixin";
 import type { HomeAssistant, Route } from "../../../../../types";
-import { showToast } from "../../../../../util/toast";

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

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

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

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

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

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

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

@@ -558,17 +460,6 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
        ha-input-search {
          flex: 1;
        }
-        /* ha-chart-base can't style re-slotted buttons, so mirror its look */
-        ha-icon-button[slot="button"] {
-          background: var(--card-background-color);
-          border-radius: var(--ha-border-radius-sm);
-          --ha-icon-button-size: 32px;
-          color: var(--primary-color);
-          border: 1px solid var(--divider-color);
-        }
-        ha-icon-button[slot="button"].inactive {
-          color: var(--state-inactive-color);
-        }
      `,
    ];
  }
@@ -13,7 +13,7 @@ import "../../../components/ha-dialog";
 import "../../../components/ha-button";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-dialog-footer";
-import "./dialog-repairs-issue-subtitle";
+import "../../../dialogs/repairs-flow/dialog-repairs-issue-subtitle";
 import "../../../components/ha-markdown";
 import type { RepairsIssue } from "../../../data/repairs";
 import { ignoreRepairsIssue } from "../../../data/repairs";
@@ -20,7 +20,7 @@ import type { HomeAssistant } from "../../../types";
 import { brandsUrl } from "../../../util/brands-url";
 import { fixStatisticsIssue } from "../tools/statistics/fix-statistics";
 import { showVacuumSegmentMappingDialog } from "../entities/dialogs/show-dialog-vacuum-segment-mapping";
-import { showRepairsFlowDialog } from "./show-dialog-repair-flow";
+import { showRepairsFlowDialog } from "../../../dialogs/repairs-flow/show-dialog-repair-flow";
 import { showRepairsIssueDialog } from "./show-repair-issue-dialog";

@customElement("ha-config-repairs")
@@ -9,10 +9,12 @@ import {
 import type { PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { navigate } from "../../../common/navigate";
 import { blankBeforePercent } from "../../../common/translations/blank_before_percent";
 import "../../../components/ha-alert";
+import "../../../components/ha-bar";
 import "../../../components/ha-button";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-next";
@@ -20,6 +22,7 @@ import "../../../components/ha-list";
 import "../../../components/ha-list-item";
 import "../../../components/ha-segmented-bar";
 import type { Segment } from "../../../components/ha-segmented-bar";
+import "../../../components/ha-spinner";
 import "../../../components/ha-svg-icon";
 import { extractApiErrorMessage } from "../../../data/hassio/common";
 import type { HassioHostInfo, HostDisksUsage } from "../../../data/hassio/host";
@@ -41,6 +44,7 @@ import {
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-subpage";
 import type { HomeAssistant, Route } from "../../../types";
+import { bytesToString } from "../../../util/bytes-to-string";
 import "../core/ha-config-analytics";
 import { showMoveDatadiskDialog } from "./show-dialog-move-datadisk";
 import { showMountViewDialog } from "./show-dialog-view-mount";
@@ -62,6 +66,13 @@ class HaConfigSectionStorage extends LitElement {

  @state() private _mountsInfo?: SupervisorMounts | null;

+  // Keyed by mount name. A missing key means the request is still in flight;
+  // null means it failed, and that row simply shows no usage.
+  @state() private _mountUsage: Record<string, HostDisksUsage | null> = {};
+
+  // Guards against a slow response from a previous reload landing in a newer one.
+  private _mountUsageGeneration = 0;
+
  protected firstUpdated(changedProps: PropertyValues<this>) {
    super.firstUpdated(changedProps);
    if (isComponentLoaded(this.hass.config, "hassio")) {
@@ -173,6 +184,7 @@ class HaConfigSectionStorage extends LitElement {
                            graphic="avatar"
                            .mount=${mount}
                            twoline
+                            multiline-secondary
                            hasMeta
                            @click=${this._changeMount}
                          >
@@ -193,13 +205,16 @@ class HaConfigSectionStorage extends LitElement {
                              ${mount.name}
                            </span>
                            <span slot="secondary">
-                              ${mount.server}${
-                                mount.port ? `:${mount.port}` : nothing
-                              }${
-                                mount.type === SupervisorMountType.NFS
-                                  ? mount.path
-                                  : `:${mount.share}`
-                              }
+                              <span class="mount-address">
+                                ${mount.server}${
+                                  mount.port ? `:${mount.port}` : ""
+                                }${
+                                  mount.type === SupervisorMountType.NFS
+                                    ? mount.path
+                                    : `:${mount.share}`
+                                }
+                              </span>
+                              ${this._renderMountUsage(mount)}
                            </span>
                            ${
                              mount.state !== SupervisorMountState.ACTIVE
@@ -289,6 +304,39 @@ class HaConfigSectionStorage extends LitElement {
    `;
  }

+  private _renderMountUsage(mount: SupervisorMount) {
+    if (mount.state !== SupervisorMountState.ACTIVE) {
+      return nothing;
+    }
+    if (!(mount.name in this._mountUsage)) {
+      return html`<div class="mount-usage">
+        <ha-spinner size="tiny"></ha-spinner>
+      </div>`;
+    }
+    const usage = this._mountUsage[mount.name];
+    // Without a total there is no ratio to show, so show nothing rather than a
+    // bar that means something else.
+    if (!usage?.total_bytes) {
+      return nothing;
+    }
+    const percent = (usage.used_bytes / usage.total_bytes) * 100;
+    return html`<div class="mount-usage">
+      <ha-bar
+        class=${classMap({
+          "target-warning": percent > 85,
+          "target-critical": percent > 95,
+        })}
+        .value=${percent}
+      ></ha-bar>
+      <span>
+        ${this.hass.localize("ui.panel.config.storage.detailed_description", {
+          used: bytesToString(usage.used_bytes),
+          total: bytesToString(usage.total_bytes),
+        })}
+      </span>
+    </div>`;
+  }
+
  private async _load() {
    this._loadStorageInfo();
    try {
@@ -305,7 +353,7 @@ class HaConfigSectionStorage extends LitElement {

  private async _loadStorageInfo() {
    try {
-      this._storageInfo = await fetchHostDisksUsage(this.hass);
+      this._storageInfo = await fetchHostDisksUsage(this.hass, "default", 3);
    } catch (err: any) {
      this._error = err.message || err;
      this._storageInfo = null;
@@ -361,6 +409,34 @@ class HaConfigSectionStorage extends LitElement {
      this._error = err.message || err;
      this._mountsInfo = null;
    }
+    this._loadMountUsage();
+  }
+
+  // Deliberately not awaited: a mount on a slow or unreachable server can take
+  // ~30 s to answer, and the rows must paint before then. Only active mounts are
+  // asked, since the endpoint has nothing to report for the others.
+  private _loadMountUsage(): void {
+    const generation = ++this._mountUsageGeneration;
+    this._mountUsage = {};
+    this._mountsInfo?.mounts
+      .filter((mount) => mount.state === SupervisorMountState.ACTIVE)
+      .forEach((mount) => {
+        fetchHostDisksUsage(this.hass, mount.name).then(
+          (usage) => this._setMountUsage(generation, mount.name, usage),
+          () => this._setMountUsage(generation, mount.name, null)
+        );
+      });
+  }
+
+  private _setMountUsage(
+    generation: number,
+    name: string,
+    usage: HostDisksUsage | null
+  ): void {
+    if (generation !== this._mountUsageGeneration) {
+      return;
+    }
+    this._mountUsage = { ...this._mountUsage, [name]: usage };
  }

  static styles = css`
@@ -409,6 +485,43 @@ class HaConfigSectionStorage extends LitElement {
      color: var(--warning-color);
    }

+    /* multiline-secondary lets the secondary slot wrap, so the address keeps its
+       own single ellipsized line and only the usage sits below it. */
+    .mount-address {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .mount-usage {
+      display: flex;
+      align-items: center;
+      gap: var(--ha-space-2);
+      margin-top: var(--ha-space-1);
+    }
+
+    .mount-usage ha-bar {
+      flex: 0 0 72px;
+      display: flex;
+      align-self: center;
+      --ha-bar-primary-color: var(--metric-bar-ok-color, var(--success-color));
+    }
+
+    .mount-usage ha-bar.target-warning {
+      --ha-bar-primary-color: var(
+        --metric-bar-warning-color,
+        var(--warning-color)
+      );
+    }
+
+    .mount-usage ha-bar.target-critical {
+      --ha-bar-primary-color: var(
+        --metric-bar-critical-color,
+        var(--error-color)
+      );
+    }
+
    .mounts-not-supported {
      padding: 0 16px 16px;
    }
@@ -1,8 +1,9 @@
 import {
+  mdiChartBoxOutline,
  mdiDotsVertical,
  mdiDownload,
-  mdiFilterRemove,
  mdiImagePlus,
+  mdiTuneVariant,
 } from "@mdi/js";
 import { differenceInHours } from "date-fns";
 import type {
@@ -10,17 +11,21 @@ import type {
  UnsubscribeFunc,
 } from "home-assistant-js-websocket/dist/types";
 import type { PropertyValues } from "lit";
-import { LitElement, css, html } from "lit";
+import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { ensureArray } from "../../common/array/ensure-array";
 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";
+import { shallowEqual } from "../../common/util/shallow-equal";
 import {
  createHistoryLogbookUrl,
  decodeHistoryLogbookQueryParams,
  historyLogbookTargetFromQueryParams,
+  historyLogbookTargetsEqual,
 } from "../../common/url/history-logbook-query-params";
 import {
  extractSearchParamsObject,
@@ -29,14 +34,25 @@ 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-picker";
+import "../../components/date-picker/ha-date-range-nav";
+import "../../components/ha-button";
 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,
@@ -52,6 +68,8 @@ 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;
@@ -78,6 +96,19 @@ class HaPanelHistory extends LitElement {

  @state() private _isLoading = false;

+  @state() private _filters: SourceFilters = {};
+
+  @storage({
+    key: "historySourceFilters",
+    state: false,
+    subscribe: false,
+  })
+  private _storedFilters?: SourceFilters;
+
+  @state() private _showSources?: boolean;
+
+  @state() private _entitySources?: EntitySources;
+
  @state() private _stateHistory?: HistoryResult;

  private _mungedStateHistory?: HistoryResult;
@@ -92,6 +123,10 @@ class HaPanelHistory extends LitElement {

  private _subscribed?: Promise<UnsubscribeFunc | undefined>;

+  private _fetchedEntityIds?: string[];
+
+  private _statsFetchId = 0;
+
  private _interval?: number;

  public constructor() {
@@ -119,7 +154,24 @@ class HaPanelHistory extends LitElement {
  }

  protected render() {
-    const entitiesSelected = this._getEntityIds().length > 0;
+    const entityIds = this._getEntityIds();
+    const targetCount = countTargets(this._targetPickerValue);
+    const filterCount = countSourceFilters(this._filters);
+    const sourceCount = targetCount + filterCount;
+    const hasTargets = targetCount > 0;
+    // A target whose entities are all filtered out fetches nothing.
+    const loading =
+      this._isLoading || (entityIds.length > 0 && !this._mungedStateHistory);
+    const hasResults =
+      !!this._mungedStateHistory &&
+      (this._mungedStateHistory.line.length > 0 ||
+        this._mungedStateHistory.timeline.length > 0);
+    const sourcesLabel = sourceCount
+      ? this.hass.localize("ui.panel.history.sources_count", {
+          count: entityIds.length,
+        })
+      : this.hass.localize("ui.panel.history.sources");
+
    return html`
      <ha-top-app-bar-fixed
        .narrow=${this.narrow}
@@ -128,13 +180,6 @@ 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"
@@ -153,51 +198,112 @@ class HaPanelHistory extends LitElement {
          </ha-dropdown-item>
        </ha-dropdown>

-        <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
+        <div class="content">
+          <div class="main">
+            ${
+              this._sourcesShown()
+                ? html`<ha-filter-pane
+                    .narrow=${this.narrow}
+                    .label=${sourcesLabel}
+                    .path=${mdiTuneVariant}
+                    .count=${sourceCount}
+                    .resultCount=${hasTargets ? entityIds.length : undefined}
+                    .disabled=${this._isLoading}
+                    @close-filter-pane=${this._closeSources}
+                    @clear-filter=${this._clearSources}
+                  >
+                    <ha-sources-picker
                      .hass=${this.hass}
-                      .historyData=${this._mungedStateHistory}
-                      .startTime=${this._startDate}
-                      .endTime=${this._endDate}
-                      .narrow=${this.narrow}
-                      sync-charts
-                    >
-                    </state-history-charts>
-                  `
-          }
+                      .value=${this._targetPickerValue}
+                      .filters=${this._filters}
+                      .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._sourcesShown() && !this.narrow
+                    ? nothing
+                    : html`<ha-filter-pane-chip
+                        .label=${sourcesLabel}
+                        .path=${mdiTuneVariant}
+                        .count=${filterCount}
+                        .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>
        </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(
+            hasTargets
+              ? "ui.panel.history.change_sources"
+              : "ui.panel.history.add_targets"
+          )}
+        </ha-button>
+      </ha-empty-state>
+    `;
+  }
+
  public willUpdate(changedProps: PropertyValues) {
    super.willUpdate(changedProps);

@@ -226,12 +332,22 @@ class HaPanelHistory extends LitElement {
    const queryParams = decodeHistoryLogbookQueryParams(
      extractSearchParamsObject()
    );
-    const initialValue =
-      historyLogbookTargetFromQueryParams(queryParams) ??
-      this._storedTargetPickerValue;
+    const urlTarget = historyLogbookTargetFromQueryParams(queryParams);
+    const initialValue = urlTarget ?? this._storedTargetPickerValue;
    if (initialValue) {
      this._targetPickerValue = initialValue;
    }
+    // A target linked from another page must not be narrowed by stored filters.
+    if (
+      this._storedFilters &&
+      (!urlTarget ||
+        historyLogbookTargetsEqual(
+          urlTarget,
+          this._storedTargetPickerValue ?? {}
+        ))
+    ) {
+      this._filters = this._storedFilters;
+    }
    if (queryParams.start_date) {
      this._startDate = queryParams.start_date;
    }
@@ -242,6 +358,9 @@ class HaPanelHistory extends LitElement {

  protected firstUpdated(changedProps: PropertyValues<this>) {
    super.firstUpdated(changedProps);
+    fetchEntitySourcesWithCache(this.hass).then((sources) => {
+      this._entitySources = sources;
+    });
    const searchParams = extractSearchParamsObject();
    if (searchParams.back === "1" && history.length > 1) {
      this._showBack = true;
@@ -255,18 +374,39 @@ class HaPanelHistory extends LitElement {
    if (
      changedProps.has("_startDate") ||
      changedProps.has("_endDate") ||
-      changedProps.has("_targetPickerValue") ||
-      (!this._stateHistory &&
-        (changedProps.has("_deviceEntityLookup") ||
-          changedProps.has("_areaEntityLookup") ||
-          changedProps.has("_areaDeviceLookup")))
+      !shallowEqual(this._getEntityIds(), this._fetchedEntityIds)
    ) {
      this._getHistory();
      this._getStats();
    }
  }

-  private _removeAll() {
+  private _sourcesShown(): boolean {
+    return this._showSources ?? !this.narrow;
+  }
+
+  private _toggleSources() {
+    this._showSources = !this._sourcesShown();
+  }
+
+  private _openSources() {
+    this._showSources = true;
+  }
+
+  private _closeSources() {
+    this._showSources = false;
+  }
+
+  private _filtersChanged(
+    ev: HASSDomEvent<HASSDomEvents["source-filters-changed"]>
+  ) {
+    this._filters = ev.detail.value;
+    this._storedFilters = this._filters;
+  }
+
+  private _clearSources() {
+    this._filters = {};
+    this._storedFilters = this._filters;
    this._targetPickerValue = {};
    this._storedTargetPickerValue = this._targetPickerValue;
    this._updatePath();
@@ -274,6 +414,8 @@ class HaPanelHistory extends LitElement {

  private async _getStats() {
    const statisticIds = this._getEntityIds();
+    this._fetchedEntityIds = statisticIds;
+    const fetchId = ++this._statsFetchId;

    if (statisticIds.length === 0) {
      this._statisticsHistory = undefined;
@@ -300,6 +442,10 @@ class HaPanelHistory extends LitElement {
      return;
    }

+    if (fetchId !== this._statsFetchId) {
+      return;
+    }
+
    this._statisticsHistory = convertStatisticsToHistory(
      this.hass!,
      statistics,
@@ -310,9 +456,13 @@ class HaPanelHistory extends LitElement {

  private async _getHistory() {
    const entityIds = this._getEntityIds();
+    this._fetchedEntityIds = entityIds;

    if (entityIds.length === 0) {
+      // The running subscription would keep pushing the previous entities.
+      this._unsubscribeHistory();
      this._stateHistory = undefined;
+      this._isLoading = false;
      return;
    }

@@ -342,6 +492,7 @@ class HaPanelHistory extends LitElement {
    );
    this._subscribed.catch(() => {
      this._isLoading = false;
+      this._stateHistory = { line: [], timeline: [] };
      this._unsubscribeHistory();
    });
    if (this._endDate > now) {
@@ -377,24 +528,44 @@ class HaPanelHistory extends LitElement {
  }

  private _getEntityIds(): string[] {
-    return this.__getEntityIds(
-      this._targetPickerValue,
+    return this.__filterEntityIds(
+      this.__resolveTargetEntityIds(
+        this._targetPickerValue,
+        this.hass.entities,
+        this.hass.devices,
+        this.hass.areas
+      ),
+      this._filters,
+      // Only the device class filter reads the states.
+      this._filters.deviceClasses?.length ? this.hass.states : EMPTY_STATES,
      this.hass.entities,
-      this.hass.devices,
-      this.hass.areas
+      this._entitySources
    );
  }

-  private __getEntityIds = memoizeOne(
+  // Same rules as the target picker, so that the chip and the picker agree.
+  private __resolveTargetEntityIds = memoizeOne(
    (
      targetPickerValue: HassServiceTarget,
      entities: HomeAssistant["entities"],
      devices: HomeAssistant["devices"],
      areas: HomeAssistant["areas"]
-    ): string[] =>
-      resolveEntityIDs(this.hass, targetPickerValue, entities, devices, areas)
+    ): string[] => {
+      const picked = new Set(ensureArray(targetPickerValue.entity_id));
+      return resolveEntityIDs(
+        this.hass,
+        targetPickerValue,
+        entities,
+        devices,
+        areas
+      ).filter(
+        (entityId) => picked.has(entityId) || !entities[entityId]?.hidden
+      );
+    }
  );

+  private __filterEntityIds = memoizeOne(applySourceFilters);
+
  private _dateRangeChanged(ev) {
    this._startDate = ev.detail.value.startDate;
    this._endDate = ev.detail.value.endDate;
@@ -573,7 +744,14 @@ class HaPanelHistory extends LitElement {
          line-height: inherit;
        }

+        :host {
+          --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,
@@ -581,13 +759,55 @@ class HaPanelHistory extends LitElement {
              ) - var(--safe-area-inset-bottom, 0px)
          );
          box-sizing: border-box;
-          overflow-x: hidden;
-          padding: 0 16px 16px;
+          overflow: hidden;
        }

-        :host([virtualize]) {
-          height: 100%;
-          --ha-generic-picker-max-width: 400px;
+        .main {
+          display: flex;
+          flex: 1;
+          min-height: 0;
+        }
+
+        .content-column {
+          display: flex;
+          flex-direction: column;
+          flex: 1;
+          min-width: 0;
+        }
+
+        .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);
+          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;
        }

        .progress-wrapper {
@@ -597,42 +817,6 @@ 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);
-        }
      `,
    ];
  }
@@ -2,7 +2,7 @@ import type { VisibilityChangedEvent } from "@lit-labs/virtualizer";
 import memoizeOne from "memoize-one";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, eventOptions, property } from "lit/decorators";
+import { customElement, eventOptions, property, state } from "lit/decorators";
 import { formatDate } from "../../common/datetime/format_date";
 import { capitalizeFirstLetter } from "../../common/string/capitalize-first-letter";
 import { restoreScroll } from "../../common/decorators/restore-scroll";
@@ -60,6 +60,8 @@ class HaLogbookRenderer extends LitElement {
  // @ts-ignore
  @restoreScroll(".container") private _savedScrollPos?: number;

+  @state() private _firstVisibleIndex = 0;
+
  protected willUpdate(changedProps: PropertyValues<this>) {
    if (
      (!this.hasUpdated && this.virtualize) ||
@@ -80,9 +82,11 @@ class HaLogbookRenderer extends LitElement {

    return (
      changedProps.has("entries") ||
+      changedProps.has("traceContexts") ||
      changedProps.has("noDetail") ||
      changedProps.has("userIdToName") ||
      changedProps.has("systemUserIds") ||
+      changedProps.has("_firstVisibleIndex" as never) ||
      languageChanged
    );
  }
@@ -96,12 +100,24 @@ class HaLogbookRenderer extends LitElement {
      `;
    }

+    // Rows positioned by the virtualizer cannot carry a sticky date header.
+    const floatingEntry = this.virtualize
+      ? this.entries[this._firstVisibleIndex]
+      : undefined;
+
    return html`
      <div
        class="container ha-scrollbar"
        @scroll=${this._saveScrollPos}
        @logbook-entry-selected=${this._handleEntrySelected}
      >
+        ${
+          floatingEntry
+            ? html`<h4 class="date floating-date">
+                ${this._formatDateHeader(new Date(floatingEntry.when * 1000))}
+              </h4>`
+            : nothing
+        }
        ${
          this.virtualize
            ? html`<lit-virtualizer
@@ -176,6 +192,11 @@ class HaLogbookRenderer extends LitElement {
    });
  }

+  private _dayOf(index: number): number | undefined {
+    const entry = this.entries[index];
+    return entry ? new Date(entry.when * 1000).setHours(0, 0, 0, 0) : undefined;
+  }
+
  private _formatDateHeader(date: Date): string {
    const today = new Date();
    today.setHours(0, 0, 0, 0);
@@ -200,6 +221,10 @@ class HaLogbookRenderer extends LitElement {

  @eventOptions({ passive: true })
  private _visibilityChanged(e: VisibilityChangedEvent) {
+    const first = Math.max(0, e.first);
+    if (this._dayOf(first) !== this._dayOf(this._firstVisibleIndex)) {
+      this._firstVisibleIndex = first;
+    }
    fireEvent(this, "hass-logbook-live", {
      enable: e.first === 0,
    });
@@ -226,12 +251,23 @@ class HaLogbookRenderer extends LitElement {
          font-weight: var(--ha-font-weight-medium);
        }

+        .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);
        }

@@ -29,15 +29,17 @@ const idsChanged = (oldIds?: string[], newIds?: string[]) => {
  if (oldIds === undefined && newIds === undefined) {
    return false;
  }
-  return (
-    !oldIds ||
-    !newIds ||
-    oldIds.length !== newIds.length ||
-    oldIds.some((val) => !newIds.includes(val)) ||
-    newIds.some((val) => !oldIds.includes(val))
-  );
+  if (!oldIds || !newIds || oldIds.length !== newIds.length) {
+    return true;
+  }
+  const newIdSet = new Set(newIds);
+  return oldIds.some((val) => !newIdSet.has(val));
 };

+/**
+ * @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;
@@ -126,9 +128,11 @@ export class HaLogbook extends LitElement {
    }

    if (this._logbookEntries.length === 0) {
-      return html`<div class="no-entries">
-        ${this.hass.localize("ui.components.logbook.entries_not_found")}
-      </div>`;
+      return html`<slot name="empty">
+        <div class="no-entries">
+          ${this.hass.localize("ui.components.logbook.entries_not_found")}
+        </div>
+      </slot>`;
    }

    return html`
@@ -243,17 +247,21 @@ export class HaLogbook extends LitElement {
    if (this._unsubLogbook) {
      this._unsubLogbook.then((unsub) => unsub());
      this._unsubLogbook = undefined;
-      this._logbookEntries = loading ? undefined : [];
      this._pendingStreamMessages = [];
    }
+    this._logbookEntries = loading ? undefined : [];
  }

  public connectedCallback() {
    super.connectedCallback();
    this._attachReadyListener();
    if (this.hasUpdated) {
-      // Ensure clean state before subscribing
-      this._subscribeLogbookPeriod(this._calculateLogbookPeriod());
+      if (this._filterAlwaysEmptyResults) {
+        this._unsubscribe(false);
+      } else {
+        // Ensure clean state before subscribing
+        this._subscribeLogbookPeriod(this._calculateLogbookPeriod());
+      }
    }
  }

@@ -3,34 +3,51 @@ 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 } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fromUnixTime } from "date-fns";
+import { ensureArray } from "../../common/array/ensure-array";
 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 {
  createHistoryLogbookUrl,
  decodeHistoryLogbookQueryParams,
  historyLogbookTargetFromQueryParams,
+  historyLogbookTargetsEqual,
 } from "../../common/url/history-logbook-query-params";
 import {
  extractSearchParamsObject,
  removeSearchParam,
 } from "../../common/url/search-params";
 import { deepEqual } from "../../common/util/deep-equal";
-import "../../components/date-picker/ha-date-range-picker";
+import { shallowEqual } from "../../common/util/shallow-equal";
+import "../../components/date-picker/ha-date-range-nav";
+import "../../components/ha-button";
 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 "../../components/ha-target-picker";
+import {
+  applySourceFilters,
+  countSourceFilters,
+  countTargets,
+} from "../../components/ha-sources-picker";
+import type { SourceFilters } from "../../components/ha-sources-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";
@@ -39,6 +56,8 @@ import "./ha-logbook";
 import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
 import { csvDownload, csvSafeString } from "../../util/csv";

+const EMPTY_STATES: HomeAssistant["states"] = {};
+
 interface LogbookState {
  time: { range: [Date, Date] };
  targetPickerValue: HassServiceTarget;
@@ -57,6 +76,12 @@ export class HaPanelLogbook extends LitElement {
  @state()
  private _showBack?: boolean;

+  @state() private _filters: SourceFilters = {};
+
+  @state() private _showSources?: boolean;
+
+  @state() private _entitySources?: EntitySources;
+
  @state() private _targetPickerValue: HassServiceTarget = {};

  // Remembers the last user-picked selection as a fallback for visits without
@@ -69,25 +94,34 @@ export class HaPanelLogbook extends LitElement {
  })
  private _storedTargetPickerValue?: HassServiceTarget;

+  @storage({
+    key: "logbookSourceFilters",
+    state: false,
+    subscribe: false,
+  })
+  private _storedFilters?: SourceFilters;
+
  public constructor() {
    super();
    this._time = this._defaultState.time;
  }

  protected render() {
+    const entityIds = this._getEntityIds();
+    const filterCount = countSourceFilters(this._filters);
+    const sourceCount = countTargets(this._targetPickerValue) + filterCount;
+    const sourcesLabel = sourceCount
+      ? this.hass.localize("ui.panel.logbook.sources_count", {
+          count: entityIds?.length ?? 0,
+        })
+      : this.hass.localize("ui.panel.logbook.sources");
+
    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
@@ -105,40 +139,131 @@ 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="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>
+          <div class="main">
+            ${
+              this._sourcesShown()
+                ? html`<ha-filter-pane
+                    .narrow=${this.narrow}
+                    .label=${sourcesLabel}
+                    .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}
+                      .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._sourcesShown() && !this.narrow
+                    ? nothing
+                    : html`<ha-filter-pane-chip
+                        .label=${sourcesLabel}
+                        .path=${mdiTuneVariant}
+                        .count=${filterCount}
+                        .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>

-            <ha-target-picker
-              .hass=${this.hass}
-              .entityFilter=${this._filterFunc}
-              .value=${this._targetPickerValue}
-              add-on-top
-              @value-changed=${this._targetsChanged}
-              compact
-            ></ha-target-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>
          </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 _sourcesShown(): boolean {
+    return this._showSources ?? !this.narrow;
+  }
+
+  private _toggleSources() {
+    this._showSources = !this._sourcesShown();
+  }
+
+  private _openSources() {
+    this._showSources = true;
+  }
+
+  private _closeSources() {
+    this._showSources = false;
+  }
+
+  private _filtersChanged(
+    ev: HASSDomEvent<HASSDomEvents["source-filters-changed"]>
+  ) {
+    this._filters = ev.detail.value;
+    this._storedFilters = this._filters;
+  }
+
+  private _clearSources() {
+    this._filters = {};
+    this._storedFilters = this._filters;
+    this._targetPickerValue = {};
+    this._storedTargetPickerValue = this._targetPickerValue;
+    this._updatePath();
+  }
+
  private _filterFunc: HaEntityPickerEntityFilterFunc = (entity) =>
    filterLogbookCompatibleEntities(entity);

@@ -155,6 +280,9 @@ export class HaPanelLogbook extends LitElement {
  protected firstUpdated(changedProps: PropertyValues<this>) {
    super.firstUpdated(changedProps);
    this.hass.loadBackendTranslation("title");
+    fetchEntitySourcesWithCache(this.hass).then((sources) => {
+      this._entitySources = sources;
+    });

    const searchParams = extractSearchParamsObject();
    if (searchParams.back === "1" && history.length > 1) {
@@ -179,20 +307,38 @@ export class HaPanelLogbook extends LitElement {
    this._applyURLParams();
  };

+  /** The entities to show activity for, or undefined for all of them. */
  private _getEntityIds(): string[] | undefined {
-    const entities = this.__getEntityIds(
-      this._targetPickerValue,
-      this.hass.entities,
-      this.hass.devices,
-      this.hass.areas
-    );
-    if (entities.length === 0) {
-      return undefined;
+    const hasTargets = countTargets(this._targetPickerValue) > 0;
+    const targetEntities = hasTargets
+      ? this.__filterTargetEntityIds(
+          this.__resolveTargetEntityIds(
+            this._targetPickerValue,
+            this.hass.entities,
+            this.hass.devices,
+            this.hass.areas
+          ),
+          this._targetPickerValue.entity_id,
+          this.hass.entities,
+          this.hass.states
+        )
+      : undefined;
+
+    if (!countSourceFilters(this._filters)) {
+      return targetEntities;
    }
-    return entities;
+
+    return this.__filterEntityIds(
+      targetEntities ?? this.__logbookEntityIds(this.hass.states),
+      this._filters,
+      // Only the device class filter reads the states.
+      this._filters.deviceClasses?.length ? this.hass.states : EMPTY_STATES,
+      this.hass.entities,
+      this._entitySources
+    );
  }

-  private __getEntityIds = memoizeOne(
+  private __resolveTargetEntityIds = memoizeOne(
    (
      targetPickerValue: HassServiceTarget,
      entities: HomeAssistant["entities"],
@@ -202,6 +348,53 @@ export class HaPanelLogbook extends LitElement {
      resolveEntityIDs(this.hass, targetPickerValue, entities, devices, areas)
  );

+  // Same rules as the target picker, so that the chip and the picker agree.
+  private __filterTargetEntityIds = memoizeOne(
+    (
+      entityIds: string[],
+      pickedEntityIds: string | string[] | undefined,
+      entities: HomeAssistant["entities"],
+      states: HomeAssistant["states"]
+    ): string[] => {
+      const picked = new Set(ensureArray(pickedEntityIds));
+      return this._stableEntityIds(
+        entityIds.filter((entityId) => {
+          if (picked.has(entityId)) {
+            return true;
+          }
+          const stateObj = states[entityId];
+          return (
+            !entities[entityId]?.hidden &&
+            stateObj &&
+            filterLogbookCompatibleEntities(stateObj)
+          );
+        })
+      );
+    }
+  );
+
+  private __logbookEntityIds = memoizeOne(
+    (states: HomeAssistant["states"]): string[] =>
+      this._stableEntityIds(
+        Object.values(states)
+          .filter((stateObj) => filterLogbookCompatibleEntities(stateObj))
+          .map((stateObj) => stateObj.entity_id)
+      )
+  );
+
+  private __filterEntityIds = memoizeOne(applySourceFilters);
+
+  private _lastEntityIds?: string[];
+
+  // A list keyed on the states must keep its identity or ha-logbook resubscribes.
+  private _stableEntityIds(entityIds: string[]): string[] {
+    if (this._lastEntityIds && shallowEqual(this._lastEntityIds, entityIds)) {
+      return this._lastEntityIds;
+    }
+    this._lastEntityIds = entityIds;
+    return entityIds;
+  }
+
  private _applyURLParams() {
    const queryParams = decodeHistoryLogbookQueryParams(
      extractSearchParamsObject()
@@ -213,6 +406,19 @@ export class HaPanelLogbook extends LitElement {
      this._targetPickerValue = this._storedTargetPickerValue;
    }

+    // A target linked from another page must not be narrowed by the filters.
+    if (
+      targetPickerValue &&
+      !historyLogbookTargetsEqual(
+        targetPickerValue,
+        this._storedTargetPickerValue ?? {}
+      )
+    ) {
+      this._filters = {};
+    } else if (!this.hasUpdated && this._storedFilters) {
+      this._filters = this._storedFilters;
+    }
+
    if (queryParams.start_date || queryParams.end_date) {
      const startDate = queryParams.start_date ?? this._time.range[0];
      const endDate = queryParams.end_date ?? this._time.range[1];
@@ -273,9 +479,12 @@ export class HaPanelLogbook extends LitElement {
  }

  private _isDefaultState(): boolean {
-    return deepEqual(
-      { time: this._time, targetPickerValue: this._targetPickerValue },
-      this._defaultState
+    return (
+      !countSourceFilters(this._filters) &&
+      deepEqual(
+        { time: this._time, targetPickerValue: this._targetPickerValue },
+        this._defaultState
+      )
    );
  }

@@ -284,6 +493,8 @@ export class HaPanelLogbook extends LitElement {
    this._time = defaultState.time;
    this._targetPickerValue = defaultState.targetPickerValue;
    this._storedTargetPickerValue = undefined;
+    this._filters = {};
+    this._storedFilters = undefined;
    navigate("/logbook", { replace: true });
  }

@@ -300,6 +511,9 @@ export class HaPanelLogbook extends LitElement {
      case "refresh":
        this._refreshLogbook();
        break;
+      case "reset":
+        this._resetLogbook();
+        break;
    }
  }

@@ -363,6 +577,7 @@ export class HaPanelLogbook extends LitElement {
      haStyle,
      css`
        :host {
+          --ha-generic-picker-width: min(400px, calc(100vw - 32px));
          --ha-generic-picker-max-width: 400px;
        }

@@ -375,59 +590,50 @@ export class HaPanelLogbook extends LitElement {
                0px
              ) - var(--safe-area-inset-bottom, 0px)
          );
-          overflow-x: hidden;
-          padding: 0 0 16px;
+          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;
+        }
+
+        .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);
+          overflow-x: auto;
+          scrollbar-width: none;
+        }
+
+        .toolbar::-webkit-scrollbar {
+          display: none;
+        }
+
+        .toolbar > * {
+          flex-shrink: 0;
        }

        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;
-        }
      `,
    ];
  }
@@ -1,13 +1,15 @@
 import { consume } from "@lit/context";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import {
  consumeEntityState,
  consumeLocalize,
 } from "../../../common/decorators/consume-context-entry";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import type { LocalizeFunc } from "../../../common/translations/localize";
+import "../../../components/ha-action-result";
+import type { HaActionResult } from "../../../components/ha-action-result";
 import "../../../components/ha-control-button";
 import "../../../components/ha-control-button-group";
 import { apiContext, servicesContext } from "../../../data/context";
@@ -63,8 +65,10 @@ class HuiButtonCardFeature extends LitElement implements LovelaceCardFeature {

  @state() private _config?: ButtonCardFeatureConfig;

+  @query("ha-action-result") private _result!: HaActionResult;
+
  private _pressButton() {
-    if (!this._stateObj) return;
+    if (!this._stateObj || this._result.busy) return;

    const domain = computeDomain(this._stateObj.entity_id);
    const service =
@@ -99,7 +103,7 @@ class HuiButtonCardFeature extends LitElement implements LovelaceCardFeature {

    forwardHaptic(this, "light");

-    this._api.callService(domain, service, serviceData);
+    this._result.run(this._api.callService(domain, service, serviceData));
  }

  static getStubConfig(): ButtonCardFeatureConfig {
@@ -132,7 +136,9 @@ class HuiButtonCardFeature extends LitElement implements LovelaceCardFeature {
          class="press-button"
          @click=${this._pressButton}
        >
-          ${this._config.action_name ?? this._localize("ui.card.button.press")}
+          <ha-action-result>
+            ${this._config.action_name ?? this._localize("ui.card.button.press")}
+          </ha-action-result>
        </ha-control-button>
      </ha-control-button-group>
    `;
@@ -49,6 +49,8 @@ interface LovelacePanelConfig {
  mode: "yaml" | "storage";
 }

+const EXTERNALLY_UPDATED_TOAST_ID = "lovelace-externally-updated";
+
 let editorLoaded = false;
 let resourcesLoaded = false;

@@ -265,6 +267,7 @@ export class LovelacePanel extends LitElement {
      return;
    }
    showToast(this, {
+      id: EXTERNALLY_UPDATED_TOAST_ID,
      message: this.hass!.localize(
        "ui.panel.lovelace.externally_updated_toast.message"
      ),
@@ -0,0 +1,2 @@
+export const mdiMqttLogo =
+  "M1.68,0.5325c-0.63,0-1.1475,0.51-1.1475,1.1475v1.125c11.445,0.0675,20.745,9.3,20.82,20.67h0.975c0.63,0,1.1475-0.51,1.1475-1.1475V14.5125C20.8575,8.04,15.5475,2.9175,8.925,0.5325H1.68z M0.5325,6.3075v3.735c7.425,0.0675,13.455,6.0525,13.53,13.4325h3.8775C17.865,13.995,10.0875,6.315,0.5325,6.3075z M0.5325,13.545v8.7825c0,0.63,0.51,1.1475,1.1475,1.1475H10.65C10.575,17.985,6.0675,13.5525,0.5325,13.545z M16.53,0.5325c1.35,0.945,2.715,2.01,3.915,3.2025c1.0875,1.08,2.145,2.3775,3.03,3.585V1.68c0-0.63-0.51-1.1475-1.1475-1.1475H16.53z";
@@ -5,9 +5,9 @@ export const waColorStyles = css`
    --wa-color-brand-fill-loud: var(--ha-color-fill-primary-loud-resting);
    --wa-color-brand-fill-normal: var(--ha-color-fill-primary-normal-resting);
    --wa-color-brand-fill-quiet: var(--ha-color-fill-primary-quiet-hover);
-    --wa-color-brand-border-loud: var(--ha-color-border-loud);
+    --wa-color-brand-border-loud: var(--ha-color-border-primary-loud);
    --wa-color-brand-border-normal: var(--ha-color-primary-50);
-    --wa-color-brand-border-quiet: var(--ha-color-border-quiet);
+    --wa-color-brand-border-quiet: var(--ha-color-border-primary-quiet);
    --wa-color-brand-on-loud: var(--ha-color-on-primary-loud);
    --wa-color-brand-on-normal: var(--ha-color-on-primary-normal);
    --wa-color-brand-on-quiet: var(--ha-color-on-primary-quiet);
@@ -1,22 +1,26 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import "../components/entity/ha-entity-toggle";
+import { customElement, property, query } from "lit/decorators";
+import { computeDomain } from "../common/entity/compute_domain";
 import "../components/entity/state-info";
+import "../components/ha-action-result";
+import type { HaActionResult } from "../components/ha-action-result";
 import "../components/ha-control-button";
 import { UNAVAILABLE } from "../data/entity/entity";
 import { haStyle } from "../resources/styles";
 import type { HomeAssistant } from "../types";

@customElement("state-card-button")
-class StateCardButton extends LitElement {
+export class StateCardButton extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

  @property({ attribute: false }) public stateObj!: HassEntity;

  @property({ attribute: "in-dialog", type: Boolean }) public inDialog = false;

+  @query("ha-action-result") private _result!: HaActionResult;
+
  protected render() {
    const stateObj = this.stateObj;
    return html`
@@ -30,7 +34,9 @@ class StateCardButton extends LitElement {
          .disabled=${stateObj.state === UNAVAILABLE}
          @click=${this._pressButton}
        >
-          ${this.hass.localize("ui.card.button.press")}
+          <ha-action-result>
+            ${this.hass.localize("ui.card.button.press")}
+          </ha-action-result>
        </ha-control-button>
      </div>
    `;
@@ -38,9 +44,13 @@ class StateCardButton extends LitElement {

  private _pressButton(ev: Event) {
    ev.stopPropagation();
-    this.hass.callService("button", "press", {
-      entity_id: this.stateObj.entity_id,
-    });
+    if (this._result.busy) return;
+
+    this._result.run(
+      this.hass.callService(computeDomain(this.stateObj.entity_id), "press", {
+        entity_id: this.stateObj.entity_id,
+      })
+    );
  }

  static get styles(): CSSResultGroup {
@@ -1,63 +1,8 @@
-import type { HassEntity } from "home-assistant-js-websocket";
-import type { CSSResultGroup } from "lit";
-import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import "../components/entity/ha-entity-toggle";
-import "../components/entity/state-info";
-import "../components/ha-control-button";
-import { UNAVAILABLE } from "../data/entity/entity";
-import { haStyle } from "../resources/styles";
-import type { HomeAssistant } from "../types";
+import { customElement } from "lit/decorators";
+import { StateCardButton } from "./state-card-button";

@customElement("state-card-input_button")
-class StateCardInputButton extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public stateObj!: HassEntity;
-
-  @property({ attribute: "in-dialog", type: Boolean }) public inDialog = false;
-
-  protected render() {
-    const stateObj = this.stateObj;
-    return html`
-      <div class="horizontal justified layout">
-        <state-info
-          .hass=${this.hass}
-          .stateObj=${stateObj}
-          .inDialog=${this.inDialog}
-        ></state-info>
-        <ha-control-button
-          .disabled=${stateObj.state === UNAVAILABLE}
-          @click=${this._pressButton}
-        >
-          ${this.hass.localize("ui.card.button.press")}
-        </ha-control-button>
-      </div>
-    `;
-  }
-
-  private _pressButton(ev: Event) {
-    ev.stopPropagation();
-    this.hass.callService("input_button", "press", {
-      entity_id: this.stateObj.entity_id,
-    });
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      css`
-        ha-control-button {
-          width: auto;
-          min-width: 40px;
-          --control-button-padding: 0 var(--ha-space-4);
-          --control-button-focus-color: var(--primary-text-color);
-          --control-button-icon-color: var(--feature-color);
-        }
-      `,
-    ];
-  }
-}
+class StateCardInputButton extends StateCardButton {}

 declare global {
  interface HTMLElementTagNameMap {
@@ -790,11 +790,6 @@
        }
      },
      "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",
@@ -807,7 +802,6 @@
        "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}",
@@ -841,6 +835,9 @@
        },
        "style": "Time format style"
      },
+      "filter-device-classes": {
+        "caption": "Device class"
+      },
      "subpage-data-table": {
        "filters": "Filters",
        "show_results": "Show {number} results",
@@ -1129,7 +1126,11 @@
        "zoom_reset": "Reset zoom",
        "expand_legend": "More",
        "collapse_legend": "Less",
-        "toggle_visibility": "Toggle visibility"
+        "toggle_visibility": "Toggle visibility",
+        "chart": "Chart",
+        "time": "Time",
+        "value": "Value",
+        "category": "Category"
      },
      "map": {
        "error": "Unable to load map"
@@ -1608,6 +1609,7 @@
            "labs": "[%key:ui::panel::config::labs::caption%]",
            "tools": "[%key:ui::panel::config::dashboard::tools::main%]",
            "matter": "[%key:ui::panel::config::dashboard::matter::main%]",
+            "mqtt": "[%key:ui::panel::config::dashboard::mqtt::main%]",
            "zha": "[%key:ui::panel::config::dashboard::zha::main%]",
            "zwave_js": "[%key:ui::panel::config::dashboard::zwave_js::main%]",
            "thread": "[%key:ui::panel::config::dashboard::thread::main%]",
@@ -2736,6 +2738,10 @@
            "main": "Matter",
            "secondary": "Cross-vendor smart home standard"
          },
+          "mqtt": {
+            "main": "MQTT",
+            "secondary": "Lightweight network protocol designed for IoT devices"
+          },
          "thread": {
            "main": "Thread",
            "secondary": "Mesh network often used for Matter devices"
@@ -7400,8 +7406,16 @@
        },
        "mqtt": {
          "title": "MQTT",
-          "settings_title": "MQTT settings",
-          "option_flow": "Configure MQTT options",
+          "option_flow": "MQTT options",
+          "option_flow_description": "Set discovery options",
+          "config_flow": "Connection",
+          "config_flow_description": "Broker connection settings",
+          "status_online": "Online",
+          "status_offline": "Offline",
+          "my_network_title": "My network",
+          "devices": "{count, plural,\n  one {# device}\n  other {# devices}\n}",
+          "device_count": "{count, plural,\n  one {# device}\n  other {# devices}\n}",
+          "entity_count": "{count, plural,\n  one {# entity}\n  other {# entities}\n}",
          "description_publish": "Publish a packet",
          "topic": "Topic",
          "payload": "Payload (template allowed)",
@@ -8321,10 +8335,7 @@
            "status": "Status",
            "version": "Version",
            "data_rate": "Data rate",
-            "area": "Area",
-            "neighbor": "In range of each other",
-            "toggle_neighbors": "Toggle neighbor connections",
-            "neighbors_error": "Failed to load neighbor connections"
+            "area": "Area"
          },
          "node_status": {
            "0": "Unknown",
@@ -8425,6 +8436,7 @@
            "status_online": "Online",
            "status_offline": "Offline",
            "my_network_title": "My network",
+            "show_map": "[%key:ui::panel::config::bluetooth::show_map%]",
            "devices": "{count, plural,\n  one {# device}\n  other {# devices}\n}",
            "device_count": "{count, plural,\n  one {# device}\n  other {# devices}\n}",
            "entity_count": "{count, plural,\n  one {# entity}\n  other {# entities}\n}",
@@ -8473,6 +8485,48 @@
              }
            }
          },
+          "visualization": {
+            "header": "Network visualization",
+            "refresh_topology": "Refresh topology",
+            "border_router": "Border router",
+            "router": "Router",
+            "end_device": "End device",
+            "wifi_ap": "Wi-Fi access point",
+            "offline": "Offline",
+            "online": "Online",
+            "unknown_device": "Unknown device",
+            "unknown_devices": "Unknown devices",
+            "node": "Node {node_id}",
+            "node_id": "Node ID",
+            "network": "Network",
+            "role": "Role",
+            "status": "Status",
+            "manufacturer": "Manufacturer",
+            "model": "Model",
+            "area": "Area",
+            "last_seen": "Last seen",
+            "via_route_table": "Learned from routing table",
+            "empty": "No network topology data is available yet.",
+            "not_supported": "The connected Matter server does not support network topology. Update your Matter server to use this feature.",
+            "error_loading": "Failed to load the network topology: {error}",
+            "strength": {
+              "strong": "Strong",
+              "medium": "Medium",
+              "weak": "Weak",
+              "none": "None",
+              "unknown": "Unknown"
+            },
+            "roles": {
+              "leader": "Leader",
+              "router": "Router",
+              "reed": "Router-eligible end device",
+              "end_device": "End device",
+              "sleepy_end_device": "Sleepy end device",
+              "unassigned": "Unassigned",
+              "station": "Station",
+              "ap": "Access point"
+            }
+          },
          "network_type": {
            "thread": "Thread",
            "wifi": "Wi-Fi",
@@ -11723,9 +11777,16 @@
        }
      },
      "history": {
-        "start_search": "Select areas, devices, entities or labels above",
+        "sources": "Sources",
+        "sources_count": "Sources: {count}",
+        "add_targets": "Add targets",
+        "change_sources": "Change sources",
+        "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.",
        "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",
@@ -11733,6 +11794,12 @@
        "error_no_data": "You need to select some data sources first."
      },
      "logbook": {
+        "sources": "[%key:ui::panel::history::sources%]",
+        "sources_count": "[%key:ui::panel::history::sources_count%]",
+        "change_sources": "[%key:ui::panel::history::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."
@@ -0,0 +1,192 @@
+import { describe, expect, it } from "vitest";
+import { canSonifyChart } from "../../../src/components/chart/chart-sonification";
+import type { HaECSeries } from "../../../src/resources/echarts/echarts";
+
+const series = (
+  items: { type: string; id?: string; name?: string; data?: unknown[] }[]
+) => items as unknown as HaECSeries;
+
+describe("canSonifyChart", () => {
+  it("accepts line and bar series that carry data", () => {
+    expect(
+      canSonifyChart(
+        series([
+          {
+            type: "line",
+            data: [
+              [0, 1],
+              [1, 2],
+            ],
+          },
+        ])
+      )
+    ).toBe(true);
+    expect(
+      canSonifyChart(
+        series([
+          {
+            type: "bar",
+            data: [
+              [0, 1],
+              [1, 2],
+            ],
+          },
+        ])
+      )
+    ).toBe(true);
+  });
+
+  it("accepts a chart whose empty placeholder series sits beside real data", () => {
+    expect(
+      canSonifyChart(
+        series([
+          { type: "bar", data: [] },
+          {
+            type: "bar",
+            data: [
+              [0, 1],
+              [1, 2],
+            ],
+          },
+        ])
+      )
+    ).toBe(true);
+  });
+
+  it("rejects series types the extension cannot convert", () => {
+    expect(
+      canSonifyChart(
+        series([
+          {
+            type: "custom",
+            data: [
+              [0, 1],
+              [1, 2],
+            ],
+          },
+        ])
+      )
+    ).toBe(false);
+    expect(
+      canSonifyChart(
+        series([
+          {
+            type: "line",
+            data: [
+              [0, 1],
+              [1, 2],
+            ],
+          },
+          {
+            type: "sankey",
+            data: [
+              [0, 1],
+              [1, 2],
+            ],
+          },
+        ])
+      )
+    ).toBe(false);
+  });
+
+  it("rejects charts with nothing plotted", () => {
+    expect(canSonifyChart(series([]))).toBe(false);
+    expect(canSonifyChart(series([{ type: "line", data: [] }]))).toBe(false);
+    expect(canSonifyChart(series([{ type: "line" }]))).toBe(false);
+  });
+
+  it("rejects value-first pairs, which the extension reads as a non-numeric y", () => {
+    // The energy device charts encode [amount, categoryName]. Chart2Music takes
+    // value as [x, y], so every one of those points is dropped.
+    expect(
+      canSonifyChart(
+        series([
+          {
+            type: "bar",
+            data: [
+              { value: [12.5, "sensor.a"] },
+              { value: [8.25, "sensor.b"] },
+            ],
+          },
+        ])
+      )
+    ).toBe(false);
+  });
+
+  it("rejects a chart left with a single readable point", () => {
+    // The device pie's slices are all unreadable, leaving only its one-number
+    // total series — nothing the arrow keys could move between.
+    expect(
+      canSonifyChart(
+        series([
+          { type: "pie", data: [{ value: [12.5, "sensor.a"] }] },
+          { type: "pie", data: [24.5] },
+        ])
+      )
+    ).toBe(false);
+  });
+
+  it("ignores the points of legend-hidden series", () => {
+    // Hiding a series strips its data before it reaches ECharts, so it cannot
+    // be navigated either.
+    const chart = series([
+      { type: "line", id: "a", data: [[0, 1]] },
+      { type: "line", name: "b", data: [[1, 2]] },
+    ]);
+    expect(canSonifyChart(chart, new Set())).toBe(true);
+    expect(canSonifyChart(chart, new Set(["b"]))).toBe(false);
+    expect(canSonifyChart(chart, new Set(["a", "b"]))).toBe(false);
+  });
+
+  it("rejects a series whose points are all gaps", () => {
+    // Chart2Music drops any point without a numeric y, so a series of nothing
+    // but nulls converts to an empty group and makes it throw.
+    expect(
+      canSonifyChart(
+        series([
+          {
+            type: "line",
+            data: [
+              [0, null],
+              [1, null],
+            ],
+          },
+        ])
+      )
+    ).toBe(false);
+  });
+
+  it("accepts a series that only becomes numeric partway through", () => {
+    expect(
+      canSonifyChart(
+        series([
+          {
+            type: "line",
+            data: [
+              [0, null],
+              [1, 21.5],
+              [2, 21.9],
+            ],
+          },
+        ])
+      )
+    ).toBe(true);
+  });
+
+  it("reads the y out of object-form points", () => {
+    expect(
+      canSonifyChart(
+        series([
+          { type: "bar", data: [{ value: [0, 0.28] }, { value: [1, 0.31] }] },
+        ])
+      )
+    ).toBe(true);
+    expect(
+      canSonifyChart(
+        series([
+          { type: "bar", data: [{ value: [0, null] }, { value: [1, null] }] },
+        ])
+      )
+    ).toBe(false);
+  });
+});
@@ -1,10 +1,19 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import type { AssistPipeline } from "../../src/data/assist_pipeline";
 import {
  assistPipelineChanged,
+  greetingTranslationLanguage,
  initialPromptToSubmit,
 } from "../../src/components/ha-assist-chat";

+// common-translation depends on build-time defines and generated translation
+// metadata that are not available in unit tests.
+vi.mock("../../src/util/common-translation", () => ({
+  findAvailableLanguage: (language: string) =>
+    ({ en: "en", "en-US": "en", nl: "nl", pl: "pl" })[language],
+  getTranslation: vi.fn(),
+}));
+
 describe("initialPromptToSubmit", () => {
  it("returns a trimmed prompt when submission is requested", () => {
    expect(initialPromptToSubmit("  Turn on the lights  ", true)).toBe(
@@ -36,3 +45,25 @@ describe("ha-assist-chat pipeline updates", () => {
    ).toBe(true);
  });
 });
+
+describe("greetingTranslationLanguage", () => {
+  it("returns the pipeline language when it differs from the interface language", () => {
+    expect(greetingTranslationLanguage("pl", "en")).toBe("pl");
+  });
+
+  it("returns undefined when the pipeline language matches the interface language", () => {
+    expect(greetingTranslationLanguage("nl", "nl")).toBeUndefined();
+  });
+
+  it("returns undefined when the pipeline language resolves to the interface language", () => {
+    expect(greetingTranslationLanguage("en-US", "en")).toBeUndefined();
+  });
+
+  it("returns undefined when there is no pipeline language", () => {
+    expect(greetingTranslationLanguage(undefined, "en")).toBeUndefined();
+  });
+
+  it("returns undefined when the pipeline language has no available translation", () => {
+    expect(greetingTranslationLanguage("xx", "en")).toBeUndefined();
+  });
+});
@@ -1,52 +0,0 @@
-import type { HassEntity } from "home-assistant-js-websocket";
-import { describe, expect, it } from "vitest";
-
-import { computeShownAttributes } from "../../src/data/entity/entity_attributes";
-
-describe("computeShownAttributes", () => {
-  it("filters globally hidden attributes", () => {
-    const stateObj = {
-      entity_id: "sensor.temperature",
-      attributes: {
-        friendly_name: "Office temperature",
-        unit_of_measurement: "°C",
-        temperature: 21,
-        custom_value: "shown",
-      },
-    } as unknown as HassEntity;
-
-    expect(computeShownAttributes(stateObj)).toEqual([
-      "temperature",
-      "custom_value",
-    ]);
-  });
-
-  it("filters domain and device class specific attributes", () => {
-    const stateObj = {
-      entity_id: "sensor.status",
-      attributes: {
-        device_class: "enum",
-        options: ["home", "away"],
-        current_option: "home",
-      },
-    } as unknown as HassEntity;
-
-    expect(computeShownAttributes(stateObj)).toEqual(["current_option"]);
-  });
-
-  it("keeps device-class attributes for other device classes", () => {
-    const stateObj = {
-      entity_id: "sensor.status",
-      attributes: {
-        device_class: "temperature",
-        options: ["home", "away"],
-        current_option: "home",
-      },
-    } as unknown as HassEntity;
-
-    expect(computeShownAttributes(stateObj)).toEqual([
-      "options",
-      "current_option",
-    ]);
-  });
-});
@@ -1,7 +1,10 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import { describe, expect, it } from "vitest";
 import type { DeviceRegistryEntry } from "../../src/data/device/device_registry";
-import { filterSelectorEntities } from "../../src/data/selector";
+import {
+  filterSelectorEntities,
+  resolveEntityIDs,
+} from "../../src/data/selector";
 import type { HomeAssistant } from "../../src/types";

 const entity = {
@@ -132,3 +135,62 @@ describe("filterSelectorEntities device filter", () => {
    ).toBe(false);
  });
 });
+
+describe("resolveEntityIDs", () => {
+  const areaHass = {
+    states: {
+      "light.kitchen": { entity_id: "light.kitchen", state: "on" },
+      "sensor.kitchen_hub_temp": {
+        entity_id: "sensor.kitchen_hub_temp",
+        state: "20",
+      },
+      "sensor.hallway_probe": { entity_id: "sensor.hallway_probe", state: "5" },
+    },
+    entities: {
+      "light.kitchen": { entity_id: "light.kitchen", device_id: "hub" },
+      "sensor.kitchen_hub_temp": {
+        entity_id: "sensor.kitchen_hub_temp",
+        device_id: "hub",
+      },
+      "sensor.hallway_probe": {
+        entity_id: "sensor.hallway_probe",
+        device_id: "hub",
+        area_id: "hallway",
+      },
+    },
+    devices: { hub: { id: "hub", area_id: "kitchen" } },
+    areas: { kitchen: { area_id: "kitchen" }, hallway: { area_id: "hallway" } },
+  } as unknown as HomeAssistant;
+
+  const resolve = (target) =>
+    resolveEntityIDs(
+      areaHass,
+      target,
+      areaHass.entities,
+      areaHass.devices,
+      areaHass.areas
+    ).sort();
+
+  it("skips entities of an area device that are assigned to another area", () => {
+    expect(resolve({ area_id: "kitchen" })).toEqual([
+      "light.kitchen",
+      "sensor.kitchen_hub_temp",
+    ]);
+  });
+
+  it("keeps every entity of a directly targeted device", () => {
+    expect(resolve({ device_id: "hub" })).toEqual([
+      "light.kitchen",
+      "sensor.hallway_probe",
+      "sensor.kitchen_hub_temp",
+    ]);
+  });
+
+  it("keeps the entity when its own area is targeted as well", () => {
+    expect(resolve({ area_id: ["kitchen", "hallway"] })).toEqual([
+      "light.kitchen",
+      "sensor.hallway_probe",
+      "sensor.kitchen_hub_temp",
+    ]);
+  });
+});
@@ -0,0 +1,65 @@
+import { describe, expect, it, vi } from "vitest";
+import { fetchHostDisksUsage } from "../../src/data/hassio/host";
+import type { HomeAssistant } from "../../src/types";
+
+const mockHass = () => {
+  const callWS = vi.fn().mockResolvedValue({
+    id: "root",
+    label: "Total",
+    total_bytes: 2000398934016,
+    used_bytes: 1240247081779,
+  });
+  return { hass: { callWS } as unknown as HomeAssistant, callWS };
+};
+
+const sentMessage = (callWS: ReturnType<typeof vi.fn>) =>
+  callWS.mock.calls[0][0];
+
+describe("fetchHostDisksUsage", () => {
+  it("targets the data disk and sends no depth by default", async () => {
+    const { hass, callWS } = mockHass();
+    await fetchHostDisksUsage(hass);
+    expect(callWS).toHaveBeenCalledWith({
+      type: "supervisor/api",
+      endpoint: "/host/disks/default/usage",
+      method: "get",
+      timeout: 3600,
+    });
+  });
+
+  it("addresses a mount by name", async () => {
+    const { hass, callWS } = mockHass();
+    await fetchHostDisksUsage(hass, "media_nas");
+    expect(sentMessage(callWS).endpoint).toBe("/host/disks/media_nas/usage");
+  });
+
+  // Walking a mount costs a round trip per directory, so the row fetch must let
+  // the Supervisor apply its own per-target default rather than pinning one.
+  it("omits max_depth for a mount", async () => {
+    const { hass, callWS } = mockHass();
+    await fetchHostDisksUsage(hass, "media_nas");
+    expect(sentMessage(callWS)).not.toHaveProperty("params");
+  });
+
+  it("sends max_depth only when a caller asks for it", async () => {
+    const { hass, callWS } = mockHass();
+    await fetchHostDisksUsage(hass, "default", 3);
+    expect(sentMessage(callWS).params).toEqual({ max_depth: 3 });
+  });
+
+  it("sends max_depth 0 when explicitly asked, rather than dropping it", async () => {
+    const { hass, callWS } = mockHass();
+    await fetchHostDisksUsage(hass, "media_nas", 0);
+    expect(sentMessage(callWS).params).toEqual({ max_depth: 0 });
+  });
+
+  it("returns the usage tree", async () => {
+    const { hass } = mockHass();
+    await expect(fetchHostDisksUsage(hass, "media_nas")).resolves.toMatchObject(
+      {
+        total_bytes: 2000398934016,
+        used_bytes: 1240247081779,
+      }
+    );
+  });
+});
@@ -0,0 +1,769 @@
+import { describe, expect, it } from "vitest";
+
+import type {
+  MatterNetworkTopology,
+  MatterNetworkTopologyConnection,
+  MatterNetworkTopologyNode,
+} from "../../../../../src/data/matter";
+import {
+  createMatterNetworkChartData,
+  getTopologyNodeCategory,
+  getTopologyNodeName,
+  networkToColorVar,
+  strengthToScale,
+} from "../../../../../src/panels/config/integrations/integration-panels/matter/matter-network-data";
+import type { HomeAssistant } from "../../../../../src/types";
+
+const mockHass = (
+  devices: Record<string, Partial<HomeAssistant["devices"][string]>> = {},
+  areas: Record<string, Partial<HomeAssistant["areas"][string]>> = {}
+): HomeAssistant =>
+  ({
+    localize: (key: string) => key.split(".").pop(),
+    devices,
+    areas,
+  }) as unknown as HomeAssistant;
+
+const node = (
+  overrides: Partial<MatterNetworkTopologyNode> & { id: string }
+): MatterNetworkTopologyNode => ({
+  kind: "matter",
+  network_type: "thread",
+  ...overrides,
+});
+
+const connection = (
+  overrides: Partial<MatterNetworkTopologyConnection> & {
+    source: string;
+    target: string;
+  }
+): MatterNetworkTopologyConnection => ({
+  network: "thread",
+  strength: "strong",
+  ...overrides,
+});
+
+const topology = (
+  nodes: MatterNetworkTopologyNode[],
+  connections: MatterNetworkTopologyConnection[] = []
+): MatterNetworkTopology => ({
+  collected_at: 1767888000000,
+  nodes,
+  connections,
+});
+
+const element = document.createElement("div");
+document.body.appendChild(element);
+
+// jsdom resolves custom properties set inline, so color lookups can be
+// asserted on real values; use a fresh element so nothing leaks into the
+// tests that expect the bare element's empty strings
+const themedElement = (): HTMLElement => {
+  const el = document.createElement("div");
+  el.style.setProperty("--primary-color", "#009ac7");
+  el.style.setProperty("--purple-color", "#926bc7");
+  el.style.setProperty("--orange-color", "#ff9800");
+  el.style.setProperty("--disabled-color", "#bdbdbd");
+  document.body.appendChild(el);
+  return el;
+};
+
+describe("strengthToScale", () => {
+  it("never returns a falsy value so the graph arrow stays suppressed", () => {
+    expect(strengthToScale("strong")).toBe(4);
+    expect(strengthToScale("medium")).toBe(3);
+    expect(strengthToScale("weak")).toBe(2);
+    expect(strengthToScale("none")).toBe(1);
+    expect(strengthToScale(undefined)).toBe(1);
+    expect(strengthToScale(null)).toBe(1);
+  });
+
+  it("renders an unmeasured link as present, above a dead one", () => {
+    // "unknown" (no measurement) must not collapse to the "none"/dead bucket
+    expect(strengthToScale("unknown")).toBe(2);
+    expect(strengthToScale("unknown")).toBeGreaterThan(strengthToScale("none"));
+  });
+});
+
+describe("networkToColorVar", () => {
+  it("separates the two transports and degrades gracefully", () => {
+    expect(networkToColorVar("thread")).toBe("--purple-color");
+    expect(networkToColorVar("wifi")).toBe("--orange-color");
+    expect(networkToColorVar("thread")).not.toBe(networkToColorVar("wifi"));
+    // the wire type is a plain string, not a union
+    expect(networkToColorVar("ethernet")).toBe("--secondary-text-color");
+    expect(networkToColorVar(undefined)).toBe("--secondary-text-color");
+  });
+});
+
+describe("getTopologyNodeCategory", () => {
+  it("maps kinds and roles to categories", () => {
+    // category 0 is reserved for the synthesized Home Assistant root node
+    expect(
+      getTopologyNodeCategory(node({ id: "br", kind: "border_router" }))
+    ).toBe(1);
+    expect(getTopologyNodeCategory(node({ id: "1", role: "leader" }))).toBe(2);
+    expect(getTopologyNodeCategory(node({ id: "2", role: "router" }))).toBe(2);
+    expect(getTopologyNodeCategory(node({ id: "3", role: "reed" }))).toBe(2);
+    expect(getTopologyNodeCategory(node({ id: "4", role: "end_device" }))).toBe(
+      3
+    );
+    expect(
+      getTopologyNodeCategory(node({ id: "5", role: "sleepy_end_device" }))
+    ).toBe(3);
+    expect(
+      getTopologyNodeCategory(
+        node({ id: "6", network_type: "wifi", role: "station" })
+      )
+    ).toBe(3);
+    expect(
+      getTopologyNodeCategory(
+        node({ id: "ap_112233445566", kind: "wifi_ap", network_type: "wifi" })
+      )
+    ).toBe(4);
+    expect(
+      getTopologyNodeCategory(
+        node({ id: "7", role: "router", available: false })
+      )
+    ).toBe(5);
+    expect(
+      getTopologyNodeCategory(node({ id: "unknown_1", kind: "thread_unknown" }))
+    ).toBe(6);
+  });
+});
+
+describe("getTopologyNodeName", () => {
+  it("prefers the HA device name", () => {
+    const hass = mockHass({
+      dev1: { name_by_user: "Living room plug", name: "Plug" },
+    });
+    expect(
+      getTopologyNodeName(
+        node({ id: "1", node_id: 1, ha_device_id: "dev1" }),
+        hass
+      )
+    ).toBe("Living room plug");
+  });
+
+  it("falls back to wire metadata for external nodes", () => {
+    const hass = mockHass();
+    expect(
+      getTopologyNodeName(
+        node({ id: "br_1", kind: "border_router", vendor_name: "Apple" }),
+        hass
+      )
+    ).toBe("Apple");
+    expect(
+      getTopologyNodeName(
+        node({
+          id: "ap_112233445566",
+          kind: "wifi_ap",
+          network_type: "wifi",
+          network_name: "MyWiFi",
+        }),
+        hass
+      )
+    ).toBe("MyWiFi");
+    expect(
+      getTopologyNodeName(
+        node({ id: "unknown_1", kind: "thread_unknown" }),
+        hass
+      )
+    ).toBe("unknown_device");
+  });
+
+  it("prefers the border router hostname over its generic vendor and model", () => {
+    // some vendors report the same vendor/model on every unit they ship, so
+    // vendor+model alone labels every border router identically
+    expect(
+      getTopologyNodeName(
+        node({
+          id: "br_1",
+          kind: "border_router",
+          host_name: "Cuisine",
+          vendor_name: "Apple",
+          model_name: "BorderRouter",
+        }),
+        mockHass()
+      )
+    ).toBe("Cuisine");
+  });
+
+  it("keeps the HA device name ahead of the border router hostname", () => {
+    expect(
+      getTopologyNodeName(
+        node({
+          id: "br_1",
+          kind: "border_router",
+          ha_device_id: "dev1",
+          host_name: "Cuisine",
+        }),
+        mockHass({ dev1: { name: "Kitchen hub" } })
+      )
+    ).toBe("Kitchen hub");
+  });
+
+  it("falls through to vendor and model when host_name is null", () => {
+    // core's serializer always emits the key, so null must behave as absent
+    expect(
+      getTopologyNodeName(
+        node({
+          id: "br_1",
+          kind: "border_router",
+          host_name: null,
+          vendor_name: "Apple",
+          model_name: "BorderRouter",
+        }),
+        mockHass()
+      )
+    ).toBe("Apple BorderRouter");
+  });
+
+  it("names a Wi-Fi access point by its SSID, not its radio address", () => {
+    expect(
+      getTopologyNodeName(
+        node({
+          id: "ap_1",
+          kind: "wifi_ap",
+          network_type: "wifi",
+          ssid: "we@home",
+          network_name: "50:91:00:D9:62:00",
+        }),
+        mockHass()
+      )
+    ).toBe("we@home");
+  });
+
+  it("falls back to the BSSID when the server sends no SSID", () => {
+    expect(
+      getTopologyNodeName(
+        node({
+          id: "ap_1",
+          kind: "wifi_ap",
+          network_type: "wifi",
+          ssid: null,
+          network_name: "50:91:00:D9:62:00",
+        }),
+        mockHass()
+      )
+    ).toBe("50:91:00:D9:62:00");
+  });
+});
+
+describe("createMatterNetworkChartData", () => {
+  it("maps a thread mesh with a border router", () => {
+    const hass = mockHass(
+      { dev1: { name: "Leader plug", area_id: "living" } },
+      { living: { name: "Living room" } }
+    );
+    const data = createMatterNetworkChartData(
+      topology(
+        [
+          node({ id: "1", node_id: 1, ha_device_id: "dev1", role: "leader" }),
+          node({ id: "2", node_id: 2, role: "end_device", available: true }),
+          node({ id: "br_1", kind: "border_router", vendor_name: "Apple" }),
+        ],
+        [
+          connection({
+            source: "1",
+            target: "2",
+            strength: "medium",
+            source_to_target: { strength: "medium", lqi: 2 },
+            target_to_source: { strength: "medium", lqi: 2 },
+          }),
+          connection({
+            source: "1",
+            target: "br_1",
+            source_to_target: { strength: "strong", lqi: 3 },
+            target_to_source: { strength: "strong", lqi: 3 },
+          }),
+        ]
+      ),
+      hass,
+      element
+    );
+
+    expect(data.categories).toHaveLength(7);
+    // Home Assistant root + the 3 topology nodes
+    expect(data.nodes).toHaveLength(4);
+
+    const ha = data.nodes[0];
+    expect(ha.id).toBe("ha");
+    expect(ha.category).toBe(0);
+    expect(ha.fixed).toBe(true);
+    expect(ha.polarDistance).toBe(0);
+
+    const leader = data.nodes.find((n) => n.id === "1")!;
+    expect(leader.name).toBe("Leader plug");
+    expect(leader.context).toBe("Living room");
+    expect(leader.category).toBe(2);
+    expect(leader.itemStyle?.borderWidth).toBe(2);
+
+    const endDevice = data.nodes.find((n) => n.id === "2")!;
+    expect(endDevice.category).toBe(3);
+    expect(endDevice.itemStyle?.borderWidth).toBeUndefined();
+
+    const borderRouter = data.nodes.find((n) => n.id === "br_1")!;
+    expect(borderRouter.category).toBe(1);
+    expect(borderRouter.symbol).toBe("roundRect");
+
+    const meshLink = data.links.find(
+      (l) => l.source === "1" && l.target === "2"
+    )!;
+    expect(meshLink.value).toBe(3);
+    expect(meshLink.reverseValue).toBe(3);
+    expect(meshLink.lineStyle?.type).toBe("solid");
+
+    // HA anchors to the border router (the mesh's infrastructure), not to
+    // the individual routers hanging off it
+    const haLink = data.links.find((l) => l.source === "ha")!;
+    expect(haLink.target).toBe("br_1");
+    expect(haLink.symbol).toBe("none");
+    expect(data.links.filter((l) => l.source === "ha")).toHaveLength(1);
+  });
+
+  it("marks asymmetric links dashed and keeps one-way arrows", () => {
+    const data = createMatterNetworkChartData(
+      topology(
+        [
+          node({ id: "1", node_id: 1, role: "router" }),
+          node({ id: "2", node_id: 2, role: "router" }),
+          node({ id: "3", node_id: 3, role: "router" }),
+        ],
+        [
+          connection({
+            source: "1",
+            target: "2",
+            source_to_target: { strength: "strong", lqi: 3 },
+            target_to_source: { strength: "weak", lqi: 1 },
+          }),
+          // only observed from node 3's side: 3 → 2
+          connection({
+            source: "2",
+            target: "3",
+            strength: "medium",
+            target_to_source: { strength: "medium", lqi: 2 },
+          }),
+        ]
+      ),
+      mockHass(),
+      element
+    );
+
+    const asymmetric = data.links.find(
+      (l) => l.source === "1" && l.target === "2"
+    )!;
+    expect(asymmetric.lineStyle?.type).toBe("dashed");
+    expect(asymmetric.value).toBe(4);
+    expect(asymmetric.reverseValue).toBe(2);
+
+    // one-way link is flipped so the arrow points the observed direction
+    const oneWay = data.links.find(
+      (l) => l.source === "3" && l.target === "2"
+    )!;
+    expect(oneWay.reverseValue).toBeUndefined();
+    expect(oneWay.symbolSize).toBeGreaterThan(0);
+    expect(oneWay.lineStyle?.type).toBe("dashed");
+  });
+
+  it("suppresses direction arrows on route-table edges", () => {
+    const data = createMatterNetworkChartData(
+      topology(
+        [
+          node({ id: "1", node_id: 1, role: "router" }),
+          node({ id: "2", node_id: 2, role: "router" }),
+        ],
+        [
+          connection({
+            source: "1",
+            target: "2",
+            // no measurement is "unknown"; "none" means observed dead
+            strength: "unknown",
+            via_route_table: true,
+            path_cost: 1,
+          }),
+        ]
+      ),
+      mockHass(),
+      element
+    );
+
+    const link = data.links[0];
+    expect(link.value).toBe(2);
+    expect(link.reverseValue).toBe(2);
+    expect(link.lineStyle?.type).toBe("dotted");
+  });
+
+  it("keeps every node attached to the force layout", () => {
+    const data = createMatterNetworkChartData(
+      topology(
+        [
+          node({ id: "1", node_id: 1, role: "router" }),
+          node({ id: "2", node_id: 2, role: "router" }),
+          node({ id: "3", node_id: 3, role: "end_device" }),
+          node({ id: "br_1", kind: "border_router" }),
+        ],
+        [
+          connection({
+            source: "1",
+            target: "br_1",
+            source_to_target: { strength: "strong", lqi: 3 },
+            target_to_source: { strength: "strong", lqi: 3 },
+          }),
+          connection({
+            source: "1",
+            target: "2",
+            strength: "weak",
+            source_to_target: { strength: "weak", lqi: 1 },
+            target_to_source: { strength: "weak", lqi: 1 },
+          }),
+          connection({
+            source: "2",
+            target: "3",
+            strength: "weak",
+            source_to_target: { strength: "weak", lqi: 1 },
+            target_to_source: { strength: "weak", lqi: 1 },
+          }),
+        ]
+      ),
+      mockHass(),
+      element
+    );
+
+    // hub link stays active, and every node has at least one active link
+    const hubLink = data.links.find((l) => l.target === "br_1")!;
+    expect(hubLink.ignoreForceLayout).toBe(false);
+    data.nodes.forEach((n) => {
+      const nodeLinks = data.links.filter(
+        (l) => l.source === n.id || l.target === n.id
+      );
+      expect(
+        nodeLinks.some((l) => !l.ignoreForceLayout),
+        `node ${n.id} has no active link`
+      ).toBe(true);
+    });
+  });
+
+  it("tolerates minimal nodes and skips connections to unknown nodes", () => {
+    const data = createMatterNetworkChartData(
+      topology(
+        [node({ id: "1" })],
+        [connection({ source: "1", target: "missing" })]
+      ),
+      mockHass(),
+      element
+    );
+
+    // Home Assistant root + the single topology node
+    expect(data.nodes).toHaveLength(2);
+    // the bogus connection is skipped, and a node with no visible route to
+    // Home Assistant gets no invented edge either
+    expect(data.links).toHaveLength(0);
+  });
+
+  it("floats routers whose route to Home Assistant is not visible", () => {
+    const data = createMatterNetworkChartData(
+      topology([
+        node({ id: "1", node_id: 1, role: "router" }),
+        node({ id: "2", node_id: 2, role: "router" }),
+      ]),
+      mockHass(),
+      element
+    );
+
+    // with no border router or access point in the graph there is no known
+    // path, and a drawn edge would read as a physical link
+    expect(data.links.filter((l) => l.source === "ha")).toHaveLength(0);
+    expect(data.nodes.map((n) => n.id).sort()).toEqual(["1", "2", "ha"]);
+  });
+
+  it("shows an access point's radio address beside its SSID, and never twice", () => {
+    const named = createMatterNetworkChartData(
+      topology([
+        node({
+          id: "ap_1",
+          kind: "wifi_ap",
+          network_type: "wifi",
+          ssid: "we@home",
+          bssid: "50:91:00:D9:62:00",
+          network_name: "50:91:00:D9:62:00",
+        }),
+      ]),
+      mockHass(),
+      element
+    );
+    const ap = named.nodes.find((n) => n.id === "ap_1")!;
+    // the radio address is what distinguishes two radios of one mesh
+    expect(ap.name).toBe("we@home");
+    expect(ap.context).toBe("50:91:00:D9:62:00");
+
+    const unnamed = createMatterNetworkChartData(
+      topology([
+        node({
+          id: "ap_1",
+          kind: "wifi_ap",
+          network_type: "wifi",
+          network_name: "50:91:00:D9:62:00",
+        }),
+      ]),
+      mockHass(),
+      element
+    );
+    const bare = unnamed.nodes.find((n) => n.id === "ap_1")!;
+    // without an SSID the name is already the address, so no context repeat
+    expect(bare.name).toBe("50:91:00:D9:62:00");
+    expect(bare.context).toBeUndefined();
+  });
+
+  it("leaves a component of only unknown neighbours unanchored", () => {
+    const data = createMatterNetworkChartData(
+      topology(
+        [
+          node({ id: "1", node_id: 1, role: "router" }),
+          node({ id: "unknown_1", kind: "thread_unknown" }),
+          node({ id: "unknown_2", kind: "thread_unknown" }),
+        ],
+        [connection({ source: "unknown_1", target: "unknown_2" })]
+      ),
+      mockHass(),
+      element
+    );
+
+    // neither the unknown pair nor the hubless router gets an edge to HA
+    expect(data.links.filter((l) => l.source === "ha")).toHaveLength(0);
+    // the unknown pair keeps its own mesh edge
+    expect(data.links.filter((l) => l.source === "unknown_1")).toHaveLength(1);
+  });
+
+  it("anchors an unknown neighbour through its known peer, not through HA", () => {
+    const data = createMatterNetworkChartData(
+      topology(
+        [
+          node({ id: "1", node_id: 1, role: "router" }),
+          node({ id: "unknown_1", kind: "thread_unknown" }),
+        ],
+        [connection({ source: "1", target: "unknown_1" })]
+      ),
+      mockHass(),
+      element
+    );
+
+    // floating must not mean dropping the node out of the graph
+    expect(data.links.filter((l) => l.source === "ha")).toHaveLength(0);
+    expect(data.nodes.find((n) => n.id === "unknown_1")).toBeDefined();
+    expect(data.links.filter((l) => l.source === "1")).toHaveLength(1);
+  });
+
+  it("draws a lone unknown neighbour with no links at all", () => {
+    const data = createMatterNetworkChartData(
+      topology([node({ id: "unknown_1", kind: "thread_unknown" })]),
+      mockHass(),
+      element
+    );
+
+    expect(data.links).toHaveLength(0);
+    // polarDistance is what places an unlinked node in ha-network-graph;
+    // at 0 it would stack on the origin instead
+    const unknown = data.nodes.find((n) => n.id === "unknown_1")!;
+    expect(unknown.polarDistance).toBe(0.8);
+  });
+
+  it("colors links by transport, not by signal level", () => {
+    const data = createMatterNetworkChartData(
+      topology(
+        [
+          node({ id: "br_1", kind: "border_router" }),
+          node({ id: "1", node_id: 1, role: "router" }),
+          node({ id: "ap_1", kind: "wifi_ap", network_type: "wifi" }),
+          node({ id: "7", node_id: 7, network_type: "wifi", role: "station" }),
+        ],
+        [
+          connection({ source: "1", target: "br_1", strength: "weak" }),
+          connection({
+            source: "7",
+            target: "ap_1",
+            network: "wifi",
+            strength: "strong",
+          }),
+        ]
+      ),
+      mockHass(),
+      themedElement()
+    );
+
+    // a weak thread link and a strong wi-fi link differ by transport in the
+    // color channel and by level in the width channel
+    const threadLink = data.links.find((l) => l.source === "1")!;
+    const wifiLink = data.links.find((l) => l.source === "7")!;
+    expect(threadLink.lineStyle?.color).toBe("#926bc7");
+    expect(threadLink.lineStyle?.width).toBe(1);
+    expect(wifiLink.lineStyle?.color).toBe("#ff9800");
+    expect(wifiLink.lineStyle?.width).toBe(3);
+
+    // each hub node wears the same hue as the links behind it
+    expect(data.nodes.find((n) => n.id === "ap_1")!.itemStyle?.color).toBe(
+      "#ff9800"
+    );
+    expect(data.nodes.find((n) => n.id === "br_1")!.itemStyle?.color).toBe(
+      "#926bc7"
+    );
+
+    // an HA edge carries the hue of the transport behind that hub, so one
+    // network reads as one color the whole way back
+    const threadSpine = data.links.find(
+      (l) => l.source === "ha" && l.target === "br_1"
+    )!;
+    const wifiSpine = data.links.find(
+      (l) => l.source === "ha" && l.target === "ap_1"
+    )!;
+    expect(threadSpine.lineStyle?.color).toBe("#926bc7");
+    expect(wifiSpine.lineStyle?.color).toBe("#ff9800");
+  });
+
+  it("does not draw a link whose every direction is dead", () => {
+    const data = createMatterNetworkChartData(
+      topology(
+        [
+          node({ id: "br_1", kind: "border_router" }),
+          node({ id: "1", node_id: 1, role: "router" }),
+        ],
+        [connection({ source: "1", target: "br_1", strength: "none" })]
+      ),
+      mockHass(),
+      themedElement()
+    );
+
+    // the summary strength is the strongest direction, so "none" means every
+    // direction is dead -- a stale entry, not a weak link
+    expect(data.links.find((l) => l.source === "1")).toBeUndefined();
+    // the border router keeps its own edge to Home Assistant
+    expect(data.links.filter((l) => l.source === "ha")).toHaveLength(1);
+  });
+
+  it("dashes an edge to an inferred or offline endpoint", () => {
+    const data = createMatterNetworkChartData(
+      topology(
+        [
+          node({ id: "1", node_id: 1, role: "router" }),
+          node({ id: "unknown_1", kind: "thread_unknown" }),
+          node({ id: "6", node_id: 6, role: "end_device", available: false }),
+        ],
+        [
+          connection({
+            source: "1",
+            target: "unknown_1",
+            source_to_target: { strength: "medium", lqi: 2 },
+            target_to_source: { strength: "medium", lqi: 2 },
+          }),
+          connection({
+            source: "1",
+            target: "6",
+            source_to_target: { strength: "medium", lqi: 2 },
+            target_to_source: { strength: "medium", lqi: 2 },
+          }),
+        ]
+      ),
+      mockHass(),
+      element
+    );
+
+    // symmetric and two-way, so only the endpoint lowers the confidence
+    const inferred = data.links.find((l) => l.target === "unknown_1")!;
+    const offline = data.links.find((l) => l.target === "6")!;
+    expect(inferred.lineStyle?.type).toBe("dashed");
+    expect(offline.lineStyle?.type).toBe("dashed");
+  });
+
+  it("links Home Assistant to hubs only, and never to a hubless node", () => {
+    const data = createMatterNetworkChartData(
+      topology(
+        [
+          node({ id: "br_1", kind: "border_router", host_name: "Cuisine" }),
+          node({ id: "1", node_id: 1, role: "router" }),
+          node({ id: "9", node_id: 9, role: "router" }),
+        ],
+        [connection({ source: "1", target: "br_1" })]
+      ),
+      mockHass(),
+      element
+    );
+
+    // HA -> border router is a real path
+    const hubLink = data.links.find(
+      (l) => l.source === "ha" && l.target === "br_1"
+    )!;
+    expect(hubLink.lineStyle?.type).toBe("solid");
+    // symbol, not the falsy value, is what keeps the arrowhead off
+    expect(hubLink.symbol).toBe("none");
+    expect(hubLink.reverseValue).toBeUndefined();
+
+    // node 9 has no route we can see, so it is left floating
+    expect(
+      data.links.find((l) => l.source === "ha" && l.target === "9")
+    ).toBeUndefined();
+
+    // the wire host_name reaches the rendered label, not just the helper
+    expect(data.nodes.find((n) => n.id === "br_1")!.name).toBe("Cuisine");
+  });
+
+  it("routes HA through the Wi-Fi access point, not the stations", () => {
+    const data = createMatterNetworkChartData(
+      topology(
+        [
+          node({
+            id: "ap_112233445566",
+            kind: "wifi_ap",
+            network_type: "wifi",
+          }),
+          node({ id: "7", node_id: 7, network_type: "wifi", role: "station" }),
+          node({ id: "8", node_id: 8, network_type: "wifi", role: "station" }),
+        ],
+        [
+          connection({
+            source: "7",
+            target: "ap_112233445566",
+            network: "wifi",
+            source_to_target: { strength: "strong", rssi: -55 },
+          }),
+          connection({
+            source: "8",
+            target: "ap_112233445566",
+            network: "wifi",
+            source_to_target: { strength: "medium", rssi: -70 },
+          }),
+        ]
+      ),
+      mockHass(),
+      element
+    );
+
+    const haTargets = data.links
+      .filter((l) => l.source === "ha")
+      .map((l) => l.target);
+    expect(haTargets).toEqual(["ap_112233445566"]);
+  });
+
+  it("adds the network name to the context when there are multiple networks", () => {
+    const data = createMatterNetworkChartData(
+      topology([
+        node({
+          id: "1",
+          node_id: 1,
+          ext_pan_id: "AAA",
+          network_name: "NetA",
+        }),
+        node({
+          id: "2",
+          node_id: 2,
+          ext_pan_id: "BBB",
+          network_name: "NetB",
+        }),
+      ]),
+      mockHass(),
+      element
+    );
+
+    expect(data.nodes.find((n) => n.id === "1")!.context).toBe("NetA");
+    expect(data.nodes.find((n) => n.id === "2")!.context).toBe("NetB");
+  });
+});
@@ -0,0 +1,241 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { HomeAssistant } from "../../../../src/types";
+import type * as HostModule from "../../../../src/data/hassio/host";
+import type * as MountsModule from "../../../../src/data/supervisor/mounts";
+import {
+  fetchHassioHostInfo,
+  fetchHostDisksUsage,
+} from "../../../../src/data/hassio/host";
+import {
+  fetchSupervisorMounts,
+  SupervisorMountState,
+  SupervisorMountType,
+  SupervisorMountUsage,
+} from "../../../../src/data/supervisor/mounts";
+import "../../../../src/panels/config/storage/ha-config-section-storage";
+
+// Heavy children are irrelevant here and drag in echarts / ResizeObserver.
+vi.mock("../../../../src/panels/config/storage/storage-breakdown-chart", () => {
+  customElements.define(
+    "storage-breakdown-chart",
+    class extends HTMLElement {}
+  );
+  return {};
+});
+vi.mock("../../../../src/layouts/hass-subpage", () => {
+  customElements.define("hass-subpage", class extends HTMLElement {});
+  return {};
+});
+vi.mock("../../../../src/panels/config/core/ha-config-analytics", () => ({}));
+vi.mock("../../../../src/components/ha-segmented-bar", () => {
+  customElements.define("ha-segmented-bar", class extends HTMLElement {});
+  return {};
+});
+vi.mock("../../../../src/components/ha-list", () => {
+  customElements.define("ha-list", class extends HTMLElement {});
+  return {};
+});
+vi.mock("../../../../src/components/ha-list-item", () => {
+  customElements.define("ha-list-item", class extends HTMLElement {});
+  return {};
+});
+vi.mock("../../../../src/components/ha-card", () => {
+  customElements.define("ha-card", class extends HTMLElement {});
+  return {};
+});
+vi.mock("../../../../src/components/ha-alert", () => {
+  customElements.define("ha-alert", class extends HTMLElement {});
+  return {};
+});
+vi.mock("../../../../src/components/ha-button", () => {
+  customElements.define("ha-button", class extends HTMLElement {});
+  return {};
+});
+vi.mock("../../../../src/components/ha-icon-button", () => {
+  customElements.define("ha-icon-button", class extends HTMLElement {});
+  return {};
+});
+vi.mock("../../../../src/components/ha-icon-next", () => {
+  customElements.define("ha-icon-next", class extends HTMLElement {});
+  return {};
+});
+vi.mock("../../../../src/components/ha-svg-icon", () => {
+  customElements.define("ha-svg-icon", class extends HTMLElement {});
+  return {};
+});
+vi.mock("../../../../src/components/ha-bar", () => {
+  customElements.define("ha-bar", class extends HTMLElement {});
+  return {};
+});
+vi.mock("../../../../src/components/ha-spinner", () => {
+  customElements.define("ha-spinner", class extends HTMLElement {});
+  return {};
+});
+
+vi.mock("../../../../src/data/hassio/host", async (importOriginal) => ({
+  ...(await importOriginal<typeof HostModule>()),
+  fetchHassioHostInfo: vi.fn(),
+  fetchHostDisksUsage: vi.fn(),
+}));
+
+vi.mock("../../../../src/data/supervisor/mounts", async (importOriginal) => ({
+  ...(await importOriginal<typeof MountsModule>()),
+  fetchSupervisorMounts: vi.fn(),
+  reloadSupervisorMount: vi.fn(),
+}));
+
+interface Deferred<T> {
+  promise: Promise<T>;
+  resolve: (value: T) => void;
+  reject: (reason?: unknown) => void;
+}
+
+const deferred = <T>(): Deferred<T> => {
+  let resolve!: (value: T) => void;
+  let reject!: (reason?: unknown) => void;
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return { promise, resolve, reject };
+};
+
+const mount = (name: string, state: SupervisorMountState) => ({
+  name,
+  usage: SupervisorMountUsage.MEDIA,
+  type: SupervisorMountType.CIFS,
+  server: `${name}.local`,
+  port: 445,
+  share: "media",
+  state,
+});
+
+const hass = {
+  localize: (key: string, params?: Record<string, unknown>) =>
+    key === "ui.panel.config.storage.detailed_description"
+      ? `${params!.used} of ${params!.total} used`
+      : key,
+  config: { components: ["hassio"] },
+  // _renderDiskLifeTime formats a percentage, which needs the locale.
+  locale: { language: "en" },
+} as unknown as HomeAssistant;
+
+const nextTask = () =>
+  new Promise<void>((resolve) => {
+    setTimeout(resolve, 0);
+  });
+
+const rows = (el: HTMLElement) =>
+  Array.from(el.shadowRoot!.querySelectorAll("ha-list-item"));
+
+const rowFor = (el: HTMLElement, name: string) =>
+  rows(el).find((row) => row.textContent?.includes(name));
+
+describe("ha-config-section-storage per-mount usage", () => {
+  let usageCalls: Record<string, Deferred<any>>;
+
+  beforeEach(() => {
+    usageCalls = {};
+    vi.mocked(fetchHassioHostInfo).mockResolvedValue({
+      features: ["mount"],
+      disk_life_time: 5,
+    } as any);
+    vi.mocked(fetchSupervisorMounts).mockResolvedValue({
+      default_backup_mount: null,
+      mounts: [
+        mount("alpha", SupervisorMountState.ACTIVE),
+        mount("beta", SupervisorMountState.ACTIVE),
+        mount("broken", SupervisorMountState.FAILED),
+      ],
+    } as any);
+    vi.mocked(fetchHostDisksUsage).mockImplementation(
+      (_hass, disk = "default") => {
+        // The panel's own disk-metrics call must not interfere with the row calls.
+        if (disk === "default") {
+          return new Promise(() => {
+            // never settles
+          });
+        }
+        usageCalls[disk] = deferred<any>();
+        return usageCalls[disk].promise;
+      }
+    );
+  });
+
+  afterEach(() => {
+    document.body.replaceChildren();
+    vi.clearAllMocks();
+  });
+
+  const render = async () => {
+    const el = document.createElement("ha-config-section-storage");
+    (el as any).hass = hass;
+    document.body.append(el);
+    await nextTask();
+    await (el as any).updateComplete;
+    return el as HTMLElement;
+  };
+
+  it("asks only active mounts for usage", async () => {
+    await render();
+    const asked = vi
+      .mocked(fetchHostDisksUsage)
+      .mock.calls.map((call) => call[1])
+      .filter((disk) => disk !== "default");
+    expect(asked).toEqual(["alpha", "beta"]);
+    expect(asked).not.toContain("broken");
+  });
+
+  it("renders the rows before any usage arrives", async () => {
+    const el = await render();
+    expect(rows(el)).toHaveLength(3);
+    expect(rowFor(el, "alpha")!.querySelector("ha-spinner")).not.toBeNull();
+  });
+
+  it("fills in each row as its own request settles", async () => {
+    const el = await render();
+
+    usageCalls.alpha.resolve({
+      id: "alpha",
+      label: "alpha",
+      total_bytes: 1000,
+      used_bytes: 500,
+    });
+    await nextTask();
+    await (el as any).updateComplete;
+
+    expect(rowFor(el, "alpha")!.textContent).toContain(
+      "500 Bytes of 1000 Bytes used"
+    );
+    // beta has not answered yet, so it must still be pending, not blanked.
+    expect(rowFor(el, "beta")!.querySelector("ha-spinner")).not.toBeNull();
+    expect(rowFor(el, "alpha")!.querySelector("ha-spinner")).toBeNull();
+  });
+
+  it("leaves a row without usage when its request fails, and keeps the others", async () => {
+    const el = await render();
+
+    usageCalls.alpha.resolve({
+      id: "alpha",
+      label: "alpha",
+      total_bytes: 1000,
+      used_bytes: 500,
+    });
+    usageCalls.beta.reject(new Error("dead server"));
+    await nextTask();
+    await (el as any).updateComplete;
+
+    const beta = rowFor(el, "beta")!;
+    expect(beta.querySelector("ha-spinner")).toBeNull();
+    expect(beta.querySelector("ha-bar")).toBeNull();
+    expect(beta.textContent).not.toContain("used");
+    expect(rowFor(el, "alpha")!.querySelector("ha-bar")).not.toBeNull();
+  });
+
+  it("never shows usage for a mount that is not active", async () => {
+    const el = await render();
+    const broken = rowFor(el, "broken")!;
+    expect(broken.querySelector("ha-spinner")).toBeNull();
+    expect(broken.querySelector("ha-bar")).toBeNull();
+  });
+});
Author	SHA1	Message	Date
renovate[bot]GitHubrenovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	308eac97ee	Update dependency marked to v18.0.10 (#53725 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-08-21 06:37:46 +02:00
Paul BotteinandGitHub	6da851219d	Fix stacked toasts when a dashboard is updated in another session (#53719 )	2026-08-20 21:34:08 +02:00
renovate[bot]GitHubrenovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	970be43c3d	Update dependency intl-messageformat to v11.2.14 (#53722 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-08-20 21:01:27 +02:00
karwostsandGitHub	8bb718a486	Cleanup some attributes code (#53713 )	2026-08-20 20:54:59 +02:00
Josef ZweckandGitHub	0e0bc389f8	Show result of action for button presses (#53645 ) * Show result of action on button feature * Add button entity * Add to button entities * add to tile icon * Delay for spinner * Remove result indicator from tile icon	2026-08-20 16:49:55 +02:00
Petar PetrovandGitHub	70a482e0ed	Add keyboard and screen reader navigation to charts (#53533 ) * Add keyboard and screen reader navigation to charts via Chart2Music * Mark charts as busy while the sonification chunk loads * Skip chart sonification when there is nothing to navigate * Drop the direct chart2music dependency * Exclude legend-hidden series when judging chart sonifiability * Push statistics chart times as numbers so sonification reads real dates	2026-08-20 16:55:11 +03:00
Maarten LakerveldandGitHub	5a0db4a796	Show Assist greeting in the assistant's language (#53707 ) The greeting sits in the assistant's chat bubble, so render it in the pipeline's language instead of the interface language. Falls back to the interface language when no translation is available (issue #53703).	2026-08-20 12:49:40 +02:00
iluvdata GitHub Petar Petrov Paulus Schoutsen	622f3e97e6	Add `RepairsFlow` as a `next_flow` from a `RepairsFlow` (#51744 ) * fix flowType in config subentry flows/next_flow * suggested changes * Repair Flow Next Flow Repair * Add repair flow support a new repair flow as the next_flow * Add support for the next_flow being another repair flow * fix lint errors * Reviewer response and fix linter error * Revert to generics to avoid multiple casts * Move show-dialog-repair-flows to dialogs * Update src/dialogs/config-flow/dialog-data-entry-flow.ts * Apply suggestions from code review * Apply suggestion from @MindFreeze * format --------- Co-authored-by: Petar Petrov <[email protected]> Co-authored-by: Paulus Schoutsen <[email protected]>	2026-08-20 11:24:23 +03:00
renovate[bot]GitHubrenovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	3091362040	Update dependency @html-eslint/eslint-plugin to v0.65.0 (#53714 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-08-20 11:08:20 +03:00
Paul BotteinandGitHub	3c7560a4e2	Add indeterminate and controlled selection to lists (#53706 )	2026-08-19 23:26:40 +02:00
Petar Petrov GitHub Simon Lamon	a9e178cb0e	Show per-mount storage usage on the storage page (#53683 ) * Show per-mount storage usage on the storage page Each active mount now fetches its own usage from the Supervisor and renders a bar with a used-of-total line under its address. The requests are not awaited, so a slow or unreachable server cannot hold up the rows, and a failed one simply leaves that row without usage. fetchHostDisksUsage now takes a disk and an optional max_depth. The data disk callers keep their depth of 3; mounts send no depth at all, since walking one costs a round trip per directory and the Supervisor already has a sensible per-target default. * Vertically align ha-bar --------- Co-authored-by: Simon Lamon <[email protected]>	2026-08-19 21:18:37 +02:00
Maarten Lakerveld GitHubcopilot-swe-agent[bot] <[email protected]>Simon Lamon	23b83fbd27	Update browserlist (#53691 ) * update browserlist for better packaging * add results of bundle changes * update browserlist, budgets and ecma terser rewrite level * remove results.md used for testing * Apply suggestion from @silamon --------- Co-authored-by: copilot-swe-agent[bot] <[email protected]> Co-authored-by: Simon Lamon <[email protected]>	2026-08-19 18:45:22 +00:00
Marcin Bauer GitHub Claude Opus 5	62849e2630	Fix outlined button border colors (#53704 ) The brand outline pointed at a token that doesn't exist, so CSS fell back to the neutral border and brand outlined buttons drew a gray ring. Disabled outlined buttons only reset their background and label, keeping the variant-coloured border. Also add outlined to the gallery: it has always been a valid appearance but was missing from the documented list the gallery grid is built from, which is why both bugs went unnoticed. Co-authored-by: Claude Opus 5 (1M context) <[email protected]>	2026-08-19 20:37:09 +02:00
renovate[bot]GitHubrenovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	aa3e11f6e9	Update CodeMirror (#53705 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-08-19 20:34:12 +02:00
Paul Bottein GitHub Petar Petrov	82ed13b7fc	Fix filter pane expand animation and use a bottom sheet in narrow mode (#53684 ) * Fix filter pane expand animation and use a bottom sheet in narrow mode * Update src/common/controllers/filter-panel-controller.ts Co-authored-by: Petar Petrov <[email protected]> * Apply suggestion from @MindFreeze --------- Co-authored-by: Petar Petrov <[email protected]>	2026-08-19 16:18:40 +03:00
Petar PetrovandGitHub	089592e7e3	Ignore stale History statistics fetches after the selection changes (#53700 ) * Ignore stale History statistics fetches after the selection changes. A slower fetchStatistics call could finish after a newer sources or date-range request and replace the charts the user is looking at. * Update src/panels/history/ha-panel-history.ts --------- Co-authored-by: Paul Bottein <[email protected]>	2026-08-19 12:00:43 +02:00
Paul BotteinandGitHub	4bc9b2be7b	Remove the unused compact mode from the target picker (#53685 )	2026-08-19 11:48:43 +03:00
renovate[bot]GitHubrenovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	1778b7abff	Update dependency barcode-detector to v3.2.2 (#53702 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-08-19 11:39:58 +03:00
Bram Kragten GitHub Claude Opus 5 Paul Bottein	90567a491a	Redesign History and Activity filtering into a sources pane (#53630 ) * Redesign History and Activity filtering into a sources pane Give both panels the toolbar + left pane layout of the data tables, and merge target picking and filtering into one "Sources" surface, per the UX discussion. - ha-filter-pane: pane on wide screens, bottom sheet on narrow ones, mirroring the filter pane of hass-tabs-subpage-data-table - ha-sources-picker: target picker plus domain, device class and integration filters, shared by both panels - ha-filter-device-classes: new filter panel, labelled with the backend device class names - ha-filter-pane-chip and ha-empty-state: the chip with a filter count badge and the centered placeholder both panels need - ha-date-range-nav: the date range picker as one pill with previous and next steppers, for the toolbar - History draws timeline names above their bar (inside-labels), which gives long names the full width - Activity keeps a floating date header while scrolling, and reset moved into the overflow menu next to refresh and download - Drop the now unused compact and add-on-top modes of ha-target-picker, including ha-target-picker-value-chip - Right-align the clear button in the domains filter header, matching the other filter panels Co-Authored-By: Claude Opus 5 <[email protected]> * Remove dead code breaking the type check * Fix stuck loading state when the selection resolves to no entity * Keep the target picker out of the redesign * Remember the source filters across visits * Truncate timeline names that do not fit the plot * Show device class icons in the sources filter * Open the sources pane by default on wide screens * Show the entity count in the sources chip * Count the same entities in the sources chip and the target picker * Fix sources resolution, fetching and filter badge in History and Activity * Update src/panels/history/ha-panel-history.ts Co-authored-by: Petar Petrov <[email protected]> --------- Co-authored-by: Claude Opus 5 <[email protected]> Co-authored-by: Paul Bottein <[email protected]> Co-authored-by: Petar Petrov <[email protected]>	2026-08-19 11:31:10 +03:00
Paul BotteinandGitHub	409e2b315f	Skip entities assigned to another area when resolving area targets (#53693 )	2026-08-19 08:46:45 +03:00
Petar PetrovandGitHub	eb1f8c1fab	Add Matter network topology visualization page (#53247 ) * Add Matter network topology visualization page * Add central Home Assistant node to Matter network graph * Refine Matter graph HA node: theme-aware memoization, drop dead branch * Render Matter 'unknown' link strength as a present, neutral link * Pass devices to getDeviceArea so bridged nodes inherit their area * Distinguish position-unknown Matter graph anchors and name border routers Anchors to a hubless component only mean the node is reachable, so draw them dotted instead of reusing the solid line that marks a real path through a border router or access point. Also prefer the border router mDNS host name over vendor and model, which several vendors report identically on every unit. * Name Matter access points by SSID and show their radio address Access points were labelled with a BSSID, and the same address was repeated as the node context. Prefer the SSID for the label and keep the radio address as context only when it differs, so the radios of one mesh stay distinguishable without repeating the label. Falls back to today's BSSID against servers that do not send an SSID. * Colour Matter graph links by transport and float unknown neighbours Unknown Thread neighbours are not commissioned on our fabric, so Home Assistant has no operational path to them. A group made only of unknown devices no longer draws an anchor to the Home Assistant node and floats instead of claiming a connection that does not exist. Link colour now encodes the transport, purple for Thread and pink for Wi-Fi, with the signal level left on the line width and spelled out in the tooltip. A dead link keeps the disabled colour, which is the only thing separating it from a healthy weak one now that both are width 1. The edge tooltip names the network, since the graph legend describes nodes only and cannot carry a link entry. * Float Matter nodes whose route to Home Assistant is unknown Only border routers and access points get an edge to the Home Assistant node, because only those are a path we can actually see. A node in a group with neither was previously anchored to Home Assistant with a dotted line, which reads as a physical connection that was never observed. Removing the anchor makes the component walk that picked a representative dead code, so it goes too. * Match the dashboard's line semantics for Matter graph links Dash an edge whose endpoint is inferred rather than commissioned, or is offline, which is the same pair of conditions the matter.js dashboard dashes on. Stop drawing a link whose every direction is dead: the summary strength is the strongest direction, so none means a stale neighbour entry, and the dashboard never draws one either. That also retires the grey dead-link colour, since such links no longer reach the graph. * Carry the transport colour onto the Home Assistant edges An edge from Home Assistant to a hub now takes the colour of the network behind it, so one transport reads as one colour the whole way back instead of changing hue at the hub. Wi-Fi moves from pink to orange: pink sat close to the error red used for offline nodes, while orange is far from both that red and the Thread purple. * Give the Wi-Fi access point node its transport colour The access point wore indigo while everything else on its network was orange. Deriving the category colour from the same helper the links use keeps a hub and its links one hue, and gives the Wi-Fi colour a legend entry it did not have before. * Give the border router node its transport colour too Both hub categories now derive their colour from the same helper as the links, so a network is one hue from Home Assistant through its hub to the devices, and each legend swatch keys the links of that transport. The border router also gains contrast: the shared Thread purple is legible on both the light and the dark card background, where the deep purple it replaces was not.	2026-08-19 08:02:49 +03:00
Paul BotteinandGitHub	29cf30fc1a	Fix check for updates toasts stacking (#53696 )	2026-08-19 06:45:52 +02:00
renovate[bot]GitHubrenovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	f88535c446	Lock file maintenance (#53698 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-08-19 06:43:45 +02:00
Jan BouwhuisandGitHub	b9fd639bb7	Add improved mqtt panel to config section (#53653 ) * Add mqtt config dashboard shortcut * Improve MQTT subscribe panel formatting and add copy button * Standardize MQTT options flow button to a nav card style * Refactor MQTT dashboard * Improve style * Add link to broker connection settings * Test the effect of not exporting the SVG data * Move MQTT svg icon to separate file	2026-08-18 19:00:28 +02:00
Paul BotteinandGitHub	2925dfc14e	Show entity name in template autocomplete info panel (#53695 )	2026-08-18 18:54:03 +02:00
Yosi LevyandGitHub	bb7ec34532	Addons RTL fix (#53692 ) Addon RTL fix	2026-08-18 17:01:41 +02:00
Stefan Agner GitHub Claude Fable 5	89015bc135	Fix backup progress segment order to match backend execution order (#53652 ) * Fix backup progress segment order to match backend execution order The segmented backup progress bar showed Apps, Media, Home Assistant, but Supervisor backs up Home Assistant first since 2024 (supervisor#5203), then add-ons, then folders. The Home Assistant segment activated first while Apps/Media incorrectly showed as completed, and the bar regressed once the apps stage started. Also move the await-addon-restart stages into the last creation group, since Supervisor awaits add-on restarts after the backup file is finished, keeping the progress bar monotonic. Co-Authored-By: Claude Fable 5 <[email protected]> * Keep await restart stages out of MEDIA_STAGES Give them their own constant and merge them into the last creation group only where the ordering constraint applies. Co-Authored-By: Claude Fable 5 <[email protected]> * Group backup setup stages with the first progress segment addon_repositories/app_repositories (and docker_config on older Supervisors) are emitted while the backup is initialized, before the home_assistant stage, so grouping them with the apps segment made the bar regress at the start of a backup. Co-Authored-By: Claude Fable 5 <[email protected]> --------- Co-authored-by: Claude Fable 5 <[email protected]>	2026-08-18 13:52:07 +03:00