Add support for downstream water meters in energy dashboard

* Add Add entity to feature for external_app

* Update icon from plus to plusboxmultiple

* Apply suggestion on the name

* Add missing shouldHandleRequestSelectedEvent that caused duplicate

* WIP

* Rework the logic to match the agreed design

* Rename property

* Apply PR comments

* Apply prettier

* Merge MessageWithAnswer

* Apply PR comments

.github/workflows/codeql-analysis.yml

@@ -36,14 +36,14 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@4e94bd11f71e507f7f87df81788dff88d1dacbfb # v4.31.0
+        uses: github/codeql-action/init@0499de31b99561a6d14a36a5f662c2a54f91beee # v4.31.2
         with:
           languages: ${{ matrix.language }}
 
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@4e94bd11f71e507f7f87df81788dff88d1dacbfb # v4.31.0
+        uses: github/codeql-action/autobuild@0499de31b99561a6d14a36a5f662c2a54f91beee # v4.31.2
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -57,4 +57,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@4e94bd11f71e507f7f87df81788dff88d1dacbfb # v4.31.0
+        uses: github/codeql-action/analyze@0499de31b99561a6d14a36a5f662c2a54f91beee # v4.31.2

build-scripts/bundle.cjs

@@ -18,16 +18,16 @@ module.exports.sourceMapURL = () => {
 module.exports.ignorePackages = () => [];
 
 // Files from NPM packages that we should replace with empty file
-module.exports.emptyPackages = ({ isHassioBuild }) =>
+module.exports.emptyPackages = ({ isHassioBuild, isLandingPageBuild }) =>
   [
     require.resolve("@vaadin/vaadin-material-styles/typography.js"),
     require.resolve("@vaadin/vaadin-material-styles/font-icons.js"),
     // Icons in supervisor conflict with icons in HA so we don't load.
-    isHassioBuild &&
+    (isHassioBuild || isLandingPageBuild) &&
       require.resolve(
         path.resolve(paths.root_dir, "src/components/ha-icon.ts")
       ),
-    isHassioBuild &&
+    (isHassioBuild || isLandingPageBuild) &&
       require.resolve(
         path.resolve(paths.root_dir, "src/components/ha-icon-picker.ts")
       ),
@@ -337,6 +337,7 @@ module.exports.config = {
       publicPath: publicPath(latestBuild),
       isProdBuild,
       latestBuild,
+      isLandingPageBuild: true,
     };
   },
 };

build-scripts/rspack.cjs

@@ -41,6 +41,7 @@ const createRspackConfig = ({
   isStatsBuild,
   isTestBuild,
   isHassioBuild,
+  isLandingPageBuild,
   dontHash,
 }) => {
   if (!dontHash) {
@@ -168,7 +169,9 @@ const createRspackConfig = ({
         },
       }),
       new rspack.NormalModuleReplacementPlugin(
-        new RegExp(bundle.emptyPackages({ isHassioBuild }).join("|")),
+        new RegExp(
+          bundle.emptyPackages({ isHassioBuild, isLandingPageBuild }).join("|")
+        ),
         path.resolve(paths.root_dir, "src/util/empty.js")
       ),
       !isProdBuild && new LogStartCompilePlugin(),

demo/src/stubs/energy.ts

@@ -84,6 +84,7 @@ export const mockEnergy = (hass: MockHomeAssistant) => {
           stat_consumption: "sensor.energy_boiler",
         },
       ],
+      device_consumption_water: [],
     })
   );
   hass.mockWS(

package.json

@@ -81,7 +81,7 @@
     "@material/mwc-top-app-bar": "0.27.0",
     "@material/mwc-top-app-bar-fixed": "0.27.0",
     "@material/top-app-bar": "=14.0.0-canary.53b3cad2f.0",
-    "@material/web": "2.4.0",
+    "@material/web": "2.4.1",
     "@mdi/js": "7.4.47",
     "@mdi/svg": "7.4.47",
     "@replit/codemirror-indentation-markers": "6.5.3",
@@ -89,8 +89,8 @@
     "@thomasloven/round-slider": "0.6.0",
     "@tsparticles/engine": "3.9.1",
     "@tsparticles/preset-links": "3.2.0",
-    "@vaadin/combo-box": "24.9.2",
-    "@vaadin/vaadin-themable-mixin": "24.9.2",
+    "@vaadin/combo-box": "24.9.4",
+    "@vaadin/vaadin-themable-mixin": "24.9.4",
     "@vibrant/color": "4.0.0",
     "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
@@ -111,7 +111,7 @@
     "fuse.js": "7.1.0",
     "google-timezones-json": "1.2.0",
     "gulp-zopfli-green": "6.0.2",
-    "hls.js": "1.6.13",
+    "hls.js": "1.6.14",
     "home-assistant-js-websocket": "9.5.0",
     "idb-keyval": "6.2.2",
     "intl-messageformat": "10.7.18",
@@ -154,11 +154,11 @@
     "@babel/preset-env": "7.28.5",
     "@bundle-stats/plugin-webpack-filter": "4.21.5",
     "@lokalise/node-api": "15.3.1",
-    "@octokit/auth-oauth-device": "8.0.2",
-    "@octokit/plugin-retry": "8.0.2",
-    "@octokit/rest": "22.0.0",
-    "@rsdoctor/rspack-plugin": "1.3.4",
-    "@rspack/core": "1.5.8",
+    "@octokit/auth-oauth-device": "8.0.3",
+    "@octokit/plugin-retry": "8.0.3",
+    "@octokit/rest": "22.0.1",
+    "@rsdoctor/rspack-plugin": "1.3.7",
+    "@rspack/core": "1.6.0",
     "@rspack/dev-server": "1.1.4",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.22",
@@ -178,7 +178,7 @@
     "@types/tar": "6.1.13",
     "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
-    "@vitest/coverage-v8": "4.0.3",
+    "@vitest/coverage-v8": "4.0.6",
     "babel-loader": "10.0.0",
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
@@ -201,7 +201,7 @@
     "gulp-rename": "2.1.0",
     "html-minifier-terser": "7.2.0",
     "husky": "9.1.7",
-    "jsdom": "27.0.1",
+    "jsdom": "27.1.0",
     "jszip": "3.10.1",
     "lint-staged": "16.2.6",
     "lit-analyzer": "2.0.3",
@@ -213,13 +213,13 @@
     "rspack-manifest-plugin": "5.1.0",
     "serve": "14.2.5",
     "sinon": "21.0.0",
-    "tar": "7.5.1",
+    "tar": "7.5.2",
     "terser-webpack-plugin": "5.3.14",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.9.3",
     "typescript-eslint": "8.46.2",
     "vite-tsconfig-paths": "5.1.4",
-    "vitest": "4.0.3",
+    "vitest": "4.0.6",
     "webpack-stats-plugin": "1.1.3",
     "webpackbar": "7.0.0",
     "workbox-build": "patch:workbox-build@npm%3A7.1.1#~/.yarn/patches/workbox-build-npm-7.1.1-a854f3faae.patch"
@@ -231,7 +231,7 @@
     "clean-css": "5.3.3",
     "@lit/reactive-element": "2.1.1",
     "@fullcalendar/daygrid": "6.1.19",
-    "globals": "16.4.0",
+    "globals": "16.5.0",
     "tslib": "2.8.1",
     "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"
   },

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20251105.0"
+version      = "20251029.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"

src/components/ha-area-picker.ts

