Update Struct for Buttons Footer

Co-authored-by: Zack Barett <zackbarett@hey.com>

.github/ISSUE_TEMPLATE.md

@@ -51,7 +51,7 @@ DO NOT DELETE ANY TEXT from this template! Otherwise, your issue may be closed w
 <!--
   Provide details about the versions you are using, which helps us reproducing
   and finding the issue quicker. Version information is found in the
-  Home Assistant frontend: Configuration -> Info.
+  Home Assistant frontend: Settings -> About.
 
   Browser version and operating system is important! Please try to replicate
   your issue in a different browser and be sure to include your findings.

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -64,7 +64,7 @@ body:
       label: What version of Home Assistant Core has the issue?
       placeholder: core-
       description: >
-        Can be found in the Configuration panel -> Info.
+        Can be found in: [Settings -> About](https://my.home-assistant.io/redirect/info/).
   - type: input
     attributes:
       label: What was the last working version of Home Assistant Core?

build-scripts/env.js

@@ -26,8 +26,8 @@ module.exports = {
   },
   version() {
     const version = fs
-      .readFileSync(path.resolve(paths.polymer_dir, "setup.cfg"), "utf8")
-      .match(/version\W+=\W(\d{8}\.\d)/);
+      .readFileSync(path.resolve(paths.polymer_dir, "pyproject.toml"), "utf8")
+      .match(/version\W+=\W"(\d{8}\.\d)"/);
     if (!version) {
       throw Error("Version not found");
     }

demo/src/configs/jimpower/lovelace.ts

@@ -194,7 +194,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
                     type: "state-icon",
                     tap_action: {
                       action: "call-service",
-                      service_data: {
+                      data: {
                         entity_id: "group.downstairs_lights",
                       },
                       service: "homeassistant.toggle",

demo/src/configs/teachingbirds/lovelace.ts

@@ -377,7 +377,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
               name: "AC bed",
               tap_action: {
                 action: "call-service",
-                service_data: {
+                data: {
                   entity_id: "script.air_cleaner_quiet",
                 },
                 service: "script.turn_on",
@@ -390,7 +390,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
               name: "AC bed",
               tap_action: {
                 action: "call-service",
-                service_data: {
+                data: {
                   entity_id: "script.air_cleaner_auto",
                 },
                 service: "script.turn_on",
@@ -403,7 +403,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
               name: "AC bed",
               tap_action: {
                 action: "call-service",
-                service_data: {
+                data: {
                   entity_id: "script.air_cleaner_turbo",
                 },
                 service: "script.turn_on",
@@ -416,7 +416,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
               name: "AC",
               tap_action: {
                 action: "call-service",
-                service_data: {
+                data: {
                   entity_id: "script.ac_off",
                 },
                 service: "script.turn_on",
@@ -429,7 +429,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
               name: "AC",
               tap_action: {
                 action: "call-service",
-                service_data: {
+                data: {
                   entity_id: "script.ac_on",
                 },
                 service: "script.turn_on",
@@ -629,7 +629,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                   entity: "scene.morning_lights",
                   tap_action: {
                     action: "call-service",
-                    service_data: {
+                    data: {
                       entity_id: "scene.morning_lights",
                     },
                     service: "scene.turn_on",
@@ -641,7 +641,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                   entity: "scene.movie_time",
                   tap_action: {
                     action: "call-service",
-                    service_data: {
+                    data: {
                       entity_id: "scene.movie_time",
                     },
                     service: "scene.turn_on",
@@ -702,7 +702,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                   entity: "light.downstairs_lights",
                   tap_action: {
                     action: "call-service",
-                    service_data: {
+                    data: {
                       entity_id: "light.downstairs_lights",
                     },
                     service: "light.toggle",
@@ -714,7 +714,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                   entity: "light.upstairs_lights",
                   tap_action: {
                     action: "call-service",
-                    service_data: {
+                    data: {
                       entity_id: "light.upstairs_lights",
                     },
                     service: "light.toggle",

demo/src/stubs/energy.ts

@@ -1,4 +1,4 @@
-import { format, startOfToday, startOfTomorrow } from "date-fns";
+import { format, startOfToday, startOfTomorrow } from "date-fns/esm";
 import { EnergySolarForecasts } from "../../../src/data/energy";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 

demo/src/stubs/history.ts

@@ -4,7 +4,7 @@ import {
   addMonths,
   differenceInHours,
   endOfDay,
-} from "date-fns";
+} from "date-fns/esm";
 import { HassEntity } from "home-assistant-js-websocket";
 import { StatisticValue } from "../../../src/data/history";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";

gallery/src/data/traces/basic_trace.ts

@@ -119,7 +119,7 @@ export const basicTrace: DemoTrace = {
             params: {
               domain: "input_boolean",
               service: "toggle",
-              service_data: {},
+              data: {},
               target: {
                 entity_id: ["input_boolean.toggle_4"],
               },
@@ -164,7 +164,7 @@ export const basicTrace: DemoTrace = {
             params: {
               domain: "input_boolean",
               service: "toggle",
-              service_data: {},
+              data: {},
               target: {
                 entity_id: ["input_boolean.toggle_2"],
               },
@@ -182,7 +182,7 @@ export const basicTrace: DemoTrace = {
             params: {
               domain: "input_boolean",
               service: "toggle",
-              service_data: {},
+              data: {},
               target: {
                 entity_id: ["input_boolean.toggle_3"],
               },
@@ -200,7 +200,7 @@ export const basicTrace: DemoTrace = {
             params: {
               domain: "input_boolean",
               service: "toggle",
-              service_data: {},
+              data: {},
               target: {
                 entity_id: ["input_boolean.toggle_4"],
               },

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

@@ -249,7 +249,7 @@ const CONFIGS = [
       name: Bed light
       action_name: Toggle light
       service: light.toggle
-      service_data:
+      data:
         entity_id: light.bed_light
     - type: section
       label: Links

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

@@ -199,7 +199,7 @@ const CONFIGS = [
       tap_action:
         action: call-service
         service: light.turn_on
-        service_data:
+        data:
           entity_id: light.ceiling_lights
     - entity: sun.sun
       name: Regular

gallery/src/pages/lovelace/picture-elements-card.ts

@@ -40,7 +40,7 @@ const CONFIGS = [
         left: 90%
         padding: 0px
       service: light.turn_off
-      service_data:
+      data:
         entity_id: group.all_lights
     - type: icon
       icon: mdi:cctv
@@ -88,7 +88,7 @@ const CONFIGS = [
         left: 90%
         padding: 0px
       service: light.turn_off
-      service_data:
+      data:
         entity_id: group.all_lights
     - type: icon
       icon: mdi:cctv

hassio/src/addon-view/hassio-addon-dashboard.ts

@@ -17,7 +17,10 @@ import {
   HassioAddonDetails,
 } from "../../../src/data/hassio/addon";
 import { extractApiErrorMessage } from "../../../src/data/hassio/common";
-import { setSupervisorOption } from "../../../src/data/hassio/supervisor";
+import {
+  fetchHassioSupervisorInfo,
+  setSupervisorOption,
+} from "../../../src/data/hassio/supervisor";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import { showConfirmationDialog } from "../../../src/dialogs/generic/show-dialog-box";
 import "../../../src/layouts/hass-error-screen";
@@ -169,38 +172,40 @@ class HassioAddonDashboard extends LitElement {
     if (this.route.path === "") {
       const requestedAddon = extractSearchParam("addon");
       const requestedAddonRepository = extractSearchParam("repository_url");
-      if (
-        requestedAddonRepository &&
-        !this.supervisor.supervisor.addons_repositories.find(
-          (repo) => repo === requestedAddonRepository
-        )
-      ) {
+      if (requestedAddonRepository) {
+        const supervisorInfo = await fetchHassioSupervisorInfo(this.hass);
         if (
-          !(await showConfirmationDialog(this, {
-            title: this.supervisor.localize("my.add_addon_repository_title"),
-            text: this.supervisor.localize(
-              "my.add_addon_repository_description",
-              { addon: requestedAddon, repository: requestedAddonRepository }
-            ),
-            confirmText: this.supervisor.localize("common.add"),
-            dismissText: this.supervisor.localize("common.cancel"),
-          }))
+          !supervisorInfo.addons_repositories.find(
+            (repo) => repo === requestedAddonRepository
+          )
         ) {
-          this._error = this.supervisor.localize(
-            "my.error_repository_not_found"
-          );
-          return;
-        }
+          if (
+            !(await showConfirmationDialog(this, {
+              title: this.supervisor.localize("my.add_addon_repository_title"),
+              text: this.supervisor.localize(
+                "my.add_addon_repository_description",
+                { addon: requestedAddon, repository: requestedAddonRepository }
+              ),
+              confirmText: this.supervisor.localize("common.add"),
+              dismissText: this.supervisor.localize("common.cancel"),
+            }))
+          ) {
+            this._error = this.supervisor.localize(
+              "my.error_repository_not_found"
+            );
+            return;
+          }
 
-        try {
-          await setSupervisorOption(this.hass, {
-            addons_repositories: [
-              ...this.supervisor.supervisor.addons_repositories,
-              requestedAddonRepository,
-            ],
-          });
-        } catch (err: any) {
-          this._error = extractApiErrorMessage(err);
+          try {
+            await setSupervisorOption(this.hass, {
+              addons_repositories: [
+                ...supervisorInfo.addons_repositories,
+                requestedAddonRepository,
+              ],
+            });
+          } catch (err: any) {
+            this._error = extractApiErrorMessage(err);
+          }
         }
       }
 

package.json

@@ -72,8 +72,8 @@
     "@material/mwc-textfield": "0.25.3",
     "@material/mwc-top-app-bar-fixed": "^0.25.3",
     "@material/top-app-bar": "14.0.0-canary.261f2db59.0",
-    "@mdi/js": "6.6.95",
-    "@mdi/svg": "6.6.95",
+    "@mdi/js": "6.7.96",
+    "@mdi/svg": "6.7.96",
     "@polymer/app-layout": "^3.1.0",
     "@polymer/iron-flex-layout": "^3.0.1",
     "@polymer/iron-icon": "^3.0.1",

pyproject.toml

@@ -1,3 +1,30 @@
 [build-system]
-requires = ["setuptools~=60.5", "wheel~=0.37.1"]
+requires = ["setuptools~=62.3", "wheel~=0.37.1"]
 build-backend = "setuptools.build_meta"
+
+[project]
+name         = "home-assistant-frontend"
+version      = "20220525.0"
+license      = {text = "Apache-2.0"}
+description  = "The Home Assistant frontend"
+readme       = "README.md"
+authors      = [
+    {name = "The Home Assistant Authors", email = "hello@home-assistant.io"}
+]
+requires-python = ">=3.4.0"
+
+[project.urls]
+"Homepage" = "https://github.com/home-assistant/frontend"
+
+[tool.setuptools]
+platforms = ["any"]
+zip-safe  = false
+include-package-data = true
+
+[tool.setuptools.packages.find]
+include = ["hass_frontend*"]
+
+[tool.mypy]
+python_version = 3.4
+show_error_codes = true
+strict = true

script/version_bump.js

@@ -50,14 +50,14 @@ async function main(args) {
     return;
   }
 
-  const setup = fs.readFileSync("setup.cfg", "utf8");
-  const version = setup.match(/\d{8}\.\d+/)[0];
+  const setup = fs.readFileSync("pyproject.toml", "utf8");
+  const version = setup.match(/version\W+=\W"(\d{8}\.\d)"/)[1];
   const newVersion = method(version);
 
   console.log("Current version:", version);
   console.log("New version:", newVersion);
 
-  fs.writeFileSync("setup.cfg", setup.replace(version, newVersion), "utf-8");
+  fs.writeFileSync("pyproject.toml", setup.replace(version, newVersion), "utf-8");
 
   if (!commit) {
     return;

setup.cfg

@@ -1,26 +0,0 @@
-[metadata]
-name         = home-assistant-frontend
-version      = 20220516.0
-author       = The Home Assistant Authors
-author_email = hello@home-assistant.io
-license      = Apache-2.0
-platforms    = any
-description  = The Home Assistant frontend
-long_description = file: README.md
-long_description_content_type = text/markdown
-url          = https://github.com/home-assistant/frontend
-
-[options]
-packages = find:
-zip_safe = False
-include_package_data = True
-python_requires = >= 3.4.0
-
-[options.packages.find]
-include =
-    hass_frontend*
-
-[mypy]
-python_version = 3.4
-show_error_codes = True
-strict = True

src/common/entity/compute_active_state.ts

@@ -1,6 +1,11 @@
 import { HassEntity } from "home-assistant-js-websocket";
+import { UNAVAILABLE_STATES } from "../../data/entity";
 
 export const computeActiveState = (stateObj: HassEntity): string => {
+  if (UNAVAILABLE_STATES.includes(stateObj.state)) {
+    return stateObj.state;
+  }
+
   const domain = stateObj.entity_id.split(".")[0];
   let state = stateObj.state;
 

src/common/entity/compute_state_display.ts

@@ -2,67 +2,74 @@ import { HassEntity } from "home-assistant-js-websocket";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { FrontendLocaleData } from "../../data/translation";
 import {
-  updateIsInstalling,
-  UpdateEntity,
   UPDATE_SUPPORT_PROGRESS,
+  updateIsInstallingFromAttributes,
 } from "../../data/update";
 import { formatDate } from "../datetime/format_date";
 import { formatDateTime } from "../datetime/format_date_time";
 import { formatTime } from "../datetime/format_time";
-import { formatNumber, isNumericState } from "../number/format_number";
+import { formatNumber, isNumericFromAttributes } from "../number/format_number";
 import { LocalizeFunc } from "../translations/localize";
-import { computeStateDomain } from "./compute_state_domain";
-import { supportsFeature } from "./supports-feature";
+import { supportsFeatureFromAttributes } from "./supports-feature";
 import { formatDuration, UNIT_TO_SECOND_CONVERT } from "../datetime/duration";
+import { computeDomain } from "./compute_domain";
 
 export const computeStateDisplay = (
   localize: LocalizeFunc,
   stateObj: HassEntity,
   locale: FrontendLocaleData,
   state?: string
-): string => {
-  const compareState = state !== undefined ? state : stateObj.state;
+): string =>
+  computeStateDisplayFromEntityAttributes(
+    localize,
+    locale,
+    stateObj.entity_id,
+    stateObj.attributes,
+    state !== undefined ? state : stateObj.state
+  );
 
-  if (compareState === UNKNOWN || compareState === UNAVAILABLE) {
-    return localize(`state.default.${compareState}`);
+export const computeStateDisplayFromEntityAttributes = (
+  localize: LocalizeFunc,
+  locale: FrontendLocaleData,
+  entityId: string,
+  attributes: any,
+  state: string
+): string => {
+  if (state === UNKNOWN || state === UNAVAILABLE) {
+    return localize(`state.default.${state}`);
   }
 
   // Entities with a `unit_of_measurement` or `state_class` are numeric values and should use `formatNumber`
-  if (isNumericState(stateObj)) {
+  if (isNumericFromAttributes(attributes)) {
     // state is duration
     if (
-      stateObj.attributes.device_class === "duration" &&
-      stateObj.attributes.unit_of_measurement &&
-      UNIT_TO_SECOND_CONVERT[stateObj.attributes.unit_of_measurement]
+      attributes.device_class === "duration" &&
+      attributes.unit_of_measurement &&
+      UNIT_TO_SECOND_CONVERT[attributes.unit_of_measurement]
     ) {
       try {
-        return formatDuration(
-          compareState,
-          stateObj.attributes.unit_of_measurement
-        );
+        return formatDuration(state, attributes.unit_of_measurement);
       } catch (_err) {
         // fallback to default
       }
     }
-    if (stateObj.attributes.device_class === "monetary") {
+    if (attributes.device_class === "monetary") {
       try {
-        return formatNumber(compareState, locale, {
+        return formatNumber(state, locale, {
           style: "currency",
-          currency: stateObj.attributes.unit_of_measurement,
+          currency: attributes.unit_of_measurement,
           minimumFractionDigits: 2,
         });
       } catch (_err) {
         // fallback to default
       }
     }
-    return `${formatNumber(compareState, locale)}${
-      stateObj.attributes.unit_of_measurement
-        ? " " + stateObj.attributes.unit_of_measurement
-        : ""
+    return `${formatNumber(state, locale)}${
+      attributes.unit_of_measurement ? " " + attributes.unit_of_measurement : ""
     }`;
   }
 
-  const domain = computeStateDomain(stateObj);
+  const domain = computeDomain(entityId);
 
   if (domain === "input_datetime") {
     if (state !== undefined) {
@@ -97,36 +104,32 @@ export const computeStateDisplay = (
     } else {
       // If not trying to display an explicit state, create `Date` object from `stateObj`'s attributes then format.
       let date: Date;
-      if (stateObj.attributes.has_date && stateObj.attributes.has_time) {
+      if (attributes.has_date && attributes.has_time) {
         date = new Date(
-          stateObj.attributes.year,
-          stateObj.attributes.month - 1,
-          stateObj.attributes.day,
-          stateObj.attributes.hour,
-          stateObj.attributes.minute
+          attributes.year,
+          attributes.month - 1,
+          attributes.day,
+          attributes.hour,
+          attributes.minute
         );
         return formatDateTime(date, locale);
       }
-      if (stateObj.attributes.has_date) {
-        date = new Date(
-          stateObj.attributes.year,
-          stateObj.attributes.month - 1,
-          stateObj.attributes.day
-        );
+      if (attributes.has_date) {
+        date = new Date(attributes.year, attributes.month - 1, attributes.day);
         return formatDate(date, locale);
       }
-      if (stateObj.attributes.has_time) {
+      if (attributes.has_time) {
         date = new Date();
-        date.setHours(stateObj.attributes.hour, stateObj.attributes.minute);
+        date.setHours(attributes.hour, attributes.minute);
         return formatTime(date, locale);
       }
-      return stateObj.state;
+      return state;
     }
   }
 
   if (domain === "humidifier") {
-    if (compareState === "on" && stateObj.attributes.humidity) {
-      return `${stateObj.attributes.humidity} %`;
+    if (state === "on" && attributes.humidity) {
+      return `${attributes.humidity} %`;
     }
   }
 
@@ -136,7 +139,7 @@ export const computeStateDisplay = (
     domain === "number" ||
     domain === "input_number"
   ) {
-    return formatNumber(compareState, locale);
+    return formatNumber(state, locale);
   }
 
   // state of button is a timestamp
@@ -144,12 +147,12 @@ export const computeStateDisplay = (
     domain === "button" ||
     domain === "input_button" ||
     domain === "scene" ||
-    (domain === "sensor" && stateObj.attributes.device_class === "timestamp")
+    (domain === "sensor" && attributes.device_class === "timestamp")
   ) {
     try {
-      return formatDateTime(new Date(compareState), locale);
+      return formatDateTime(new Date(state), locale);
     } catch (_err) {
-      return compareState;
+      return state;
     }
   }
 
@@ -160,30 +163,28 @@ export const computeStateDisplay = (
     // When the latest version is skipped, show the latest version
     // When update is not available, show "Up-to-date"
     // When update is not available and there is no latest_version show "Unavailable"
-    return compareState === "on"
-      ? updateIsInstalling(stateObj as UpdateEntity)
-        ? supportsFeature(stateObj, UPDATE_SUPPORT_PROGRESS)
+    return state === "on"
+      ? updateIsInstallingFromAttributes(attributes)
+        ? supportsFeatureFromAttributes(attributes, UPDATE_SUPPORT_PROGRESS)
           ? localize("ui.card.update.installing_with_progress", {
-              progress: stateObj.attributes.in_progress,
+              progress: attributes.in_progress,
             })
           : localize("ui.card.update.installing")
-        : stateObj.attributes.latest_version
-      : stateObj.attributes.skipped_version ===
-        stateObj.attributes.latest_version
-      ? stateObj.attributes.latest_version ??
-        localize("state.default.unavailable")
+        : attributes.latest_version
+      : attributes.skipped_version === attributes.latest_version
+      ? attributes.latest_version ?? localize("state.default.unavailable")
       : localize("ui.card.update.up_to_date");
   }
 
   return (
     // Return device class translation
-    (stateObj.attributes.device_class &&
+    (attributes.device_class &&
       localize(
-        `component.${domain}.state.${stateObj.attributes.device_class}.${compareState}`
+        `component.${domain}.state.${attributes.device_class}.${state}`
       )) ||
     // Return default translation
-    localize(`component.${domain}.state._.${compareState}`) ||
+    localize(`component.${domain}.state._.${state}`) ||
     // We don't know! Return the raw state.
-    compareState
+    state
   );
 };

src/common/entity/compute_state_name.ts

@@ -1,7 +1,13 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { computeObjectId } from "./compute_object_id";
 
+export const computeStateNameFromEntityAttributes = (
+  entityId: string,
+  attributes: { [key: string]: any }
+): string =>
+  attributes.friendly_name === undefined
+    ? computeObjectId(entityId).replace(/_/g, " ")
+    : attributes.friendly_name || "";
+
 export const computeStateName = (stateObj: HassEntity): string =>
-  stateObj.attributes.friendly_name === undefined
-    ? computeObjectId(stateObj.entity_id).replace(/_/g, " ")
-    : stateObj.attributes.friendly_name || "";
+  computeStateNameFromEntityAttributes(stateObj.entity_id, stateObj.attributes);

src/common/entity/domain_icon.ts

@@ -29,7 +29,8 @@ import {
   mdiWeatherNight,
 } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { updateIsInstalling, UpdateEntity } from "../../data/update";
+import { UpdateEntity, updateIsInstalling } from "../../data/update";
+import { weatherIcon } from "../../data/weather";
 /**
  * Return the icon to be used for a domain.
  *
@@ -46,6 +47,20 @@ export const domainIcon = (
   stateObj?: HassEntity,
   state?: string
 ): string => {
+  const icon = domainIconWithoutDefault(domain, stateObj, state);
+  if (icon) {
+    return icon;
+  }
+  // eslint-disable-next-line
+  console.warn(`Unable to find icon for domain ${domain}`);
+  return DEFAULT_DOMAIN_ICON;
+};
+
+export const domainIconWithoutDefault = (
+  domain: string,
+  stateObj?: HassEntity,
+  state?: string
+): string | undefined => {
   const compareState = state !== undefined ? state : stateObj?.state;
 
   switch (domain) {
@@ -87,6 +102,15 @@ export const domainIcon = (
         ? mdiCheckCircleOutline
         : mdiCloseCircleOutline;
 
+    case "input_datetime":
+      if (!stateObj?.attributes.has_date) {
+        return mdiClock;
+      }
+      if (!stateObj.attributes.has_time) {
+        return mdiCalendar;
+      }
+      break;
+
     case "lock":
       switch (compareState) {
         case "unlocked":
@@ -124,15 +148,6 @@ export const domainIcon = (
       break;
     }
 
-    case "input_datetime":
-      if (!stateObj?.attributes.has_date) {
-        return mdiClock;
-      }
-      if (!stateObj.attributes.has_time) {
-        return mdiCalendar;
-      }
-      break;
-
     case "sun":
       return stateObj?.state === "above_horizon"
         ? FIXED_DOMAIN_ICONS[domain]
@@ -144,13 +159,14 @@ export const domainIcon = (
           ? mdiPackageDown
           : mdiPackageUp
         : mdiPackage;
+
+    case "weather":
+      return weatherIcon(stateObj?.state);
   }
 
   if (domain in FIXED_DOMAIN_ICONS) {
     return FIXED_DOMAIN_ICONS[domain];
   }
 
-  // eslint-disable-next-line
-  console.warn(`Unable to find icon for domain ${domain}`);
-  return DEFAULT_DOMAIN_ICON;
+  return undefined;
 };

src/common/entity/supports-feature.ts

@@ -3,6 +3,13 @@ import { HassEntity } from "home-assistant-js-websocket";
 export const supportsFeature = (
   stateObj: HassEntity,
   feature: number
+): boolean => supportsFeatureFromAttributes(stateObj.attributes, feature);
+
+export const supportsFeatureFromAttributes = (
+  attributes: {
+    [key: string]: any;
+  },
+  feature: number
 ): boolean =>
   // eslint-disable-next-line no-bitwise
-  (stateObj.attributes.supported_features! & feature) !== 0;
+  (attributes.supported_features! & feature) !== 0;

src/common/number/format_number.ts

@@ -7,8 +7,11 @@ import { round } from "./round";
  * @param stateObj The entity state object
  */
 export const isNumericState = (stateObj: HassEntity): boolean =>
-  !!stateObj.attributes.unit_of_measurement ||
-  !!stateObj.attributes.state_class;
+  isNumericFromAttributes(stateObj.attributes);
+
+export const isNumericFromAttributes = (attributes: {
+  [key: string]: any;
+}): boolean => !!attributes.unit_of_measurement || !!attributes.state_class;
 
 export const numberFormatToLocale = (
   localeOptions: FrontendLocaleData

src/common/util/throttle.ts

@@ -13,7 +13,7 @@ export const throttle = <T extends any[]>(
 ) => {
   let timeout: number | undefined;
   let previous = 0;
-  return (...args: T): void => {
+  const throttledFunc = (...args: T): void => {
     const later = () => {
       previous = leading === false ? 0 : Date.now();
       timeout = undefined;
@@ -35,4 +35,10 @@ export const throttle = <T extends any[]>(
       timeout = window.setTimeout(later, remaining);
     }
   };
+  throttledFunc.cancel = () => {
+    clearTimeout(timeout);
+    timeout = undefined;
+    previous = 0;
+  };
+  return throttledFunc;
 };

src/components/chart/chart-date-adapter.ts

@@ -34,7 +34,7 @@ import {
   endOfMonth,
   endOfQuarter,
   endOfYear,
-} from "date-fns";
+} from "date-fns/esm";
 import {
   formatDate,
   formatDateMonth,

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

@@ -20,7 +20,7 @@ interface HassEntityWithCachedName extends HassEntity {
   friendly_name: string;
 }
 
-export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
+export type HaEntityPickerEntityFilterFunc = (entity: HassEntity) => boolean;
 
 // eslint-disable-next-line lit/prefer-static-styles
 const rowRenderer: ComboBoxLitRenderer<HassEntityWithCachedName> = (item) =>

src/components/ha-button-menu.ts

@@ -2,12 +2,7 @@ import type { Button } from "@material/mwc-button";
 import "@material/mwc-menu";
 import type { Corner, Menu, MenuCorner } from "@material/mwc-menu";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import {
-  customElement,
-  property,
-  query,
-  queryAssignedElements,
-} from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import { FOCUS_TARGET } from "../dialogs/make-dialog-manager";
 import type { HaIconButton } from "./ha-icon-button";
 
@@ -33,12 +28,6 @@ export class HaButtonMenu extends LitElement {
 
   @query("mwc-menu", true) private _menu?: Menu;
 
-  @queryAssignedElements({
-    slot: "trigger",
-    selector: "ha-icon-button, mwc-button",
-  })
-  private _triggerButton!: Array<HaIconButton | Button>;
-
   public get items() {
     return this._menu?.items;
   }
@@ -51,14 +40,14 @@ export class HaButtonMenu extends LitElement {
     if (this._menu?.open) {
       this._menu.focusItemAtIndex(0);
     } else {
-      this._triggerButton[0]?.focus();
+      this._triggerButton?.focus();
     }
   }
 
   protected render(): TemplateResult {
     return html`
       <div @click=${this._handleClick}>
-        <slot name="trigger"></slot>
+        <slot name="trigger" @slotchange=${this._setTriggerAria}></slot>
       </div>
       <mwc-menu
         .corner=${this.corner}
@@ -97,6 +86,18 @@ export class HaButtonMenu extends LitElement {
     this._menu!.show();
   }
 
+  private get _triggerButton() {
+    return this.querySelector(
+      'ha-icon-button[slot="trigger"], mwc-button[slot="trigger"]'
+    ) as HaIconButton | Button | null;
+  }
+
+  private _setTriggerAria() {
+    if (this._triggerButton) {
+      this._triggerButton.ariaHasPopup = "menu";
+    }
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       :host {

src/components/ha-chip.ts

@@ -66,9 +66,13 @@ export class HaChip extends LitElement {
         line-height: 14px;
         color: var(--ha-chip-icon-color, var(--ha-chip-text-color));
       }
+      .mdc-chip.mdc-chip--selected .mdc-chip__checkmark,
       .mdc-chip.no-text
         .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {
         margin-right: -4px;
+        margin-inline-start: -4px;
+        margin-inline-end: 4px;
+        direction: var(--direction);
       }
 
       span[role="gridcell"] {

src/components/ha-climate-state.ts

@@ -3,6 +3,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { formatNumber } from "../common/number/format_number";
 import { CLIMATE_PRESET_NONE } from "../data/climate";
+import { UNAVAILABLE_STATES } from "../data/entity";
 import type { HomeAssistant } from "../types";
 
 @customElement("ha-climate-state")
@@ -15,22 +16,22 @@ class HaClimateState extends LitElement {
     const currentStatus = this._computeCurrentStatus();
 
     return html`<div class="target">
-        ${this.stateObj.state !== "unknown"
+        ${!UNAVAILABLE_STATES.includes(this.stateObj.state)
           ? html`<span class="state-label">
-              ${this._localizeState()}
-              ${this.stateObj.attributes.preset_mode &&
-              this.stateObj.attributes.preset_mode !== CLIMATE_PRESET_NONE
-                ? html`-
-                  ${this.hass.localize(
-                    `state_attributes.climate.preset_mode.${this.stateObj.attributes.preset_mode}`
-                  ) || this.stateObj.attributes.preset_mode}`
-                : ""}
-            </span>`
-          : ""}
-        <div class="unit">${this._computeTarget()}</div>
+                ${this._localizeState()}
+                ${this.stateObj.attributes.preset_mode &&
+                this.stateObj.attributes.preset_mode !== CLIMATE_PRESET_NONE
+                  ? html`-
+                    ${this.hass.localize(
+                      `state_attributes.climate.preset_mode.${this.stateObj.attributes.preset_mode}`
+                    ) || this.stateObj.attributes.preset_mode}`
+                  : ""}
+              </span>
+              <div class="unit">${this._computeTarget()}</div>`
+          : this._localizeState()}
       </div>
 
-      ${currentStatus
+      ${currentStatus && !UNAVAILABLE_STATES.includes(this.stateObj.state)
         ? html`<div class="current">
             ${this.hass.localize("ui.card.climate.currently")}:
             <div class="unit">${currentStatus}</div>
@@ -108,6 +109,10 @@ class HaClimateState extends LitElement {
   }
 
   private _localizeState(): string {
+    if (UNAVAILABLE_STATES.includes(this.stateObj.state)) {
+      return this.hass.localize(`state.default.${this.stateObj.state}`);
+    }
+
     const stateString = this.hass.localize(
       `component.climate.state._.${this.stateObj.state}`
     );

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

@@ -140,6 +140,9 @@ export class HaDateRangePicker extends LitElement {
     return css`
       ha-svg-icon {
         margin-right: 8px;
+        margin-inline-end: 8px;
+        margin-inline-start: initial;
+        direction: var(--direction);
       }
 
       .date-range-inputs {
@@ -166,6 +169,9 @@ export class HaDateRangePicker extends LitElement {
 
       ha-textfield:last-child {
         margin-left: 8px;
+        margin-inline-start: 8px;
+        margin-inline-end: initial;
+        direction: var(--direction);
       }
 
       @media only screen and (max-width: 800px) {

src/components/ha-expansion-panel.ts

@@ -133,6 +133,9 @@ class HaExpansionPanel extends LitElement {
       .summary-icon {
         transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
         margin-left: auto;
+        margin-inline-start: auto;
+        margin-inline-end: initial;
+        direction: var(--direction);
       }
 
       .summary-icon.expanded {

src/components/ha-icon-button.ts

@@ -2,6 +2,7 @@ import "@material/mwc-icon-button";
 import type { IconButton } from "@material/mwc-icon-button";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import "./ha-svg-icon";
 
 @customElement("ha-icon-button")
@@ -12,7 +13,12 @@ export class HaIconButton extends LitElement {
   @property({ type: String }) path?: string;
 
   // Label that is used for ARIA support and as tooltip
-  @property({ type: String }) label = "";
+  @property({ type: String }) label?: string;
+
+  // These should always be set as properties, not attributes,
+  // so that only the <button> element gets the attribute
+  @property({ type: String, attribute: "aria-haspopup" })
+  override ariaHasPopup!: IconButton["ariaHasPopup"];
 
   @property({ type: Boolean }) hideTitle = false;
 
@@ -28,11 +34,11 @@ export class HaIconButton extends LitElement {
   };
 
   protected render(): TemplateResult {
-    // Note: `ariaLabel` required despite the `mwc-icon-button` docs saying `label` should be enough
     return html`
       <mwc-icon-button
-        .ariaLabel=${this.label}
-        .title=${this.hideTitle ? "" : this.label}
+        aria-label=${ifDefined(this.label)}
+        title=${ifDefined(this.hideTitle ? undefined : this.label)}
+        aria-haspopup=${ifDefined(this.ariaHasPopup)}
         .disabled=${this.disabled}
       >
         ${this.path

src/components/ha-select.ts

@@ -47,11 +47,19 @@ export class HaSelect extends SelectBase {
       .mdc-select__anchor {
         width: var(--ha-select-min-width, 200px);
       }
-      .mdc-floating-label {
-        inset-inline-start: 16px !important;
-        inset-inline-end: initial !important;
+      .mdc-select--filled .mdc-floating-label {
+        inset-inline-start: 12px;
+        inset-inline-end: initial;
         direction: var(--direction);
       }
+      .mdc-select .mdc-select__anchor {
+        padding-inline-start: 12px;
+        padding-inline-end: 0px;
+        direction: var(--direction);
+      }
+      .mdc-select__anchor .mdc-floating-label--float-above {
+        transform-origin: var(--float-start);
+      }
     `,
   ];
 }

src/components/ha-selector/ha-selector-area.ts

@@ -1,15 +1,24 @@
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { ConfigEntry, getConfigEntries } from "../../data/config_entries";
+import memoizeOne from "memoize-one";
 import { DeviceRegistryEntry } from "../../data/device_registry";
-import { EntityRegistryEntry } from "../../data/entity_registry";
+import {
+  EntityRegistryEntry,
+  subscribeEntityRegistry,
+} from "../../data/entity_registry";
+import {
+  EntitySources,
+  fetchEntitySourcesWithCache,
+} from "../../data/entity_sources";
 import { AreaSelector } from "../../data/selector";
+import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import { HomeAssistant } from "../../types";
 import "../ha-area-picker";
 import "../ha-areas-picker";
 
 @customElement("ha-selector-area")
-export class HaAreaSelector extends LitElement {
+export class HaAreaSelector extends SubscribeMixin(LitElement) {
   @property() public hass!: HomeAssistant;
 
   @property() public selector!: AreaSelector;
@@ -20,29 +29,44 @@ export class HaAreaSelector extends LitElement {
 
   @property() public helper?: string;
 
-  @state() public _configEntries?: ConfigEntry[];
+  @state() private _entitySources?: EntitySources;
+
+  @state() private _entities?: EntityRegistryEntry[];
 
   @property({ type: Boolean }) public disabled = false;
 
   @property({ type: Boolean }) public required = true;
 
+  public hassSubscribe(): UnsubscribeFunc[] {
+    return [
+      subscribeEntityRegistry(this.hass.connection!, (entities) => {
+        this._entities = entities.filter((entity) => entity.device_id !== null);
+      }),
+    ];
+  }
+
   protected updated(changedProperties) {
-    if (changedProperties.has("selector")) {
-      const oldSelector = changedProperties.get("selector");
-      if (
-        oldSelector !== this.selector &&
-        this.selector.area.device?.integration
-      ) {
-        getConfigEntries(this.hass, {
-          domain: this.selector.area.device.integration,
-        }).then((entries) => {
-          this._configEntries = entries;
-        });
-      }
+    if (
+      changedProperties.has("selector") &&
+      (this.selector.area.device?.integration ||
+        this.selector.area.entity?.integration) &&
+      !this._entitySources
+    ) {
+      fetchEntitySourcesWithCache(this.hass).then((sources) => {
+        this._entitySources = sources;
+      });
     }
   }
 
   protected render() {
+    if (
+      (this.selector.area.device?.integration ||
+        this.selector.area.entity?.integration) &&
+      !this._entitySources
+    ) {
+      return html``;
+    }
+
     if (!this.selector.area.multiple) {
       return html`
         <ha-area-picker
@@ -87,39 +111,62 @@ export class HaAreaSelector extends LitElement {
   }
 
   private _filterEntities = (entity: EntityRegistryEntry): boolean => {
-    if (this.selector.area.entity?.integration) {
-      if (entity.platform !== this.selector.area.entity.integration) {
+    const filterIntegration = this.selector.area.entity?.integration;
+    if (
+      filterIntegration &&
+      this._entitySources?.[entity.entity_id]?.domain !== filterIntegration
+    ) {
+      return false;
+    }
+    return true;
+  };
+
+  private _filterDevices = (device: DeviceRegistryEntry): boolean => {
+    if (!this.selector.area.device) {
+      return true;
+    }
+
+    const {
+      manufacturer: filterManufacturer,
+      model: filterModel,
+      integration: filterIntegration,
+    } = this.selector.area.device;
+
+    if (filterManufacturer && device.manufacturer !== filterManufacturer) {
+      return false;
+    }
+    if (filterModel && device.model !== filterModel) {
+      return false;
+    }
+    if (filterIntegration && this._entitySources && this._entities) {
+      const deviceIntegrations = this._deviceIntegrations(
+        this._entitySources,
+        this._entities
+      );
+      if (!deviceIntegrations?.[device.id]?.includes(filterIntegration)) {
         return false;
       }
     }
     return true;
   };
 
-  private _filterDevices = (device: DeviceRegistryEntry): boolean => {
-    if (
-      this.selector.area.device?.manufacturer &&
-      device.manufacturer !== this.selector.area.device.manufacturer
-    ) {
-      return false;
-    }
-    if (
-      this.selector.area.device?.model &&
-      device.model !== this.selector.area.device.model
-    ) {
-      return false;
-    }
-    if (this.selector.area.device?.integration) {
-      if (
-        this._configEntries &&
-        !this._configEntries.some((entry) =>
-          device.config_entries.includes(entry.entry_id)
-        )
-      ) {
-        return false;
+  private _deviceIntegrations = memoizeOne(
+    (entitySources: EntitySources, entities: EntityRegistryEntry[]) => {
+      const deviceIntegrations: Record<string, string[]> = {};
+
+      for (const entity of entities) {
+        const source = entitySources[entity.entity_id];
+        if (!source?.domain) {
+          continue;
+        }
+        if (!deviceIntegrations[entity.device_id!]) {
+          deviceIntegrations[entity.device_id!] = [];
+        }
+        deviceIntegrations[entity.device_id!].push(source.domain);
       }
+      return deviceIntegrations;
     }
-    return true;
-  };
+  );
 }
 
 declare global {

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

@@ -1,18 +1,33 @@
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { ConfigEntry, getConfigEntries } from "../../data/config_entries";
+import memoizeOne from "memoize-one";
+import { ConfigEntry } from "../../data/config_entries";
 import type { DeviceRegistryEntry } from "../../data/device_registry";
+import {
+  EntityRegistryEntry,
+  subscribeEntityRegistry,
+} from "../../data/entity_registry";
+import {
+  EntitySources,
+  fetchEntitySourcesWithCache,
+} from "../../data/entity_sources";
 import type { DeviceSelector } from "../../data/selector";
+import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import type { HomeAssistant } from "../../types";
 import "../device/ha-device-picker";
 import "../device/ha-devices-picker";
 
 @customElement("ha-selector-device")
-export class HaDeviceSelector extends LitElement {
+export class HaDeviceSelector extends SubscribeMixin(LitElement) {
   @property() public hass!: HomeAssistant;
 
   @property() public selector!: DeviceSelector;
 
+  @state() private _entitySources?: EntitySources;
+
+  @state() private _entities?: EntityRegistryEntry[];
+
   @property() public value?: any;
 
   @property() public label?: string;
@@ -25,20 +40,32 @@ export class HaDeviceSelector extends LitElement {
 
   @property({ type: Boolean }) public required = true;
 
-  protected updated(changedProperties) {
-    if (changedProperties.has("selector")) {
-      const oldSelector = changedProperties.get("selector");
-      if (oldSelector !== this.selector && this.selector.device?.integration) {
-        getConfigEntries(this.hass, {
-          domain: this.selector.device.integration,
-        }).then((entries) => {
-          this._configEntries = entries;
-        });
-      }
+  public hassSubscribe(): UnsubscribeFunc[] {
+    return [
+      subscribeEntityRegistry(this.hass.connection!, (entities) => {
+        this._entities = entities.filter((entity) => entity.device_id !== null);
+      }),
+    ];
+  }
+
+  protected updated(changedProperties): void {
+    super.updated(changedProperties);
+    if (
+      changedProperties.has("selector") &&
+      this.selector.device.integration &&
+      !this._entitySources
+    ) {
+      fetchEntitySourcesWithCache(this.hass).then((sources) => {
+        this._entitySources = sources;
+      });
     }
   }
 
   protected render() {
+    if (this.selector.device.integration && !this._entitySources) {
+      return html``;
+    }
+
     if (!this.selector.device.multiple) {
       return html`
         <ha-device-picker
@@ -80,30 +107,48 @@ export class HaDeviceSelector extends LitElement {
   }
 
   private _filterDevices = (device: DeviceRegistryEntry): boolean => {
-    if (
-      this.selector.device?.manufacturer &&
-      device.manufacturer !== this.selector.device.manufacturer
-    ) {
+    const {
+      manufacturer: filterManufacturer,
+      model: filterModel,
+      integration: filterIntegration,
+    } = this.selector.device;
+
+    if (filterManufacturer && device.manufacturer !== filterManufacturer) {
       return false;
     }
-    if (
-      this.selector.device?.model &&
-      device.model !== this.selector.device.model
-    ) {
+    if (filterModel && device.model !== filterModel) {
       return false;
     }
-    if (this.selector.device?.integration) {
-      if (
-        this._configEntries &&
-        !this._configEntries.some((entry) =>
-          device.config_entries.includes(entry.entry_id)
-        )
-      ) {
+    if (filterIntegration && this._entitySources && this._entities) {
+      const deviceIntegrations = this._deviceIntegrations(
+        this._entitySources,
+        this._entities
+      );
+      if (!deviceIntegrations?.[device.id]?.includes(filterIntegration)) {
         return false;
       }
     }
     return true;
   };
+
+  private _deviceIntegrations = memoizeOne(
+    (entitySources: EntitySources, entities: EntityRegistryEntry[]) => {
+      const deviceIntegrations: Record<string, string[]> = {};
+
+      for (const entity of entities) {
+        const source = entitySources[entity.entity_id];
+        if (!source?.domain) {
+          continue;
+        }
+
+        if (!deviceIntegrations[entity.device_id!]) {
+          deviceIntegrations[entity.device_id!] = [];
+        }
+        deviceIntegrations[entity.device_id!].push(source.domain);
+      }
+      return deviceIntegrations;
+    }
+  );
 }
 
 declare global {

src/components/ha-service-control.ts

@@ -287,9 +287,7 @@ export class HaServiceControl extends LitElement {
       ${shouldRenderServiceDataYaml
         ? html`<ha-yaml-editor
             .hass=${this.hass}
-            .label=${this.hass.localize(
-              "ui.components.service-control.service_data"
-            )}
+            .label=${this.hass.localize("ui.components.service-control.data")}
             .name=${"data"}
             .defaultValue=${this._value?.data}
             @value-changed=${this._dataChanged}

src/components/ha-target-picker.ts

@@ -569,6 +569,9 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
         height: 16px;
         --mdc-icon-size: 14px;
         color: var(--secondary-text-color);
+        margin-inline-start: 4px !important;
+        margin-inline-end: -4px !important;
+        direction: var(--direction);
       }
       .mdc-chip__icon--leading {
         display: flex;
@@ -578,6 +581,9 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
         border-radius: 50%;
         padding: 6px;
         margin-left: -14px !important;
+        margin-inline-start: -14px !important;
+        margin-inline-end: 4px !important;
+        direction: var(--direction);
       }
       .expand-btn {
         margin-right: 0;
@@ -616,11 +622,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
         opacity: var(--light-disabled-opacity);
         pointer-events: none;
       }
-      .mdc-chip__icon {
-        margin-inline-start: -14px !important;
-        margin-inline-end: 4px !important;
-        direction: var(--direction);
-      }
     `;
   }
 }

src/components/ha-textfield.ts

@@ -57,6 +57,9 @@ export class HaTextField extends TextFieldBase {
       .mdc-text-field__affix--suffix {
         padding-left: var(--text-field-suffix-padding-left, 12px);
         padding-right: var(--text-field-suffix-padding-right, 0px);
+        padding-inline-start: var(--text-field-suffix-padding-left, 12px);
+        padding-inline-end: var(--text-field-suffix-padding-right, 0px);
+        direction: var(--direction);
       }
 
       .mdc-text-field:not(.mdc-text-field--disabled)
@@ -95,6 +98,7 @@ export class HaTextField extends TextFieldBase {
       .mdc-floating-label {
         inset-inline-start: 16px !important;
         inset-inline-end: initial !important;
+        transform-origin: var(--float-start);
         direction: var(--direction);
       }
 

src/components/trace/ha-trace-logbook.ts

@@ -3,7 +3,7 @@ import { customElement, property } from "lit/decorators";
 import { LogbookEntry } from "../../data/logbook";
 import { HomeAssistant } from "../../types";
 import "./hat-logbook-note";
-import "../../panels/logbook/ha-logbook";
+import "../../panels/logbook/ha-logbook-renderer";
 import { TraceExtended } from "../../data/trace";
 
 @customElement("ha-trace-logbook")
@@ -19,12 +19,12 @@ export class HaTraceLogbook extends LitElement {
   protected render(): TemplateResult {
     return this.logbookEntries.length
       ? html`
-          <ha-logbook
+          <ha-logbook-renderer
             relative-time
             .hass=${this.hass}
             .entries=${this.logbookEntries}
             .narrow=${this.narrow}
-          ></ha-logbook>
+          ></ha-logbook-renderer>
           <hat-logbook-note .domain=${this.trace.domain}></hat-logbook-note>
         `
       : html`<div class="padded-box">

src/components/trace/ha-trace-path-details.ts

@@ -13,7 +13,7 @@ import {
   getDataFromPath,
   TraceExtended,
 } from "../../data/trace";
-import "../../panels/logbook/ha-logbook";
+import "../../panels/logbook/ha-logbook-renderer";
 import { traceTabStyles } from "./trace-tab-styles";
 import { HomeAssistant } from "../../types";
 import type { NodeInfo } from "./hat-script-graph";
@@ -194,7 +194,7 @@ export class HaTracePathDetails extends LitElement {
       // it's the last entry. Find all logbook entries after start.
       const startTime = new Date(startTrace[0].timestamp);
       const idx = this.logbookEntries.findIndex(
-        (entry) => new Date(entry.when) >= startTime
+        (entry) => new Date(entry.when * 1000) >= startTime
       );
       if (idx === -1) {
         entries = [];
@@ -210,7 +210,7 @@ export class HaTracePathDetails extends LitElement {
       entries = [];
 
       for (const entry of this.logbookEntries || []) {
-        const entryDate = new Date(entry.when);
+        const entryDate = new Date(entry.when * 1000);
         if (entryDate >= startTime) {
           if (entryDate < endTime) {
             entries.push(entry);
@@ -224,12 +224,12 @@ export class HaTracePathDetails extends LitElement {
 
     return entries.length
       ? html`
-          <ha-logbook
+          <ha-logbook-renderer
             relative-time
             .hass=${this.hass}
             .entries=${entries}
             .narrow=${this.narrow}
-          ></ha-logbook>
+          ></ha-logbook-renderer>
           <hat-logbook-note .domain=${this.trace.domain}></hat-logbook-note>
         `
       : html`<div class="padded-box">

src/components/trace/hat-trace-timeline.ts

@@ -116,7 +116,7 @@ class LogbookRenderer {
   maybeRenderItem() {
     const logbookEntry = this.curItem;
     this.curIndex++;
-    const entryDate = new Date(logbookEntry.when);
+    const entryDate = new Date(logbookEntry.when * 1000);
 
     if (this.pendingItems.length === 0) {
       this.pendingItems.push([entryDate, logbookEntry]);
@@ -248,7 +248,7 @@ class ActionRenderer {
     // Render all logbook items that are in front of this item.
     while (
       this.logbookRenderer.hasNext &&
-      new Date(this.logbookRenderer.curItem.when) < timestamp
+      new Date(this.logbookRenderer.curItem.when * 1000) < timestamp
     ) {
       this.logbookRenderer.maybeRenderItem();
     }

src/data/application_credential.ts

@@ -9,6 +9,7 @@ export interface ApplicationCredential {
   domain: string;
   client_id: string;
   client_secret: string;
+  name: string;
 }
 
 export const fetchApplicationCredentialsConfig = async (hass: HomeAssistant) =>
@@ -25,13 +26,15 @@ export const createApplicationCredential = async (
   hass: HomeAssistant,
   domain: string,
   clientId: string,
-  clientSecret: string
+  clientSecret: string,
+  name?: string
 ) =>
   hass.callWS<ApplicationCredential>({
     type: "application_credentials/create",
     domain,
     client_id: clientId,
     client_secret: clientSecret,
+    name,
   });
 
 export const deleteApplicationCredential = async (

src/data/cached-history.ts

@@ -1,13 +1,13 @@
-import { HassEntity } from "home-assistant-js-websocket";
 import { LocalizeFunc } from "../common/translations/localize";
 import { HomeAssistant } from "../types";
 import {
   computeHistory,
-  fetchRecent,
+  HistoryStates,
   HistoryResult,
   LineChartUnit,
   TimelineEntity,
   entityIdHistoryNeedsAttributes,
+  fetchRecentWS,
 } from "./history";
 
 export interface CacheConfig {
@@ -34,7 +34,7 @@ const RECENT_THRESHOLD = 60000; // 1 minute
 const RECENT_CACHE: { [cacheKey: string]: RecentCacheResults } = {};
 const stateHistoryCache: { [cacheKey: string]: CachedResults } = {};
 
-// Cached type 1 unction. Without cache config.
+// Cached type 1 function. Without cache config.
 export const getRecent = (
   hass: HomeAssistant,
   entityId: string,
@@ -55,7 +55,7 @@ export const getRecent = (
   }
 
   const noAttributes = !entityIdHistoryNeedsAttributes(hass, entityId);
-  const prom = fetchRecent(
+  const prom = fetchRecentWS(
     hass,
     entityId,
     startTime,
@@ -103,13 +103,14 @@ export const getRecentWithCache = (
   language: string
 ) => {
   const cacheKey = cacheConfig.cacheKey;
+  const fullCacheKey = cacheKey + `_${cacheConfig.hoursToShow}`;
   const endTime = new Date();
   const startTime = new Date(endTime);
   startTime.setHours(startTime.getHours() - cacheConfig.hoursToShow);
   let toFetchStartTime = startTime;
   let appendingToCache = false;
 
-  let cache = stateHistoryCache[cacheKey + `_${cacheConfig.hoursToShow}`];
+  let cache = stateHistoryCache[fullCacheKey];
   if (
     cache &&
     toFetchStartTime >= cache.startTime &&
@@ -123,7 +124,7 @@ export const getRecentWithCache = (
       return cache.prom;
     }
   } else {
-    cache = stateHistoryCache[cacheKey] = getEmptyCache(
+    cache = stateHistoryCache[fullCacheKey] = getEmptyCache(
       language,
       startTime,
       endTime
@@ -134,12 +135,12 @@ export const getRecentWithCache = (
   const noAttributes = !entityIdHistoryNeedsAttributes(hass, entityId);
 
   const genProm = async () => {
-    let fetchedHistory: HassEntity[][];
+    let fetchedHistory: HistoryStates;
 
     try {
       const results = await Promise.all([
         curCacheProm,
-        fetchRecent(
+        fetchRecentWS(
           hass,
           entityId,
           toFetchStartTime,
@@ -152,7 +153,7 @@ export const getRecentWithCache = (
       ]);
       fetchedHistory = results[1];
     } catch (err: any) {
-      delete stateHistoryCache[cacheKey];
+      delete stateHistoryCache[fullCacheKey];
       throw err;
     }
     const stateHistory = computeHistory(hass, fetchedHistory, localize);

src/data/energy.ts

@@ -1,11 +1,14 @@
 import {
+  addDays,
   addHours,
+  addMilliseconds,
+  addMonths,
   differenceInDays,
   endOfToday,
   endOfYesterday,
   startOfToday,
   startOfYesterday,
-} from "date-fns";
+} from "date-fns/esm";
 import { Collection, getCollection } from "home-assistant-js-websocket";
 import { groupBy } from "../common/util/group-by";
 import { subscribeOne } from "../common/util/subscribe-one";
@@ -14,9 +17,9 @@ import { ConfigEntry, getConfigEntries } from "./config_entries";
 import { subscribeEntityRegistry } from "./entity_registry";
 import {
   fetchStatistics,
+  getStatisticMetadata,
   Statistics,
   StatisticsMetaData,
-  getStatisticMetadata,
 } from "./history";
 
 const energyCollectionKeys: (string | undefined)[] = [];
@@ -232,19 +235,24 @@ export const energySourcesByType = (prefs: EnergyPreferences) =>
 export interface EnergyData {
   start: Date;
   end?: Date;
+  startCompare?: Date;
+  endCompare?: Date;
   prefs: EnergyPreferences;
   info: EnergyInfo;
   stats: Statistics;
+  statsCompare: Statistics;
   co2SignalConfigEntry?: ConfigEntry;
   co2SignalEntity?: string;
   fossilEnergyConsumption?: FossilEnergyConsumption;
+  fossilEnergyConsumptionCompare?: FossilEnergyConsumption;
 }
 
 const getEnergyData = async (
   hass: HomeAssistant,
   prefs: EnergyPreferences,
   start: Date,
-  end?: Date
+  end?: Date,
+  compare?: boolean
 ): Promise<EnergyData> => {
   const [configEntries, entityRegistryEntries, info] = await Promise.all([
     getConfigEntries(hass, { domain: "co2signal" }),
@@ -350,6 +358,8 @@ const getEnergyData = async (
   }
 
   const dayDifference = differenceInDays(end || new Date(), start);
+  const period =
+    dayDifference > 35 ? "month" : dayDifference > 2 ? "day" : "hour";
 
   // Subtract 1 hour from start to get starting point data
   const startMinHour = addHours(start, -1);
@@ -359,10 +369,34 @@ const getEnergyData = async (
     startMinHour,
     end,
     statIDs,
-    dayDifference > 35 ? "month" : dayDifference > 2 ? "day" : "hour"
+    period
   );
 
+  let statsCompare;
+  let startCompare;
+  let endCompare;
+  if (compare) {
+    if (dayDifference > 27 && dayDifference < 32) {
+      // When comparing a month, we want to start at the begining of the month
+      startCompare = addMonths(start, -1);
+    } else {
+      startCompare = addDays(start, (dayDifference + 1) * -1);
+    }
+
+    const compareStartMinHour = addHours(startCompare, -1);
+    endCompare = addMilliseconds(start, -1);
+
+    statsCompare = await fetchStatistics(
+      hass!,
+      compareStartMinHour,
+      endCompare,
+      statIDs,
+      period
+    );
+  }
+
   let fossilEnergyConsumption: FossilEnergyConsumption | undefined;
+  let fossilEnergyConsumptionCompare: FossilEnergyConsumption | undefined;
 
   if (co2SignalEntity !== undefined) {
     fossilEnergyConsumption = await getFossilEnergyConsumption(
@@ -373,6 +407,16 @@ const getEnergyData = async (
       end,
       dayDifference > 35 ? "month" : dayDifference > 2 ? "day" : "hour"
     );
+    if (compare) {
+      fossilEnergyConsumptionCompare = await getFossilEnergyConsumption(
+        hass!,
+        startCompare,
+        consumptionStatIDs,
+        co2SignalEntity,
+        endCompare,
+        dayDifference > 35 ? "month" : dayDifference > 2 ? "day" : "hour"
+      );
+    }
   }
 
   Object.values(stats).forEach((stat) => {
@@ -388,15 +432,19 @@ const getEnergyData = async (
     }
   });
 
-  const data = {
+  const data: EnergyData = {
     start,
     end,
+    startCompare,
+    endCompare,
     info,
     prefs,
     stats,
+    statsCompare,
     co2SignalConfigEntry,
     co2SignalEntity,
     fossilEnergyConsumption,
+    fossilEnergyConsumptionCompare,
   };
 
   return data;
@@ -405,9 +453,11 @@ const getEnergyData = async (
 export interface EnergyCollection extends Collection<EnergyData> {
   start: Date;
   end?: Date;
+  compare?: boolean;
   prefs?: EnergyPreferences;
   clearPrefs(): void;
   setPeriod(newStart: Date, newEnd?: Date): void;
+  setCompare(compare: boolean): void;
   _refreshTimeout?: number;
   _updatePeriodTimeout?: number;
   _active: number;
@@ -478,7 +528,8 @@ export const getEnergyDataCollection = (
         hass,
         collection.prefs,
         collection.start,
-        collection.end
+        collection.end,
+        collection.compare
       );
     }
   ) as EnergyCollection;
@@ -534,6 +585,9 @@ export const getEnergyDataCollection = (
       collection._updatePeriodTimeout = undefined;
     }
   };
+  collection.setCompare = (compare: boolean) => {
+    collection.compare = compare;
+  };
   return collection;
 };
 

src/data/hardware.ts

@@ -20,3 +20,20 @@ export const BOARD_NAMES: Record<string, string> = {
   "intel-nuc": "Intel NUC",
   yellow: "Home Assistant Yellow",
 };
+
+export interface HardwareInfo {
+  hardware: HardwareInfoEntry[];
+}
+
+export interface HardwareInfoEntry {
+  board: HardwareInfoBoardInfo;
+  name: string;
+  url?: string;
+}
+
+export interface HardwareInfoBoardInfo {
+  manufacturer: string;
+  model?: string;
+  revision?: string;
+  hassio_board_id?: string;
+}

src/data/history.ts

@@ -1,8 +1,7 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { computeDomain } from "../common/entity/compute_domain";
-import { computeStateDisplay } from "../common/entity/compute_state_display";
-import { computeStateDomain } from "../common/entity/compute_state_domain";
-import { computeStateName } from "../common/entity/compute_state_name";
+import { computeStateDisplayFromEntityAttributes } from "../common/entity/compute_state_display";
+import { computeStateNameFromEntityAttributes } from "../common/entity/compute_state_name";
 import { LocalizeFunc } from "../common/translations/localize";
 import { HomeAssistant } from "../types";
 import { FrontendLocaleData } from "./translation";
@@ -27,7 +26,7 @@ const LINE_ATTRIBUTES_TO_KEEP = [
 
 export interface LineChartState {
   state: string;
-  last_changed: string;
+  last_changed: number;
   attributes?: Record<string, any>;
 }
 
@@ -47,7 +46,7 @@ export interface LineChartUnit {
 export interface TimelineState {
   state_localize: string;
   state: string;
-  last_changed: string;
+  last_changed: number;
 }
 
 export interface TimelineEntity {
@@ -141,6 +140,21 @@ export interface StatisticsValidationResults {
   [statisticId: string]: StatisticsValidationResult[];
 }
 
+export interface HistoryStates {
+  [entityId: string]: EntityHistoryState[];
+}
+
+interface EntityHistoryState {
+  /** state */
+  s: string;
+  /** attributes */
+  a: { [key: string]: any };
+  /** last_changed; if set, also applies to lu */
+  lc: number;
+  /** last_updated */
+  lu: number;
+}
+
 export const entityIdHistoryNeedsAttributes = (
   hass: HomeAssistant,
   entityId: string
@@ -181,6 +195,27 @@ export const fetchRecent = (
   return hass.callApi("GET", url);
 };
 
+export const fetchRecentWS = (
+  hass: HomeAssistant,
+  entityId: string, // This may be CSV
+  startTime: Date,
+  endTime: Date,
+  skipInitialState = false,
+  significantChangesOnly?: boolean,
+  minimalResponse = true,
+  noAttributes?: boolean
+) =>
+  hass.callWS<HistoryStates>({
+    type: "history/history_during_period",
+    start_time: startTime.toISOString(),
+    end_time: endTime.toISOString(),
+    significant_changes_only: significantChangesOnly || false,
+    include_start_time_state: !skipInitialState,
+    minimal_response: minimalResponse,
+    no_attributes: noAttributes || false,
+    entity_ids: entityId.split(","),
+  });
+
 export const fetchDate = (
   hass: HomeAssistant,
   startTime: Date,
@@ -198,6 +233,27 @@ export const fetchDate = (
     }`
   );
 
+export const fetchDateWS = (
+  hass: HomeAssistant,
+  startTime: Date,
+  endTime: Date,
+  entityId?: string
+) => {
+  const params = {
+    type: "history/history_during_period",
+    start_time: startTime.toISOString(),
+    end_time: endTime.toISOString(),
+    minimal_response: true,
+    no_attributes: !!(
+      entityId && !entityIdHistoryNeedsAttributes(hass, entityId)
+    ),
+  };
+  if (entityId) {
+    return hass.callWS<HistoryStates>({ ...params, entity_ids: [entityId] });
+  }
+  return hass.callWS<HistoryStates>(params);
+};
+
 const equalState = (obj1: LineChartState, obj2: LineChartState) =>
   obj1.state === obj2.state &&
   // Only compare attributes if both states have an attributes object.
@@ -212,46 +268,47 @@ const equalState = (obj1: LineChartState, obj2: LineChartState) =>
 const processTimelineEntity = (
   localize: LocalizeFunc,
   language: FrontendLocaleData,
-  states: HassEntity[]
+  entityId: string,
+  states: EntityHistoryState[]
 ): TimelineEntity => {
   const data: TimelineState[] = [];
-  const last_element = states.length - 1;
-
+  const first: EntityHistoryState = states[0];
   for (const state of states) {
-    if (data.length > 0 && state.state === data[data.length - 1].state) {
+    if (data.length > 0 && state.s === data[data.length - 1].state) {
       continue;
     }
-
-    // Copy the data from the last element as its the newest
-    // and is only needed to localize the data
-    if (!state.entity_id) {
-      state.attributes = states[last_element].attributes;
-      state.entity_id = states[last_element].entity_id;
-    }
-
     data.push({
-      state_localize: computeStateDisplay(localize, state, language),
-      state: state.state,
-      last_changed: state.last_changed,
+      state_localize: computeStateDisplayFromEntityAttributes(
+        localize,
+        language,
+        entityId,
+        state.a || first.a,
+        state.s
+      ),
+      state: state.s,
+      // lc (last_changed) may be omitted if its the same
+      // as lu (last_updated).
+      last_changed: (state.lc ? state.lc : state.lu) * 1000,
     });
   }
 
   return {
-    name: computeStateName(states[0]),
-    entity_id: states[0].entity_id,
+    name: computeStateNameFromEntityAttributes(entityId, states[0].a),
+    entity_id: entityId,
     data,
   };
 };
 
 const processLineChartEntities = (
   unit,
-  entities: HassEntity[][]
+  entities: HistoryStates
 ): LineChartUnit => {
   const data: LineChartEntity[] = [];
 
-  for (const states of entities) {
-    const last: HassEntity = states[states.length - 1];
-    const domain = computeStateDomain(last);
+  Object.keys(entities).forEach((entityId) => {
+    const states = entities[entityId];
+    const first: EntityHistoryState = states[0];
+    const domain = computeDomain(entityId);
     const processedStates: LineChartState[] = [];
 
     for (const state of states) {
@@ -259,18 +316,24 @@ const processLineChartEntities = (
 
       if (DOMAINS_USE_LAST_UPDATED.includes(domain)) {
         processedState = {
-          state: state.state,
-          last_changed: state.last_updated,
+          state: state.s,
+          last_changed: state.lu * 1000,
           attributes: {},
         };
 
         for (const attr of LINE_ATTRIBUTES_TO_KEEP) {
-          if (attr in state.attributes) {
-            processedState.attributes![attr] = state.attributes[attr];
+          if (attr in state.a) {
+            processedState.attributes![attr] = state.a[attr];
           }
         }
       } else {
-        processedState = state;
+        processedState = {
+          state: state.s,
+          // lc (last_changed) may be omitted if its the same
+          // as lu (last_updated).
+          last_changed: (state.lc ? state.lc : state.lu) * 1000,
+          attributes: {},
+        };
       }
 
       if (
@@ -289,52 +352,53 @@ const processLineChartEntities = (
 
     data.push({
       domain,
-      name: computeStateName(last),
-      entity_id: last.entity_id,
+      name: computeStateNameFromEntityAttributes(entityId, first.a),
+      entity_id: entityId,
       states: processedStates,
     });
-  }
+  });
 
   return {
     unit,
-    identifier: entities.map((states) => states[0].entity_id).join(""),
+    identifier: Object.keys(entities).join(""),
     data,
   };
 };
 
 const stateUsesUnits = (state: HassEntity) =>
-  "unit_of_measurement" in state.attributes ||
-  "state_class" in state.attributes;
+  attributesHaveUnits(state.attributes);
+
+const attributesHaveUnits = (attributes: { [key: string]: any }) =>
+  "unit_of_measurement" in attributes || "state_class" in attributes;
 
 export const computeHistory = (
   hass: HomeAssistant,
-  stateHistory: HassEntity[][],
+  stateHistory: HistoryStates,
   localize: LocalizeFunc
 ): HistoryResult => {
-  const lineChartDevices: { [unit: string]: HassEntity[][] } = {};
+  const lineChartDevices: { [unit: string]: HistoryStates } = {};
   const timelineDevices: TimelineEntity[] = [];
   if (!stateHistory) {
     return { line: [], timeline: [] };
   }
-
-  stateHistory.forEach((stateInfo) => {
+  Object.keys(stateHistory).forEach((entityId) => {
+    const stateInfo = stateHistory[entityId];
     if (stateInfo.length === 0) {
       return;
     }
 
-    const entityId = stateInfo[0].entity_id;
     const currentState =
       entityId in hass.states ? hass.states[entityId] : undefined;
     const stateWithUnitorStateClass =
       !currentState &&
-      stateInfo.find((state) => state.attributes && stateUsesUnits(state));
+      stateInfo.find((state) => state.a && attributesHaveUnits(state.a));
 
     let unit: string | undefined;
 
     if (currentState && stateUsesUnits(currentState)) {
       unit = currentState.attributes.unit_of_measurement || " ";
     } else if (stateWithUnitorStateClass) {
-      unit = stateWithUnitorStateClass.attributes.unit_of_measurement || " ";
+      unit = stateWithUnitorStateClass.a.unit_of_measurement || " ";
     } else {
       unit = {
         climate: hass.config.unit_system.temperature,
@@ -348,12 +412,15 @@ export const computeHistory = (
 
     if (!unit) {
       timelineDevices.push(
-        processTimelineEntity(localize, hass.locale, stateInfo)
+        processTimelineEntity(localize, hass.locale, entityId, stateInfo)
       );
-    } else if (unit in lineChartDevices) {
-      lineChartDevices[unit].push(stateInfo);
+    } else if (unit in lineChartDevices && entityId in lineChartDevices[unit]) {
+      lineChartDevices[unit][entityId].push(...stateInfo);
     } else {
-      lineChartDevices[unit] = [stateInfo];
+      if (!(unit in lineChartDevices)) {
+        lineChartDevices[unit] = {};
+      }
+      lineChartDevices[unit][entityId] = stateInfo;
     }
   });
 

src/data/integration.ts

@@ -42,8 +42,18 @@ export const domainToName = (
   manifest?: IntegrationManifest
 ) => localize(`component.${domain}.title`) || manifest?.name || domain;
 
-export const fetchIntegrationManifests = (hass: HomeAssistant) =>
-  hass.callWS<IntegrationManifest[]>({ type: "manifest/list" });
+export const fetchIntegrationManifests = (
+  hass: HomeAssistant,
+  integrations?: string[]
+) => {
+  const params: any = {
+    type: "manifest/list",
+  };
+  if (integrations) {
+    params.integrations = integrations;
+  }
+  return hass.callWS<IntegrationManifest[]>(params);
+};
 
 export const fetchIntegrationManifest = (
   hass: HomeAssistant,

src/data/logbook.ts

@@ -1,5 +1,9 @@
-import { HassEntity } from "home-assistant-js-websocket";
-import { BINARY_STATE_OFF, BINARY_STATE_ON } from "../common/const";
+import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
+import {
+  BINARY_STATE_OFF,
+  BINARY_STATE_ON,
+  DOMAINS_WITH_DYNAMIC_PICTURE,
+} from "../common/const";
 import { computeDomain } from "../common/entity/compute_domain";
 import { computeStateDisplay } from "../common/entity/compute_state_display";
 import { LocalizeFunc } from "../common/translations/localize";
@@ -9,26 +13,51 @@ import { UNAVAILABLE_STATES } from "./entity";
 const LOGBOOK_LOCALIZE_PATH = "ui.components.logbook.messages";
 export const CONTINUOUS_DOMAINS = ["proximity", "sensor"];
 
+export interface LogbookStreamMessage {
+  events: LogbookEntry[];
+  start_time?: number; // Start time of this historical chunk
+  end_time?: number; // End time of this historical chunk
+  partial?: boolean; // Indiciates more historical chunks are coming
+}
+
 export interface LogbookEntry {
-  when: number;
+  // Base data
+  when: number; // Python timestamp. Do *1000 to get JS timestamp.
   name: string;
   message?: string;
   entity_id?: string;
   icon?: string;
-  source?: string;
+  source?: string; // The trigger source
   domain?: string;
+  state?: string; // The state of the entity
+  // Context data
   context_id?: string;
   context_user_id?: string;
   context_event_type?: string;
   context_domain?: string;
-  context_service?: string;
+  context_service?: string; // Service calls only
   context_entity_id?: string;
-  context_entity_id_name?: string;
+  context_entity_id_name?: string; // Legacy, not longer sent
   context_name?: string;
+  context_state?: string; // The state of the entity
+  context_source?: string; // The trigger source
   context_message?: string;
-  state?: string;
 }
 
+//
+// Localization mapping for all the triggers in core
+// in homeassistant.components.homeassistant.triggers
+//
+const triggerPhrases = {
+  "numeric state of": "triggered_by_numeric_state_of", // number state trigger
+  "state of": "triggered_by_state_of", // state trigger
+  event: "triggered_by_event", // event trigger
+  time: "triggered_by_time", // time trigger
+  "time pattern": "triggered_by_time_pattern", // time trigger
+  "Home Assistant stopping": "triggered_by_homeassistant_stopping", // stop event
+  "Home Assistant starting": "triggered_by_homeassistant_starting", // start event
+};
+
 const DATA_CACHE: {
   [cacheKey: string]: { [entityId: string]: Promise<LogbookEntry[]> };
 } = {};
@@ -38,17 +67,13 @@ export const getLogbookDataForContext = async (
   startDate: string,
   contextId?: string
 ): Promise<LogbookEntry[]> => {
-  const localize = await hass.loadBackendTranslation("device_class");
-  return addLogbookMessage(
+  await hass.loadBackendTranslation("device_class");
+  return getLogbookDataFromServer(
     hass,
-    localize,
-    await getLogbookDataFromServer(
-      hass,
-      startDate,
-      undefined,
-      undefined,
-      contextId
-    )
+    startDate,
+    undefined,
+    undefined,
+    contextId
   );
 };
 
@@ -56,99 +81,173 @@ export const getLogbookData = async (
   hass: HomeAssistant,
   startDate: string,
   endDate: string,
-  entityId?: string
+  entityIds?: string[],
+  deviceIds?: string[]
 ): Promise<LogbookEntry[]> => {
-  const localize = await hass.loadBackendTranslation("device_class");
-  return addLogbookMessage(
-    hass,
-    localize,
-    await getLogbookDataCache(hass, startDate, endDate, entityId)
-  );
-};
-
-export const addLogbookMessage = (
-  hass: HomeAssistant,
-  localize: LocalizeFunc,
-  logbookData: LogbookEntry[]
-): LogbookEntry[] => {
-  for (const entry of logbookData) {
-    const stateObj = hass!.states[entry.entity_id!];
-    if (entry.state && stateObj) {
-      entry.message = getLogbookMessage(
+  await hass.loadBackendTranslation("device_class");
+  return deviceIds?.length
+    ? getLogbookDataFromServer(
         hass,
-        localize,
-        entry.state,
-        stateObj,
-        computeDomain(entry.entity_id!)
-      );
-    }
-  }
-  return logbookData;
+        startDate,
+        endDate,
+        entityIds,
+        undefined,
+        deviceIds
+      )
+    : getLogbookDataCache(hass, startDate, endDate, entityIds);
 };
 
-export const getLogbookDataCache = async (
+const getLogbookDataCache = async (
   hass: HomeAssistant,
   startDate: string,
   endDate: string,
-  entityId?: string
+  entityId?: string[]
 ) => {
   const ALL_ENTITIES = "*";
 
-  if (!entityId) {
-    entityId = ALL_ENTITIES;
-  }
-
+  const entityIdKey = entityId ? entityId.toString() : ALL_ENTITIES;
   const cacheKey = `${startDate}${endDate}`;
 
   if (!DATA_CACHE[cacheKey]) {
     DATA_CACHE[cacheKey] = {};
   }
 
-  if (entityId in DATA_CACHE[cacheKey]) {
-    return DATA_CACHE[cacheKey][entityId];
+  if (entityIdKey in DATA_CACHE[cacheKey]) {
+    return DATA_CACHE[cacheKey][entityIdKey];
   }
 
-  if (entityId !== ALL_ENTITIES && DATA_CACHE[cacheKey][ALL_ENTITIES]) {
+  if (entityId && DATA_CACHE[cacheKey][ALL_ENTITIES]) {
     const entities = await DATA_CACHE[cacheKey][ALL_ENTITIES];
-    return entities.filter((entity) => entity.entity_id === entityId);
+    return entities.filter(
+      (entity) => entity.entity_id && entityId.includes(entity.entity_id)
+    );
   }
 
-  DATA_CACHE[cacheKey][entityId] = getLogbookDataFromServer(
+  DATA_CACHE[cacheKey][entityIdKey] = getLogbookDataFromServer(
     hass,
     startDate,
     endDate,
-    entityId !== ALL_ENTITIES ? entityId : undefined
-  ).then((entries) => entries.reverse());
-  return DATA_CACHE[cacheKey][entityId];
+    entityId
+  );
+  return DATA_CACHE[cacheKey][entityIdKey];
 };
 
-export const getLogbookDataFromServer = (
+const getLogbookDataFromServer = (
   hass: HomeAssistant,
   startDate: string,
   endDate?: string,
-  entityId?: string,
-  contextId?: string
-) => {
-  let params: any = {
+  entityIds?: string[],
+  contextId?: string,
+  deviceIds?: string[]
+): Promise<LogbookEntry[]> => {
+  // If all specified filters are empty lists, we can return an empty list.
+  if (
+    (entityIds || deviceIds) &&
+    (!entityIds || entityIds.length === 0) &&
+    (!deviceIds || deviceIds.length === 0)
+  ) {
+    return Promise.resolve([]);
+  }
+
+  const params: any = {
     type: "logbook/get_events",
     start_time: startDate,
   };
   if (endDate) {
-    params = { ...params, end_time: endDate };
+    params.end_time = endDate;
   }
-  if (entityId) {
-    params = { ...params, entity_ids: entityId.split(",") };
-  } else if (contextId) {
-    params = { ...params, context_id: contextId };
+  if (entityIds?.length) {
+    params.entity_ids = entityIds;
+  }
+  if (deviceIds?.length) {
+    params.device_ids = deviceIds;
+  }
+  if (contextId) {
+    params.context_id = contextId;
   }
   return hass.callWS<LogbookEntry[]>(params);
 };
 
+export const subscribeLogbook = (
+  hass: HomeAssistant,
+  callbackFunction: (message: LogbookStreamMessage) => void,
+  startDate: string,
+  endDate: string,
+  entityIds?: string[],
+  deviceIds?: string[]
+): Promise<UnsubscribeFunc> => {
+  // If all specified filters are empty lists, we can return an empty list.
+  if (
+    (entityIds || deviceIds) &&
+    (!entityIds || entityIds.length === 0) &&
+    (!deviceIds || deviceIds.length === 0)
+  ) {
+    return Promise.reject("No entities or devices");
+  }
+  const params: any = {
+    type: "logbook/event_stream",
+    start_time: startDate,
+    end_time: endDate,
+  };
+  if (entityIds?.length) {
+    params.entity_ids = entityIds;
+  }
+  if (deviceIds?.length) {
+    params.device_ids = deviceIds;
+  }
+  return hass.connection.subscribeMessage<LogbookStreamMessage>(
+    (message) => callbackFunction(message),
+    params
+  );
+};
+
 export const clearLogbookCache = (startDate: string, endDate: string) => {
   DATA_CACHE[`${startDate}${endDate}`] = {};
 };
 
-export const getLogbookMessage = (
+export const createHistoricState = (
+  currentStateObj: HassEntity,
+  state?: string
+): HassEntity => <HassEntity>(<unknown>{
+    entity_id: currentStateObj.entity_id,
+    state: state,
+    attributes: {
+      // Rebuild the historical state by copying static attributes only
+      device_class: currentStateObj?.attributes.device_class,
+      source_type: currentStateObj?.attributes.source_type,
+      has_date: currentStateObj?.attributes.has_date,
+      has_time: currentStateObj?.attributes.has_time,
+      // We do not want to use dynamic entity pictures (e.g., from media player) for the log book rendering,
+      // as they would present a false state in the log (played media right now vs actual historic data).
+      entity_picture_local: DOMAINS_WITH_DYNAMIC_PICTURE.has(
+        computeDomain(currentStateObj.entity_id)
+      )
+        ? undefined
+        : currentStateObj?.attributes.entity_picture_local,
+      entity_picture: DOMAINS_WITH_DYNAMIC_PICTURE.has(
+        computeDomain(currentStateObj.entity_id)
+      )
+        ? undefined
+        : currentStateObj?.attributes.entity_picture,
+    },
+  });
+
+export const localizeTriggerSource = (
+  localize: LocalizeFunc,
+  source: string
+) => {
+  for (const triggerPhrase in triggerPhrases) {
+    if (source.startsWith(triggerPhrase)) {
+      return source.replace(
+        triggerPhrase,
+        `${localize(`ui.components.logbook.${triggerPhrases[triggerPhrase]}`)}`
+      );
+    }
+  }
+  return source;
+};
+
+export const localizeStateMessage = (
   hass: HomeAssistant,
   localize: LocalizeFunc,
   state: string,

src/data/lovelace.ts

@@ -131,9 +131,9 @@ export interface CallServiceActionConfig extends BaseActionConfig {
   action: "call-service";
   service: string;
   target?: HassServiceTarget;
-  service_data?: {
-    [key: string]: any;
-  };
+  // "service_data" is kept for backwards compatibility. Replaced by "data".
+  service_data?: Record<string, unknown>;
+  data?: Record<string, unknown>;
 }
 
 export interface NavigateActionConfig extends BaseActionConfig {

src/data/scene.ts

@@ -47,12 +47,17 @@ export interface SceneConfig {
   name: string;
   icon?: string;
   entities: SceneEntities;
+  metadata?: SceneMetaData;
 }
 
 export interface SceneEntities {
   [entityId: string]: string | { state: string; [key: string]: any };
 }
 
+export interface SceneMetaData {
+  [entityId: string]: { entity_only?: boolean | undefined };
+}
+
 export const activateScene = (
   hass: HomeAssistant,
   entityId: string

src/data/translation.ts

@@ -52,7 +52,7 @@ export const getHassTranslations = async (
   hass: HomeAssistant,
   language: string,
   category: TranslationCategory,
-  integration?: string,
+  integration?: string | string[],
   config_flow?: boolean
 ): Promise<Record<string, unknown>> => {
   const result = await hass.callWS<{ resources: Record<string, unknown> }>({

src/data/update.ts

@@ -7,7 +7,10 @@ import type {
 import { BINARY_STATE_ON } from "../common/const";
 import { computeDomain } from "../common/entity/compute_domain";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
-import { supportsFeature } from "../common/entity/supports-feature";
+import {
+  supportsFeature,
+  supportsFeatureFromAttributes,
+} from "../common/entity/supports-feature";
 import { caseInsensitiveStringCompare } from "../common/string/compare";
 import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
 import { HomeAssistant } from "../types";
@@ -35,8 +38,13 @@ export interface UpdateEntity extends HassEntityBase {
 }
 
 export const updateUsesProgress = (entity: UpdateEntity): boolean =>
-  supportsFeature(entity, UPDATE_SUPPORT_PROGRESS) &&
-  typeof entity.attributes.in_progress === "number";
+  updateUsesProgressFromAttributes(entity.attributes);
+
+export const updateUsesProgressFromAttributes = (attributes: {
+  [key: string]: any;
+}): boolean =>
+  supportsFeatureFromAttributes(attributes, UPDATE_SUPPORT_PROGRESS) &&
+  typeof attributes.in_progress === "number";
 
 export const updateCanInstall = (
   entity: UpdateEntity,
@@ -49,6 +57,11 @@ export const updateCanInstall = (
 export const updateIsInstalling = (entity: UpdateEntity): boolean =>
   updateUsesProgress(entity) || !!entity.attributes.in_progress;
 
+export const updateIsInstallingFromAttributes = (attributes: {
+  [key: string]: any;
+}): boolean =>
+  updateUsesProgressFromAttributes(attributes) || !!attributes.in_progress;
+
 export const updateReleaseNotes = (hass: HomeAssistant, entityId: string) =>
   hass.callWS<string | null>({
     type: "update/release_notes",

src/data/weather.ts

@@ -2,9 +2,21 @@ import {
   mdiAlertCircleOutline,
   mdiGauge,
   mdiWaterPercent,
+  mdiWeatherCloudy,
   mdiWeatherFog,
+  mdiWeatherHail,
+  mdiWeatherLightning,
+  mdiWeatherLightningRainy,
+  mdiWeatherNight,
+  mdiWeatherNightPartlyCloudy,
+  mdiWeatherPartlyCloudy,
+  mdiWeatherPouring,
   mdiWeatherRainy,
+  mdiWeatherSnowy,
+  mdiWeatherSnowyRainy,
+  mdiWeatherSunny,
   mdiWeatherWindy,
+  mdiWeatherWindyVariant,
 } from "@mdi/js";
 import {
   HassEntityAttributeBase,
@@ -57,7 +69,21 @@ export const weatherSVGs = new Set<string>([
 ]);
 
 export const weatherIcons = {
+  "clear-night": mdiWeatherNight,
+  cloudy: mdiWeatherCloudy,
   exceptional: mdiAlertCircleOutline,
+  fog: mdiWeatherFog,
+  hail: mdiWeatherHail,
+  lightning: mdiWeatherLightning,
+  "lightning-rainy": mdiWeatherLightningRainy,
+  partlycloudy: mdiWeatherPartlyCloudy,
+  pouring: mdiWeatherPouring,
+  rainy: mdiWeatherRainy,
+  snowy: mdiWeatherSnowy,
+  "snowy-rainy": mdiWeatherSnowyRainy,
+  sunny: mdiWeatherSunny,
+  windy: mdiWeatherWindy,
+  "windy-variant": mdiWeatherWindyVariant,
 };
 
 export const weatherAttrIcons = {
@@ -437,6 +463,13 @@ export const getWeatherStateIcon = (
   return undefined;
 };
 
+export const weatherIcon = (state?: string, nightTime?: boolean): string =>
+  !state
+    ? undefined
+    : nightTime && state === "partlycloudy"
+    ? mdiWeatherNightPartlyCloudy
+    : weatherIcons[state];
+
 const DAY_IN_MILLISECONDS = 86400000;
 
 export const isForecastHourly = (

src/data/zwave_js.ts

@@ -145,7 +145,7 @@ export interface ZWaveJSController {
   supports_timers: boolean;
   is_heal_network_active: boolean;
   inclusion_state: InclusionState;
-  nodes: number[];
+  nodes: ZWaveJSNodeStatus[];
 }
 
 export interface ZWaveJSNodeStatus {
@@ -167,6 +167,9 @@ export interface ZwaveJSNodeMetadata {
   wakeup: string;
   reset: string;
   device_database_url: string;
+}
+
+export interface ZwaveJSNodeComments {
   comments: ZWaveJSNodeComment[];
 }
 
@@ -200,8 +203,7 @@ export interface ZWaveJSNodeConfigParamMetadata {
 
 export interface ZWaveJSSetConfigParamData {
   type: string;
-  entry_id: string;
-  node_id: number;
+  device_id: string;
   property: number;
   property_key?: number;
   value: string | number;
@@ -228,6 +230,20 @@ export interface ZWaveJSHealNetworkStatusMessage {
   heal_node_status: { [key: number]: string };
 }
 
+export interface ZWaveJSControllerStatisticsUpdatedMessage {
+  event: "statistics updated";
+  source: "controller";
+  messages_tx: number;
+  messages_rx: number;
+  messages_dropped_tx: number;
+  messages_dropped_rx: number;
+  nak: number;
+  can: number;
+  timeout_ack: number;
+  timeout_response: number;
+  timeout_callback: number;
+}
+
 export interface ZWaveJSRemovedNode {
   node_id: number;
   manufacturer: string;
@@ -285,12 +301,23 @@ export const migrateZwave = (
 
 export const fetchZwaveNetworkStatus = (
   hass: HomeAssistant,
-  entry_id: string
-): Promise<ZWaveJSNetwork> =>
-  hass.callWS({
+  device_or_entry_id: {
+    device_id?: string;
+    entry_id?: string;
+  }
+): Promise<ZWaveJSNetwork> => {
+  if (device_or_entry_id.device_id && device_or_entry_id.entry_id) {
+    throw new Error("Only one of device or entry ID should be supplied.");
+  }
+  if (!device_or_entry_id.device_id && !device_or_entry_id.entry_id) {
+    throw new Error("Either device or entry ID should be supplied.");
+  }
+  return hass.callWS({
     type: "zwave_js/network_status",
-    entry_id,
+    device_id: device_or_entry_id.device_id,
+    entry_id: device_or_entry_id.entry_id,
   });
+};
 
 export const fetchZwaveDataCollectionStatus = (
   hass: HomeAssistant,
@@ -427,49 +454,50 @@ export const unprovisionZwaveSmartStartNode = (
 
 export const fetchZwaveNodeStatus = (
   hass: HomeAssistant,
-  entry_id: string,
-  node_id: number
+  device_id: string
 ): Promise<ZWaveJSNodeStatus> =>
   hass.callWS({
     type: "zwave_js/node_status",
-    entry_id,
-    node_id,
+    device_id,
   });
 
 export const fetchZwaveNodeMetadata = (
   hass: HomeAssistant,
-  entry_id: string,
-  node_id: number
+  device_id: string
 ): Promise<ZwaveJSNodeMetadata> =>
   hass.callWS({
     type: "zwave_js/node_metadata",
-    entry_id,
-    node_id,
+    device_id,
+  });
+
+export const fetchZwaveNodeComments = (
+  hass: HomeAssistant,
+  device_id: string
+): Promise<ZwaveJSNodeComments> =>
+  hass.callWS({
+    type: "zwave_js/node_comments",
+    device_id,
   });
 
 export const fetchZwaveNodeConfigParameters = (
   hass: HomeAssistant,
-  entry_id: string,
-  node_id: number
+  device_id: string
 ): Promise<ZWaveJSNodeConfigParams> =>
   hass.callWS({
     type: "zwave_js/get_config_parameters",
-    entry_id,
-    node_id,
+    device_id,
   });
 
 export const setZwaveNodeConfigParameter = (
   hass: HomeAssistant,
-  entry_id: string,
-  node_id: number,
+  device_id: string,
   property: number,
   value: number,
   property_key?: number
 ): Promise<ZWaveJSSetConfigParamResult> => {
   const data: ZWaveJSSetConfigParamData = {
     type: "zwave_js/set_config_parameter",
-    entry_id,
-    node_id,
+    device_id,
     property,
     value,
     property_key,
@@ -479,42 +507,36 @@ export const setZwaveNodeConfigParameter = (
 
 export const reinterviewZwaveNode = (
   hass: HomeAssistant,
-  entry_id: string,
-  node_id: number,
+  device_id: string,
   callbackFunction: (message: ZWaveJSRefreshNodeStatusMessage) => void
 ): Promise<UnsubscribeFunc> =>
   hass.connection.subscribeMessage(
     (message: any) => callbackFunction(message),
     {
       type: "zwave_js/refresh_node_info",
-      entry_id,
-      node_id,
+      device_id,
     }
   );
 
 export const healZwaveNode = (
   hass: HomeAssistant,
-  entry_id: string,
-  node_id: number
+  device_id: string
 ): Promise<boolean> =>
   hass.callWS({
     type: "zwave_js/heal_node",
-    entry_id,
-    node_id,
+    device_id,
   });
 
 export const removeFailedZwaveNode = (
   hass: HomeAssistant,
-  entry_id: string,
-  node_id: number,
+  device_id: string,
   callbackFunction: (message: any) => void
 ): Promise<UnsubscribeFunc> =>
   hass.connection.subscribeMessage(
     (message: any) => callbackFunction(message),
     {
       type: "zwave_js/remove_failed_node",
-      entry_id,
-      node_id,
+      device_id,
     }
   );
 
@@ -538,16 +560,14 @@ export const stopHealZwaveNetwork = (
 
 export const subscribeZwaveNodeReady = (
   hass: HomeAssistant,
-  entry_id: string,
-  node_id: number,
+  device_id: string,
   callbackFunction: (message) => void
 ): Promise<UnsubscribeFunc> =>
   hass.connection.subscribeMessage(
     (message: any) => callbackFunction(message),
     {
       type: "zwave_js/node_ready",
-      entry_id,
-      node_id,
+      device_id,
     }
   );
 
@@ -564,6 +584,19 @@ export const subscribeHealZwaveNetworkProgress = (
     }
   );
 
+export const subscribeZwaveControllerStatistics = (
+  hass: HomeAssistant,
+  entry_id: string,
+  callbackFunction: (message: ZWaveJSControllerStatisticsUpdatedMessage) => void
+): Promise<UnsubscribeFunc> =>
+  hass.connection.subscribeMessage(
+    (message: any) => callbackFunction(message),
+    {
+      type: "zwave_js/subscribe_controller_statistics",
+      entry_id,
+    }
+  );
+
 export const getZwaveJsIdentifiersFromDevice = (
   device: DeviceRegistryEntry
 ): ZWaveJSNodeIdentifiers | undefined => {

src/dialogs/config-flow/dialog-data-entry-flow.ts

@@ -309,7 +309,7 @@ class DataEntryFlowDialog extends LitElement {
                   : this._step.type === "abort"
                   ? html`
                       <step-flow-abort
-                        .flowConfig=${this._params.flowConfig}
+                        .params=${this._params}
                         .step=${this._step}
                         .hass=${this.hass}
                         .domain=${this._step.handler}

src/dialogs/config-flow/show-dialog-data-entry-flow.ts

@@ -131,6 +131,7 @@ export interface DataEntryFlowDialogParams {
   }) => void;
   flowConfig: FlowConfig;
   showAdvanced?: boolean;
+  dialogParentElement?: HTMLElement;
 }
 
 export const loadDataEntryFlowDialog = () => import("./dialog-data-entry-flow");
@@ -146,6 +147,7 @@ export const showFlowDialog = (
     dialogParams: {
       ...dialogParams,
       flowConfig,
+      dialogParentElement: element,
     },
   });
 };

src/dialogs/config-flow/step-flow-abort.ts

@@ -1,15 +1,25 @@
 import "@material/mwc-button";
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import {
+  CSSResultGroup,
+  html,
+  LitElement,
+  TemplateResult,
+  PropertyValues,
+} from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { DataEntryFlowStepAbort } from "../../data/data_entry_flow";
 import { HomeAssistant } from "../../types";
-import { FlowConfig } from "./show-dialog-data-entry-flow";
+import { showAddApplicationCredentialDialog } from "../../panels/config/application_credentials/show-dialog-add-application-credential";
 import { configFlowContentStyles } from "./styles";
+import { showConfirmationDialog } from "../generic/show-dialog-box";
+import { domainToName } from "../../data/integration";
+import { DataEntryFlowDialogParams } from "./show-dialog-data-entry-flow";
+import { showConfigFlowDialog } from "./show-dialog-config-flow";
 
 @customElement("step-flow-abort")
 class StepFlowAbort extends LitElement {
-  @property({ attribute: false }) public flowConfig!: FlowConfig;
+  @property({ attribute: false }) public params!: DataEntryFlowDialogParams;
 
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -17,11 +27,21 @@ class StepFlowAbort extends LitElement {
 
   @property({ attribute: false }) public domain!: string;
 
+  protected firstUpdated(changed: PropertyValues) {
+    super.firstUpdated(changed);
+    if (this.step.reason === "missing_credentials") {
+      this._handleMissingCreds();
+    }
+  }
+
   protected render(): TemplateResult {
+    if (this.step.reason === "missing_credentials") {
+      return html``;
+    }
     return html`
       <h2>${this.hass.localize(`component.${this.domain}.title`)}</h2>
       <div class="content">
-        ${this.flowConfig.renderAbortDescription(this.hass, this.step)}
+        ${this.params.flowConfig.renderAbortDescription(this.hass, this.step)}
       </div>
       <div class="buttons">
         <mwc-button @click=${this._flowDone}
@@ -33,6 +53,32 @@ class StepFlowAbort extends LitElement {
     `;
   }
 
+  private async _handleMissingCreds() {
+    const confirm = await showConfirmationDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.integrations.config_flow.missing_credentials",
+        {
+          integration: domainToName(this.hass.localize, this.domain),
+        }
+      ),
+    });
+    this._flowDone();
+    if (!confirm) {
+      return;
+    }
+    // Prompt to enter credentials and restart integration setup
+    showAddApplicationCredentialDialog(this.params.dialogParentElement!, {
+      selectedDomain: this.domain,
+      applicationCredentialAddedCallback: () => {
+        showConfigFlowDialog(this.params.dialogParentElement!, {
+          dialogClosedCallback: this.params.dialogClosedCallback,
+          startFlowHandler: this.domain,
+          showAdvanced: this.hass.userData?.showAdvanced,
+        });
+      },
+    });
+  }
+
   private _flowDone(): void {
     fireEvent(this, "flow-update", { step: undefined });
   }

src/dialogs/make-dialog-manager.ts

@@ -86,6 +86,7 @@ export const showDialog = async (
   if (mainWindow.history.state?.replaced) {
     LOADED[dialogTag].closedFocusTargets =
       LOADED[mainWindow.history.state.dialog].closedFocusTargets;
+    delete LOADED[mainWindow.history.state.dialog].closedFocusTargets;
   } else {
     LOADED[dialogTag].closedFocusTargets = ancestorsWithProperty(
       deepActiveElement(),

src/dialogs/more-info/controls/more-info-camera.ts

@@ -1,35 +1,14 @@
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { property, state } from "lit/decorators";
-import { isComponentLoaded } from "../../../common/config/is_component_loaded";
-import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-camera-stream";
-import type { HaCheckbox } from "../../../components/ha-checkbox";
-import "../../../components/ha-checkbox";
-import {
-  CameraEntity,
-  CameraPreferences,
-  CAMERA_SUPPORT_STREAM,
-  fetchCameraPrefs,
-  STREAM_TYPE_HLS,
-  updateCameraPrefs,
-} from "../../../data/camera";
+import { CameraEntity } from "../../../data/camera";
 import type { HomeAssistant } from "../../../types";
-import "../../../components/ha-formfield";
 
 class MoreInfoCamera extends LitElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ attribute: false }) public stateObj?: CameraEntity;
 
-  @state() private _cameraPrefs?: CameraPreferences;
-
   @state() private _attached = false;
 
   public connectedCallback() {
@@ -54,83 +33,13 @@ class MoreInfoCamera extends LitElement {
         allow-exoplayer
         controls
       ></ha-camera-stream>
-      ${this._cameraPrefs
-        ? html`
-            <ha-formfield label="Preload stream">
-              <ha-checkbox
-                .checked=${this._cameraPrefs.preload_stream}
-                @change=${this._handleCheckboxChanged}
-              >
-              </ha-checkbox>
-            </ha-formfield>
-          `
-        : undefined}
     `;
   }
 
-  protected updated(changedProps: PropertyValues) {
-    if (!changedProps.has("stateObj")) {
-      return;
-    }
-
-    const oldState = changedProps.get("stateObj") as this["stateObj"];
-    const oldEntityId = oldState ? oldState.entity_id : undefined;
-    const curEntityId = this.stateObj ? this.stateObj.entity_id : undefined;
-
-    // Same entity, ignore.
-    if (curEntityId === oldEntityId) {
-      return;
-    }
-
-    if (
-      curEntityId &&
-      isComponentLoaded(this.hass!, "stream") &&
-      supportsFeature(this.stateObj!, CAMERA_SUPPORT_STREAM) &&
-      // The stream component for HLS streams supports a server-side pre-load
-      // option that client initiated WebRTC streams do not
-      this.stateObj!.attributes.frontend_stream_type === STREAM_TYPE_HLS
-    ) {
-      // Fetch in background while we set up the video.
-      this._fetchCameraPrefs();
-    }
-  }
-
-  private async _fetchCameraPrefs() {
-    this._cameraPrefs = await fetchCameraPrefs(
-      this.hass!,
-      this.stateObj!.entity_id
-    );
-  }
-
-  private async _handleCheckboxChanged(ev) {
-    const checkbox = ev.currentTarget as HaCheckbox;
-    try {
-      this._cameraPrefs = await updateCameraPrefs(
-        this.hass!,
-        this.stateObj!.entity_id,
-        {
-          preload_stream: checkbox.checked!,
-        }
-      );
-    } catch (err: any) {
-      alert(err.message);
-      checkbox.checked = !checkbox.checked;
-    }
-  }
-
   static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;
-        position: relative;
-      }
-      ha-formfield {
-        position: absolute;
-        top: 0;
-        right: 0;
-        background-color: var(--secondary-background-color);
-        padding-right: 16px;
-        border-bottom-left-radius: 4px;
       }
     `;
   }

src/dialogs/more-info/controls/more-info-weather.ts

@@ -1,23 +1,9 @@
 import {
-  mdiAlertCircleOutline,
   mdiEye,
   mdiGauge,
   mdiThermometer,
   mdiWaterPercent,
-  mdiWeatherCloudy,
-  mdiWeatherFog,
-  mdiWeatherHail,
-  mdiWeatherLightning,
-  mdiWeatherLightningRainy,
-  mdiWeatherNight,
-  mdiWeatherPartlyCloudy,
-  mdiWeatherPouring,
-  mdiWeatherRainy,
-  mdiWeatherSnowy,
-  mdiWeatherSnowyRainy,
-  mdiWeatherSunny,
   mdiWeatherWindy,
-  mdiWeatherWindyVariant,
 } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
@@ -37,27 +23,10 @@ import {
   getWeatherUnit,
   getWind,
   isForecastHourly,
+  weatherIcons,
 } from "../../../data/weather";
 import { HomeAssistant } from "../../../types";
 
-const weatherIcons = {
-  "clear-night": mdiWeatherNight,
-  cloudy: mdiWeatherCloudy,
-  exceptional: mdiAlertCircleOutline,
-  fog: mdiWeatherFog,
-  hail: mdiWeatherHail,
-  lightning: mdiWeatherLightning,
-  "lightning-rainy": mdiWeatherLightningRainy,
-  partlycloudy: mdiWeatherPartlyCloudy,
-  pouring: mdiWeatherPouring,
-  rainy: mdiWeatherRainy,
-  snowy: mdiWeatherSnowy,
-  "snowy-rainy": mdiWeatherSnowyRainy,
-  sunny: mdiWeatherSunny,
-  windy: mdiWeatherWindy,
-  "windy-variant": mdiWeatherWindyVariant,
-};
-
 @customElement("more-info-weather")
 class MoreInfoWeather extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -235,6 +204,7 @@ class MoreInfoWeather extends LitElement {
     return css`
       ha-svg-icon {
         color: var(--paper-item-icon-color);
+        margin-left: 8px;
       }
       .section {
         margin: 16px 0 8px 0;

src/dialogs/more-info/ha-more-info-history.ts

@@ -1,4 +1,4 @@
-import { startOfYesterday } from "date-fns";
+import { startOfYesterday } from "date-fns/esm";
 import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";

src/dialogs/more-info/ha-more-info-logbook.ts

@@ -1,17 +1,11 @@
-import { startOfYesterday } from "date-fns";
+import { startOfYesterday } from "date-fns/esm";
 import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { fireEvent } from "../../common/dom/fire_event";
-import { computeStateDomain } from "../../common/entity/compute_state_domain";
-import { throttle } from "../../common/util/throttle";
-import "../../components/ha-circular-progress";
-import { getLogbookData, LogbookEntry } from "../../data/logbook";
-import { loadTraceContexts, TraceContexts } from "../../data/trace";
-import { fetchUsers } from "../../data/user";
 import "../../panels/logbook/ha-logbook";
-import { haStyle } from "../../resources/styles";
-import { HomeAssistant } from "../../types";
+import type { HomeAssistant } from "../../types";
 
 @customElement("ha-more-info-logbook")
 export class MoreInfoLogbook extends LitElement {
@@ -19,26 +13,14 @@ export class MoreInfoLogbook extends LitElement {
 
   @property() public entityId!: string;
 
-  @state() private _logbookEntries?: LogbookEntry[];
-
-  @state() private _traceContexts?: TraceContexts;
-
-  @state() private _userIdToName = {};
-
-  private _lastLogbookDate?: Date;
-
-  private _fetchUserPromise?: Promise<void>;
-
-  private _error?: string;
-
   private _showMoreHref = "";
 
-  private _throttleGetLogbookEntries = throttle(() => {
-    this._getLogBookData();
-  }, 10000);
+  private _time = { recent: 86400 };
+
+  private _entityIdAsList = memoizeOne((entityId: string) => [entityId]);
 
   protected render(): TemplateResult {
-    if (!this.entityId) {
+    if (!isComponentLoaded(this.hass, "logbook") || !this.entityId) {
       return html``;
     }
     const stateObj = this.hass.states[this.entityId];
@@ -48,149 +30,34 @@ export class MoreInfoLogbook extends LitElement {
     }
 
     return html`
-      ${isComponentLoaded(this.hass, "logbook")
-        ? this._error
-          ? html`<div class="no-entries">
-              ${`${this.hass.localize(
-                "ui.components.logbook.retrieval_error"
-              )}: ${this._error}`}
-            </div>`
-          : !this._logbookEntries
-          ? html`
-              <ha-circular-progress
-                active
-                alt=${this.hass.localize("ui.common.loading")}
-              ></ha-circular-progress>
-            `
-          : this._logbookEntries.length
-          ? html`
-              <div class="header">
-                <div class="title">
-                  ${this.hass.localize("ui.dialogs.more_info_control.logbook")}
-                </div>
-                <a href=${this._showMoreHref} @click=${this._close}
-                  >${this.hass.localize(
-                    "ui.dialogs.more_info_control.show_more"
-                  )}</a
-                >
-              </div>
-              <ha-logbook
-                narrow
-                no-icon
-                no-name
-                relative-time
-                .hass=${this.hass}
-                .entries=${this._logbookEntries}
-                .traceContexts=${this._traceContexts}
-                .userIdToName=${this._userIdToName}
-              ></ha-logbook>
-            `
-          : html`<div class="no-entries">
-              ${this.hass.localize("ui.components.logbook.entries_not_found")}
-            </div>`
-        : ""}
+      <div class="header">
+        <div class="title">
+          ${this.hass.localize("ui.dialogs.more_info_control.logbook")}
+        </div>
+        <a href=${this._showMoreHref} @click=${this._close}
+          >${this.hass.localize("ui.dialogs.more_info_control.show_more")}</a
+        >
+      </div>
+      <ha-logbook
+        .hass=${this.hass}
+        .time=${this._time}
+        .entityIds=${this._entityIdAsList(this.entityId)}
+        narrow
+        no-icon
+        no-name
+        relative-time
+      ></ha-logbook>
     `;
   }
 
-  protected firstUpdated(): void {
-    this._fetchUserPromise = this._fetchUserNames();
-  }
-
-  protected updated(changedProps: PropertyValues): void {
-    super.updated(changedProps);
-
-    if (changedProps.has("entityId")) {
-      this._lastLogbookDate = undefined;
-      this._logbookEntries = undefined;
-
-      if (!this.entityId) {
-        return;
-      }
+  protected willUpdate(changedProps: PropertyValues): void {
+    super.willUpdate(changedProps);
 
+    if (changedProps.has("entityId") && this.entityId) {
       this._showMoreHref = `/logbook?entity_id=${
         this.entityId
       }&start_date=${startOfYesterday().toISOString()}`;
-
-      this._throttleGetLogbookEntries();
-      return;
     }
-
-    if (!this.entityId || !changedProps.has("hass")) {
-      return;
-    }
-
-    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-
-    if (
-      oldHass &&
-      this.hass.states[this.entityId] !== oldHass?.states[this.entityId]
-    ) {
-      // wait for commit of data (we only account for the default setting of 1 sec)
-      setTimeout(this._throttleGetLogbookEntries, 1000);
-    }
-  }
-
-  private async _getLogBookData() {
-    if (!isComponentLoaded(this.hass, "logbook")) {
-      return;
-    }
-    const lastDate =
-      this._lastLogbookDate ||
-      new Date(new Date().getTime() - 24 * 60 * 60 * 1000);
-    const now = new Date();
-    let newEntries;
-    let traceContexts;
-
-    try {
-      [newEntries, traceContexts] = await Promise.all([
-        getLogbookData(
-          this.hass,
-          lastDate.toISOString(),
-          now.toISOString(),
-          this.entityId
-        ),
-        this.hass.user?.is_admin ? loadTraceContexts(this.hass) : {},
-        this._fetchUserPromise,
-      ]);
-    } catch (err: any) {
-      this._error = err.message;
-    }
-
-    this._logbookEntries = this._logbookEntries
-      ? [...newEntries, ...this._logbookEntries]
-      : newEntries;
-    this._lastLogbookDate = now;
-    this._traceContexts = traceContexts;
-  }
-
-  private async _fetchUserNames() {
-    const userIdToName = {};
-
-    // Start loading users
-    const userProm = this.hass.user?.is_admin && fetchUsers(this.hass);
-
-    // Process persons
-    Object.values(this.hass.states).forEach((entity) => {
-      if (
-        entity.attributes.user_id &&
-        computeStateDomain(entity) === "person"
-      ) {
-        this._userIdToName[entity.attributes.user_id] =
-          entity.attributes.friendly_name;
-      }
-    });
-
-    // Process users
-    if (userProm) {
-      const users = await userProm;
-      for (const user of users) {
-        if (!(user.id in userIdToName)) {
-          userIdToName[user.id] = user.name;
-        }
-      }
-    }
-
-    this._userIdToName = userIdToName;
   }
 
   private _close(): void {
@@ -199,13 +66,7 @@ export class MoreInfoLogbook extends LitElement {
 
   static get styles() {
     return [
-      haStyle,
       css`
-        .no-entries {
-          text-align: center;
-          padding: 16px;
-          color: var(--secondary-text-color);
-        }
         ha-logbook {
           --logbook-max-height: 250px;
         }
@@ -214,10 +75,6 @@ export class MoreInfoLogbook extends LitElement {
             --logbook-max-height: unset;
           }
         }
-        ha-circular-progress {
-          display: flex;
-          justify-content: center;
-        }
         .header {
           display: flex;
           flex-direction: row;

src/onboarding/onboarding-integrations.ts

@@ -49,12 +49,14 @@ class OnboardingIntegrations extends LitElement {
     this.hass.loadBackendTranslation("title", undefined, true);
     this._unsubEvents = subscribeConfigFlowInProgress(this.hass, (flows) => {
       this._discovered = flows;
+      const integrations: Set<string> = new Set();
       for (const flow of flows) {
         // To render title placeholders
         if (flow.context.title_placeholders) {
-          this.hass.loadBackendTranslation("config", flow.handler);
+          integrations.add(flow.handler);
         }
       }
+      this.hass.loadBackendTranslation("config", Array.from(integrations));
     });
   }
 

src/panels/calendar/ha-full-calendar.ts

@@ -336,6 +336,9 @@ export class HAFullCalendar extends LitElement {
 
         .today {
           margin-right: 20px;
+          margin-inline-end: 20px;
+          margin-inline-start: initial;
+          direction: var(--direction);
         }
 
         .prev,

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

@@ -194,10 +194,13 @@ class PanelCalendar extends LitElement {
 
         .calendar-list {
           padding-right: 16px;
+          padding-inline-end: 16px;
+          padding-inline-start: initial;
           min-width: 170px;
           flex: 0 0 15%;
           overflow: hidden;
           --mdc-theme-text-primary-on-background: var(--primary-text-color);
+          direction: var(--direction);
         }
 
         .calendar-list > div {

src/panels/config/application_credentials/dialog-add-application-credential.ts

@@ -41,6 +41,8 @@ export class DialogAddApplicationCredential extends LitElement {
 
   @state() private _domain?: string;
 
+  @state() private _name?: string;
+
   @state() private _clientId?: string;
 
   @state() private _clientSecret?: string;
@@ -49,7 +51,9 @@ export class DialogAddApplicationCredential extends LitElement {
 
   public showDialog(params: AddApplicationCredentialDialogParams) {
     this._params = params;
-    this._domain = "";
+    this._domain =
+      params.selectedDomain !== undefined ? params.selectedDomain : "";
+    this._name = "";
     this._clientId = "";
     this._clientSecret = "";
     this._error = undefined;
@@ -72,7 +76,7 @@ export class DialogAddApplicationCredential extends LitElement {
     return html`
       <ha-dialog
         open
-        @closed=${this.closeDialog}
+        @closed=${this._abortDialog}
         scrimClickAction
         escapeKeyAction
         .heading=${createCloseHeading(
@@ -87,6 +91,7 @@ export class DialogAddApplicationCredential extends LitElement {
           <ha-combo-box
             name="domain"
             .hass=${this.hass}
+            .disabled=${!!this._params.selectedDomain}
             .label=${this.hass.localize(
               "ui.panel.config.application_credentials.editor.domain"
             )}
@@ -99,6 +104,18 @@ export class DialogAddApplicationCredential extends LitElement {
             required
             @value-changed=${this._handleDomainPicked}
           ></ha-combo-box>
+          <ha-textfield
+            class="name"
+            name="name"
+            .label=${this.hass.localize(
+              "ui.panel.config.application_credentials.editor.name"
+            )}
+            .value=${this._name}
+            required
+            @input=${this._handleValueChanged}
+            error-message=${this.hass.localize("ui.common.error_required")}
+            dialogInitialFocus
+          ></ha-textfield>
           <ha-textfield
             class="clientId"
             name="clientId"
@@ -166,6 +183,13 @@ export class DialogAddApplicationCredential extends LitElement {
     this[`_${name}`] = value;
   }
 
+  private _abortDialog() {
+    if (this._params && this._params.dialogAbortedCallback) {
+      this._params.dialogAbortedCallback();
+    }
+    this.closeDialog();
+  }
+
   private async _createApplicationCredential(ev) {
     ev.preventDefault();
     if (!this._domain || !this._clientId || !this._clientSecret) {
@@ -181,7 +205,8 @@ export class DialogAddApplicationCredential extends LitElement {
         this.hass,
         this._domain,
         this._clientId,
-        this._clientSecret
+        this._clientSecret,
+        this._name
       );
     } catch (err: any) {
       this._loading = false;

src/panels/config/application_credentials/ha-config-application-credentials.ts

@@ -19,7 +19,10 @@ import {
   fetchApplicationCredentials,
 } from "../../../data/application_credential";
 import { domainToName } from "../../../data/integration";
-import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-tabs-subpage-data-table";
 import type { HaTabsSubpageDataTable } from "../../../layouts/hass-tabs-subpage-data-table";
 import { HomeAssistant, Route } from "../../../types";
@@ -46,13 +49,22 @@ export class HaConfigApplicationCredentials extends LitElement {
   private _columns = memoizeOne(
     (narrow: boolean, localize: LocalizeFunc): DataTableColumnContainer => {
       const columns: DataTableColumnContainer<ApplicationCredential> = {
+        name: {
+          title: localize(
+            "ui.panel.config.application_credentials.picker.headers.name"
+          ),
+          width: "40%",
+          direction: "asc",
+          grows: true,
+          template: (_, entry: ApplicationCredential) => html`${entry.name}`,
+        },
         clientId: {
           title: localize(
             "ui.panel.config.application_credentials.picker.headers.client_id"
           ),
-          width: "25%",
+          width: "30%",
           direction: "asc",
-          grows: true,
+          hidden: narrow,
           template: (_, entry: ApplicationCredential) =>
             html`${entry.client_id}`,
         },
@@ -61,9 +73,8 @@ export class HaConfigApplicationCredentials extends LitElement {
             "ui.panel.config.application_credentials.picker.headers.application"
           ),
           sortable: true,
-          width: "20%",
+          width: "30%",
           direction: "asc",
-          hidden: narrow,
           template: (_, entry) => html`${domainToName(localize, entry.domain)}`,
         },
       };
@@ -171,11 +182,24 @@ export class HaConfigApplicationCredentials extends LitElement {
       confirmText: this.hass.localize("ui.common.remove"),
       dismissText: this.hass.localize("ui.common.cancel"),
       confirm: async () => {
-        await Promise.all(
-          this._selected.map(async (applicationCredential) => {
-            await deleteApplicationCredential(this.hass, applicationCredential);
-          })
-        );
+        try {
+          await Promise.all(
+            this._selected.map(async (applicationCredential) => {
+              await deleteApplicationCredential(
+                this.hass,
+                applicationCredential
+              );
+            })
+          );
+        } catch (err: any) {
+          showAlertDialog(this, {
+            title: this.hass.localize(
+              "ui.panel.config.application_credentials.picker.remove_selected.error_title"
+            ),
+            text: err.message,
+          });
+          return;
+        }
         this._dataTable.clearSelection();
         this._fetchApplicationCredentials();
       },
@@ -228,6 +252,8 @@ export class HaConfigApplicationCredentials extends LitElement {
       .selected-txt {
         font-weight: bold;
         padding-left: 16px;
+        padding-inline-start: 16px;
+        direction: var(--direction);
       }
       .table-header .selected-txt {
         margin-top: 20px;

src/panels/config/application_credentials/show-dialog-add-application-credential.ts

@@ -5,6 +5,8 @@ export interface AddApplicationCredentialDialogParams {
   applicationCredentialAddedCallback: (
     applicationCredential: ApplicationCredential
   ) => void;
+  dialogAbortedCallback?: () => void;
+  selectedDomain?: string;
 }
 
 export const loadAddApplicationCredentialDialog = () =>

src/panels/config/areas/ha-config-area-page.ts

@@ -2,7 +2,10 @@ import "@material/mwc-button";
 import { mdiImagePlus, mdiPencil } from "@mdi/js";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import { HassEntity } from "home-assistant-js-websocket/dist/types";
+import {
+  HassEntity,
+  UnsubscribeFunc,
+} from "home-assistant-js-websocket/dist/types";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
@@ -19,6 +22,7 @@ import "../../../components/ha-icon-next";
 import {
   AreaRegistryEntry,
   deleteAreaRegistryEntry,
+  subscribeAreaRegistry,
   updateAreaRegistryEntry,
 } from "../../../data/area_registry";
 import { AutomationEntity } from "../../../data/automation";
@@ -26,18 +30,22 @@ import {
   computeDeviceName,
   DeviceRegistryEntry,
   sortDeviceRegistryByName,
+  subscribeDeviceRegistry,
 } from "../../../data/device_registry";
 import {
   computeEntityRegistryName,
   EntityRegistryEntry,
   sortEntityRegistryByName,
+  subscribeEntityRegistry,
 } from "../../../data/entity_registry";
 import { SceneEntity } from "../../../data/scene";
 import { ScriptEntity } from "../../../data/script";
 import { findRelated, RelatedResult } from "../../../data/search";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
+import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
+import "../../logbook/ha-logbook";
 import { showEntityEditorDialog } from "../entities/show-dialog-entity-editor";
 import { configSections } from "../ha-panel-config";
 import {
@@ -51,17 +59,11 @@ declare type NameAndEntity<EntityType extends HassEntity> = {
 };
 
 @customElement("ha-config-area-page")
-class HaConfigAreaPage extends LitElement {
+class HaConfigAreaPage extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public areaId!: string;
 
-  @property() public areas!: AreaRegistryEntry[];
-
-  @property() public devices!: DeviceRegistryEntry[];
-
-  @property() public entities!: EntityRegistryEntry[];
-
   @property({ type: Boolean, reflect: true }) public narrow!: boolean;
 
   @property() public isWide!: boolean;
@@ -70,8 +72,16 @@ class HaConfigAreaPage extends LitElement {
 
   @property() public route!: Route;
 
+  @state() public _areas!: AreaRegistryEntry[];
+
+  @state() public _devices!: DeviceRegistryEntry[];
+
+  @state() public _entities!: EntityRegistryEntry[];
+
   @state() private _related?: RelatedResult;
 
+  private _logbookTime = { recent: 86400 };
+
   private _area = memoizeOne(
     (
       areaId: string,
@@ -86,7 +96,7 @@ class HaConfigAreaPage extends LitElement {
       registryDevices: DeviceRegistryEntry[],
       registryEntities: EntityRegistryEntry[]
     ) => {
-      const devices = new Map();
+      const devices = new Map<string, DeviceRegistryEntry>();
 
       for (const device of registryDevices) {
         if (device.area_id === areaId) {
@@ -102,7 +112,7 @@ class HaConfigAreaPage extends LitElement {
           if (entity.area_id === areaId) {
             entities.push(entity);
           }
-        } else if (devices.has(entity.device_id)) {
+        } else if (entity.device_id && devices.has(entity.device_id)) {
           indirectEntities.push(entity);
         }
       }
@@ -115,6 +125,20 @@ class HaConfigAreaPage extends LitElement {
     }
   );
 
+  private _allDeviceIds = memoizeOne((devices: DeviceRegistryEntry[]) =>
+    devices.map((device) => device.id)
+  );
+
+  private _allEntities = memoizeOne(
+    (memberships: {
+      entities: EntityRegistryEntry[];
+      indirectEntities: EntityRegistryEntry[];
+    }) =>
+      memberships.entities
+        .map((entry) => entry.entity_id)
+        .concat(memberships.indirectEntities.map((entry) => entry.entity_id))
+  );
+
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     loadAreaRegistryDetailDialog();
@@ -127,8 +151,26 @@ class HaConfigAreaPage extends LitElement {
     }
   }
 
+  protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
+    return [
+      subscribeAreaRegistry(this.hass.connection, (areas) => {
+        this._areas = areas;
+      }),
+      subscribeDeviceRegistry(this.hass.connection, (entries) => {
+        this._devices = entries;
+      }),
+      subscribeEntityRegistry(this.hass.connection, (entries) => {
+        this._entities = entries;
+      }),
+    ];
+  }
+
   protected render(): TemplateResult {
-    const area = this._area(this.areaId, this.areas);
+    if (!this._areas || !this._devices || !this._entities) {
+      return html``;
+    }
+
+    const area = this._area(this.areaId, this._areas);
 
     if (!area) {
       return html`
@@ -139,11 +181,12 @@ class HaConfigAreaPage extends LitElement {
       `;
     }
 
-    const { devices, entities } = this._memberships(
+    const memberships = this._memberships(
       this.areaId,
-      this.devices,
-      this.entities
+      this._devices,
+      this._entities
     );
+    const { devices, entities } = memberships;
 
     // Pre-compute the entity and device names, so we can sort by them
     if (devices) {
@@ -359,8 +402,6 @@ class HaConfigAreaPage extends LitElement {
                   </ha-card>
                 `
               : ""}
-          </div>
-          <div class="column">
             ${isComponentLoaded(this.hass, "scene")
               ? html`
                   <ha-card
@@ -442,6 +483,26 @@ class HaConfigAreaPage extends LitElement {
                 `
               : ""}
           </div>
+          <div class="column">
+            ${isComponentLoaded(this.hass, "logbook")
+              ? html`
+                  <ha-card
+                    outlined
+                    .header=${this.hass.localize("panel.logbook")}
+                  >
+                    <ha-logbook
+                      .hass=${this.hass}
+                      .time=${this._logbookTime}
+                      .entityIds=${this._allEntities(memberships)}
+                      .deviceIds=${this._allDeviceIds(memberships.devices)}
+                      virtualize
+                      narrow
+                      no-icon
+                    ></ha-logbook>
+                  </ha-card>
+                `
+              : ""}
+          </div>
         </div>
       </hass-tabs-subpage>
     `;
@@ -699,6 +760,13 @@ class HaConfigAreaPage extends LitElement {
           opacity: 0.5;
           border-radius: 50%;
         }
+        ha-logbook {
+          height: 400px;
+        }
+        :host([narrow]) ha-logbook {
+          height: 235px;
+          overflow: auto;
+        }
       `,
     ];
   }

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

@@ -1,6 +1,7 @@
 import { mdiHelpCircle, mdiPlus } from "@mdi/js";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import "../../../components/ha-fab";
@@ -9,12 +10,20 @@ import "../../../components/ha-svg-icon";
 import {
   AreaRegistryEntry,
   createAreaRegistryEntry,
+  subscribeAreaRegistry,
 } from "../../../data/area_registry";
-import type { DeviceRegistryEntry } from "../../../data/device_registry";
-import type { EntityRegistryEntry } from "../../../data/entity_registry";
+import {
+  DeviceRegistryEntry,
+  subscribeDeviceRegistry,
+} from "../../../data/device_registry";
+import {
+  EntityRegistryEntry,
+  subscribeEntityRegistry,
+} from "../../../data/entity_registry";
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-loading-screen";
 import "../../../layouts/hass-tabs-subpage";
+import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { HomeAssistant, Route } from "../../../types";
 import "../ha-config-section";
 import { configSections } from "../ha-panel-config";
@@ -24,7 +33,7 @@ import {
 } from "./show-dialog-area-registry-detail";
 
 @customElement("ha-config-areas-dashboard")
-export class HaConfigAreasDashboard extends LitElement {
+export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public isWide?: boolean;
@@ -33,13 +42,13 @@ export class HaConfigAreasDashboard extends LitElement {
 
   @property() public route!: Route;
 
-  @property() public areas!: AreaRegistryEntry[];
+  @state() private _areas!: AreaRegistryEntry[];
 
-  @property() public devices!: DeviceRegistryEntry[];
+  @state() private _devices!: DeviceRegistryEntry[];
 
-  @property() public entities!: EntityRegistryEntry[];
+  @state() private _entities!: EntityRegistryEntry[];
 
-  private _areas = memoizeOne(
+  private _processAreas = memoizeOne(
     (
       areas: AreaRegistryEntry[],
       devices: DeviceRegistryEntry[],
@@ -75,6 +84,20 @@ export class HaConfigAreasDashboard extends LitElement {
       })
   );
 
+  protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
+    return [
+      subscribeAreaRegistry(this.hass.connection, (areas) => {
+        this._areas = areas;
+      }),
+      subscribeDeviceRegistry(this.hass.connection, (entries) => {
+        this._devices = entries;
+      }),
+      subscribeEntityRegistry(this.hass.connection, (entries) => {
+        this._entities = entries;
+      }),
+    ];
+  }
+
   protected render(): TemplateResult {
     return html`
       <hass-tabs-subpage
@@ -92,56 +115,62 @@ export class HaConfigAreasDashboard extends LitElement {
           @click=${this._showHelp}
         ></ha-icon-button>
         <div class="container">
-          ${this._areas(this.areas, this.devices, this.entities).map(
-            (area) =>
-              html`<a href=${`/config/areas/area/${area.area_id}`}
-                ><ha-card outlined>
-                  <div
-                    style=${styleMap({
-                      backgroundImage: area.picture
-                        ? `url(${area.picture})`
-                        : undefined,
-                    })}
-                    class="picture ${!area.picture ? "placeholder" : ""}"
-                  ></div>
-                  <h1 class="card-header">${area.name}</h1>
-                  <div class="card-content">
-                    <div>
-                      ${area.devices
-                        ? html`
-                            ${this.hass.localize(
-                              "ui.panel.config.integrations.config_entry.devices",
-                              "count",
-                              area.devices
-                            )}${area.services ? "," : ""}
-                          `
-                        : ""}
-                      ${area.services
-                        ? html`
-                            ${this.hass.localize(
-                              "ui.panel.config.integrations.config_entry.services",
-                              "count",
-                              area.services
-                            )}
-                          `
-                        : ""}
-                      ${(area.devices || area.services) && area.entities
-                        ? this.hass.localize("ui.common.and")
-                        : ""}
-                      ${area.entities
-                        ? html`
-                            ${this.hass.localize(
-                              "ui.panel.config.integrations.config_entry.entities",
-                              "count",
-                              area.entities
-                            )}
-                          `
-                        : ""}
-                    </div>
-                  </div>
-                </ha-card></a
-              >`
-          )}
+          ${!this._areas || !this._devices || !this._entities
+            ? ""
+            : this._processAreas(
+                this._areas,
+                this._devices,
+                this._entities
+              ).map(
+                (area) =>
+                  html`<a href=${`/config/areas/area/${area.area_id}`}
+                    ><ha-card outlined>
+                      <div
+                        style=${styleMap({
+                          backgroundImage: area.picture
+                            ? `url(${area.picture})`
+                            : undefined,
+                        })}
+                        class="picture ${!area.picture ? "placeholder" : ""}"
+                      ></div>
+                      <h1 class="card-header">${area.name}</h1>
+                      <div class="card-content">
+                        <div>
+                          ${area.devices
+                            ? html`
+                                ${this.hass.localize(
+                                  "ui.panel.config.integrations.config_entry.devices",
+                                  "count",
+                                  area.devices
+                                )}${area.services ? "," : ""}
+                              `
+                            : ""}
+                          ${area.services
+                            ? html`
+                                ${this.hass.localize(
+                                  "ui.panel.config.integrations.config_entry.services",
+                                  "count",
+                                  area.services
+                                )}
+                              `
+                            : ""}
+                          ${(area.devices || area.services) && area.entities
+                            ? this.hass.localize("ui.common.and")
+                            : ""}
+                          ${area.entities
+                            ? html`
+                                ${this.hass.localize(
+                                  "ui.panel.config.integrations.config_entry.entities",
+                                  "count",
+                                  area.entities
+                                )}
+                              `
+                            : ""}
+                        </div>
+                      </div>
+                    </ha-card></a
+                  >`
+              )}
         </div>
         <ha-fab
           slot="fab"

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

@@ -1,20 +1,4 @@
-import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import { PropertyValues } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { stringCompare } from "../../../common/string/compare";
-import {
-  AreaRegistryEntry,
-  subscribeAreaRegistry,
-} from "../../../data/area_registry";
-import { ConfigEntry, getConfigEntries } from "../../../data/config_entries";
-import {
-  DeviceRegistryEntry,
-  subscribeDeviceRegistry,
-} from "../../../data/device_registry";
-import {
-  EntityRegistryEntry,
-  subscribeEntityRegistry,
-} from "../../../data/entity_registry";
+import { customElement, property } from "lit/decorators";
 import {
   HassRouterPage,
   RouterOptions,
@@ -46,44 +30,6 @@ class HaConfigAreas extends HassRouterPage {
     },
   };
 
-  @state() private _configEntries: ConfigEntry[] = [];
-
-  @state()
-  private _deviceRegistryEntries: DeviceRegistryEntry[] = [];
-
-  @state()
-  private _entityRegistryEntries: EntityRegistryEntry[] = [];
-
-  @state() private _areas: AreaRegistryEntry[] = [];
-
-  private _unsubs?: UnsubscribeFunc[];
-
-  public connectedCallback() {
-    super.connectedCallback();
-
-    if (!this.hass) {
-      return;
-    }
-    this._loadData();
-  }
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this._unsubs) {
-      while (this._unsubs.length) {
-        this._unsubs.pop()!();
-      }
-      this._unsubs = undefined;
-    }
-  }
-
-  protected updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
-    if (!this._unsubs && changedProps.has("hass")) {
-      this._loadData();
-    }
-  }
-
   protected updatePageEl(pageEl) {
     pageEl.hass = this.hass;
 
@@ -91,37 +37,11 @@ class HaConfigAreas extends HassRouterPage {
       pageEl.areaId = this.routeTail.path.substr(1);
     }
 
-    pageEl.entries = this._configEntries;
-    pageEl.devices = this._deviceRegistryEntries;
-    pageEl.entities = this._entityRegistryEntries;
-    pageEl.areas = this._areas;
     pageEl.narrow = this.narrow;
     pageEl.isWide = this.isWide;
     pageEl.showAdvanced = this.showAdvanced;
     pageEl.route = this.routeTail;
   }
-
-  private _loadData() {
-    getConfigEntries(this.hass).then((configEntries) => {
-      this._configEntries = configEntries.sort((conf1, conf2) =>
-        stringCompare(conf1.title, conf2.title)
-      );
-    });
-    if (this._unsubs) {
-      return;
-    }
-    this._unsubs = [
-      subscribeAreaRegistry(this.hass.connection, (areas) => {
-        this._areas = areas;
-      }),
-      subscribeDeviceRegistry(this.hass.connection, (entries) => {
-        this._deviceRegistryEntries = entries;
-      }),
-      subscribeEntityRegistry(this.hass.connection, (entries) => {
-        this._entityRegistryEntries = entries;
-      }),
-    ];
-  }
 }
 
 declare global {

src/panels/config/devices/device-detail/integration-elements/mqtt/device-actions.ts

@@ -0,0 +1,13 @@
+import type { DeviceRegistryEntry } from "../../../../../../data/device_registry";
+import type { DeviceAction } from "../../../ha-config-device-page";
+import { showMQTTDeviceDebugInfoDialog } from "./show-dialog-mqtt-device-debug-info";
+
+export const getMQTTDeviceActions = (
+  el: HTMLElement,
+  device: DeviceRegistryEntry
+): DeviceAction[] => [
+  {
+    label: "MQTT Info",
+    action: async () => showMQTTDeviceDebugInfoDialog(el, { device }),
+  },
+];

src/panels/config/devices/device-detail/integration-elements/mqtt/ha-device-actions-mqtt.ts

@@ -1,36 +0,0 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
-import { DeviceRegistryEntry } from "../../../../../../data/device_registry";
-import { haStyle } from "../../../../../../resources/styles";
-import { HomeAssistant } from "../../../../../../types";
-import { showMQTTDeviceDebugInfoDialog } from "./show-dialog-mqtt-device-debug-info";
-
-@customElement("ha-device-actions-mqtt")
-export class HaDeviceActionsMqtt extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public device!: DeviceRegistryEntry;
-
-  protected render(): TemplateResult {
-    return html`
-      <mwc-button @click=${this._showDebugInfo}> MQTT Info </mwc-button>
-    `;
-  }
-
-  private async _showDebugInfo(): Promise<void> {
-    const device = this.device;
-    await showMQTTDeviceDebugInfoDialog(this, { device });
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      css`
-        :host {
-          display: flex;
-          justify-content: space-between;
-        }
-      `,
-    ];
-  }
-}

src/panels/config/devices/device-detail/integration-elements/zha/device-actions.ts

@@ -0,0 +1,108 @@
+import { navigate } from "../../../../../../common/navigate";
+import type { DeviceRegistryEntry } from "../../../../../../data/device_registry";
+import { fetchZHADevice } from "../../../../../../data/zha";
+import { showConfirmationDialog } from "../../../../../../dialogs/generic/show-dialog-box";
+import type { HomeAssistant } from "../../../../../../types";
+import { showZHAClusterDialog } from "../../../../integrations/integration-panels/zha/show-dialog-zha-cluster";
+import { showZHADeviceChildrenDialog } from "../../../../integrations/integration-panels/zha/show-dialog-zha-device-children";
+import { showZHADeviceZigbeeInfoDialog } from "../../../../integrations/integration-panels/zha/show-dialog-zha-device-zigbee-info";
+import { showZHAReconfigureDeviceDialog } from "../../../../integrations/integration-panels/zha/show-dialog-zha-reconfigure-device";
+import type { DeviceAction } from "../../../ha-config-device-page";
+
+export const getZHADeviceActions = async (
+  el: HTMLElement,
+  hass: HomeAssistant,
+  device: DeviceRegistryEntry
+): Promise<DeviceAction[]> => {
+  const zigbeeConnection = device.connections.find(
+    (conn) => conn[0] === "zigbee"
+  );
+
+  if (!zigbeeConnection) {
+    return [];
+  }
+
+  const zhaDevice = await fetchZHADevice(hass, zigbeeConnection[1]);
+
+  if (!zhaDevice) {
+    return [];
+  }
+
+  const actions: DeviceAction[] = [];
+
+  if (zhaDevice.device_type !== "Coordinator") {
+    actions.push({
+      label: hass.localize("ui.dialogs.zha_device_info.buttons.reconfigure"),
+      action: () => showZHAReconfigureDeviceDialog(el, { device: zhaDevice }),
+    });
+  }
+
+  if (
+    zhaDevice.power_source === "Mains" &&
+    (zhaDevice.device_type === "Router" ||
+      zhaDevice.device_type === "Coordinator")
+  ) {
+    actions.push(
+      ...[
+        {
+          label: hass.localize("ui.dialogs.zha_device_info.buttons.add"),
+          action: () => navigate(`/config/zha/add/${zhaDevice!.ieee}`),
+        },
+        {
+          label: hass.localize(
+            "ui.dialogs.zha_device_info.buttons.device_children"
+          ),
+          action: () => showZHADeviceChildrenDialog(el, { device: zhaDevice! }),
+        },
+      ]
+    );
+  }
+
+  if (zhaDevice.device_type !== "Coordinator") {
+    actions.push(
+      ...[
+        {
+          label: hass.localize(
+            "ui.dialogs.zha_device_info.buttons.zigbee_information"
+          ),
+          action: () =>
+            showZHADeviceZigbeeInfoDialog(el, { device: zhaDevice }),
+        },
+        {
+          label: hass.localize("ui.dialogs.zha_device_info.buttons.clusters"),
+          action: () => showZHAClusterDialog(el, { device: zhaDevice }),
+        },
+        {
+          label: hass.localize(
+            "ui.dialogs.zha_device_info.buttons.view_in_visualization"
+          ),
+          action: () =>
+            navigate(`/config/zha/visualization/${zhaDevice!.device_reg_id}`),
+        },
+        {
+          label: hass.localize("ui.dialogs.zha_device_info.buttons.remove"),
+          classes: "warning",
+          action: async () => {
+            const confirmed = await showConfirmationDialog(el, {
+              text: hass.localize(
+                "ui.dialogs.zha_device_info.confirmations.remove"
+              ),
+            });
+
+            if (!confirmed) {
+              return;
+            }
+
+            await hass.callService("zha", "remove", {
+              ieee: zhaDevice.ieee,
+            });
+
+            history.back();
+          },
+        },
+      ]
+    );
+  }
+
+  return actions;
+};

src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts

@@ -1,155 +0,0 @@
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { navigate } from "../../../../../../common/navigate";
-import { DeviceRegistryEntry } from "../../../../../../data/device_registry";
-import { fetchZHADevice, ZHADevice } from "../../../../../../data/zha";
-import { showConfirmationDialog } from "../../../../../../dialogs/generic/show-dialog-box";
-import { haStyle } from "../../../../../../resources/styles";
-import { HomeAssistant } from "../../../../../../types";
-import { showZHAClusterDialog } from "../../../../integrations/integration-panels/zha/show-dialog-zha-cluster";
-import { showZHADeviceChildrenDialog } from "../../../../integrations/integration-panels/zha/show-dialog-zha-device-children";
-import { showZHADeviceZigbeeInfoDialog } from "../../../../integrations/integration-panels/zha/show-dialog-zha-device-zigbee-info";
-import { showZHAReconfigureDeviceDialog } from "../../../../integrations/integration-panels/zha/show-dialog-zha-reconfigure-device";
-
-@customElement("ha-device-actions-zha")
-export class HaDeviceActionsZha extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public device!: DeviceRegistryEntry;
-
-  @state() private _zhaDevice?: ZHADevice;
-
-  protected updated(changedProperties: PropertyValues) {
-    if (changedProperties.has("device")) {
-      const zigbeeConnection = this.device.connections.find(
-        (conn) => conn[0] === "zigbee"
-      );
-      if (!zigbeeConnection) {
-        return;
-      }
-      fetchZHADevice(this.hass, zigbeeConnection[1]).then((device) => {
-        this._zhaDevice = device;
-      });
-    }
-  }
-
-  protected render(): TemplateResult {
-    if (!this._zhaDevice) {
-      return html``;
-    }
-    return html`
-      ${this._zhaDevice.device_type !== "Coordinator"
-        ? html`
-            <mwc-button @click=${this._onReconfigureNodeClick}>
-              ${this.hass!.localize(
-                "ui.dialogs.zha_device_info.buttons.reconfigure"
-              )}
-            </mwc-button>
-          `
-        : ""}
-      ${this._zhaDevice.power_source === "Mains" &&
-      (this._zhaDevice.device_type === "Router" ||
-        this._zhaDevice.device_type === "Coordinator")
-        ? html`
-            <mwc-button @click=${this._onAddDevicesClick}>
-              ${this.hass!.localize("ui.dialogs.zha_device_info.buttons.add")}
-            </mwc-button>
-            <mwc-button @click=${this._handleDeviceChildrenClicked}>
-              ${this.hass!.localize(
-                "ui.dialogs.zha_device_info.buttons.device_children"
-              )}
-            </mwc-button>
-          `
-        : ""}
-      ${this._zhaDevice.device_type !== "Coordinator"
-        ? html`
-            <mwc-button @click=${this._handleZigbeeInfoClicked}>
-              ${this.hass!.localize(
-                "ui.dialogs.zha_device_info.buttons.zigbee_information"
-              )}
-            </mwc-button>
-            <mwc-button @click=${this._showClustersDialog}>
-              ${this.hass!.localize(
-                "ui.dialogs.zha_device_info.buttons.clusters"
-              )}
-            </mwc-button>
-            <mwc-button @click=${this._onViewInVisualizationClick}>
-              ${this.hass!.localize(
-                "ui.dialogs.zha_device_info.buttons.view_in_visualization"
-              )}
-            </mwc-button>
-            <mwc-button class="warning" @click=${this._removeDevice}>
-              ${this.hass!.localize(
-                "ui.dialogs.zha_device_info.buttons.remove"
-              )}
-            </mwc-button>
-          `
-        : ""}
-    `;
-  }
-
-  private async _showClustersDialog(): Promise<void> {
-    await showZHAClusterDialog(this, { device: this._zhaDevice! });
-  }
-
-  private async _onReconfigureNodeClick(): Promise<void> {
-    if (!this.hass) {
-      return;
-    }
-    showZHAReconfigureDeviceDialog(this, { device: this._zhaDevice! });
-  }
-
-  private _onAddDevicesClick() {
-    navigate(`/config/zha/add/${this._zhaDevice!.ieee}`);
-  }
-
-  private _onViewInVisualizationClick() {
-    navigate(`/config/zha/visualization/${this._zhaDevice!.device_reg_id}`);
-  }
-
-  private async _handleZigbeeInfoClicked() {
-    showZHADeviceZigbeeInfoDialog(this, { device: this._zhaDevice! });
-  }
-
-  private async _handleDeviceChildrenClicked() {
-    showZHADeviceChildrenDialog(this, { device: this._zhaDevice! });
-  }
-
-  private async _removeDevice() {
-    const confirmed = await showConfirmationDialog(this, {
-      text: this.hass.localize(
-        "ui.dialogs.zha_device_info.confirmations.remove"
-      ),
-    });
-
-    if (!confirmed) {
-      return;
-    }
-
-    await this.hass.callService("zha", "remove", {
-      ieee: this._zhaDevice!.ieee,
-    });
-
-    history.back();
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          align-items: flex-start;
-        }
-      `,
-    ];
-  }
-}

src/panels/config/devices/device-detail/integration-elements/zha/ha-device-info-zha.ts

@@ -7,6 +7,7 @@ import {
   TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import "../../../../../../components/ha-expansion-panel";
 import { DeviceRegistryEntry } from "../../../../../../data/device_registry";
 import { fetchZHADevice, ZHADevice } from "../../../../../../data/zha";
 import { haStyle } from "../../../../../../resources/styles";
@@ -40,38 +41,39 @@ export class HaDeviceActionsZha extends LitElement {
       return html``;
     }
     return html`
-      <h4>Zigbee info</h4>
-      <div>IEEE: ${this._zhaDevice.ieee}</div>
-      <div>Nwk: ${formatAsPaddedHex(this._zhaDevice.nwk)}</div>
-      <div>Device Type: ${this._zhaDevice.device_type}</div>
-      <div>
-        LQI:
-        ${this._zhaDevice.lqi ||
-        this.hass!.localize("ui.dialogs.zha_device_info.unknown")}
-      </div>
-      <div>
-        RSSI:
-        ${this._zhaDevice.rssi ||
-        this.hass!.localize("ui.dialogs.zha_device_info.unknown")}
-      </div>
-      <div>
-        ${this.hass!.localize("ui.dialogs.zha_device_info.last_seen")}:
-        ${this._zhaDevice.last_seen ||
-        this.hass!.localize("ui.dialogs.zha_device_info.unknown")}
-      </div>
-      <div>
-        ${this.hass!.localize("ui.dialogs.zha_device_info.power_source")}:
-        ${this._zhaDevice.power_source ||
-        this.hass!.localize("ui.dialogs.zha_device_info.unknown")}
-      </div>
-      ${this._zhaDevice.quirk_applied
-        ? html`
-            <div>
-              ${this.hass!.localize("ui.dialogs.zha_device_info.quirk")}:
-              ${this._zhaDevice.quirk_class}
-            </div>
-          `
-        : ""}
+      <ha-expansion-panel header="Zigbee info">
+        <div>IEEE: ${this._zhaDevice.ieee}</div>
+        <div>Nwk: ${formatAsPaddedHex(this._zhaDevice.nwk)}</div>
+        <div>Device Type: ${this._zhaDevice.device_type}</div>
+        <div>
+          LQI:
+          ${this._zhaDevice.lqi ||
+          this.hass!.localize("ui.dialogs.zha_device_info.unknown")}
+        </div>
+        <div>
+          RSSI:
+          ${this._zhaDevice.rssi ||
+          this.hass!.localize("ui.dialogs.zha_device_info.unknown")}
+        </div>
+        <div>
+          ${this.hass!.localize("ui.dialogs.zha_device_info.last_seen")}:
+          ${this._zhaDevice.last_seen ||
+          this.hass!.localize("ui.dialogs.zha_device_info.unknown")}
+        </div>
+        <div>
+          ${this.hass!.localize("ui.dialogs.zha_device_info.power_source")}:
+          ${this._zhaDevice.power_source ||
+          this.hass!.localize("ui.dialogs.zha_device_info.unknown")}
+        </div>
+        ${this._zhaDevice.quirk_applied
+          ? html`
+              <div>
+                ${this.hass!.localize("ui.dialogs.zha_device_info.quirk")}:
+                ${this._zhaDevice.quirk_class}
+              </div>
+            `
+          : ""}
+      </ha-expansion-panel>
     `;
   }
 
@@ -86,6 +88,11 @@ export class HaDeviceActionsZha extends LitElement {
           word-break: break-all;
           margin-top: 2px;
         }
+        ha-expansion-panel {
+          --expansion-panel-summary-padding: 0;
+          --expansion-panel-content-padding: 0;
+          padding-top: 4px;
+        }
       `,
     ];
   }

src/panels/config/devices/device-detail/integration-elements/zwave_js/device-actions.ts

@@ -0,0 +1,68 @@
+import { getConfigEntries } from "../../../../../../data/config_entries";
+import { DeviceRegistryEntry } from "../../../../../../data/device_registry";
+import { fetchZwaveNodeStatus } from "../../../../../../data/zwave_js";
+import type { HomeAssistant } from "../../../../../../types";
+import { showZWaveJSHealNodeDialog } from "../../../../integrations/integration-panels/zwave_js/show-dialog-zwave_js-heal-node";
+import { showZWaveJSReinterviewNodeDialog } from "../../../../integrations/integration-panels/zwave_js/show-dialog-zwave_js-reinterview-node";
+import { showZWaveJSRemoveFailedNodeDialog } from "../../../../integrations/integration-panels/zwave_js/show-dialog-zwave_js-remove-failed-node";
+import type { DeviceAction } from "../../../ha-config-device-page";
+
+export const getZwaveDeviceActions = async (
+  el: HTMLElement,
+  hass: HomeAssistant,
+  device: DeviceRegistryEntry
+): Promise<DeviceAction[]> => {
+  const configEntries = await getConfigEntries(hass, {
+    domain: "zwave_js",
+  });
+
+  const configEntry = configEntries.find((entry) =>
+    device.config_entries.includes(entry.entry_id)
+  );
+
+  if (!configEntry) {
+    return [];
+  }
+
+  const entryId = configEntry.entry_id;
+
+  const node = await fetchZwaveNodeStatus(hass, device.id);
+
+  if (!node || node.is_controller_node) {
+    return [];
+  }
+
+  return [
+    {
+      label: hass.localize(
+        "ui.panel.config.zwave_js.device_info.device_config"
+      ),
+      href: `/config/zwave_js/node_config/${device.id}?config_entry=${entryId}`,
+    },
+    {
+      label: hass.localize(
+        "ui.panel.config.zwave_js.device_info.reinterview_device"
+      ),
+      action: () =>
+        showZWaveJSReinterviewNodeDialog(el, {
+          device_id: device.id,
+        }),
+    },
+    {
+      label: hass.localize("ui.panel.config.zwave_js.device_info.heal_node"),
+      action: () =>
+        showZWaveJSHealNodeDialog(el, {
+          device: device,
+        }),
+    },
+    {
+      label: hass.localize(
+        "ui.panel.config.zwave_js.device_info.remove_failed"
+      ),
+      action: () =>
+        showZWaveJSRemoveFailedNodeDialog(el, {
+          device_id: device.id,
+        }),
+    },
+  ];
+};

src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-actions-zwave_js.ts

@@ -1,139 +0,0 @@
-import "@material/mwc-button/mwc-button";
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { DeviceRegistryEntry } from "../../../../../../data/device_registry";
-import {
-  fetchZwaveNodeStatus,
-  getZwaveJsIdentifiersFromDevice,
-  ZWaveJSNodeIdentifiers,
-  ZWaveJSNodeStatus,
-} from "../../../../../../data/zwave_js";
-import { haStyle } from "../../../../../../resources/styles";
-import { HomeAssistant } from "../../../../../../types";
-import { showZWaveJSReinterviewNodeDialog } from "../../../../integrations/integration-panels/zwave_js/show-dialog-zwave_js-reinterview-node";
-import { showZWaveJSHealNodeDialog } from "../../../../integrations/integration-panels/zwave_js/show-dialog-zwave_js-heal-node";
-import { showZWaveJSRemoveFailedNodeDialog } from "../../../../integrations/integration-panels/zwave_js/show-dialog-zwave_js-remove-failed-node";
-
-@customElement("ha-device-actions-zwave_js")
-export class HaDeviceActionsZWaveJS extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public device!: DeviceRegistryEntry;
-
-  @state() private _entryId?: string;
-
-  @state() private _nodeId?: number;
-
-  @state() private _node?: ZWaveJSNodeStatus;
-
-  protected updated(changedProperties: PropertyValues) {
-    if (changedProperties.has("device")) {
-      const identifiers: ZWaveJSNodeIdentifiers | undefined =
-        getZwaveJsIdentifiersFromDevice(this.device);
-      if (!identifiers) {
-        return;
-      }
-      this._nodeId = identifiers.node_id;
-      this._entryId = this.device.config_entries[0];
-
-      this._fetchNodeDetails();
-    }
-  }
-
-  protected async _fetchNodeDetails() {
-    if (!this._nodeId || !this._entryId) {
-      return;
-    }
-
-    this._node = await fetchZwaveNodeStatus(
-      this.hass,
-      this._entryId,
-      this._nodeId
-    );
-  }
-
-  protected render(): TemplateResult {
-    if (!this._node) {
-      return html``;
-    }
-    return html`
-      ${!this._node.is_controller_node
-        ? html`
-            <a
-              .href=${`/config/zwave_js/node_config/${this.device.id}?config_entry=${this._entryId}`}
-            >
-              <mwc-button>
-                ${this.hass.localize(
-                  "ui.panel.config.zwave_js.device_info.device_config"
-                )}
-              </mwc-button>
-            </a>
-            <mwc-button @click=${this._reinterviewClicked}>
-              ${this.hass.localize(
-                "ui.panel.config.zwave_js.device_info.reinterview_device"
-              )}
-            </mwc-button>
-            <mwc-button @click=${this._healNodeClicked}>
-              ${this.hass.localize(
-                "ui.panel.config.zwave_js.device_info.heal_node"
-              )}
-            </mwc-button>
-            <mwc-button @click=${this._removeFailedNode}>
-              ${this.hass.localize(
-                "ui.panel.config.zwave_js.device_info.remove_failed"
-              )}
-            </mwc-button>
-          `
-        : ""}
-    `;
-  }
-
-  private async _reinterviewClicked() {
-    if (!this._nodeId || !this._entryId) {
-      return;
-    }
-    showZWaveJSReinterviewNodeDialog(this, {
-      entry_id: this._entryId,
-      node_id: this._nodeId,
-    });
-  }
-
-  private async _healNodeClicked() {
-    if (!this._nodeId || !this._entryId) {
-      return;
-    }
-    showZWaveJSHealNodeDialog(this, {
-      entry_id: this._entryId,
-      node_id: this._nodeId,
-      device: this.device,
-    });
-  }
-
-  private async _removeFailedNode() {
-    if (!this._nodeId || !this._entryId) {
-      return;
-    }
-    showZWaveJSRemoveFailedNodeDialog(this, {
-      entry_id: this._entryId,
-      node_id: this._nodeId,
-    });
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      css`
-        a {
-          text-decoration: none;
-        }
-      `,
-    ];
-  }
-}

src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-alerts-zwave_js.ts

@@ -0,0 +1,52 @@
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { DeviceRegistryEntry } from "../../../../../../data/device_registry";
+import {
+  ZwaveJSNodeComments,
+  fetchZwaveNodeComments,
+} from "../../../../../../data/zwave_js";
+import { HomeAssistant } from "../../../../../../types";
+
+@customElement("ha-device-alerts-zwave_js")
+export class HaDeviceAlertsZWaveJS extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public device!: DeviceRegistryEntry;
+
+  @state() private _nodeComments?: ZwaveJSNodeComments;
+
+  protected willUpdate(changedProperties: PropertyValues) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("device")) {
+      this._fetchNodeDetails();
+    }
+  }
+
+  private async _fetchNodeDetails() {
+    this._nodeComments = await fetchZwaveNodeComments(
+      this.hass,
+      this.device.id
+    );
+  }
+
+  protected render(): TemplateResult {
+    if (this._nodeComments && this._nodeComments.comments?.length > 0) {
+      return html`
+        <div>
+          ${this._nodeComments.comments.map(
+            (comment) => html`<ha-alert .alertType=${comment.level}>
+              ${comment.text}
+            </ha-alert>`
+          )}
+        </div>
+      `;
+    }
+    return html``;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-device-alerts-zwave_js": HaDeviceAlertsZWaveJS;
+  }
+}

src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-info-zwave_js.ts

@@ -7,18 +7,17 @@ import {
   TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { DeviceRegistryEntry } from "../../../../../../data/device_registry";
+import "../../../../../../components/ha-expansion-panel";
 import {
   ConfigEntry,
   getConfigEntries,
 } from "../../../../../../data/config_entries";
+import { DeviceRegistryEntry } from "../../../../../../data/device_registry";
 import {
   fetchZwaveNodeStatus,
-  getZwaveJsIdentifiersFromDevice,
   nodeStatus,
-  ZWaveJSNodeStatus,
-  ZWaveJSNodeIdentifiers,
   SecurityClass,
+  ZWaveJSNodeStatus,
 } from "../../../../../../data/zwave_js";
 import { haStyle } from "../../../../../../resources/styles";
 import { HomeAssistant } from "../../../../../../types";
@@ -29,57 +28,41 @@ export class HaDeviceInfoZWaveJS extends LitElement {
 
   @property({ attribute: false }) public device!: DeviceRegistryEntry;
 
-  @state() private _entryId?: string;
-
   @state() private _configEntry?: ConfigEntry;
 
   @state() private _multipleConfigEntries = false;
 
-  @state() private _nodeId?: number;
-
   @state() private _node?: ZWaveJSNodeStatus;
 
-  protected updated(changedProperties: PropertyValues) {
+  public willUpdate(changedProperties: PropertyValues) {
+    super.willUpdate(changedProperties);
     if (changedProperties.has("device")) {
-      const identifiers: ZWaveJSNodeIdentifiers | undefined =
-        getZwaveJsIdentifiersFromDevice(this.device);
-      if (!identifiers) {
-        return;
-      }
-      this._nodeId = identifiers.node_id;
-      this._entryId = this.device.config_entries[0];
-
       this._fetchNodeDetails();
     }
   }
 
   protected async _fetchNodeDetails() {
-    if (!this._nodeId || !this._entryId) {
+    if (!this.device) {
       return;
     }
 
     const configEntries = await getConfigEntries(this.hass, {
       domain: "zwave_js",
     });
-    let zwaveJsConfEntries = 0;
-    for (const entry of configEntries) {
-      if (zwaveJsConfEntries) {
-        this._multipleConfigEntries = true;
-      }
-      if (entry.entry_id === this._entryId) {
-        this._configEntry = entry;
-      }
-      if (this._configEntry && this._multipleConfigEntries) {
-        break;
-      }
-      zwaveJsConfEntries++;
+
+    this._multipleConfigEntries = configEntries.length > 1;
+
+    const configEntry = configEntries.find((entry) =>
+      this.device.config_entries.includes(entry.entry_id)
+    );
+
+    if (!configEntry) {
+      return;
     }
 
-    this._node = await fetchZwaveNodeStatus(
-      this.hass,
-      this._entryId,
-      this._nodeId
-    );
+    this._configEntry = configEntry;
+
+    this._node = await fetchZwaveNodeStatus(this.hass, this.device.id);
   }
 
   protected render(): TemplateResult {
@@ -87,73 +70,76 @@ export class HaDeviceInfoZWaveJS extends LitElement {
       return html``;
     }
     return html`
-      <h4>
-        ${this.hass.localize("ui.panel.config.zwave_js.device_info.zwave_info")}
-      </h4>
-      ${this._multipleConfigEntries
-        ? html`
-            <div>
-              ${this.hass.localize("ui.panel.config.zwave_js.common.source")}:
-              ${this._configEntry!.title}
-            </div>
-          `
-        : ""}
-      <div>
-        ${this.hass.localize("ui.panel.config.zwave_js.common.node_id")}:
-        ${this._node.node_id}
-      </div>
-      ${!this._node.is_controller_node
-        ? html`
-            <div>
-              ${this.hass.localize(
-                "ui.panel.config.zwave_js.device_info.node_status"
-              )}:
-              ${this.hass.localize(
-                `ui.panel.config.zwave_js.node_status.${
-                  nodeStatus[this._node.status]
-                }`
-              )}
-            </div>
-            <div>
-              ${this.hass.localize(
-                "ui.panel.config.zwave_js.device_info.node_ready"
-              )}:
-              ${this._node.ready
-                ? this.hass.localize("ui.common.yes")
-                : this.hass.localize("ui.common.no")}
-            </div>
-            <div>
-              ${this.hass.localize(
-                "ui.panel.config.zwave_js.device_info.highest_security"
-              )}:
-              ${this._node.highest_security_class !== null
-                ? this.hass.localize(
-                    `ui.panel.config.zwave_js.security_classes.${
-                      SecurityClass[this._node.highest_security_class]
-                    }.title`
-                  )
-                : this._node.is_secure === false
-                ? this.hass.localize(
-                    "ui.panel.config.zwave_js.security_classes.none.title"
-                  )
-                : this.hass.localize(
-                    "ui.panel.config.zwave_js.device_info.unknown"
-                  )}
-            </div>
-            <div>
-              ${this.hass.localize(
-                "ui.panel.config.zwave_js.device_info.zwave_plus"
-              )}:
-              ${this._node.zwave_plus_version
-                ? this.hass.localize(
-                    "ui.panel.config.zwave_js.device_info.zwave_plus_version",
-                    "version",
-                    this._node.zwave_plus_version
-                  )
-                : this.hass.localize("ui.common.no")}
-            </div>
-          `
-        : ""}
+      <ha-expansion-panel
+        .header=${this.hass.localize(
+          "ui.panel.config.zwave_js.device_info.zwave_info"
+        )}
+      >
+        ${this._multipleConfigEntries
+          ? html`
+              <div>
+                ${this.hass.localize("ui.panel.config.zwave_js.common.source")}:
+                ${this._configEntry!.title}
+              </div>
+            `
+          : ""}
+        <div>
+          ${this.hass.localize("ui.panel.config.zwave_js.common.node_id")}:
+          ${this._node.node_id}
+        </div>
+        ${!this._node.is_controller_node
+          ? html`
+              <div>
+                ${this.hass.localize(
+                  "ui.panel.config.zwave_js.device_info.node_status"
+                )}:
+                ${this.hass.localize(
+                  `ui.panel.config.zwave_js.node_status.${
+                    nodeStatus[this._node.status]
+                  }`
+                )}
+              </div>
+              <div>
+                ${this.hass.localize(
+                  "ui.panel.config.zwave_js.device_info.node_ready"
+                )}:
+                ${this._node.ready
+                  ? this.hass.localize("ui.common.yes")
+                  : this.hass.localize("ui.common.no")}
+              </div>
+              <div>
+                ${this.hass.localize(
+                  "ui.panel.config.zwave_js.device_info.highest_security"
+                )}:
+                ${this._node.highest_security_class !== null
+                  ? this.hass.localize(
+                      `ui.panel.config.zwave_js.security_classes.${
+                        SecurityClass[this._node.highest_security_class]
+                      }.title`
+                    )
+                  : this._node.is_secure === false
+                  ? this.hass.localize(
+                      "ui.panel.config.zwave_js.security_classes.none.title"
+                    )
+                  : this.hass.localize(
+                      "ui.panel.config.zwave_js.device_info.unknown"
+                    )}
+              </div>
+              <div>
+                ${this.hass.localize(
+                  "ui.panel.config.zwave_js.device_info.zwave_plus"
+                )}:
+                ${this._node.zwave_plus_version
+                  ? this.hass.localize(
+                      "ui.panel.config.zwave_js.device_info.zwave_plus_version",
+                      "version",
+                      this._node.zwave_plus_version
+                    )
+                  : this.hass.localize("ui.common.no")}
+              </div>
+            `
+          : ""}
+      </ha-expansion-panel>
     `;
   }
 
@@ -168,6 +154,11 @@ export class HaDeviceInfoZWaveJS extends LitElement {
           word-break: break-all;
           margin-top: 2px;
         }
+        ha-expansion-panel {
+          --expansion-panel-summary-padding: 0;
+          --expansion-panel-content-padding: 0;
+          padding-top: 4px;
+        }
       `,
     ];
   }

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

@@ -1,4 +1,9 @@
-import { mdiOpenInNew, mdiPencil, mdiPlusCircle } from "@mdi/js";
+import {
+  mdiDotsVertical,
+  mdiOpenInNew,
+  mdiPencil,
+  mdiPlusCircle,
+} from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -13,6 +18,7 @@ import { slugify } from "../../../common/string/slugify";
 import { groupBy } from "../../../common/util/group-by";
 import "../../../components/entity/ha-battery-icon";
 import "../../../components/ha-alert";
+import "../../../components/ha-button-menu";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-next";
 import "../../../components/ha-svg-icon";
@@ -26,14 +32,14 @@ import {
 import {
   computeDeviceName,
   DeviceRegistryEntry,
-  updateDeviceRegistryEntry,
   removeConfigEntryFromDevice,
+  updateDeviceRegistryEntry,
 } from "../../../data/device_registry";
 import {
-  fetchDiagnosticHandler,
-  getDeviceDiagnosticsDownloadUrl,
-  getConfigEntryDiagnosticsDownloadUrl,
   DiagnosticInfo,
+  fetchDiagnosticHandler,
+  getConfigEntryDiagnosticsDownloadUrl,
+  getDeviceDiagnosticsDownloadUrl,
 } from "../../../data/diagnostics";
 import {
   EntityRegistryEntry,
@@ -51,9 +57,10 @@ import {
 import "../../../layouts/hass-error-screen";
 import "../../../layouts/hass-tabs-subpage";
 import { haStyle } from "../../../resources/styles";
-import { HomeAssistant, Route } from "../../../types";
+import type { HomeAssistant, Route } from "../../../types";
 import { brandsUrl } from "../../../util/brands-url";
 import { fileDownload } from "../../../util/file_download";
+import "../../logbook/ha-logbook";
 import "../ha-config-section";
 import { configSections } from "../ha-panel-config";
 import "./device-detail/ha-device-entities-card";
@@ -68,6 +75,14 @@ export interface EntityRegistryStateEntry extends EntityRegistryEntry {
   stateName?: string | null;
 }
 
+export interface DeviceAction {
+  href?: string;
+  action?: (ev: any) => void;
+  label: string;
+  trailingIcon?: string;
+  classes?: string;
+}
+
 @customElement("ha-config-device-page")
 export class HaConfigDevicePage extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -93,11 +108,13 @@ export class HaConfigDevicePage extends LitElement {
   @state() private _related?: RelatedResult;
 
   // If a number, it's the request ID so we make sure we don't show older info
-  @state() private _diagnosticDownloadLinks?:
-    | number
-    | (TemplateResult | string)[];
+  @state() private _diagnosticDownloadLinks?: number | DeviceAction[];
 
-  @state() private _deleteButtons?: (TemplateResult | string)[];
+  @state() private _deleteButtons?: DeviceAction[];
+
+  @state() private _deviceActions?: DeviceAction[];
+
+  private _logbookTime = { recent: 86400 };
 
   private _device = memoizeOne(
     (
@@ -131,6 +148,13 @@ export class HaConfigDevicePage extends LitElement {
         )
   );
 
+  private _deviceIdInList = memoizeOne((deviceId: string) => [deviceId]);
+
+  private _entityIds = memoizeOne(
+    (entries: EntityRegistryStateEntry[]): string[] =>
+      entries.map((entry) => entry.entity_id)
+  );
+
   private _entitiesByCategory = memoizeOne(
     (entities: EntityRegistryEntry[]) => {
       const result = groupBy(entities, (entry) =>
@@ -186,15 +210,17 @@ export class HaConfigDevicePage extends LitElement {
     if (
       changedProps.has("deviceId") ||
       changedProps.has("devices") ||
-      changedProps.has("deviceId") ||
       changedProps.has("entries")
     ) {
       this._diagnosticDownloadLinks = undefined;
       this._deleteButtons = undefined;
+      this._deviceActions = undefined;
     }
 
     if (
-      (this._diagnosticDownloadLinks && this._deleteButtons) ||
+      (this._diagnosticDownloadLinks &&
+        this._deleteButtons &&
+        this._deviceActions) ||
       !this.devices ||
       !this.deviceId ||
       !this.entries
@@ -204,129 +230,10 @@ export class HaConfigDevicePage extends LitElement {
 
     this._diagnosticDownloadLinks = Math.random();
     this._deleteButtons = []; // To prevent re-rendering if no delete buttons
-    this._renderDiagnosticButtons(this._diagnosticDownloadLinks);
-    this._renderDeleteButtons();
-  }
-
-  private async _renderDiagnosticButtons(requestId: number): Promise<void> {
-    if (!isComponentLoaded(this.hass, "diagnostics")) {
-      return;
-    }
-
-    const device = this._device(this.deviceId, this.devices);
-
-    if (!device) {
-      return;
-    }
-
-    let links = await Promise.all(
-      this._integrations(device, this.entries).map(
-        async (entry): Promise<boolean | { link: string; domain: string }> => {
-          if (entry.state !== "loaded") {
-            return false;
-          }
-          let info: DiagnosticInfo;
-          try {
-            info = await fetchDiagnosticHandler(this.hass, entry.domain);
-          } catch (err: any) {
-            if (err.code === "not_found") {
-              return false;
-            }
-            throw err;
-          }
-
-          if (!info.handlers.device && !info.handlers.config_entry) {
-            return false;
-          }
-          return {
-            link: info.handlers.device
-              ? getDeviceDiagnosticsDownloadUrl(entry.entry_id, this.deviceId)
-              : getConfigEntryDiagnosticsDownloadUrl(entry.entry_id),
-            domain: entry.domain,
-          };
-        }
-      )
-    );
-
-    links = links.filter(Boolean);
-
-    if (this._diagnosticDownloadLinks !== requestId) {
-      return;
-    }
-    if (links.length > 0) {
-      this._diagnosticDownloadLinks = (
-        links as { link: string; domain: string }[]
-      ).map(
-        (link) => html`
-          <a href=${link.link} @click=${this._signUrl}>
-            <mwc-button>
-              ${links.length > 1
-                ? this.hass.localize(
-                    `ui.panel.config.devices.download_diagnostics_integration`,
-                    {
-                      integration: domainToName(
-                        this.hass.localize,
-                        link.domain
-                      ),
-                    }
-                  )
-                : this.hass.localize(
-                    `ui.panel.config.devices.download_diagnostics`
-                  )}
-            </mwc-button>
-          </a>
-        `
-      );
-    }
-  }
-
-  private _renderDeleteButtons() {
-    const device = this._device(this.deviceId, this.devices);
-
-    if (!device) {
-      return;
-    }
-
-    const buttons: TemplateResult[] = [];
-    this._integrations(device, this.entries).forEach((entry) => {
-      if (entry.state !== "loaded" || !entry.supports_remove_device) {
-        return;
-      }
-      buttons.push(html`
-        <mwc-button
-          class="warning"
-          .entryId=${entry.entry_id}
-          @click=${this._confirmDeleteEntry}
-        >
-          ${buttons.length > 1
-            ? this.hass.localize(
-                `ui.panel.config.devices.delete_device_integration`,
-                {
-                  integration: domainToName(this.hass.localize, entry.domain),
-                }
-              )
-            : this.hass.localize(`ui.panel.config.devices.delete_device`)}
-        </mwc-button>
-      `);
-    });
-
-    if (buttons.length > 0) {
-      this._deleteButtons = buttons;
-    }
-  }
-
-  private async _confirmDeleteEntry(e: MouseEvent): Promise<void> {
-    const entryId = (e.currentTarget as any).entryId;
-
-    const confirmed = await showConfirmationDialog(this, {
-      text: this.hass.localize("ui.panel.config.devices.confirm_delete"),
-    });
-
-    if (!confirmed) {
-      return;
-    }
-
-    await removeConfigEntryFromDevice(this.hass!, this.deviceId, entryId);
+    this._deviceActions = [];
+    this._getDiagnosticButtons(this._diagnosticDownloadLinks);
+    this._getDeleteActions();
+    this._getDeviceActions();
   }
 
   protected firstUpdated(changedProps) {
@@ -371,14 +278,18 @@ export class HaConfigDevicePage extends LitElement {
       : undefined;
     const area = this._computeArea(this.areas, device);
 
-    const configurationUrlIsHomeAssistant =
-      device.configuration_url?.startsWith("homeassistant://") || false;
-
-    const configurationUrl = configurationUrlIsHomeAssistant
-      ? device.configuration_url!.replace("homeassistant://", "/")
-      : device.configuration_url;
-
     const deviceInfo: TemplateResult[] = [];
+    const deviceAlerts: TemplateResult[] = [];
+
+    const actions = [...(this._deviceActions || [])];
+    if (Array.isArray(this._diagnosticDownloadLinks)) {
+      actions.push(...this._diagnosticDownloadLinks);
+    }
+    if (this._deleteButtons) {
+      actions.push(...this._deleteButtons);
+    }
+
+    const firstDeviceAction = actions.shift();
 
     if (device.disabled_by) {
       deviceInfo.push(
@@ -397,53 +308,19 @@ export class HaConfigDevicePage extends LitElement {
             )}
           </ha-alert>
           ${device.disabled_by === "user"
-            ? html` <div class="card-actions" slot="actions">
-                <mwc-button unelevated @click=${this._enableDevice}>
-                  ${this.hass.localize("ui.common.enable")}
-                </mwc-button>
-              </div>`
+            ? html`
+                <div class="card-actions" slot="actions">
+                  <mwc-button unelevated @click=${this._enableDevice}>
+                    ${this.hass.localize("ui.common.enable")}
+                  </mwc-button>
+                </div>
+              `
             : ""}
         `
       );
     }
 
-    const deviceActions: (TemplateResult | string)[] = [];
-
-    if (configurationUrl) {
-      deviceActions.push(html`
-        <a
-          href=${configurationUrl}
-          rel="noopener noreferrer"
-          .target=${configurationUrlIsHomeAssistant ? "_self" : "_blank"}
-        >
-          <mwc-button>
-            ${this.hass.localize(
-              `ui.panel.config.devices.open_configuration_url_${
-                device.entry_type || "device"
-              }`
-            )}
-            <ha-svg-icon
-              .path=${mdiOpenInNew}
-              slot="trailingIcon"
-            ></ha-svg-icon>
-          </mwc-button>
-        </a>
-      `);
-    }
-
-    this._renderIntegrationInfo(
-      device,
-      integrations,
-      deviceInfo,
-      deviceActions
-    );
-
-    if (Array.isArray(this._diagnosticDownloadLinks)) {
-      deviceActions.push(...this._diagnosticDownloadLinks);
-    }
-    if (this._deleteButtons) {
-      deviceActions.push(...this._deleteButtons);
-    }
+    this._renderIntegrationInfo(device, integrations, deviceInfo, deviceAlerts);
 
     return html`
       <hass-tabs-subpage
@@ -467,10 +344,6 @@ export class HaConfigDevicePage extends LitElement {
               `
             : ""
         }
-
-
-
-
         <div class="container">
           <div class="header fullwidth">
             ${
@@ -537,6 +410,11 @@ export class HaConfigDevicePage extends LitElement {
                 </div>
           </div>
           <div class="column">
+              ${
+                deviceAlerts.length
+                  ? html` <div class="fullwidth">${deviceAlerts}</div> `
+                  : ""
+              }
               <ha-device-info-card
                 .hass=${this.hass}
                 .areas=${this.areas}
@@ -545,37 +423,70 @@ export class HaConfigDevicePage extends LitElement {
               >
                 ${deviceInfo}
                 ${
-                  deviceActions.length
+                  firstDeviceAction || actions.length
                     ? html`
                         <div class="card-actions" slot="actions">
-                          ${deviceActions}
+                          <div>
+                            <a href=${ifDefined(firstDeviceAction!.href)}>
+                              <mwc-button
+                                class=${ifDefined(firstDeviceAction!.classes)}
+                                .action=${firstDeviceAction!.action}
+                                @click=${this._deviceActionClicked}
+                              >
+                                ${firstDeviceAction!.label}
+                                ${firstDeviceAction!.trailingIcon
+                                  ? html`
+                                      <ha-svg-icon
+                                        .path=${firstDeviceAction!.trailingIcon}
+                                        slot="trailingIcon"
+                                      ></ha-svg-icon>
+                                    `
+                                  : ""}
+                              </mwc-button>
+                            </a>
+                          </div>
+
+                          ${actions.length
+                            ? html`
+                                <ha-button-menu corner="BOTTOM_START">
+                                  <ha-icon-button
+                                    slot="trigger"
+                                    .label=${this.hass.localize(
+                                      "ui.common.menu"
+                                    )}
+                                    .path=${mdiDotsVertical}
+                                  ></ha-icon-button>
+                                  ${actions.map(
+                                    (deviceAction) => html`
+                                      <a href=${ifDefined(deviceAction.href)}>
+                                        <mwc-list-item
+                                          class=${ifDefined(
+                                            deviceAction.classes
+                                          )}
+                                          .action=${deviceAction.action}
+                                          @click=${this._deviceActionClicked}
+                                        >
+                                          ${deviceAction.label}
+                                          ${deviceAction.trailingIcon
+                                            ? html`
+                                                <ha-svg-icon
+                                                  .path=${deviceAction.trailingIcon}
+                                                ></ha-svg-icon>
+                                              `
+                                            : ""}
+                                        </mwc-list-item>
+                                      </a>
+                                    `
+                                  )}
+                                </ha-button-menu>
+                              `
+                            : ""}
                         </div>
                       `
                     : ""
                 }
               </ha-device-info-card>
-          </div>
-          <div class="column">
-            ${["control", "sensor", "config", "diagnostic"].map((category) =>
-              // Make sure we render controls if no other cards will be rendered
-              entitiesByCategory[category].length > 0 ||
-              (entities.length === 0 && category === "control")
-                ? html`
-                    <ha-device-entities-card
-                      .hass=${this.hass}
-                      .header=${this.hass.localize(
-                        `ui.panel.config.devices.entities.${category}`
-                      )}
-                      .deviceName=${deviceName}
-                      .entities=${entitiesByCategory[category]}
-                      .showHidden=${device.disabled_by !== null}
-                    >
-                    </ha-device-entities-card>
-                  `
-                : ""
-            )}
-          </div>
-          <div class="column">
+
             ${
               isComponentLoaded(this.hass, "automation")
                 ? html`
@@ -844,12 +755,227 @@ export class HaConfigDevicePage extends LitElement {
                     `
                   : ""
               }
+          </div>
+          <div class="column">
+            ${["control", "sensor", "config", "diagnostic"].map((category) =>
+              // Make sure we render controls if no other cards will be rendered
+              entitiesByCategory[category].length > 0 ||
+              (entities.length === 0 && category === "control")
+                ? html`
+                    <ha-device-entities-card
+                      .hass=${this.hass}
+                      .header=${this.hass.localize(
+                        `ui.panel.config.devices.entities.${category}`
+                      )}
+                      .deviceName=${deviceName}
+                      .entities=${entitiesByCategory[category]}
+                      .showHidden=${device.disabled_by !== null}
+                    >
+                    </ha-device-entities-card>
+                  `
+                : ""
+            )}
+          </div>
+          <div class="column">
+            ${
+              isComponentLoaded(this.hass, "logbook")
+                ? html`
+                    <ha-card outlined>
+                      <h1 class="card-header">
+                        ${this.hass.localize("panel.logbook")}
+                      </h1>
+                      <ha-logbook
+                        .hass=${this.hass}
+                        .time=${this._logbookTime}
+                        .entityIds=${this._entityIds(entities)}
+                        .deviceIds=${this._deviceIdInList(this.deviceId)}
+                        virtualize
+                        narrow
+                        no-icon
+                      ></ha-logbook>
+                    </ha-card>
+                  `
+                : ""
+            }
             </div>
           </div>
         </ha-config-section>
       </hass-tabs-subpage>    `;
   }
 
+  private async _getDiagnosticButtons(requestId: number): Promise<void> {
+    if (!isComponentLoaded(this.hass, "diagnostics")) {
+      return;
+    }
+
+    const device = this._device(this.deviceId, this.devices);
+
+    if (!device) {
+      return;
+    }
+
+    let links = await Promise.all(
+      this._integrations(device, this.entries).map(
+        async (entry): Promise<boolean | { link: string; domain: string }> => {
+          if (entry.state !== "loaded") {
+            return false;
+          }
+          let info: DiagnosticInfo;
+          try {
+            info = await fetchDiagnosticHandler(this.hass, entry.domain);
+          } catch (err: any) {
+            if (err.code === "not_found") {
+              return false;
+            }
+            throw err;
+          }
+
+          if (!info.handlers.device && !info.handlers.config_entry) {
+            return false;
+          }
+          return {
+            link: info.handlers.device
+              ? getDeviceDiagnosticsDownloadUrl(entry.entry_id, this.deviceId)
+              : getConfigEntryDiagnosticsDownloadUrl(entry.entry_id),
+            domain: entry.domain,
+          };
+        }
+      )
+    );
+
+    links = links.filter(Boolean);
+
+    if (this._diagnosticDownloadLinks !== requestId) {
+      return;
+    }
+    if (links.length > 0) {
+      this._diagnosticDownloadLinks = (
+        links as { link: string; domain: string }[]
+      ).map((link) => ({
+        href: link.link,
+        action: (ev) => this._signUrl(ev),
+        label:
+          links.length > 1
+            ? this.hass.localize(
+                `ui.panel.config.devices.download_diagnostics_integration`,
+                {
+                  integration: domainToName(this.hass.localize, link.domain),
+                }
+              )
+            : this.hass.localize(
+                `ui.panel.config.devices.download_diagnostics`
+              ),
+      }));
+    }
+  }
+
+  private _getDeleteActions() {
+    const device = this._device(this.deviceId, this.devices);
+
+    if (!device) {
+      return;
+    }
+
+    const buttons: DeviceAction[] = [];
+    this._integrations(device, this.entries).forEach((entry) => {
+      if (entry.state !== "loaded" || !entry.supports_remove_device) {
+        return;
+      }
+      buttons.push({
+        action: async () => {
+          const confirmed = await showConfirmationDialog(this, {
+            text: this.hass.localize("ui.panel.config.devices.confirm_delete"),
+          });
+
+          if (!confirmed) {
+            return;
+          }
+
+          await removeConfigEntryFromDevice(
+            this.hass!,
+            this.deviceId,
+            entry.entry_id
+          );
+        },
+        classes: "warning",
+        label:
+          buttons.length > 1
+            ? this.hass.localize(
+                `ui.panel.config.devices.delete_device_integration`,
+                {
+                  integration: domainToName(this.hass.localize, entry.domain),
+                }
+              )
+            : this.hass.localize(`ui.panel.config.devices.delete_device`),
+      });
+    });
+
+    if (buttons.length > 0) {
+      this._deleteButtons = buttons;
+    }
+  }
+
+  private async _getDeviceActions() {
+    const device = this._device(this.deviceId, this.devices);
+
+    if (!device) {
+      return;
+    }
+
+    const deviceActions: DeviceAction[] = [];
+
+    const configurationUrlIsHomeAssistant =
+      device.configuration_url?.startsWith("homeassistant://") || false;
+
+    const configurationUrl = configurationUrlIsHomeAssistant
+      ? device.configuration_url!.replace("homeassistant://", "/")
+      : device.configuration_url;
+
+    if (configurationUrl) {
+      deviceActions.push({
+        href: configurationUrl,
+        label: this.hass.localize(
+          `ui.panel.config.devices.open_configuration_url_${
+            device.entry_type || "device"
+          }`
+        ),
+        trailingIcon: mdiOpenInNew,
+      });
+    }
+
+    const domains = this._integrations(device, this.entries).map(
+      (int) => int.domain
+    );
+
+    if (domains.includes("mqtt")) {
+      const mqtt = await import(
+        "./device-detail/integration-elements/mqtt/device-actions"
+      );
+      const actions = mqtt.getMQTTDeviceActions(this, device);
+      deviceActions.push(...actions);
+    }
+    if (domains.includes("zha")) {
+      const zha = await import(
+        "./device-detail/integration-elements/zha/device-actions"
+      );
+      const actions = await zha.getZHADeviceActions(this, this.hass, device);
+      deviceActions.push(...actions);
+    }
+    if (domains.includes("zwave_js")) {
+      const zwave = await import(
+        "./device-detail/integration-elements/zwave_js/device-actions"
+      );
+      const actions = await zwave.getZwaveDeviceActions(
+        this,
+        this.hass,
+        device
+      );
+      deviceActions.push(...actions);
+    }
+
+    this._deviceActions = deviceActions;
+  }
+
   private _computeEntityName(entity: EntityRegistryEntry) {
     if (entity.name) {
       return entity.name;
@@ -895,26 +1021,13 @@ export class HaConfigDevicePage extends LitElement {
   }
 
   private _renderIntegrationInfo(
-    device,
+    device: DeviceRegistryEntry,
     integrations: ConfigEntry[],
     deviceInfo: TemplateResult[],
-    deviceActions: (string | TemplateResult)[]
-  ): TemplateResult[] {
+    deviceAlerts: TemplateResult[]
+  ) {
     const domains = integrations.map((int) => int.domain);
-    const templates: TemplateResult[] = [];
-    if (domains.includes("mqtt")) {
-      import(
-        "./device-detail/integration-elements/mqtt/ha-device-actions-mqtt"
-      );
-      deviceActions.push(html`
-        <ha-device-actions-mqtt
-          .hass=${this.hass}
-          .device=${device}
-        ></ha-device-actions-mqtt>
-      `);
-    }
     if (domains.includes("zha")) {
-      import("./device-detail/integration-elements/zha/ha-device-actions-zha");
       import("./device-detail/integration-elements/zha/ha-device-info-zha");
       deviceInfo.push(html`
         <ha-device-info-zha
@@ -922,34 +1035,27 @@ export class HaConfigDevicePage extends LitElement {
           .device=${device}
         ></ha-device-info-zha>
       `);
-      deviceActions.push(html`
-        <ha-device-actions-zha
-          .hass=${this.hass}
-          .device=${device}
-        ></ha-device-actions-zha>
-      `);
     }
     if (domains.includes("zwave_js")) {
       import(
-        "./device-detail/integration-elements/zwave_js/ha-device-info-zwave_js"
+        "./device-detail/integration-elements/zwave_js/ha-device-alerts-zwave_js"
       );
       import(
-        "./device-detail/integration-elements/zwave_js/ha-device-actions-zwave_js"
+        "./device-detail/integration-elements/zwave_js/ha-device-info-zwave_js"
       );
+      deviceAlerts.push(html`
+        <ha-device-alerts-zwave_js
+          .hass=${this.hass}
+          .device=${device}
+        ></ha-device-alerts-zwave_js>
+      `);
       deviceInfo.push(html`
         <ha-device-info-zwave_js
           .hass=${this.hass}
           .device=${device}
         ></ha-device-info-zwave_js>
       `);
-      deviceActions.push(html`
-        <ha-device-actions-zwave_js
-          .hass=${this.hass}
-          .device=${device}
-        ></ha-device-actions-zwave_js>
-      `);
     }
-    return templates;
   }
 
   private async _showSettings() {
@@ -1087,8 +1193,7 @@ export class HaConfigDevicePage extends LitElement {
   }
 
   private async _signUrl(ev) {
-    const anchor = ev.target.closest("a");
-    ev.preventDefault();
+    const anchor = ev.currentTarget.closest("a");
     const signedUrl = await getSignedPath(
       this.hass,
       anchor.getAttribute("href")
@@ -1096,6 +1201,16 @@ export class HaConfigDevicePage extends LitElement {
     fileDownload(signedUrl.path);
   }
 
+  private _deviceActionClicked(ev) {
+    if (!ev.currentTarget.action) {
+      return;
+    }
+
+    ev.preventDefault();
+
+    (ev.currentTarget as any).action(ev);
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -1126,9 +1241,6 @@ export class HaConfigDevicePage extends LitElement {
           padding: 16px;
         }
 
-        .show-more {
-        }
-
         h1 {
           margin: 0;
           font-family: var(--paper-font-headline_-_font-family);
@@ -1151,6 +1263,8 @@ export class HaConfigDevicePage extends LitElement {
           display: flex;
           align-items: center;
           padding-left: 8px;
+          padding-inline-start: 8px;
+          direction: var(--direction);
         }
 
         .column,
@@ -1228,7 +1342,26 @@ export class HaConfigDevicePage extends LitElement {
         .items {
           padding-bottom: 16px;
         }
+
+        ha-logbook {
+          height: 400px;
+        }
+        :host([narrow]) ha-logbook {
+          height: 235px;
+        }
+
+        .card-actions {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
       `,
     ];
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-config-device-page": HaConfigDevicePage;
+  }
+}

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

@@ -541,7 +541,9 @@ export class HaConfigDeviceDashboard extends LitElement {
         .clear {
           color: var(--primary-color);
           padding-left: 8px;
+          padding-inline-start: 8px;
           text-transform: uppercase;
+          direction: var(--direction);
         }
       `,
       haStyle,

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

@@ -107,10 +107,16 @@ export class EnergyBatterySettings extends LitElement {
                   >
                 </div>
                 <ha-icon-button
+                  .label=${this.hass.localize(
+                    "ui.panel.config.energy.battery.edit_battery_system"
+                  )}
                   @click=${this._editSource}
                   .path=${mdiPencil}
                 ></ha-icon-button>
                 <ha-icon-button
+                  .label=${this.hass.localize(
+                    "ui.panel.config.energy.battery.delete_battery_system"
+                  )}
                   @click=${this._deleteSource}
                   .path=${mdiDelete}
                 ></ha-icon-button>

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

@@ -94,10 +94,16 @@ export class EnergyGasSettings extends LitElement {
                     : source.stat_energy_from}</span
                 >
                 <ha-icon-button
+                  .label=${this.hass.localize(
+                    "ui.panel.config.energy.gas.edit_gas_source"
+                  )}
                   @click=${this._editSource}
                   .path=${mdiPencil}
                 ></ha-icon-button>
                 <ha-icon-button
+                  .label=${this.hass.localize(
+                    "ui.panel.config.energy.gas.delete_gas_source"
+                  )}
                   @click=${this._deleteSource}
                   .path=${mdiDelete}
                 ></ha-icon-button>

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

@@ -132,10 +132,16 @@ export class EnergyGridSettings extends LitElement {
                     : flow.stat_energy_from}</span
                 >
                 <ha-icon-button
+                  .label=${this.hass.localize(
+                    "ui.panel.config.energy.grid.edit_consumption"
+                  )}
                   @click=${this._editFromSource}
                   .path=${mdiPencil}
                 ></ha-icon-button>
                 <ha-icon-button
+                  .label=${this.hass.localize(
+                    "ui.panel.config.energy.grid.delete_consumption"
+                  )}
                   @click=${this._deleteFromSource}
                   .path=${mdiDelete}
                 ></ha-icon-button>
@@ -171,10 +177,16 @@ export class EnergyGridSettings extends LitElement {
                     : flow.stat_energy_to}</span
                 >
                 <ha-icon-button
+                  .label=${this.hass.localize(
+                    "ui.panel.config.energy.grid.edit_return"
+                  )}
                   @click=${this._editToSource}
                   .path=${mdiPencil}
                 ></ha-icon-button>
                 <ha-icon-button
+                  .label=${this.hass.localize(
+                    "ui.panel.config.energy.grid.delete_return"
+                  )}
                   @click=${this._deleteToSource}
                   .path=${mdiDelete}
                 ></ha-icon-button>
@@ -212,6 +224,9 @@ export class EnergyGridSettings extends LitElement {
                   <ha-icon-button .path=${mdiPencil}></ha-icon-button>
                 </a>
                 <ha-icon-button
+                  .label=${this.hass.localize(
+                    "ui.panel.config.energy.grid.remove_co2_signal"
+                  )}
                   @click=${this._removeCO2Sensor}
                   .path=${mdiDelete}
                 ></ha-icon-button>

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

@@ -104,12 +104,18 @@ export class EnergySolarSettings extends LitElement {
                 ${this.info
                   ? html`
                       <ha-icon-button
+                        .label=${this.hass.localize(
+                          "ui.panel.config.energy.solar.edit_solar_production"
+                        )}
                         @click=${this._editSource}
                         .path=${mdiPencil}
                       ></ha-icon-button>
                     `
                   : ""}
                 <ha-icon-button
+                  .label=${this.hass.localize(
+                    "ui.panel.config.energy.solar.delete_solar_production"
+                  )}
                   @click=${this._deleteSource}
                   .path=${mdiDelete}
                 ></ha-icon-button>

src/panels/config/entities/entity-registry-settings.ts

@@ -12,10 +12,12 @@ import {
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { domainIcon } from "../../../common/entity/domain_icon";
+import { supportsFeature } from "../../../common/entity/supports-feature";
 import { stringCompare } from "../../../common/string/compare";
 import { LocalizeFunc } from "../../../common/translations/localize";
 import "../../../components/ha-alert";
@@ -24,8 +26,17 @@ import "../../../components/ha-expansion-panel";
 import "../../../components/ha-icon-picker";
 import "../../../components/ha-radio";
 import "../../../components/ha-select";
+import "../../../components/ha-settings-row";
 import "../../../components/ha-switch";
+import type { HaSwitch } from "../../../components/ha-switch";
 import "../../../components/ha-textfield";
+import {
+  CameraPreferences,
+  CAMERA_SUPPORT_STREAM,
+  fetchCameraPrefs,
+  STREAM_TYPE_HLS,
+  updateCameraPrefs,
+} from "../../../data/camera";
 import {
   ConfigEntry,
   deleteConfigEntry,
@@ -133,6 +144,8 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
 
   @state() private _submitting?: boolean;
 
+  @state() private _cameraPrefs?: CameraPreferences;
+
   private _origEntityId!: string;
 
   private _deviceLookup?: Record<string, DeviceRegistryEntry>;
@@ -190,6 +203,20 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
 
     const domain = computeDomain(this.entry.entity_id);
 
+    if (domain === "camera" && isComponentLoaded(this.hass, "stream")) {
+      const stateObj: HassEntity | undefined =
+        this.hass.states[this.entry.entity_id];
+      if (
+        stateObj &&
+        supportsFeature(stateObj, CAMERA_SUPPORT_STREAM) &&
+        // The stream component for HLS streams supports a server-side pre-load
+        // option that client initiated WebRTC streams do not
+        stateObj.attributes.frontend_stream_type === STREAM_TYPE_HLS
+      ) {
+        this._fetchCameraPrefs();
+      }
+    }
+
     if (domain === "sensor") {
       const stateObj: HassEntity | undefined =
         this.hass.states[this.entry.entity_id];
@@ -340,9 +367,24 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
               @selected=${this._switchAsChanged}
               @closed=${stopPropagation}
             >
-              <mwc-list-item value="switch" selected>
-                ${domainToName(this.hass.localize, "switch")}</mwc-list-item
+              <mwc-list-item
+                value="switch"
+                .selected=${!this._deviceClass ||
+                this._deviceClass === "switch"}
               >
+                ${this.hass.localize(
+                  "ui.dialogs.entity_registry.editor.device_classes.switch.switch"
+                )}
+              </mwc-list-item>
+              <mwc-list-item
+                value="outlet"
+                .selected=${!this._deviceClass ||
+                this._deviceClass === "outlet"}
+              >
+                ${this.hass.localize(
+                  "ui.dialogs.entity_registry.editor.device_classes.switch.outlet"
+                )}
+              </mwc-list-item>
               <li divider role="separator"></li>
               ${this._switchAsDomainsSorted(
                 SWITCH_AS_DOMAINS,
@@ -392,7 +434,27 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
               @value-changed=${this._areaPicked}
             ></ha-area-picker>`
           : ""}
-
+        ${this._cameraPrefs
+          ? html`
+              <ha-settings-row>
+                <span slot="heading"
+                  >${this.hass.localize(
+                    "ui.dialogs.entity_registry.editor.preload_stream"
+                  )}</span
+                >
+                <span slot="description"
+                  >${this.hass.localize(
+                    "ui.dialogs.entity_registry.editor.preload_stream_description"
+                  )}</span
+                >
+                <ha-switch
+                  .checked=${this._cameraPrefs.preload_stream}
+                  @change=${this._handleCameraPrefsChanged}
+                >
+                </ha-switch>
+              </ha-settings-row>
+            `
+          : ""}
         <ha-expansion-panel
           .header=${this.hass.localize(
             "ui.dialogs.entity_registry.editor.advanced"
@@ -570,7 +632,15 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
     if (ev.target.value === "") {
       return;
     }
-    this._switchAs = ev.target.value;
+
+    // If value is "outlet" that means the user kept the "switch" domain, but actually changed
+    // the device_class of the switch to "outlet".
+    const switchAs = ev.target.value === "outlet" ? "switch" : ev.target.value;
+    this._switchAs = switchAs;
+
+    if (ev.target.value === "outlet" || ev.target.value === "switch") {
+      this._deviceClass = ev.target.value;
+    }
   }
 
   private _areaPicked(ev: CustomEvent) {
@@ -578,6 +648,26 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
     this._areaId = ev.detail.value;
   }
 
+  private async _fetchCameraPrefs() {
+    this._cameraPrefs = await fetchCameraPrefs(this.hass, this.entry.entity_id);
+  }
+
+  private async _handleCameraPrefsChanged(ev) {
+    const checkbox = ev.currentTarget as HaSwitch;
+    try {
+      this._cameraPrefs = await updateCameraPrefs(
+        this.hass,
+        this.entry.entity_id,
+        {
+          preload_stream: checkbox.checked!,
+        }
+      );
+    } catch (err: any) {
+      showAlertDialog(this, { text: err.message });
+      checkbox.checked = !checkbox.checked;
+    }
+  }
+
   private _viewStatusChanged(ev: CustomEvent): void {
     switch ((ev.target as any).value) {
       case "enabled":
@@ -794,6 +884,12 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
         ha-switch {
           margin-right: 16px;
         }
+        ha-settings-row {
+          padding: 0;
+        }
+        ha-settings-row ha-switch {
+          margin-right: 0;
+        }
         ha-textfield {
           display: block;
           margin: 8px 0;

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

@@ -976,6 +976,8 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         .selected-txt {
           font-weight: bold;
           padding-left: 16px;
+          padding-inline-start: 16px;
+          direction: var(--direction);
         }
         .table-header .selected-txt {
           margin-top: 20px;
@@ -985,6 +987,8 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         }
         .header-toolbar .header-btns {
           margin-right: -12px;
+          margin-inline-end: -12px;
+          direction: var(--direction);
         }
         .header-btns {
           display: flex;
@@ -999,7 +1003,9 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         .clear {
           color: var(--primary-color);
           padding-left: 8px;
+          padding-inline-start: 8px;
           text-transform: uppercase;
+          direction: var(--direction);
         }
       `,
     ];

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

@@ -1,14 +1,18 @@
+import "@material/mwc-list/mwc-list";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
 import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../components/buttons/ha-progress-button";
 import "../../../components/ha-alert";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
+import "../../../components/ha-clickable-list-item";
+import "../../../components/ha-icon-next";
 import "../../../components/ha-settings-row";
-import { BOARD_NAMES } from "../../../data/hardware";
+import { BOARD_NAMES, HardwareInfo } from "../../../data/hardware";
 import {
   extractApiErrorMessage,
   ignoreSupervisorError,
@@ -28,6 +32,8 @@ import {
 import "../../../layouts/hass-subpage";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
+import { hardwareBrandsUrl } from "../../../util/brands-url";
+import { showToast } from "../../../util/toast";
 import { showhardwareAvailableDialog } from "./show-dialog-hardware-available";
 
 @customElement("ha-config-hardware")
@@ -42,14 +48,36 @@ class HaConfigHardware extends LitElement {
 
   @state() private _hostData?: HassioHostInfo;
 
+  @state() private _hardwareInfo?: HardwareInfo;
+
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
-    if (isComponentLoaded(this.hass, "hassio")) {
-      this._load();
-    }
+    this._load();
   }
 
   protected render(): TemplateResult {
+    let boardId: string | undefined;
+    let boardName: string | undefined;
+    let imageURL: string | undefined;
+    let documentationURL: string | undefined;
+
+    if (this._hardwareInfo?.hardware.length) {
+      const boardData = this._hardwareInfo!.hardware[0];
+
+      boardId = boardData.board.hassio_board_id;
+      boardName = boardData.name;
+      documentationURL = boardData.url;
+      imageURL = hardwareBrandsUrl({
+        category: "boards",
+        manufacturer: boardData.board.manufacturer,
+        model: boardData.board.model,
+        darkOptimized: this.hass.themes?.darkMode,
+      });
+    } else if (this._OSData?.board) {
+      boardId = this._OSData.board;
+      boardName = BOARD_NAMES[this._OSData.board];
+    }
+
     return html`
       <hass-subpage
         back-path="/config/system"
@@ -68,6 +96,20 @@ class HaConfigHardware extends LitElement {
               "ui.panel.config.hardware.available_hardware.title"
             )}</mwc-list-item
           >
+          ${this._hostData
+            ? html`
+                <mwc-list-item class="warning" @click=${this._hostReboot}
+                  >${this.hass.localize(
+                    "ui.panel.config.hardware.reboot_host"
+                  )}</mwc-list-item
+                >
+                <mwc-list-item class="warning" @click=${this._hostShutdown}
+                  >${this.hass.localize(
+                    "ui.panel.config.hardware.shutdown_host"
+                  )}</mwc-list-item
+                >
+              `
+            : ""}
         </ha-button-menu>
         ${this._error
           ? html`
@@ -76,57 +118,55 @@ class HaConfigHardware extends LitElement {
               >
             `
           : ""}
-        ${this._OSData || this._hostData
+        ${boardName
           ? html`
               <div class="content">
                 <ha-card outlined>
-                  ${this._OSData?.board
-                    ? html`
-                        <div class="card-content">
-                          <ha-settings-row>
-                            <span slot="heading"
-                              >${BOARD_NAMES[this._OSData.board] ||
-                              this.hass.localize(
-                                "ui.panel.config.hardware.board"
-                              )}</span
+                  <div class="card-content">
+                    <mwc-list>
+                      <mwc-list-item
+                        graphic=${ifDefined(imageURL ? "medium" : undefined)}
+                        .twoline=${Boolean(boardId)}
+                      >
+                        ${imageURL
+                          ? html`<img slot="graphic" src=${imageURL} />`
+                          : ""}
+                        <span class="primary-text">
+                          ${boardName ||
+                          this.hass.localize("ui.panel.config.hardware.board")}
+                        </span>
+                        ${boardId
+                          ? html`
+                              <span class="secondary-text" slot="secondary"
+                                >${boardId}</span
+                              >
+                            `
+                          : ""}
+                      </mwc-list-item>
+                      ${documentationURL
+                        ? html`
+                            <ha-clickable-list-item
+                              .href=${documentationURL}
+                              openNewTab
+                              twoline
+                              hasMeta
                             >
-                            <div slot="description">
-                              <span class="value">${this._OSData.board}</span>
-                            </div>
-                          </ha-settings-row>
-                        </div>
-                      `
-                    : ""}
-                  ${this._hostData
-                    ? html`
-                        <div class="card-actions">
-                          ${this._hostData.features.includes("reboot")
-                            ? html`
-                                <ha-progress-button
-                                  class="warning"
-                                  @click=${this._hostReboot}
-                                >
-                                  ${this.hass.localize(
-                                    "ui.panel.config.hardware.reboot_host"
-                                  )}
-                                </ha-progress-button>
-                              `
-                            : ""}
-                          ${this._hostData.features.includes("shutdown")
-                            ? html`
-                                <ha-progress-button
-                                  class="warning"
-                                  @click=${this._hostShutdown}
-                                >
-                                  ${this.hass.localize(
-                                    "ui.panel.config.hardware.shutdown_host"
-                                  )}
-                                </ha-progress-button>
-                              `
-                            : ""}
-                        </div>
-                      `
-                    : ""}
+                              <span
+                                >${this.hass.localize(
+                                  "ui.panel.config.hardware.documentation"
+                                )}</span
+                              >
+                              <span slot="secondary"
+                                >${this.hass.localize(
+                                  "ui.panel.config.hardware.documentation_description"
+                                )}</span
+                              >
+                              <ha-icon-next slot="meta"></ha-icon-next>
+                            </ha-clickable-list-item>
+                          `
+                        : ""}
+                    </mwc-list>
+                  </div>
                 </ha-card>
               </div>
             `
@@ -136,9 +176,17 @@ class HaConfigHardware extends LitElement {
   }
 
   private async _load() {
+    const isHassioLoaded = isComponentLoaded(this.hass, "hassio");
     try {
-      this._OSData = await fetchHassioHassOsInfo(this.hass);
-      this._hostData = await fetchHassioHostInfo(this.hass);
+      if (isComponentLoaded(this.hass, "hardware")) {
+        this._hardwareInfo = await this.hass.callWS({ type: "hardware/info" });
+      } else if (isHassioLoaded) {
+        this._OSData = await fetchHassioHassOsInfo(this.hass);
+      }
+
+      if (isHassioLoaded) {
+        this._hostData = await fetchHassioHostInfo(this.hass);
+      }
     } catch (err: any) {
       this._error = err.message || err;
     }
@@ -148,10 +196,7 @@ class HaConfigHardware extends LitElement {
     showhardwareAvailableDialog(this);
   }
 
-  private async _hostReboot(ev: CustomEvent): Promise<void> {
-    const button = ev.currentTarget as any;
-    button.progress = true;
-
+  private async _hostReboot(): Promise<void> {
     const confirmed = await showConfirmationDialog(this, {
       title: this.hass.localize("ui.panel.config.hardware.reboot_host"),
       text: this.hass.localize("ui.panel.config.hardware.reboot_host_confirm"),
@@ -160,10 +205,14 @@ class HaConfigHardware extends LitElement {
     });
 
     if (!confirmed) {
-      button.progress = false;
       return;
     }
 
+    showToast(this, {
+      message: this.hass.localize("ui.panel.config.hardware.rebooting_host"),
+      duration: 0,
+    });
+
     try {
       await rebootHost(this.hass);
     } catch (err: any) {
@@ -177,13 +226,9 @@ class HaConfigHardware extends LitElement {
         });
       }
     }
-    button.progress = false;
   }
 
-  private async _hostShutdown(ev: CustomEvent): Promise<void> {
-    const button = ev.currentTarget as any;
-    button.progress = true;
-
+  private async _hostShutdown(): Promise<void> {
     const confirmed = await showConfirmationDialog(this, {
       title: this.hass.localize("ui.panel.config.hardware.shutdown_host"),
       text: this.hass.localize(
@@ -194,10 +239,16 @@ class HaConfigHardware extends LitElement {
     });
 
     if (!confirmed) {
-      button.progress = false;
       return;
     }
 
+    showToast(this, {
+      message: this.hass.localize(
+        "ui.panel.config.hardware.host_shutting_down"
+      ),
+      duration: 0,
+    });
+
     try {
       await shutdownHost(this.hass);
     } catch (err: any) {
@@ -211,7 +262,6 @@ class HaConfigHardware extends LitElement {
         });
       }
     }
-    button.progress = false;
   }
 
   static styles = [
@@ -234,17 +284,18 @@ class HaConfigHardware extends LitElement {
         display: flex;
         justify-content: space-between;
         flex-direction: column;
-        padding: 16px 16px 0 16px;
+        padding: 16px;
       }
       ha-button-menu {
         color: var(--secondary-text-color);
         --mdc-menu-min-width: 200px;
       }
-      .card-actions {
-        height: 48px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
+
+      .primary-text {
+        font-size: 16px;
+      }
+      .secondary-text {
+        font-size: 14px;
       }
     `,
   ];

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

@@ -4,9 +4,7 @@ import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../components/ha-logo-svg";
 import {
   fetchHassioHassOsInfo,
-  fetchHassioHostInfo,
   HassioHassOSInfo,
-  HassioHostInfo,
 } from "../../../data/hassio/host";
 import { fetchHassioInfo, HassioInfo } from "../../../data/hassio/supervisor";
 import "../../../layouts/hass-subpage";
@@ -28,8 +26,6 @@ class HaConfigInfo extends LitElement {
 
   @property({ attribute: false }) public route!: Route;
 
-  @state() private _hostInfo?: HassioHostInfo;
-
   @state() private _osInfo?: HassioHassOSInfo;
 
   @state() private _hassioInfo?: HassioInfo;
@@ -71,12 +67,6 @@ class HaConfigInfo extends LitElement {
           ${this._osInfo?.version
             ? html`<h3>Home Assistant OS ${this._osInfo.version}</h3>`
             : ""}
-          ${this._hostInfo
-            ? html`
-                <h4>Kernel version ${this._hostInfo.kernel}</h4>
-                <h4>Agent version ${this._hostInfo.agent_version}</h4>
-              `
-            : ""}
           <p>
             ${this.hass.localize(
               "ui.panel.config.info.path_configuration",
@@ -177,15 +167,13 @@ class HaConfigInfo extends LitElement {
   }
 
   private async _loadSupervisorInfo(): Promise<void> {
-    const [hostInfo, osInfo, hassioInfo] = await Promise.all([
-      fetchHassioHostInfo(this.hass),
+    const [osInfo, hassioInfo] = await Promise.all([
       fetchHassioHassOsInfo(this.hass),
       fetchHassioInfo(this.hass),
     ]);
 
     this._hassioInfo = hassioInfo;
     this._osInfo = osInfo;
-    this._hostInfo = hostInfo;
   }
 
   static get styles(): CSSResultGroup {

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

@@ -46,7 +46,6 @@ import {
 } from "../../../data/entity_registry";
 import {
   domainToName,
-  fetchIntegrationManifest,
   fetchIntegrationManifests,
   IntegrationManifest,
 } from "../../../data/integration";
@@ -156,17 +155,20 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
         this._deviceRegistryEntries = entries;
       }),
       subscribeConfigFlowInProgress(this.hass, async (flowsInProgress) => {
-        const translationsPromisses: Promise<LocalizeFunc>[] = [];
+        const integrations: Set<string> = new Set();
+        const manifests: Set<string> = new Set();
         flowsInProgress.forEach((flow) => {
           // To render title placeholders
           if (flow.context.title_placeholders) {
-            translationsPromisses.push(
-              this.hass.loadBackendTranslation("config", flow.handler)
-            );
+            integrations.add(flow.handler);
           }
-          this._fetchManifest(flow.handler);
+          manifests.add(flow.handler);
         });
-        await Promise.all(translationsPromisses);
+        await this.hass.loadBackendTranslation(
+          "config",
+          Array.from(integrations)
+        );
+        this._fetchIntegrationManifests(manifests);
         await nextRender();
         this._configEntriesInProgress = flowsInProgress.map((flow) => ({
           ...flow,
@@ -565,8 +567,8 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
     await scanUSBDevices(this.hass);
   }
 
-  private async _fetchManifests() {
-    const fetched = await fetchIntegrationManifests(this.hass);
+  private async _fetchManifests(integrations?: string[]) {
+    const fetched = await fetchIntegrationManifests(this.hass, integrations);
     // Make a copy so we can keep track of previously loaded manifests
     // for discovered flows (which are not part of these results)
     const manifests = { ...this._manifests };
@@ -574,23 +576,25 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
     this._manifests = manifests;
   }
 
-  private async _fetchManifest(domain: string) {
-    if (domain in this._manifests) {
-      return;
-    }
-    if (this._extraFetchedManifests) {
-      if (this._extraFetchedManifests.has(domain)) {
-        return;
+  private async _fetchIntegrationManifests(integrations: Set<string>) {
+    const manifestsToFetch: string[] = [];
+    for (const integration of integrations) {
+      if (integration in this._manifests) {
+        continue;
       }
-    } else {
-      this._extraFetchedManifests = new Set();
+      if (this._extraFetchedManifests) {
+        if (this._extraFetchedManifests.has(integration)) {
+          continue;
+        }
+      } else {
+        this._extraFetchedManifests = new Set();
+      }
+      this._extraFetchedManifests.add(integration);
+      manifestsToFetch.push(integration);
+    }
+    if (manifestsToFetch.length) {
+      await this._fetchManifests(manifestsToFetch);
     }
-    this._extraFetchedManifests.add(domain);
-    const manifest = await fetchIntegrationManifest(this.hass, domain);
-    this._manifests = {
-      ...this._manifests,
-      [domain]: manifest,
-    };
   }
 
   private _handleEntryRemoved(ev: HASSDomEvent<ConfigEntryRemovedEvent>) {

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-heal-network.ts

@@ -202,10 +202,9 @@ class DialogZWaveJSHealNetwork extends LitElement {
     if (!this.hass) {
       return;
     }
-    const network: ZWaveJSNetwork = await fetchZwaveNetworkStatus(
-      this.hass!,
-      this.entry_id!
-    );
+    const network: ZWaveJSNetwork = await fetchZwaveNetworkStatus(this.hass!, {
+      entry_id: this.entry_id!,
+    });
     if (network.controller.is_heal_network_active) {
       this._status = "started";
       this._subscribed = subscribeHealZwaveNetworkProgress(

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-heal-node.ts

@@ -22,10 +22,6 @@ import { ZWaveJSHealNodeDialogParams } from "./show-dialog-zwave_js-heal-node";
 class DialogZWaveJSHealNode extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @state() private entry_id?: string;
-
-  @state() private node_id?: number;
-
   @state() private device?: DeviceRegistryEntry;
 
   @state() private _status?: string;
@@ -33,16 +29,12 @@ class DialogZWaveJSHealNode extends LitElement {
   @state() private _error?: string;
 
   public showDialog(params: ZWaveJSHealNodeDialogParams): void {
-    this.entry_id = params.entry_id;
     this.device = params.device;
-    this.node_id = params.node_id;
     this._fetchData();
   }
 
   public closeDialog(): void {
-    this.entry_id = undefined;
     this._status = undefined;
-    this.node_id = undefined;
     this.device = undefined;
     this._error = undefined;
 
@@ -50,7 +42,7 @@ class DialogZWaveJSHealNode extends LitElement {
   }
 
   protected render(): TemplateResult {
-    if (!this.entry_id || !this.device) {
+    if (!this.device) {
       return html``;
     }
 
@@ -206,10 +198,9 @@ class DialogZWaveJSHealNode extends LitElement {
     if (!this.hass) {
       return;
     }
-    const network: ZWaveJSNetwork = await fetchZwaveNetworkStatus(
-      this.hass!,
-      this.entry_id!
-    );
+    const network: ZWaveJSNetwork = await fetchZwaveNetworkStatus(this.hass!, {
+      device_id: this.device!.id,
+    });
     if (network.controller.is_heal_network_active) {
       this._status = "network-healing";
     }
@@ -221,11 +212,7 @@ class DialogZWaveJSHealNode extends LitElement {
     }
     this._status = "started";
     try {
-      this._status = (await healZwaveNode(
-        this.hass,
-        this.entry_id!,
-        this.node_id!
-      ))
+      this._status = (await healZwaveNode(this.hass, this.device!.id))
         ? "finished"
         : "failed";
     } catch (err: any) {

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts

@@ -15,9 +15,7 @@ import { ZWaveJSReinterviewNodeDialogParams } from "./show-dialog-zwave_js-reint
 class DialogZWaveJSReinterviewNode extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @state() private entry_id?: string;
-
-  @state() private node_id?: number;
+  @state() private device_id?: string;
 
   @state() private _status?: string;
 
@@ -29,12 +27,11 @@ class DialogZWaveJSReinterviewNode extends LitElement {
     params: ZWaveJSReinterviewNodeDialogParams
   ): Promise<void> {
     this._stages = undefined;
-    this.entry_id = params.entry_id;
-    this.node_id = params.node_id;
+    this.device_id = params.device_id;
   }
 
   protected render(): TemplateResult {
-    if (!this.entry_id) {
+    if (!this.device_id) {
       return html``;
     }
 
@@ -159,8 +156,7 @@ class DialogZWaveJSReinterviewNode extends LitElement {
     }
     this._subscribed = reinterviewZwaveNode(
       this.hass,
-      this.entry_id!,
-      this.node_id!,
+      this.device_id!,
       this._handleMessage.bind(this)
     );
   }
@@ -194,8 +190,7 @@ class DialogZWaveJSReinterviewNode extends LitElement {
   }
 
   public closeDialog(): void {
-    this.entry_id = undefined;
-    this.node_id = undefined;
+    this.device_id = undefined;
     this._status = undefined;
     this._stages = undefined;
 

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-failed-node.ts

@@ -18,9 +18,7 @@ import { ZWaveJSRemoveFailedNodeDialogParams } from "./show-dialog-zwave_js-remo
 class DialogZWaveJSRemoveFailedNode extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @state() private entry_id?: string;
-
-  @state() private node_id?: number;
+  @state() private device_id?: string;
 
   @state() private _status = "";
 
@@ -38,13 +36,12 @@ class DialogZWaveJSRemoveFailedNode extends LitElement {
   public async showDialog(
     params: ZWaveJSRemoveFailedNodeDialogParams
   ): Promise<void> {
-    this.entry_id = params.entry_id;
-    this.node_id = params.node_id;
+    this.device_id = params.device_id;
   }
 
   public closeDialog(): void {
     this._unsubscribe();
-    this.entry_id = undefined;
+    this.device_id = undefined;
     this._status = "";
 
     fireEvent(this, "dialog-closed", { dialog: this.localName });
@@ -56,7 +53,7 @@ class DialogZWaveJSRemoveFailedNode extends LitElement {
   }
 
   protected render(): TemplateResult {
-    if (!this.entry_id || !this.node_id) {
+    if (!this.device_id) {
       return html``;
     }
 
@@ -166,8 +163,7 @@ class DialogZWaveJSRemoveFailedNode extends LitElement {
     this._status = "started";
     this._subscribed = removeFailedZwaveNode(
       this.hass,
-      this.entry_id!,
-      this.node_id!,
+      this.device_id!,
       (message: any) => this._handleMessage(message)
     ).catch((error) => {
       this._status = "failed";

src/panels/config/integrations/integration-panels/zwave_js/show-dialog-zwave_js-heal-node.ts

@@ -2,8 +2,6 @@ import { fireEvent } from "../../../../../common/dom/fire_event";
 import { DeviceRegistryEntry } from "../../../../../data/device_registry";
 
 export interface ZWaveJSHealNodeDialogParams {
-  entry_id: string;
-  node_id: number;
   device: DeviceRegistryEntry;
 }
 

src/panels/config/integrations/integration-panels/zwave_js/show-dialog-zwave_js-reinterview-node.ts

@@ -1,8 +1,7 @@
 import { fireEvent } from "../../../../../common/dom/fire_event";
 
 export interface ZWaveJSReinterviewNodeDialogParams {
-  entry_id: string;
-  node_id: number;
+  device_id: string;
 }
 
 export const loadReinterviewNodeDialog = () =>

src/panels/config/integrations/integration-panels/zwave_js/show-dialog-zwave_js-remove-failed-node.ts

@@ -1,8 +1,7 @@
 import { fireEvent } from "../../../../../common/dom/fire_event";
 
 export interface ZWaveJSRemoveFailedNodeDialogParams {
-  entry_id: string;
-  node_id: number;
+  device_id: string;
 }
 
 export const loadRemoveFailedNodeDialog = () =>

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts

@@ -1,4 +1,5 @@
-import "@material/mwc-button/mwc-button";
+import "@material/mwc-list/mwc-list";
+import "@material/mwc-list/mwc-list-item";
 import {
   mdiAlertCircle,
   mdiCheckCircle,
@@ -11,21 +12,24 @@ import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-icon-button";
+import "../../../../../components/ha-expansion-panel";
 import "../../../../../components/ha-fab";
+import "../../../../../components/ha-help-tooltip";
 import "../../../../../components/ha-icon-next";
 import "../../../../../components/ha-svg-icon";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   fetchZwaveDataCollectionStatus,
   fetchZwaveNetworkStatus,
-  fetchZwaveNodeStatus,
   fetchZwaveProvisioningEntries,
   InclusionState,
   setZwaveDataCollectionPreference,
   stopZwaveExclusion,
   stopZwaveInclusion,
+  subscribeZwaveControllerStatistics,
   ZWaveJSClient,
+  ZWaveJSControllerStatisticsUpdatedMessage,
   ZWaveJSNetwork,
-  ZWaveJSNodeStatus,
   ZwaveJSProvisioningEntry,
 } from "../../../../../data/zwave_js";
 import {
@@ -43,9 +47,10 @@ import { showZWaveJSRemoveNodeDialog } from "./show-dialog-zwave_js-remove-node"
 import { configTabs } from "./zwave_js-config-router";
 import { showOptionsFlowDialog } from "../../../../../dialogs/config-flow/show-dialog-options-flow";
 import { computeRTL } from "../../../../../common/util/compute_rtl";
+import { SubscribeMixin } from "../../../../../mixins/subscribe-mixin";
 
 @customElement("zwave_js-config-dashboard")
-class ZWaveJSConfigDashboard extends LitElement {
+class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
   @property({ type: Object }) public hass!: HomeAssistant;
 
   @property({ type: Object }) public route!: Route;
@@ -54,14 +59,12 @@ class ZWaveJSConfigDashboard extends LitElement {
 
   @property({ type: Boolean }) public isWide!: boolean;
 
-  @property() public configEntryId?: string;
+  @property() public configEntryId!: string;
 
   @state() private _configEntry?: ConfigEntry;
 
   @state() private _network?: ZWaveJSNetwork;
 
-  @state() private _nodes?: ZWaveJSNodeStatus[];
-
   @state() private _provisioningEntries?: ZwaveJSProvisioningEntry[];
 
   @state() private _status?: ZWaveJSClient["state"];
@@ -70,12 +73,30 @@ class ZWaveJSConfigDashboard extends LitElement {
 
   @state() private _dataCollectionOptIn?: boolean;
 
+  @state()
+  private _statistics?: ZWaveJSControllerStatisticsUpdatedMessage;
+
   protected firstUpdated() {
     if (this.hass) {
       this._fetchData();
     }
   }
 
+  public hassSubscribe(): Array<UnsubscribeFunc | Promise<UnsubscribeFunc>> {
+    return [
+      subscribeZwaveControllerStatistics(
+        this.hass,
+        this.configEntryId,
+        (message) => {
+          if (!this.hasUpdated) {
+            return;
+          }
+          this._statistics = message;
+        }
+      ),
+    ];
+  }
+
   protected render(): TemplateResult {
     if (!this._configEntry) {
       return html``;
@@ -84,9 +105,8 @@ class ZWaveJSConfigDashboard extends LitElement {
     if (ERROR_STATES.includes(this._configEntry.state)) {
       return this._renderErrorScreen();
     }
-
     const notReadyDevices =
-      this._nodes?.filter((node) => !node.ready).length ?? 0;
+      this._network?.controller.nodes.filter((node) => !node.ready).length ?? 0;
 
     return html`
       <hass-tabs-subpage
@@ -216,22 +236,178 @@ class ZWaveJSConfigDashboard extends LitElement {
                 </ha-card>
                 <ha-card header="Diagnostics">
                   <div class="card-content">
-                    ${this.hass.localize(
-                      "ui.panel.config.zwave_js.dashboard.driver_version"
-                    )}:
-                    ${this._network.client.driver_version}<br />
-                    ${this.hass.localize(
-                      "ui.panel.config.zwave_js.dashboard.server_version"
-                    )}:
-                    ${this._network.client.server_version}<br />
-                    ${this.hass.localize(
-                      "ui.panel.config.zwave_js.dashboard.home_id"
-                    )}:
-                    ${this._network.controller.home_id}<br />
-                    ${this.hass.localize(
-                      "ui.panel.config.zwave_js.dashboard.server_url"
-                    )}:
-                    ${this._network.client.ws_server_url}<br />
+                    <div class="row">
+                      <span>
+                        ${this.hass.localize(
+                          "ui.panel.config.zwave_js.dashboard.driver_version"
+                        )}:
+                      </span>
+                      <span>${this._network.client.driver_version}</span>
+                    </div>
+                    <div class="row">
+                      <span>
+                        ${this.hass.localize(
+                          "ui.panel.config.zwave_js.dashboard.server_version"
+                        )}:
+                      </span>
+                      <span>${this._network.client.server_version}</span>
+                    </div>
+                    <div class="row">
+                      <span>
+                        ${this.hass.localize(
+                          "ui.panel.config.zwave_js.dashboard.home_id"
+                        )}:
+                      </span>
+                      <span>${this._network.controller.home_id}</span>
+                    </div>
+                    <div class="row">
+                      <span>
+                        ${this.hass.localize(
+                          "ui.panel.config.zwave_js.dashboard.server_url"
+                        )}:
+                      </span>
+                      <span>${this._network.client.ws_server_url}</span>
+                    </div>
+                    <br />
+                    <ha-expansion-panel
+                      .header=${this.hass.localize(
+                        "ui.panel.config.zwave_js.dashboard.statistics.title"
+                      )}
+                    >
+                      <mwc-list noninteractive>
+                        <mwc-list-item twoline hasmeta>
+                          <span>
+                            ${this.hass.localize(
+                              "ui.panel.config.zwave_js.dashboard.statistics.messages_tx.label"
+                            )}
+                          </span>
+                          <span slot="secondary">
+                            ${this.hass.localize(
+                              "ui.panel.config.zwave_js.dashboard.statistics.messages_tx.tooltip"
+                            )}
+                          </span>
+                          <span slot="meta"
+                            >${this._statistics?.messages_tx ?? 0}</span
+                          >
+                        </mwc-list-item>
+                        <mwc-list-item twoline hasmeta>
+                          <span>
+                            ${this.hass.localize(
+                              "ui.panel.config.zwave_js.dashboard.statistics.messages_rx.label"
+                            )}
+                          </span>
+                          <span slot="secondary">
+                            ${this.hass.localize(
+                              "ui.panel.config.zwave_js.dashboard.statistics.messages_rx.tooltip"
+                            )}
+                          </span>
+                          <span slot="meta"
+                            >${this._statistics?.messages_rx ?? 0}</span
+                          >
+                        </mwc-list-item>
+                        <mwc-list-item twoline hasmeta>
+                          <span>
+                            ${this.hass.localize(
+                              "ui.panel.config.zwave_js.dashboard.statistics.messages_dropped_tx.label"
+                            )}
+                          </span>
+                          <span slot="secondary">
+                            ${this.hass.localize(
+                              "ui.panel.config.zwave_js.dashboard.statistics.messages_dropped_tx.tooltip"
+                            )}
+                          </span>
+                          <span slot="meta"
+                            >${this._statistics?.messages_dropped_tx ?? 0}</span
+                          >
+                        </mwc-list-item>
+                        <mwc-list-item twoline hasmeta>
+                          <span>
+                            ${this.hass.localize(
+                              "ui.panel.config.zwave_js.dashboard.statistics.messages_dropped_rx.label"
+                            )}
+                          </span>
+                          <span slot="secondary">
+                            ${this.hass.localize(
+                              "ui.panel.config.zwave_js.dashboard.statistics.messages_dropped_rx.tooltip"
+                            )}
+                          </span>
+                          <span slot="meta"
+                            >${this._statistics?.messages_dropped_rx ?? 0}</span
+                          >
+                        </mwc-list-item>
+                        <mwc-list-item twoline hasmeta>
+                          <span>
+                            ${this.hass.localize(
+                              "ui.panel.config.zwave_js.dashboard.statistics.nak.label"
+                            )}
+                          </span>
+                          <span slot="secondary">
+                            ${this.hass.localize(
+                              "ui.panel.config.zwave_js.dashboard.statistics.nak.tooltip"
+                            )}
+                          </span>
+                          <span slot="meta">${this._statistics?.nak ?? 0}</span>
+                        </mwc-list-item>
+                        <mwc-list-item twoline hasmeta>
+                          <span>
+                            ${this.hass.localize(
+                              "ui.panel.config.zwave_js.dashboard.statistics.can.label"
+                            )}
+                          </span>
+                          <span slot="secondary">
+                            ${this.hass.localize(
+                              "ui.panel.config.zwave_js.dashboard.statistics.can.tooltip"
+                            )}
+                          </span>
+                          <span slot="meta">${this._statistics?.can ?? 0}</span>
+                        </mwc-list-item>
+                        <mwc-list-item twoline hasmeta>
+                          <span>
+                            ${this.hass.localize(
+                              "ui.panel.config.zwave_js.dashboard.statistics.timeout_ack.label"
+                            )}
+                          </span>
+                          <span slot="secondary">
+                            ${this.hass.localize(
+                              "ui.panel.config.zwave_js.dashboard.statistics.timeout_ack.tooltip"
+                            )}
+                          </span>
+                          <span slot="meta"
+                            >${this._statistics?.timeout_ack ?? 0}</span
+                          >
+                        </mwc-list-item>
+                        <mwc-list-item twoline hasmeta>
+                          <span>
+                            ${this.hass.localize(
+                              "ui.panel.config.zwave_js.dashboard.statistics.timeout_response.label"
+                            )}
+                          </span>
+                          <span slot="secondary">
+                            ${this.hass.localize(
+                              "ui.panel.config.zwave_js.dashboard.statistics.timeout_response.tooltip"
+                            )}
+                          </span>
+                          <span slot="meta"
+                            >${this._statistics?.timeout_response ?? 0}</span
+                          >
+                        </mwc-list-item>
+                        <mwc-list-item twoline hasmeta>
+                          <span>
+                            ${this.hass.localize(
+                              "ui.panel.config.zwave_js.dashboard.statistics.timeout_callback.label"
+                            )}
+                          </span>
+                          <span slot="secondary">
+                            ${this.hass.localize(
+                              "ui.panel.config.zwave_js.dashboard.statistics.timeout_callback.tooltip"
+                            )}
+                          </span>
+                          <span slot="meta"
+                            >${this._statistics?.timeout_callback ?? 0}</span
+                          >
+                        </mwc-list-item>
+                      </mwc-list>
+                    </ha-expansion-panel>
                   </div>
                   <div class="card-actions">
                     <mwc-button
@@ -288,7 +464,7 @@ class ZWaveJSConfigDashboard extends LitElement {
                       data collected, can be found in the
                       <a
                         target="_blank"
-                        href="https://zwave-js.github.io/node-zwave-js/#/data-collection/data-collection?id=usage-statistics"
+                        href="https://zwave-js.github.io/node-zwave-js/#/data-collection/data-collection"
                         >Z-Wave JS data collection documentation</a
                       >.
                     </p>
@@ -388,7 +564,7 @@ class ZWaveJSConfigDashboard extends LitElement {
       domain: "zwave_js",
     });
     this._configEntry = configEntries.find(
-      (entry) => entry.entry_id === this.configEntryId!
+      (entry) => entry.entry_id === this.configEntryId
     );
 
     if (ERROR_STATES.includes(this._configEntry!.state)) {
@@ -397,7 +573,7 @@ class ZWaveJSConfigDashboard extends LitElement {
 
     const [network, dataCollectionStatus, provisioningEntries] =
       await Promise.all([
-        fetchZwaveNetworkStatus(this.hass!, this.configEntryId),
+        fetchZwaveNetworkStatus(this.hass!, { entry_id: this.configEntryId }),
         fetchZwaveDataCollectionStatus(this.hass!, this.configEntryId),
         fetchZwaveProvisioningEntries(this.hass!, this.configEntryId),
       ]);
@@ -414,18 +590,6 @@ class ZWaveJSConfigDashboard extends LitElement {
     this._dataCollectionOptIn =
       dataCollectionStatus.opted_in === true ||
       dataCollectionStatus.enabled === true;
-
-    this._fetchNodeStatus();
-  }
-
-  private async _fetchNodeStatus() {
-    if (!this._network) {
-      return;
-    }
-    const nodeStatePromisses = this._network.controller.nodes.map((nodeId) =>
-      fetchZwaveNodeStatus(this.hass, this.configEntryId!, nodeId)
-    );
-    this._nodes = await Promise.all(nodeStatePromisses);
   }
 
   private async _addNodeClicked() {
@@ -525,6 +689,11 @@ class ZWaveJSConfigDashboard extends LitElement {
           padding-right: 40px;
         }
 
+        .row {
+          display: flex;
+          justify-content: space-between;
+        }
+
         .network-status div.heading {
           display: flex;
           align-items: center;
@@ -547,6 +716,10 @@ class ZWaveJSConfigDashboard extends LitElement {
           font-size: 1rem;
         }
 
+        mwc-list-item {
+          height: 60px;
+        }
+
         .card-header {
           display: flex;
         }
@@ -563,12 +736,6 @@ class ZWaveJSConfigDashboard extends LitElement {
           max-width: 600px;
         }
 
-        button.dump {
-          width: 100%;
-          text-align: center;
-          color: var(--secondary-text-color);
-        }
-
         [hidden] {
           display: none;
         }

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts

@@ -61,19 +61,6 @@ const getDevice = memoizeOne(
     entries?.find((device) => device.id === deviceId)
 );
 
-const getNodeId = memoizeOne(
-  (device: DeviceRegistryEntry): number | undefined => {
-    const identifier = device.identifiers.find(
-      (ident) => ident[0] === "zwave_js"
-    );
-    if (!identifier) {
-      return undefined;
-    }
-
-    return parseInt(identifier[1].split("-")[1]);
-  }
-);
-
 @customElement("zwave_js-node-config")
 class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -179,17 +166,6 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
               </em>
             </p>
           </div>
-          ${this._nodeMetadata.comments?.length > 0
-            ? html`
-                <div>
-                  ${this._nodeMetadata.comments.map(
-                    (comment) => html`<ha-alert .alertType=${comment.level}>
-                      ${comment.text}
-                    </ha-alert>`
-                  )}
-                </div>
-              `
-            : ``}
           <ha-card>
             ${Object.entries(this._config).map(
               ([id, item]) => html` <ha-settings-row
@@ -382,12 +358,10 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
   }
 
   private async _updateConfigParameter(target, value) {
-    const nodeId = getNodeId(this._device!);
     try {
       const result = await setZwaveNodeConfigParameter(
         this.hass,
-        this.configEntryId!,
-        nodeId!,
+        this._device!.id,
         target.property,
         value,
         target.propertyKey ? target.propertyKey : undefined
@@ -429,15 +403,9 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
       return;
     }
 
-    const nodeId = getNodeId(device);
-    if (!nodeId) {
-      this._error = "device_not_found";
-      return;
-    }
-
     [this._nodeMetadata, this._config] = await Promise.all([
-      fetchZwaveNodeMetadata(this.hass, this.configEntryId, nodeId!),
-      fetchZwaveNodeConfigParameters(this.hass, this.configEntryId, nodeId!),
+      fetchZwaveNodeMetadata(this.hass, device.id),
+      fetchZwaveNodeConfigParameters(this.hass, device.id),
     ]);
   }
 

src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts

@@ -87,7 +87,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
               ${dashboard.default
                 ? html`
                     <ha-svg-icon
-                      style="padding-left: 10px;"
+                      style="padding-left: 10px; padding-inline-start: 10px; direction: var(--direction);"
                       .path=${mdiCheckCircleOutline}
                     ></ha-svg-icon>
                     <paper-tooltip animation-delay="0">