Add logbook to security dashboard

* foundation: define --safe-area-content-inset-*; adjust drawer width; apply top inset to pre-login templates

* Set default for var

* Update demo template

* Set default to avoid issues

* Allow for left and right insets or 560px

* Remove

.yarnrc.yml

@@ -6,4 +6,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.9.3.cjs
+yarnPath: .yarn/releases/yarn-4.9.4.cjs

cast/src/media/entrypoint.ts

@@ -5,17 +5,17 @@ const castContext = framework.CastReceiverContext.getInstance();
 const playerManager = castContext.getPlayerManager();
 
 playerManager.setMessageInterceptor(
-  framework.messages.MessageType.LOAD,
+  "LOAD" as framework.messages.MessageType.LOAD,
   (loadRequestData) => {
     const media = loadRequestData.media;
     // Special handling if it came from Google Assistant
     if (media.entity) {
       media.contentId = media.entity;
-      media.streamType = framework.messages.StreamType.LIVE;
+      media.streamType = "LIVE" as framework.messages.StreamType.LIVE;
       media.contentType = "application/vnd.apple.mpegurl";
       // @ts-ignore
       media.hlsVideoSegmentFormat =
-        framework.messages.HlsVideoSegmentFormat.FMP4;
+        "fmp4" as framework.messages.HlsVideoSegmentFormat.FMP4;
     }
     return loadRequestData;
   }

cast/src/receiver/entrypoint.ts

@@ -40,7 +40,8 @@ const playDummyMedia = (viewTitle?: string) => {
   loadRequestData.media.contentId =
     "https://cast.home-assistant.io/images/google-nest-hub.png";
   loadRequestData.media.contentType = "image/jpeg";
-  loadRequestData.media.streamType = framework.messages.StreamType.NONE;
+  loadRequestData.media.streamType =
+    "NONE" as framework.messages.StreamType.NONE;
   const metadata = new framework.messages.GenericMediaMetadata();
   metadata.title = viewTitle;
   loadRequestData.media.metadata = metadata;
@@ -89,7 +90,7 @@ const showMediaPlayer = () => {
 const options = new framework.CastReceiverOptions();
 options.disableIdleTimeout = true;
 options.customNamespaces = {
-  [CAST_NS]: framework.system.MessageType.JSON,
+  [CAST_NS]: "json" as framework.system.MessageType.JSON,
 };
 
 castContext.addCustomMessageListener(
@@ -97,9 +98,7 @@ castContext.addCustomMessageListener(
   // @ts-ignore
   (ev: ReceivedMessage<HassMessage>) => {
     // We received a show Lovelace command, stop media from playing, hide media player and show Lovelace controller
-    if (
-      playerManager.getPlayerState() !== framework.messages.PlayerState.IDLE
-    ) {
+    if (playerManager.getPlayerState() !== "IDLE") {
       playerManager.stop();
     } else {
       showLovelaceController();
@@ -113,7 +112,7 @@ castContext.addCustomMessageListener(
 const playerManager = castContext.getPlayerManager();
 
 playerManager.setMessageInterceptor(
-  framework.messages.MessageType.LOAD,
+  "LOAD" as framework.messages.MessageType.LOAD,
   (loadRequestData) => {
     if (
       loadRequestData.media.contentId ===
@@ -127,24 +126,23 @@ playerManager.setMessageInterceptor(
     // Special handling if it came from Google Assistant
     if (media.entity) {
       media.contentId = media.entity;
-      media.streamType = framework.messages.StreamType.LIVE;
+      media.streamType = "LIVE" as framework.messages.StreamType.LIVE;
       media.contentType = "application/vnd.apple.mpegurl";
       // @ts-ignore
       media.hlsVideoSegmentFormat =
-        framework.messages.HlsVideoSegmentFormat.FMP4;
+        "fmp4" as framework.messages.HlsVideoSegmentFormat.FMP4;
     }
     return loadRequestData;
   }
 );
 
 playerManager.addEventListener(
-  framework.events.EventType.MEDIA_STATUS,
+  "MEDIA_STATUS" as framework.events.EventType.MEDIA_STATUS,
   (event) => {
     if (
-      event.mediaStatus?.playerState === framework.messages.PlayerState.IDLE &&
+      event.mediaStatus?.playerState === "IDLE" &&
       event.mediaStatus?.idleReason &&
-      event.mediaStatus?.idleReason !==
-        framework.messages.IdleReason.INTERRUPTED
+      event.mediaStatus?.idleReason !== "INTERRUPTED"
     ) {
       // media finished or stopped, return to default Lovelace
       showLovelaceController();

demo/src/html/index.html.template

@@ -68,7 +68,7 @@
       }
       #ha-launch-screen .ha-launch-screen-spacer-top {
         flex: 1;
-        margin-top: calc( 2 * max(var(--safe-area-inset-bottom, 0px), 48px) + 46px );
+        margin-top: calc( 2 * max(var(--safe-area-inset-top, 0px), 48px) + 46px );
         padding-top: 48px;
       }
       #ha-launch-screen .ha-launch-screen-spacer-bottom {

gallery/src/components/demo-more-info.ts

@@ -1,10 +1,11 @@
-import { LitElement, css, html } from "lit";
+import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../src/components/ha-card";
 import "../../../src/dialogs/more-info/more-info-content";
 import "../../../src/state-summary/state-card-content";
 import "../ha-demo-options";
 import type { HomeAssistant } from "../../../src/types";
+import { computeShowNewMoreInfo } from "../../../src/dialogs/more-info/const";
 
 @customElement("demo-more-info")
 class DemoMoreInfo extends LitElement {
@@ -21,11 +22,13 @@ class DemoMoreInfo extends LitElement {
       <div class="root">
         <div id="card">
           <ha-card>
-            <state-card-content
-              .stateObj=${state}
-              .hass=${this.hass}
-              in-dialog
-            ></state-card-content>
+            ${!computeShowNewMoreInfo(state)
+              ? html`<state-card-content
+                  .stateObj=${state}
+                  .hass=${this.hass}
+                  in-dialog
+                ></state-card-content>`
+              : nothing}
 
             <more-info-content
               .hass=${this.hass}

gallery/src/data/demo_states.js

@@ -1106,7 +1106,7 @@ export default {
       friendly_name: "Philips Hue",
       entity_picture: null,
       description:
-        "Press the button on the bridge to register Philips Hue with Home Assistant.\n\n![Description image](/static/images/config_philips_hue.jpg)",
+        "Press the button on the bridge to register Philips Hue with Home Assistant.",
       submit_caption: "I have pressed the button",
     },
     last_changed: "2018-07-19T10:44:46.515160+00:00",

landing-page/src/html/index.html.template

@@ -19,8 +19,9 @@
         height: auto;
         padding: 32px 0;
       }
+
       .content {
-        max-width: 560px;
+        max-width: min(560px, calc(100vw - var(--safe-area-inset-right, 0px) - var(--safe-area-inset-left, 0px)));
         margin: 0 auto;
         padding: 0 16px;
         box-sizing: content-box;

package.json

@@ -29,13 +29,13 @@
     "@awesome.me/webawesome": "3.0.0-beta.4",
     "@babel/runtime": "7.28.3",
     "@braintree/sanitize-url": "7.1.1",
-    "@codemirror/autocomplete": "6.18.6",
+    "@codemirror/autocomplete": "6.18.7",
     "@codemirror/commands": "6.8.1",
     "@codemirror/language": "6.11.3",
     "@codemirror/legacy-modes": "6.5.1",
     "@codemirror/search": "6.5.11",
     "@codemirror/state": "6.5.2",
-    "@codemirror/view": "6.38.1",
+    "@codemirror/view": "6.38.2",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "6.18.0",
     "@formatjs/intl-displaynames": "6.8.11",
@@ -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.8.5",
-    "@vaadin/vaadin-themable-mixin": "24.8.5",
+    "@vaadin/combo-box": "24.8.6",
+    "@vaadin/vaadin-themable-mixin": "24.8.6",
     "@vibrant/color": "4.0.0",
     "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
@@ -112,7 +112,7 @@
     "fuse.js": "7.1.0",
     "google-timezones-json": "1.2.0",
     "gulp-zopfli-green": "6.0.2",
-    "hls.js": "1.6.10",
+    "hls.js": "1.6.11",
     "home-assistant-js-websocket": "9.5.0",
     "idb-keyval": "6.2.2",
     "intl-messageformat": "10.7.16",
@@ -123,7 +123,7 @@
     "lit": "3.3.1",
     "lit-html": "3.3.1",
     "luxon": "3.7.1",
-    "marked": "16.2.0",
+    "marked": "16.2.1",
     "memoize-one": "6.0.0",
     "node-vibrant": "4.0.3",
     "object-hash": "3.0.0",
@@ -159,18 +159,18 @@
     "@octokit/plugin-retry": "8.0.1",
     "@octokit/rest": "22.0.0",
     "@rsdoctor/rspack-plugin": "1.2.3",
-    "@rspack/core": "1.4.11",
+    "@rspack/core": "1.5.2",
     "@rspack/dev-server": "1.1.4",
     "@types/babel__plugin-transform-runtime": "7.9.5",
-    "@types/chromecast-caf-receiver": "6.0.22",
+    "@types/chromecast-caf-receiver": "6.0.24",
     "@types/chromecast-caf-sender": "1.0.11",
     "@types/color-name": "2.0.0",
-    "@types/culori": "4.0.0",
+    "@types/culori": "4.0.1",
     "@types/html-minifier-terser": "7.0.2",
     "@types/js-yaml": "4.0.9",
     "@types/leaflet": "1.9.20",
-    "@types/leaflet-draw": "1.0.12",
-    "@types/leaflet.markercluster": "1.5.5",
+    "@types/leaflet-draw": "1.0.13",
+    "@types/leaflet.markercluster": "1.5.6",
     "@types/lodash.merge": "4.6.9",
     "@types/luxon": "3.7.1",
     "@types/mocha": "10.0.10",
@@ -204,7 +204,7 @@
     "husky": "9.1.7",
     "jsdom": "26.1.0",
     "jszip": "3.10.1",
-    "lint-staged": "16.1.5",
+    "lint-staged": "16.1.6",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.5.0",
@@ -218,7 +218,7 @@
     "terser-webpack-plugin": "5.3.14",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.9.2",
-    "typescript-eslint": "8.40.0",
+    "typescript-eslint": "8.42.0",
     "vite-tsconfig-paths": "5.1.4",
     "vitest": "3.2.4",
     "webpack-stats-plugin": "1.1.3",
@@ -235,7 +235,7 @@
     "globals": "16.3.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",
-    "@vaadin/vaadin-themable-mixin": "24.8.5"
+    "@vaadin/vaadin-themable-mixin": "24.8.6"
   },
-  "packageManager": "yarn@4.9.3"
+  "packageManager": "yarn@4.9.4"
 }

pyproject.toml

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

src/common/entity/entity_filter.ts

@@ -67,10 +67,7 @@ export const generateEntityFilter = (
     }
 
     if (floors) {
-      if (!floor) {
-        return false;
-      }
-      if (!floors) {
+      if (!floor || !floors.has(floor.floor_id)) {
         return false;
       }
     }

src/components/ha-bottom-sheet.ts

@@ -232,7 +232,6 @@ export class HaBottomSheet extends LitElement {
       box-shadow: var(--wa-shadow-l);
       padding: 0;
       margin: 0;
-
       top: auto;
       inset-inline-end: auto;
       bottom: 0;

src/data/bluetooth.ts

@@ -24,11 +24,14 @@ export interface BluetoothConnectionData extends DataTableRowData {
   source: string;
 }
 
+export type HaScannerType = "usb" | "uart" | "remote" | "unknown";
+
 export interface BluetoothScannerDetails {
   source: string;
   connectable: boolean;
   name: string;
   adapter: string;
+  scanner_type?: HaScannerType;
 }
 
 export type BluetoothScannersDetails = Record<string, BluetoothScannerDetails>;
@@ -55,6 +58,13 @@ export interface BluetoothAllocationsData {
   allocated: string[];
 }
 
+export interface BluetoothScannerState {
+  source: string;
+  adapter: string;
+  current_mode: "active" | "passive" | null;
+  requested_mode: "active" | "passive" | null;
+}
+
 export const subscribeBluetoothScannersDetailsUpdates = (
   conn: Connection,
   store: Store<BluetoothScannersDetails>
@@ -170,3 +180,20 @@ export const subscribeBluetoothConnectionAllocations = (
     params
   );
 };
+
+export const subscribeBluetoothScannerState = (
+  conn: Connection,
+  callbackFunction: (scannerState: BluetoothScannerState) => void,
+  configEntryId?: string
+): Promise<() => Promise<void>> => {
+  const params: { type: string; config_entry_id?: string } = {
+    type: "bluetooth/subscribe_scanner_state",
+  };
+  if (configEntryId) {
+    params.config_entry_id = configEntryId;
+  }
+  return conn.subscribeMessage<BluetoothScannerState>(
+    (scannerState) => callbackFunction(scannerState),
+    params
+  );
+};

src/data/data_entry_flow.ts

@@ -97,6 +97,7 @@ export interface DataEntryFlowStepMenu {
   step_id: string;
   /** If array, use value to lookup translations in strings.json */
   menu_options: string[] | Record<string, string>;
+  sort?: boolean;
   description_placeholders?: Record<string, string>;
   translation_domain?: string;
 }

src/data/graph.ts

@@ -1 +1 @@
-export const strokeWidth = 5;
+export const strokeWidth = 2;

src/data/recorder.ts

@@ -2,6 +2,7 @@ import type { Connection } from "home-assistant-js-websocket";
 import { computeStateName } from "../common/entity/compute_state_name";
 import type { HaDurationData } from "../components/ha-duration-input";
 import type { HomeAssistant } from "../types";
+import { firstWeekday } from "../common/datetime/first_weekday";
 
 export interface RecorderInfo {
   backlog: number | null;
@@ -108,7 +109,7 @@ export interface StatisticsValidationResultMeanTypeChanged {
   };
 }
 
-export const VOLUME_UNITS = ["L", "gal", "ft³", "m³", "CCF"] as const;
+export const VOLUME_UNITS = ["L", "gal", "ft³", "m³", "CCF", "MCF"] as const;
 
 export interface StatisticsUnitConfiguration {
   energy?: "Wh" | "kWh" | "MWh" | "GJ";
@@ -211,7 +212,14 @@ export const fetchStatistic = (
               : period.fixed_period.end,
         }
       : undefined,
-    calendar: period.calendar,
+    calendar: period.calendar
+      ? {
+          ...(period.calendar.period === "week"
+            ? { first_weekday: firstWeekday(hass.locale).substring(0, 3) }
+            : {}),
+          ...period.calendar,
+        }
+      : undefined,
     rolling_window: period.rolling_window,
   });
 

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

@@ -256,6 +256,13 @@ export const showConfigFlowDialog = (
       );
     },
 
+    renderMenuOptionDescription(hass, step, option) {
+      return hass.localize(
+        `component.${step.translation_domain || step.handler}.config.step.${step.step_id}.menu_option_descriptions.${option}`,
+        step.description_placeholders
+      );
+    },
+
     renderLoadingDescription(hass, reason, handler, step) {
       if (reason !== "loading_flow" && reason !== "loading_step") {
         return "";

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

@@ -137,6 +137,12 @@ export interface FlowConfig {
     option: string
   ): string;
 
+  renderMenuOptionDescription(
+    hass: HomeAssistant,
+    step: DataEntryFlowStepMenu,
+    option: string
+  ): string;
+
   renderLoadingDescription(
     hass: HomeAssistant,
     loadingReason: LoadingReason,

src/dialogs/config-flow/show-dialog-options-flow.ts

@@ -225,6 +225,13 @@ export const showOptionsFlowDialog = (
         );
       },
 
+      renderMenuOptionDescription(hass, step, option) {
+        return hass.localize(
+          `component.${step.translation_domain || configEntry.domain}.options.step.${step.step_id}.menu_option_descriptions.${option}`,
+          step.description_placeholders
+        );
+      },
+
       renderLoadingDescription(hass, reason) {
         return (
           hass.localize(`component.${configEntry.domain}.options.loading`) ||

src/dialogs/config-flow/show-dialog-sub-config-flow.ts

@@ -252,6 +252,13 @@ export const showSubConfigFlowDialog = (
       );
     },
 
+    renderMenuOptionDescription(hass, step, option) {
+      return hass.localize(
+        `component.${step.translation_domain || configEntry.domain}.config_subentries.${flowType}.step.${step.step_id}.menu_option_descriptions.${option}`,
+        step.description_placeholders
+      );
+    },
+
     renderLoadingDescription(hass, reason, handler, step) {
       if (reason !== "loading_flow" && reason !== "loading_step") {
         return "";

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

@@ -1,5 +1,5 @@
-import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import type { PropertyValues, TemplateResult } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-icon-next";
@@ -8,6 +8,7 @@ import type { DataEntryFlowStepMenu } from "../../data/data_entry_flow";
 import type { HomeAssistant } from "../../types";
 import type { FlowConfig } from "./show-dialog-data-entry-flow";
 import { configFlowContentStyles } from "./styles";
+import { stringCompare } from "../../common/string/compare";
 
 @customElement("step-flow-menu")
 class StepFlowMenu extends LitElement {
@@ -17,9 +18,18 @@ class StepFlowMenu extends LitElement {
 
   @property({ attribute: false }) public step!: DataEntryFlowStepMenu;
 
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    return (
+      changedProps.size > 1 ||
+      !changedProps.has("hass") ||
+      this.hass.localize !== changedProps.get("hass")?.localize
+    );
+  }
+
   protected render(): TemplateResult {
     let options: string[];
     let translations: Record<string, string>;
+    let optionDescriptions: Record<string, string> = {};
 
     if (Array.isArray(this.step.menu_options)) {
       options = this.step.menu_options;
@@ -30,10 +40,36 @@ class StepFlowMenu extends LitElement {
           this.step,
           option
         );
+        optionDescriptions[option] =
+          this.flowConfig.renderMenuOptionDescription(
+            this.hass,
+            this.step,
+            option
+          );
       }
     } else {
       options = Object.keys(this.step.menu_options);
       translations = this.step.menu_options;
+      optionDescriptions = Object.fromEntries(
+        options.map((key) => [
+          key,
+          this.flowConfig.renderMenuOptionDescription(
+            this.hass,
+            this.step,
+            key
+          ),
+        ])
+      );
+    }
+
+    if (this.step.sort) {
+      options = options.sort((a, b) =>
+        stringCompare(
+          translations[a]!,
+          translations[b]!,
+          this.hass.locale.language
+        )
+      );
     }
 
     const description = this.flowConfig.renderMenuDescription(
@@ -46,8 +82,18 @@ class StepFlowMenu extends LitElement {
       <div class="options">
         ${options.map(
           (option) => html`
-            <ha-list-item hasMeta .step=${option} @click=${this._handleStep}>
+            <ha-list-item
+              hasMeta
+              .step=${option}
+              @click=${this._handleStep}
+              ?twoline=${optionDescriptions[option]}
+            >
               <span>${translations[option]}</span>
+              ${optionDescriptions[option]
+                ? html`<span slot="secondary">
+                    ${optionDescriptions[option]}
+                  </span>`
+                : nothing}
               <ha-icon-next slot="meta"></ha-icon-next>
             </ha-list-item>
           `
@@ -73,11 +119,10 @@ class StepFlowMenu extends LitElement {
     css`
       .options {
         margin-top: 20px;
-        margin-bottom: 8px;
+        margin-bottom: 16px;
       }
       .content {
         padding-bottom: 16px;
-        border-bottom: 1px solid var(--divider-color);
       }
       .content + .options {
         margin-top: 8px;

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

@@ -6,7 +6,9 @@ import memoizeOne from "memoize-one";
 import { formatDateWeekdayShort } from "../../../common/datetime/format_date";
 import { formatTime } from "../../../common/datetime/format_time";
 import { formatNumber } from "../../../common/number/format_number";
+import "../../../components/ha-alert";
 import "../../../components/ha-relative-time";
+import "../../../components/ha-spinner";
 import "../../../components/ha-state-icon";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-tooltip";
@@ -292,106 +294,101 @@ class MoreInfoWeather extends LitElement {
             </div>
           `
         : nothing}
-      ${forecast
-        ? html`
-            <div class="section">
-              ${this.hass.localize("ui.card.weather.forecast")}:
-            </div>
-            ${supportedForecasts.length > 1
-              ? html`<sl-tab-group
-                  @sl-tab-show=${this._handleForecastTypeChanged}
+
+      <div class="section">
+        ${this.hass.localize("ui.card.weather.forecast")}:
+      </div>
+      ${supportedForecasts?.length > 1
+        ? html`<sl-tab-group @sl-tab-show=${this._handleForecastTypeChanged}>
+            ${supportedForecasts.map(
+              (forecastType) =>
+                html`<sl-tab
+                  slot="nav"
+                  .panel=${forecastType}
+                  .active=${this._forecastType === forecastType}
                 >
-                  ${supportedForecasts.map(
-                    (forecastType) =>
-                      html`<sl-tab
-                        slot="nav"
-                        .panel=${forecastType}
-                        .active=${this._forecastType === forecastType}
-                      >
-                        ${this.hass!.localize(
-                          `ui.card.weather.${forecastType}`
-                        )}
-                      </sl-tab>`
-                  )}
-                </sl-tab-group>`
-              : nothing}
-            <div class="forecast">
-              ${forecast.map((item) =>
-                this._showValue(item.templow) ||
-                this._showValue(item.temperature)
-                  ? html`
+                  ${this.hass!.localize(`ui.card.weather.${forecastType}`)}
+                </sl-tab>`
+            )}
+          </sl-tab-group>`
+        : nothing}
+      <div class="forecast">
+        ${forecast?.length
+          ? forecast.map((item) =>
+              this._showValue(item.templow) || this._showValue(item.temperature)
+                ? html`
+                    <div>
                       <div>
-                        <div>
-                          ${dayNight
+                        ${dayNight
+                          ? html`
+                              ${formatDateWeekdayShort(
+                                new Date(item.datetime),
+                                this.hass!.locale,
+                                this.hass!.config
+                              )}
+                              <div class="daynight">
+                                ${item.is_daytime !== false
+                                  ? this.hass!.localize("ui.card.weather.day")
+                                  : this.hass!.localize(
+                                      "ui.card.weather.night"
+                                    )}<br />
+                              </div>
+                            `
+                          : hourly
                             ? html`
+                                ${formatTime(
+                                  new Date(item.datetime),
+                                  this.hass!.locale,
+                                  this.hass!.config
+                                )}
+                              `
+                            : html`
                                 ${formatDateWeekdayShort(
                                   new Date(item.datetime),
                                   this.hass!.locale,
                                   this.hass!.config
                                 )}
-                                <div class="daynight">
-                                  ${item.is_daytime !== false
-                                    ? this.hass!.localize("ui.card.weather.day")
-                                    : this.hass!.localize(
-                                        "ui.card.weather.night"
-                                      )}<br />
-                                </div>
-                              `
-                            : hourly
-                              ? html`
-                                  ${formatTime(
-                                    new Date(item.datetime),
-                                    this.hass!.locale,
-                                    this.hass!.config
-                                  )}
-                                `
-                              : html`
-                                  ${formatDateWeekdayShort(
-                                    new Date(item.datetime),
-                                    this.hass!.locale,
-                                    this.hass!.config
-                                  )}
-                                `}
-                        </div>
-                        ${this._showValue(item.condition)
-                          ? html`
-                              <div class="forecast-image-icon">
-                                ${getWeatherStateIcon(
-                                  item.condition!,
-                                  this,
-                                  !(
-                                    item.is_daytime ||
-                                    item.is_daytime === undefined
-                                  )
-                                )}
-                              </div>
-                            `
-                          : nothing}
-                        <div class="temp">
-                          ${this._showValue(item.temperature)
-                            ? html`${formatNumber(
-                                item.temperature,
-                                this.hass!.locale
-                              )}°`
-                            : "—"}
-                        </div>
-                        <div class="templow">
-                          ${this._showValue(item.templow)
-                            ? html`${formatNumber(
-                                item.templow!,
-                                this.hass!.locale
-                              )}°`
-                            : hourly
-                              ? nothing
-                              : "—"}
-                        </div>
+                              `}
                       </div>
-                    `
-                  : nothing
-              )}
-            </div>
-          `
-        : nothing}
+                      ${this._showValue(item.condition)
+                        ? html`
+                            <div class="forecast-image-icon">
+                              ${getWeatherStateIcon(
+                                item.condition!,
+                                this,
+                                !(
+                                  item.is_daytime ||
+                                  item.is_daytime === undefined
+                                )
+                              )}
+                            </div>
+                          `
+                        : nothing}
+                      <div class="temp">
+                        ${this._showValue(item.temperature)
+                          ? html`${formatNumber(
+                              item.temperature,
+                              this.hass!.locale
+                            )}°`
+                          : "—"}
+                      </div>
+                      <div class="templow">
+                        ${this._showValue(item.templow)
+                          ? html`${formatNumber(
+                              item.templow!,
+                              this.hass!.locale
+                            )}°`
+                          : hourly
+                            ? nothing
+                            : "—"}
+                      </div>
+                    </div>
+                  `
+                : nothing
+            )
+          : html`<ha-spinner size="medium"></ha-spinner>`}
+      </div>
+
       ${this.stateObj.attributes.attribution
         ? html`
             <div class="attribution">
@@ -589,6 +586,10 @@ class MoreInfoWeather extends LitElement {
         .forecast-icon {
           --mdc-icon-size: 40px;
         }
+
+        .forecast ha-spinner {
+          height: 120px;
+        }
       `,
     ];
   }

src/dialogs/shortcuts/dialog-shortcuts.ts

@@ -1,136 +1,148 @@
+import { mdiAppleKeyboardCommand } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import "../../components/ha-button";
-import { createCloseHeading } from "../../components/ha-dialog";
-import type { HomeAssistant } from "../../types";
-import { haStyleDialog } from "../../resources/styles";
-import "../../components/ha-alert";
-import "../../components/chips/ha-assist-chip";
 import type { LocalizeKeys } from "../../common/translations/localize";
+import "../../components/ha-alert";
+import { createCloseHeading } from "../../components/ha-dialog";
+import "../../components/ha-svg-icon";
+import { haStyleDialog } from "../../resources/styles";
+import type { HomeAssistant } from "../../types";
+import { isMac } from "../../util/is_mac";
 
 interface Text {
-  type: "text";
-  key: LocalizeKeys;
+  textTranslationKey: LocalizeKeys;
 }
 
-type ShortcutString = string | { key: LocalizeKeys };
+interface LocalizedShortcut {
+  shortcutTranslationKey: LocalizeKeys;
+}
+
+type ShortcutString = string | LocalizedShortcut;
 
 interface Shortcut {
-  type: "shortcut";
   shortcut: ShortcutString[];
-  key: LocalizeKeys;
+  descriptionTranslationKey: LocalizeKeys;
 }
 
 interface Section {
-  key: LocalizeKeys;
+  titleTranslationKey: LocalizeKeys;
   items: (Text | Shortcut)[];
 }
 
+const CTRL_CMD = "__CTRL_CMD__";
+
 const _SHORTCUTS: Section[] = [
   {
-    key: "ui.dialogs.shortcuts.searching.title",
+    titleTranslationKey: "ui.dialogs.shortcuts.searching.title",
     items: [
-      { type: "text", key: "ui.dialogs.shortcuts.searching.on_any_page" },
       {
-        type: "shortcut",
+        textTranslationKey: "ui.dialogs.shortcuts.searching.on_any_page",
+      },
+      {
         shortcut: ["C"],
-        key: "ui.dialogs.shortcuts.searching.search_command",
+        descriptionTranslationKey:
+          "ui.dialogs.shortcuts.searching.search_command",
       },
       {
-        type: "shortcut",
         shortcut: ["E"],
-        key: "ui.dialogs.shortcuts.searching.search_entities",
+        descriptionTranslationKey:
+          "ui.dialogs.shortcuts.searching.search_entities",
       },
       {
-        type: "shortcut",
         shortcut: ["D"],
-        key: "ui.dialogs.shortcuts.searching.search_devices",
+        descriptionTranslationKey:
+          "ui.dialogs.shortcuts.searching.search_devices",
       },
       {
-        type: "text",
-        key: "ui.dialogs.shortcuts.searching.on_pages_with_tables",
+        textTranslationKey:
+          "ui.dialogs.shortcuts.searching.on_pages_with_tables",
       },
       {
-        type: "shortcut",
-        shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "F"],
-        key: "ui.dialogs.shortcuts.searching.search_in_table",
+        shortcut: [CTRL_CMD, "F"],
+        descriptionTranslationKey:
+          "ui.dialogs.shortcuts.searching.search_in_table",
       },
     ],
   },
   {
-    key: "ui.dialogs.shortcuts.assist.title",
+    titleTranslationKey: "ui.dialogs.shortcuts.assist.title",
     items: [
       {
-        type: "shortcut",
         shortcut: ["A"],
-        key: "ui.dialogs.shortcuts.assist.open_assist",
+        descriptionTranslationKey: "ui.dialogs.shortcuts.assist.open_assist",
       },
     ],
   },
   {
-    key: "ui.dialogs.shortcuts.automation_script.title",
+    titleTranslationKey: "ui.dialogs.shortcuts.automation_script.title",
     items: [
       {
-        type: "shortcut",
-        shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "C"],
-        key: "ui.dialogs.shortcuts.automation_script.copy",
+        shortcut: [CTRL_CMD, "C"],
+        descriptionTranslationKey:
+          "ui.dialogs.shortcuts.automation_script.copy",
       },
       {
-        type: "shortcut",
-        shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "X"],
-        key: "ui.dialogs.shortcuts.automation_script.cut",
+        shortcut: [CTRL_CMD, "X"],
+        descriptionTranslationKey: "ui.dialogs.shortcuts.automation_script.cut",
       },
       {
-        type: "shortcut",
-        shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "del"],
-        key: "ui.dialogs.shortcuts.automation_script.delete",
-      },
-      {
-        type: "shortcut",
-        shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "V"],
-        key: "ui.dialogs.shortcuts.automation_script.paste",
-      },
-      {
-        type: "shortcut",
-        shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "S"],
-        key: "ui.dialogs.shortcuts.automation_script.save",
-      },
-    ],
-  },
-  {
-    key: "ui.dialogs.shortcuts.charts.title",
-    items: [
-      {
-        type: "shortcut",
         shortcut: [
-          { key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" },
-          { key: "ui.dialogs.shortcuts.shortcuts.drag" },
+          CTRL_CMD,
+          { shortcutTranslationKey: "ui.dialogs.shortcuts.keys.del" },
         ],
-        key: "ui.dialogs.shortcuts.charts.drag_to_zoom",
+        descriptionTranslationKey:
+          "ui.dialogs.shortcuts.automation_script.delete",
       },
       {
-        type: "shortcut",
-        shortcut: [
-          { key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" },
-          { key: "ui.dialogs.shortcuts.shortcuts.scroll_wheel" },
-        ],
-        key: "ui.dialogs.shortcuts.charts.scroll_to_zoom",
+        shortcut: [CTRL_CMD, "V"],
+        descriptionTranslationKey:
+          "ui.dialogs.shortcuts.automation_script.paste",
       },
       {
-        type: "shortcut",
-        shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.double_click" }],
-        key: "ui.dialogs.shortcuts.charts.double_click",
+        shortcut: [CTRL_CMD, "S"],
+        descriptionTranslationKey:
+          "ui.dialogs.shortcuts.automation_script.save",
       },
     ],
   },
   {
-    key: "ui.dialogs.shortcuts.other.title",
+    titleTranslationKey: "ui.dialogs.shortcuts.charts.title",
+    items: [
+      {
+        shortcut: [
+          CTRL_CMD,
+          { shortcutTranslationKey: "ui.dialogs.shortcuts.shortcuts.drag" },
+        ],
+        descriptionTranslationKey: "ui.dialogs.shortcuts.charts.drag_to_zoom",
+      },
+      {
+        shortcut: [
+          CTRL_CMD,
+          {
+            shortcutTranslationKey:
+              "ui.dialogs.shortcuts.shortcuts.scroll_wheel",
+          },
+        ],
+        descriptionTranslationKey: "ui.dialogs.shortcuts.charts.scroll_to_zoom",
+      },
+      {
+        shortcut: [
+          {
+            shortcutTranslationKey:
+              "ui.dialogs.shortcuts.shortcuts.double_click",
+          },
+        ],
+        descriptionTranslationKey: "ui.dialogs.shortcuts.charts.double_click",
+      },
+    ],
+  },
+  {
+    titleTranslationKey: "ui.dialogs.shortcuts.other.title",
     items: [
       {
-        type: "shortcut",
         shortcut: ["M"],
-        key: "ui.dialogs.shortcuts.other.my_link",
+        descriptionTranslationKey: "ui.dialogs.shortcuts.other.my_link",
       },
     ],
   },
@@ -152,17 +164,28 @@ class DialogShortcuts extends LitElement {
   }
 
   private _renderShortcut(
-    shortcuts: ShortcutString[],
-    translationKey: LocalizeKeys
+    shortcutKeys: ShortcutString[],
+    descriptionKey: LocalizeKeys
   ) {
-    const keys = shortcuts.map((shortcut) =>
-      typeof shortcut === "string" ? shortcut : this.hass.localize(shortcut.key)
-    );
-
     return html`
       <div class="shortcut">
-        ${keys.map((key) => html` <span>${key.toUpperCase()}</span>`)}
-        ${this.hass.localize(translationKey)}
+        ${shortcutKeys.map(
+          (shortcutKey) =>
+            html`<span
+              >${shortcutKey === CTRL_CMD
+                ? isMac
+                  ? html`<ha-svg-icon
+                      .path=${mdiAppleKeyboardCommand}
+                    ></ha-svg-icon>`
+                  : this.hass.localize("ui.panel.config.automation.editor.ctrl")
+                : typeof shortcutKey === "string"
+                  ? shortcutKey
+                  : this.hass.localize(
+                      shortcutKey.shortcutTranslationKey
+                    )}</span
+            >`
+        )}
+        ${this.hass.localize(descriptionKey)}
       </div>
     `;
   }
@@ -186,16 +209,18 @@ class DialogShortcuts extends LitElement {
         <div class="content">
           ${_SHORTCUTS.map(
             (section) => html`
-              <h3>${this.hass.localize(section.key)}</h3>
+              <h3>${this.hass.localize(section.titleTranslationKey)}</h3>
               <div class="items">
                 ${section.items.map((item) => {
-                  if (item.type === "text") {
-                    return html`<p>${this.hass.localize(item.key)}</p>`;
+                  if ("shortcut" in item) {
+                    return this._renderShortcut(
+                      (item as Shortcut).shortcut,
+                      (item as Shortcut).descriptionTranslationKey
+                    );
                   }
-                  if (item.type === "shortcut") {
-                    return this._renderShortcut(item.shortcut, item.key);
-                  }
-                  return nothing;
+                  return html`<p>
+                    ${this.hass.localize((item as Text).textTranslationKey)}
+                  </p>`;
                 })}
               </div>
             `
@@ -247,6 +272,10 @@ class DialogShortcuts extends LitElement {
       .items p {
         margin-bottom: 8px;
       }
+
+      ha-svg-icon {
+        width: 12px;
+      }
     `,
   ];
 }

src/html/authorize.html.template

@@ -35,6 +35,7 @@
         align-items: center;
         justify-content: center;
         margin-bottom: 32px;
+        padding-top: var(--safe-area-inset-top);
       }
 
       .header img {

src/html/index.html.template

@@ -44,7 +44,7 @@
       }
       #ha-launch-screen .ha-launch-screen-spacer-top {
         flex: 1;
-        margin-top: calc( 2 * max(var(--safe-area-inset-bottom, 0px), 48px) + 46px );
+        margin-top: calc( 2 * max(var(--safe-area-inset-top, 0px), 48px) + 46px );
         padding-top: 48px;
       }
       #ha-launch-screen .ha-launch-screen-spacer-bottom {

src/html/onboarding.html.template

@@ -19,8 +19,9 @@
         height: auto;
         padding: 32px 0;
       }
+
       .content {
-        max-width: 560px;
+        max-width: min(560px, calc(100vw - var(--safe-area-inset-right, 0px) - var(--safe-area-inset-left, 0px)));
         margin: 0 auto;
         padding: 0 16px;
         box-sizing: content-box;
@@ -32,6 +33,7 @@
         justify-content: flex-start;
         margin-bottom: 32px;
         margin-left: 32px;
+        padding-top: var(--safe-area-inset-top);
       }
 
       .header img {

src/layouts/home-assistant-main.ts

@@ -146,6 +146,8 @@ export class HomeAssistantMain extends LitElement {
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
       --mdc-drawer-width: 56px;
       --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width));
+      --safe-area-content-inset-left: 0px;
+      --safe-area-content-inset-right: var(--safe-area-inset-right);
     }
     :host([expanded]) {
       --mdc-drawer-width: calc(256px + var(--safe-area-inset-left));
@@ -153,6 +155,7 @@ export class HomeAssistantMain extends LitElement {
     :host([modal]) {
       --mdc-drawer-width: unset;
       --mdc-top-app-bar-width: unset;
+      --safe-area-content-inset-left: var(--safe-area-inset-left);
     }
     partial-panel-resolver,
     ha-sidebar {

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -89,7 +89,6 @@ import "./types/ha-automation-action-set_conversation_response";
 import "./types/ha-automation-action-stop";
 import "./types/ha-automation-action-wait_for_trigger";
 import "./types/ha-automation-action-wait_template";
-import { copyToClipboard } from "../../../../common/util/copy-clipboard";
 
 export const getAutomationActionType = memoizeOne(
   (action: Action | undefined) => {
@@ -508,7 +507,6 @@ export default class HaAutomationActionRow extends LitElement {
       ...this._clipboard,
       action: deepClone(this.action),
     };
-    copyToClipboard(JSON.stringify(this.action));
   }
 
   private _onDisable = () => {
@@ -694,8 +692,7 @@ export default class HaAutomationActionRow extends LitElement {
     ev?.stopPropagation();
 
     if (this._selected) {
-      this._selected = false;
-      fireEvent(this, "close-sidebar");
+      fireEvent(this, "request-close-sidebar");
       return;
     }
     this.openSidebar();

src/panels/config/automation/condition/ha-automation-condition-row.ts

@@ -69,7 +69,6 @@ import "./types/ha-automation-condition-template";
 import "./types/ha-automation-condition-time";
 import "./types/ha-automation-condition-trigger";
 import "./types/ha-automation-condition-zone";
-import { copyToClipboard } from "../../../../common/util/copy-clipboard";
 
 export interface ConditionElement extends LitElement {
   condition: Condition;
@@ -441,7 +440,6 @@ export default class HaAutomationConditionRow extends LitElement {
       ...this._clipboard,
       condition: deepClone(this.condition),
     };
-    copyToClipboard(JSON.stringify(this.condition));
   }
 
   private _onDisable = () => {
@@ -669,8 +667,7 @@ export default class HaAutomationConditionRow extends LitElement {
     ev?.stopPropagation();
 
     if (this._selected) {
-      this._selected = false;
-      fireEvent(this, "close-sidebar");
+      fireEvent(this, "request-close-sidebar");
       return;
     }
     this.openSidebar();

src/panels/config/automation/ha-automation-editor.ts

@@ -1115,6 +1115,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
       c: () => this._copySelectedRow(),
       x: () => this._cutSelectedRow(),
       Delete: () => this._deleteSelectedRow(),
+      Backspace: () => this._deleteSelectedRow(),
     };
   }
 

src/panels/config/automation/ha-automation-picker.ts

@@ -292,7 +292,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           extraTemplate: (automation) =>
             automation.labels.length
               ? html`<ha-data-table-labels
-                  @label-clicked=${this._labelClicked}
+                  @label-clicked=${narrow ? undefined : this._labelClicked}
                   .labels=${automation.labels}
                 ></ha-data-table-labels>`
               : nothing,

src/panels/config/automation/ha-automation-sidebar.ts

@@ -55,7 +55,7 @@ export default class HaAutomationSidebar extends LitElement {
           .yamlMode=${this._yamlMode}
           .sidebarKey=${this.sidebarKey}
           @toggle-yaml-mode=${this._toggleYamlMode}
-          @close-sidebar=${this._handleCloseSidebar}
+          @close-sidebar=${this.triggerCloseSidebar}
         ></ha-automation-sidebar-trigger>
       `;
     }
@@ -71,7 +71,7 @@ export default class HaAutomationSidebar extends LitElement {
           .yamlMode=${this._yamlMode}
           .sidebarKey=${this.sidebarKey}
           @toggle-yaml-mode=${this._toggleYamlMode}
-          @close-sidebar=${this._handleCloseSidebar}
+          @close-sidebar=${this.triggerCloseSidebar}
         ></ha-automation-sidebar-condition>
       `;
     }
@@ -87,7 +87,7 @@ export default class HaAutomationSidebar extends LitElement {
           .yamlMode=${this._yamlMode}
           .sidebarKey=${this.sidebarKey}
           @toggle-yaml-mode=${this._toggleYamlMode}
-          @close-sidebar=${this._handleCloseSidebar}
+          @close-sidebar=${this.triggerCloseSidebar}
         ></ha-automation-sidebar-action>
       `;
     }
@@ -100,7 +100,7 @@ export default class HaAutomationSidebar extends LitElement {
           .isWide=${this.isWide}
           .narrow=${this.narrow}
           .disabled=${this.disabled}
-          @close-sidebar=${this._handleCloseSidebar}
+          @close-sidebar=${this.triggerCloseSidebar}
         ></ha-automation-sidebar-option>
       `;
     }
@@ -116,7 +116,7 @@ export default class HaAutomationSidebar extends LitElement {
           .yamlMode=${this._yamlMode}
           .sidebarKey=${this.sidebarKey}
           @toggle-yaml-mode=${this._toggleYamlMode}
-          @close-sidebar=${this._handleCloseSidebar}
+          @close-sidebar=${this.triggerCloseSidebar}
         ></ha-automation-sidebar-script-field-selector>
       `;
     }
@@ -132,7 +132,7 @@ export default class HaAutomationSidebar extends LitElement {
           .yamlMode=${this._yamlMode}
           .sidebarKey=${this.sidebarKey}
           @toggle-yaml-mode=${this._toggleYamlMode}
-          @close-sidebar=${this._handleCloseSidebar}
+          @close-sidebar=${this.triggerCloseSidebar}
         ></ha-automation-sidebar-script-field>
       `;
     }
@@ -188,8 +188,8 @@ export default class HaAutomationSidebar extends LitElement {
     return undefined;
   }
 
-  private _handleCloseSidebar(ev: CustomEvent) {
-    ev.stopPropagation();
+  public triggerCloseSidebar(ev?: CustomEvent) {
+    ev?.stopPropagation();
     if (this.narrow) {
       this._bottomSheetElement?.closeSheet();
       return;

src/panels/config/automation/manual-automation-editor.ts

@@ -166,7 +166,7 @@ export class HaManualAutomationEditor extends LitElement {
         .disabled=${this.disabled || this.saving}
         .narrow=${this.narrow}
         @open-sidebar=${this._openSidebar}
-        @request-close-sidebar=${this._closeSidebar}
+        @request-close-sidebar=${this._triggerCloseSidebar}
         @close-sidebar=${this._handleCloseSidebar}
         root
         sidebar
@@ -213,7 +213,7 @@ export class HaManualAutomationEditor extends LitElement {
         .disabled=${this.disabled || this.saving}
         .narrow=${this.narrow}
         @open-sidebar=${this._openSidebar}
-        @request-close-sidebar=${this._closeSidebar}
+        @request-close-sidebar=${this._triggerCloseSidebar}
         @close-sidebar=${this._handleCloseSidebar}
         root
         sidebar
@@ -255,7 +255,7 @@ export class HaManualAutomationEditor extends LitElement {
         .highlightedActions=${this._pastedConfig?.actions || []}
         @value-changed=${this._actionChanged}
         @open-sidebar=${this._openSidebar}
-        @request-close-sidebar=${this._closeSidebar}
+        @request-close-sidebar=${this._triggerCloseSidebar}
         @close-sidebar=${this._handleCloseSidebar}
         .hass=${this.hass}
         .narrow=${this.narrow}
@@ -351,8 +351,12 @@ export class HaManualAutomationEditor extends LitElement {
     };
   }
 
-  private _closeSidebar() {
+  private _triggerCloseSidebar() {
     if (this._sidebarConfig) {
+      if (this._sidebarElement) {
+        this._sidebarElement.triggerCloseSidebar();
+        return;
+      }
       this._sidebarConfig?.close();
     }
   }
@@ -389,7 +393,7 @@ export class HaManualAutomationEditor extends LitElement {
   }
 
   private _saveAutomation() {
-    this._closeSidebar();
+    this._triggerCloseSidebar();
     fireEvent(this, "save-automation");
   }
 
@@ -494,14 +498,6 @@ export class HaManualAutomationEditor extends LitElement {
     if (normalized) {
       ev.preventDefault();
 
-      if (
-        Object.keys(normalized).length === 1 &&
-        ensureArray(normalized[Object.keys(normalized)[0]]).length === 1
-      ) {
-        this._appendToExistingConfig(normalized);
-        return;
-      }
-
       if (
         this.dirty ||
         ensureArray(this.config.triggers)?.length ||

src/panels/config/automation/option/ha-automation-option-row.ts

@@ -381,8 +381,7 @@ export default class HaAutomationOptionRow extends LitElement {
     ev?.stopPropagation();
 
     if (this._selected) {
-      this._selected = false;
-      fireEvent(this, "close-sidebar");
+      fireEvent(this, "request-close-sidebar");
       return;
     }
     this.openSidebar();

src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts

@@ -171,7 +171,6 @@ export default class HaAutomationSidebarCard extends LitElement {
       transition: box-shadow 180ms ease-in-out;
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
-      z-index: 6;
       position: relative;
       background-color: var(
         --ha-dialog-surface-background,
@@ -201,6 +200,7 @@ export default class HaAutomationSidebarCard extends LitElement {
     .card-content {
       max-height: calc(100% - 80px);
       overflow: auto;
+      margin-top: 0;
     }
 
     @media (min-width: 450px) and (min-height: 500px) {

src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts

@@ -65,6 +65,10 @@ export default class HaAutomationSidebarCondition extends LitElement {
         }
       }
     }
+    // Reset testing state when condition changes
+    if (changedProperties.has("sidebarKey")) {
+      this._testing = false;
+    }
   }
 
   protected render() {
@@ -283,20 +287,23 @@ export default class HaAutomationSidebarCondition extends LitElement {
               sidebar
             ></ha-automation-condition-editor>`
           )}
-      <div
-        class="testing ${classMap({
-          active: this._testing,
-          pass: this._testingResult === true,
-          error: this._testingResult === false,
-        })}"
-      >
-        ${this._testingResult
-          ? this.hass.localize(
-              "ui.panel.config.automation.editor.conditions.testing_pass"
-            )
-          : this.hass.localize(
-              "ui.panel.config.automation.editor.conditions.testing_error"
-            )}
+      <div class="testing-wrapper">
+        <div
+          class="testing ${classMap({
+            active: this._testing,
+            pass: this._testingResult === true,
+            error: this._testingResult === false,
+            narrow: this.narrow,
+          })}"
+        >
+          ${this._testingResult
+            ? this.hass.localize(
+                "ui.panel.config.automation.editor.conditions.testing_pass"
+              )
+            : this.hass.localize(
+                "ui.panel.config.automation.editor.conditions.testing_error"
+              )}
+        </div>
       </div>
     </ha-automation-sidebar-card>`;
   }
@@ -396,21 +403,13 @@ export default class HaAutomationSidebarCondition extends LitElement {
       ha-automation-sidebar-card {
         position: relative;
       }
-      .testing {
+      .testing-wrapper {
         position: absolute;
-        z-index: 6;
         top: 0px;
         right: 0px;
         left: 0px;
-        text-transform: uppercase;
-        font-size: var(--ha-font-size-m);
-        font-weight: var(--ha-font-weight-bold);
-        background-color: var(--divider-color, #e0e0e0);
-        color: var(--text-primary-color);
-        max-height: 0px;
+        margin: -1px;
         overflow: hidden;
-        transition: max-height 0.3s;
-        text-align: center;
         border-top-right-radius: var(
           --ha-card-border-radius,
           var(--ha-border-radius-lg)
@@ -419,15 +418,33 @@ export default class HaAutomationSidebarCondition extends LitElement {
           --ha-card-border-radius,
           var(--ha-border-radius-lg)
         );
+        pointer-events: none;
+        height: 100px;
+      }
+      .testing {
+        --testing-color: var(--divider-color, #e0e0e0);
+        text-transform: uppercase;
+        font-size: var(--ha-font-size-m);
+        font-weight: var(--ha-font-weight-bold);
+        background-color: var(--testing-color);
+        color: var(--text-primary-color);
+        max-height: 0px;
+        transition:
+          max-height 0.3s ease-in-out,
+          padding-top 0.3s ease-in-out;
+        text-align: center;
+      }
+      .testing.active.narrow {
+        padding-top: 16px;
       }
       .testing.active {
-        max-height: 100px;
+        max-height: 100%;
       }
       .testing.error {
-        background-color: var(--accent-color);
+        --testing-color: var(--accent-color);
       }
       .testing.pass {
-        background-color: var(--success-color);
+        --testing-color: var(--success-color);
       }
     `,
   ];

src/panels/config/automation/styles.ts

@@ -217,7 +217,7 @@ export const automationRowsStyles = css`
 export const sidebarEditorStyles = css`
   .sidebar-editor {
     display: block;
-    padding-top: 16px;
+    padding-top: 8px;
   }
   .description {
     padding-top: 16px;

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -75,7 +75,6 @@ import "./types/ha-automation-trigger-time";
 import "./types/ha-automation-trigger-time_pattern";
 import "./types/ha-automation-trigger-webhook";
 import "./types/ha-automation-trigger-zone";
-import { copyToClipboard } from "../../../../common/util/copy-clipboard";
 
 export interface TriggerElement extends LitElement {
   trigger: Trigger;
@@ -482,8 +481,7 @@ export default class HaAutomationTriggerRow extends LitElement {
     ev?.stopPropagation();
 
     if (this._selected) {
-      this._selected = false;
-      fireEvent(this, "close-sidebar");
+      fireEvent(this, "request-close-sidebar");
       return;
     }
     this.openSidebar();
@@ -534,7 +532,6 @@ export default class HaAutomationTriggerRow extends LitElement {
       ...this._clipboard,
       trigger: this.trigger,
     };
-    copyToClipboard(JSON.stringify(this.trigger));
   }
 
   private _onDelete = () => {

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

@@ -773,6 +773,11 @@ export class HaConfigDevicePage extends LitElement {
                         appearance="plain"
                         target=${ifDefined(firstDeviceAction!.target)}
                         class=${ifDefined(firstDeviceAction!.classes)}
+                        .variant=${firstDeviceAction!.classes?.includes(
+                          "warning"
+                        )
+                          ? "danger"
+                          : "brand"}
                         .action=${firstDeviceAction!.action}
                         @click=${this._deviceActionClicked}
                       >

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

@@ -1,5 +1,5 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-code-editor";
@@ -11,13 +11,22 @@ import { showOptionsFlowDialog } from "../../../../../dialogs/config-flow/show-d
 import "../../../../../layouts/hass-subpage";
 import { haStyle } from "../../../../../resources/styles";
 import type { HomeAssistant } from "../../../../../types";
-import { subscribeBluetoothConnectionAllocations } from "../../../../../data/bluetooth";
+import {
+  subscribeBluetoothConnectionAllocations,
+  subscribeBluetoothScannerState,
+  subscribeBluetoothScannersDetails,
+} from "../../../../../data/bluetooth";
+import type {
+  BluetoothAllocationsData,
+  BluetoothScannerState,
+  BluetoothScannersDetails,
+  HaScannerType,
+} from "../../../../../data/bluetooth";
 import {
   getValueInPercentage,
   roundWithOneDecimal,
 } from "../../../../../util/calculate";
 import "../../../../../components/ha-metric";
-import type { BluetoothAllocationsData } from "../../../../../data/bluetooth";
 
 @customElement("bluetooth-config-dashboard")
 export class BluetoothConfigDashboard extends LitElement {
@@ -29,16 +38,26 @@ export class BluetoothConfigDashboard extends LitElement {
 
   @state() private _connectionAllocationsError?: string;
 
+  @state() private _scannerState?: BluetoothScannerState;
+
+  @state() private _scannerDetails?: BluetoothScannersDetails;
+
   private _configEntry = new URLSearchParams(window.location.search).get(
     "config_entry"
   );
 
   private _unsubConnectionAllocations?: (() => Promise<void>) | undefined;
 
+  private _unsubScannerState?: (() => Promise<void>) | undefined;
+
+  private _unsubScannerDetails?: (() => void) | undefined;
+
   public connectedCallback(): void {
     super.connectedCallback();
     if (this.hass) {
       this._subscribeBluetoothConnectionAllocations();
+      this._subscribeBluetoothScannerState();
+      this._subscribeScannerDetails();
     }
   }
 
@@ -61,12 +80,45 @@ export class BluetoothConfigDashboard extends LitElement {
     }
   }
 
+  private async _subscribeBluetoothScannerState(): Promise<void> {
+    if (this._unsubScannerState || !this._configEntry) {
+      return;
+    }
+    this._unsubScannerState = await subscribeBluetoothScannerState(
+      this.hass.connection,
+      (scannerState) => {
+        this._scannerState = scannerState;
+      },
+      this._configEntry
+    );
+  }
+
+  private _subscribeScannerDetails(): void {
+    if (this._unsubScannerDetails) {
+      return;
+    }
+    this._unsubScannerDetails = subscribeBluetoothScannersDetails(
+      this.hass.connection,
+      (details) => {
+        this._scannerDetails = details;
+      }
+    );
+  }
+
   public disconnectedCallback() {
     super.disconnectedCallback();
     if (this._unsubConnectionAllocations) {
       this._unsubConnectionAllocations();
       this._unsubConnectionAllocations = undefined;
     }
+    if (this._unsubScannerState) {
+      this._unsubScannerState();
+      this._unsubScannerState = undefined;
+    }
+    if (this._unsubScannerDetails) {
+      this._unsubScannerDetails();
+      this._unsubScannerDetails = undefined;
+    }
   }
 
   protected render(): TemplateResult {
@@ -78,6 +130,7 @@ export class BluetoothConfigDashboard extends LitElement {
               "ui.panel.config.bluetooth.settings_title"
             )}
           >
+            <div class="card-content">${this._renderScannerState()}</div>
             <div class="card-actions">
               <ha-button @click=${this._openOptionFlow}
                 >${this.hass.localize(
@@ -142,6 +195,118 @@ export class BluetoothConfigDashboard extends LitElement {
   private _getUsedAllocations = (used: number, total: number) =>
     roundWithOneDecimal(getValueInPercentage(used, 0, total));
 
+  private _renderScannerMismatchWarning(
+    scannerState: BluetoothScannerState,
+    scannerType: HaScannerType,
+    formatMode: (mode: string | null) => string
+  ) {
+    const instructions: string[] = [];
+
+    if (scannerType === "remote" || scannerType === "unknown") {
+      instructions.push(
+        this.hass.localize(
+          "ui.panel.config.bluetooth.scanner_mode_mismatch_remote"
+        )
+      );
+    }
+    if (scannerType === "usb" || scannerType === "unknown") {
+      instructions.push(
+        this.hass.localize(
+          "ui.panel.config.bluetooth.scanner_mode_mismatch_usb"
+        )
+      );
+    }
+    if (scannerType === "uart" || scannerType === "unknown") {
+      instructions.push(
+        this.hass.localize(
+          "ui.panel.config.bluetooth.scanner_mode_mismatch_uart"
+        )
+      );
+    }
+
+    return html`<ha-alert alert-type="warning">
+      <div>
+        ${this.hass.localize(
+          "ui.panel.config.bluetooth.scanner_mode_mismatch",
+          {
+            requested: formatMode(scannerState.requested_mode),
+            current: formatMode(scannerState.current_mode),
+          }
+        )}
+      </div>
+      <ul>
+        ${instructions.map((instruction) => html`<li>${instruction}</li>`)}
+      </ul>
+    </ha-alert>`;
+  }
+
+  private _renderScannerState() {
+    if (!this._configEntry || !this._scannerState) {
+      return html`<div>
+        ${this.hass.localize(
+          "ui.panel.config.bluetooth.no_scanner_state_available"
+        )}
+      </div>`;
+    }
+
+    const scannerState = this._scannerState;
+    // Find the scanner details for this source
+    const scannerDetails = this._scannerDetails?.[scannerState.source];
+    const scannerType: HaScannerType =
+      scannerDetails?.scanner_type ?? "unknown";
+
+    const formatMode = (mode: string | null) => {
+      switch (mode) {
+        case null:
+          return this.hass.localize(
+            "ui.panel.config.bluetooth.scanning_mode_none"
+          );
+        case "active":
+          return this.hass.localize(
+            "ui.panel.config.bluetooth.scanning_mode_active"
+          );
+        case "passive":
+          return this.hass.localize(
+            "ui.panel.config.bluetooth.scanning_mode_passive"
+          );
+        default:
+          return mode; // Fallback for unknown modes
+      }
+    };
+
+    return html`
+      <div class="scanner-state">
+        <div class="state-row">
+          <span
+            >${this.hass.localize(
+              "ui.panel.config.bluetooth.current_scanning_mode"
+            )}:</span
+          >
+          <span class="state-value"
+            >${formatMode(scannerState.current_mode)}</span
+          >
+        </div>
+        <div class="state-row">
+          <span
+            >${this.hass.localize(
+              "ui.panel.config.bluetooth.requested_scanning_mode"
+            )}:</span
+          >
+          <span class="state-value"
+            >${formatMode(scannerState.requested_mode)}</span
+          >
+        </div>
+        ${scannerState.current_mode !== scannerState.requested_mode
+          ? this._renderScannerMismatchWarning(
+              scannerState,
+              scannerType,
+              formatMode
+            )
+          : nothing}
+      </div>
+    `;
+  }
+
   private _renderConnectionAllocations() {
     if (this._connectionAllocationsError) {
       return html`<ha-alert alert-type="error"
@@ -220,6 +385,18 @@ export class BluetoothConfigDashboard extends LitElement {
           display: flex;
           justify-content: flex-end;
         }
+        .scanner-state {
+          margin-bottom: 16px;
+        }
+        .state-row {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 4px 0;
+        }
+        .state-value {
+          font-weight: 500;
+        }
       `,
     ];
   }

src/panels/config/integrations/integration-panels/bluetooth/bluetooth-network-visualization.ts

@@ -34,6 +34,16 @@ const UPDATE_THROTTLE_TIME = 10000;
 const CORE_SOURCE_ID = "ha";
 const CORE_SOURCE_LABEL = "Home Assistant";
 
+const RSSI_COLOR_THRESHOLDS: [number, string][] = [
+  [-70, "--green-color"], // Excellent: > -70 dBm
+  [-75, "--lime-color"], // Good: -70 to -75 dBm
+  [-80, "--yellow-color"], // Okay: -75 to -80 dBm
+  [-85, "--amber-color"], // Marginal: -80 to -85 dBm
+  [-90, "--orange-color"], // Weak: -85 to -90 dBm
+  [-95, "--deep-orange-color"], // Poor: -90 to -95 dBm
+  [-Infinity, "--red-color"], // Very poor: < -95 dBm
+];
+
 @customElement("bluetooth-network-visualization")
 export class BluetoothNetworkVisualization extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -125,6 +135,16 @@ export class BluetoothNetworkVisualization extends LitElement {
     `;
   }
 
+  private _getRssiColorVar = memoizeOne((rssi: number): string => {
+    for (const [threshold, colorVar] of RSSI_COLOR_THRESHOLDS) {
+      if (rssi > threshold) {
+        return colorVar;
+      }
+    }
+    // Fallback (should never reach here)
+    return "--red-color";
+  });
+
   private _formatNetworkData = memoizeOne(
     (
       data: BluetoothDeviceData[],
@@ -206,7 +226,7 @@ export class BluetoothNetworkVisualization extends LitElement {
             symbol: "none",
             lineStyle: {
               width: this._getLineWidth(node.rssi),
-              color: style.getPropertyValue("--primary-color"),
+              color: style.getPropertyValue(this._getRssiColorVar(node.rssi)),
             },
           });
           return;
@@ -227,7 +247,7 @@ export class BluetoothNetworkVisualization extends LitElement {
           lineStyle: {
             width: this._getLineWidth(node.rssi),
             color: device
-              ? style.getPropertyValue("--primary-color")
+              ? style.getPropertyValue(this._getRssiColorVar(node.rssi))
               : style.getPropertyValue("--disabled-color"),
           },
         });

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

@@ -199,8 +199,10 @@ export class HaConfigLovelaceDashboards extends LitElement {
           "ui.panel.config.lovelace.dashboards.picker.headers.require_admin"
         ),
         sortable: true,
-        type: "icon",
         hidden: narrow,
+        type: "icon",
+        minWidth: "120px",
+        maxWidth: "120px",
         template: (dashboard) =>
           dashboard.require_admin
             ? html`<ha-svg-icon .path=${mdiCheck}></ha-svg-icon>`
@@ -210,8 +212,10 @@ export class HaConfigLovelaceDashboards extends LitElement {
         title: localize(
           "ui.panel.config.lovelace.dashboards.picker.headers.sidebar"
         ),
-        type: "icon",
         hidden: narrow,
+        type: "icon",
+        minWidth: "120px",
+        maxWidth: "120px",
         template: (dashboard) =>
           dashboard.show_in_sidebar
             ? html`<ha-svg-icon .path=${mdiCheck}></ha-svg-icon>`

src/panels/config/repairs/show-dialog-repair-flow.ts

@@ -289,6 +289,15 @@ export const showRepairsFlowDialog = (
         );
       },
 
+      renderMenuOptionDescription(hass, step, option) {
+        return hass.localize(
+          `component.${issue.domain}.issues.${
+            issue.translation_key || issue.issue_id
+          }.fix_flow.step.${step.step_id}.menu_option_descriptions.${option}`,
+          mergePlaceholders(issue, step)
+        );
+      },
+
       renderLoadingDescription(hass, reason) {
         return (
           hass.localize(

src/panels/config/script/ha-script-field-row.ts

@@ -162,8 +162,7 @@ export default class HaScriptFieldRow extends LitElement {
     ev?.stopPropagation();
 
     if (this._selected) {
-      this._selected = false;
-      fireEvent(this, "close-sidebar");
+      fireEvent(this, "request-close-sidebar");
       return;
     }
 
@@ -176,8 +175,7 @@ export default class HaScriptFieldRow extends LitElement {
     ev?.stopPropagation();
 
     if (this._selectorRowSelected) {
-      this._selectorRowSelected = false;
-      fireEvent(this, "close-sidebar");
+      fireEvent(this, "request-close-sidebar");
       return;
     }
 

src/panels/config/script/manual-script-editor.ts

@@ -170,6 +170,7 @@ export class HaManualScriptEditor extends LitElement {
               .disabled=${this.disabled}
               .narrow=${this.narrow}
               @open-sidebar=${this._openSidebar}
+              @request-close-sidebar=${this._triggerCloseSidebar}
               @close-sidebar=${this._handleCloseSidebar}
             ></ha-script-fields>`
         : nothing
@@ -200,6 +201,7 @@ export class HaManualScriptEditor extends LitElement {
       .highlightedActions=${this._pastedConfig?.sequence || []}
       @value-changed=${this._sequenceChanged}
       @open-sidebar=${this._openSidebar}
+      @request-close-sidebar=${this._triggerCloseSidebar}
       @close-sidebar=${this._handleCloseSidebar}
       .hass=${this.hass}
       .narrow=${this.narrow}
@@ -506,11 +508,13 @@ export class HaManualScriptEditor extends LitElement {
     };
   }
 
-  private _closeSidebar() {
+  private _triggerCloseSidebar() {
     if (this._sidebarConfig) {
-      const closeRow = this._sidebarConfig?.close;
-      this._sidebarConfig = undefined;
-      closeRow?.();
+      if (this._sidebarElement) {
+        this._sidebarElement.triggerCloseSidebar();
+        return;
+      }
+      this._sidebarConfig?.close();
     }
   }
 
@@ -519,7 +523,7 @@ export class HaManualScriptEditor extends LitElement {
   }
 
   private _saveScript() {
-    this._closeSidebar();
+    this._triggerCloseSidebar();
     fireEvent(this, "save-script");
   }
 

src/panels/developer-tools/state/developer-tools-state.ts

@@ -568,6 +568,10 @@ class HaPanelDevState extends LitElement {
           margin: 0 8px 16px;
         }
 
+        ha-expansion-panel p {
+          padding: 0 8px;
+        }
+
         .inputs {
           width: 100%;
           max-width: 800px;
@@ -579,8 +583,9 @@ class HaPanelDevState extends LitElement {
 
         .button-row {
           display: flex;
-          margin-top: 8px;
+          margin: 8px 0;
           align-items: center;
+          gap: 8px;
         }
 
         :host([narrow]) .state-wrapper {

src/panels/lovelace/card-features/hui-button-card-feature.ts

@@ -4,6 +4,8 @@ import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import "../../../components/ha-control-button";
 import "../../../components/ha-control-button-group";
+import { hasScriptFields } from "../../../data/script";
+import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info-dialog";
 import type { HomeAssistant } from "../../../types";
 import type { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
 import { cardFeatureStyles } from "./common/card-feature-styles";
@@ -46,6 +48,14 @@ class HuiButtonCardFeature extends LitElement implements LovelaceCardFeature {
     const service =
       domain === "button" || domain === "input_button" ? "press" : "turn_on";
 
+    if (domain === "script") {
+      const entityId = this._stateObj.entity_id;
+      if (hasScriptFields(this.hass!, entityId)) {
+        showMoreInfoDialog(this, { entityId: entityId });
+        return;
+      }
+    }
+
     this.hass.callService(domain, service, {
       entity_id: this._stateObj.entity_id,
     });

src/panels/lovelace/card-features/hui-trend-graph-card-feature.ts

@@ -1,21 +1,21 @@
 import { css, html, LitElement, nothing } from "lit";
-import "../../../components/ha-spinner";
 import { customElement, property, state } from "lit/decorators";
-import { computeDomain } from "../../../common/entity/compute_domain";
-import { subscribeHistoryStatesTimeWindow } from "../../../data/history";
-import type { HomeAssistant } from "../../../types";
-import type { LovelaceCardFeature } from "../types";
-import type {
-  LovelaceCardFeatureContext,
-  HistoryChartCardFeatureConfig,
-} from "./types";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
+import { computeDomain } from "../../../common/entity/compute_domain";
+import { isNumericFromAttributes } from "../../../common/number/format_number";
+import "../../../components/ha-spinner";
+import { subscribeHistoryStatesTimeWindow } from "../../../data/history";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
+import type { HomeAssistant } from "../../../types";
 import { coordinatesMinimalResponseCompressedState } from "../common/graph/coordinates";
 import "../components/hui-graph-base";
-import { isNumericFromAttributes } from "../../../common/number/format_number";
+import type { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
+import type {
+  TrendGraphCardFeatureConfig,
+  LovelaceCardFeatureContext,
+} from "./types";
 
-export const supportsHistoryChartCardFeature = (
+export const supportsTrendGraphCardFeature = (
   hass: HomeAssistant,
   context: LovelaceCardFeatureContext
 ) => {
@@ -27,7 +27,9 @@ export const supportsHistoryChartCardFeature = (
   return domain === "sensor" && isNumericFromAttributes(stateObj.attributes);
 };
 
-@customElement("hui-history-chart-card-feature")
+export const DEFAULT_HOURS_TO_SHOW = 24;
+
+@customElement("hui-trend-graph-card-feature")
 class HuiHistoryChartCardFeature
   extends SubscribeMixin(LitElement)
   implements LovelaceCardFeature
@@ -37,20 +39,26 @@ class HuiHistoryChartCardFeature
 
   @property({ attribute: false }) public context?: LovelaceCardFeatureContext;
 
-  @state() private _config?: HistoryChartCardFeatureConfig;
+  @state() private _config?: TrendGraphCardFeatureConfig;
 
-  @state() private _coordinates?: number[][];
+  @state() private _coordinates?: [number, number][];
 
   private _interval?: number;
 
-  static getStubConfig(): HistoryChartCardFeatureConfig {
+  static getStubConfig(): TrendGraphCardFeatureConfig {
     return {
-      type: "history-chart",
-      hours_to_show: 24,
+      type: "trend-graph",
     };
   }
 
-  public setConfig(config: HistoryChartCardFeatureConfig): void {
+  public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
+    await import(
+      "../editor/config-elements/hui-trend-graph-card-feature-editor"
+    );
+    return document.createElement("hui-trend-graph-card-feature-editor");
+  }
+
+  public setConfig(config: TrendGraphCardFeatureConfig): void {
     if (!config) {
       throw new Error("Invalid configuration");
     }
@@ -78,7 +86,7 @@ class HuiHistoryChartCardFeature
       !this._config ||
       !this.hass ||
       !this.context ||
-      !supportsHistoryChartCardFeature(this.hass, this.context)
+      !supportsTrendGraphCardFeature(this.hass, this.context)
     ) {
       return nothing;
     }
@@ -109,19 +117,22 @@ class HuiHistoryChartCardFeature
     ) {
       return () => Promise.resolve();
     }
+
+    const hourToShow = this._config.hours_to_show ?? DEFAULT_HOURS_TO_SHOW;
+
     return subscribeHistoryStatesTimeWindow(
       this.hass!,
       (historyStates) => {
         this._coordinates =
           coordinatesMinimalResponseCompressedState(
             historyStates[this.context!.entity_id!],
-            this._config!.hours_to_show ?? 24,
+            hourToShow,
             500,
             2,
             undefined
           ) || [];
       },
-      this._config!.hours_to_show ?? 24,
+      hourToShow,
       [this.context!.entity_id!]
     );
   }
@@ -139,12 +150,15 @@ class HuiHistoryChartCardFeature
     hui-graph-base {
       width: 100%;
       --accent-color: var(--feature-color);
+      border-bottom-right-radius: 8px;
+      border-bottom-left-radius: 8px;
+      overflow: hidden;
     }
   `;
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-history-chart-card-feature": HuiHistoryChartCardFeature;
+    "hui-trend-graph-card-feature": HuiHistoryChartCardFeature;
   }
 }

src/panels/lovelace/card-features/types.ts

@@ -187,9 +187,9 @@ export interface UpdateActionsCardFeatureConfig {
   backup?: "yes" | "no" | "ask";
 }
 
-export interface HistoryChartCardFeatureConfig {
-  type: "history-chart";
-  hours_to_show: number;
+export interface TrendGraphCardFeatureConfig {
+  type: "trend-graph";
+  hours_to_show?: number;
 }
 
 export const AREA_CONTROLS = [
@@ -239,7 +239,7 @@ export type LovelaceCardFeatureConfig =
   | FanOscillateCardFeatureConfig
   | FanPresetModesCardFeatureConfig
   | FanSpeedCardFeatureConfig
-  | HistoryChartCardFeatureConfig
+  | TrendGraphCardFeatureConfig
   | HumidifierToggleCardFeatureConfig
   | HumidifierModesCardFeatureConfig
   | LawnMowerCommandsCardFeatureConfig
@@ -251,7 +251,7 @@ export type LovelaceCardFeatureConfig =
   | MediaPlayerVolumeSliderCardFeatureConfig
   | NumericInputCardFeatureConfig
   | SelectOptionsCardFeatureConfig
-  | HistoryChartCardFeatureConfig
+  | TrendGraphCardFeatureConfig
   | TargetHumidityCardFeatureConfig
   | TargetTemperatureCardFeatureConfig
   | ToggleCardFeatureConfig

src/panels/lovelace/cards/clock/hui-clock-card-digital.ts

@@ -36,11 +36,12 @@ export class HuiClockCardDigital extends LitElement {
       locale = { ...locale, time_format: this.config.time_format };
     }
 
+    const h12 = useAmPm(locale);
     this._dateTimeFormat = new Intl.DateTimeFormat(this.hass.locale.language, {
-      hour: "2-digit",
+      hour: h12 ? "numeric" : "2-digit",
       minute: "2-digit",
       second: "2-digit",
-      hourCycle: useAmPm(locale) ? "h12" : "h23",
+      hourCycle: h12 ? "h12" : "h23",
       timeZone:
         this.config?.time_zone ||
         resolveTimeZone(locale.time_zone, this.hass.config?.time_zone),

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

@@ -109,7 +109,7 @@ class HuiEnergySankeyCard
         "ui.panel.lovelace.cards.energy.energy_distribution.home"
       ),
       value: Math.max(0, consumption.total.used_total),
-      color: computedStyle.getPropertyValue("--primary-color"),
+      color: computedStyle.getPropertyValue("--primary-color").trim(),
       index: 1,
     };
     nodes.push(homeNode);
@@ -125,7 +125,9 @@ class HuiEnergySankeyCard
           "ui.panel.lovelace.cards.energy.energy_distribution.battery"
         ),
         value: totalBatteryOut,
-        color: computedStyle.getPropertyValue("--energy-battery-out-color"),
+        color: computedStyle
+          .getPropertyValue("--energy-battery-out-color")
+          .trim(),
         index: 0,
       });
       links.push({
@@ -141,7 +143,9 @@ class HuiEnergySankeyCard
           "ui.panel.lovelace.cards.energy.energy_distribution.battery"
         ),
         value: totalBatteryIn,
-        color: computedStyle.getPropertyValue("--energy-battery-in-color"),
+        color: computedStyle
+          .getPropertyValue("--energy-battery-in-color")
+          .trim(),
         index: 1,
       });
       if (consumption.total.grid_to_battery > 0) {
@@ -169,9 +173,9 @@ class HuiEnergySankeyCard
           "ui.panel.lovelace.cards.energy.energy_distribution.grid"
         ),
         value: totalFromGrid,
-        color: computedStyle.getPropertyValue(
-          "--energy-grid-consumption-color"
-        ),
+        color: computedStyle
+          .getPropertyValue("--energy-grid-consumption-color")
+          .trim(),
         index: 0,
       });
 
@@ -192,7 +196,7 @@ class HuiEnergySankeyCard
           "ui.panel.lovelace.cards.energy.energy_distribution.solar"
         ),
         value: totalSolarProduction,
-        color: computedStyle.getPropertyValue("--energy-solar-color"),
+        color: computedStyle.getPropertyValue("--energy-solar-color").trim(),
         index: 0,
       });
 
@@ -213,7 +217,9 @@ class HuiEnergySankeyCard
           "ui.panel.lovelace.cards.energy.energy_distribution.grid"
         ),
         value: totalToGrid,
-        color: computedStyle.getPropertyValue("--energy-grid-return-color"),
+        color: computedStyle
+          .getPropertyValue("--energy-grid-return-color")
+          .trim(),
         index: 1,
       });
       if (consumption.total.battery_to_grid > 0) {
@@ -295,7 +301,7 @@ class HuiEnergySankeyCard
               label: this.hass.floors[floorId].name,
               value: floors[floorId].value,
               index: 2,
-              color: computedStyle.getPropertyValue("--primary-color"),
+              color: computedStyle.getPropertyValue("--primary-color").trim(),
             });
             links.push({
               source: "home",
@@ -316,7 +322,7 @@ class HuiEnergySankeyCard
                 label: this.hass.areas[areaId]!.name,
                 value: areas[areaId].value,
                 index: 3,
-                color: computedStyle.getPropertyValue("--primary-color"),
+                color: computedStyle.getPropertyValue("--primary-color").trim(),
               });
               links.push({
                 source: floorNodeId,
@@ -360,7 +366,9 @@ class HuiEnergySankeyCard
           "ui.panel.lovelace.cards.energy.energy_devices_detail_graph.untracked_consumption"
         ),
         value: untrackedConsumption,
-        color: computedStyle.getPropertyValue("--state-unavailable-color"),
+        color: computedStyle
+          .getPropertyValue("--state-unavailable-color")
+          .trim(),
         index: 3 + deviceSections.length,
       });
       links.push({

src/panels/lovelace/cards/hui-picture-glance-card.ts

@@ -7,6 +7,7 @@ import { DOMAINS_TOGGLE } from "../../../common/const";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
+import { stateActive } from "../../../common/entity/state_active";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-state-icon";
@@ -30,15 +31,6 @@ import type {
 } from "./types";
 import type { PersonEntity } from "../../../data/person";
 
-const STATES_OFF = new Set([
-  "closed",
-  "locked",
-  "not_home",
-  "off",
-  "unavailable",
-  "unknown",
-]);
-
 @customElement("hui-picture-glance-card")
 class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
@@ -303,7 +295,7 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
           .disabled=${!hasAction(entityConf.tap_action)}
           .config=${entityConf}
           class=${classMap({
-            "state-on": !STATES_OFF.has(stateObj.state),
+            "state-on": stateActive(stateObj),
           })}
           title=${`${computeStateName(
             stateObj

src/panels/lovelace/common/graph/coordinates.ts

@@ -14,8 +14,8 @@ const calcPoints = (
   detail: number,
   min: number,
   max: number
-): number[][] => {
-  const coords = [] as number[][];
+): [number, number][] => {
+  const coords = [] as [number, number][];
   const height = 80;
   let yRatio = (max - min) / height;
   yRatio = yRatio !== 0 ? yRatio : height;
@@ -61,7 +61,7 @@ export const coordinates = (
   width: number,
   detail: number,
   limits?: { min?: number; max?: number }
-): number[][] | undefined => {
+): [number, number][] | undefined => {
   history.forEach((item) => {
     item.state = Number(item.state);
   });
@@ -119,7 +119,7 @@ export const coordinatesMinimalResponseCompressedState = (
   width: number,
   detail: number,
   limits?: { min?: number; max?: number }
-): number[][] | undefined => {
+): [number, number][] | undefined => {
   if (!history) {
     return undefined;
   }

src/panels/lovelace/components/hui-graph-base.ts

@@ -13,7 +13,7 @@ export class HuiGraphBase extends LitElement {
   protected render(): TemplateResult {
     return html`
       ${this._path
-        ? svg`<svg width="100%" height="100%" viewBox="0 0 500 100">
+        ? svg`<svg width="100%" height="100%" viewBox="0 0 500 100" preserveAspectRatio="none">
           <g>
             <mask id="fill">
               <path
@@ -25,6 +25,7 @@ export class HuiGraphBase extends LitElement {
             <rect height="100%" width="100%" id="fill-rect" fill="var(--accent-color)" mask="url(#fill)"></rect>
             <mask id="line">
               <path
+                vector-effect="non-scaling-stroke"
                 class='line'
                 fill="none"
                 stroke="white"
@@ -55,6 +56,7 @@ export class HuiGraphBase extends LitElement {
     :host {
       display: flex;
       width: 100%;
+      height: 100%;
     }
     .line {
       opacity: 0.8;

src/panels/lovelace/create-element/create-card-feature-element.ts

@@ -36,7 +36,7 @@ import "../card-features/hui-valve-position-card-feature";
 import "../card-features/hui-water-heater-operation-modes-card-feature";
 import "../card-features/hui-area-controls-card-feature";
 import "../card-features/hui-bar-gauge-card-feature";
-import "../card-features/hui-history-chart-card-feature";
+import "../card-features/hui-trend-graph-card-feature";
 
 import type { LovelaceCardFeatureConfig } from "../card-features/types";
 import {
@@ -75,7 +75,7 @@ const TYPES = new Set<LovelaceCardFeatureConfig["type"]>([
   "media-player-volume-slider",
   "numeric-input",
   "select-options",
-  "history-chart",
+  "trend-graph",
   "target-humidity",
   "target-temperature",
   "toggle",

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

@@ -46,7 +46,7 @@ import { supportsMediaPlayerPlaybackCardFeature } from "../../card-features/hui-
 import { supportsMediaPlayerVolumeSliderCardFeature } from "../../card-features/hui-media-player-volume-slider-card-feature";
 import { supportsNumericInputCardFeature } from "../../card-features/hui-numeric-input-card-feature";
 import { supportsSelectOptionsCardFeature } from "../../card-features/hui-select-options-card-feature";
-import { supportsHistoryChartCardFeature } from "../../card-features/hui-history-chart-card-feature";
+import { supportsTrendGraphCardFeature } from "../../card-features/hui-trend-graph-card-feature";
 import { supportsTargetHumidityCardFeature } from "../../card-features/hui-target-humidity-card-feature";
 import { supportsTargetTemperatureCardFeature } from "../../card-features/hui-target-temperature-card-feature";
 import { supportsToggleCardFeature } from "../../card-features/hui-toggle-card-feature";
@@ -100,7 +100,7 @@ const UI_FEATURE_TYPES = [
   "media-player-volume-slider",
   "numeric-input",
   "select-options",
-  "history-chart",
+  "trend-graph",
   "target-humidity",
   "target-temperature",
   "toggle",
@@ -128,6 +128,7 @@ const EDITABLES_FEATURE_TYPES = new Set<UiFeatureTypes>([
   "lawn-mower-commands",
   "numeric-input",
   "select-options",
+  "trend-graph",
   "update-actions",
   "vacuum-commands",
   "water-heater-operation-modes",
@@ -168,7 +169,7 @@ const SUPPORTS_FEATURE_TYPES: Record<
   "media-player-volume-slider": supportsMediaPlayerVolumeSliderCardFeature,
   "numeric-input": supportsNumericInputCardFeature,
   "select-options": supportsSelectOptionsCardFeature,
-  "history-chart": supportsHistoryChartCardFeature,
+  "trend-graph": supportsTrendGraphCardFeature,
   "target-humidity": supportsTargetHumidityCardFeature,
   "target-temperature": supportsTargetTemperatureCardFeature,
   toggle: supportsToggleCardFeature,

src/panels/lovelace/editor/config-elements/hui-trend-graph-card-feature-editor.ts

@@ -0,0 +1,82 @@
+import { html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-form/ha-form";
+import type {
+  HaFormSchema,
+  SchemaUnion,
+} from "../../../../components/ha-form/types";
+import type { HomeAssistant } from "../../../../types";
+import { DEFAULT_HOURS_TO_SHOW } from "../../card-features/hui-trend-graph-card-feature";
+import type {
+  LovelaceCardFeatureContext,
+  TrendGraphCardFeatureConfig,
+} from "../../card-features/types";
+import type { LovelaceCardFeatureEditor } from "../../types";
+
+const SCHEMA = [
+  {
+    name: "hours_to_show",
+    default: DEFAULT_HOURS_TO_SHOW,
+    selector: { number: { min: 1, mode: "box" } },
+  },
+] as const satisfies HaFormSchema[];
+
+@customElement("hui-trend-graph-card-feature-editor")
+export class HuiTrendGraphCardFeatureEditor
+  extends LitElement
+  implements LovelaceCardFeatureEditor
+{
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @property({ attribute: false }) public context?: LovelaceCardFeatureContext;
+
+  @state() private _config?: TrendGraphCardFeatureConfig;
+
+  public setConfig(config: TrendGraphCardFeatureConfig): void {
+    this._config = config;
+  }
+
+  protected render() {
+    if (!this.hass || !this._config) {
+      return nothing;
+    }
+
+    const data = { ...this._config };
+
+    if (!this._config.hours_to_show) {
+      data.hours_to_show = DEFAULT_HOURS_TO_SHOW;
+    }
+
+    return html`
+      <ha-form
+        .hass=${this.hass}
+        .data=${data}
+        .schema=${SCHEMA}
+        .computeLabel=${this._computeLabelCallback}
+        @value-changed=${this._valueChanged}
+      ></ha-form>
+    `;
+  }
+
+  private _valueChanged(ev: CustomEvent): void {
+    fireEvent(this, "config-changed", { config: ev.detail.value });
+  }
+
+  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
+    switch (schema.name) {
+      case "hours_to_show":
+        return this.hass!.localize(
+          `ui.panel.lovelace.editor.card.generic.${schema.name}`
+        );
+      default:
+        return "";
+    }
+  };
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-trend-graph-card-feature-editor": HuiTrendGraphCardFeatureEditor;
+  }
+}

src/panels/lovelace/header-footer/hui-graph-header-footer.ts

@@ -61,7 +61,7 @@ export class HuiGraphHeaderFooter
 
   @state() protected _config?: GraphHeaderFooterConfig;
 
-  @state() private _coordinates?: number[][];
+  @state() private _coordinates?: [number, number][];
 
   private _error?: string;
 

src/panels/lovelace/strategies/home/home-climate-view-strategy.ts

@@ -33,8 +33,28 @@ const processAreasForClimate = (
       area: area.area_id,
     });
     const areaEntities = entities.filter(areaFilter);
+    const areaCards: LovelaceCardConfig[] = [];
 
-    if (areaEntities.length > 0) {
+    const temperatureEntityId = area.temperature_entity_id;
+    if (temperatureEntityId && hass.states[temperatureEntityId]) {
+      areaCards.push({
+        ...computeTileCard(temperatureEntityId),
+        features: [{ type: "trend-graph" }],
+      });
+    }
+    const humidityEntityId = area.humidity_entity_id;
+    if (humidityEntityId && hass.states[humidityEntityId]) {
+      areaCards.push({
+        ...computeTileCard(humidityEntityId),
+        features: [{ type: "trend-graph" }],
+      });
+    }
+
+    for (const entityId of areaEntities) {
+      areaCards.push(computeTileCard(entityId));
+    }
+
+    if (areaCards.length > 0) {
       cards.push({
         heading_style: "subtitle",
         type: "heading",
@@ -44,23 +64,7 @@ const processAreasForClimate = (
           navigation_path: `areas-${area.area_id}`,
         },
       });
-
-      if (area.temperature_entity_id) {
-        cards.push({
-          ...computeTileCard(area.temperature_entity_id),
-          features: [{ type: "history-chart" }],
-        });
-      }
-      if (area.humidity_entity_id) {
-        cards.push({
-          ...computeTileCard(area.humidity_entity_id),
-          features: [{ type: "history-chart" }],
-        });
-      }
-
-      for (const entityId of areaEntities) {
-        cards.push(computeTileCard(entityId));
-      }
+      cards.push(...areaCards);
     }
   }
 

src/panels/lovelace/strategies/home/home-lights-view-strategy.ts

@@ -32,10 +32,15 @@ const processAreasForLights = (
       area: area.area_id,
     });
     const areaLights = entities.filter(areaFilter);
+    const areaCards: LovelaceCardConfig[] = [];
 
     const computeTileCard = computeAreaTileCardConfig(hass, "", false);
 
-    if (areaLights.length > 0) {
+    for (const entityId of areaLights) {
+      areaCards.push(computeTileCard(entityId));
+    }
+
+    if (areaCards.length > 0) {
       cards.push({
         heading_style: "subtitle",
         type: "heading",
@@ -45,10 +50,7 @@ const processAreasForLights = (
           navigation_path: `areas-${area.area_id}`,
         },
       });
-
-      for (const entityId of areaLights) {
-        cards.push(computeTileCard(entityId));
-      }
+      cards.push(...areaCards);
     }
   }
 

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

@@ -29,6 +29,14 @@ const processAreasForMediaPlayers = (
       area: area.area_id,
     });
     const areaEntities = entities.filter(areaFilter);
+    const areaCards: LovelaceCardConfig[] = [];
+
+    for (const entityId of areaEntities) {
+      cards.push({
+        type: "media-control",
+        entity: entityId,
+      } satisfies MediaControlCardConfig);
+    }
 
     if (areaEntities.length > 0) {
       cards.push({
@@ -40,13 +48,7 @@ const processAreasForMediaPlayers = (
           navigation_path: `areas-${area.area_id}`,
         },
       });
-
-      for (const entityId of areaEntities) {
-        cards.push({
-          type: "media-control",
-          entity: entityId,
-        } satisfies MediaControlCardConfig);
-      }
+      cards.push(...areaCards);
     }
   }
 

src/panels/lovelace/strategies/home/home-security-view-strategy.ts

@@ -12,6 +12,7 @@ import {
 } from "../areas/helpers/areas-strategy-helper";
 import { getHomeStructure } from "./helpers/home-structure";
 import { findEntities, HOME_SUMMARIES_FILTERS } from "./helpers/home-summaries";
+import type { LogbookCardConfig } from "../../cards/types";
 
 export interface HomeSecurityViewStrategyConfig {
   type: "home-security";
@@ -32,7 +33,13 @@ const processAreasForSecurity = (
     const areaFilter = generateEntityFilter(hass, {
       area: area.area_id,
     });
+
     const areaEntities = entities.filter(areaFilter);
+    const areaCards: LovelaceCardConfig[] = [];
+
+    for (const entityId of areaEntities) {
+      areaCards.push(computeTileCard(entityId));
+    }
 
     if (areaEntities.length > 0) {
       cards.push({
@@ -44,10 +51,7 @@ const processAreasForSecurity = (
           navigation_path: `areas-${area.area_id}`,
         },
       });
-
-      for (const entityId of areaEntities) {
-        cards.push(computeTileCard(entityId));
-      }
+      cards.push(...areaCards);
     }
   }
 
@@ -128,6 +132,24 @@ export class HomeSecurityViewStrategy extends ReactiveElement {
       }
     }
 
+    sections.push({
+      type: "grid",
+      cards: [
+        {
+          type: "heading",
+          heading: hass.localize("panel.logbook"),
+          tap_action: {
+            action: "navigate",
+            navigation_path: `/logbook?entity_id=${entities.join(",")}`,
+          },
+        },
+        {
+          type: "logbook",
+          target: { entity_id: entities },
+        } satisfies LogbookCardConfig,
+      ],
+    });
+
     return {
       type: "sections",
       max_columns: 2,

src/translations/en.json

@@ -5,7 +5,7 @@
     "config": "Settings",
     "states": "Overview",
     "map": "Map",
-    "logbook": "Activity",
+    "logbook": "Logbook",
     "history": "History",
     "todo": "To-do lists",
     "developer_tools": "Developer tools",
@@ -526,7 +526,7 @@
         }
       },
       "logbook": {
-        "entries_not_found": "No activity found.",
+        "entries_not_found": "No logbook events found.",
         "triggered_by": "triggered by",
         "triggered_by_automation": "triggered by automation",
         "triggered_by_script": "triggered by script",
@@ -539,7 +539,7 @@
         "triggered_by_homeassistant_stopping": "triggered by Home Assistant stopping",
         "triggered_by_homeassistant_starting": "triggered by Home Assistant starting",
         "show_trace": "[%key:ui::panel::config::automation::editor::show_trace%]",
-        "retrieval_error": "Could not load activity",
+        "retrieval_error": "Could not load logbook",
         "not_loaded": "[%key:ui::dialogs::helper_settings::platform_not_loaded%]",
         "messages": {
           "was_away": "was detected away",
@@ -1382,8 +1382,7 @@
         "info": "Information",
         "related": "Related",
         "history": "History",
-        "logbook": "Activity",
-        "device_info": "Device info",
+        "logbook": "Logbook",
         "device_or_service_info": "[%key:ui::panel::config::devices::device_info%]",
         "device_type": {
           "device": "[%key:ui::panel::config::devices::type::device_heading%]",
@@ -1619,7 +1618,7 @@
             "preload_stream": "Preload camera stream",
             "preload_stream_description": "This keeps the camera stream open in the background so it shows quicker. Warning! This is device intensive.",
             "stream_orientation": "Camera stream orientation",
-            "stream_orientation_description": "The orientation transformation to use for the camera stream.",
+            "stream_orientation_description": "The orientation transformation to use for the camera stream.\nWarning: Stream orientation processing occurs on the Home Assistant device and may impact system performance. When possible, configure this setting directly on your camera instead.",
             "stream_orientation_1": "No orientation transform",
             "stream_orientation_2": "Mirror",
             "stream_orientation_3": "Rotate 180",
@@ -2040,11 +2039,13 @@
         "title": "Shortcuts",
         "enable_shortcuts_hint": "For keyboard shortcuts to work, make sure you have them enabled in your {user_profile}.",
         "enable_shortcuts_hint_user_profile": "user profile",
+        "keys": {
+          "del": "Del"
+        },
         "shortcuts": {
           "double_click": "Double-click",
           "scroll_wheel": "Scroll",
-          "drag": "Drag",
-          "ctrl_cmd": "Ctrl/Cmd"
+          "drag": "Drag"
         },
         "searching": {
           "title": "Searching",
@@ -2061,9 +2062,9 @@
         },
         "automation_script": {
           "title": "Automations / Scripts",
-          "copy": "to copy the selected automation/script action/condition/trigger",
-          "cut": "to cut the selected automation/script action/condition/trigger",
-          "delete": "to delete the selected automation/script action/condition/trigger",
+          "copy": "to copy the selected item to clipboard",
+          "cut": "to cut the selected item and place it on the clipboard",
+          "delete": "to delete the selected item",
           "paste": "to paste automation/script YAML from clipboard to editor",
           "save": "to save automation/script"
         },
@@ -4594,7 +4595,7 @@
             "tabs": {
               "details": "Step details",
               "timeline": "Trace timeline",
-              "logbook": "Related activity",
+              "logbook": "Related logbook entries",
               "automation_config": "Automation config",
               "step_config": "Step config",
               "changed_variables": "Changed variables",
@@ -4611,7 +4612,7 @@
               "error": "Error: {error}",
               "result": "Result:",
               "step_not_executed": "This step was not executed.",
-              "no_logbook_entries": "No activity found for this step.",
+              "no_logbook_entries": "No logbook entries found for this step.",
               "no_variables_changed": "No variables changed",
               "unable_to_find_config": "Unable to find config"
             },
@@ -4637,8 +4638,8 @@
               "disabled": "(disabled)",
               "triggered_by": "{triggeredBy, select, \n alias {{alias} triggered}\n other {Triggered} \n} {triggeredPath, select, \n trigger {by the {trigger}}\n other {manually} \n} at {time}",
               "path_error": "Unable to extract path {path}. Download trace and report as bug.",
-              "not_all_entries_are_related_automation_note": "Not all shown activity might be related to this automation.",
-              "not_all_entries_are_related_script_note": "Not all shown activity might be related to this script."
+              "not_all_entries_are_related_automation_note": "Not all shown logbook entries might be related to this automation.",
+              "not_all_entries_are_related_script_note": "Not all shown logbook entries might be related to this script."
             }
           }
         },
@@ -5144,7 +5145,7 @@
             "integration": "Integration",
             "config_entry": "Config entry"
           },
-          "enabled_description": "Disabled devices will not be shown and entities belonging to the device will be disabled and not added to Home Assistant.",
+          "enabled_description": "Disabled devices and services will not be shown and entities belonging to them will be disabled, too.",
           "open_configuration_url": "Visit",
           "set_up_voice_assistant": "Set up voice assistant",
           "download_diagnostics": "Download diagnostics",
@@ -5741,6 +5742,16 @@
           "no_advertisements_found": "No matching Bluetooth advertisements found",
           "no_connection_slot_allocations": "No connection slot allocations information available",
           "no_active_connection_support": "This adapter does not support making active (GATT) connections.",
+          "no_scanner_state_available": "No scanner state available",
+          "current_scanning_mode": "Current scanning mode",
+          "requested_scanning_mode": "Requested scanning mode",
+          "scanning_mode_none": "none",
+          "scanning_mode_active": "active",
+          "scanning_mode_passive": "passive",
+          "scanner_mode_mismatch": "Scanner requested {requested} mode but is operating in {current} mode. The scanner is in a bad state and needs to be power cycled.",
+          "scanner_mode_mismatch_remote": "For proxies: reboot the device",
+          "scanner_mode_mismatch_usb": "For USB adapters: unplug and plug back in",
+          "scanner_mode_mismatch_uart": "For UART/onboard adapters: power down the system completely and power it back up",
           "address": "Address",
           "name": "Name",
           "source": "Source",
@@ -7555,8 +7566,8 @@
               "square": "Render cards as squares"
             },
             "logbook": {
-              "name": "Activity",
-              "description": "The Activity card shows a list of events for entities."
+              "name": "Logbook",
+              "description": "The Logbook card shows a list of events for entities."
             },
             "history-graph": {
               "name": "History graph",
@@ -8197,8 +8208,8 @@
               "bar-gauge": {
                 "label": "Bar gauge"
               },
-              "history-chart": {
-                "label": "History chart"
+              "trend-graph": {
+                "label": "Trend graph"
               }
             }
           },

test/common/entity/device_tracker_icon.test.ts

@@ -0,0 +1,124 @@
+import type { HassEntity } from "home-assistant-js-websocket";
+import { describe, expect, it } from "vitest";
+import { deviceTrackerIcon } from "../../../src/common/entity/device_tracker_icon";
+
+describe("deviceTrackerIcon", () => {
+  const createMockStateObj = (
+    source_type: string,
+    state = "home"
+  ): HassEntity => ({
+    entity_id: "device_tracker.test",
+    state,
+    attributes: { source_type },
+    context: { id: "test", parent_id: null, user_id: null },
+    last_changed: "2023-01-01T00:00:00Z",
+    last_updated: "2023-01-01T00:00:00Z",
+  });
+
+  describe("router source type", () => {
+    it("should return lan-connect icon when home", () => {
+      const stateObj = createMockStateObj("router", "home");
+      expect(deviceTrackerIcon(stateObj)).toBe("mdi:lan-connect");
+    });
+
+    it("should return lan-disconnect icon when not home", () => {
+      const stateObj = createMockStateObj("router", "not_home");
+      expect(deviceTrackerIcon(stateObj)).toBe("mdi:lan-disconnect");
+    });
+
+    it("should return lan-disconnect icon for any other state", () => {
+      const stateObj = createMockStateObj("router", "office");
+      expect(deviceTrackerIcon(stateObj)).toBe("mdi:lan-disconnect");
+    });
+
+    it("should use explicit state parameter over state object state", () => {
+      const stateObj = createMockStateObj("router", "not_home");
+      expect(deviceTrackerIcon(stateObj, "home")).toBe("mdi:lan-connect");
+    });
+  });
+
+  describe("bluetooth source type", () => {
+    it("should return bluetooth-connect icon when home for bluetooth", () => {
+      const stateObj = createMockStateObj("bluetooth", "home");
+      expect(deviceTrackerIcon(stateObj)).toBe("mdi:bluetooth-connect");
+    });
+
+    it("should return bluetooth icon when not home for bluetooth", () => {
+      const stateObj = createMockStateObj("bluetooth", "not_home");
+      expect(deviceTrackerIcon(stateObj)).toBe("mdi:bluetooth");
+    });
+
+    it("should return bluetooth-connect icon when home for bluetooth_le", () => {
+      const stateObj = createMockStateObj("bluetooth_le", "home");
+      expect(deviceTrackerIcon(stateObj)).toBe("mdi:bluetooth-connect");
+    });
+
+    it("should return bluetooth icon when not home for bluetooth_le", () => {
+      const stateObj = createMockStateObj("bluetooth_le", "not_home");
+      expect(deviceTrackerIcon(stateObj)).toBe("mdi:bluetooth");
+    });
+
+    it("should use explicit state parameter for bluetooth", () => {
+      const stateObj = createMockStateObj("bluetooth", "not_home");
+      expect(deviceTrackerIcon(stateObj, "home")).toBe("mdi:bluetooth-connect");
+    });
+  });
+
+  describe("other source types", () => {
+    it("should return account icon when home for gps", () => {
+      const stateObj = createMockStateObj("gps", "home");
+      expect(deviceTrackerIcon(stateObj)).toBe("mdi:account");
+    });
+
+    it("should return account-arrow-right icon when not home for gps", () => {
+      const stateObj = createMockStateObj("gps", "not_home");
+      expect(deviceTrackerIcon(stateObj)).toBe("mdi:account-arrow-right");
+    });
+
+    it("should return account icon for unknown location with gps", () => {
+      const stateObj = createMockStateObj("gps", "office");
+      expect(deviceTrackerIcon(stateObj)).toBe("mdi:account");
+    });
+
+    it("should handle unknown source type", () => {
+      const stateObj = createMockStateObj("unknown", "home");
+      expect(deviceTrackerIcon(stateObj)).toBe("mdi:account");
+    });
+
+    it("should handle unknown source type when not home", () => {
+      const stateObj = createMockStateObj("unknown", "not_home");
+      expect(deviceTrackerIcon(stateObj)).toBe("mdi:account-arrow-right");
+    });
+  });
+
+  describe("edge cases", () => {
+    it("should handle missing source_type attribute", () => {
+      const stateObj: HassEntity = {
+        entity_id: "device_tracker.test",
+        state: "home",
+        attributes: {},
+        context: { id: "test", parent_id: null, user_id: null },
+        last_changed: "2023-01-01T00:00:00Z",
+        last_updated: "2023-01-01T00:00:00Z",
+      };
+      expect(deviceTrackerIcon(stateObj)).toBe("mdi:account");
+    });
+
+    it("should handle undefined state object attributes", () => {
+      const stateObj: HassEntity = {
+        entity_id: "device_tracker.test",
+        state: "not_home",
+        attributes: {},
+        context: { id: "test", parent_id: null, user_id: null },
+        last_changed: "2023-01-01T00:00:00Z",
+        last_updated: "2023-01-01T00:00:00Z",
+      };
+      expect(deviceTrackerIcon(stateObj)).toBe("mdi:account-arrow-right");
+    });
+
+    it("should handle empty string state", () => {
+      const stateObj = createMockStateObj("router", "");
+      expect(deviceTrackerIcon(stateObj)).toBe("mdi:lan-disconnect");
+    });
+  });
+});

test/common/entity/entity_filter.test.ts

@@ -0,0 +1,391 @@
+import { describe, expect, it } from "vitest";
+import { generateEntityFilter } from "../../../src/common/entity/entity_filter";
+import type { HomeAssistant } from "../../../src/types";
+
+// Mock HomeAssistant with comprehensive data
+const mockHass: HomeAssistant = {
+  states: {
+    "light.living_room": {
+      entity_id: "light.living_room",
+      state: "on",
+      attributes: { device_class: "light" },
+    },
+    "switch.kitchen": {
+      entity_id: "switch.kitchen",
+      state: "off",
+      attributes: { device_class: "switch" },
+    },
+    "sensor.temperature": {
+      entity_id: "sensor.temperature",
+      state: "22.5",
+      attributes: { device_class: "temperature" },
+    },
+    "binary_sensor.motion": {
+      entity_id: "binary_sensor.motion",
+      state: "off",
+      attributes: { device_class: "motion" },
+    },
+    "climate.thermostat": {
+      entity_id: "climate.thermostat",
+      state: "heat",
+      attributes: {},
+    },
+    "media_player.tv": {
+      entity_id: "media_player.tv",
+      state: "off",
+      attributes: {},
+    },
+    "light.bedroom": {
+      entity_id: "light.bedroom",
+      state: "off",
+      attributes: { device_class: "light" },
+    },
+    "switch.basement": {
+      entity_id: "switch.basement",
+      state: "on",
+      attributes: { device_class: "switch" },
+    },
+    "sensor.humidity": {
+      entity_id: "sensor.humidity",
+      state: "45",
+      attributes: { device_class: "humidity", entity_category: "diagnostic" },
+    },
+    "light.no_area": {
+      entity_id: "light.no_area",
+      state: "off",
+      attributes: { device_class: "light" },
+    },
+  } as any,
+  entities: {
+    "light.living_room": {
+      entity_id: "light.living_room",
+      device_id: "device1",
+      area_id: "living_room",
+      labels: [],
+    },
+    "switch.kitchen": {
+      entity_id: "switch.kitchen",
+      device_id: "device2",
+      area_id: "kitchen",
+      labels: [],
+    },
+    "sensor.temperature": {
+      entity_id: "sensor.temperature",
+      device_id: "device3",
+      area_id: "living_room",
+      labels: [],
+    },
+    "binary_sensor.motion": {
+      entity_id: "binary_sensor.motion",
+      device_id: "device4",
+      area_id: "hallway",
+      labels: [],
+    },
+    "climate.thermostat": {
+      entity_id: "climate.thermostat",
+      device_id: "device5",
+      area_id: "living_room",
+      labels: [],
+    },
+    "media_player.tv": {
+      entity_id: "media_player.tv",
+      device_id: "device6",
+      area_id: "living_room",
+      labels: [],
+    },
+    "light.bedroom": {
+      entity_id: "light.bedroom",
+      device_id: "device7",
+      area_id: "bedroom",
+      labels: [],
+    },
+    "switch.basement": {
+      entity_id: "switch.basement",
+      device_id: "device8",
+      area_id: "basement",
+      labels: [],
+    },
+    "sensor.humidity": {
+      entity_id: "sensor.humidity",
+      device_id: "device9",
+      area_id: "living_room",
+      entity_category: "diagnostic",
+      labels: ["climate", "monitoring"],
+    },
+    "light.no_area": {
+      entity_id: "light.no_area",
+      device_id: "device10",
+      labels: [],
+    },
+  } as any,
+  devices: {
+    device1: { id: "device1", area_id: "living_room" },
+    device2: { id: "device2", area_id: "kitchen" },
+    device3: { id: "device3", area_id: "living_room" },
+    device4: { id: "device4", area_id: "hallway" },
+    device5: { id: "device5", area_id: "living_room" },
+    device6: { id: "device6", area_id: "living_room" },
+    device7: { id: "device7", area_id: "bedroom" },
+    device8: { id: "device8", area_id: "basement" },
+    device9: { id: "device9", area_id: "living_room" },
+    device10: { id: "device10" }, // no area_id
+  } as any,
+  areas: {
+    living_room: {
+      area_id: "living_room",
+      name: "Living Room",
+      floor_id: "main_floor",
+    },
+    kitchen: { area_id: "kitchen", name: "Kitchen", floor_id: "main_floor" },
+    bedroom: { area_id: "bedroom", name: "Bedroom", floor_id: "upper_floor" },
+    basement: {
+      area_id: "basement",
+      name: "Basement",
+      floor_id: "basement_floor",
+    },
+    hallway: { area_id: "hallway", name: "Hallway", floor_id: "main_floor" },
+  } as any,
+  floors: {
+    main_floor: { floor_id: "main_floor", name: "Main Floor" },
+    upper_floor: { floor_id: "upper_floor", name: "Upper Floor" },
+    basement_floor: { floor_id: "basement_floor", name: "Basement Floor" },
+  } as any,
+} as HomeAssistant;
+
+describe("generateEntityFilter", () => {
+  describe("domain filtering", () => {
+    it("should filter entities by single domain", () => {
+      const filter = generateEntityFilter(mockHass, { domain: "light" });
+
+      expect(filter("light.living_room")).toBe(true);
+      expect(filter("switch.kitchen")).toBe(false);
+    });
+
+    it("should filter entities by multiple domains", () => {
+      const filter = generateEntityFilter(mockHass, {
+        domain: ["light", "switch"],
+      });
+
+      expect(filter("light.living_room")).toBe(true);
+      expect(filter("switch.kitchen")).toBe(true);
+      // Non-existent entities return false
+      expect(filter("switch.fan")).toBe(false);
+      expect(filter("sensor.temperature")).toBe(false);
+    });
+
+    it("should handle domain as string vs array", () => {
+      const singleFilter = generateEntityFilter(mockHass, { domain: "sensor" });
+      const arrayFilter = generateEntityFilter(mockHass, {
+        domain: ["sensor"],
+      });
+
+      expect(singleFilter("sensor.temperature")).toBe(true);
+      expect(arrayFilter("sensor.temperature")).toBe(true);
+      expect(singleFilter("light.living_room")).toBe(false);
+      expect(arrayFilter("light.living_room")).toBe(false);
+    });
+  });
+
+  describe("device class filtering", () => {
+    it("should filter entities by single device class", () => {
+      const filter = generateEntityFilter(mockHass, {
+        device_class: "temperature",
+      });
+
+      expect(filter("sensor.temperature")).toBe(true);
+      expect(filter("sensor.humidity")).toBe(false);
+    });
+
+    it("should filter entities by multiple device classes", () => {
+      const filter = generateEntityFilter(mockHass, {
+        device_class: ["temperature", "humidity"],
+      });
+
+      expect(filter("sensor.temperature")).toBe(true);
+      expect(filter("sensor.humidity")).toBe(true);
+      expect(filter("light.living_room")).toBe(false);
+    });
+
+    it("should handle entities without device class", () => {
+      const filter = generateEntityFilter(mockHass, { device_class: "test" });
+
+      expect(filter("climate.thermostat")).toBe(false);
+      expect(filter("media_player.tv")).toBe(false);
+    });
+  });
+
+  describe("area filtering", () => {
+    it("should filter entities by single area", () => {
+      const filter = generateEntityFilter(mockHass, { area: "living_room" });
+
+      expect(filter("light.living_room")).toBe(true);
+      expect(filter("sensor.temperature")).toBe(true);
+      expect(filter("switch.kitchen")).toBe(false);
+    });
+
+    it("should filter entities by multiple areas", () => {
+      const filter = generateEntityFilter(mockHass, {
+        area: ["living_room", "kitchen"],
+      });
+
+      expect(filter("light.living_room")).toBe(true);
+      expect(filter("switch.kitchen")).toBe(true);
+      expect(filter("light.bedroom")).toBe(false);
+    });
+  });
+
+  describe("floor filtering", () => {
+    // NOTE: The current implementation has a bug where it checks `if (!floors)` instead of `if (!floors.has(floor.floor_id))`
+    // So floor filtering will never actually filter by floor - it only checks if the entity has a floor at all
+    it("should filter entities by floor (tests current buggy behavior)", () => {
+      const filter = generateEntityFilter(mockHass, { floor: "main_floor" });
+
+      // Due to bug, all entities with floors pass (not just main_floor)
+      expect(filter("light.living_room")).toBe(true); // has floor
+      expect(filter("switch.kitchen")).toBe(true); // has floor
+      expect(filter("binary_sensor.motion")).toBe(true); // has floor
+      expect(filter("light.bedroom")).toBe(false); // wrong floor
+      expect(filter("switch.basement")).toBe(false); // wrong floor
+
+      // Entities without floors should fail
+      expect(filter("light.no_area")).toBe(false); // no area = no floor
+    });
+
+    it("should handle multiple floors (tests current buggy behavior)", () => {
+      const filter = generateEntityFilter(mockHass, {
+        floor: ["main_floor", "upper_floor"],
+      });
+
+      expect(filter("light.living_room")).toBe(true);
+      expect(filter("light.bedroom")).toBe(true);
+      expect(filter("switch.basement")).toBe(false);
+
+      // Entities without floors should fail
+      expect(filter("light.no_area")).toBe(false);
+    });
+  });
+
+  describe("device filtering", () => {
+    it("should filter entities by single device", () => {
+      const filter = generateEntityFilter(mockHass, { device: "device1" });
+
+      expect(filter("light.living_room")).toBe(true);
+      expect(filter("switch.kitchen")).toBe(false);
+    });
+
+    it("should filter entities by multiple devices", () => {
+      const filter = generateEntityFilter(mockHass, {
+        device: ["device1", "device2"],
+      });
+
+      expect(filter("light.living_room")).toBe(true);
+      expect(filter("switch.kitchen")).toBe(true);
+      expect(filter("sensor.temperature")).toBe(false);
+    });
+  });
+
+  describe("entity category filtering", () => {
+    it("should filter entities by entity category", () => {
+      const filter = generateEntityFilter(mockHass, {
+        entity_category: "diagnostic",
+      });
+
+      expect(filter("sensor.humidity")).toBe(true);
+      expect(filter("sensor.temperature")).toBe(false);
+    });
+
+    it("should filter entities with no entity category", () => {
+      const filter = generateEntityFilter(mockHass, {
+        entity_category: "none",
+      });
+
+      expect(filter("light.living_room")).toBe(true);
+      expect(filter("sensor.humidity")).toBe(false);
+    });
+  });
+
+  describe("label filtering", () => {
+    it("should filter entities by single label", () => {
+      const filter = generateEntityFilter(mockHass, { label: "climate" });
+
+      expect(filter("sensor.humidity")).toBe(true);
+      expect(filter("sensor.temperature")).toBe(false);
+    });
+
+    it("should filter entities by multiple labels", () => {
+      const filter = generateEntityFilter(mockHass, {
+        label: ["climate", "monitoring"],
+      });
+
+      expect(filter("sensor.humidity")).toBe(true);
+      expect(filter("light.living_room")).toBe(false);
+    });
+  });
+
+  describe("combined filtering", () => {
+    it("should combine multiple filter criteria with AND logic", () => {
+      const filter = generateEntityFilter(mockHass, {
+        domain: "light",
+        area: "living_room",
+      });
+
+      expect(filter("light.living_room")).toBe(true);
+      expect(filter("light.bedroom")).toBe(false);
+      expect(filter("sensor.temperature")).toBe(false);
+    });
+
+    it("should handle complex combinations", () => {
+      const filter = generateEntityFilter(mockHass, {
+        domain: ["sensor", "light"],
+        area: "living_room",
+        device_class: ["temperature", "light"],
+      });
+
+      expect(filter("sensor.temperature")).toBe(true);
+      expect(filter("light.living_room")).toBe(true);
+      expect(filter("sensor.humidity")).toBe(false); // wrong device class
+      expect(filter("light.bedroom")).toBe(false); // wrong area
+    });
+  });
+
+  describe("empty filter criteria", () => {
+    it("should handle empty filter criteria", () => {
+      const filter = generateEntityFilter(mockHass, {});
+
+      // Empty filter should pass all entities that exist in hass.states
+      expect(filter("light.living_room")).toBe(true);
+      expect(filter("switch.kitchen")).toBe(true);
+      expect(filter("nonexistent.entity")).toBe(false);
+    });
+
+    it("should handle empty domain array", () => {
+      const filter = generateEntityFilter(mockHass, { domain: [] });
+
+      // Empty domain array means no entities should pass domain filter
+      expect(filter("light.living_room")).toBe(false);
+      expect(filter("switch.kitchen")).toBe(false);
+    });
+  });
+
+  describe("edge cases", () => {
+    it("should handle non-existent entities", () => {
+      const filter = generateEntityFilter(mockHass, { domain: "light" });
+
+      expect(filter("light.nonexistent")).toBe(false);
+      expect(filter("invalid_entity_id")).toBe(false);
+    });
+
+    it("should handle entities without device or area assignments", () => {
+      const filter = generateEntityFilter(mockHass, { area: "living_room" });
+
+      expect(filter("light.no_area")).toBe(false);
+    });
+
+    it("should handle entities with device but no area", () => {
+      const filter = generateEntityFilter(mockHass, { area: "living_room" });
+
+      // light.no_area has device10 which has no area_id
+      expect(filter("light.no_area")).toBe(false);
+    });
+  });
+});