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.
Give the Wi-Fi access point node its transport colour
2026-08-18 20:50:04 +00:00 · 2026-08-18 17:42:02 +03:00 · 2026-08-18 17:33:49 +03:00 · 2026-08-18 17:26:30 +03:00 · 2026-08-18 16:45:38 +03:00 · 2026-08-18 16:39:28 +03:00
49 changed files with 3096 additions and 333 deletions
@@ -32,12 +32,12 @@ jobs:
          persist-credentials: false

      - name: Initialize CodeQL
-        uses: github/codeql-action/init@f205ea1c3313d32999d8d6a48b4f6530d4437b38 # v4.37.4
+        uses: github/codeql-action/init@5595ccaf912efad79be6eef63a5619ff05969be3 # v4.37.6
        with:
          languages: javascript-typescript
          build-mode: none

      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@f205ea1c3313d32999d8d6a48b4f6530d4437b38 # v4.37.4
+        uses: github/codeql-action/analyze@5595ccaf912efad79be6eef63a5619ff05969be3 # v4.37.6
        with:
          category: "/language:javascript-typescript"
@@ -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": 595204,
-    "core": 57741,
-    "authorize": 576928,
-    "onboarding": 685964
+    "app": 585518,
+    "core": 57048,
+    "authorize": 552423,
+    "onboarding": 666818
  },
  "frontend-legacy": {
-    "app": 861452,
-    "core": 258557,
-    "authorize": 834356,
-    "onboarding": 1001360
+    "app": 887384,
+    "core": 244482,
+    "authorize": 844995,
+    "onboarding": 1008816
  }
 }
@@ -102,6 +102,11 @@ export const mockEnergy = (hass: MockHomeAssistant) => {
    cost_sensors: {},
    solar_forecast_domains: [],
  }));
