Add helper

Don't show summary card if summary dashboard are empty

.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

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      = "20251103.0"
+version      = "20251029.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"

src/common/entity/entity_filter.ts

@@ -9,9 +9,9 @@ type EntityCategory = "none" | "config" | "diagnostic";
 export interface EntityFilter {
   domain?: string | string[];
   device_class?: string | string[];
-  device?: string | string[];
-  area?: string | string[];
-  floor?: string | string[];
+  device?: string | null | (string | null)[];
+  area?: string | null | (string | null)[];
+  floor?: string | null | (string | null)[];
   label?: string | string[];
   entity_category?: EntityCategory | EntityCategory[];
   hidden_platform?: string | string[];
@@ -19,6 +19,18 @@ export interface EntityFilter {
 
 export type EntityFilterFunc = (entityId: string) => boolean;
 
+const normalizeFilterArray = <T>(
+  value: T | null | T[] | (T | null)[] | undefined
+): Set<T | null> | undefined => {
+  if (value === undefined) {
+    return undefined;
+  }
+  if (value === null) {
+    return new Set([null]);
+  }
+  return new Set(ensureArray(value));
+};
+
 export const generateEntityFilter = (
   hass: HomeAssistant,
   filter: EntityFilter
@@ -29,11 +41,9 @@ export const generateEntityFilter = (
   const deviceClasses = filter.device_class
     ? new Set(ensureArray(filter.device_class))
     : undefined;
-  const floors = filter.floor ? new Set(ensureArray(filter.floor)) : undefined;
-  const areas = filter.area ? new Set(ensureArray(filter.area)) : undefined;
-  const devices = filter.device
-    ? new Set(ensureArray(filter.device))
-    : undefined;
+  const floors = normalizeFilterArray(filter.floor);
+  const areas = normalizeFilterArray(filter.area);
+  const devices = normalizeFilterArray(filter.device);
   const entityCategories = filter.entity_category
     ? new Set(ensureArray(filter.entity_category))
     : undefined;
@@ -73,23 +83,20 @@ export const generateEntityFilter = (
     }
 
     if (floors) {
-      if (!floor || !floors.has(floor.floor_id)) {
+      const floorId = floor?.floor_id ?? null;
+      if (!floors.has(floorId)) {
         return false;
       }
     }
     if (areas) {
-      if (!area) {
-        return false;
-      }
-      if (!areas.has(area.area_id)) {
+      const areaId = area?.area_id ?? null;
+      if (!areas.has(areaId)) {
         return false;
       }
     }
     if (devices) {
-      if (!device) {
-        return false;
-      }
-      if (!devices.has(device.id)) {
+      const deviceId = device?.id ?? null;
+      if (!devices.has(deviceId)) {
         return false;
       }
     }

src/components/ha-tooltip.ts

@@ -9,7 +9,7 @@ export class HaTooltip extends Tooltip {
   @property({ attribute: "show-delay", type: Number }) showDelay = 150;
 
   /** The amount of time to wait before hiding the tooltip when the user mouses out.. */
-  @property({ attribute: "hide-delay", type: Number }) hideDelay = 400;
+  @property({ attribute: "hide-delay", type: Number }) hideDelay = 150;
 
   static get styles(): CSSResultGroup {
     return [

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/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/climate/strategies/climate-view-strategy.ts

@@ -115,6 +115,24 @@ const processAreasForClimate = (
   return cards;
 };
 
+const processUnassignedEntities = (
+  hass: HomeAssistant,
+  entities: string[]
+): LovelaceCardConfig[] => {
+  const unassignedFilter = generateEntityFilter(hass, {
+    area: null,
+  });
+  const unassignedEntities = entities.filter(unassignedFilter);
+  const areaCards: LovelaceCardConfig[] = [];
+  const computeTileCard = computeAreaTileCardConfig(hass, "", true);
+
+  for (const entityId of unassignedEntities) {
+    areaCards.push(computeTileCard(entityId));
+  }
+
+  return areaCards;
+};
+
 @customElement("climate-view-strategy")
 export class ClimateViewStrategy extends ReactiveElement {
   static async generate(
@@ -190,10 +208,33 @@ export class ClimateViewStrategy extends ReactiveElement {
       }
     }
 
+    // Process unassigned entities
+    const unassignedCards = processUnassignedEntities(hass, entities);
+
+    if (unassignedCards.length > 0) {
+      const section: LovelaceSectionRawConfig = {
+        type: "grid",
+        column_span: 2,
+        cards: [
+          {
+            type: "heading",
+            heading:
+              sections.length > 0
+                ? hass.localize(
+                    "ui.panel.lovelace.strategy.climate.other_devices"
+                  )
+                : hass.localize("ui.panel.lovelace.strategy.climate.devices"),
+          },
+          ...unassignedCards,
+        ],
+      };
+      sections.push(section);
+    }
+
     return {
       type: "sections",
       max_columns: 2,
-      sections: sections || [],
+      sections: sections,
     };
   }
 }

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/entities/editor-tabs/settings/entity-settings-helper-tab.ts

@@ -4,6 +4,7 @@ import { customElement, property, query, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../../../common/config/is_component_loaded";
 import { dynamicElement } from "../../../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../../../common/dom/fire_event";
+import "../../../../../components/ha-button";
 import type { ExtEntityRegistryEntry } from "../../../../../data/entity_registry";
 import { removeEntityRegistryEntry } from "../../../../../data/entity_registry";
 import { HELPERS_CRUD } from "../../../../../data/helpers_crud";
@@ -22,7 +23,6 @@ import "../../../helpers/forms/ha-schedule-form";
 import "../../../helpers/forms/ha-timer-form";
 import "../../../voice-assistants/entity-voice-settings";
 import "../../entity-registry-settings-editor";
-import "../../../../../components/ha-button";
 import type { EntityRegistrySettingsEditor } from "../../entity-registry-settings-editor";
 
 @customElement("entity-settings-helper-tab")
@@ -72,22 +72,28 @@ export class EntitySettingsHelperTab extends LitElement {
         ${this._error
           ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
           : ""}
+        ${this._item === null
+          ? html`<ha-alert alert-type="info"
+              >${this.hass.localize(
+                "ui.dialogs.helper_settings.yaml_not_editable"
+              )}</ha-alert
+            >`
+          : nothing}
         ${!this._componentLoaded
           ? this.hass.localize(
               "ui.dialogs.helper_settings.platform_not_loaded",
               { platform: this.entry.platform }
             )
-          : this._item === null
-            ? this.hass.localize("ui.dialogs.helper_settings.yaml_not_editable")
-            : html`
-                <span @value-changed=${this._valueChanged}>
-                  ${dynamicElement(`ha-${this.entry.platform}-form`, {
-                    hass: this.hass,
-                    item: this._item,
-                    entry: this.entry,
-                  })}
-                </span>
-              `}
+          : html`
+              <span @value-changed=${this._valueChanged}>
+                ${dynamicElement(`ha-${this.entry.platform}-form`, {
+                  hass: this.hass,
+                  item: this._item,
+                  entry: this.entry,
+                  disabled: this._item === null,
+                })}
+              </span>
+            `}
         <entity-registry-settings-editor
           .hass=${this.hass}
           .entry=${this.entry}
@@ -122,6 +128,9 @@ export class EntitySettingsHelperTab extends LitElement {
   }
 
   private _valueChanged(ev: CustomEvent): void {
+    if (this._item === null) {
+      return;
+    }
     this._error = undefined;
     this._item = ev.detail.value;
   }
@@ -195,6 +204,10 @@ export class EntitySettingsHelperTab extends LitElement {
           display: block;
           padding: 0 !important;
         }
+        ha-alert {
+          display: block;
+          margin-bottom: var(--ha-space-4);
+        }
         .form {
           padding: 20px 24px;
         }

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

@@ -784,7 +784,7 @@ export class EntityRegistrySettingsEditor extends LitElement {
       <ha-labels-picker
         .hass=${this.hass}
         .value=${this._labels}
-        .disabled=${this.disabled}
+        .disabled=${!!this.disabled}
         @value-changed=${this._labelsChanged}
       ></ha-labels-picker>
       ${this._cameraPrefs

src/panels/config/helpers/forms/ha-counter-form.ts

@@ -17,6 +17,8 @@ class HaCounterForm extends LitElement {
 
   @property({ type: Boolean }) public new = false;
 
+  @property({ type: Boolean }) public disabled = false;
+
   private _item?: Partial<Counter>;
 
   @state() private _name!: string;
@@ -82,6 +84,7 @@ class HaCounterForm extends LitElement {
             "ui.dialogs.helper_settings.required_error_msg"
           )}
           dialogInitialFocus
+          .disabled=${this.disabled}
         ></ha-textfield>
         <ha-icon-picker
           .hass=${this.hass}
@@ -91,6 +94,7 @@ class HaCounterForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.icon"
           )}
+          .disabled=${this.disabled}
         ></ha-icon-picker>
         <ha-textfield
           .value=${this._minimum}
@@ -100,6 +104,7 @@ class HaCounterForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.counter.minimum"
           )}
+          .disabled=${this.disabled}
         ></ha-textfield>
         <ha-textfield
           .value=${this._maximum}
@@ -109,6 +114,7 @@ class HaCounterForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.counter.maximum"
           )}
+          .disabled=${this.disabled}
         ></ha-textfield>
         <ha-textfield
           .value=${this._initial}
@@ -118,6 +124,7 @@ class HaCounterForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.counter.initial"
           )}
+          .disabled=${this.disabled}
         ></ha-textfield>
         <ha-expansion-panel
           header=${this.hass.localize(
@@ -133,12 +140,14 @@ class HaCounterForm extends LitElement {
             .label=${this.hass!.localize(
               "ui.dialogs.helper_settings.counter.step"
             )}
+            .disabled=${this.disabled}
           ></ha-textfield>
           <div class="row">
             <ha-switch
               .checked=${this._restore}
               .configValue=${"restore"}
               @change=${this._valueChanged}
+              .disabled=${this.disabled}
             >
             </ha-switch>
             <div>

src/panels/config/helpers/forms/ha-input_boolean-form.ts

@@ -14,6 +14,8 @@ class HaInputBooleanForm extends LitElement {
 
   @property({ type: Boolean }) public new = false;
 
+  @property({ type: Boolean }) public disabled = false;
+
   private _item?: InputBoolean;
 
   @state() private _name!: string;
@@ -59,6 +61,7 @@ class HaInputBooleanForm extends LitElement {
             "ui.dialogs.helper_settings.required_error_msg"
           )}
           dialogInitialFocus
+          .disabled=${this.disabled}
         ></ha-textfield>
         <ha-icon-picker
           .hass=${this.hass}
@@ -68,6 +71,7 @@ class HaInputBooleanForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.icon"
           )}
+          .disabled=${this.disabled}
         ></ha-icon-picker>
       </div>
     `;

src/panels/config/helpers/forms/ha-input_button-form.ts

@@ -14,6 +14,8 @@ class HaInputButtonForm extends LitElement {
 
   @property({ type: Boolean }) public new = false;
 
+  @property({ type: Boolean }) public disabled = false;
+
   @state() private _name!: string;
 
   @state() private _icon!: string;
@@ -59,6 +61,7 @@ class HaInputButtonForm extends LitElement {
             "ui.dialogs.helper_settings.required_error_msg"
           )}
           dialogInitialFocus
+          .disabled=${this.disabled}
         ></ha-textfield>
         <ha-icon-picker
           .hass=${this.hass}
@@ -68,6 +71,7 @@ class HaInputButtonForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.icon"
           )}
+          .disabled=${this.disabled}
         ></ha-icon-picker>
       </div>
     `;

src/panels/config/helpers/forms/ha-input_datetime-form.ts

@@ -17,6 +17,8 @@ class HaInputDateTimeForm extends LitElement {
 
   @property({ type: Boolean }) public new = false;
 
+  @property({ type: Boolean }) public disabled = false;
+
   private _item?: InputDateTime;
 
   @state() private _name!: string;
@@ -73,6 +75,7 @@ class HaInputDateTimeForm extends LitElement {
             "ui.dialogs.helper_settings.required_error_msg"
           )}
           dialogInitialFocus
+          .disabled=${this.disabled}
         ></ha-textfield>
         <ha-icon-picker
           .hass=${this.hass}
@@ -82,6 +85,7 @@ class HaInputDateTimeForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.icon"
           )}
+          .disabled=${this.disabled}
         ></ha-icon-picker>
         <br />
         ${this.hass.localize("ui.dialogs.helper_settings.input_datetime.mode")}:
@@ -97,6 +101,7 @@ class HaInputDateTimeForm extends LitElement {
             value="date"
             .checked=${this._mode === "date"}
             @change=${this._modeChanged}
+            .disabled=${this.disabled}
           ></ha-radio>
         </ha-formfield>
         <ha-formfield
@@ -109,6 +114,7 @@ class HaInputDateTimeForm extends LitElement {
             value="time"
             .checked=${this._mode === "time"}
             @change=${this._modeChanged}
+            .disabled=${this.disabled}
           ></ha-radio>
         </ha-formfield>
         <ha-formfield
@@ -121,6 +127,7 @@ class HaInputDateTimeForm extends LitElement {
             value="datetime"
             .checked=${this._mode === "datetime"}
             @change=${this._modeChanged}
+            .disabled=${this.disabled}
           ></ha-radio>
         </ha-formfield>
       </div>

src/panels/config/helpers/forms/ha-input_number-form.ts

@@ -18,6 +18,8 @@ class HaInputNumberForm extends LitElement {
 
   @property({ type: Boolean }) public new = false;
 
+  @property({ type: Boolean }) public disabled = false;
+
   private _item?: Partial<InputNumber>;
 
   @state() private _name!: string;
@@ -89,6 +91,7 @@ class HaInputNumberForm extends LitElement {
             "ui.dialogs.helper_settings.required_error_msg"
           )}
           dialogInitialFocus
+          .disabled=${this.disabled}
         ></ha-textfield>
         <ha-icon-picker
           .hass=${this.hass}
@@ -98,6 +101,7 @@ class HaInputNumberForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.icon"
           )}
+          .disabled=${this.disabled}
         ></ha-icon-picker>
         <ha-textfield
           .value=${this._min}
@@ -108,6 +112,7 @@ class HaInputNumberForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.input_number.min"
           )}
+          .disabled=${this.disabled}
         ></ha-textfield>
         <ha-textfield
           .value=${this._max}
@@ -118,6 +123,7 @@ class HaInputNumberForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.input_number.max"
           )}