@@ -87,6 +87,8 @@ export class HaAreaPicker extends LitElement {
 
   @property({ type: Boolean }) public required = false;
 
+  @property({ attribute: "add-button-label" }) public addButtonLabel?: string;
+
   @query("ha-generic-picker") private _picker?: HaGenericPicker;
 
   public async open() {
@@ -375,6 +377,7 @@ export class HaAreaPicker extends LitElement {
         .getItems=${this._getItems}
         .getAdditionalItems=${this._getAdditionalItems}
         .valueRenderer=${valueRenderer}
+        .addButtonLabel=${this.addButtonLabel}
         @value-changed=${this._valueChanged}
       >
       </ha-generic-picker>

src/components/ha-generic-picker.ts

@@ -10,7 +10,6 @@ import type { HomeAssistant } from "../types";
 import "./ha-bottom-sheet";
 import "./ha-button";
 import "./ha-combo-box-item";
-import "./ha-icon-button";
 import "./ha-input-helper-text";
 import "./ha-picker-combo-box";
 import type {

src/data/energy.ts

@@ -191,6 +191,7 @@ export type EnergySource =
 export interface EnergyPreferences {
   energy_sources: EnergySource[];
   device_consumption: DeviceConsumptionEnergyPreference[];
+  device_consumption_water: DeviceConsumptionEnergyPreference[];
 }
 
 export interface EnergyInfo {
@@ -347,6 +348,11 @@ export const getReferencedStatisticIds = (
   if (!(includeTypes && !includeTypes.includes("device"))) {
     statIDs.push(...prefs.device_consumption.map((d) => d.stat_consumption));
   }
+  if (!(includeTypes && !includeTypes.includes("water"))) {
+    statIDs.push(
+      ...prefs.device_consumption_water.map((d) => d.stat_consumption)
+    );
+  }
 
   return statIDs;
 };

src/dialogs/more-info/ha-more-info-add-to.ts

@@ -0,0 +1,152 @@
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import "../../components/ha-alert";
+import "../../components/ha-icon";
+import "../../components/ha-list-item";
+import "../../components/ha-spinner";
+import type {
+  ExternalEntityAddToActions,
+  ExternalEntityAddToAction,
+} from "../../external_app/external_messaging";
+import { showToast } from "../../util/toast";
+
+import type { HomeAssistant } from "../../types";
+
+@customElement("ha-more-info-add-to")
+export class HaMoreInfoAddTo extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public entityId!: string;
+
+  @state() private _externalActions?: ExternalEntityAddToActions = {
+    actions: [],
+  };
+
+  @state() private _loading = true;
+
+  private async _loadExternalActions() {
+    if (this.hass.auth.external?.config.hasEntityAddTo) {
+      this._externalActions =
+        await this.hass.auth.external?.sendMessage<"entity/add_to/get_actions">(
+          {
+            type: "entity/add_to/get_actions",
+            payload: { entity_id: this.entityId },
+          }
+        );
+    }
+  }
+
+  private async _actionSelected(ev: CustomEvent) {
+    const action = (ev.currentTarget as any)
+      .action as ExternalEntityAddToAction;
+    if (!action.enabled) {
+      return;
+    }
+
+    try {
+      await this.hass.auth.external!.fireMessage({
+        type: "entity/add_to",
+        payload: {
+          entity_id: this.entityId,
+          app_payload: action.app_payload,
+        },
+      });
+    } catch (err: any) {
+      showToast(this, {
+        message: this.hass.localize(
+          "ui.dialogs.more_info_control.add_to.action_failed",
+          {
+            error: err.message || err,
+          }
+        ),
+      });
+    }
+  }
+
+  protected async firstUpdated() {
+    await this._loadExternalActions();
+    this._loading = false;
+  }
+
+  protected render() {
+    if (this._loading) {
+      return html`
+        <div class="loading">
+          <ha-spinner></ha-spinner>
+        </div>
+      `;
+    }
+
+    if (!this._externalActions?.actions.length) {
+      return html`
+        <ha-alert alert-type="info">
+          ${this.hass.localize(
+            "ui.dialogs.more_info_control.add_to.no_actions"
+          )}
+        </ha-alert>
+      `;
+    }
+
+    return html`
+      <div class="actions-list">
+        ${this._externalActions.actions.map(
+          (action) => html`
+            <ha-list-item
+              graphic="icon"
+              .disabled=${!action.enabled}
+              .action=${action}
+              .twoline=${!!action.details}
+              @click=${this._actionSelected}
+            >
+              <span>${action.name}</span>
+              ${action.details
+                ? html`<span slot="secondary">${action.details}</span>`
+                : nothing}
+              <ha-icon slot="graphic" .icon=${action.mdi_icon}></ha-icon>
+            </ha-list-item>
+          `
+        )}
+      </div>
+    `;
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      padding: var(--ha-space-2) var(--ha-space-6) var(--ha-space-6)
+        var(--ha-space-6);
+    }
+
+    .loading {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: var(--ha-space-8);
+    }
+
+    .actions-list {
+      display: flex;
+      flex-direction: column;
+    }
+
+    ha-list-item {
+      cursor: pointer;
+    }
+
+    ha-list-item[disabled] {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    ha-icon {
+      display: flex;
+      align-items: center;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-more-info-add-to": HaMoreInfoAddTo;
+  }
+}

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

@@ -8,6 +8,7 @@ import {
   mdiPencil,
   mdiPencilOff,
   mdiPencilOutline,
+  mdiPlusBoxMultipleOutline,
   mdiTransitConnectionVariant,
 } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
@@ -60,6 +61,7 @@ import {
   computeShowLogBookComponent,
 } from "./const";
 import "./controls/more-info-default";
+import "./ha-more-info-add-to";
 import "./ha-more-info-history-and-logbook";
 import "./ha-more-info-info";
 import "./ha-more-info-settings";
@@ -73,7 +75,7 @@ export interface MoreInfoDialogParams {
   data?: Record<string, any>;
 }
 
-type View = "info" | "history" | "settings" | "related";
+type View = "info" | "history" | "settings" | "related" | "add_to";
 
 interface ChildView {
   viewTag: string;
@@ -194,6 +196,10 @@ export class MoreInfoDialog extends LitElement {
     );
   }
 
+  private _shouldShowAddEntityTo(): boolean {
+    return !!this.hass.auth.external?.config.hasEntityAddTo;
+  }
+
   private _getDeviceId(): string | null {
     const entity = this.hass.entities[this._entityId!] as
       | EntityRegistryEntry
@@ -295,6 +301,11 @@ export class MoreInfoDialog extends LitElement {
     this._setView("related");
   }
 
+  private _goToAddEntityTo(ev) {
+    if (!shouldHandleRequestSelectedEvent(ev)) return;
+    this._setView("add_to");
+  }
+
   private _breadcrumbClick(ev: Event) {
     ev.stopPropagation();
     this._setView("related");
@@ -521,6 +532,22 @@ export class MoreInfoDialog extends LitElement {
                             .path=${mdiInformationOutline}
                           ></ha-svg-icon>
                         </ha-list-item>
+                        ${this._shouldShowAddEntityTo()
+                          ? html`
+                              <ha-list-item
+                                graphic="icon"
+                                @request-selected=${this._goToAddEntityTo}
+                              >
+                                ${this.hass.localize(
+                                  "ui.dialogs.more_info_control.add_entity_to"
+                                )}
+                                <ha-svg-icon
+                                  slot="graphic"
+                                  .path=${mdiPlusBoxMultipleOutline}
+                                ></ha-svg-icon>
+                              </ha-list-item>
+                            `
+                          : nothing}
                       </ha-button-menu>
                     `
                   : nothing}
@@ -613,7 +640,14 @@ export class MoreInfoDialog extends LitElement {
                                   : "entity"}
                               ></ha-related-items>
                             `
-                          : nothing
+                          : this._currView === "add_to"
+                            ? html`
+                                <ha-more-info-add-to
+                                  .hass=${this.hass}
+                                  .entityId=${entityId}
+                                ></ha-more-info-add-to>
+                              `
+                            : nothing
               )}
             </div>
           `

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

@@ -152,10 +152,18 @@ export class MoreInfoHistory extends LitElement {
     }
   }
 
-  private _setRedrawTimer() {
-    // redraw the graph every minute to update the time axis
+  private _setUpdateTimer() {
     clearInterval(this._interval);
-    this._interval = window.setInterval(() => this._redrawGraph(), 1000 * 60);
+    this._interval = window.setInterval(() => {
+      // If using statistics, refresh the data
+      if (this._statistics) {
+        this._fetchStatistics();
+      }
+      // If using history, redraw the graph to update the time axis
+      if (this._stateHistory) {
+        this._redrawGraph();
+      }
+    }, 1000 * 60);
   }
 
   private async _getStatisticsMetaData(statisticIds: string[] | undefined) {
@@ -170,6 +178,30 @@ export class MoreInfoHistory extends LitElement {
     return statisticsMetaData;
   }
 
+  private async _fetchStatistics(): Promise<boolean> {
+    // Fire off the metadata and fetch at the same time
+    // to avoid waiting in sequence so the UI responds
+    // faster.
+    const _metadata = this._getStatisticsMetaData([this.entityId]);
+    const _statistics = fetchStatistics(
+      this.hass!,
+      subHours(new Date(), 24),
+      undefined,
+      [this.entityId],
+      "5minute",
+      undefined,
+      statTypes
+    );
+    const [metadata, statistics] = await Promise.all([_metadata, _statistics]);
+    if (metadata && Object.keys(metadata).length) {
+      this._metadata = metadata;
+      this._statistics = statistics;
+      this._statNames = { [this.entityId]: "" };
+      return true;
+    }
+    return false;
+  }
+
   private async _getStateHistory(): Promise<void> {
     if (
       isComponentLoaded(this.hass, "recorder") &&
@@ -180,27 +212,10 @@ export class MoreInfoHistory extends LitElement {
       // has not opted into statistics so there is no need to check as it
       // requires another round-trip to the server.
       if (stateObj && stateObj.attributes.state_class) {
-        // Fire off the metadata and fetch at the same time
-        // to avoid waiting in sequence so the UI responds
-        // faster.
-        const _metadata = this._getStatisticsMetaData([this.entityId]);
-        const _statistics = fetchStatistics(
-          this.hass!,
-          subHours(new Date(), 24),
-          undefined,
-          [this.entityId],
-          "5minute",
-          undefined,
-          statTypes
-        );
-        const [metadata, statistics] = await Promise.all([
-          _metadata,
-          _statistics,
-        ]);
-        if (metadata && Object.keys(metadata).length) {
-          this._metadata = metadata;
-          this._statistics = statistics;
-          this._statNames = { [this.entityId]: "" };
+        const hasStatistics = await this._fetchStatistics();
+        if (hasStatistics) {
+          // Using statistics, set up refresh timer
+          this._setUpdateTimer();
           return;
         }
       }
@@ -238,7 +253,7 @@ export class MoreInfoHistory extends LitElement {
       this._error = err;
       return undefined;
     });
-    this._setRedrawTimer();
+    this._setUpdateTimer();
   }
 
   static styles = [

src/external_app/external_messaging.ts

@@ -36,6 +36,13 @@ interface EMOutgoingMessageConfigGet extends EMMessage {
   type: "config/get";
 }
 
+interface EMOutgoingMessageEntityAddToGetActions extends EMMessage {
+  type: "entity/add_to/get_actions";
+  payload: {
+    entity_id: string;
+  };
+}
+
 interface EMOutgoingMessageBarCodeScan extends EMMessage {
   type: "bar_code/scan";
   payload: {
@@ -75,6 +82,10 @@ interface EMOutgoingMessageWithAnswer {
     request: EMOutgoingMessageConfigGet;
     response: ExternalConfig;
   };
+  "entity/add_to/get_actions": {
+    request: EMOutgoingMessageEntityAddToGetActions;
+    response: ExternalEntityAddToActions;
+  };
 }
 
 interface EMOutgoingMessageExoplayerPlayHLS extends EMMessage {
@@ -157,6 +168,14 @@ interface EMOutgoingMessageThreadStoreInPlatformKeychain extends EMMessage {
   };
 }
 
+interface EMOutgoingMessageAddEntityTo extends EMMessage {
+  type: "entity/add_to";
+  payload: {
+    entity_id: string;
+    app_payload: string; // Opaque string received from get_actions
+  };
+}
+
 type EMOutgoingMessageWithoutAnswer =
   | EMMessageResultError
   | EMMessageResultSuccess
@@ -177,7 +196,8 @@ type EMOutgoingMessageWithoutAnswer =
   | EMOutgoingMessageThemeUpdate
   | EMOutgoingMessageThreadStoreInPlatformKeychain
   | EMOutgoingMessageImprovScan
-  | EMOutgoingMessageImprovConfigureDevice;
+  | EMOutgoingMessageImprovConfigureDevice
+  | EMOutgoingMessageAddEntityTo;
 
 export interface EMIncomingMessageRestart {
   id: number;
@@ -293,18 +313,31 @@ type EMIncomingMessage =
 type EMIncomingMessageHandler = (msg: EMIncomingMessageCommands) => boolean;
 
 export interface ExternalConfig {
-  hasSettingsScreen: boolean;
-  hasSidebar: boolean;
-  canWriteTag: boolean;
-  hasExoPlayer: boolean;
-  canCommissionMatter: boolean;
-  canImportThreadCredentials: boolean;
-  canTransferThreadCredentialsToKeychain: boolean;
-  hasAssist: boolean;
-  hasBarCodeScanner: number;
-  canSetupImprov: boolean;
-  downloadFileSupported: boolean;
-  appVersion: string;
+  hasSettingsScreen?: boolean;
+  hasSidebar?: boolean;
+  canWriteTag?: boolean;
+  hasExoPlayer?: boolean;
+  canCommissionMatter?: boolean;
+  canImportThreadCredentials?: boolean;
+  canTransferThreadCredentialsToKeychain?: boolean;
+  hasAssist?: boolean;
+  hasBarCodeScanner?: number;
+  canSetupImprov?: boolean;
+  downloadFileSupported?: boolean;
+  appVersion?: string;
+  hasEntityAddTo?: boolean; // Supports "Add to" from more-info dialog, with action coming from external app
+}
+
+export interface ExternalEntityAddToAction {
+  enabled: boolean;
+  name: string; // Translated name of the action to be displayed in the UI
+  details?: string; // Optional translated details of the action to be displayed in the UI
+  mdi_icon: string; // MDI icon name to be displayed in the UI (e.g., "mdi:car")
+  app_payload: string; // Opaque string to be sent back when the action is selected
+}
+
+export interface ExternalEntityAddToActions {
+  actions: ExternalEntityAddToAction[];
 }
 
 export class ExternalMessaging {

src/panels/calendar/dialog-calendar-event-editor.ts

@@ -332,6 +332,15 @@ class DialogCalendarEventEditor extends LitElement {
 
   private _allDayToggleChanged(ev) {
     this._allDay = ev.target.checked;
+    // When switching to all-day mode, normalize dates to midnight so time portions don't interfere with date comparisons
+    if (this._allDay && this._dtstart && this._dtend) {
+      this._dtstart = new Date(
+        formatDate(this._dtstart, this._timeZone!) + "T00:00:00"
+      );
+      this._dtend = new Date(
+        formatDate(this._dtend, this._timeZone!) + "T00:00:00"
+      );
+    }
   }
 
   private _startDateChanged(ev: CustomEvent) {

src/panels/config/areas/dialog-floor-registry-detail.ts

@@ -8,24 +8,24 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/chips/ha-chip-set";
 import "../../../components/chips/ha-input-chip";
 import "../../../components/ha-alert";
-import "../../../components/ha-button";
 import "../../../components/ha-aliases-editor";
+import "../../../components/ha-area-picker";
+import "../../../components/ha-button";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-icon-picker";
 import "../../../components/ha-picture-upload";
 import "../../../components/ha-settings-row";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-textfield";
-import "../../../components/ha-area-picker";
+import { updateAreaRegistryEntry } from "../../../data/area_registry";
 import type {
   FloorRegistryEntry,
   FloorRegistryEntryMutableParams,
 } from "../../../data/floor_registry";
 import { haStyle, haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
-import type { FloorRegistryDetailDialogParams } from "./show-dialog-floor-registry-detail";
 import { showAreaRegistryDetailDialog } from "./show-dialog-area-registry-detail";
-import { updateAreaRegistryEntry } from "../../../data/area_registry";
+import type { FloorRegistryDetailDialogParams } from "./show-dialog-floor-registry-detail";
 
 class DialogFloorDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -168,11 +168,6 @@ class DialogFloorDetail extends LitElement {
               )}
             </h3>
 
-            <p class="description">
-              ${this.hass.localize(
-                "ui.panel.config.floors.editor.areas_description"
-              )}
-            </p>
             ${areas.length
               ? html`<ha-chip-set>
                   ${repeat(
@@ -197,13 +192,17 @@ class DialogFloorDetail extends LitElement {
                       </ha-input-chip>`
                   )}
                 </ha-chip-set>`
-              : nothing}
+              : html`<p class="description">
+                  ${this.hass.localize(
+                    "ui.panel.config.floors.editor.areas_description"
+                  )}
+                </p>`}
             <ha-area-picker
               no-add
               .hass=${this.hass}
               @value-changed=${this._addArea}
               .excludeAreas=${areas.map((a) => a.area_id)}
-              .label=${this.hass.localize(
+              .addButtonLabel=${this.hass.localize(
                 "ui.panel.config.floors.editor.add_area"
               )}
             ></ha-area-picker>

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

@@ -20,6 +20,7 @@ import { subscribeEntityRegistry } from "../../../data/entity_registry";
 import type { UpdateEntity } from "../../../data/update";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import type { HomeAssistant } from "../../../types";
+import "../../../components/ha-progress-ring";
 
 @customElement("ha-config-updates")
 class HaConfigUpdates extends SubscribeMixin(LitElement) {
@@ -56,6 +57,29 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
       this._entities?.find((entity) => entity.entity_id === entityId)
   );
 
+  private _renderUpdateProgress(entity: UpdateEntity) {
+    if (entity.attributes.update_percentage != null) {
+      return html`<ha-progress-ring
+        size="small"
+        .value=${entity.attributes.update_percentage}
+        .label=${this.hass.localize(
+          "ui.panel.config.updates.update_in_progress"
+        )}
+      ></ha-progress-ring>`;
+    }
+
+    if (entity.attributes.in_progress) {
+      return html`<ha-spinner
+        size="small"
+        .ariaLabel=${this.hass.localize(
+          "ui.panel.config.updates.update_in_progress"
+        )}
+      ></ha-spinner>`;
+    }
+
+    return html`<ha-icon-next></ha-icon-next>`;
+  }
+
   protected render() {
     if (!this.updateEntities?.length) {
       return nothing;
@@ -106,13 +130,9 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
                   )}
                 ></state-badge>
                 ${this.narrow && entity.attributes.in_progress
-                  ? html`<ha-spinner
-                      class="absolute"
-                      size="small"
-                      .ariaLabel=${this.hass.localize(
-                        "ui.panel.config.updates.update_in_progress"
-                      )}
-                    ></ha-spinner>`
+                  ? html`<div class="absolute">
+                      ${this._renderUpdateProgress(entity)}
+                    </div>`
                   : nothing}
               </div>
               <span slot="headline"
@@ -128,16 +148,9 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
                   : nothing}
               </span>
               ${!this.narrow
-                ? entity.attributes.in_progress
-                  ? html`<div slot="end">
-                      <ha-spinner
-                        size="small"
-                        .ariaLabel=${this.hass.localize(
-                          "ui.panel.config.updates.update_in_progress"
-                        )}
-                      ></ha-spinner>
-                    </div>`
-                  : html`<ha-icon-next slot="end"></ha-icon-next>`
+                ? html`<div slot="end">
+                    ${this._renderUpdateProgress(entity)}
+                  </div>`
                 : nothing}
             </ha-md-list-item>
           `;
@@ -193,13 +206,13 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
         div[slot="start"] {
           position: relative;
         }
-        ha-spinner.absolute {
+        div.absolute {
           position: absolute;
           left: 6px;
           top: 6px;
         }
         state-badge.updating {
-          opacity: 0.5;
+          opacity: 0.2;
         }
       `,
     ];

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

@@ -0,0 +1,249 @@
+import {
+  mdiDelete,
+  mdiWater,
+  mdiDragHorizontalVariant,
+  mdiPencil,
+  mdiPlus,
+} from "@mdi/js";
+import type { CSSResultGroup, TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
+import { repeat } from "lit/directives/repeat";
+import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-card";
+import "../../../../components/ha-button";
+import "../../../../components/ha-icon-button";
+import "../../../../components/ha-sortable";
+import "../../../../components/ha-svg-icon";
+import type {
+  DeviceConsumptionEnergyPreference,
+  EnergyPreferences,
+  EnergyPreferencesValidation,
+} from "../../../../data/energy";
+import { saveEnergyPreferences } from "../../../../data/energy";
+import type { StatisticsMetaData } from "../../../../data/recorder";
+import { getStatisticLabel } from "../../../../data/recorder";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../../dialogs/generic/show-dialog-box";
+import { haStyle } from "../../../../resources/styles";
+import type { HomeAssistant } from "../../../../types";
+import { documentationUrl } from "../../../../util/documentation-url";
+import { showEnergySettingsDeviceWaterDialog } from "../dialogs/show-dialogs-energy";
+import "./ha-energy-validation-result";
+import { energyCardStyles } from "./styles";
+
+@customElement("ha-energy-device-settings-water")
+export class EnergyDeviceSettingsWater extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false })
+  public preferences!: EnergyPreferences;
+
+  @property({ attribute: false })
+  public statsMetadata?: Record<string, StatisticsMetaData>;
+
+  @property({ attribute: false })
+  public validationResult?: EnergyPreferencesValidation;
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-card outlined>
+        <h1 class="card-header">
+          <ha-svg-icon .path=${mdiWater}></ha-svg-icon>
+          ${this.hass.localize(
+            "ui.panel.config.energy.device_consumption_water.title"
+          )}
+        </h1>
+
+        <div class="card-content">
+          <p>
+            ${this.hass.localize(
+              "ui.panel.config.energy.device_consumption_water.sub"
+            )}
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href=${documentationUrl(
+                this.hass,
+                "/docs/energy/water/#individual-devices"
+              )}
+              >${this.hass.localize(
+                "ui.panel.config.energy.device_consumption_water.learn_more"
+              )}</a
+            >
+          </p>
+          <h3>
+            ${this.hass.localize(
+              "ui.panel.config.energy.device_consumption_water.devices"
+            )}
+          </h3>
+          <ha-sortable handle-selector=".handle" @item-moved=${this._itemMoved}>
+            <div class="devices">
+              ${repeat(
+                this.preferences.device_consumption_water,
+                (device) => device.stat_consumption,
+                (device) => html`
+                  <div class="row" .device=${device}>
+                    <div class="handle">
+                      <ha-svg-icon
+                        .path=${mdiDragHorizontalVariant}
+                      ></ha-svg-icon>
+                    </div>
+                    <span class="content"
+                      >${device.name ||
+                      getStatisticLabel(
+                        this.hass,
+                        device.stat_consumption,
+                        this.statsMetadata?.[device.stat_consumption]
+                      )}</span
+                    >
+                    <ha-icon-button
+                      .label=${this.hass.localize("ui.common.edit")}
+                      @click=${this._editDevice}
+                      .path=${mdiPencil}
+                    ></ha-icon-button>
+                    <ha-icon-button
+                      .label=${this.hass.localize("ui.common.delete")}
+                      @click=${this._deleteDevice}
+                      .device=${device}
+                      .path=${mdiDelete}
+                    ></ha-icon-button>
+                  </div>
+                `
+              )}
+            </div>
+          </ha-sortable>
+          <div class="row">
+            <ha-svg-icon .path=${mdiWater}></ha-svg-icon>
+            <ha-button
+              @click=${this._addDevice}
+              appearance="filled"
+              size="small"
+            >
+              <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon
+              >${this.hass.localize(
+                "ui.panel.config.energy.device_consumption_water.add_device"
+              )}</ha-button
+            >
+          </div>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  private _itemMoved(ev: CustomEvent): void {
+    ev.stopPropagation();
+    const { oldIndex, newIndex } = ev.detail;
+    const devices = this.preferences.device_consumption_water.concat();
+    const device = devices.splice(oldIndex, 1)[0];
+    devices.splice(newIndex, 0, device);
+
+    const newPrefs = {
+      ...this.preferences,
+      device_consumption_water: devices,
+    };
+    fireEvent(this, "value-changed", { value: newPrefs });
+    this._savePreferences(newPrefs);
+  }
+
+  private _editDevice(ev) {
+    const origDevice: DeviceConsumptionEnergyPreference =
+      ev.currentTarget.closest(".row").device;
+    showEnergySettingsDeviceWaterDialog(this, {
+      statsMetadata: this.statsMetadata,
+      device: { ...origDevice },
+      device_consumptions: this.preferences
+        .device_consumption_water as DeviceConsumptionEnergyPreference[],
+      saveCallback: async (newDevice) => {
+        const newPrefs = {
+          ...this.preferences,
+          device_consumption_water:
+            this.preferences.device_consumption_water.map((d) =>
+              d === origDevice ? newDevice : d
+            ),
+        };
+        this._sanitizeParents(newPrefs);
+        await this._savePreferences(newPrefs);
+      },
+    });
+  }
+
+  private _addDevice() {
+    showEnergySettingsDeviceWaterDialog(this, {
+      statsMetadata: this.statsMetadata,
+      device_consumptions: this.preferences
+        .device_consumption_water as DeviceConsumptionEnergyPreference[],
+      saveCallback: async (device) => {
+        await this._savePreferences({
+          ...this.preferences,
+          device_consumption_water:
+            this.preferences.device_consumption_water.concat(device),
+        });
+      },
+    });
+  }
+
+  private _sanitizeParents(prefs: EnergyPreferences) {
+    const statIds = prefs.device_consumption_water.map(
+      (d) => d.stat_consumption
+    );
+    prefs.device_consumption_water.forEach((d) => {
+      if (d.included_in_stat && !statIds.includes(d.included_in_stat)) {
+        delete d.included_in_stat;
+      }
+    });
+  }
+
+  private async _deleteDevice(ev) {
+    const deviceToDelete: DeviceConsumptionEnergyPreference =
+      ev.currentTarget.device;
+
+    if (
+      !(await showConfirmationDialog(this, {
+        title: this.hass.localize("ui.panel.config.energy.delete_source"),
+      }))
+    ) {
+      return;
+    }
+
+    try {
+      const newPrefs = {
+        ...this.preferences,
+        device_consumption_water:
+          this.preferences.device_consumption_water.filter(
+            (device) => device !== deviceToDelete
+          ),
+      };
+      this._sanitizeParents(newPrefs);
+      await this._savePreferences(newPrefs);
+    } catch (err: any) {
+      showAlertDialog(this, { title: `Failed to save config: ${err.message}` });
+    }
+  }
+
+  private async _savePreferences(preferences: EnergyPreferences) {
+    const result = await saveEnergyPreferences(this.hass, preferences);
+    fireEvent(this, "value-changed", { value: result });
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      energyCardStyles,
+      css`
+        .handle {
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-energy-device-settings-water": EnergyDeviceSettingsWater;
+  }
+}

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

@@ -0,0 +1,268 @@
+import { mdiWater } from "@mdi/js";
+import type { CSSResultGroup } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import { stopPropagation } from "../../../../common/dom/stop_propagation";
+import "../../../../components/entity/ha-entity-picker";
+import "../../../../components/entity/ha-statistic-picker";
+import "../../../../components/ha-dialog";
+import "../../../../components/ha-radio";
+import "../../../../components/ha-button";
+import "../../../../components/ha-select";
+import "../../../../components/ha-list-item";
+import type { DeviceConsumptionEnergyPreference } from "../../../../data/energy";
+import { energyStatisticHelpUrl } from "../../../../data/energy";
+import { getStatisticLabel } from "../../../../data/recorder";
+import { getSensorDeviceClassConvertibleUnits } from "../../../../data/sensor";
+import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
+import { haStyleDialog } from "../../../../resources/styles";
+import type { HomeAssistant } from "../../../../types";
+import type { EnergySettingsDeviceWaterDialogParams } from "./show-dialogs-energy";
+
+const volumeUnitClasses = ["volume"];
+
+@customElement("dialog-energy-device-settings-water")
+export class DialogEnergyDeviceSettingsWater
+  extends LitElement
+  implements HassDialog<EnergySettingsDeviceWaterDialogParams>
+{
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _params?: EnergySettingsDeviceWaterDialogParams;
+
+  @state() private _device?: DeviceConsumptionEnergyPreference;
+
+  @state() private _volume_units?: string[];
+
+  @state() private _error?: string;
+
+  private _excludeList?: string[];
+
+  private _possibleParents: DeviceConsumptionEnergyPreference[] = [];
+
+  public async showDialog(
+    params: EnergySettingsDeviceWaterDialogParams
+  ): Promise<void> {
+    this._params = params;
+    this._device = this._params.device;
+    this._computePossibleParents();
+    this._volume_units = (
+      await getSensorDeviceClassConvertibleUnits(this.hass, "water")
+    ).units;
+    this._excludeList = this._params.device_consumptions
+      .map((entry) => entry.stat_consumption)
+      .filter((id) => id !== this._device?.stat_consumption);
+  }
+
+  private _computePossibleParents() {
+    if (!this._device || !this._params) {
+      this._possibleParents = [];
+      return;
+    }
+    const children: string[] = [];
+    const devices = this._params.device_consumptions;
+    function getChildren(stat) {
+      devices.forEach((d) => {
+        if (d.included_in_stat === stat) {
+          children.push(d.stat_consumption);
+          getChildren(d.stat_consumption);
+        }
+      });
+    }
+    getChildren(this._device.stat_consumption);
+    this._possibleParents = this._params.device_consumptions.filter(
+      (d) =>
+        d.stat_consumption !== this._device!.stat_consumption &&
+        d.stat_consumption !== this._params?.device?.stat_consumption &&
+        !children.includes(d.stat_consumption)
+    );
+  }
+
+  public closeDialog() {
+    this._params = undefined;
+    this._device = undefined;
+    this._error = undefined;
+    this._excludeList = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+    return true;
+  }
+
+  protected render() {
+    if (!this._params) {
+      return nothing;
+    }
+
+    const pickableUnit = this._volume_units?.join(", ") || "";
+
+    return html`
+      <ha-dialog
+        open
+        .heading=${html`<ha-svg-icon
+            .path=${mdiWater}
+            style="--mdc-icon-size: 32px;"
+          ></ha-svg-icon>
+          ${this.hass.localize(
+            "ui.panel.config.energy.device_consumption_water.dialog.header"
+          )}`}
+        @closed=${this.closeDialog}
+      >
+        ${this._error ? html`<p class="error">${this._error}</p>` : ""}
+        <div>
+          ${this.hass.localize(
+            "ui.panel.config.energy.device_consumption_water.dialog.selected_stat_intro",
+            { unit: pickableUnit }
+          )}
+        </div>
+
+        <ha-statistic-picker
+          .hass=${this.hass}
+          .helpMissingEntityUrl=${energyStatisticHelpUrl}
+          .includeUnitClass=${volumeUnitClasses}
+          .value=${this._device?.stat_consumption}
+          .label=${this.hass.localize(
+            "ui.panel.config.energy.device_consumption_water.dialog.device_consumption_water"
+          )}
+          .excludeStatistics=${this._excludeList}
+          @value-changed=${this._statisticChanged}
+          dialogInitialFocus
+        ></ha-statistic-picker>
+
+        <ha-textfield
+          .label=${this.hass.localize(
+            "ui.panel.config.energy.device_consumption_water.dialog.display_name"
+          )}
+          type="text"
+          .disabled=${!this._device}
+          .value=${this._device?.name || ""}
+          .placeholder=${this._device
+            ? getStatisticLabel(
+                this.hass,
+                this._device.stat_consumption,
+                this._params?.statsMetadata?.[this._device.stat_consumption]
+              )
+            : ""}
+          @input=${this._nameChanged}
+        >
+        </ha-textfield>
+
+        <ha-select
+          .label=${this.hass.localize(
+            "ui.panel.config.energy.device_consumption_water.dialog.included_in_device"
+          )}
+          .value=${this._device?.included_in_stat || ""}
+          .helper=${this.hass.localize(
+            "ui.panel.config.energy.device_consumption_water.dialog.included_in_device_helper"
+          )}
+          .disabled=${!this._device}
+          @selected=${this._parentSelected}
+          @closed=${stopPropagation}
+          fixedMenuPosition
+          naturalMenuWidth
+          clearable
+        >
+          ${!this._possibleParents.length
+            ? html`
+                <ha-list-item disabled value="-"
+                  >${this.hass.localize(
+                    "ui.panel.config.energy.device_consumption_water.dialog.no_upstream_devices"
+                  )}</ha-list-item
+                >
+              `
+            : this._possibleParents.map(
+                (stat) => html`
+                  <ha-list-item .value=${stat.stat_consumption}
+                    >${stat.name ||
+                    getStatisticLabel(
+                      this.hass,
+                      stat.stat_consumption,
+                      this._params?.statsMetadata?.[stat.stat_consumption]
+                    )}</ha-list-item
+                  >
+                `
+              )}
+        </ha-select>
+
+        <ha-button
+          appearance="plain"
+          @click=${this.closeDialog}
+          slot="primaryAction"
+        >
+          ${this.hass.localize("ui.common.cancel")}
+        </ha-button>
+        <ha-button
+          @click=${this._save}
+          .disabled=${!this._device}
+          slot="primaryAction"
+        >
+          ${this.hass.localize("ui.common.save")}
+        </ha-button>
+      </ha-dialog>
+    `;
+  }
+
+  private _statisticChanged(ev: CustomEvent<{ value: string }>) {
+    if (!ev.detail.value) {
+      this._device = undefined;
+      return;
+    }
+    this._device = { stat_consumption: ev.detail.value };
+    this._computePossibleParents();
+  }
+
+  private _nameChanged(ev) {
+    const newDevice = {
+      ...this._device!,
+      name: ev.target!.value,
+    } as DeviceConsumptionEnergyPreference;
+    if (!newDevice.name) {
+      delete newDevice.name;
+    }
+    this._device = newDevice;
+  }
+
+  private _parentSelected(ev) {
+    const newDevice = {
+      ...this._device!,
+      included_in_stat: ev.target!.value,
+    } as DeviceConsumptionEnergyPreference;
+    if (!newDevice.included_in_stat) {
+      delete newDevice.included_in_stat;
+    }
+    this._device = newDevice;
+  }
+
+  private async _save() {
+    try {
+      await this._params!.saveCallback(this._device!);
+      this.closeDialog();
+    } catch (err: any) {
+      this._error = err.message;
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyleDialog,
+      css`
+        ha-statistic-picker {
+          width: 100%;
+        }
+        ha-select {
+          margin-top: 16px;
+          width: 100%;
+        }
+        ha-textfield {
+          margin-top: 16px;
+          width: 100%;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-energy-device-settings-water": DialogEnergyDeviceSettingsWater;
+  }
+}

src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts

@@ -9,6 +9,7 @@ import "../../../../components/ha-dialog";
 import "../../../../components/ha-button";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-radio";
+import "../../../../components/ha-markdown";
 import type { HaRadio } from "../../../../components/ha-radio";
 import type {
   FlowFromGridSourceEnergyPreference,
@@ -19,11 +20,7 @@ import {
   emptyFlowToGridSourceEnergyPreference,
   energyStatisticHelpUrl,
 } from "../../../../data/energy";
-import {
-  getDisplayUnit,
-  getStatisticMetadata,
-  isExternalStatistic,
-} from "../../../../data/recorder";
+import { isExternalStatistic } from "../../../../data/recorder";
 import { getSensorDeviceClassConvertibleUnits } from "../../../../data/sensor";
 import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
 import { haStyleDialog } from "../../../../resources/styles";
@@ -47,8 +44,6 @@ export class DialogEnergyGridFlowSettings
 
   @state() private _costs?: "no-costs" | "number" | "entity" | "statistic";
 
-  @state() private _pickedDisplayUnit?: string | null;
-
   @state() private _energy_units?: string[];
 
   @state() private _error?: string;
@@ -81,11 +76,6 @@ export class DialogEnergyGridFlowSettings
           : "stat_energy_to"
       ];
 
-    this._pickedDisplayUnit = getDisplayUnit(
-      this.hass,
-      initialSourceId,
-      params.metadata
-    );
     this._energy_units = (
       await getSensorDeviceClassConvertibleUnits(this.hass, "energy")
     ).units;
@@ -103,7 +93,6 @@ export class DialogEnergyGridFlowSettings
   public closeDialog() {
     this._params = undefined;
     this._source = undefined;
-    this._pickedDisplayUnit = undefined;
     this._error = undefined;
     this._excludeList = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
@@ -117,10 +106,6 @@ export class DialogEnergyGridFlowSettings
 
     const pickableUnit = this._energy_units?.join(", ") || "";
 
-    const unitPriceSensor = this._pickedDisplayUnit
-      ? `${this.hass.config.currency}/${this._pickedDisplayUnit}`
-      : undefined;
-
     const unitPriceFixed = `${this.hass.config.currency}/kWh`;
 
     const externalSource =
@@ -246,9 +231,15 @@ export class DialogEnergyGridFlowSettings
               .hass=${this.hass}
               include-domains='["sensor", "input_number"]'
               .value=${this._source.entity_energy_price}
-              .label=${`${this.hass.localize(
+              .label=${this.hass.localize(
                 `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.cost_entity_input`
-              )} ${unitPriceSensor ? ` (${unitPriceSensor})` : ""}`}
+              )}
+              .helper=${html`<ha-markdown
+                .content=${this.hass.localize(
+                  "ui.panel.config.energy.grid.flow_dialog.cost_entity_helper",
+                  { currency: this.hass.config.currency }
+                )}
+              ></ha-markdown>`}
               @value-changed=${this._priceEntityChanged}
             ></ha-entity-picker>`
           : ""}
@@ -341,16 +332,6 @@ export class DialogEnergyGridFlowSettings
   }
 
   private async _statisticChanged(ev: CustomEvent<{ value: string }>) {
-    if (ev.detail.value) {
-      const metadata = await getStatisticMetadata(this.hass, [ev.detail.value]);
-      this._pickedDisplayUnit = getDisplayUnit(
-        this.hass,
-        ev.detail.value,
-        metadata[0]
-      );
-    } else {
-      this._pickedDisplayUnit = undefined;
-    }
     this._source = {
       ...this._source!,
       [this._params!.direction === "from"

src/panels/config/energy/dialogs/show-dialogs-energy.ts

@@ -76,6 +76,13 @@ export interface EnergySettingsDeviceDialogParams {
   saveCallback: (device: DeviceConsumptionEnergyPreference) => Promise<void>;
 }
 
+export interface EnergySettingsDeviceWaterDialogParams {
+  device?: DeviceConsumptionEnergyPreference;
+  device_consumptions: DeviceConsumptionEnergyPreference[];
+  statsMetadata?: Record<string, StatisticsMetaData>;
+  saveCallback: (device: DeviceConsumptionEnergyPreference) => Promise<void>;
+}
+
 export const showEnergySettingsDeviceDialog = (
   element: HTMLElement,
   dialogParams: EnergySettingsDeviceDialogParams
@@ -152,3 +159,14 @@ export const showEnergySettingsGridFlowToDialog = (
     dialogParams: { ...dialogParams, direction: "to" },
   });
 };
+
+export const showEnergySettingsDeviceWaterDialog = (
+  element: HTMLElement,
+  dialogParams: EnergySettingsDeviceWaterDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-energy-device-settings-water",
+    dialogImport: () => import("./dialog-energy-device-settings-water"),
+    dialogParams: dialogParams,
+  });
+};

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

@@ -22,6 +22,7 @@ import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../types";
 import "../../../components/ha-alert";
 import "./components/ha-energy-device-settings";
+import "./components/ha-energy-device-settings-water";
 import "./components/ha-energy-grid-settings";
 import "./components/ha-energy-solar-settings";
 import "./components/ha-energy-battery-settings";
@@ -32,6 +33,7 @@ import { fileDownload } from "../../../util/file_download";
 const INITIAL_CONFIG: EnergyPreferences = {
   energy_sources: [],
   device_consumption: [],
+  device_consumption_water: [],
 };
 
 @customElement("ha-config-energy")
@@ -142,6 +144,13 @@ class HaConfigEnergy extends LitElement {
             .validationResult=${this._validationResult}
             @value-changed=${this._prefsChanged}
           ></ha-energy-device-settings>
+          <ha-energy-device-settings-water
+            .hass=${this.hass}
+            .preferences=${this._preferences!}
+            .statsMetadata=${this._statsMetadata}
+            .validationResult=${this._validationResult}
+            @value-changed=${this._prefsChanged}
+          ></ha-energy-device-settings-water>
         </div>
       </hass-subpage>
     `;

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

@@ -107,6 +107,8 @@ class HaConfigInfo extends LitElement {
     const customUiList: { name: string; url: string; version: string }[] =
       (window as any).CUSTOM_UI_LIST || [];
 
+    const isDark = this.hass.themes?.darkMode || false;
+
     return html`
       <hass-subpage
         .hass=${this.hass}
@@ -186,7 +188,7 @@ class HaConfigInfo extends LitElement {
                 : nothing}
             </ul>
           </ha-card>
-          <ha-card outlined class="ohf">
+          <ha-card outlined class="ohf ${isDark ? "dark" : ""}">
             <div>
               ${this.hass.localize("ui.panel.config.info.proud_part_of")}
             </div>
@@ -346,6 +348,10 @@ class HaConfigInfo extends LitElement {
           max-width: 250px;
         }
 
+        .ohf.dark img {
+          color-scheme: dark;
+        }
+
         .versions {
           display: flex;
           flex-direction: column;

src/panels/config/voice-assistants/debug/assist-pipeline-debug.ts

@@ -148,7 +148,9 @@ export class AssistPipelineDebug extends LitElement {
       ).pipeline_runs.reverse();
     } catch (e: any) {
       showAlertDialog(this, {
-        title: "Failed to fetch pipeline runs",
+        title: this.hass.localize(
+          "ui.panel.config.voice_assistants.debug.error.fetch_runs"
+        ),
         text: e.message,
       });
       return;
@@ -176,7 +178,9 @@ export class AssistPipelineDebug extends LitElement {
       ).events;
     } catch (e: any) {
       showAlertDialog(this, {
-        title: "Failed to fetch events",
+        title: this.hass.localize(
+          "ui.panel.config.voice_assistants.debug.error.fetch_events"
+        ),
         text: e.message,
       });
       return;

src/panels/config/voice-assistants/debug/assist-render-pipeline-events.ts

@@ -30,16 +30,26 @@ export class AssistPipelineEvents extends LitElement {
     const run = this._processEvents(this.events);
     if (!run) {
       if (this.events.length) {
-        return html`<ha-alert alert-type="error">Error showing run</ha-alert>
+        return html`<ha-alert alert-type="error"
+            >${this.hass.localize(
+              "ui.panel.config.voice_assistants.debug.error.showing_run"
+            )}</ha-alert
+          >
           <ha-card>
             <ha-expansion-panel>
-              <span slot="header">Raw</span>
+              <span slot="header"
+                >${this.hass.localize(
+                  "ui.panel.config.voice_assistants.debug.raw"
+                )}</span
+              >
               <pre>${JSON.stringify(this.events, null, 2)}</pre>
             </ha-expansion-panel>
           </ha-card>`;
       }
       return html`<ha-alert alert-type="warning"
-        >There were no events in this run.</ha-alert
+        >${this.hass.localize(
+          "ui.panel.config.voice_assistants.debug.no_events"
+        )}</ha-alert
       >`;
     }
     return html`

src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts

@@ -11,31 +11,16 @@ import type { HomeAssistant } from "../../../../types";
 import { formatNumber } from "../../../../common/number/format_number";
 import "../../../../components/ha-yaml-editor";
 import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
+import type { LocalizeKeys } from "../../../../common/translations/localize";
 
-const RUN_DATA = {
-  pipeline: "Pipeline",
-  language: "Language",
-};
-const WAKE_WORD_DATA = {
-  engine: "Engine",
-};
+const RUN_DATA = ["pipeline", "language"];
+const WAKE_WORD_DATA = ["engine"];
 
-const STT_DATA = {
-  engine: "Engine",
-};
+const STT_DATA = ["engine"];
 
-const INTENT_DATA = {
-  engine: "Engine",
-  language: "Language",
-  intent_input: "Input",
-};
+const INTENT_DATA = ["engine", "language", "intent_input"];
 
-const TTS_DATA = {
-  engine: "Engine",
-  language: "Language",
-  voice: "Voice",
-  tts_input: "Input",
-};
+const TTS_DATA = ["engine", "language", "voice", "tts_input"];
 
 const STAGES: Record<PipelineRun["stage"], number> = {
   ready: 0,
@@ -102,24 +87,32 @@ const renderProgress = (
   return html`${durationString}s ✅`;
 };
 
-const renderData = (data: Record<string, any>, keys: Record<string, string>) =>
-  Object.entries(keys).map(
-    ([key, label]) => html`
+const renderData = (
+  hass: HomeAssistant,
+  data: Record<string, any>,
+  keys: string[]
+) =>
+  keys.map((key) => {
+    const label = hass.localize(
+      `ui.panel.config.voice_assistants.debug.stages.${key}` as LocalizeKeys
+    );
+    return html`
       <div class="row">
         <div>${label}</div>
         <div>${data[key]}</div>
       </div>
-    `
-  );
+    `;
+  });
 
 const dataMinusKeysRender = (
+  hass: HomeAssistant,
   data: Record<string, any>,
-  keys: Record<string, string>
+  keys: string[]
 ) => {
   const result = {};
   let render = false;
   for (const key in data) {
-    if (key in keys || key === "done") {
+    if (keys.includes(key) || key === "done") {
       continue;
     }
     render = true;
@@ -127,7 +120,9 @@ const dataMinusKeysRender = (
   }
   return render
     ? html`<ha-expansion-panel>
-        <span slot="header">Raw</span>
+        <span slot="header"
+          >${hass.localize("ui.panel.config.voice_assistants.debug.raw")}</span
+        >
         <ha-yaml-editor readOnly autoUpdate .value=${result}></ha-yaml-editor>
       </ha-expansion-panel>`
     : "";
@@ -139,6 +134,12 @@ export class AssistPipelineDebug extends LitElement {
 
   @property({ attribute: false }) public pipelineRun!: PipelineRun;
 
+  private _audioElement?: HTMLAudioElement;
+
+  private get _isPlaying(): boolean {
+    return this._audioElement != null && !this._audioElement.paused;
+  }
+
   protected render(): TemplateResult {
     const lastRunStage: string = this.pipelineRun
       ? ["tts", "intent", "stt", "wake_word"].find(
@@ -177,11 +178,15 @@ export class AssistPipelineDebug extends LitElement {
       <ha-card>
         <div class="card-content">
           <div class="row heading">
-            <div>Run</div>
+            <div>
+              ${this.hass.localize(
+                "ui.panel.config.voice_assistants.debug.run"
+              )}
+            </div>
             <div>${this.pipelineRun.stage}</div>
           </div>
 
-          ${renderData(this.pipelineRun.run, RUN_DATA)}
+          ${renderData(this.hass, this.pipelineRun.run, RUN_DATA)}
           ${messages.length > 0
             ? html`
                 <div class="messages">
@@ -203,23 +208,39 @@ export class AssistPipelineDebug extends LitElement {
             <ha-card>
               <div class="card-content">
                 <div class="row heading">
-                  <span>Wake word</span>
+                  <span
+                    >${this.hass.localize(
+                      "ui.panel.config.voice_assistants.debug.stages.wake_word"
+                    )}</span
+                  >
                   ${renderProgress(this.hass, this.pipelineRun, "wake_word")}
                 </div>
                 ${this.pipelineRun.wake_word
                   ? html`
                       <div class="card-content">
-                        ${renderData(this.pipelineRun.wake_word, STT_DATA)}
+                        ${renderData(
+                          this.hass,
+                          this.pipelineRun.wake_word,
+                          WAKE_WORD_DATA
+                        )}
                         ${this.pipelineRun.wake_word.wake_word_output
                           ? html`<div class="row">
-                                <div>Model</div>
+                                <div>
+                                  ${this.hass.localize(
+                                    "ui.panel.config.voice_assistants.debug.stages.model"
+                                  )}
+                                </div>
                                 <div>
                                   ${this.pipelineRun.wake_word.wake_word_output
                                     .ww_id}
                                 </div>
                               </div>
                               <div class="row">
-                                <div>Timestamp</div>
+                                <div>
+                                  ${this.hass.localize(
+                                    "ui.panel.config.voice_assistants.debug.stages.timestamp"
+                                  )}
+                                </div>
                                 <div>
                                   ${this.pipelineRun.wake_word.wake_word_output
                                     .timestamp}
@@ -227,6 +248,7 @@ export class AssistPipelineDebug extends LitElement {
                               </div>`
                           : ""}
                         ${dataMinusKeysRender(
+                          this.hass,
                           this.pipelineRun.wake_word,
                           WAKE_WORD_DATA
                         )}
@@ -243,7 +265,11 @@ export class AssistPipelineDebug extends LitElement {
             <ha-card>
               <div class="card-content">
                 <div class="row heading">
-                  <span>Speech-to-text</span>
+                  <span
+                    >${this.hass.localize(
+                      "ui.panel.config.voice_assistants.debug.stages.speech_to_text"
+                    )}</span
+                  >
                   ${renderProgress(
                     this.hass,
                     this.pipelineRun,
@@ -254,18 +280,30 @@ export class AssistPipelineDebug extends LitElement {
                 ${this.pipelineRun.stt
                   ? html`
                       <div class="card-content">
-                        ${renderData(this.pipelineRun.stt, STT_DATA)}
+                        ${renderData(this.hass, this.pipelineRun.stt, STT_DATA)}
                         <div class="row">
-                          <div>Language</div>
+                          <div>
+                            ${this.hass.localize(
+                              "ui.panel.config.voice_assistants.debug.stages.language"
+                            )}
+                          </div>
                           <div>${this.pipelineRun.stt.metadata.language}</div>
                         </div>
                         ${this.pipelineRun.stt.stt_output
                           ? html`<div class="row">
-                              <div>Output</div>
+                              <div>
+                                ${this.hass.localize(
+                                  "ui.panel.config.voice_assistants.debug.stages.output"
+                                )}
+                              </div>
                               <div>${this.pipelineRun.stt.stt_output.text}</div>
                             </div>`
                           : ""}
-                        ${dataMinusKeysRender(this.pipelineRun.stt, STT_DATA)}
+                        ${dataMinusKeysRender(
+                          this.hass,
+                          this.pipelineRun.stt,
+                          STT_DATA
+                        )}
                       </div>
                     `
                   : ""}
@@ -279,16 +317,28 @@ export class AssistPipelineDebug extends LitElement {
             <ha-card>
               <div class="card-content">
                 <div class="row heading">
-                  <span>Natural Language Processing</span>
+                  <span
+                    >${this.hass.localize(
+                      "ui.panel.config.voice_assistants.debug.stages.natural_language_processing"
+                    )}</span
+                  >
                   ${renderProgress(this.hass, this.pipelineRun, "intent")}
                 </div>
                 ${this.pipelineRun.intent
                   ? html`
                       <div class="card-content">
-                        ${renderData(this.pipelineRun.intent, INTENT_DATA)}
+                        ${renderData(
+                          this.hass,
+                          this.pipelineRun.intent,
+                          INTENT_DATA
+                        )}
                         ${this.pipelineRun.intent.intent_output
                           ? html`<div class="row">
-                                <div>Response type</div>
+                                <div>
+                                  ${this.hass.localize(
+                                    "ui.panel.config.voice_assistants.debug.stages.response_type"
+                                  )}
+                                </div>
                                 <div>
                                   ${this.pipelineRun.intent.intent_output
                                     .response.response_type}
@@ -297,7 +347,11 @@ export class AssistPipelineDebug extends LitElement {
                               ${this.pipelineRun.intent.intent_output.response
                                 .response_type === "error"
                                 ? html`<div class="row">
-                                    <div>Error code</div>
+                                    <div>
+                                      ${this.hass.localize(
+                                        "ui.panel.config.voice_assistants.debug.error.code"
+                                      )}
+                                    </div>
                                     <div>
                                       ${this.pipelineRun.intent.intent_output
                                         .response.data.code}
@@ -306,18 +360,27 @@ export class AssistPipelineDebug extends LitElement {
                                 : ""}`
                           : ""}
                         <div class="row">
-                          <div>Prefer handling locally</div>
+                          <div>
+                            ${this.hass.localize(
+                              "ui.panel.config.voice_assistants.debug.stages.prefer_local"
+                            )}
+                          </div>
                           <div>
                             ${this.pipelineRun.intent.prefer_local_intents}
                           </div>
                         </div>
                         <div class="row">
-                          <div>Processed locally</div>
+                          <div>
+                            ${this.hass.localize(
+                              "ui.panel.config.voice_assistants.debug.stages.processed_locally"
+                            )}
+                          </div>
                           <div>
                             ${this.pipelineRun.intent.processed_locally}
                           </div>
                         </div>
                         ${dataMinusKeysRender(
+                          this.hass,
                           this.pipelineRun.intent,
                           INTENT_DATA
                         )}
@@ -334,14 +397,22 @@ export class AssistPipelineDebug extends LitElement {
             <ha-card>
               <div class="card-content">
                 <div class="row heading">
-                  <span>Text-to-speech</span>
+                  <span
+                    >${this.hass.localize(
+                      "ui.panel.config.voice_assistants.debug.stages.text_to_speech"
+                    )}</span
+                  >
                   ${renderProgress(this.hass, this.pipelineRun, "tts")}
                 </div>
                 ${this.pipelineRun.tts
                   ? html`
                       <div class="card-content">
-                        ${renderData(this.pipelineRun.tts, TTS_DATA)}
-                        ${dataMinusKeysRender(this.pipelineRun.tts, TTS_DATA)}
+                        ${renderData(this.hass, this.pipelineRun.tts, TTS_DATA)}
+                        ${dataMinusKeysRender(
+                          this.hass,
+                          this.pipelineRun.tts,
+                          TTS_DATA
+                        )}
                       </div>
                     `
                   : ""}
@@ -349,8 +420,19 @@ export class AssistPipelineDebug extends LitElement {
               ${this.pipelineRun?.tts?.tts_output
                 ? html`
                     <div class="card-actions">
-                      <ha-button @click=${this._playTTS}>
-                        Play Audio
+                      <ha-button
+                        .variant=${this._isPlaying ? "danger" : "brand"}
+                        @click=${this._isPlaying
+                          ? this._stopTTS
+                          : this._playTTS}
+                      >
+                        ${this._isPlaying
+                          ? this.hass.localize(
+                              "ui.panel.config.voice_assistants.debug.stop_audio"
+                            )
+                          : this.hass.localize(
+                              "ui.panel.config.voice_assistants.debug.play_audio"
+                            )}
                       </ha-button>
                     </div>
                   `
@@ -361,7 +443,11 @@ export class AssistPipelineDebug extends LitElement {
       ${maybeRenderError(this.pipelineRun, "tts", lastRunStage)}
       <ha-card>
         <ha-expansion-panel>
-          <span slot="header">Raw</span>
+          <span slot="header"
+            >${this.hass.localize(
+              "ui.panel.config.voice_assistants.debug.raw"
+            )}</span
+          >
           <ha-yaml-editor
             read-only
             auto-update
@@ -373,14 +459,48 @@ export class AssistPipelineDebug extends LitElement {
   }
 
   private _playTTS(): void {
+    // Stop any existing audio first
+    this._stopTTS();
+
     const url = this.pipelineRun!.tts!.tts_output!.url;
-    const audio = new Audio(url);
-    audio.addEventListener("error", () => {
-      showAlertDialog(this, { title: "Error", text: "Error playing audio" });
+    this._audioElement = new Audio(url);
+
+    this._audioElement.addEventListener("error", () => {
+      showAlertDialog(this, {
+        title: this.hass.localize(
+          "ui.panel.config.voice_assistants.debug.error.title"
+        ),
+        text: this.hass.localize(
+          "ui.panel.config.voice_assistants.debug.error.playing_audio"
+        ),
+      });
     });
-    audio.addEventListener("canplaythrough", () => {
-      audio.play();
+
+    this._audioElement.addEventListener("play", () => {
+      this.requestUpdate();
     });
+
+    this._audioElement.addEventListener("ended", () => {
+      this.requestUpdate();
+    });
+
+    this._audioElement.addEventListener("canplaythrough", () => {
+      this._audioElement!.play();
+    });
+  }
+
+  private _stopTTS(): void {
+    if (this._audioElement) {
+      this._audioElement.pause();
+      this._audioElement.currentTime = 0;
+      this._audioElement = undefined;
+      this.requestUpdate();
+    }
+  }
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._stopTTS();
   }
 
   static styles = css`

src/panels/energy/cards/energy-setup-wizard-card.ts

@@ -30,6 +30,7 @@ export class EnergySetupWizard extends LitElement implements LovelaceCard {
   @state() private _preferences: EnergyPreferences = {
     energy_sources: [],
     device_consumption: [],
+    device_consumption_water: [],
   };
 
   public getCardSize() {

src/panels/logbook/ha-logbook.ts

@@ -52,6 +52,8 @@ export class HaLogbook extends LitElement {
 
   @property({ attribute: false }) public deviceIds?: string[];
 
+  @property({ attribute: false }) public stateFilter?: string[];
+
   @property({ type: Boolean }) public narrow = false;
 
   @property({ type: Boolean, reflect: true }) public virtualize = false;
@@ -165,7 +167,7 @@ export class HaLogbook extends LitElement {
   protected willUpdate(changedProps: PropertyValues): void {
     let changed = changedProps.has("time");
 
-    for (const key of ["entityIds", "deviceIds"]) {
+    for (const key of ["entityIds", "deviceIds", "stateFilter"]) {
       if (!changedProps.has(key)) {
         continue;
       }
@@ -352,9 +354,19 @@ export class HaLogbook extends LitElement {
       "recent" in this.time
         ? findStartOfRecentTime(new Date(), this.time.recent)
         : undefined;
+
+    let eventsFiltered: LogbookEntry[] | undefined;
+    if (this.stateFilter && this.stateFilter.length > 0) {
+      eventsFiltered = streamMessage.events.filter(
+        (e) => e.state && this.stateFilter?.includes(e.state)
+      );
+    } else {
+      eventsFiltered = [...streamMessage.events];
+    }
+
     // Put newest ones on top. Reverse works in-place so
     // make a copy first.
-    const newEntries = [...streamMessage.events].reverse();
+    const newEntries = eventsFiltered.reverse();
     if (!this._logbookEntries || !this._logbookEntries.length) {
       this._logbookEntries = newEntries;
       return;

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

@@ -80,41 +80,44 @@ export class HuiEnergyCompareCard
 
     return html`
       <ha-alert dismissable @alert-dismissed-clicked=${this._stopCompare}>
-        ${this.hass.localize("ui.panel.energy.compare.info", {
-          start: html`<b
-            >${formatDate(
-              this._start!,
-              this.hass.locale,
-              this.hass.config
-            )}${dayDifference > 0
-              ? ` -
+        ${this.hass.localize(
+          "ui.panel.lovelace.cards.energy.energy_compare.info",
+          {
+            start: html`<b
+              >${formatDate(
+                this._start!,
+                this.hass.locale,
+                this.hass.config
+              )}${dayDifference > 0
+                ? ` -
           ${formatDate(
             this._end || endOfDay(new Date()),
             this.hass.locale,
             this.hass.config
           )}`
-              : ""}</b
-          >`,
-          end: html`<b
-              >${formatDate(
-                this._startCompare,
-                this.hass.locale,
-                this.hass.config
-              )}${dayDifference > 0
-                ? ` -
-          ${formatDate(this._endCompare, this.hass.locale, this.hass.config)}`
                 : ""}</b
-            >
-            <button class="link" @click=${this._changeCompareMode}>
-              (${this._compareMode === CompareMode.PREVIOUS
-                ? this.hass.localize(
-                    "ui.panel.energy.compare.compare_previous_year"
-                  )
-                : this.hass.localize(
-                    "ui.panel.energy.compare.compare_previous_period"
-                  )})
-            </button>`,
-        })}
+            >`,
+            end: html`<b
+                >${formatDate(
+                  this._startCompare,
+                  this.hass.locale,
+                  this.hass.config
+                )}${dayDifference > 0
+                  ? ` -
+          ${formatDate(this._endCompare, this.hass.locale, this.hass.config)}`
+                  : ""}</b
+              >
+              <button class="link" @click=${this._changeCompareMode}>
+                (${this._compareMode === CompareMode.PREVIOUS
+                  ? this.hass.localize(
+                      "ui.panel.lovelace.cards.energy.energy_compare.compare_previous_year"
+                    )
+                  : this.hass.localize(
+                      "ui.panel.lovelace.cards.energy.energy_compare.compare_previous_period"
+                    )})
+              </button>`,
+          }
+        )}
       </ha-alert>
     `;
   }

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

@@ -61,8 +61,6 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
 
   @state() private _calendars: Calendar[] = [];
 
-  @state() private _eventDisplay = "list-item";
-
   @state() private _narrow = false;
 
   @state() private _error?: string = undefined;
@@ -144,7 +142,6 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
           .hass=${this.hass}
           .views=${views}
           .initialView=${this._config.initial_view!}
-          .eventDisplay=${this._eventDisplay}
           .error=${this._error}
           @view-changed=${this._handleViewChanged}
         ></ha-full-calendar>
@@ -174,8 +171,6 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
   }
 
   private _handleViewChanged(ev: HASSDomEvent<CalendarViewChanged>): void {
-    this._eventDisplay =
-      ev.detail.view === "dayGridMonth" ? "list-item" : "auto";
     this._startDate = ev.detail.start;
     this._endDate = ev.detail.end;
     this._fetchCalendarEvents();

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

@@ -1,5 +1,6 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
@@ -97,7 +98,10 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
       : `${sandbox_user_params} ${IFRAME_SANDBOX}`;
 
     return html`
-      <ha-card .header=${this._config.title}>
+      <ha-card
+        class=${classMap({ "hide-background": this._config.hide_background })}
+        .header=${this._config.title}
+      >
         <div
           id="root"
           style=${styleMap({
@@ -133,6 +137,12 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
       flex-direction: column;
     }
 
+    ha-card.hide-background {
+      background: transparent;
+      box-shadow: none;
+      border: none;
+    }
+
     #root {
       width: 100%;
       height: 100%;

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

@@ -64,6 +64,8 @@ export class HuiLogbookCard extends LitElement implements LovelaceCard {
 
   @state() private _targetPickerValue: HassServiceTarget = {};
 
+  @state() private _stateFilter?: string[];
+
   public getCardSize(): number {
     return 9 + (this._config?.title ? 1 : 0);
   }
@@ -129,6 +131,8 @@ export class HuiLogbookCard extends LitElement implements LovelaceCard {
     };
 
     this._targetPickerValue = target;
+
+    this._stateFilter = ensureArray(config.state_filter);
   }
 
   private _getEntityIds(): string[] | undefined {
@@ -209,6 +213,7 @@ export class HuiLogbookCard extends LitElement implements LovelaceCard {
             .hass=${this.hass}
             .time=${this._time}
             .entityIds=${this._getEntityIds()}
+            .stateFilter=${this._stateFilter}
             narrow
             relative-time
             virtualize

src/panels/lovelace/cards/types.ts

@@ -323,6 +323,7 @@ export interface IframeCardConfig extends LovelaceCardConfig {
   title?: string;
   allow?: string;
   url: string;
+  hide_background?: boolean;
 }
 
 export interface LightCardConfig extends LovelaceCardConfig {
@@ -345,6 +346,7 @@ export interface LogbookCardConfig extends LovelaceCardConfig {
   title?: string;
   hours_to_show?: number;
   theme?: string;
+  state_filter?: string[];
 }
 
 export interface MapEntityConfig extends EntityConfig {

src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts

@@ -16,6 +16,7 @@ const cardConfigStruct = assign(
     url: optional(string()),
     aspect_ratio: optional(string()),
     allow_open_top_navigation: optional(boolean()),
+    hide_background: optional(boolean()),
   })
 );
 
@@ -29,6 +30,7 @@ const SCHEMA = [
       { name: "aspect_ratio", selector: { text: {} } },
     ],
   },
+  { name: "hide_background", selector: { boolean: {} } },
 ] as const;
 
 @customElement("hui-iframe-card-editor")
@@ -56,6 +58,7 @@ export class HuiIframeCardEditor
         .data=${this._config}
         .schema=${SCHEMA}
         .computeLabel=${this._computeLabelCallback}
+        .computeHelper=${this._computeHelperCallback}
         @value-changed=${this._valueChanged}
       ></ha-form>
     `;
@@ -65,8 +68,29 @@ export class HuiIframeCardEditor
     fireEvent(this, "config-changed", { config: ev.detail.value });
   }
 
-  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) =>
-    this.hass!.localize(`ui.panel.lovelace.editor.card.generic.${schema.name}`);
+  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
+    switch (schema.name) {
+      case "hide_background":
+        return this.hass!.localize(
+          "ui.panel.lovelace.editor.card.iframe.hide_background"
+        );
+      default:
+        return this.hass!.localize(
+          `ui.panel.lovelace.editor.card.generic.${schema.name}`
+        );
+    }
+  };
+
+  private _computeHelperCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
+    switch (schema.name) {
+      case "hide_background":
+        return this.hass!.localize(
+          "ui.panel.lovelace.editor.card.iframe.hide_background_helper"
+        );
+      default:
+        return "";
+    }
+  };
 }
 
 declare global {

src/panels/lovelace/editor/config-elements/hui-logbook-card-editor.ts

@@ -1,6 +1,7 @@
 import type { HassServiceTarget } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import {
   array,
   assert,
@@ -18,6 +19,7 @@ import "../../../../components/ha-target-picker";
 import type { HaEntityPickerEntityFilterFunc } from "../../../../data/entity";
 import { filterLogbookCompatibleEntities } from "../../../../data/logbook";
 import { targetStruct } from "../../../../data/script";
+import { resolveEntityIDs } from "../../../../data/selector";
 import { getSensorNumericDeviceClasses } from "../../../../data/sensor";
 import type { HomeAssistant } from "../../../../types";
 import { DEFAULT_HOURS_TO_SHOW } from "../../cards/hui-logbook-card";
@@ -33,6 +35,7 @@ const cardConfigStruct = assign(
     hours_to_show: optional(number()),
     theme: optional(string()),
     target: optional(targetStruct),
+    state_filter: optional(array(string())),
   })
 );
 
@@ -50,6 +53,13 @@ const SCHEMA = [
       },
     ],
   },
+  {
+    name: "state_filter",
+    context: {
+      filter_entity: "context_entities",
+    },
+    selector: { state: { multiple: true } },
+  },
 ] as const;
 
 @customElement("hui-logbook-card-editor")
@@ -106,7 +116,13 @@ export class HuiLogbookCardEditor
     return html`
       <ha-form
         .hass=${this.hass}
-        .data=${this._config}
+        .data=${this._data(
+          this._config,
+          this._targetPicker,
+          this.hass.entities,
+          this.hass.devices,
+          this.hass.areas
+        )}
         .schema=${SCHEMA}
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
@@ -121,6 +137,25 @@ export class HuiLogbookCardEditor
     `;
   }
 
+  private _data = memoizeOne(
+    (
+      config: LogbookCardConfig,
+      target: HassServiceTarget,
+      entities: HomeAssistant["entities"],
+      devices: HomeAssistant["devices"],
+      areas: HomeAssistant["areas"]
+    ) => ({
+      ...config,
+      context_entities: resolveEntityIDs(
+        this.hass!,
+        target,
+        entities,
+        devices,
+        areas
+      ),
+    })
+  );
+
   private _filterFunc: HaEntityPickerEntityFilterFunc = (entity) =>
     filterLogbookCompatibleEntities(entity, this._sensorNumericDeviceClasses);
 
@@ -130,7 +165,9 @@ export class HuiLogbookCardEditor
   }
 
   private _valueChanged(ev: CustomEvent): void {
-    fireEvent(this, "config-changed", { config: ev.detail.value });
+    const newConfig = { ...ev.detail.value };
+    delete newConfig.context_entities;
+    fireEvent(this, "config-changed", { config: newConfig });
   }
 
   private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
@@ -141,6 +178,10 @@ export class HuiLogbookCardEditor
         )} (${this.hass!.localize(
           "ui.panel.lovelace.editor.card.config.optional"
         )})`;
+      case "state_filter":
+        return this.hass!.localize(
+          "ui.panel.lovelace.editor.card.logbook.state_filter"
+        );
       default:
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.generic.${schema.name}`

src/translations/en.json

@@ -1434,6 +1434,7 @@
         "back_to_info": "Back to info",
         "info": "Information",
         "related": "Related",
+        "add_entity_to": "Add to",
         "history": "History",
         "aggregate": "5-minute aggregated",
         "logbook": "Activity",
@@ -1450,6 +1451,10 @@
           "last_action": "Last action",
           "last_triggered": "Last triggered"
         },
+        "add_to": {
+          "no_actions": "No actions available",
+          "action_failed": "Failed to perform the action {error}"
+        },
         "sun": {
           "azimuth": "Azimuth",
           "elevation": "Elevation",
@@ -3071,6 +3076,7 @@
             "remove_co2_signal": "Remove Electricity Maps integration",
             "add_co2_signal": "Add Electricity Maps integration",
             "flow_dialog": {
+              "cost_entity_helper": "Any sensor with a unit of `{currency}/(valid energy unit)` (e.g. `{currency}/Wh` or `{currency}/kWh`) may be used and will be automatically converted.",
               "from": {
                 "header": "Configure grid consumption",
                 "paragraph": "Grid consumption is the energy that flows from the energy grid to your home.",
@@ -3202,6 +3208,22 @@
               "included_in_device_helper": "If this device is already counted by another device (such as a smart switch measured by a smart breaker), selecting the upstream device prevents duplicate energy tracking.",
               "no_upstream_devices": "No eligible upstream devices"
             }
+          },
+          "device_consumption_water": {
+            "title": "Individual water devices",
+            "sub": "Tracking the water usage of individual devices allows Home Assistant to break down your water usage by device.",
+            "learn_more": "More information on how to get started.",
+            "devices": "Devices",
+            "add_device": "Add device",
+            "dialog": {
+              "header": "Add a water device",
+              "display_name": "Display name",
+              "device_consumption_water": "Device water consumption",
+              "selected_stat_intro": "Select the water sensor that measures the device's water usage in either of {unit}.",
+              "included_in_device": "Upstream device",
+              "included_in_device_helper": "If this device is already counted by another device (such as a water meter measured by the main water supply), selecting the upstream device prevents duplicate water tracking.",
+              "no_upstream_devices": "No eligible upstream devices"
+            }
           }
         },
         "helpers": {
@@ -3631,6 +3653,36 @@
             "older_run": "Older run",
             "newer_run": "Newer run",
             "start_debug_run": "Start debug run",
+            "error": {
+              "code": "Error code",
+              "fetch_events": "Failed to fetch events",
+              "fetch_runs": "Failed to fetch pipeline runs",
+              "playing_audio": "Error playing audio",
+              "showing_run": "Error showing run",
+              "title": "Error"
+            },
+            "no_events": "There were no events in this run.",
+            "play_audio": "Play audio",
+            "raw": "Raw",
+            "run": "Run",
+            "stages": {
+              "engine": "Engine",
+              "input": "Input",
+              "language": "Language",
+              "model": "Model",
+              "natural_language_processing": "Natural language processing",
+              "output": "Output",
+              "pipeline": "Pipeline",
+              "prefer_local": "Prefer handling locally",
+              "processed_locally": "Processed locally",
+              "response_type": "Response type",
+              "speech_to_text": "Speech-to-text",
+              "text_to_speech": "Text-to-speech",
+              "timestamp": "Timestamp",
+              "voice": "Voice",
+              "wake_word": "Wake word"
+            },
+            "stop_audio": "Stop audio",
             "pipeline": {
               "header": "Assist pipeline",
               "run_text_pipeline": "Run text pipeline",
@@ -7106,6 +7158,11 @@
               "card_indicates_energy_used": "This card indicates how much of the electricity consumed by your home was generated using non-fossil fuels like solar, wind, and nuclear. The higher, the better!",
               "low_carbon_energy_consumed": "Low-carbon electricity consumed",
               "low_carbon_energy_not_calculated": "Consumed low-carbon electricity couldn't be calculated"
+            },
+            "energy_compare": {
+              "info": "You are comparing the period {start} with the period {end}",
+              "compare_previous_year": "Compare previous year",
+              "compare_previous_period": "Compare previous period"
             }
           },
           "heading": {
@@ -7669,7 +7726,8 @@
             },
             "logbook": {
               "name": "Activity",
-              "description": "The Activity card shows a list of events for entities."
+              "description": "The Activity card shows a list of events for entities.",
+              "state_filter": "State filter"
             },
             "history-graph": {
               "name": "History graph",
@@ -7747,7 +7805,9 @@
             },
             "iframe": {
               "name": "Webpage",
-              "description": "The Webpage card allows you to embed your favorite webpage right into Home Assistant."
+              "description": "The Webpage card allows you to embed your favorite webpage right into Home Assistant.",
+              "hide_background": "Hide background",
+              "hide_background_helper": "Useful for pages which allow a transparent background."
             },
             "light": {
               "name": "Light",
@@ -9353,11 +9413,6 @@
       "energy": {
         "download_data": "[%key:ui::panel::history::download_data%]",
         "configure": "[%key:ui::dialogs::quick-bar::commands::navigation::energy%]",
-        "compare": {
-          "info": "You are comparing the period {start} with the period {end}",
-          "compare_previous_year": "Compare previous year",
-          "compare_previous_period": "Compare previous period"
-        },
         "setup": {
           "next": "Next",
           "back": "Back",