+  hass.mockWS("energy/validate", () => ({
+    energy_sources: Array.from({ length: 6 }, () => []),
+    device_consumption: Array.from({ length: 6 }, () => []),
+    device_consumption_water: Array.from({ length: 2 }, () => []),
+  }));
  hass.mockWS(
    "energy/fossil_energy_consumption",
    ({ period }): FossilEnergyConsumption => ({
@@ -1,6 +1,12 @@
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";

 export const mockSensor = (hass: MockHomeAssistant) => {
+  hass.mockWS(
+    "sensor/device_class_convertible_units",
+    ({ device_class }: { device_class: string }) => ({
+      units: device_class === "energy" ? ["kWh"] : ["W"],
+    })
+  );
  hass.mockWS("sensor/numeric_device_classes", () => ({
    numeric_device_classes: [
      "volume_storage",
@@ -15,7 +15,6 @@ const ALL_FEATURES =
  VacuumEntityFeature.STOP +
  VacuumEntityFeature.RETURN_HOME +
  VacuumEntityFeature.FAN_SPEED +
-  VacuumEntityFeature.BATTERY +
  VacuumEntityFeature.STATUS +
  VacuumEntityFeature.LOCATE +
  VacuumEntityFeature.CLEAN_SPOT +
@@ -28,8 +27,6 @@ const ENTITIES = [
    attributes: {
      friendly_name: "Full featured vacuum",
      supported_features: ALL_FEATURES,
-      battery_level: 85,
-      battery_icon: "mdi:battery-80",
      fan_speed: "balanced",
      fan_speed_list: ["silent", "standard", "balanced", "turbo", "max"],
      status: "Charged",
@@ -41,8 +38,6 @@ const ENTITIES = [
    attributes: {
      friendly_name: "Cleaning vacuum",
      supported_features: ALL_FEATURES,
-      battery_level: 62,
-      battery_icon: "mdi:battery-60",
      fan_speed: "turbo",
      fan_speed_list: ["silent", "standard", "balanced", "turbo", "max"],
      status: "Cleaning bedroom",
@@ -58,10 +53,7 @@ const ENTITIES = [
        VacuumEntityFeature.START +
        VacuumEntityFeature.PAUSE +
        VacuumEntityFeature.STOP +
-        VacuumEntityFeature.RETURN_HOME +
-        VacuumEntityFeature.BATTERY,
-      battery_level: 23,
-      battery_icon: "mdi:battery-20",
+        VacuumEntityFeature.RETURN_HOME,
      status: "Returning to dock",
    },
  },
@@ -96,8 +88,6 @@ const ENTITIES = [
    attributes: {
      friendly_name: "Paused vacuum",
      supported_features: ALL_FEATURES,
-      battery_level: 45,
-      battery_icon: "mdi:battery-40",
      fan_speed: "standard",
      fan_speed_list: ["silent", "standard", "balanced", "turbo", "max"],
      status: "Paused",
@@ -103,11 +103,11 @@
    "echarts": "6.1.0",
    "element-internals-polyfill": "3.0.2",
    "fuse.js": "7.5.0",
-    "hls.js": "1.6.17",
+    "hls.js": "1.7.0",
    "home-assistant-js-websocket": "9.6.0",
    "idb-keyval": "6.3.0",
    "intl-messageformat": "11.2.13",
-    "js-yaml": "5.2.3",
+    "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",
    "leaflet.markercluster": "1.5.3",
@@ -151,8 +151,8 @@
    "@octokit/plugin-retry": "8.1.1",
    "@octokit/rest": "22.0.1",
    "@playwright/test": "1.62.1",
-    "@rsdoctor/rspack-plugin": "1.6.1",
-    "@rspack/core": "2.1.9",
+    "@rsdoctor/rspack-plugin": "1.6.2",
+    "@rspack/core": "2.1.10",
    "@rspack/dev-server": "2.2.0",
    "@types/babel__plugin-transform-runtime": "7.9.5",
    "@types/chromecast-caf-receiver": "6.0.26",
@@ -186,7 +186,7 @@
    "fs-extra": "11.4.0",
    "generate-license-file": "4.2.1",
    "glob": "13.0.6",
-    "globals": "17.9.0",
+    "globals": "17.11.0",
    "gulp": "5.0.1",
    "gulp-json-transform": "0.5.0",
    "gulp-rename": "2.1.0",
@@ -223,7 +223,6 @@
    "clean-css": "5.3.3",
    "@lit/reactive-element": "2.1.2",
    "@fullcalendar/daygrid": "6.1.21",
-    "globals": "17.9.0",
    "tslib": "2.8.1",
    "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"
  },
@@ -34,6 +34,8 @@ export class HaButtonToggleGroup extends LitElement {
  @property({ type: Boolean, reflect: true, attribute: "full-width" })
  public fullWidth = false;

+  @property({ type: Boolean }) public disabled = false;
+
  @property() public variant:
    "brand" | "neutral" | "success" | "warning" | "danger" = "brand";

@@ -57,6 +59,7 @@ export class HaButtonToggleGroup extends LitElement {
              .value=${button.value}
              @click=${this._handleClick}
              .title=${button.label}
+              .disabled=${this.disabled}
              .appearance=${this.active === button.value ? "accent" : "filled"}
            >
              ${
@@ -68,6 +68,7 @@ export class HaDurationInput extends LitElement {
                    { label: "-", iconPath: mdiMinusThick, value: "-" },
                  ]}
                  .active=${this._negative ? "-" : "+"}
+                  .disabled=${this.disabled}
                  @value-changed=${this._negativeChanged}
                ></ha-button-toggle-group>
              `
@@ -235,8 +236,8 @@ export class HaDurationInput extends LitElement {
    ev.stopPropagation();
    const negative = (ev.detail?.value || ev.target.value) === "-";
    this._toggleNegative = negative;
-    const value = this.data;
-    if (value) {
+    if (this.data) {
+      const value = { ...this.data };
      FIELDS.forEach((t) => {
        if (value[t]) {
          value[t] = negative ? -Math.abs(value[t]) : Math.abs(value[t]);
@@ -216,7 +216,7 @@ export class HaFilterDomains extends LitElement {
          align-items: center;
        }
        .header ha-icon-button {
-          margin-inline-start: initial;
+          margin-inline-start: auto;
          margin-inline-end: 8px;
        }
        ha-check-list-item {
@@ -0,0 +1,73 @@
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import "./chips/ha-assist-chip";
+import "./ha-svg-icon";
+
+/**
+ * Chip that opens a filter pane, with a badge showing how many filters are
+ * active.
+ */
+@customElement("ha-filter-pane-chip")
+export class HaFilterPaneChip extends LitElement {
+  @property() public label = "";
+
+  /** SVG path of the leading icon. */
+  @property() public path?: string;
+
+  /** Number of active filters, shown as a badge when there is at least one. */
+  @property({ type: Number }) public count = 0;
+
+  @property({ type: Boolean }) public active = false;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  protected render() {
+    return html`
+      <ha-assist-chip
+        .label=${this.label}
+        .active=${this.active}
+        .disabled=${this.disabled}
+      >
+        ${
+          this.path
+            ? html`<ha-svg-icon slot="icon" .path=${this.path}></ha-svg-icon>`
+            : nothing
+        }
+      </ha-assist-chip>
+      ${this.count ? html`<div class="badge">${this.count}</div>` : nothing}
+    `;
+  }
+
+  static styles = css`
+    :host {
+      position: relative;
+      display: inline-block;
+      --ha-assist-chip-container-shape: 10px;
+    }
+
+    .badge {
+      position: absolute;
+      top: -4px;
+      right: -4px;
+      inset-inline-end: -4px;
+      inset-inline-start: initial;
+      min-width: 16px;
+      box-sizing: border-box;
+      border-radius: var(--ha-border-radius-circle);
+      font-size: var(--ha-font-size-xs);
+      font-weight: var(--ha-font-weight-normal);
+      background-color: var(--primary-color);
+      line-height: var(--ha-line-height-normal);
+      text-align: center;
+      padding: 0 2px;
+      color: var(--text-primary-color);
+      pointer-events: none;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-filter-pane-chip": HaFilterPaneChip;
+  }
+}
@@ -81,6 +81,7 @@ export class HaChooseSelector extends LitElement {
        .required=${this.required}
        @value-changed=${this._handleValueChanged}
        .helper=${this.helper}
+        .localizeValue=${this.localizeValue}
      ></ha-selector>`;
  }

@@ -107,7 +108,12 @@ export class HaChooseSelector extends LitElement {
        : {
            [this._activeChoice!]: this.value,
          };
-    this._activeChoice = ev.detail?.value || ev.target.value;
+    const choice = ev.detail?.value || ev.target.value;
+    this._activeChoice = choice;
+    if (choice && "constant" in this.selector.choose.choices[choice].selector) {
+      value[choice] =
+        this.selector.choose.choices[choice].selector.constant?.value;
+    }
    fireEvent(this, "value-changed", {
      value: {
        ...value,
@@ -664,6 +664,7 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
          display: flex;
          flex-direction: column;
          overflow: hidden;
+          overscroll-behavior: contain;
          -ms-user-select: none;
          -webkit-user-select: none;
          -moz-user-select: none;
@@ -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;
@@ -22,7 +22,6 @@ export enum VacuumEntityFeature {
  STOP = 8,
  RETURN_HOME = 16,
  FAN_SPEED = 32,
-  BATTERY = 64,
  STATUS = 128,
  SEND_COMMAND = 256,
  LOCATE = 512,
@@ -34,7 +33,6 @@ export enum VacuumEntityFeature {
 }

 interface VacuumEntityAttributes extends HassEntityAttributeBase {
-  battery_level?: number;
  fan_speed?: string;
  fan_speed_list?: string[];
  [key: string]: any;
@@ -566,9 +566,10 @@ export const getWeatherStateIcon = (
  if (userDefinedIcon) {
    return html`
      <div
-        style="background-size: cover;${styleMap({
+        style=${styleMap({
+          "background-size": "cover",
          "background-image": userDefinedIcon,
-        })}"
+        })}
      ></div>
    `;
  }
@@ -1,6 +1,7 @@
 import type { Connection, UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { HomeAssistant } from "../types";
 import { callWS } from "../util/websocket";
+import type { DeviceRegistryEntry } from "./device/device_registry";

 export enum InclusionState {
  /** The controller isn't doing anything regarding inclusion. */
@@ -465,6 +466,27 @@ export interface RequestedGrant {
  clientSideAuth: boolean;
 }

+/**
+ * Get the Z-Wave node ID of a device from its registry identifiers, which have
+ * the form `<home id>-<node id>[-<manufacturer>:<product type>:<product id>]`.
+ * Returns undefined for devices without a node, e.g. provisioning entries.
+ */
+export const getNodeIdFromDevice = (
+  device: DeviceRegistryEntry
+): number | undefined => {
+  for (const [domain, identifier] of device.identifiers) {
+    // a provisioning entry is identified by its DSK, whose blocks parse as numbers
+    if (domain !== "zwave_js" || identifier.startsWith("provision_")) {
+      continue;
+    }
+    const nodeId = parseInt(identifier.split("-")[1]);
+    if (!isNaN(nodeId)) {
+      return nodeId;
+    }
+  }
+  return undefined;
+};
+
 export const invokeZWaveCCApi = <T = unknown>(
  hass: HomeAssistant,
  device_id: string,
@@ -159,23 +159,6 @@ class MoreInfoVacuum extends LitElement {
      `;
    }

-    // Use deprecated battery_level and battery_icon attributes
-    if (
-      supportsFeature(this.stateObj, VacuumEntityFeature.BATTERY) &&
-      this.stateObj.attributes.battery_level
-    ) {
-      return html`
-        <span class="battery" slot="after-time">
-          <span
-            >${Math.round(
-              this.stateObj.attributes.battery_level
-            )}${blankBeforePercent(this._i18n.locale)}%</span
-          >
-          <ha-icon .icon=${this.stateObj.attributes.battery_icon}></ha-icon>
-        </span>
-      `;
-    }
-
    return nothing;
  }

@@ -74,11 +74,6 @@ export class MockVacuumEntity extends MockBaseEntity {
      stateAttrs.fan_speed = attrs.fan_speed ?? null;
    }

-    if (supportsFeatureFromAttributes(attrs, VacuumEntityFeature.BATTERY)) {
-      stateAttrs.battery_level = attrs.battery_level ?? null;
-      stateAttrs.battery_icon = attrs.battery_icon ?? null;
-    }
-
    if (supportsFeatureFromAttributes(attrs, VacuumEntityFeature.STATUS)) {
      stateAttrs.status = attrs.status ?? null;
    }
@@ -34,6 +34,7 @@ import "../components/ha-dialog-footer";
 import "../components/ha-dropdown";
 import type { HaDropdownSelectEvent } from "../components/ha-dropdown";
 import "../components/ha-dropdown-item";
+import "../components/ha-filter-pane-chip";
 import "../components/ha-icon-button";
 import "../components/ha-svg-icon";
 import "../components/input/ha-input-search";
@@ -237,20 +238,13 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
    const localize = this.localizeFunc || this.hass.localize;
    const showPane = this._showPaneController.value ?? !this.narrow;
    const filterButton = this.hasFilters
-      ? html`<div class="relative">
-          <ha-assist-chip
-            .label=${localize("ui.components.subpage-data-table.filters")}
-            .active=${this.filters}
-            @click=${this._toggleFilters}
-          >
-            <ha-svg-icon slot="icon" .path=${mdiFilterVariant}></ha-svg-icon>
-          </ha-assist-chip>
-          ${
-            this.filters
-              ? html`<div class="badge">${this.filters}</div>`
-              : nothing
-          }
-        </div>`
+      ? html`<ha-filter-pane-chip
+          .label=${localize("ui.components.subpage-data-table.filters")}
+          .path=${mdiFilterVariant}
+          .count=${this.filters}
+          .active=${!!this.filters}
+          @click=${this._toggleFilters}
+        ></ha-filter-pane-chip>`
      : nothing;

    const selectModeBtn =
@@ -471,18 +465,14 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
              ? nothing
              : html`<div class="pane" slot="pane">
                  <div class="table-header">
-                    <ha-assist-chip
+                    <ha-filter-pane-chip
                      .label=${localize(
                        "ui.components.subpage-data-table.filters"
                      )}
+                      .path=${mdiFilterVariant}
                      active
                      @click=${this._toggleFilters}
-                    >
-                      <ha-svg-icon
-                        slot="icon"
-                        .path=${mdiFilterVariant}
-                      ></ha-svg-icon>
-                    </ha-assist-chip>
+                    ></ha-filter-pane-chip>
                    ${
                      this.filters
                        ? html`<ha-icon-button
@@ -885,24 +875,6 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
      padding: 16px;
    }

-    .badge {
-      position: absolute;
-      top: -4px;
-      right: -4px;
-      inset-inline-end: -4px;
-      inset-inline-start: initial;
-      min-width: 16px;
-      box-sizing: border-box;
-      border-radius: var(--ha-border-radius-circle);
-      font-size: var(--ha-font-size-xs);
-      font-weight: var(--ha-font-weight-normal);
-      background-color: var(--primary-color);
-      line-height: var(--ha-line-height-normal);
-      text-align: center;
-      padding: 0px 2px;
-      color: var(--text-primary-color);
-    }
-
    .narrow-header-row {
      display: flex;
      align-items: center;
@@ -951,11 +923,8 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
      gap: var(--ha-space-2);
    }

-    .relative {
-      position: relative;
-    }
-
-    ha-assist-chip {
+    ha-assist-chip,
+    ha-filter-pane-chip {
      --ha-assist-chip-container-shape: 10px;
      --ha-assist-chip-container-color: var(--card-background-color);
    }
@@ -49,6 +49,7 @@ const SUPPORTED_UI_TYPES = [

 const secretTag = defineScalarTag("!secret", {
  resolve: (data) => `!secret ${data}`,
+  identify: () => false,
 });

 const ADDON_YAML_SCHEMA = YAML11_SCHEMA.withTags(secretTag);
@@ -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;
+  }
+}
@@ -2,6 +2,7 @@ import type {
  CallbackDataParams,
  TopLevelFormatterParams,
 } from "echarts/types/dist/shared";
+import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -19,11 +20,13 @@ import "../../../../../components/input/ha-input-search";
 import type { HaInputSearch } from "../../../../../components/input/ha-input-search";
 import type { DeviceRegistryEntry } from "../../../../../data/device/device_registry";
 import type {
+  RssiError,
  ZWaveJSNodeStatisticsUpdatedMessage,
  ZWaveJSNodeStatus,
 } from "../../../../../data/zwave_js";
 import {
  fetchZwaveNetworkStatus,
+  getNodeIdFromDevice,
  NodeStatus,
  subscribeZwaveNodeStatistics,
 } from "../../../../../data/zwave_js";
@@ -54,19 +57,36 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {

  @state() private _searchFilter = "";

-  public hassSubscribe() {
-    const devices = Object.values(this.hass.devices).filter((device) =>
-      device.config_entries.some((entry) => entry === this.configEntryId)
-    );
+  // Route statistics reference repeaters by device registry ID
+  private _nodeIdsByDeviceId: Record<string, number> = {};

-    return devices.map((device) =>
-      subscribeZwaveNodeStatistics(this.hass!, device.id, (message) => {
-        const nodeId = message.nodeId ?? message.node_id;
-        this._devices[nodeId!] = device;
-        this._nodeStatistics[nodeId!] = message;
-        this._handleUpdatedNodeStatistics();
-      })
-    );
+  public hassSubscribe() {
+    const subscriptions: Promise<UnsubscribeFunc>[] = [];
+    const devices: Record<number, DeviceRegistryEntry> = {};
+    const nodeIdsByDeviceId: Record<string, number> = {};
+
+    Object.values(this.hass.devices).forEach((device) => {
+      if (!device.config_entries.includes(this.configEntryId)) {
+        return;
+      }
+      const nodeId = getNodeIdFromDevice(device);
+      if (nodeId === undefined) {
+        return;
+      }
+      devices[nodeId] = device;
+      nodeIdsByDeviceId[device.id] = nodeId;
+      subscriptions.push(
+        subscribeZwaveNodeStatistics(this.hass!, device.id, (message) => {
+          this._nodeStatistics[nodeId] = message;
+          this._handleUpdatedNodeStatistics();
+        })
+      );
+    });
+
+    this._nodeIdsByDeviceId = nodeIdsByDeviceId;
+    this._devices = devices;
+
+    return subscriptions;
  }

  public connectedCallback() {
@@ -164,8 +184,10 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
        sourceDevice?.name_by_user ?? sourceDevice?.name ?? source;
      const targetName =
        targetDevice?.name_by_user ?? targetDevice?.name ?? target;
-      const route =
-        this._nodeStatistics[source]?.lwr || this._nodeStatistics[source]?.nlwr;
+      // links point away from the controller, so the route belongs to the target
+      const stats =
+        this._nodeStatistics[target] ?? this._nodeStatistics[source];
+      const route = stats?.lwr || stats?.nlwr;
      return html`${sourceName} →
      ${targetName}${
        route?.protocol_data_rate
@@ -333,55 +355,69 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
        });
      });

+      if (controllerNode === undefined) {
+        return { nodes, links, categories };
+      }
+      const controllerId = String(controllerNode);
+
      Object.entries(nodeStatistics).forEach(([nodeId, stats]) => {
        const route = stats.lwr || stats.nlwr;
-        if (route) {
-          const hops = [
-            ...route.repeaters.map((id, i) => [
-              Object.keys(this._devices).find(
-                (_nodeId) => this._devices[_nodeId]?.id === id
-              )?.[0],
-              route.repeater_rssi[i],
-            ]),
-            [controllerNode!, route.rssi],
-          ];
-          let sourceNode: string = nodeId;
-          hops.forEach(([repeater, rssi]) => {
-            const RSSI = typeof rssi === "number" && rssi <= 0 ? rssi : -100;
-            const existingLink = links.find(
-              (link) =>
-                link.source === sourceNode && link.target === String(repeater)
-            );
-            const width = this._getLineWidth(RSSI);
-            if (existingLink) {
-              existingLink.value = Math.max(existingLink.value!, RSSI);
-              existingLink.lineStyle = {
-                ...existingLink.lineStyle,
-                width: Math.max(existingLink.lineStyle!.width!, width),
-                type:
-                  route.protocol_data_rate > 1
-                    ? "solid"
-                    : existingLink.lineStyle!.type,
-              };
-            } else {
-              links.push({
-                source: sourceNode,
-                target: String(repeater),
-                value: RSSI,
-                lineStyle: {
-                  width,
-                  color:
-                    repeater === controllerNode
-                      ? style.getPropertyValue("--primary-color")
-                      : style.getPropertyValue("--disabled-color"),
-                  type: route.protocol_data_rate > 1 ? "solid" : "dotted",
-                },
-                symbolSize: width * 3,
-              });
-            }
-            sourceNode = String(repeater);
-          });
+        if (!route) {
+          return;
        }
+        // Routes go from the controller to the node via the repeaters, in order.
+        // Each station measures the hop leaving it: the controller reports
+        // `rssi`, repeater i reports `repeater_rssi[i]`.
+        const hops: [string, RssiError | number | null][] = [];
+        let hopRssi = route.rssi;
+        route.repeaters.forEach((deviceId, i) => {
+          const repeaterNodeId = this._nodeIdsByDeviceId[deviceId];
+          // skip repeaters we can't resolve, so the chain stays connected
+          if (repeaterNodeId !== undefined) {
+            hops.push([String(repeaterNodeId), hopRssi]);
+          }
+          hopRssi = route.repeater_rssi[i];
+        });
+        hops.push([nodeId, hopRssi]);
+
+        let sourceNode = controllerId;
+        hops.forEach(([target, rssi]) => {
+          if (target === sourceNode) {
+            return;
+          }
+          const RSSI = typeof rssi === "number" && rssi <= 0 ? rssi : -100;
+          const existingLink = links.find(
+            (link) => link.source === sourceNode && link.target === target
+          );
+          const width = this._getLineWidth(RSSI);
+          if (existingLink) {
+            existingLink.value = Math.max(existingLink.value!, RSSI);
+            existingLink.lineStyle = {
+              ...existingLink.lineStyle,
+              width: Math.max(existingLink.lineStyle!.width!, width),
+              type:
+                route.protocol_data_rate > 1
+                  ? "solid"
+                  : existingLink.lineStyle!.type,
+            };
+          } else {
+            links.push({
+              source: sourceNode,
+              target,
+              value: RSSI,
+              lineStyle: {
+                width,
+                color:
+                  sourceNode === controllerId
+                    ? style.getPropertyValue("--primary-color")
+                    : style.getPropertyValue("--disabled-color"),
+                type: route.protocol_data_rate > 1 ? "solid" : "dotted",
+              },
+              symbolSize: width * 3,
+            });
+          }
+          sourceNode = target;
+        });
      });

      return { nodes, links, categories };
@@ -1,4 +1,4 @@
-import { mdiPencil } from "@mdi/js";
+import { mdiAccount, mdiAccountPlus, mdiPencil } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -19,6 +19,7 @@ import type { PersonMutableParams } from "../../../data/person";
 import type { User } from "../../../data/user";
 import {
  deleteUser,
+  fetchUsers,
  SYSTEM_GROUP_ID_ADMIN,
  SYSTEM_GROUP_ID_USER,
  updateUser,
@@ -36,6 +37,8 @@ import { documentationUrl } from "../../../util/documentation-url";
 import { showAddUserDialog } from "../users/show-dialog-add-user";
 import { showAdminChangePasswordDialog } from "../users/show-dialog-admin-change-password";
 import type { PersonDetailDialogParams } from "./show-dialog-person-detail";
+import { showListItemsDialog } from "../../../dialogs/dialog-list-items/show-list-items-dialog";
+import { computeDomain } from "../../../common/entity/compute_domain";

 const includeDomains = ["device_tracker"];

@@ -85,6 +88,8 @@ class DialogPersonDetail

  @state() private _open = false;

+  private _linkedExistingUser = false;
+
  private _deviceTrackersAvailable = memoizeOne((hass) =>
    Object.keys(hass.states).some(
      (entityId) =>
@@ -140,7 +145,7 @@ class DialogPersonDetail
  private _dialogClosed() {
    // If we do not have a person ID yet (= person creation dialog was just cancelled), but
    // we already created a user ID for it, delete it now to not have it "free floating".
-    if (!this._personExists && this._userId) {
+    if (!this._personExists && this._userId && !this._linkedExistingUser) {
      const callback = this._params?.refreshUsers;
      deleteUser(this.hass, this._userId).then(() => {
        callback?.();
@@ -426,26 +431,71 @@ class DialogPersonDetail
    this._updateDirtyState(this._currentState());
  }

+  private async _linkUser(user: User, newUser: boolean) {
+    this._linkedExistingUser = !newUser;
+    if (this._params!.entry && this._params!.updateEntry) {
+      await this._params!.updateEntry({ user_id: user.id });
+    }
+    if (newUser) {
+      this._params?.refreshUsers?.();
+    }
+    this._user = user;
+    this._userId = user.id;
+    this._isAdmin = user.group_ids.includes(SYSTEM_GROUP_ID_ADMIN);
+    this._localOnly = user.local_only;
+    this._updateDirtyState(this._currentState());
+  }
+
  private async _allowLoginChanged(ev): Promise<void> {
    const target = ev.target;
    if (target.checked) {
      target.checked = false;
-      showAddUserDialog(this, {
-        userAddedCallback: async (user?: User) => {
-          if (user) {
-            target.checked = true;
-            if (this._params!.entry && this._params!.updateEntry) {
-              await this._params!.updateEntry({ user_id: user.id });
+
+      const users = await fetchUsers(this.hass);
+      const currentLinkedUsers = new Set(
+        Object.values(this.hass.states)
+          .filter(
+            (s) =>
+              computeDomain(s.entity_id) === "person" && s.attributes.user_id
+          )
+          .map((s) => s.attributes.user_id)
+      );
+      const eligibleUsers = users.filter(
+        (u) =>
+          !currentLinkedUsers.has(u.id) && !u.system_generated && u.username
+      );
+      const addUserDialog = () =>
+        showAddUserDialog(this, {
+          userAddedCallback: async (user?: User) => {
+            if (user) {
+              target.checked = true;
+              this._linkUser(user, true);
            }
-            this._params?.refreshUsers?.();
-            this._user = user;
-            this._userId = user.id;
-            this._isAdmin = user.group_ids.includes(SYSTEM_GROUP_ID_ADMIN);
-            this._localOnly = user.local_only;
-            this._updateDirtyState(this._currentState());
-          }
-        },
-        name: this._name,
+          },
+          name: this._name,
+        });
+
+      if (eligibleUsers.length === 0) {
+        addUserDialog();
+        return;
+      }
+
+      showListItemsDialog(this, {
+        title: this.hass.localize("ui.panel.config.person.detail.select_user"),
+        items: [
+          {
+            iconPath: mdiAccountPlus,
+            label: this.hass.localize(
+              "ui.panel.config.person.detail.create_new_user"
+            ),
+            action: addUserDialog,
+          },
+          ...eligibleUsers.map((user) => ({
+            iconPath: mdiAccount,
+            label: `${user.name} (${user.username})`,
+            action: () => this._linkUser(user, false),
+          })),
+        ],
      });
    } else if (this._userId) {
      if (
@@ -203,9 +203,28 @@ export const showRepairsFlowDialog = (
        return "";
      },

-      renderCreateEntryDescription(hass, _step) {
+      renderCreateEntryDescription(hass, step) {
+        const description = hass.localize(
+          `component.${issue.domain}.issues.${
+            issue.translation_key || issue.issue_id
+          }.fix_flow.create_entry.${step.description || "default"}`,
+          step.description_placeholders
+        );
+
        return html`
-          <p>${hass.localize("ui.dialogs.repair_flow.success.description")}</p>
+          ${
+            description
+              ? html`
+                  <ha-markdown
+                    allow-svg
+                    breaks
+                    .content=${description}
+                  ></ha-markdown>
+                `
+              : html`<p>
+                  ${hass.localize("ui.dialogs.repair_flow.success.description")}
+                </p>`
+          }
        `;
      },

@@ -291,11 +310,17 @@ export const showRepairsFlowDialog = (
      },

      renderMenuOption(hass, step, option) {
-        return hass.localize(
-          `component.${issue.domain}.issues.${
-            issue.translation_key || issue.issue_id
-          }.fix_flow.step.${step.step_id}.menu_options.${option}`,
-          mergePlaceholders(issue, step)
+        return (
+          hass.localize(
+            `component.${issue.domain}.issues.${
+              issue.translation_key || issue.issue_id
+            }.fix_flow.step.${step.step_id}.menu_options.${option}`,
+            mergePlaceholders(issue, step)
+          ) ||
+          // Newer backends can offer options this frontend has no
+          // translation for yet — show the raw option key instead of
+          // an empty menu entry
+          option
        );
      },

@@ -20,9 +20,10 @@ type ReloadableDomain = Exclude<
  "heading" | "introduction" | "reload"
 >;

-interface TranslatedReloadableDomain {
-  domain: ReloadableDomain;
+interface TranslatedReloadableItem {
+  domain: ReloadableDomain | "frontend";
  name: string;
+  service?: string;
 }

@customElement("tools-yaml-config")
@@ -37,7 +38,7 @@ export class ToolsYamlConfig extends LitElement {

  @state() private _validating = false;

-  @state() private _reloadableDomains: TranslatedReloadableDomain[] = [];
+  @state() private _reloadableItems: TranslatedReloadableItem[] = [];

  @state() private _validateResult?: CheckConfigResult;

@@ -54,10 +55,10 @@ export class ToolsYamlConfig extends LitElement {
        oldHass.config.components !== this.hass.config.components ||
        oldHass.localize !== this.hass.localize)
    ) {
-      this._reloadableDomains = (
+      this._reloadableItems = (
        componentsWithService(this.hass, "reload") as ReloadableDomain[]
      )
-        .map((domain) => ({
+        .map<TranslatedReloadableItem>((domain) => ({
          domain,
          name:
            this.hass.localize(
@@ -68,6 +69,15 @@ export class ToolsYamlConfig extends LitElement {
              { domain: domainToName(this.hass.localize, domain) }
            ),
        }))
+        .concat([
+          {
+            domain: "frontend",
+            service: "reload_themes",
+            name: this.hass.localize(
+              `ui.panel.config.tools.tabs.yaml.section.reloading.themes`
+            ),
+          },
+        ])
        .sort((a, b) =>
          stringCompare(a.name, b.name, this.hass.locale.language)
        );
@@ -190,12 +200,12 @@ export class ToolsYamlConfig extends LitElement {
              )}
            </ha-call-service-button>
          </div>
-          ${this._reloadableDomains.map(
+          ${this._reloadableItems.map(
            (reloadable) => html`
              <div class="card-actions">
                <ha-call-service-button
                  .domain=${reloadable.domain}
-                  service="reload"
+                  .service=${reloadable.service || "reload"}
                  >${reloadable.name}
                </ha-call-service-button>
              </div>
@@ -11,6 +11,11 @@ import type { HomeAssistant } from "../../../../../types";
 // Devices below this fraction of the home total are grouped into an "Other" node
 export const MIN_SANKEY_THRESHOLD_FACTOR = 0.001; // 0.1% of home total

+// Readable capacity of the default 400px card: ~18px per node including the
+// 6px nodeGap. Past this, bars collapse toward the 1px minimum and the labels
+// shrink with them.
+export const DEFAULT_MAX_SANKEY_DEVICES = 20;
+
 // While the graph is assembled, device nodes carry an ad-hoc `parent` field
 // that is not part of the chart's Node interface. The chart ignores it.
 export type SankeyDeviceNode = Node & { parent?: string };
@@ -36,6 +41,103 @@ export const fireSankeyNodeMoreInfo = (el: HTMLElement, node: Node): void => {
  }
 };

+export interface FindDevicesOverCapOptions {
+  devices: DeviceConsumptionEnergyPreference[];
+  /** Max named children per parent. Falsy or non-positive disables the cap. */
+  maxDevices: number | undefined;
+  rootNodeId: string;
+  renderedIds: ReadonlySet<string>;
+  deviceValues: ReadonlyMap<string, number>;
+  getId: (device: DeviceConsumptionEnergyPreference) => string | undefined;
+  /** First ancestor rendered as its own node, else undefined. */
+  getEffectiveParent: (
+    device: DeviceConsumptionEnergyPreference
+  ) => string | undefined;
+}
+
+/**
+ * Node ids to drop from the rendered set because their parent has more rendered
+ * children than `maxDevices`. Callers group the result into the parent's "Other"
+ * node, so the smallest devices merge instead of disappearing.
+ */
+export const findDevicesOverCap = ({
+  devices,
+  maxDevices,
+  rootNodeId,
+  renderedIds,
+  deviceValues,
+  getId,
+  getEffectiveParent,
+}: FindDevicesOverCapOptions): Set<string> => {
+  const grouped = new Set<string>();
+  if (!maxDevices || !Number.isFinite(maxDevices) || maxDevices <= 0) {
+    return grouped;
+  }
+
+  const childrenByParent = new Map<
+    string,
+    { id: string; value: number; idx: number }[]
+  >();
+  const seenIds = new Set<string>();
+  devices.forEach((device, idx) => {
+    const id = getId(device);
+    if (!id || !renderedIds.has(id) || seenIds.has(id)) {
+      return;
+    }
+    seenIds.add(id);
+    const parentKey = getEffectiveParent(device) ?? rootNodeId;
+    if (!childrenByParent.has(parentKey)) {
+      childrenByParent.set(parentKey, []);
+    }
+    childrenByParent.get(parentKey)!.push({
+      id,
+      value: deviceValues.get(id)!,
+      idx,
+    });
+  });
+
+  // Taking the whole subtree stops a grouped device's children from re-parenting
+  // upward while its value, which already includes them, rolls into "Other".
+  const groupSubtree = (id: string): void => {
+    if (grouped.has(id)) {
+      return;
+    }
+    grouped.add(id);
+    childrenByParent.get(id)?.forEach((child) => groupSubtree(child.id));
+  };
+
+  const queue = [rootNodeId];
+  const visited = new Set(queue);
+  while (queue.length) {
+    const children = childrenByParent.get(queue.shift()!);
+    if (!children) {
+      continue;
+    }
+    let kept = children;
+    if (children.length > maxDevices) {
+      // Raw value includes children, so a parent never sorts below its own
+      // child; declaration order breaks ties so the layout is stable.
+      const ranked = [...children].sort(
+        (a, b) => a.value - b.value || a.idx - b.idx
+      );
+      // At least two, because a lone grouped device is rendered by name instead
+      // and would void the cap.
+      ranked
+        .slice(0, Math.max(children.length - maxDevices, 2))
+        .forEach((child) => groupSubtree(child.id));
+      kept = children.filter((child) => !grouped.has(child.id));
+    }
+    kept.forEach((child) => {
+      if (!visited.has(child.id)) {
+        visited.add(child.id);
+        queue.push(child.id);
+      }
+    });
+  }
+
+  return grouped;
+};
+
 export interface BuildSankeyDeviceNodesOptions {
  devices: DeviceConsumptionEnergyPreference[];
  computedStyle: CSSStyleDeclaration;
@@ -44,6 +146,12 @@ export interface BuildSankeyDeviceNodesOptions {
  rootNodeId: string;
  /** Flows below this value are grouped into an "Other" node. */
  minThreshold: number;
+  /**
+   * Max named child nodes per parent. Once a parent has more rendered children
+   * than this, the smallest are grouped into that parent's "Other" node.
+   * Undefined means no cap.
+   */
+  maxDevices?: number;
  /** Per-parent untracked residual only shown when above this value. */
  untrackedFloor: number;
  /** Round the "Other" node value up (instantaneous cards only). */
@@ -76,6 +184,7 @@ export const buildSankeyDeviceNodes = (
    localize,
    rootNodeId,
    minThreshold,
+    maxDevices,
    untrackedFloor,
    ceilOtherValue,
    initialUntracked,
@@ -146,6 +255,19 @@ export const buildSankeyDeviceNodes = (
    return undefined;
  };

+  // The value threshold only catches devices that are a negligible share of the
+  // home total, so a panel of dozens of similar-sized circuits never groups.
+  findDevicesOverCap({
+    devices,
+    maxDevices,
+    rootNodeId,
+    renderedIds,
+    deviceValues,
+    getId,
+    getEffectiveParent: (device) =>
+      findEffectiveParent(device.included_in_stat),
+  }).forEach((id) => renderedIds.delete(id));
+
  devices.forEach((device, idx) => {
    const id = getId(device);
    if (!id) {
@@ -154,8 +276,9 @@ export const buildSankeyDeviceNodes = (
    const value = deviceValues.get(id)!;
    const effectiveParent = findEffectiveParent(device.included_in_stat);

-    if (value < minThreshold) {
-      // Collect small consumers instead of folding them into untracked
+    if (!renderedIds.has(id)) {
+      // Below the value threshold or demoted by the count cap. Collect it
+      // instead of folding it into untracked.
      const parentKey = effectiveParent ?? rootNodeId;
      if (!smallConsumersByParent.has(parentKey)) {
        smallConsumersByParent.set(parentKey, []);
@@ -30,6 +30,7 @@ import { MobileAwareMixin } from "../../../../mixins/mobile-aware-mixin";
 import {
  buildSankeyDeviceNodes,
  buildSankeyLayout,
+  DEFAULT_MAX_SANKEY_DEVICES,
  fireSankeyNodeMoreInfo,
  MIN_SANKEY_THRESHOLD_FACTOR,
 } from "./common/sankey";
@@ -298,6 +299,7 @@ class HuiEnergySankeyCard
      localize: this.hass.localize,
      rootNodeId: "home",
      minThreshold: minEnergyThreshold,
+      maxDevices: this._config.max_devices ?? DEFAULT_MAX_SANKEY_DEVICES,
      untrackedFloor: 0,
      ceilOtherValue: false,
      initialUntracked: homeNode.value,
@@ -271,6 +271,10 @@ export class HuiEnergyUsageGraphCard
  );

  private async _getStatistics(energyData: EnergyData): Promise<void> {
+    if (!this.isConnected) {
+      return;
+    }
+
    const datasets: BarSeriesOption[] = [];

    let yMin = Infinity;
@@ -23,6 +23,7 @@ import { MobileAwareMixin } from "../../../../mixins/mobile-aware-mixin";
 import {
  buildSankeyDeviceNodes,
  buildSankeyLayout,
+  DEFAULT_MAX_SANKEY_DEVICES,
  fireSankeyNodeMoreInfo,
  MIN_SANKEY_THRESHOLD_FACTOR,
 } from "./common/sankey";
@@ -297,6 +298,7 @@ class HuiPowerSankeyCard
      localize: this.hass.localize,
      rootNodeId: "home",
      minThreshold: minPowerThreshold,
+      maxDevices: this._config.max_devices ?? DEFAULT_MAX_SANKEY_DEVICES,
      untrackedFloor: 1,
      ceilOtherValue: true,
      initialUntracked: homeNode.value,
@@ -175,6 +175,10 @@ export class HuiPowerSourcesGraphCard
  );

  private async _getStatistics(energyData: EnergyData): Promise<void> {
+    if (!this.isConnected) {
+      return;
+    }
+
    const result = generatePowerSourcesGraphData({
      localize: this.hass.localize,
      states: this.hass.states,
@@ -36,7 +36,7 @@ import type { HomeAssistant } from "../../../types";
 import { actionHandler } from "../common/directives/action-handler-directive";
 import { findEntities } from "../common/find-entities";
 import { handleAction } from "../common/handle-action";
-import { hasAction } from "../common/has-action";
+import { hasAction, hasAnyAction } from "../common/has-action";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import type {
@@ -300,6 +300,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
    return html`
      <ha-card
        class=${classMap({
+          "no-action": !hasAnyAction(this._config!),
          [this._sizeController.value?.height]: Boolean(
            this._sizeController.value
          ),
@@ -730,6 +731,10 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
          padding: 16px 0;
        }

+        ha-card.no-action {
+          cursor: default;
+        }
+
        .content {
          display: flex;
          flex-wrap: nowrap;
@@ -174,6 +174,7 @@ export interface EnergyCardSankeyConfig extends EnergyCardConfig {
  layout?: "auto" | "vertical" | "horizontal";
  group_by_floor?: boolean;
  group_by_area?: boolean;
+  max_devices?: number;
 }

 export interface EnergyDateSelectorCardConfig extends EnergyCardBaseConfig {
@@ -22,6 +22,7 @@ import { MobileAwareMixin } from "../../../../mixins/mobile-aware-mixin";
 import {
  buildSankeyDeviceNodes,
  buildSankeyLayout,
+  DEFAULT_MAX_SANKEY_DEVICES,
  fireSankeyNodeMoreInfo,
  MIN_SANKEY_THRESHOLD_FACTOR,
 } from "../energy/common/sankey";
@@ -260,6 +261,7 @@ class HuiWaterFlowSankeyCard
      localize: this.hass.localize,
      rootNodeId,
      minThreshold: minFlowThreshold,
+      maxDevices: this._config.max_devices ?? DEFAULT_MAX_SANKEY_DEVICES,
      untrackedFloor: 1,
      ceilOtherValue: true,
      initialUntracked: effectiveTotalInflow,
@@ -27,6 +27,7 @@ import { MobileAwareMixin } from "../../../../mixins/mobile-aware-mixin";
 import {
  buildSankeyDeviceNodes,
  buildSankeyLayout,
+  DEFAULT_MAX_SANKEY_DEVICES,
  fireSankeyNodeMoreInfo,
  MIN_SANKEY_THRESHOLD_FACTOR,
 } from "../energy/common/sankey";
@@ -241,6 +242,7 @@ class HuiWaterSankeyCard
      localize: this.hass.localize,
      rootNodeId: "home",
      minThreshold: minWaterThreshold,
+      maxDevices: this._config.max_devices ?? DEFAULT_MAX_SANKEY_DEVICES,
      untrackedFloor: 0,
      ceilOtherValue: false,
      initialUntracked: homeNode.value,
@@ -15,13 +15,22 @@ const _loadLovelaceResource = (
    hass.auth.data.hassUrl
  ).toString();

+  const logLoadError = (err: unknown) => {
+    // eslint-disable-next-line no-console
+    console.error(
+      `Failed to load Lovelace resource ${normalizedUrl} (type: ${resource.type}). Check that the URL is correct and the file exists.`,
+      err
+    );
+  };
+
  switch (resource.type) {
    case "css": {
      if (normalizedUrl in CSS_CACHE) {
        return CSS_CACHE[normalizedUrl];
      }

-      const loadTask = loadCSS(normalizedUrl);
+      // Catch before caching, so a cache hit cannot log the failure again
+      const loadTask = loadCSS(normalizedUrl).catch(logLoadError);
      CSS_CACHE[normalizedUrl] = loadTask;
      return loadTask;
    }
@@ -31,13 +40,13 @@ const _loadLovelaceResource = (
        return JS_CACHE[normalizedUrl];
      }

-      const loadTask = loadJS(normalizedUrl);
+      const loadTask = loadJS(normalizedUrl).catch(logLoadError);
      JS_CACHE[normalizedUrl] = loadTask;
      return loadTask;
    }

    case "module":
-      return loadModule(normalizedUrl);
+      return loadModule(normalizedUrl).catch(logLoadError);

    default:
      // eslint-disable-next-line
@@ -5,6 +5,7 @@ import {
  assign,
  boolean,
  literal,
+  number,
  object,
  optional,
  string,
@@ -36,6 +37,7 @@ const cardConfigStruct = assign(
    ),
    group_by_floor: optional(boolean()),
    group_by_area: optional(boolean()),
+    max_devices: optional(number()),
  })
 );

@@ -92,6 +94,11 @@ export class HuiEnergySankeyCardEditor
              },
            ],
          },
+          {
+            name: "max_devices",
+            required: false,
+            selector: { number: { min: 1, mode: "box" } },
+          },
          {
            type: "string",
            name: "collection_key",
@@ -134,6 +141,10 @@ export class HuiEnergySankeyCardEditor
        return this.hass!.localize(
          `ui.panel.lovelace.editor.card.generic.collection_key_description`
        );
+      case "max_devices":
+        return this.hass!.localize(
+          `ui.panel.lovelace.editor.card.energy-sankey.max_devices_description`
+        );
      default:
        return undefined;
    }
@@ -144,6 +155,7 @@ export class HuiEnergySankeyCardEditor
      case "layout":
      case "group_by_floor":
      case "group_by_area":
+      case "max_devices":
        return this.hass!.localize(
          `ui.panel.lovelace.editor.card.energy-sankey.${schema.name}`
        );
@@ -7041,6 +7041,8 @@
            "confirm_delete_user_text": "The user account for ''{name}'' will be permanently deleted. You can still track the user, but the person will no longer be able to log in.",
            "allow_login": "Allow login",
            "allow_login_description": "Allow access using username and password.",
+            "select_user": "Select user account",
+            "create_new_user": "Create a new username",
            "username": "[%key:ui::panel::config::users::editor::username%]",
            "password": "[%key:ui::panel::config::users::editor::password%]",
            "admin": "[%key:ui::panel::config::users::editor::admin%]",
@@ -8420,6 +8422,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}",
@@ -8468,6 +8471,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",
@@ -9992,6 +10037,8 @@
              "description": "This card shows the distribution of energy in your home on a Sankey graph.",
              "group_by_floor": "Group by floor",
              "group_by_area": "Group by area",
+              "max_devices": "Maximum devices per parent",
+              "max_devices_description": "Devices beyond this limit are grouped into an \"Other\" node, smallest first. The limit applies per upstream device, not per floor or area. Defaults to 20.",
              "layout": "Graph direction",
              "layout_directions": {
                "auto": "Automatic",
@@ -0,0 +1,63 @@
+import { describe, it, expect } from "vitest";
+import { getNodeIdFromDevice } from "../../src/data/zwave_js";
+import type { DeviceRegistryEntry } from "../../src/data/device/device_registry";
+
+const mockDevice = (identifiers: [string, string][]) =>
+  ({ identifiers }) as DeviceRegistryEntry;
+
+describe("getNodeIdFromDevice", () => {
+  it("reads the node ID from the identifier", () => {
+    expect(
+      getNodeIdFromDevice(mockDevice([["zwave_js", "3245146787-25"]]))
+    ).toBe(25);
+  });
+
+  it("reads the node ID from the extended identifier", () => {
+    expect(
+      getNodeIdFromDevice(mockDevice([["zwave_js", "3245146787-25-798:5:20"]]))
+    ).toBe(25);
+  });
+
+  it("returns multi-digit node IDs in full", () => {
+    expect(
+      getNodeIdFromDevice(mockDevice([["zwave_js", "3245146787-108"]]))
+    ).toBe(108);
+  });
+
+  it("ignores provisioning entries, whose DSK blocks parse as numbers", () => {
+    expect(
+      getNodeIdFromDevice(
+        mockDevice([
+          [
+            "zwave_js",
+            "provision_50285-00042-09924-30691-15973-33711-04005-03623",
+          ],
+        ])
+      )
+    ).toBeUndefined();
+  });
+
+  it("ignores identifiers of other integrations", () => {
+    expect(
+      getNodeIdFromDevice(mockDevice([["mqtt", "3245146787-25"]]))
+    ).toBeUndefined();
+  });
+
+  it("picks the Z-Wave identifier when a device has several", () => {
+    expect(
+      getNodeIdFromDevice(
+        mockDevice([
+          ["matter", "some-other-id"],
+          ["zwave_js", "3245146787-14"],
+        ])
+      )
+    ).toBe(14);
+  });
+
+  it("returns undefined when there is no node ID", () => {
+    expect(getNodeIdFromDevice(mockDevice([]))).toBeUndefined();
+    expect(
+      getNodeIdFromDevice(mockDevice([["zwave_js", "3245146787"]]))
+    ).toBeUndefined();
+  });
+});
@@ -279,6 +279,85 @@ test.describe("Lovelace dashboard", () => {
  });
 });

+test.describe("Energy dashboard", () => {
+  test("returns to Energy after repeatedly opening the device dialog", async ({
+    page,
+  }) => {
+    const errors = trackPageErrors(page);
+    await goToPanel(
+      page,
+      "/?historyBack=1&backPath=%2Flovelace#/energy/overview"
+    );
+    const energyRoot = page.locator("ha-panel-energy hui-root");
+    await expect(energyRoot).toBeAttached({ timeout: PANEL_TIMEOUT });
+
+    const editDashboard = energyRoot.getByRole("button", {
+      name: /^Edit dashboard\b/,
+    });
+    const dashboardMenu = energyRoot.getByRole("button", {
+      name: "Open dashboard menu",
+    });
+    await expect(editDashboard.or(dashboardMenu)).toBeVisible({
+      timeout: QUICK_TIMEOUT,
+    });
+    if (await editDashboard.isVisible()) {
+      await editDashboard.click();
+    } else {
+      await dashboardMenu.click();
+      await page.getByRole("menuitem", { name: /^Edit dashboard\b/ }).click();
+    }
+
+    await expect(page.locator("ha-config-energy")).toBeAttached({
+      timeout: PANEL_TIMEOUT,
+    });
+
+    const backLink = page
+      .locator("ha-config-energy hass-tabs-subpage")
+      .getByRole("link", { name: "Back" });
+    await expect(backLink).toHaveAttribute(
+      "href",
+      "/config/lovelace/dashboards"
+    );
+
+    const addDevice = page
+      .locator("ha-energy-device-settings")
+      .locator("ha-button")
+      .first();
+    const openAndCancelDeviceDialog = async () => {
+      await addDevice.click();
+      const dialog = page.locator("dialog-energy-device-settings");
+      const cancel = dialog.locator("ha-dialog-footer ha-button").first();
+      await expect(cancel).toBeVisible({ timeout: QUICK_TIMEOUT });
+      await cancel.click();
+      await expect(cancel).toBeHidden({ timeout: QUICK_TIMEOUT });
+    };
+    await openAndCancelDeviceDialog();
+    await openAndCancelDeviceDialog();
+    await openAndCancelDeviceDialog();
+
+    await backLink.click();
+
+    await expect
+      .poll(
+        () =>
+          page.evaluate(() => ({
+            hash: window.location.hash,
+            search: window.location.search,
+          })),
+        { timeout: PANEL_TIMEOUT }
+      )
+      .toEqual({
+        hash: "#/energy/overview",
+        search: "?historyBack=1&backPath=%2Flovelace",
+      });
+    await expect(page.locator("ha-panel-energy")).toBeAttached();
+    await expect(
+      energyRoot.getByRole("link", { name: "Back" })
+    ).toHaveAttribute("href", "/lovelace");
+    expectNoPageErrors(errors);
+  });
+});
+
 // ---------------------------------------------------------------------------
 // More-info dialog (light)
 // ---------------------------------------------------------------------------
@@ -0,0 +1,2 @@
+// HomeAssistantAppEl registers this path; keep it inert in E2E tests.
+void 0;
@@ -1 +1,2 @@
+import "../../../../src/resources/append-ha-style";
 import "./ha-test";
@@ -247,16 +247,12 @@ export class HaTest extends HomeAssistantAppEl {
    window.__mockHass = hass;

    // SPA navigation
-    document.body.addEventListener(
-      "click",
-      (e) => {
-        const href = isNavigationClick(e);
-        if (!href) return;
-        e.preventDefault();
+    window.addEventListener("click", (e) => {
+      const href = isNavigationClick(e);
+      if (href) {
        navigate(href);
-      },
-      { capture: true }
-    );
+      }
+    });

    this.hassConnected();
  }
@@ -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");
+  });
+});
@@ -6,6 +6,8 @@ import type {
 import {
  buildSankeyDeviceNodes,
  buildSankeyLayout,
+  DEFAULT_MAX_SANKEY_DEVICES,
+  findDevicesOverCap,
  getSankeyDeviceSections,
  groupSankeyDevicesByFloorAndArea,
 } from "../../../../../../src/panels/lovelace/cards/energy/common/sankey";
@@ -81,6 +83,86 @@ describe("getSankeyDeviceSections", () => {
  });
 });

+describe("findDevicesOverCap", () => {
+  // Values keyed by node id, hierarchy by included_in_stat.
+  const overCapOpts = (
+    values: Record<string, number>,
+    parents: Record<string, string>,
+    // No default: passing `undefined` must mean "no cap", not "fall back to 3".
+    maxDevices: number | undefined,
+    rendered = Object.keys(values)
+  ) => {
+    const list: DeviceConsumptionEnergyPreference[] = Object.keys(values).map(
+      (id) => ({ stat_consumption: id, included_in_stat: parents[id] })
+    );
+    const renderedIds = new Set(rendered);
+    return {
+      devices: list,
+      maxDevices,
+      rootNodeId: "home",
+      renderedIds,
+      deviceValues: new Map(Object.entries(values)),
+      getId: (device: DeviceConsumptionEnergyPreference) =>
+        device.stat_consumption,
+      getEffectiveParent: (device: DeviceConsumptionEnergyPreference) => {
+        let current = device.included_in_stat;
+        for (let hops = 0; current && hops < list.length; hops++) {
+          if (renderedIds.has(current)) {
+            return current;
+          }
+          current = parents[current];
+        }
+        return undefined;
+      },
+    };
+  };
+
+  it.each([undefined, 0, -1, Number.NaN, Number.POSITIVE_INFINITY])(
+    "groups nothing for a cap of %s",
+    (maxDevices) => {
+      expect(
+        findDevicesOverCap(
+          overCapOpts({ a: 5, b: 4, c: 3, d: 2 }, {}, maxDevices)
+        )
+      ).toEqual(new Set());
+    }
+  );
+
+  it("groups the smallest children of an over-cap parent", () => {
+    expect(
+      findDevicesOverCap(overCapOpts({ a: 5, b: 4, c: 3, d: 2, e: 1 }, {}, 3))
+    ).toEqual(new Set(["d", "e"]));
+  });
+
+  it("groups a whole subtree, not just the parent", () => {
+    expect(
+      findDevicesOverCap(
+        overCapOpts(
+          { a: 50, b: 40, c: 30, small: 10, child: 9 },
+          { child: "small" },
+          3
+        )
+      )
+    ).toEqual(new Set(["small", "child", "c"]));
+  });
+
+  it("counts only rendered devices", () => {
+    // four devices, three rendered, so a cap of three does not fire
+    expect(
+      findDevicesOverCap(
+        overCapOpts({ a: 5, b: 4, c: 3, tiny: 0.001 }, {}, 3, ["a", "b", "c"])
+      )
+    ).toEqual(new Set());
+  });
+
+  it("terminates on a cyclic parent chain", () => {
+    // both devices parent each other, so neither is reachable from the root
+    expect(
+      findDevicesOverCap(overCapOpts({ a: 5, b: 4 }, { a: "b", b: "a" }, 1))
+    ).toEqual(new Set());
+  });
+});
+
 describe("buildSankeyDeviceNodes", () => {
  it("renders top-level devices and subtracts them from untracked", () => {
    const result = buildSankeyDeviceNodes(
@@ -423,6 +505,385 @@ describe("buildSankeyDeviceNodes", () => {
    expect(result.deviceNodes).toEqual([]);
    expect(result.untrackedConsumption).toBe(10);
  });
+
+  describe("device count cap", () => {
+    // Five devices all comfortably above minThreshold, so only the count cap
+    // can group any of them.
+    const fiveDevices = () =>
+      devices(
+        { stat_consumption: "a" },
+        { stat_consumption: "b" },
+        { stat_consumption: "c" },
+        { stat_consumption: "d" },
+        { stat_consumption: "e" }
+      );
+    const fiveValues = { a: 50, b: 40, c: 30, d: 20, e: 10 };
+
+    const namedIds = (result: { deviceNodes: SankeyDeviceNode[] }) =>
+      result.deviceNodes
+        .filter(
+          (n) => !n.id.startsWith("other_") && !n.id.startsWith("untracked_")
+        )
+        .map((n) => n.id);
+
+    it("does not group anything when maxDevices is unset", () => {
+      const result = buildSankeyDeviceNodes(
+        cumulativeOpts({
+          devices: fiveDevices(),
+          values: fiveValues,
+          initialUntracked: 150,
+        })
+      );
+      expect(namedIds(result)).toEqual(["a", "b", "c", "d", "e"]);
+      expect(result.deviceNodes.some((n) => n.id.startsWith("other_"))).toBe(
+        false
+      );
+      expect(result.untrackedConsumption).toBeCloseTo(0, 10);
+    });
+
+    it("does nothing at exactly the cap", () => {
+      const result = buildSankeyDeviceNodes(
+        cumulativeOpts({
+          devices: devices(
+            { stat_consumption: "a" },
+            { stat_consumption: "b" },
+            { stat_consumption: "c" }
+          ),
+          values: { a: 50, b: 40, c: 30 },
+          maxDevices: 3,
+          initialUntracked: 120,
+        })
+      );
+      expect(namedIds(result)).toEqual(["a", "b", "c"]);
+      expect(result.deviceNodes.some((n) => n.id.startsWith("other_"))).toBe(
+        false
+      );
+    });
+
+    it("groups the smallest above the cap, keeping the cap many by name", () => {
+      const result = buildSankeyDeviceNodes(
+        cumulativeOpts({
+          devices: fiveDevices(),
+          values: fiveValues,
+          maxDevices: 3,
+          initialUntracked: 150,
+        })
+      );
+      // the cap budgets named devices; Other is overhead on top
+      expect(namedIds(result)).toEqual(["a", "b", "c"]);
+      const other = result.deviceNodes.find((n) => n.id === "other_home");
+      expect(other?.value).toBeCloseTo(30, 10);
+      expect(result.untrackedConsumption).toBeCloseTo(0, 10);
+    });
+
+    it("never demotes exactly one device, which would render it by name", () => {
+      const result = buildSankeyDeviceNodes(
+        cumulativeOpts({
+          devices: devices(
+            { stat_consumption: "a" },
+            { stat_consumption: "b" },
+            { stat_consumption: "c" },
+            { stat_consumption: "d" }
+          ),
+          values: { a: 40, b: 30, c: 20, d: 10 },
+          maxDevices: 3,
+          initialUntracked: 100,
+        })
+      );
+      expect(namedIds(result)).toEqual(["a", "b"]);
+      const other = result.deviceNodes.find((n) => n.id === "other_home");
+      expect(other?.value).toBeCloseTo(30, 10);
+      expect(result.untrackedConsumption).toBeCloseTo(0, 10);
+    });
+
+    it("demotes a whole subtree so children never re-parent or double count", () => {
+      const result = buildSankeyDeviceNodes(
+        cumulativeOpts({
+          devices: devices(
+            { stat_consumption: "g" },
+            { stat_consumption: "a", included_in_stat: "g" },
+            { stat_consumption: "c", included_in_stat: "a" },
+            { stat_consumption: "b1", included_in_stat: "g" },
+            { stat_consumption: "b2", included_in_stat: "g" },
+            { stat_consumption: "b3", included_in_stat: "g" },
+            { stat_consumption: "b4", included_in_stat: "g" }
+          ),
+          values: { g: 100, a: 10, c: 9, b1: 30, b2: 25, b3: 20, b4: 8 },
+          maxDevices: 3,
+          initialUntracked: 100,
+        })
+      );
+      expect(result.deviceNodes.map((n) => n.id)).toEqual([
+        "g",
+        "b1",
+        "b2",
+        "b3",
+        "other_g",
+        "untracked_g",
+      ]);
+      // a's value already contains c, so Other is 10 + 8 and not 27
+      const other = result.deviceNodes.find((n) => n.id === "other_g");
+      expect(other?.value).toBeCloseTo(18, 10);
+      expect(result.deviceNodes.some((n) => n.id === "c")).toBe(false);
+      const untracked = result.deviceNodes.find((n) => n.id === "untracked_g");
+      expect(untracked?.value).toBeCloseTo(7, 10);
+      expect(result.untrackedConsumption).toBeCloseTo(0, 10);
+    });
+
+    it("ranks by raw value, so a parent is never demoted before its own child", () => {
+      const result = buildSankeyDeviceNodes(
+        cumulativeOpts({
+          devices: devices(
+            { stat_consumption: "d" },
+            { stat_consumption: "e", included_in_stat: "d" },
+            { stat_consumption: "f" },
+            { stat_consumption: "h" },
+            { stat_consumption: "i" }
+          ),
+          values: { d: 50, e: 45, f: 10, h: 40, i: 30 },
+          maxDevices: 3,
+          initialUntracked: 130,
+        })
+      );
+      // Ranking on value-excluding-children would demote d (50 - 45 = 5) while
+      // keeping e, counting e both on its own and inside d's rolled-up value.
+      expect(result.deviceNodes.map((n) => n.id)).toEqual([
+        "d",
+        "e",
+        "h",
+        "other_home",
+        "untracked_d",
+      ]);
+      expect(result.parentLinks.e).toBe("d");
+      const other = result.deviceNodes.find((n) => n.id === "other_home");
+      expect(other?.value).toBeCloseTo(40, 10);
+      expect(result.untrackedConsumption).toBeCloseTo(0, 10);
+    });
+
+    it("applies the cap per parent and links Other to that parent", () => {
+      const result = buildSankeyDeviceNodes(
+        cumulativeOpts({
+          devices: devices(
+            { stat_consumption: "p" },
+            { stat_consumption: "c1", included_in_stat: "p" },
+            { stat_consumption: "c2", included_in_stat: "p" },
+            { stat_consumption: "c3", included_in_stat: "p" },
+            { stat_consumption: "c4", included_in_stat: "p" },
+            { stat_consumption: "c5", included_in_stat: "p" },
+            { stat_consumption: "r1" },
+            { stat_consumption: "r2" }
+          ),
+          values: {
+            p: 100,
+            c1: 30,
+            c2: 25,
+            c3: 20,
+            c4: 15,
+            c5: 10,
+            r1: 50,
+            r2: 40,
+          },
+          maxDevices: 3,
+          initialUntracked: 190,
+        })
+      );
+      // p is over the cap; the three root-level nodes are exactly at it
+      expect(namedIds(result)).toEqual(["p", "c1", "c2", "c3", "r1", "r2"]);
+      const other = result.deviceNodes.find((n) => n.id === "other_p");
+      expect(other?.value).toBeCloseTo(25, 10);
+      expect(result.parentLinks.other_p).toBe("p");
+      expect(result.links).toContainEqual({ source: "p", target: "other_p" });
+      expect(result.deviceNodes.some((n) => n.id === "other_home")).toBe(false);
+      expect(result.untrackedConsumption).toBeCloseTo(0, 10);
+    });
+
+    it("counts only rendered children, not ones already below the threshold", () => {
+      const result = buildSankeyDeviceNodes(
+        cumulativeOpts({
+          devices: devices(
+            { stat_consumption: "p" },
+            { stat_consumption: "c1", included_in_stat: "p" },
+            { stat_consumption: "c2", included_in_stat: "p" },
+            { stat_consumption: "c3", included_in_stat: "p" },
+            { stat_consumption: "s1", included_in_stat: "p" },
+            { stat_consumption: "s2", included_in_stat: "p" },
+            { stat_consumption: "s3", included_in_stat: "p" }
+          ),
+          values: {
+            p: 100,
+            c1: 30,
+            c2: 25,
+            c3: 20,
+            s1: 0.001,
+            s2: 0.002,
+            s3: 0.003,
+          },
+          maxDevices: 3,
+          initialUntracked: 100,
+        })
+      );
+      // three rendered children is at the cap, so no demotion happens
+      expect(namedIds(result)).toEqual(["p", "c1", "c2", "c3"]);
+      const other = result.deviceNodes.find((n) => n.id === "other_p");
+      expect(other?.value).toBeCloseTo(0.006, 10);
+    });
+
+    it("terminates on a cyclic included_in_stat and leaves it unchanged", () => {
+      const cyclic = () =>
+        cumulativeOpts({
+          devices: devices(
+            { stat_consumption: "a", included_in_stat: "b" },
+            { stat_consumption: "b", included_in_stat: "a" }
+          ),
+          values: { a: 5, b: 4 },
+          initialUntracked: 10,
+        });
+      // A cycle member always has a rendered parent inside the cycle, so it is
+      // never reachable from the root and the cap cannot touch it.
+      expect(
+        buildSankeyDeviceNodes({ ...cyclic(), maxDevices: 1 })
+      ).toStrictEqual(buildSankeyDeviceNodes(cyclic()));
+    });
+
+    it("treats a zero or non-finite cap as no cap", () => {
+      [0, Number.NaN, Number.POSITIVE_INFINITY].forEach((maxDevices) => {
+        const result = buildSankeyDeviceNodes(
+          cumulativeOpts({
+            devices: fiveDevices(),
+            values: fiveValues,
+            maxDevices,
+            initialUntracked: 150,
+          })
+        );
+        expect(namedIds(result)).toEqual(["a", "b", "c", "d", "e"]);
+      });
+    });
+
+    it("does not count devices without a node id (instantaneous cards)", () => {
+      const result = buildSankeyDeviceNodes(
+        cumulativeOpts({
+          devices: devices(
+            { stat_consumption: "a", stat_rate: "ra" },
+            { stat_consumption: "b", stat_rate: "rb" },
+            { stat_consumption: "c", stat_rate: "rc" },
+            { stat_consumption: "d" }
+          ),
+          values: { ra: 30, rb: 25, rc: 20 },
+          getId: (device) => device.stat_rate,
+          maxDevices: 3,
+          initialUntracked: 75,
+        })
+      );
+      // d has no stat_rate, so the three rendered nodes are at the cap
+      expect(namedIds(result)).toEqual(["ra", "rb", "rc"]);
+      expect(result.deviceNodes.some((n) => n.id.startsWith("other_"))).toBe(
+        false
+      );
+    });
+
+    it("ceils the capped Other value but still subtracts the raw total", () => {
+      const result = buildSankeyDeviceNodes(
+        cumulativeOpts({
+          devices: fiveDevices(),
+          values: { ...fiveValues, e: 10.5 },
+          maxDevices: 3,
+          ceilOtherValue: true,
+          initialUntracked: 150.5,
+        })
+      );
+      const other = result.deviceNodes.find((n) => n.id === "other_home");
+      expect(other?.value).toBe(31);
+      expect(result.untrackedConsumption).toBeCloseTo(0, 10);
+    });
+
+    it("breaks value ties on declaration order, stably across runs", () => {
+      const opts = () =>
+        cumulativeOpts({
+          devices: fiveDevices(),
+          values: { a: 50, b: 20, c: 20, d: 20, e: 10 },
+          maxDevices: 3,
+          initialUntracked: 120,
+        });
+      expect(namedIds(buildSankeyDeviceNodes(opts()))).toEqual(["a", "c", "d"]);
+      expect(namedIds(buildSankeyDeviceNodes(opts()))).toEqual(["a", "c", "d"]);
+    });
+
+    // The documented promise is "more than 20 devices start grouping", so pin
+    // the boundary against the real default rather than a test-local cap.
+    it.each([
+      [DEFAULT_MAX_SANKEY_DEVICES, DEFAULT_MAX_SANKEY_DEVICES, false],
+      // one over the cap still demotes two, because a lone demoted device would
+      // be rendered by name and void the cap
+      [DEFAULT_MAX_SANKEY_DEVICES + 1, DEFAULT_MAX_SANKEY_DEVICES - 1, true],
+      [DEFAULT_MAX_SANKEY_DEVICES + 2, DEFAULT_MAX_SANKEY_DEVICES, true],
+      [DEFAULT_MAX_SANKEY_DEVICES + 12, DEFAULT_MAX_SANKEY_DEVICES, true],
+    ])(
+      "with %i devices at the default cap renders %i named nodes (grouped: %s)",
+      (deviceCount, expectedNamed, expectOther) => {
+        const list = Array.from({ length: deviceCount }, (_, i) => ({
+          stat_consumption: `d${i}`,
+        }));
+        const values = Object.fromEntries(
+          list.map((d, i) => [d.stat_consumption, 10 + i])
+        );
+        const total = Object.values(values).reduce((s, v) => s + v, 0);
+        const result = buildSankeyDeviceNodes(
+          cumulativeOpts({
+            devices: list,
+            values,
+            maxDevices: DEFAULT_MAX_SANKEY_DEVICES,
+            initialUntracked: total,
+          })
+        );
+        expect(namedIds(result)).toHaveLength(expectedNamed);
+        expect(result.deviceNodes.some((n) => n.id === "other_home")).toBe(
+          expectOther
+        );
+        // grouping never changes the total that comes off the root
+        expect(result.untrackedConsumption).toBeCloseTo(0, 10);
+      }
+    );
+
+    it("keeps 32 circuit clamps readable at the default cap", () => {
+      const clamps = Array.from({ length: 32 }, (_, i) => ({
+        stat_consumption: `clamp_${i}`,
+      }));
+      const values = Object.fromEntries(
+        clamps.map((clamp, i) => [clamp.stat_consumption, 20 + i])
+      );
+      const result = buildSankeyDeviceNodes(
+        cumulativeOpts({
+          devices: clamps,
+          values,
+          maxDevices: DEFAULT_MAX_SANKEY_DEVICES,
+          initialUntracked: 1200,
+        })
+      );
+      expect(namedIds(result)).toHaveLength(DEFAULT_MAX_SANKEY_DEVICES);
+      expect(result.deviceNodes).toHaveLength(DEFAULT_MAX_SANKEY_DEVICES + 1);
+      // the 12 smallest clamps, values 20 through 31
+      const other = result.deviceNodes.find((n) => n.id === "other_home");
+      expect(other?.value).toBeCloseTo(306, 10);
+
+      // flow conservation: every device node plus untracked accounts for home
+      const { nodes } = buildSankeyLayout({
+        hass: createMockHass(),
+        computedStyle,
+        localize: mockLocalize,
+        deviceNodes: result.deviceNodes,
+        parentLinks: result.parentLinks,
+        rootNodeId: "home",
+        groupByFloor: false,
+        groupByArea: false,
+        untrackedConsumption: result.untrackedConsumption,
+        untrackedFloor: 0,
+      });
+      const deviceTotal = nodes
+        .filter((n) => n.index === 4)
+        .reduce((sum, n) => sum + n.value, 0);
+      expect(deviceTotal).toBeCloseTo(1200, 10);
+    });
+  });
 });

 describe("groupSankeyDevicesByFloorAndArea", () => {
@@ -0,0 +1,58 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { loadJS, loadModule } from "../../../../src/common/dom/load_resource";
+import { loadLovelaceResourcesAndWait } from "../../../../src/panels/lovelace/common/load-resources";
+import type { HomeAssistant } from "../../../../src/types";
+
+vi.mock("../../../../src/common/dom/load_resource", () => ({
+  loadCSS: vi.fn(),
+  loadJS: vi.fn(),
+  loadModule: vi.fn(),
+}));
+
+const hass = {
+  auth: { data: { hassUrl: "http://localhost:8123" } },
+} as unknown as HomeAssistant;
+
+describe("loadLovelaceResourcesAndWait", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("logs an error naming the resource that failed to load", async () => {
+    const consoleError = vi
+      .spyOn(console, "error")
+      .mockImplementation(() => undefined);
+    const loadError = new Error("load failed");
+    vi.mocked(loadModule).mockImplementation(() => Promise.reject(loadError));
+
+    await loadLovelaceResourcesAndWait(
+      [{ id: "1", url: "/local/missing.js", type: "module" }],
+      hass
+    );
+
+    expect(consoleError).toHaveBeenCalledTimes(1);
+    expect(consoleError.mock.calls[0][0]).toContain(
+      "http://localhost:8123/local/missing.js"
+    );
+    expect(consoleError.mock.calls[0][0]).toContain("module");
+    // the rejection reason is forwarded, so any detail it carries is not lost
+    expect(consoleError.mock.calls[0][1]).toBe(loadError);
+  });
+
+  it("logs only once for a cached resource that failed to load", async () => {
+    const consoleError = vi
+      .spyOn(console, "error")
+      .mockImplementation(() => undefined);
+    vi.mocked(loadJS).mockImplementation((url) => Promise.reject(url));
+    const resources = [
+      { id: "2", url: "/local/broken.js", type: "js" as const },
+    ];
+
+    await loadLovelaceResourcesAndWait(resources, hass);
+    await loadLovelaceResourcesAndWait(resources, hass);
+
+    expect(loadJS).toHaveBeenCalledTimes(1);
+    expect(consoleError).toHaveBeenCalledTimes(1);
+  });
+});
@@ -4648,22 +4648,22 @@ __metadata:
  languageName: node
  linkType: hard

-"@rsdoctor/client@npm:1.6.1":
-  version: 1.6.1
-  resolution: "@rsdoctor/client@npm:1.6.1"
-  checksum: 10/aefc3a378e3ecdc9f03c21272dfb06d4eb68ca5395d83edb0a44fd816ea96b45e894de8c862e605fcb02611d306014ffef4ca09723945cf75c9a33b7062d5d4b
+"@rsdoctor/client@npm:1.6.2":
+  version: 1.6.2
+  resolution: "@rsdoctor/client@npm:1.6.2"
+  checksum: 10/7b57cf3a9c6e3dc1b64b0f07969330579fd0e84963843cb3517b7c1160bc9b2fa08e709eaf835139d8a7e8c32977af8aae050d100df80daed44371ced8272642
  languageName: node
  linkType: hard

-"@rsdoctor/core@npm:1.6.1":
-  version: 1.6.1
-  resolution: "@rsdoctor/core@npm:1.6.1"
+"@rsdoctor/core@npm:1.6.2":
+  version: 1.6.2
+  resolution: "@rsdoctor/core@npm:1.6.2"
  dependencies:
    "@rsbuild/plugin-check-syntax": "npm:^1.6.1"
-    "@rsdoctor/graph": "npm:1.6.1"
-    "@rsdoctor/sdk": "npm:1.6.1"
-    "@rsdoctor/types": "npm:1.6.1"
-    "@rsdoctor/utils": "npm:1.6.1"
+    "@rsdoctor/graph": "npm:1.6.2"
+    "@rsdoctor/sdk": "npm:1.6.2"
+    "@rsdoctor/types": "npm:1.6.2"
+    "@rsdoctor/utils": "npm:1.6.2"
    "@rspack/resolver": "npm:^0.2.8"
    browserslist-load-config: "npm:^1.0.2"
    es-toolkit: "npm:^1.49.0"
@@ -4671,60 +4671,60 @@ __metadata:
    fs-extra: "npm:^11.1.1"
    semver: "npm:^7.8.5"
    source-map: "npm:^0.7.6"
-  checksum: 10/de5708e15e1efd67a23d753ed906e573ca6a6857428dbdfea0aff2f85f1ed3f631ff34e23bf40e955855ed878ed548c073c620a4edbd12959c20a3f9ff9c1cfd
+  checksum: 10/803bb41042b2af07b096f2dde6383d516bb22b62705aeb9693959788e8a63df80e6d25514f1d92639a267e46e73732689abf5ba2c25679fbd80da9dd126f7ed9
  languageName: node
  linkType: hard

-"@rsdoctor/graph@npm:1.6.1":
-  version: 1.6.1
-  resolution: "@rsdoctor/graph@npm:1.6.1"
+"@rsdoctor/graph@npm:1.6.2":
+  version: 1.6.2
+  resolution: "@rsdoctor/graph@npm:1.6.2"
  dependencies:
-    "@rsdoctor/types": "npm:1.6.1"
-    "@rsdoctor/utils": "npm:1.6.1"
+    "@rsdoctor/types": "npm:1.6.2"
+    "@rsdoctor/utils": "npm:1.6.2"
    es-toolkit: "npm:^1.49.0"
    path-browserify: "npm:1.0.1"
    source-map: "npm:^0.7.6"
-  checksum: 10/065c485f11939143021c12a1acff47a2539c22e9a9d5f8501c906578213ca16b71a35d08bc0a83035529d42a7906fc098b6e3c536d895cd13ee74b5340a39e40
+  checksum: 10/f28aaedc529a6cff782f1813faa6d19d10f76ab8f529bbe2899385b5659d247f0543149e2fcd700264a00e9568605a85fde04cbf634e821f24e9bf239eb1b009
  languageName: node
  linkType: hard

-"@rsdoctor/rspack-plugin@npm:1.6.1":
-  version: 1.6.1
-  resolution: "@rsdoctor/rspack-plugin@npm:1.6.1"
+"@rsdoctor/rspack-plugin@npm:1.6.2":
+  version: 1.6.2
+  resolution: "@rsdoctor/rspack-plugin@npm:1.6.2"
  dependencies:
-    "@rsdoctor/core": "npm:1.6.1"
-    "@rsdoctor/graph": "npm:1.6.1"
-    "@rsdoctor/sdk": "npm:1.6.1"
-    "@rsdoctor/types": "npm:1.6.1"
-    "@rsdoctor/utils": "npm:1.6.1"
+    "@rsdoctor/core": "npm:1.6.2"
+    "@rsdoctor/graph": "npm:1.6.2"
+    "@rsdoctor/sdk": "npm:1.6.2"
+    "@rsdoctor/types": "npm:1.6.2"
+    "@rsdoctor/utils": "npm:1.6.2"
  peerDependencies:
    "@rspack/core": "*"
  peerDependenciesMeta:
    "@rspack/core":
      optional: true
-  checksum: 10/8908f4a3c2b46fdaba2c6d39dd535623ddcc411fb50d358de949142a5628a512827f5206a93ae975bd93e5de6b72d5cd71f63463c65a37ba718727567187ce8e
+  checksum: 10/dec9f0424d14ec7ed03cd6cbc5e0b11cd74c29be12c3f79466bf8da0f317a4bdba858a58daf64e4a7c16d20a1d58433b1d2c038b62ff771c1d045bca3d71c3ad
  languageName: node
  linkType: hard

-"@rsdoctor/sdk@npm:1.6.1":
-  version: 1.6.1
-  resolution: "@rsdoctor/sdk@npm:1.6.1"
+"@rsdoctor/sdk@npm:1.6.2":
+  version: 1.6.2
+  resolution: "@rsdoctor/sdk@npm:1.6.2"
  dependencies:
-    "@rsdoctor/client": "npm:1.6.1"
-    "@rsdoctor/graph": "npm:1.6.1"
-    "@rsdoctor/types": "npm:1.6.1"
-    "@rsdoctor/utils": "npm:1.6.1"
+    "@rsdoctor/client": "npm:1.6.2"
+    "@rsdoctor/graph": "npm:1.6.2"
+    "@rsdoctor/types": "npm:1.6.2"
+    "@rsdoctor/utils": "npm:1.6.2"
    launch-editor: "npm:^2.13.2"
    safer-buffer: "npm:2.1.2"
    socket.io: "npm:4.8.1"
    tapable: "npm:2.3.3"
-  checksum: 10/d667d62d730bed7606bcf1ed2063fb7597024e31d9108c3ba9729313764866407c216499ccb3c7102f239d7d82463e510f2b2ec71270af6a40039cbe6f876d23
+  checksum: 10/89d5850145b490bbf3f43486176ebdd1f9eb67cdbe96a07549bb0b400ab76d85f3b6d5667be7cf8304434281f0db74fbaaab3360228eb1650f0a8ce640101208
  languageName: node
  linkType: hard

-"@rsdoctor/types@npm:1.6.1":
-  version: 1.6.1
-  resolution: "@rsdoctor/types@npm:1.6.1"
+"@rsdoctor/types@npm:1.6.2":
+  version: 1.6.2
+  resolution: "@rsdoctor/types@npm:1.6.2"
  dependencies:
    "@types/connect": "npm:3.4.38"
    "@types/estree": "npm:1.0.5"
@@ -4738,16 +4738,16 @@ __metadata:
      optional: true
    webpack:
      optional: true
-  checksum: 10/1c4ae6c1aa6fa525d65ab78396954d86358880959ee3fdb68247c2f3215a35e4cb2aab3836cb82f6c208c2c3834cfe0dc8bf575ba59fd8e2ff89ffc92322fcad
+  checksum: 10/39328739b31f7df46b663a9f6b5ac8c1e290c6b7ce0f68d9b45a423b89a1a296d32fbee0c26f555fc40d60b356a3605909f7bbe19c77d9c6bca3603d6928aef2
  languageName: node
  linkType: hard

-"@rsdoctor/utils@npm:1.6.1":
-  version: 1.6.1
-  resolution: "@rsdoctor/utils@npm:1.6.1"
+"@rsdoctor/utils@npm:1.6.2":
+  version: 1.6.2
+  resolution: "@rsdoctor/utils@npm:1.6.2"
  dependencies:
    "@babel/code-frame": "npm:7.26.2"
-    "@rsdoctor/types": "npm:1.6.1"
+    "@rsdoctor/types": "npm:1.6.2"
    "@types/estree": "npm:1.0.5"
    acorn: "npm:^8.10.0"
    acorn-import-attributes: "npm:^1.9.5"
@@ -4761,83 +4761,83 @@ __metadata:
    picocolors: "npm:^1.1.1"
    rslog: "npm:^2.1.2"
    strip-ansi: "npm:^7.2.0"
-  checksum: 10/11f4e9136dd849fa05b0ab56ab0de3be3de43880d530dcbfb1835780dccad9976636f6a743852893948ae053e71fb7cd6144cac3ffac27929a87710e3981c048
+  checksum: 10/fb6a147e452756018e93789e07dbe015354fc2690699755ef411748a393c7db86fdff2614cdf9ce07822434abcac3eef362aea8c63cbca9fe3f96c958fde56dc
  languageName: node
  linkType: hard

-"@rspack/binding-darwin-arm64@npm:2.1.9":
-  version: 2.1.9
-  resolution: "@rspack/binding-darwin-arm64@npm:2.1.9"
+"@rspack/binding-darwin-arm64@npm:2.1.10":
+  version: 2.1.10
+  resolution: "@rspack/binding-darwin-arm64@npm:2.1.10"
  conditions: os=darwin & cpu=arm64
  languageName: node
  linkType: hard

-"@rspack/binding-darwin-x64@npm:2.1.9":
-  version: 2.1.9
-  resolution: "@rspack/binding-darwin-x64@npm:2.1.9"
+"@rspack/binding-darwin-x64@npm:2.1.10":
+  version: 2.1.10
+  resolution: "@rspack/binding-darwin-x64@npm:2.1.10"
  conditions: os=darwin & cpu=x64
  languageName: node
  linkType: hard

-"@rspack/binding-linux-arm64-gnu@npm:2.1.9":
-  version: 2.1.9
-  resolution: "@rspack/binding-linux-arm64-gnu@npm:2.1.9"
+"@rspack/binding-linux-arm64-gnu@npm:2.1.10":
+  version: 2.1.10
+  resolution: "@rspack/binding-linux-arm64-gnu@npm:2.1.10"
  conditions: os=linux & cpu=arm64 & libc=glibc
  languageName: node
  linkType: hard

-"@rspack/binding-linux-arm64-musl@npm:2.1.9":
-  version: 2.1.9
-  resolution: "@rspack/binding-linux-arm64-musl@npm:2.1.9"
+"@rspack/binding-linux-arm64-musl@npm:2.1.10":
+  version: 2.1.10
+  resolution: "@rspack/binding-linux-arm64-musl@npm:2.1.10"
  conditions: os=linux & cpu=arm64 & libc=musl
  languageName: node
  linkType: hard

-"@rspack/binding-linux-ppc64-gnu@npm:2.1.9":
-  version: 2.1.9
-  resolution: "@rspack/binding-linux-ppc64-gnu@npm:2.1.9"
+"@rspack/binding-linux-ppc64-gnu@npm:2.1.10":
+  version: 2.1.10
+  resolution: "@rspack/binding-linux-ppc64-gnu@npm:2.1.10"
  conditions: os=linux & cpu=ppc64 & libc=glibc
  languageName: node
  linkType: hard

-"@rspack/binding-linux-riscv64-gnu@npm:2.1.9":
-  version: 2.1.9
-  resolution: "@rspack/binding-linux-riscv64-gnu@npm:2.1.9"
+"@rspack/binding-linux-riscv64-gnu@npm:2.1.10":
+  version: 2.1.10
+  resolution: "@rspack/binding-linux-riscv64-gnu@npm:2.1.10"
  conditions: os=linux & cpu=riscv64 & libc=glibc
  languageName: node
  linkType: hard

-"@rspack/binding-linux-riscv64-musl@npm:2.1.9":
-  version: 2.1.9
-  resolution: "@rspack/binding-linux-riscv64-musl@npm:2.1.9"
+"@rspack/binding-linux-riscv64-musl@npm:2.1.10":
+  version: 2.1.10
+  resolution: "@rspack/binding-linux-riscv64-musl@npm:2.1.10"
  conditions: os=linux & cpu=riscv64 & libc=musl
  languageName: node
  linkType: hard

-"@rspack/binding-linux-s390x-gnu@npm:2.1.9":
-  version: 2.1.9
-  resolution: "@rspack/binding-linux-s390x-gnu@npm:2.1.9"
+"@rspack/binding-linux-s390x-gnu@npm:2.1.10":
+  version: 2.1.10
+  resolution: "@rspack/binding-linux-s390x-gnu@npm:2.1.10"
  conditions: os=linux & cpu=s390x & libc=glibc
  languageName: node
  linkType: hard

-"@rspack/binding-linux-x64-gnu@npm:2.1.9":
-  version: 2.1.9
-  resolution: "@rspack/binding-linux-x64-gnu@npm:2.1.9"
+"@rspack/binding-linux-x64-gnu@npm:2.1.10":
+  version: 2.1.10
+  resolution: "@rspack/binding-linux-x64-gnu@npm:2.1.10"
  conditions: os=linux & cpu=x64 & libc=glibc
  languageName: node
  linkType: hard

-"@rspack/binding-linux-x64-musl@npm:2.1.9":
-  version: 2.1.9
-  resolution: "@rspack/binding-linux-x64-musl@npm:2.1.9"
+"@rspack/binding-linux-x64-musl@npm:2.1.10":
+  version: 2.1.10
+  resolution: "@rspack/binding-linux-x64-musl@npm:2.1.10"
  conditions: os=linux & cpu=x64 & libc=musl
  languageName: node
  linkType: hard

-"@rspack/binding-wasm32-wasi@npm:2.1.9":
-  version: 2.1.9
-  resolution: "@rspack/binding-wasm32-wasi@npm:2.1.9"
+"@rspack/binding-wasm32-wasi@npm:2.1.10":
+  version: 2.1.10
+  resolution: "@rspack/binding-wasm32-wasi@npm:2.1.10"
  dependencies:
    "@emnapi/core": "npm:1.11.3"
    "@emnapi/runtime": "npm:1.11.3"
@@ -4846,45 +4846,45 @@ __metadata:
  languageName: node
  linkType: hard

-"@rspack/binding-win32-arm64-msvc@npm:2.1.9":
-  version: 2.1.9
-  resolution: "@rspack/binding-win32-arm64-msvc@npm:2.1.9"
+"@rspack/binding-win32-arm64-msvc@npm:2.1.10":
+  version: 2.1.10
+  resolution: "@rspack/binding-win32-arm64-msvc@npm:2.1.10"
  conditions: os=win32 & cpu=arm64
  languageName: node
  linkType: hard

-"@rspack/binding-win32-ia32-msvc@npm:2.1.9":
-  version: 2.1.9
-  resolution: "@rspack/binding-win32-ia32-msvc@npm:2.1.9"
+"@rspack/binding-win32-ia32-msvc@npm:2.1.10":
+  version: 2.1.10
+  resolution: "@rspack/binding-win32-ia32-msvc@npm:2.1.10"
  conditions: os=win32 & cpu=ia32
  languageName: node
  linkType: hard

-"@rspack/binding-win32-x64-msvc@npm:2.1.9":
-  version: 2.1.9
-  resolution: "@rspack/binding-win32-x64-msvc@npm:2.1.9"
+"@rspack/binding-win32-x64-msvc@npm:2.1.10":
+  version: 2.1.10
+  resolution: "@rspack/binding-win32-x64-msvc@npm:2.1.10"
  conditions: os=win32 & cpu=x64
  languageName: node
  linkType: hard

-"@rspack/binding@npm:2.1.9":
-  version: 2.1.9
-  resolution: "@rspack/binding@npm:2.1.9"
+"@rspack/binding@npm:2.1.10":
+  version: 2.1.10
+  resolution: "@rspack/binding@npm:2.1.10"
  dependencies:
-    "@rspack/binding-darwin-arm64": "npm:2.1.9"
-    "@rspack/binding-darwin-x64": "npm:2.1.9"
-    "@rspack/binding-linux-arm64-gnu": "npm:2.1.9"
-    "@rspack/binding-linux-arm64-musl": "npm:2.1.9"
-    "@rspack/binding-linux-ppc64-gnu": "npm:2.1.9"
-    "@rspack/binding-linux-riscv64-gnu": "npm:2.1.9"
-    "@rspack/binding-linux-riscv64-musl": "npm:2.1.9"
-    "@rspack/binding-linux-s390x-gnu": "npm:2.1.9"
-    "@rspack/binding-linux-x64-gnu": "npm:2.1.9"
-    "@rspack/binding-linux-x64-musl": "npm:2.1.9"
-    "@rspack/binding-wasm32-wasi": "npm:2.1.9"
-    "@rspack/binding-win32-arm64-msvc": "npm:2.1.9"
-    "@rspack/binding-win32-ia32-msvc": "npm:2.1.9"
-    "@rspack/binding-win32-x64-msvc": "npm:2.1.9"
+    "@rspack/binding-darwin-arm64": "npm:2.1.10"
+    "@rspack/binding-darwin-x64": "npm:2.1.10"
+    "@rspack/binding-linux-arm64-gnu": "npm:2.1.10"
+    "@rspack/binding-linux-arm64-musl": "npm:2.1.10"
+    "@rspack/binding-linux-ppc64-gnu": "npm:2.1.10"
+    "@rspack/binding-linux-riscv64-gnu": "npm:2.1.10"
+    "@rspack/binding-linux-riscv64-musl": "npm:2.1.10"
+    "@rspack/binding-linux-s390x-gnu": "npm:2.1.10"
+    "@rspack/binding-linux-x64-gnu": "npm:2.1.10"
+    "@rspack/binding-linux-x64-musl": "npm:2.1.10"
+    "@rspack/binding-wasm32-wasi": "npm:2.1.10"
+    "@rspack/binding-win32-arm64-msvc": "npm:2.1.10"
+    "@rspack/binding-win32-ia32-msvc": "npm:2.1.10"
+    "@rspack/binding-win32-x64-msvc": "npm:2.1.10"
  dependenciesMeta:
    "@rspack/binding-darwin-arm64":
      optional: true
@@ -4914,15 +4914,15 @@ __metadata:
      optional: true
    "@rspack/binding-win32-x64-msvc":
      optional: true
-  checksum: 10/bf3ef6f75b0fa3dafc8dc73bfb49ae31e706e466699a88e0ef35d7273800e3c241489def836041688dded31b9ec3eca61d12bc0c30f8fa18839ae879ab8d2182
+  checksum: 10/b15410b23aac7bf934d271a17994fc13dd10ddf65eeaa20a84dedb2b2baf753cd411c4b56e971728c3ee054be5bafd46238e7fc9721ae883a0a8a5c5e121bd66
  languageName: node
  linkType: hard

-"@rspack/core@npm:2.1.9":
-  version: 2.1.9
-  resolution: "@rspack/core@npm:2.1.9"
+"@rspack/core@npm:2.1.10":
+  version: 2.1.10
+  resolution: "@rspack/core@npm:2.1.10"
  dependencies:
-    "@rspack/binding": "npm:2.1.9"
+    "@rspack/binding": "npm:2.1.10"
  peerDependencies:
    "@module-federation/runtime-tools": ^0.24.1 || ^2.0.0
    "@swc/helpers": ^0.5.23
@@ -4931,7 +4931,7 @@ __metadata:
      optional: true
    "@swc/helpers":
      optional: true
-  checksum: 10/81a8d5b4855ea8783d18e9e0c422e18337e50b820bf1f867d5287dc5a3643307c03e39011049f485e63e676480ba71f5fb0e7fb7f4ceea72e4bc2eec2651c13d
+  checksum: 10/bf1e7183aa5e507668cc3233562a74d2d61ddbfb7279748ae9569094f43e041ced5893fe7191de3e2d44306cc017c6db0c0c4d823bc2fd9c6fbc53fbb18a8f22
  languageName: node
  linkType: hard

@@ -9698,10 +9698,10 @@ __metadata:
  languageName: node
  linkType: hard

-"globals@npm:17.9.0":
-  version: 17.9.0
-  resolution: "globals@npm:17.9.0"
-  checksum: 10/8619386d449e8cbb81e242eced8bca0a42e5c3633a3a35996b8b1618beb17ff9fb33bfe703d60d83d4b7f6f8a996dede4faf02f9e966e50ff895e0cf6122ae15
+"globals@npm:17.11.0":
+  version: 17.11.0
+  resolution: "globals@npm:17.11.0"
+  checksum: 10/9cff5b8099b585862ab0d31e8b93dc1c3e7b59239dc58b59447a38709715751df8794ee0d28f434f8e421b01aee3cc10051e2455b5c967d960e79f882e68aa0f
  languageName: node
  linkType: hard

@@ -9888,10 +9888,10 @@ __metadata:
  languageName: node
  linkType: hard

-"hls.js@npm:1.6.17":
-  version: 1.6.17
-  resolution: "hls.js@npm:1.6.17"
-  checksum: 10/345d6c98f7f32f25f1924d34d4177f37aa9ae10c95fe6518c4ca10b295acbf174fbeba113696fbce673a1ee90461b530e101dd2b2f4d958af82577706d6e24c2
+"hls.js@npm:1.7.0":
+  version: 1.7.0
+  resolution: "hls.js@npm:1.7.0"
+  checksum: 10/8bb97ba86b72a3be057bd0036b01df83adfe7dc10c76a5e177b24bae3f380e19d4180e061d8140b3b826e10c9f61a7b230e10019dcb81619ab2fc41e4d292ed9
  languageName: node
  linkType: hard

@@ -9955,8 +9955,8 @@ __metadata:
    "@octokit/rest": "npm:22.0.1"
    "@playwright/test": "npm:1.62.1"
    "@replit/codemirror-indentation-markers": "npm:6.5.3"
-    "@rsdoctor/rspack-plugin": "npm:1.6.1"
-    "@rspack/core": "npm:2.1.9"
+    "@rsdoctor/rspack-plugin": "npm:1.6.2"
+    "@rspack/core": "npm:2.1.10"
    "@rspack/dev-server": "npm:2.2.0"
    "@swc/helpers": "npm:0.5.23"
    "@thomasloven/round-slider": "npm:0.6.0"
@@ -10012,17 +10012,17 @@ __metadata:
    fuse.js: "npm:7.5.0"
    generate-license-file: "npm:4.2.1"
    glob: "npm:13.0.6"
-    globals: "npm:17.9.0"
+    globals: "npm:17.11.0"
    gulp: "npm:5.0.1"
    gulp-json-transform: "npm:0.5.0"
    gulp-rename: "npm:2.1.0"
-    hls.js: "npm:1.6.17"
+    hls.js: "npm:1.7.0"
    home-assistant-js-websocket: "npm:9.6.0"
    html-minifier-terser: "npm:7.2.0"
    husky: "npm:9.1.7"
    idb-keyval: "npm:6.3.0"
    intl-messageformat: "npm:11.2.13"
-    js-yaml: "npm:5.2.3"
+    js-yaml: "npm:5.3.0"
    jsdom: "npm:30.0.1"
    jszip: "npm:3.10.1"
    leaflet: "npm:1.9.4"
@@ -10956,14 +10956,14 @@ __metadata:
  languageName: node
  linkType: hard

-"js-yaml@npm:5.2.3":
-  version: 5.2.3
-  resolution: "js-yaml@npm:5.2.3"
+"js-yaml@npm:5.3.0":
+  version: 5.3.0
+  resolution: "js-yaml@npm:5.3.0"
  dependencies:
    argparse: "npm:^2.0.1"
  bin:
    js-yaml: bin/js-yaml.mjs
-  checksum: 10/5d2562f2d7e7bc51bd678b43d2dbc3965129ac854222c794157369c8904d249cfc78325dff8fc64becb505a2506242548c54c8fa50cdb24554bb1a557e460004
+  checksum: 10/6c7e8ea8dd5643d9df73f4aa796f3572537284e9b819b74ef919467452bfa4624f8f7477cfc775c91db7e2f32387133b1b6c4e95aef9702be6bb042ae554884a
  languageName: node
  linkType: hard
Author	SHA1	Message	Date
Petar Petrov	651cb7934a	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-18 17:42:02 +03:00
Petar Petrov	1e1ff92dd2	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.	2026-08-18 17:33:49 +03:00
Petar Petrov	3a58565e5e	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.	2026-08-18 17:26:30 +03:00
Petar Petrov	c299ea9663	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.	2026-08-18 16:45:38 +03:00
Petar Petrov	a2d47af076	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.	2026-08-18 16:39:28 +03:00
Petar Petrov	954d0baa65	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.	2026-08-18 15:20:53 +03:00
Petar Petrov	9a945f4105	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.	2026-08-18 15:01:32 +03:00
Petar Petrov	20be632c96	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.	2026-08-18 14:33:17 +03:00
Petar Petrov	89bc7a40f2	Pass devices to getDeviceArea so bridged nodes inherit their area	2026-08-18 13:47:16 +03:00
Petar Petrov	924cc057b9	Render Matter 'unknown' link strength as a present, neutral link	2026-08-18 10:30:22 +03:00
Petar Petrov	43c9e71a8f	Refine Matter graph HA node: theme-aware memoization, drop dead branch	2026-08-18 10:30:22 +03:00
Petar Petrov	a98a598c79	Add central Home Assistant node to Matter network graph	2026-08-18 10:30:22 +03:00
Petar Petrov	e6ec2540e7	Add Matter network topology visualization page	2026-08-18 10:30:22 +03:00
Petar PetrovandGitHub	343f1e840a	Fix Z-Wave network visualization showing wrong route edges (#53676 ) Fix repeater mapping and route direction in Z-Wave network graph	2026-08-18 08:07:24 +03:00
G JohanssonandGitHub	1369f80eb0	Allow using description in create_entry for repair flows (#53671 )	2026-08-17 22:08:57 +02:00
Paul BotteinandGitHub	cd52f7b193	Fix the clear button alignment in the domains filter (#53687 )	2026-08-17 17:47:35 +00:00
renovate[bot]GitHubrenovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	86dea86b6c	Update dependency js-yaml to v5.3.0 (#53679 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-08-17 17:16:53 +00:00
Paul BotteinandGitHub	04035016b0	Extract the data table filter chip into ha-filter-pane-chip (#53682 )	2026-08-17 19:16:46 +02:00
Petar PetrovandGitHub	52b0b46991	Group sankey devices by count as well as by value (#53680 ) * Group sankey devices by count as well as by value The 0.1%-of-total value threshold only catches devices that are a negligible share of the home total. A breaker panel with dozens of similar-sized circuit clamps sits entirely above it, so nothing groups and every node collapses toward the 1px minimum with labels shrinking to match. Cap the number of named children per parent too, defaulting to 20 (the readable capacity of the default 400px card). Over-cap devices are grouped into the same per-parent "Other" node the value threshold already produces, so the flow arithmetic is unchanged, and the cap is configurable per card via max_devices. * Clarify the max_devices label is per upstream device, not per floor or area * Make max_devices budget named devices, not nodes A cap of 20 rendered 19 devices because a slot was reserved for the Other node, and a cap of 1 rendered none. The option now means what its name and its namesake on the devices graph mean: at most this many devices are shown by name, with Other as overhead on top. * Extract the sankey device cap into findDevicesOverCap Moves the count-cap logic out of buildSankeyDeviceNodes into an exported function that takes the graph it needs, so it can be unit tested directly, and trims the commentary to the two non-obvious rules (why the whole subtree is grouped, and why at least two devices are).	2026-08-17 19:14:48 +02:00
Stefan Agner GitHub Claude Fable 5	d5389b5bef	Fall back to option key for untranslated repair menu options (#53681 ) Repair fix flows build their menu from the suggestions the backend reports. A suggestion this frontend has no translation for yet (e.g. a newer Supervisor offering a new repair suggestion) rendered as an empty, unlabeled menu entry. Show the raw option key instead, matching the fallback the form step header already uses. Co-authored-by: Claude Fable 5 <[email protected]>	2026-08-17 15:23:02 +02:00
Logan Rosen GitHub Copilot App	f828c636a2	Fix Energy configuration back navigation (#53574 ) * Fix Energy configuration back navigation Co-authored-by: Copilot App <[email protected]> * Align app E2E navigation with production Co-authored-by: Copilot App <[email protected]> --------- Co-authored-by: Copilot App <[email protected]>	2026-08-17 12:45:08 +03:00
Petar PetrovandGitHub	e91337b320	Log console error when a dashboard resource fails to load (#53675 ) * Log console error when a dashboard resource fails to load * Include the rejection reason in the resource load error	2026-08-17 10:04:51 +02:00
karwostsandGitHub	8ab7c118a9	Fix custom weather icons (#53667 )	2026-08-17 06:52:16 +02:00
karwostsandGitHub	0eafb1f4b4	Add themes to yaml reload menu (#53673 )	2026-08-17 06:03:12 +02:00
neyz GitHub karwosts	9a7722a02e	Remove weather card pointer cursor when it has no action (#53654 ) * Remove weather card pointer cursor when it has no action * use hasAnyAction helper --------- Co-authored-by: karwosts <[email protected]>	2026-08-16 09:38:05 -07:00
renovate[bot]GitHubrenovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	3e184eeb39	Update dependency @rspack/core to v2.1.10 (#53663 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-08-16 12:37:16 +02:00
renovate[bot]GitHubrenovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	61be4e2952	Update dependency @rsdoctor/rspack-plugin to v1.6.2 (#53662 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-08-16 12:13:08 +02:00
Paul BotteinandGitHub	315cf97e56	Prevent the sidebar from scrolling the dashboard (#53644 )	2026-08-16 06:27:47 +00:00
karwostsandGitHub	771a8aa4c9	Fix negative button of duration selector (#53646 )	2026-08-16 06:27:17 +00:00
G Johansson GitHub Simon Lamon	d9aa649854	Remove deprecated battery props from vacuum (#53005 ) Co-authored-by: Simon Lamon <[email protected]>	2026-08-16 06:26:54 +00:00
karwosts GitHub Simon Lamon	7a087cd6d0	Ability to link a person to an existing user (#53550 ) * Support linking a person to an existing user * Don't delete preexisting user on cancel submit * retry ci * Don't show choice when no floating users exist * collapse to single dialog --------- Co-authored-by: Simon Lamon <[email protected]>	2026-08-16 06:25:03 +00:00
renovate[bot]GitHubrenovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	32a30468bb	Update dependency globals to v17.10.0 (#53647 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-08-16 06:24:56 +00:00
karwostsandGitHub	0ace3cedfb	Add disabled to button group (#53651 )	2026-08-16 06:24:33 +00:00
karwostsandGitHub	aba7478e26	Fix choose selector minor issues (#53648 )	2026-08-16 06:24:28 +00:00
renovate[bot]GitHubrenovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	c8b2e5160a	Update dependency hls.js to v1.6.18 (#53649 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-08-16 06:21:52 +00:00
dependabot[bot]GitHubdependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	4c46ca0918	Bump the codeql-action group across 1 directory with 2 updates (#53661 ) Bumps the codeql-action group with 2 updates in the / directory: [github/codeql-action/init](https://github.com/github/codeql-action) and [github/codeql-action/analyze](https://github.com/github/codeql-action). Updates `github/codeql-action/init` from 4.37.4 to 4.37.6 - [Release notes](https://github.com/github/codeql-action/releases) - [Changelog](https://github.com/github/codeql-action/blob/main/CHANGELOG.md) - [Commits](https://github.com/github/codeql-action/compare/f205ea1c3313d32999d8d6a48b4f6530d4437b38...5595ccaf912efad79be6eef63a5619ff05969be3) Updates `github/codeql-action/analyze` from 4.37.4 to 4.37.6 - [Release notes](https://github.com/github/codeql-action/releases) - [Changelog](https://github.com/github/codeql-action/blob/main/CHANGELOG.md) - [Commits](https://github.com/github/codeql-action/compare/f205ea1c3313d32999d8d6a48b4f6530d4437b38...5595ccaf912efad79be6eef63a5619ff05969be3) --- updated-dependencies: - dependency-name: github/codeql-action/init dependency-version: 4.37.6 dependency-type: direct:production update-type: version-update:semver-patch dependency-group: codeql-action - dependency-name: github/codeql-action/analyze dependency-version: 4.37.6 dependency-type: direct:production update-type: version-update:semver-patch dependency-group: codeql-action ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2026-08-16 06:20:49 +00:00
Logan Rosen GitHub Copilot App	0483106f61	Restore bundle size budget headroom (#53659 ) Co-authored-by: Copilot App <[email protected]>	2026-08-16 08:16:29 +02:00