+          .disabled=${this.disabled}
         ></ha-textfield>
         <ha-expansion-panel
           header=${this.hass.localize(
@@ -139,6 +145,7 @@ class HaInputNumberForm extends LitElement {
                 value="slider"
                 .checked=${this._mode === "slider"}
                 @change=${this._modeChanged}
+                .disabled=${this.disabled}
               ></ha-radio>
             </ha-formfield>
             <ha-formfield
@@ -151,6 +158,7 @@ class HaInputNumberForm extends LitElement {
                 value="box"
                 .checked=${this._mode === "box"}
                 @change=${this._modeChanged}
+                .disabled=${this.disabled}
               ></ha-radio>
             </ha-formfield>
           </div>
@@ -163,6 +171,7 @@ class HaInputNumberForm extends LitElement {
             .label=${this.hass!.localize(
               "ui.dialogs.helper_settings.input_number.step"
             )}
+            .disabled=${this.disabled}
           ></ha-textfield>
 
           <ha-textfield
@@ -172,6 +181,7 @@ class HaInputNumberForm extends LitElement {
             .label=${this.hass!.localize(
               "ui.dialogs.helper_settings.input_number.unit_of_measurement"
             )}
+            .disabled=${this.disabled}
           ></ha-textfield>
         </ha-expansion-panel>
       </div>

src/panels/config/helpers/forms/ha-input_select-form.ts

@@ -23,6 +23,8 @@ class HaInputSelectForm extends LitElement {
 
   @property({ type: Boolean }) public new = false;
 
+  @property({ type: Boolean }) public disabled = false;
+
   private _item?: InputSelect;
 
   @state() private _name!: string;
@@ -86,6 +88,7 @@ class HaInputSelectForm extends LitElement {
           )}
           .configValue=${"name"}
           @input=${this._valueChanged}
+          .disabled=${this.disabled}
         ></ha-textfield>
         <ha-icon-picker
           .hass=${this.hass}
@@ -95,13 +98,18 @@ class HaInputSelectForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.icon"
           )}
+          .disabled=${this.disabled}
         ></ha-icon-picker>
         <div class="header">
           ${this.hass!.localize(
             "ui.dialogs.helper_settings.input_select.options"
           )}:
         </div>
-        <ha-sortable @item-moved=${this._optionMoved} handle-selector=".handle">
+        <ha-sortable
+          @item-moved=${this._optionMoved}
+          handle-selector=".handle"
+          .disabled=${this.disabled}
+        >
           <ha-list class="options">
             ${this._options.length
               ? repeat(
@@ -124,6 +132,7 @@ class HaInputSelectForm extends LitElement {
                           "ui.dialogs.helper_settings.input_select.remove_option"
                         )}
                         @click=${this._removeOption}
+                        .disabled=${this.disabled}
                         .path=${mdiDelete}
                       ></ha-icon-button>
                     </ha-list-item>
@@ -146,8 +155,13 @@ class HaInputSelectForm extends LitElement {
               "ui.dialogs.helper_settings.input_select.add_option"
             )}
             @keydown=${this._handleKeyAdd}
+            .disabled=${this.disabled}
           ></ha-textfield>
-          <ha-button size="small" appearance="plain" @click=${this._addOption}
+          <ha-button
+            size="small"
+            appearance="plain"
+            @click=${this._addOption}
+            .disabled=${this.disabled}
             >${this.hass!.localize(
               "ui.dialogs.helper_settings.input_select.add"
             )}</ha-button

src/panels/config/helpers/forms/ha-input_text-form.ts

@@ -19,6 +19,8 @@ class HaInputTextForm extends LitElement {
 
   @property({ type: Boolean }) public new = false;
 
+  @property({ type: Boolean }) public disabled = false;
+
   private _item?: InputText;
 
   @state() private _name!: string;
@@ -79,6 +81,7 @@ class HaInputTextForm extends LitElement {
             "ui.dialogs.helper_settings.required_error_msg"
           )}
           dialogInitialFocus
+          .disabled=${this.disabled}
         ></ha-textfield>
         <ha-icon-picker
           .hass=${this.hass}
@@ -88,6 +91,7 @@ class HaInputTextForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.icon"
           )}
+          .disabled=${this.disabled}
         ></ha-icon-picker>
         <ha-expansion-panel
           header=${this.hass.localize(
@@ -105,6 +109,7 @@ class HaInputTextForm extends LitElement {
             .label=${this.hass!.localize(
               "ui.dialogs.helper_settings.input_text.min"
             )}
+            .disabled=${this.disabled}
           ></ha-textfield>
           <ha-textfield
             .value=${this._max}
@@ -129,6 +134,7 @@ class HaInputTextForm extends LitElement {
                 value="text"
                 .checked=${this._mode === "text"}
                 @change=${this._modeChanged}
+                .disabled=${this.disabled}
               ></ha-radio>
             </ha-formfield>
             <ha-formfield
@@ -141,6 +147,7 @@ class HaInputTextForm extends LitElement {
                 value="password"
                 .checked=${this._mode === "password"}
                 @change=${this._modeChanged}
+                .disabled=${this.disabled}
               ></ha-radio>
             </ha-formfield>
           </div>
@@ -154,6 +161,7 @@ class HaInputTextForm extends LitElement {
             .helper=${this.hass!.localize(
               "ui.dialogs.helper_settings.input_text.pattern_helper"
             )}
+            .disabled=${this.disabled}
           ></ha-textfield>
         </ha-expansion-panel>
       </div>

src/panels/config/helpers/forms/ha-schedule-form.ts

@@ -17,9 +17,9 @@ import "../../../../components/ha-textfield";
 import type { Schedule, ScheduleDay } from "../../../../data/schedule";
 import { weekdays } from "../../../../data/schedule";
 import { TimeZone } from "../../../../data/translation";
-import { showScheduleBlockInfoDialog } from "./show-dialog-schedule-block-info";
 import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
+import { showScheduleBlockInfoDialog } from "./show-dialog-schedule-block-info";
 
 const defaultFullCalendarConfig: CalendarOptions = {
   plugins: [timeGridPlugin, interactionPlugin],
@@ -43,6 +43,8 @@ class HaScheduleForm extends LitElement {
 
   @property({ type: Boolean }) public new = false;
 
+  @property({ type: Boolean }) public disabled = false;
+
   @state() private _name!: string;
 
   @state() private _icon!: string;
@@ -132,6 +134,7 @@ class HaScheduleForm extends LitElement {
             "ui.dialogs.helper_settings.required_error_msg"
           )}
           dialogInitialFocus
+          .disabled=${this.disabled}
         ></ha-textfield>
         <ha-icon-picker
           .hass=${this.hass}
@@ -141,8 +144,9 @@ class HaScheduleForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.icon"
           )}
+          .disabled=${this.disabled}
         ></ha-icon-picker>
-        <div id="calendar"></div>
+        ${!this.disabled ? html`<div id="calendar"></div>` : nothing}
       </div>
     `;
   }
@@ -175,7 +179,9 @@ class HaScheduleForm extends LitElement {
   }
 
   protected firstUpdated(): void {
-    this._setupCalendar();
+    if (!this.disabled) {
+      this._setupCalendar();
+    }
   }
 
   private _setupCalendar(): void {

src/panels/config/helpers/forms/ha-timer-form.ts

@@ -1,18 +1,18 @@
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { createDurationData } from "../../../../common/datetime/create_duration_data";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-checkbox";
+import "../../../../components/ha-duration-input";
+import type { HaDurationData } from "../../../../components/ha-duration-input";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-icon-picker";
-import "../../../../components/ha-duration-input";
 import "../../../../components/ha-textfield";
+import type { ForDict } from "../../../../data/automation";
 import type { DurationDict, Timer } from "../../../../data/timer";
 import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
-import { createDurationData } from "../../../../common/datetime/create_duration_data";
-import type { HaDurationData } from "../../../../components/ha-duration-input";
-import type { ForDict } from "../../../../data/automation";
 
 @customElement("ha-timer-form")
 class HaTimerForm extends LitElement {
@@ -20,6 +20,8 @@ class HaTimerForm extends LitElement {
 
   @property({ type: Boolean }) public new = false;
 
+  @property({ type: Boolean }) public disabled = false;
+
   private _item?: Timer;
 
   @state() private _name!: string;
@@ -77,6 +79,7 @@ class HaTimerForm extends LitElement {
             "ui.dialogs.helper_settings.required_error_msg"
           )}
           dialogInitialFocus
+          .disabled=${this.disabled}
         ></ha-textfield>
         <ha-icon-picker
           .hass=${this.hass}
@@ -86,11 +89,13 @@ class HaTimerForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.icon"
           )}
+          .disabled=${this.disabled}
         ></ha-icon-picker>
         <ha-duration-input
           .configValue=${"duration"}
           .data=${this._duration_data}
           @value-changed=${this._valueChanged}
+          .disabled=${this.disabled}
         ></ha-duration-input>
         <ha-formfield
           .label=${this.hass.localize(
@@ -101,6 +106,7 @@ class HaTimerForm extends LitElement {
             .configValue=${"restore"}
             .checked=${this._restore}
             @click=${this._toggleRestore}
+            .disabled=${this.disabled}
           >
           </ha-checkbox>
         </ha-formfield>
@@ -130,6 +136,9 @@ class HaTimerForm extends LitElement {
   }
 
   private _toggleRestore() {
+    if (this.disabled) {
+      return;
+    }
     this._restore = !this._restore;
     fireEvent(this, "value-changed", {
       value: { ...this._item, restore: this._restore },

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/light/strategies/light-view-strategy.ts

@@ -61,6 +61,24 @@ const processAreasForLight = (
   return cards;
 };
 
+const processUnassignedLights = (
+  hass: HomeAssistant,
+  entities: string[]
+): LovelaceCardConfig[] => {
+  const unassignedFilter = generateEntityFilter(hass, {
+    area: null,
+  });
+  const unassignedLights = entities.filter(unassignedFilter);
+  const areaCards: LovelaceCardConfig[] = [];
+  const computeTileCard = computeAreaTileCardConfig(hass, "", false);
+
+  for (const entityId of unassignedLights) {
+    areaCards.push(computeTileCard(entityId));
+  }
+
+  return areaCards;
+};
+
 @customElement("light-view-strategy")
 export class LightViewStrategy extends ReactiveElement {
   static async generate(
@@ -136,10 +154,30 @@ export class LightViewStrategy extends ReactiveElement {
       }
     }
 
+    // Process unassigned lights
+    const unassignedCards = processUnassignedLights(hass, entities);
+    if (unassignedCards.length > 0) {
+      const section: LovelaceSectionRawConfig = {
+        type: "grid",
+        column_span: 2,
+        cards: [
+          {
+            type: "heading",
+            heading:
+              sections.length > 0
+                ? hass.localize("ui.panel.lovelace.strategy.light.other_lights")
+                : hass.localize("ui.panel.lovelace.strategy.light.lights"),
+          },
+          ...unassignedCards,
+        ],
+      };
+      sections.push(section);
+    }
+
     return {
       type: "sections",
       max_columns: 2,
-      sections: sections || [],
+      sections: sections,
     };
   }
 }

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/energy/hui-energy-sankey-card.ts

@@ -419,13 +419,15 @@ class HuiEnergySankeyCard
     };
     deviceNodes.forEach((deviceNode) => {
       const entity = this.hass.states[deviceNode.id];
-      const { area, floor } = getEntityContext(
-        entity,
-        this.hass.entities,
-        this.hass.devices,
-        this.hass.areas,
-        this.hass.floors
-      );
+      const { area, floor } = entity
+        ? getEntityContext(
+            entity,
+            this.hass.entities,
+            this.hass.devices,
+            this.hass.areas,
+            this.hass.floors
+          )
+        : { area: null, floor: null };
       if (area) {
         if (area.area_id in areas) {
           areas[area.area_id].value += deviceNode.value;

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-home-summary-card.ts

@@ -87,11 +87,6 @@ export class HuiHomeSummaryCard extends LitElement implements LovelaceCard {
     const allEntities = Object.keys(this.hass!.states);
 
     const areas = Object.values(this.hass.areas);
-    const areasFilter = generateEntityFilter(this.hass, {
-      area: areas.map((area) => area.area_id),
-    });
-
-    const entitiesInsideArea = allEntities.filter(areasFilter);
 
     switch (this._config.summary) {
       case "light": {
@@ -100,7 +95,7 @@ export class HuiHomeSummaryCard extends LitElement implements LovelaceCard {
           generateEntityFilter(this.hass!, filter)
         );
 
-        const lightEntities = findEntities(entitiesInsideArea, lightsFilters);
+        const lightEntities = findEntities(allEntities, lightsFilters);
 
         const onLights = lightEntities.filter((entityId) => {
           const s = this.hass!.states[entityId]?.state;
@@ -153,7 +148,7 @@ export class HuiHomeSummaryCard extends LitElement implements LovelaceCard {
           generateEntityFilter(this.hass!, filter)
         );
 
-        const safetyEntities = findEntities(entitiesInsideArea, safetyFilters);
+        const safetyEntities = findEntities(allEntities, safetyFilters);
 
         const locks = safetyEntities.filter((entityId) => {
           const domain = computeDomain(entityId);
@@ -204,7 +199,7 @@ export class HuiHomeSummaryCard extends LitElement implements LovelaceCard {
         );
 
         const mediaPlayerEntities = findEntities(
-          entitiesInsideArea,
+          allEntities,
           mediaPlayerFilters
         );
 

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

@@ -10,6 +10,7 @@ import {
   string,
 } from "superstruct";
 import type { HassServiceTarget } from "home-assistant-js-websocket";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entities-picker";
 import "../../../../components/ha-target-picker";
@@ -24,6 +25,7 @@ import { DEFAULT_HOURS_TO_SHOW } from "../../cards/hui-logbook-card";
 import { targetStruct } from "../../../../data/script";
 import { getSensorNumericDeviceClasses } from "../../../../data/sensor";
 import type { HaEntityPickerEntityFilterFunc } from "../../../../data/entity";
+import { resolveEntityIDs } from "../../../../data/selector";
 
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
@@ -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}
@@ -122,6 +138,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);
 
@@ -131,7 +166,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>) => {
@@ -142,6 +179,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/panels/lovelace/strategies/home/home-main-view-strategy.ts

@@ -1,7 +1,11 @@
 import { ReactiveElement } from "lit";
 import { customElement } from "lit/decorators";
 import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
-import { generateEntityFilter } from "../../../../common/entity/entity_filter";
+import {
+  findEntities,
+  generateEntityFilter,
+} from "../../../../common/entity/entity_filter";
+import { floorDefaultIcon } from "../../../../components/ha-floor-icon";
 import type { AreaRegistryEntry } from "../../../../data/area_registry";
 import { getEnergyPreferences } from "../../../../data/energy";
 import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
@@ -21,7 +25,7 @@ import type {
 import { getAreas, getFloors } from "../areas/helpers/areas-strategy-helper";
 import type { CommonControlSectionStrategyConfig } from "../usage_prediction/common-controls-section-strategy";
 import { getHomeStructure } from "./helpers/home-structure";
-import { floorDefaultIcon } from "../../../../components/ha-floor-icon";
+import { HOME_SUMMARIES_FILTERS } from "./helpers/home-summaries";
 
 export interface HomeMainViewStrategyConfig {
   type: "home-main";
@@ -144,15 +148,33 @@ export class HomeMainViewStrategy extends ReactiveElement {
       column_span: maxColumns,
     } as LovelaceStrategySectionConfig;
 
-    const summarySection: LovelaceSectionConfig = {
-      type: "grid",
-      column_span: maxColumns,
-      cards: [
-        {
-          type: "heading",
-          heading: hass.localize("ui.panel.lovelace.strategy.home.summaries"),
-        },
-        {
+    const allEntities = Object.keys(hass.states);
+
+    const mediaPlayerFilter = HOME_SUMMARIES_FILTERS.media_players.map(
+      (filter) => generateEntityFilter(hass, filter)
+    );
+
+    const lightsFilters = HOME_SUMMARIES_FILTERS.light.map((filter) =>
+      generateEntityFilter(hass, filter)
+    );
+
+    const climateFilters = HOME_SUMMARIES_FILTERS.climate.map((filter) =>
+      generateEntityFilter(hass, filter)
+    );
+
+    const safetyFilters = HOME_SUMMARIES_FILTERS.safety.map((filter) =>
+      generateEntityFilter(hass, filter)
+    );
+
+    const hasLights = findEntities(allEntities, lightsFilters).length > 0;
+    const hasMediaPlayers =
+      findEntities(allEntities, mediaPlayerFilter).length > 0;
+    const hasClimate = findEntities(allEntities, climateFilters).length > 0;
+    const hasSafety = findEntities(allEntities, safetyFilters).length > 0;
+
+    const summaryCards: LovelaceCardConfig[] = [
+      hasLights &&
+        ({
           type: "home-summary",
           summary: "light",
           vertical: true,
@@ -164,8 +186,9 @@ export class HomeMainViewStrategy extends ReactiveElement {
             rows: 2,
             columns: 4,
           },
-        } satisfies HomeSummaryCard,
-        {
+        } satisfies HomeSummaryCard),
+      hasClimate &&
+        ({
           type: "home-summary",
           summary: "climate",
           vertical: true,
@@ -177,8 +200,9 @@ export class HomeMainViewStrategy extends ReactiveElement {
             rows: 2,
             columns: 4,
           },
-        } satisfies HomeSummaryCard,
-        {
+        } satisfies HomeSummaryCard),
+      hasSafety &&
+        ({
           type: "home-summary",
           summary: "safety",
           vertical: true,
@@ -190,8 +214,9 @@ export class HomeMainViewStrategy extends ReactiveElement {
             rows: 2,
             columns: 4,
           },
-        } satisfies HomeSummaryCard,
-        {
+        } satisfies HomeSummaryCard),
+      hasMediaPlayers &&
+        ({
           type: "home-summary",
           summary: "media_players",
           vertical: true,
@@ -203,10 +228,25 @@ export class HomeMainViewStrategy extends ReactiveElement {
             rows: 2,
             columns: 4,
           },
-        } satisfies HomeSummaryCard,
-      ],
+        } satisfies HomeSummaryCard),
+    ].filter(Boolean) as LovelaceCardConfig[];
+
+    const summarySection: LovelaceSectionConfig = {
+      type: "grid",
+      column_span: maxColumns,
+      cards: [],
     };
 
+    if (summaryCards.length) {
+      summarySection.cards!.push(
+        {
+          type: "heading",
+          heading: hass.localize("ui.panel.lovelace.strategy.home.summaries"),
+        },
+        ...summaryCards
+      );
+    }
+
     const weatherFilter = generateEntityFilter(hass, {
       domain: "weather",
       entity_category: "none",
@@ -262,7 +302,7 @@ export class HomeMainViewStrategy extends ReactiveElement {
       [
         favoriteSection.cards && favoriteSection,
         commonControlsSection,
-        summarySection,
+        summarySection.cards && summarySection,
         ...floorsSections,
         widgetSection.cards && widgetSection,
       ] satisfies (LovelaceSectionRawConfig | undefined)[]

src/panels/lovelace/strategies/home/home-media-players-view-strategy.ts

@@ -59,6 +59,26 @@ const processAreasForMediaPlayers = (
   return cards;
 };
 
+const processUnassignedEntities = (
+  hass: HomeAssistant,
+  entities: string[]
+): LovelaceCardConfig[] => {
+  const unassignedFilter = generateEntityFilter(hass, {
+    area: null,
+  });
+  const unassignedEntities = entities.filter(unassignedFilter);
+  const areaCards: LovelaceCardConfig[] = [];
+
+  for (const entityId of unassignedEntities) {
+    areaCards.push({
+      type: "media-control",
+      entity: entityId,
+    } satisfies MediaControlCardConfig);
+  }
+
+  return areaCards;
+};
+
 @customElement("home-media-players-view-strategy")
 export class HomeMMediaPlayersViewStrategy extends ReactiveElement {
   static async generate(
@@ -134,10 +154,35 @@ export class HomeMMediaPlayersViewStrategy extends ReactiveElement {
       }
     }
 
+    // Process unassigned entities
+    const unassignedCards = processUnassignedEntities(hass, entities);
+
+    if (unassignedCards.length > 0) {
+      const section: LovelaceSectionRawConfig = {
+        type: "grid",
+        column_span: 2,
+        cards: [
+          {
+            type: "heading",
+            heading:
+              sections.length > 0
+                ? hass.localize(
+                    "ui.panel.lovelace.strategy.home_media_players.other_media_players"
+                  )
+                : hass.localize(
+                    "ui.panel.lovelace.strategy.home_media_players.media_players"
+                  ),
+          },
+          ...unassignedCards,
+        ],
+      };
+      sections.push(section);
+    }
+
     return {
       type: "sections",
       max_columns: 2,
-      sections: sections || [],
+      sections: sections,
     };
   }
 }

src/panels/safety/strategies/safety-view-strategy.ts

@@ -103,6 +103,24 @@ const processAreasForSafety = (
   return cards;
 };
 
+const processUnassignedEntities = (
+  hass: HomeAssistant,
+  entities: string[]
+): LovelaceCardConfig[] => {
+  const unassignedFilter = generateEntityFilter(hass, {
+    area: null,
+  });
+  const unassignedLights = entities.filter(unassignedFilter);
+  const areaCards: LovelaceCardConfig[] = [];
+  const computeTileCard = computeAreaTileCardConfig(hass, "", false);
+
+  for (const entityId of unassignedLights) {
+    areaCards.push(computeTileCard(entityId));
+  }
+
+  return areaCards;
+};
+
 @customElement("safety-view-strategy")
 export class SafetyViewStrategy extends ReactiveElement {
   static async generate(
@@ -178,10 +196,33 @@ export class SafetyViewStrategy extends ReactiveElement {
       }
     }
 
+    // Process unassigned entities
+    const unassignedCards = processUnassignedEntities(hass, entities);
+
+    if (unassignedCards.length > 0) {
+      const section: LovelaceSectionRawConfig = {
+        type: "grid",
+        column_span: 2,
+        cards: [
+          {
+            type: "heading",
+            heading:
+              sections.length > 0
+                ? hass.localize(
+                    "ui.panel.lovelace.strategy.safety.other_devices"
+                  )
+                : hass.localize("ui.panel.lovelace.strategy.safety.devices"),
+          },
+          ...unassignedCards,
+        ],
+      };
+      sections.push(section);
+    }
+
     return {
       type: "sections",
       max_columns: 2,
-      sections: sections || [],
+      sections: sections,
     };
   }
 }

src/translations/en.json

@@ -3626,6 +3626,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",
@@ -6945,6 +6975,22 @@
           "common_controls": {
             "not_loaded": "Usage Prediction integration is not loaded.",
             "no_data": "This place will soon fill up with the entities you use most often, based on your activity."
+          },
+          "light": {
+            "lights": "Lights",
+            "other_lights": "Other lights"
+          },
+          "safety": {
+            "devices": "Devices",
+            "other_devices": "Other devices"
+          },
+          "climate": {
+            "devices": "Devices",
+            "other_devices": "Other devices"
+          },
+          "home_media_players": {
+            "media_players": "Media players",
+            "other_media_players": "Other media players"
           }
         },
         "cards": {
@@ -7085,6 +7131,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": {
@@ -7648,7 +7699,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",
@@ -7726,7 +7778,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",
@@ -9332,11 +9386,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",

test/common/entity/entity_filter.test.ts

@@ -388,4 +388,70 @@ describe("generateEntityFilter", () => {
       expect(filter("light.no_area")).toBe(false);
     });
   });
+
+  describe("null filtering", () => {
+    it("should filter entities with no area when null is used", () => {
+      const filter = generateEntityFilter(mockHass, { area: null });
+
+      expect(filter("light.no_area")).toBe(true);
+      expect(filter("light.living_room")).toBe(false);
+    });
+
+    it("should filter entities with specific area OR no area when null is in array", () => {
+      const filter = generateEntityFilter(mockHass, {
+        area: ["living_room", null],
+      });
+
+      expect(filter("light.living_room")).toBe(true);
+      expect(filter("sensor.temperature")).toBe(true);
+      expect(filter("light.no_area")).toBe(true);
+      expect(filter("switch.kitchen")).toBe(false);
+    });
+
+    it("should filter entities with no floor when null is used", () => {
+      const filter = generateEntityFilter(mockHass, { floor: null });
+
+      expect(filter("light.no_area")).toBe(true);
+      expect(filter("light.living_room")).toBe(false);
+    });
+
+    it("should filter entities with specific floor OR no floor", () => {
+      const filter = generateEntityFilter(mockHass, {
+        floor: ["main_floor", null],
+      });
+
+      expect(filter("light.living_room")).toBe(true);
+      expect(filter("switch.kitchen")).toBe(true);
+      expect(filter("light.no_area")).toBe(true);
+      expect(filter("light.bedroom")).toBe(false);
+    });
+
+    it("should filter entities with no device when null is used", () => {
+      const filter = generateEntityFilter(mockHass, { device: null });
+
+      expect(filter("light.living_room")).toBe(false);
+      expect(filter("light.no_area")).toBe(false);
+    });
+
+    it("should filter entities with specific device OR no device", () => {
+      const filter = generateEntityFilter(mockHass, {
+        device: ["device1", null],
+      });
+
+      expect(filter("light.living_room")).toBe(true);
+      expect(filter("switch.kitchen")).toBe(false);
+    });
+
+    it("should combine null filtering with other criteria", () => {
+      const filter = generateEntityFilter(mockHass, {
+        domain: "light",
+        area: ["living_room", null],
+      });
+
+      expect(filter("light.living_room")).toBe(true);
+      expect(filter("light.no_area")).toBe(true);
+      expect(filter("light.bedroom")).toBe(false);
+      expect(filter("sensor.temperature")).toBe(false);
+    });
+  });
 });