Ensure that on runID change, we also resub to new chat log

.github/workflows/ci.yaml

@@ -89,7 +89,7 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
         with:
           name: frontend-bundle-stats
           path: build/stats/*.json
@@ -113,7 +113,7 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
         with:
           name: supervisor-bundle-stats
           path: build/stats/*.json

.github/workflows/codeql-analysis.yml

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

.github/workflows/nightly.yaml

@@ -57,14 +57,14 @@ jobs:
         run: tar -czvf translations.tar.gz translations
 
       - name: Upload build artifacts
-        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
         with:
           name: wheels
           path: dist/home_assistant_frontend*.whl
           if-no-files-found: error
 
       - name: Upload translations
-        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
         with:
           name: translations
           path: translations.tar.gz

package.json

@@ -148,10 +148,10 @@
     "xss": "1.0.15"
   },
   "devDependencies": {
-    "@babel/core": "7.28.5",
+    "@babel/core": "7.28.4",
     "@babel/helper-define-polyfill-provider": "0.6.5",
-    "@babel/plugin-transform-runtime": "7.28.5",
+    "@babel/plugin-transform-runtime": "7.28.3",
-    "@babel/preset-env": "7.28.5",
+    "@babel/preset-env": "7.28.3",
     "@bundle-stats/plugin-webpack-filter": "4.21.5",
     "@lokalise/node-api": "15.3.1",
     "@octokit/auth-oauth-device": "8.0.2",
@@ -173,12 +173,12 @@
     "@types/lodash.merge": "4.6.9",
     "@types/luxon": "3.7.1",
     "@types/mocha": "10.0.10",
-    "@types/qrcode": "1.5.6",
+    "@types/qrcode": "1.5.5",
-    "@types/sortablejs": "1.15.9",
+    "@types/sortablejs": "1.15.8",
     "@types/tar": "6.1.13",
     "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
-    "@vitest/coverage-v8": "4.0.3",
+    "@vitest/coverage-v8": "4.0.1",
     "babel-loader": "10.0.0",
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
@@ -219,7 +219,7 @@
     "typescript": "5.9.3",
     "typescript-eslint": "8.46.2",
     "vite-tsconfig-paths": "5.1.4",
-    "vitest": "4.0.3",
+    "vitest": "4.0.1",
     "webpack-stats-plugin": "1.1.3",
     "webpackbar": "7.0.0",
     "workbox-build": "patch:workbox-build@npm%3A7.1.1#~/.yarn/patches/workbox-build-npm-7.1.1-a854f3faae.patch"

src/components/ha-automation-row.ts

@@ -118,7 +118,7 @@ export class HaAutomationRow extends LitElement {
     }
     .row {
       display: flex;
-      padding: var(--ha-space-0) var(--ha-space-2);
+      padding: 0 8px;
       min-height: 48px;
       align-items: center;
       cursor: pointer;
@@ -134,12 +134,12 @@ export class HaAutomationRow extends LitElement {
     .expand-button {
       transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
       color: var(--ha-color-on-neutral-quiet);
-      margin-left: calc(var(--ha-space-2) * -1);
+      margin-left: -8px;
     }
     :host([building-block]) .leading-icon-wrapper {
       background-color: var(--ha-color-fill-neutral-loud-resting);
       border-radius: var(--ha-border-radius-md);
-      padding: var(--ha-space-1);
+      padding: 4px;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -149,7 +149,7 @@ export class HaAutomationRow extends LitElement {
       color: var(--ha-color-on-neutral-quiet);
     }
     :host([building-block]) ::slotted([slot="leading-icon"]) {
-      --mdc-icon-size: var(--ha-space-5);
+      --mdc-icon-size: 20px;
       color: var(--white-color);
       transform: rotate(-45deg);
     }
@@ -170,7 +170,7 @@ export class HaAutomationRow extends LitElement {
     ::slotted([slot="header"]) {
       flex: 1;
       overflow-wrap: anywhere;
-      margin: var(--ha-space-0) var(--ha-space-3);
+      margin: 0 12px;
     }
     :host([sort-selected]) .row {
       outline: solid;

src/components/ha-card.ts

@@ -44,26 +44,26 @@ export class HaCard extends LitElement {
       font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl));
       letter-spacing: -0.012em;
       line-height: var(--ha-line-height-expanded);
-      padding: var(--ha-space-3) var(--ha-space-4) var(--ha-space-4);
+      padding: 12px 16px 16px;
       display: block;
-      margin-block-start: var(--ha-space-0);
+      margin-block-start: 0px;
-      margin-block-end: var(--ha-space-0);
+      margin-block-end: 0px;
       font-weight: var(--ha-font-weight-normal);
     }
 
     :host ::slotted(.card-content:not(:first-child)),
     slot:not(:first-child)::slotted(.card-content) {
-      padding-top: var(--ha-space-0);
+      padding-top: 0px;
-      margin-top: calc(var(--ha-space-2) * -1);
+      margin-top: -8px;
     }
 
     :host ::slotted(.card-content) {
-      padding: var(--ha-space-4);
+      padding: 16px;
     }
 
     :host ::slotted(.card-actions) {
       border-top: 1px solid var(--divider-color, #e8e8e8);
-      padding: var(--ha-space-2);
+      padding: 8px;
     }
   `;
 

src/components/ha-generic-picker.ts

@@ -24,7 +24,7 @@ import "./ha-svg-icon";
 
 @customElement("ha-generic-picker")
 export class HaGenericPicker extends LitElement {
-  @property({ attribute: false }) public hass?: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   // eslint-disable-next-line lit/no-native-attributes
   @property({ type: Boolean }) public autofocus = false;
@@ -68,21 +68,6 @@ export class HaGenericPicker extends LitElement {
   @property({ attribute: "not-found-label", type: String })
   public notFoundLabel?: string;
 
-  @property({ attribute: "popover-placement" })
-  public popoverPlacement:
-    | "bottom"
-    | "top"
-    | "left"
-    | "right"
-    | "top-start"
-    | "top-end"
-    | "right-start"
-    | "right-end"
-    | "bottom-start"
-    | "bottom-end"
-    | "left-start"
-    | "left-end" = "bottom-start";
-
   /** If set picker shows an add button instead of textbox when value isn't set */
   @property({ attribute: "add-button-label" }) public addButtonLabel?: string;
 
@@ -150,7 +135,7 @@ export class HaGenericPicker extends LitElement {
                 style="--body-width: ${this._popoverWidth}px;"
                 without-arrow
                 distance="-4"
-                .placement=${this.popoverPlacement}
+                placement="bottom-start"
                 for="picker"
                 auto-size="vertical"
                 auto-size-padding="16"
@@ -159,7 +144,9 @@ export class HaGenericPicker extends LitElement {
                 trap-focus
                 role="dialog"
                 aria-modal="true"
-                aria-label=${this.label || "Select option"}
+                aria-label=${this.hass.localize(
+                  "ui.components.target-picker.add_target"
+                )}
               >
                 ${this._renderComboBox()}
               </wa-popover>
@@ -172,7 +159,9 @@ export class HaGenericPicker extends LitElement {
                 @closed=${this._hidePicker}
                 role="dialog"
                 aria-modal="true"
-                aria-label=${this.label || "Select option"}
+                aria-label=${this.hass.localize(
+                  "ui.components.target-picker.add_target"
+                )}
               >
                 ${this._renderComboBox(true)}
               </ha-bottom-sheet>`
@@ -190,8 +179,7 @@ export class HaGenericPicker extends LitElement {
       <ha-picker-combo-box
         .hass=${this.hass}
         .allowCustomValue=${this.allowCustomValue}
-        .label=${this.searchLabel ??
+        .label=${this.searchLabel ?? this.hass.localize("ui.common.search")}
-        (this.hass?.localize("ui.common.search") || "Search")}
         .value=${this.value}
         @value-changed=${this._valueChanged}
         .rowRenderer=${this.rowRenderer}

src/components/ha-language-picker.ts

@@ -1,58 +1,56 @@
 import type { PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
+import { stopPropagation } from "../common/dom/stop_propagation";
 import { formatLanguageCode } from "../common/language/format_language";
 import { caseInsensitiveStringCompare } from "../common/string/compare";
 import type { FrontendLocaleData } from "../data/translation";
 import { translationMetadata } from "../resources/translations-metadata";
-import type { HomeAssistant, ValueChangedEvent } from "../types";
+import type { HomeAssistant } from "../types";
-import "./ha-generic-picker";
 import "./ha-list-item";
-import type { PickerComboBoxItem } from "./ha-picker-combo-box";
 import "./ha-select";
+import type { HaSelect } from "./ha-select";
 
 export const getLanguageOptions = (
   languages: string[],
   nativeName: boolean,
   noSort: boolean,
   locale?: FrontendLocaleData
-): PickerComboBoxItem[] => {
+) => {
-  let options: PickerComboBoxItem[] = [];
+  let options: { label: string; value: string }[] = [];
 
   if (nativeName) {
     const translations = translationMetadata.translations;
     options = languages.map((lang) => {
-      let primary = translations[lang]?.nativeName;
+      let label = translations[lang]?.nativeName;
-      if (!primary) {
+      if (!label) {
         try {
           // this will not work if Intl.DisplayNames is polyfilled, it will return in the language of the user
-          primary = new Intl.DisplayNames(lang, {
+          label = new Intl.DisplayNames(lang, {
             type: "language",
             fallback: "code",
           }).of(lang)!;
         } catch (_err) {
-          primary = lang;
+          label = lang;
         }
       }
       return {
-        id: lang,
+        value: lang,
-        primary,
+        label,
-        search_labels: [primary],
       };
     });
   } else if (locale) {
     options = languages.map((lang) => ({
-      id: lang,
+      value: lang,
-      primary: formatLanguageCode(lang, locale),
+      label: formatLanguageCode(lang, locale),
-      search_labels: [formatLanguageCode(lang, locale)],
     }));
   }
 
   if (!noSort && locale) {
     options.sort((a, b) =>
-      caseInsensitiveStringCompare(a.primary, b.primary, locale.language)
+      caseInsensitiveStringCompare(a.label, b.label, locale.language)
     );
   }
   return options;
@@ -82,69 +80,115 @@ export class HaLanguagePicker extends LitElement {
 
   @state() _defaultLanguages: string[] = [];
 
+  @query("ha-select") private _select!: HaSelect;
+
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
     this._computeDefaultLanguageOptions();
   }
 
+  protected updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+
+    const localeChanged =
+      changedProperties.has("hass") &&
+      this.hass &&
+      changedProperties.get("hass") &&
+      changedProperties.get("hass").locale.language !==
+        this.hass.locale.language;
+    if (
+      changedProperties.has("languages") ||
+      changedProperties.has("value") ||
+      localeChanged
+    ) {
+      this._select.layoutOptions();
+      if (!this.disabled && this._select.value !== this.value) {
+        fireEvent(this, "value-changed", { value: this._select.value });
+      }
+      if (!this.value) {
+        return;
+      }
+      const languageOptions = this._getLanguagesOptions(
+        this.languages ?? this._defaultLanguages,
+        this.nativeName,
+        this.noSort,
+        this.hass?.locale
+      );
+      const selectedItemIndex = languageOptions.findIndex(
+        (option) => option.value === this.value
+      );
+      if (selectedItemIndex === -1) {
+        this.value = undefined;
+      }
+      if (localeChanged) {
+        this._select.select(selectedItemIndex);
+      }
+    }
+  }
+
   private _getLanguagesOptions = memoizeOne(getLanguageOptions);
 
   private _computeDefaultLanguageOptions() {
     this._defaultLanguages = Object.keys(translationMetadata.translations);
   }
 
-  private _getItems = () =>
+  protected render() {
-    this._getLanguagesOptions(
+    const languageOptions = this._getLanguagesOptions(
       this.languages ?? this._defaultLanguages,
       this.nativeName,
       this.noSort,
       this.hass?.locale
     );
 
-  private _valueRenderer = (value) => {
-    const language = this._getItems().find(
-      (lang) => lang.id === value
-    )?.primary;
-    return html`<span slot="headline">${language ?? value}</span> `;
-  };
-
-  protected render() {
     const value =
       this.value ??
-      (this.required && !this.disabled ? this._getItems()[0].id : this.value);
+      (this.required && !this.disabled
+        ? languageOptions[0]?.value
+        : this.value);
 
     return html`
-      <ha-generic-picker
+      <ha-select
-        .hass=${this.hass}
+        .label=${this.label ??
-        .autofocus=${this.autofocus}
-        popover-placement="bottom-end"
-        .notFoundLabel=${this.hass?.localize(
-          "ui.components.language-picker.no_match"
-        )}
-        .placeholder=${this.label ??
         (this.hass?.localize("ui.components.language-picker.language") ||
           "Language")}
-        .value=${value}
+        .value=${value || ""}
-        .valueRenderer=${this._valueRenderer}
+        .required=${this.required}
         .disabled=${this.disabled}
-        .getItems=${this._getItems}
+        @selected=${this._changed}
-        @value-changed=${this._changed}
+        @closed=${stopPropagation}
-        hide-clear-icon
+        fixedMenuPosition
-      ></ha-generic-picker>
+        naturalMenuWidth
+        .inlineArrow=${this.inlineArrow}
+      >
+        ${languageOptions.length === 0
+          ? html`<ha-list-item value=""
+              >${this.hass?.localize(
+                "ui.components.language-picker.no_languages"
+              ) || "No languages"}</ha-list-item
+            >`
+          : languageOptions.map(
+              (option) => html`
+                <ha-list-item .value=${option.value}
+                  >${option.label}</ha-list-item
+                >
+              `
+            )}
+      </ha-select>
     `;
   }
 
   static styles = css`
-    ha-generic-picker {
+    ha-select {
       width: 100%;
-      min-width: 200px;
-      display: block;
     }
   `;
 
-  private _changed(ev: ValueChangedEvent<string>): void {
+  private _changed(ev): void {
-    ev.stopPropagation();
+    const target = ev.target as HaSelect;
-    this.value = ev.detail.value;
+    if (this.disabled || target.value === "" || target.value === this.value) {
+      return;
+    }
+    this.value = target.value;
     fireEvent(this, "value-changed", { value: this.value });
   }
 }

src/components/ha-markdown.ts

@@ -50,7 +50,7 @@ export class HaMarkdown extends LitElement {
     }
     ha-alert {
       display: block;
-      margin: var(--ha-space-1) 0;
+      margin: 4px 0;
     }
     a {
       color: var(--primary-color);
@@ -75,7 +75,7 @@ export class HaMarkdown extends LitElement {
       padding: 0;
     }
     pre {
-      padding: var(--ha-space-4);
+      padding: 16px;
       overflow: auto;
       line-height: var(--ha-line-height-condensed);
       font-family: var(--ha-font-family-code);
@@ -95,7 +95,7 @@ export class HaMarkdown extends LitElement {
     hr {
       border-color: var(--divider-color);
       border-bottom: none;
-      margin: var(--ha-space-4) 0;
+      margin: 16px 0;
     }
   ` as CSSResultGroup;
 }

src/components/ha-picker-combo-box.ts

@@ -69,7 +69,7 @@ export type PickerComboBoxSearchFn<T extends PickerComboBoxItem> = (
 
 @customElement("ha-picker-combo-box")
 export class HaPickerComboBox extends LitElement {
-  @property({ attribute: false }) public hass?: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   // eslint-disable-next-line lit/no-native-attributes
   @property({ type: Boolean }) public autofocus = false;
@@ -140,9 +140,7 @@ export class HaPickerComboBox extends LitElement {
 
   protected render() {
     return html`<ha-textfield
-        .label=${this.label ??
+        .label=${this.label ?? this.hass.localize("ui.common.search")}
-        this.hass?.localize("ui.common.search") ??
-        "Search"}
         @input=${this._filterChanged}
       ></ha-textfield>
       <lit-virtualizer
@@ -161,18 +159,12 @@ export class HaPickerComboBox extends LitElement {
   private _defaultNotFoundItem = memoizeOne(
     (
       label: this["notFoundLabel"],
-      localize?: LocalizeFunc
+      localize: LocalizeFunc
     ): PickerComboBoxItemWithLabel => ({
       id: NO_MATCHING_ITEMS_FOUND_ID,
-      primary:
+      primary: label || localize("ui.components.combo-box.no_match"),
-        label ||
-        (localize && localize("ui.components.combo-box.no_match")) ||
-        "No matching items found",
       icon_path: mdiMagnify,
-      a11y_label:
+      a11y_label: label || localize("ui.components.combo-box.no_match"),
-        label ||
-        (localize && localize("ui.components.combo-box.no_match")) ||
-        "No matching items found",
     })
   );
 
@@ -197,13 +189,13 @@ export class HaPickerComboBox extends LitElement {
         caseInsensitiveStringCompare(
           entityA.sorting_label!,
           entityB.sorting_label!,
-          this.hass?.locale.language ?? navigator.language
+          this.hass.locale.language
         )
       );
 
     if (!sortedItems.length) {
       sortedItems.push(
-        this._defaultNotFoundItem(this.notFoundLabel, this.hass?.localize)
+        this._defaultNotFoundItem(this.notFoundLabel, this.hass.localize)
       );
     }
 
@@ -257,20 +249,8 @@ export class HaPickerComboBox extends LitElement {
     const textfield = ev.target as HaTextField;
     const searchString = textfield.value.trim();
 
-    if (!searchString) {
-      this._items = this._allItems;
-      return;
-    }
-
     const index = this._fuseIndex(this._allItems);
-    const fuse = new HaFuse(
+    const fuse = new HaFuse(this._allItems, { shouldSort: false }, index);
-      this._allItems,
-      {
-        shouldSort: false,
-        minMatchCharLength: Math.min(searchString.length, 2),
-      },
-      index
-    );
 
     const results = fuse.multiTermsSearch(searchString);
     let filteredItems = this._allItems as PickerComboBoxItem[];
@@ -278,7 +258,7 @@ export class HaPickerComboBox extends LitElement {
       const items = results.map((result) => result.item);
       if (items.length === 0) {
         items.push(
-          this._defaultNotFoundItem(this.notFoundLabel, this.hass?.localize)
+          this._defaultNotFoundItem(this.notFoundLabel, this.hass.localize)
         );
       }
       const additionalItems = this._getAdditionalItems(searchString);
@@ -451,17 +431,6 @@ export class HaPickerComboBox extends LitElement {
 
   private _pickSelectedItem = (ev: KeyboardEvent) => {
     ev.stopPropagation();
-    const firstItem = this._virtualizerElement?.items[0] as PickerComboBoxItem;
-
-    if (
-      this._virtualizerElement?.items.length === 1 &&
-      firstItem.id !== NO_MATCHING_ITEMS_FOUND_ID
-    ) {
-      fireEvent(this, "value-changed", {
-        value: firstItem.id,
-      });
-    }
-
     if (this._selectedItemIndex === -1) {
       return;
     }
@@ -469,9 +438,7 @@ export class HaPickerComboBox extends LitElement {
     // if filter button is focused
     ev.preventDefault();
 
-    const item = this._virtualizerElement?.items[
+    const item: any = this._virtualizerElement?.items[this._selectedItemIndex];
-      this._selectedItemIndex
-    ] as PickerComboBoxItem;
     if (item && item.id !== NO_MATCHING_ITEMS_FOUND_ID) {
       fireEvent(this, "value-changed", { value: item.id });
     }

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

@@ -0,0 +1,122 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
+import type { BackgroundSelector } from "../../data/selector";
+import type { HomeAssistant } from "../../types";
+import "../ha-picture-upload";
+import "../ha-alert";
+import type { HaPictureUpload } from "../ha-picture-upload";
+import { URL_PREFIX } from "../../data/image_upload";
+
+@customElement("ha-selector-background")
+export class HaBackgroundSelector extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public value?: any;
+
+  @property({ attribute: false }) public selector!: BackgroundSelector;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  @state() private yamlBackground = false;
+
+  protected updated(changedProps) {
+    super.updated(changedProps);
+
+    if (changedProps.has("value")) {
+      this.yamlBackground = !!this.value && !this.value.startsWith(URL_PREFIX);
+    }
+  }
+
+  protected render() {
+    return html`
+      <div>
+        ${this.yamlBackground
+          ? html`
+              <div class="value">
+                <img
+                  src=${this.value}
+                  alt=${this.hass.localize(
+                    "ui.components.picture-upload.current_image_alt"
+                  )}
+                />
+              </div>
+              <ha-alert alert-type="info">
+                ${this.hass.localize(
+                  `ui.components.selectors.background.yaml_info`
+                )}
+                <ha-button slot="action" @click=${this._clearValue}>
+                  ${this.hass.localize(
+                    `ui.components.picture-upload.clear_picture`
+                  )}
+                </ha-button>
+              </ha-alert>
+            `
+          : html`
+              <ha-picture-upload
+                .hass=${this.hass}
+                .value=${this.value?.startsWith(URL_PREFIX) ? this.value : null}
+                .original=${!!this.selector.background?.original}
+                .cropOptions=${this.selector.background?.crop}
+                select-media
+                @change=${this._pictureChanged}
+              ></ha-picture-upload>
+            `}
+      </div>
+    `;
+  }
+
+  private _pictureChanged(ev) {
+    const value = (ev.target as HaPictureUpload).value;
+
+    fireEvent(this, "value-changed", { value: value ?? undefined });
+  }
+
+  private _clearValue() {
+    fireEvent(this, "value-changed", { value: undefined });
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      position: relative;
+    }
+    ha-picture-upload {
+      background-color: var(--primary-background-color);
+      border-radius: var(--file-upload-image-border-radius);
+    }
+    div {
+      display: flex;
+      flex-direction: column;
+    }
+    ha-button {
+      white-space: nowrap;
+      --mdc-theme-primary: var(--primary-color);
+    }
+    .value {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    img {
+      max-width: 100%;
+      max-height: 200px;
+      margin-bottom: 4px;
+      border-radius: var(--file-upload-image-border-radius);
+      transition: opacity 0.3s;
+      opacity: var(--picture-opacity, 1);
+    }
+    img:hover {
+      opacity: 1;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-background": HaBackgroundSelector;
+  }
+}

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

@@ -34,6 +34,7 @@ const LOAD_ELEMENTS = {
   file: () => import("./ha-selector-file"),
   floor: () => import("./ha-selector-floor"),
   label: () => import("./ha-selector-label"),
+  background: () => import("./ha-selector-background"),
   language: () => import("./ha-selector-language"),
   navigation: () => import("./ha-selector-navigation"),
   number: () => import("./ha-selector-number"),

src/components/ha-service-picker.ts

@@ -76,42 +76,34 @@ class HaServicePicker extends LitElement {
     </ha-combo-box-item>
   `;
 
-  private _valueRenderer = memoizeOne(
+  private _valueRenderer: PickerValueRenderer = (value) => {
-    (
+    const serviceId = value;
-      localize: LocalizeFunc,
+    const [domain, service] = serviceId.split(".");
-      services: HomeAssistant["services"]
-    ): PickerValueRenderer =>
-      (value) => {
-        const serviceId = value;
-        const [domain, service] = serviceId.split(".");
 
-        if (!services[domain]?.[service]) {
+    if (!this.hass.services[domain]?.[service]) {
-          return html`
+      return html`
-            <ha-svg-icon slot="start" .path=${mdiRoomService}></ha-svg-icon>
+        <ha-svg-icon slot="start" .path=${mdiRoomService}></ha-svg-icon>
-            <span slot="headline">${value}</span>
+        <span slot="headline">${value}</span>
-          `;
+      `;
-        }
+    }
 
-        const serviceName =
+    const serviceName =
-          localize(`component.${domain}.services.${service}.name`) ||
+      this.hass.localize(`component.${domain}.services.${service}.name`) ||
-          services[domain][service].name ||
+      this.hass.services[domain][service].name ||
-          service;
+      service;
 
-        return html`
+    return html`
-          <ha-service-icon
+      <ha-service-icon
-            slot="start"
+        slot="start"
-            .hass=${this.hass}
+        .hass=${this.hass}
-            .service=${serviceId}
+        .service=${serviceId}
-          ></ha-service-icon>
+      ></ha-service-icon>
-          <span slot="headline">${serviceName}</span>
+      <span slot="headline">${serviceName}</span>
-          ${this.showServiceId
+      ${this.showServiceId
-            ? html`<span slot="supporting-text" class="code"
+        ? html`<span slot="supporting-text" class="code">${serviceId}</span>`
-                >${serviceId}</span
+        : nothing}
-              >`
+    `;
-            : nothing}
+  };
-        `;
-      }
-  );
 
   protected render(): TemplateResult {
     const placeholder =
@@ -131,10 +123,7 @@ class HaServicePicker extends LitElement {
         .value=${this.value}
         .getItems=${this._getItems}
         .rowRenderer=${this._rowRenderer}
-        .valueRenderer=${this._valueRenderer(
+        .valueRenderer=${this._valueRenderer}
-          this.hass.localize,
-          this.hass.services
-        )}
         @value-changed=${this._valueChanged}
       >
       </ha-generic-picker>

src/data/assist_pipeline.ts

@@ -214,6 +214,8 @@ export interface PipelineRun {
   stage: "ready" | "wake_word" | "stt" | "intent" | "tts" | "done" | "error";
   run: PipelineRunStartEvent["data"];
   error?: PipelineErrorEvent["data"];
+  started: Date;
+  finished?: Date;
   wake_word?: PipelineWakeWordStartEvent["data"] &
     Partial<PipelineWakeWordEndEvent["data"]> & { done: boolean };
   stt?: PipelineSTTStartEvent["data"] &
@@ -235,6 +237,7 @@ export const processEvent = (
       stage: "ready",
       run: event.data,
       events: [event],
+      started: new Date(event.timestamp),
     };
     return run;
   }
@@ -290,9 +293,14 @@ export const processEvent = (
       tts: { ...run.tts!, ...event.data, done: true },
     };
   } else if (event.type === "run-end") {
-    run = { ...run, stage: "done" };
+    run = { ...run, finished: new Date(event.timestamp), stage: "done" };
   } else if (event.type === "error") {
-    run = { ...run, stage: "error", error: event.data };
+    run = {
+      ...run,
+      finished: new Date(event.timestamp),
+      stage: "error",
+      error: event.data,
+    };
   } else {
     run = { ...run };
   }

src/data/chat_log.ts

@@ -0,0 +1,228 @@
+import type { UnsubscribeFunc } from "home-assistant-js-websocket";
+import type { HomeAssistant } from "../types";
+
+export const enum ChatLogEventType {
+  INITIAL_STATE = "initial_state",
+  CREATED = "created",
+  UPDATED = "updated",
+  DELETED = "deleted",
+  CONTENT_ADDED = "content_added",
+}
+
+export interface ChatLogAttachment {
+  media_content_id: string;
+  mime_type: string;
+  path: string;
+}
+
+export interface ChatLogSystemContent {
+  role: "system";
+  content: string;
+  created: Date;
+}
+
+export interface ChatLogUserContent {
+  role: "user";
+  content: string;
+  created: Date;
+  attachments?: ChatLogAttachment[];
+}
+
+export interface ChatLogAssistantContent {
+  role: "assistant";
+  agent_id: string;
+  created: Date;
+  content?: string;
+  thinking_content?: string;
+  tool_calls?: any[];
+}
+
+export interface ChatLogToolResultContent {
+  role: "tool_result";
+  agent_id: string;
+  tool_call_id: string;
+  tool_name: string;
+  tool_result: any;
+  created: Date;
+}
+
+export type ChatLogContent =
+  | ChatLogSystemContent
+  | ChatLogUserContent
+  | ChatLogAssistantContent
+  | ChatLogToolResultContent;
+
+export interface ChatLog {
+  conversation_id: string;
+  continue_conversation: boolean;
+  content: ChatLogContent[];
+  created: Date;
+}
+
+// Internal wire format types (not exported)
+interface ChatLogSystemContentWire {
+  role: "system";
+  content: string;
+  created: string;
+}
+
+interface ChatLogUserContentWire {
+  role: "user";
+  content: string;
+  created: string;
+  attachments?: ChatLogAttachment[];
+}
+
+interface ChatLogAssistantContentWire {
+  role: "assistant";
+  agent_id: string;
+  created: string;
+  content?: string;
+  thinking_content?: string;
+  tool_calls?: {
+    tool_name: string;
+    tool_args: Record<string, any>;
+    id: string;
+    external: boolean;
+  }[];
+}
+
+interface ChatLogToolResultContentWire {
+  role: "tool_result";
+  agent_id: string;
+  tool_call_id: string;
+  tool_name: string;
+  tool_result: any;
+  created: string;
+}
+
+type ChatLogContentWire =
+  | ChatLogSystemContentWire
+  | ChatLogUserContentWire
+  | ChatLogAssistantContentWire
+  | ChatLogToolResultContentWire;
+
+interface ChatLogWire {
+  conversation_id: string;
+  continue_conversation: boolean;
+  content: ChatLogContentWire[];
+  created: string;
+}
+
+const processContent = (content: ChatLogContentWire): ChatLogContent => ({
+  ...content,
+  created: new Date(content.created),
+});
+
+const processChatLog = (chatLog: ChatLogWire): ChatLog => ({
+  ...chatLog,
+  created: new Date(chatLog.created),
+  content: chatLog.content.map(processContent),
+});
+
+interface ChatLogInitialStateEvent {
+  event_type: ChatLogEventType.INITIAL_STATE;
+  data: ChatLogWire;
+}
+
+interface ChatLogIndexInitialStateEvent {
+  event_type: ChatLogEventType.INITIAL_STATE;
+  data: ChatLogWire[];
+}
+
+interface ChatLogCreatedEvent {
+  conversation_id: string;
+  event_type: ChatLogEventType.CREATED;
+  data: ChatLogWire;
+}
+
+interface ChatLogUpdatedEvent {
+  conversation_id: string;
+  event_type: ChatLogEventType.UPDATED;
+  data: { chat_log: ChatLogWire };
+}
+
+interface ChatLogDeletedEvent {
+  conversation_id: string;
+  event_type: ChatLogEventType.DELETED;
+  data: ChatLogWire;
+}
+
+interface ChatLogContentAddedEvent {
+  conversation_id: string;
+  event_type: ChatLogEventType.CONTENT_ADDED;
+  data: { content: ChatLogContentWire };
+}
+
+type ChatLogSubscriptionEvent =
+  | ChatLogInitialStateEvent
+  | ChatLogUpdatedEvent
+  | ChatLogDeletedEvent
+  | ChatLogContentAddedEvent;
+
+type ChatLogIndexSubscriptionEvent =
+  | ChatLogIndexInitialStateEvent
+  | ChatLogCreatedEvent
+  | ChatLogDeletedEvent;
+
+export const subscribeChatLog = (
+  hass: HomeAssistant,
+  conversationId: string,
+  callback: (chatLog: ChatLog | null) => void
+): Promise<UnsubscribeFunc> => {
+  let chatLog: ChatLog | null = null;
+
+  return hass.connection.subscribeMessage<ChatLogSubscriptionEvent>(
+    (event) => {
+      if (event.event_type === ChatLogEventType.INITIAL_STATE) {
+        chatLog = processChatLog(event.data);
+        callback(chatLog);
+      } else if (event.event_type === ChatLogEventType.CONTENT_ADDED) {
+        if (chatLog) {
+          chatLog = {
+            ...chatLog,
+            content: [...chatLog.content, processContent(event.data.content)],
+          };
+          callback(chatLog);
+        }
+      } else if (event.event_type === ChatLogEventType.UPDATED) {
+        chatLog = processChatLog(event.data.chat_log);
+        callback(chatLog);
+      } else if (event.event_type === ChatLogEventType.DELETED) {
+        chatLog = null;
+        callback(null);
+      }
+    },
+    {
+      type: "conversation/chat_log/subscribe",
+      conversation_id: conversationId,
+    }
+  );
+};
+
+export const subscribeChatLogIndex = (
+  hass: HomeAssistant,
+  callback: (chatLogs: ChatLog[]) => void
+): Promise<UnsubscribeFunc> => {
+  let chatLogs: ChatLog[] = [];
+
+  return hass.connection.subscribeMessage<ChatLogIndexSubscriptionEvent>(
+    (event) => {
+      if (event.event_type === ChatLogEventType.INITIAL_STATE) {
+        chatLogs = event.data.map(processChatLog);
+        callback(chatLogs);
+      } else if (event.event_type === ChatLogEventType.CREATED) {
+        chatLogs = [...chatLogs, processChatLog(event.data)];
+        callback(chatLogs);
+      } else if (event.event_type === ChatLogEventType.DELETED) {
+        chatLogs = chatLogs.filter(
+          (chatLog) => chatLog.conversation_id !== event.conversation_id
+        );
+        callback(chatLogs);
+      }
+    },
+    {
+      type: "conversation/chat_log/subscribe_index",
+    }
+  );
+};

src/data/label_registry.ts

@@ -264,7 +264,6 @@ export const getLabels = (
   const items = outputLabels.map<PickerComboBoxItem>((label) => ({
     id: label.label_id,
     primary: label.name,
-    secondary: label.description ?? "",
     icon: label.icon || undefined,
     icon_path: label.icon ? undefined : mdiLabel,
     sorting_label: label.name,

src/data/lovelace/config/view.ts

@@ -1,4 +1,3 @@
-import type { MediaSelectorValue } from "../../selector";
 import type { LovelaceBadgeConfig } from "./badge";
 import type { LovelaceCardConfig } from "./card";
 import type { LovelaceSectionRawConfig } from "./section";
@@ -9,7 +8,7 @@ export interface ShowViewConfig {
 }
 
 export interface LovelaceViewBackgroundConfig {
-  image?: string | MediaSelectorValue;
+  image?: string;
   opacity?: number;
   size?: "auto" | "cover" | "contain";
   alignment?:

src/data/selector.ts

@@ -5,6 +5,7 @@ import type {
 import { ensureArray } from "../common/array/ensure-array";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
 import { supportsFeature } from "../common/entity/supports-feature";
+import type { CropOptions } from "../dialogs/image-cropper-dialog/show-image-cropper-dialog";
 import { isHelperDomain } from "../panels/config/helpers/const";
 import type { UiAction } from "../panels/lovelace/components/hui-action-editor";
 import type { HomeAssistant } from "../types";
@@ -46,6 +47,8 @@ export type Selector =
   | FileSelector
   | IconSelector
   | LabelSelector
+  | ImageSelector
+  | BackgroundSelector
   | LanguageSelector
   | LocationSelector
   | MediaSelector
@@ -270,6 +273,14 @@ export interface IconSelector {
   } | null;
 }
 
+export interface ImageSelector {
+  image: { original?: boolean; crop?: CropOptions } | null;
+}
+
+export interface BackgroundSelector {
+  background: { original?: boolean; crop?: CropOptions } | null;
+}
+
 export interface LabelSelector {
   label: {
     multiple?: boolean;

src/dialogs/generic/dialog-box.ts

@@ -1,15 +1,15 @@
-import { mdiAlertOutline, mdiClose } from "@mdi/js";
+import { mdiAlertOutline } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-button";
-import "../../components/ha-dialog-footer";
 import "../../components/ha-dialog-header";
+import "../../components/ha-md-dialog";
+import type { HaMdDialog } from "../../components/ha-md-dialog";
 import "../../components/ha-svg-icon";
 import "../../components/ha-textfield";
 import type { HaTextField } from "../../components/ha-textfield";
-import "../../components/ha-wa-dialog";
 import type { HomeAssistant } from "../../types";
 import type { DialogBoxParams } from "./show-dialog-box";
 
@@ -19,12 +19,12 @@ class DialogBox extends LitElement {
 
   @state() private _params?: DialogBoxParams;
 
-  @state() private _open = false;
-
   @state() private _closeState?: "canceled" | "confirmed";
 
   @query("ha-textfield") private _textField?: HaTextField;
 
+  @query("ha-md-dialog") private _dialog?: HaMdDialog;
+
   private _closePromise?: Promise<void>;
 
   private _closeResolve?: () => void;
@@ -34,7 +34,6 @@ class DialogBox extends LitElement {
       await this._closePromise;
     }
     this._params = params;
-    this._open = true;
   }
 
   public closeDialog(): boolean {
@@ -61,25 +60,16 @@ class DialogBox extends LitElement {
         this.hass.localize("ui.dialogs.generic.default_confirmation_title"));
 
     return html`
-      <ha-wa-dialog
+      <ha-md-dialog
-        .hass=${this.hass}
+        open
-        .open=${this._open}
+        .disableCancelAction=${confirmPrompt}
-        ?prevent-scrim-close=${confirmPrompt}
         @closed=${this._dialogClosed}
+        type="alert"
         aria-labelledby="dialog-box-title"
         aria-describedby="dialog-box-description"
       >
-        <ha-dialog-header slot="header">
+        <div slot="headline">
-          ${!confirmPrompt
+          <span .title=${dialogTitle} id="dialog-box-title">
-            ? html`<slot name="headerNavigationIcon" slot="navigationIcon">
-                <ha-icon-button
-                  data-dialog="close"
-                  .label=${this.hass?.localize("ui.common.close") ?? "Close"}
-                  .path=${mdiClose}
-                ></ha-icon-button
-              ></slot>`
-            : nothing}
-          <span slot="title" id="dialog-box-title">
             ${this._params.warning
               ? html`<ha-svg-icon
                   .path=${mdiAlertOutline}
@@ -88,13 +78,13 @@ class DialogBox extends LitElement {
               : nothing}
             ${dialogTitle}
           </span>
-        </ha-dialog-header>
+        </div>
-        <div id="dialog-box-description">
+        <div slot="content" id="dialog-box-description">
           ${this._params.text ? html` <p>${this._params.text}</p> ` : ""}
           ${this._params.prompt
             ? html`
                 <ha-textfield
-                  autofocus
+                  dialogInitialFocus
                   value=${ifDefined(this._params.defaultValue)}
                   .placeholder=${this._params.placeholder}
                   .label=${this._params.inputLabel
@@ -109,11 +99,10 @@ class DialogBox extends LitElement {
               `
             : ""}
         </div>
-        <ha-dialog-footer slot="footer">
+        <div slot="actions">
           ${confirmPrompt
             ? html`
                 <ha-button
-                  slot="secondaryAction"
                   @click=${this._dismiss}
                   ?autofocus=${!this._params.prompt && this._params.destructive}
                   appearance="plain"
@@ -125,7 +114,6 @@ class DialogBox extends LitElement {
               `
             : nothing}
           <ha-button
-            slot="primaryAction"
             @click=${this._confirm}
             ?autofocus=${!this._params.prompt && !this._params.destructive}
             variant=${this._params.destructive ? "danger" : "brand"}
@@ -134,8 +122,8 @@ class DialogBox extends LitElement {
               ? this._params.confirmText
               : this.hass.localize("ui.common.ok")}
           </ha-button>
-        </ha-dialog-footer>
+        </div>
-      </ha-wa-dialog>
+      </ha-md-dialog>
     `;
   }
 
@@ -160,7 +148,8 @@ class DialogBox extends LitElement {
   }
 
   private _closeDialog() {
-    this._open = false;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+    this._dialog?.close();
     this._closePromise = new Promise((resolve) => {
       this._closeResolve = resolve;
     });
@@ -173,7 +162,6 @@ class DialogBox extends LitElement {
     }
     this._closeState = undefined;
     this._params = undefined;
-    this._open = false;
     this._closeResolve?.();
     this._closeResolve = undefined;
   }

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

@@ -678,8 +678,8 @@ export class MoreInfoDialog extends LitElement {
           /* Set the top top of the dialog to a fixed position, so it doesnt jump when the content changes size */
           --vertical-align-dialog: flex-start;
           --dialog-surface-margin-top: max(
-            var(--ha-space-10),
+            40px,
-            var(--safe-area-inset-top, var(--ha-space-0))
+            var(--safe-area-inset-top, 0px)
           );
           --dialog-content-padding: 0;
         }
@@ -698,15 +698,14 @@ export class MoreInfoDialog extends LitElement {
         }
 
         ha-more-info-history-and-logbook {
-          padding: var(--ha-space-2) var(--ha-space-6) var(--ha-space-6)
+          padding: 8px 24px 24px 24px;
-            var(--ha-space-6);
           display: block;
         }
 
         @media all and (max-width: 450px), all and (max-height: 500px) {
           /* When in fullscreen dialog should be attached to top */
           ha-dialog {
-            --dialog-surface-margin-top: var(--ha-space-0);
+            --dialog-surface-margin-top: 0px;
           }
         }
 
@@ -731,8 +730,7 @@ export class MoreInfoDialog extends LitElement {
           display: flex;
           flex-direction: column;
           align-items: flex-start;
-          margin: var(--ha-space-0) var(--ha-space-0)
+          margin: 0 0 -10px 0;
-            calc(var(--ha-space-2) * -1) var(--ha-space-0);
         }
 
         .title p {
@@ -754,9 +752,9 @@ export class MoreInfoDialog extends LitElement {
           font-size: var(--ha-font-size-m);
           line-height: 16px;
           --mdc-icon-size: 16px;
-          padding: var(--ha-space-1);
+          padding: 4px;
-          margin: calc(var(--ha-space-1) * -1);
+          margin: -4px;
-          margin-top: calc(var(--ha-space-2) * -1);
+          margin-top: -10px;
           background: none;
           border: none;
           outline: none;

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -1011,8 +1011,8 @@ export class QuickBar extends LitElement {
             --mdc-dialog-max-width: 800px;
             --mdc-dialog-min-width: 500px;
             --dialog-surface-position: fixed;
-            --dialog-surface-top: var(--ha-space-10);
+            --dialog-surface-top: 40px;
-            --mdc-dialog-max-height: calc(100% - var(--ha-space-18));
+            --mdc-dialog-max-height: calc(100% - 72px);
           }
         }
 
@@ -1055,8 +1055,8 @@ export class QuickBar extends LitElement {
         }
 
         span.command-text {
-          margin-left: var(--ha-space-2);
+          margin-left: 8px;
-          margin-inline-start: var(--ha-space-2);
+          margin-inline-start: 8px;
           margin-inline-end: initial;
           direction: var(--direction);
         }
@@ -1069,8 +1069,8 @@ export class QuickBar extends LitElement {
         ha-md-list-item.two-line {
           --md-list-item-one-line-container-height: 64px;
           --md-list-item-two-line-container-height: 64px;
-          --md-list-item-top-space: var(--ha-space-2);
+          --md-list-item-top-space: 8px;
-          --md-list-item-bottom-space: var(--ha-space-2);
+          --md-list-item-bottom-space: 8px;
         }
 
         ha-md-list-item.three-line {
@@ -1078,8 +1078,8 @@ export class QuickBar extends LitElement {
           --md-list-item-one-line-container-height: 72px;
           --md-list-item-two-line-container-height: 72px;
           --md-list-item-three-line-container-height: 72px;
-          --md-list-item-top-space: var(--ha-space-2);
+          --md-list-item-top-space: 8px;
-          --md-list-item-bottom-space: var(--ha-space-2);
+          --md-list-item-bottom-space: 8px;
         }
 
         ha-md-list-item .code {
@@ -1104,11 +1104,11 @@ export class QuickBar extends LitElement {
         }
 
         ha-tip {
-          padding: var(--ha-space-5);
+          padding: 20px;
         }
 
         .nothing-found {
-          padding: var(--ha-space-4) var(--ha-space-0);
+          padding: 16px 0px;
           text-align: center;
         }
 

src/dialogs/voice-assistant-setup/voice-assistant-setup-dialog.ts

@@ -193,12 +193,12 @@ export class HaVoiceAssistantSetupDialog extends LitElement {
                     ).map(
                       (lang) =>
                         html`<ha-md-menu-item
-                          .value=${lang.id}
+                          .value=${lang.value}
                           @click=${this._handlePickLanguage}
                           @keydown=${this._handlePickLanguage}
-                          .selected=${this._language === lang.id}
+                          .selected=${this._language === lang.value}
                         >
-                          ${lang.primary}
+                          ${lang.label}
                         </ha-md-menu-item>`
                     )}
                   </ha-md-button-menu>`

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

@@ -265,15 +265,19 @@ class DialogAreaDetail extends LitElement {
               ${this.hass.localize("ui.common.delete")}
             </ha-button>`
           : nothing}
-        <ha-button
+        <div slot="primaryAction">
-          slot="primaryAction"
+          <ha-button appearance="plain" @click=${this.closeDialog}>
-          @click=${this._updateEntry}
+            ${this.hass.localize("ui.common.cancel")}
-          .disabled=${nameInvalid || !!this._submitting}
+          </ha-button>
-        >
+          <ha-button
-          ${entry
+            @click=${this._updateEntry}
-            ? this.hass.localize("ui.common.save")
+            .disabled=${nameInvalid || !!this._submitting}
-            : this.hass.localize("ui.common.create")}
+          >
-        </ha-button>
+            ${entry
+              ? this.hass.localize("ui.common.save")
+              : this.hass.localize("ui.common.create")}
+          </ha-button>
+        </div>
       </ha-dialog>
     `;
   }

src/panels/config/category/dialog-category-registry-detail.ts

@@ -98,7 +98,7 @@ class DialogCategoryDetail extends LitElement {
         </div>
         <ha-button
           appearance="plain"
-          slot="secondaryAction"
+          slot="primaryAction"
           @click=${this.closeDialog}
         >
           ${this.hass.localize("ui.common.cancel")}

src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts

@@ -5,8 +5,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeDeviceNameDisplay } from "../../../../common/entity/compute_device_name";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-area-picker";
-import "../../../../components/ha-wa-dialog";
+import "../../../../components/ha-dialog";
-import "../../../../components/ha-dialog-footer";
 import "../../../../components/ha-button";
 import "../../../../components/ha-labels-picker";
 import type { HaSwitch } from "../../../../components/ha-switch";
@@ -20,8 +19,6 @@ import type { DeviceRegistryDetailDialogParams } from "./show-dialog-device-regi
 class DialogDeviceRegistryDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @state() private _open = false;
-
   @state() private _nameByUser!: string;
 
   @state() private _error?: string;
@@ -45,15 +42,10 @@ class DialogDeviceRegistryDetail extends LitElement {
     this._areaId = this._params.device.area_id || "";
     this._labels = this._params.device.labels || [];
     this._disabledBy = this._params.device.disabled_by;
-    this._open = true;
     await this.updateComplete;
   }
 
   public closeDialog(): void {
-    this._open = false;
-  }
-
-  private _dialogClosed(): void {
     this._error = "";
     this._params = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
@@ -65,12 +57,10 @@ class DialogDeviceRegistryDetail extends LitElement {
     }
     const device = this._params.device;
     return html`
-      <ha-wa-dialog
+      <ha-dialog
-        .hass=${this.hass}
+        open
-        .open=${this._open}
+        @closed=${this.closeDialog}
-        header-title=${computeDeviceNameDisplay(device, this.hass)}
+        .heading=${computeDeviceNameDisplay(device, this.hass)}
-        prevent-scrim-close
-        @closed=${this._dialogClosed}
       >
         <div>
           ${this._error
@@ -78,7 +68,6 @@ class DialogDeviceRegistryDetail extends LitElement {
             : ""}
           <div class="form">
             <ha-textfield
-              autofocus
               .value=${this._nameByUser}
               @input=${this._nameChanged}
               .label=${this.hass.localize(
@@ -86,6 +75,7 @@ class DialogDeviceRegistryDetail extends LitElement {
               )}
               .placeholder=${device.name || ""}
               .disabled=${this._submitting}
+              dialogInitialFocus
             ></ha-textfield>
             <ha-area-picker
               .hass=${this.hass}
@@ -141,25 +131,22 @@ class DialogDeviceRegistryDetail extends LitElement {
             </div>
           </div>
         </div>
-
+        <ha-button
-        <ha-dialog-footer slot="footer">
+          slot="secondaryAction"
-          <ha-button
+          @click=${this.closeDialog}
-            slot="secondaryAction"
+          .disabled=${this._submitting}
-            @click=${this.closeDialog}
+          appearance="plain"
-            .disabled=${this._submitting}
+        >
-            appearance="plain"
+          ${this.hass.localize("ui.common.cancel")}
-          >
+        </ha-button>
-            ${this.hass.localize("ui.common.cancel")}
+        <ha-button
-          </ha-button>
+          slot="primaryAction"
-          <ha-button
+          @click=${this._updateEntry}
-            slot="primaryAction"
+          .disabled=${this._submitting}
-            @click=${this._updateEntry}
+        >
-            .disabled=${this._submitting}
+          ${this.hass.localize("ui.dialogs.device-registry-detail.update")}
-          >
+        </ha-button>
-            ${this.hass.localize("ui.dialogs.device-registry-detail.update")}
+      </ha-dialog>
-          </ha-button>
-        </ha-dialog-footer>
-      </ha-wa-dialog>
     `;
   }
 

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

@@ -153,8 +153,6 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
         },
         yAxis: {
           type: "value",
-          min: 0,
-          max: 100,
           splitLine: {
             show: true,
           },

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

@@ -6,6 +6,7 @@ import {
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
+import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { formatDateTimeWithSeconds } from "../../../../common/datetime/format_date_time";
 import type {
   PipelineRunEvent,
@@ -20,6 +21,8 @@ import "../../../../layouts/hass-subpage";
 import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../../types";
 import "./assist-render-pipeline-events";
+import type { ChatLog } from "../../../../data/chat_log";
+import { subscribeChatLog } from "../../../../data/chat_log";
 
 @customElement("assist-pipeline-debug")
 export class AssistPipelineDebug extends LitElement {
@@ -37,8 +40,12 @@ export class AssistPipelineDebug extends LitElement {
 
   @state() private _events?: PipelineRunEvent[];
 
+  @state() private _chatLog?: ChatLog;
+
   private _unsubRefreshEventsID?: number;
 
+  private _unsubChatLogUpdates?: Promise<UnsubscribeFunc>;
+
   protected render() {
     return html`<hass-subpage
       .narrow=${this.narrow}
@@ -106,6 +113,7 @@ export class AssistPipelineDebug extends LitElement {
           ? html`<assist-render-pipeline-events
               .hass=${this.hass}
               .events=${this._events}
+              .chatLog=${this._chatLog}
             ></assist-render-pipeline-events>`
           : ""}
       </div>
@@ -120,6 +128,10 @@ export class AssistPipelineDebug extends LitElement {
       clearRefresh = true;
     }
     if (changedProperties.has("_runId")) {
+      if (this._unsubChatLogUpdates) {
+        this._unsubChatLogUpdates.then((unsub) => unsub());
+        this._unsubChatLogUpdates = undefined;
+      }
       this._fetchEvents();
       clearRefresh = true;
     }
@@ -135,6 +147,10 @@ export class AssistPipelineDebug extends LitElement {
       clearTimeout(this._unsubRefreshEventsID);
       this._unsubRefreshEventsID = undefined;
     }
+    if (this._unsubChatLogUpdates) {
+      this._unsubChatLogUpdates.then((unsub) => unsub());
+      this._unsubChatLogUpdates = undefined;
+    }
   }
 
   private async _fetchRuns() {
@@ -181,8 +197,27 @@ export class AssistPipelineDebug extends LitElement {
       });
       return;
     }
+    if (!this._events!.length) {
+      return;
+    }
+    if (!this._unsubChatLogUpdates && this._events[0].type === "run-start") {
+      this._unsubChatLogUpdates = subscribeChatLog(
+        this.hass,
+        this._events[0].data.conversation_id,
+        (chatLog) => {
+          if (chatLog) {
+            this._chatLog = chatLog;
+          } else {
+            this._unsubChatLogUpdates?.then((unsub) => unsub());
+            this._unsubChatLogUpdates = undefined;
+          }
+        }
+      );
+      this._unsubChatLogUpdates.catch(() => {
+        this._unsubChatLogUpdates = undefined;
+      });
+    }
     if (
-      this._events?.length &&
       // If the last event is not a finish run event, the run is still ongoing.
       // Refresh events automatically.
       !["run-end", "error"].includes(this._events[this._events.length - 1].type)

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

@@ -1,6 +1,7 @@
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { extractSearchParam } from "../../../../common/url/search-params";
 import "../../../../components/ha-assist-pipeline-picker";
 import "../../../../components/ha-button";
@@ -24,6 +25,8 @@ import type { HomeAssistant } from "../../../../types";
 import { AudioRecorder } from "../../../../util/audio-recorder";
 import { fileDownload } from "../../../../util/file_download";
 import "./assist-render-pipeline-run";
+import type { ChatLog } from "../../../../data/chat_log";
+import { subscribeChatLog } from "../../../../data/chat_log";
 
 @customElement("assist-pipeline-run-debug")
 export class AssistPipelineRunDebug extends LitElement {
@@ -46,6 +49,13 @@ export class AssistPipelineRunDebug extends LitElement {
   @state() private _pipelineId?: string =
     extractSearchParam("pipeline") || undefined;
 
+  @state() private _chatLog?: ChatLog;
+
+  private _chatLogSubscription: {
+    conversationId: string;
+    unsub: Promise<UnsubscribeFunc>;
+  } | null = null;
+
   protected render(): TemplateResult {
     return html`
       <hass-subpage
@@ -178,6 +188,7 @@ export class AssistPipelineRunDebug extends LitElement {
                   <assist-render-pipeline-run
                     .hass=${this.hass}
                     .pipelineRun=${run}
+                    .chatLog=${this._chatLog}
                   ></assist-render-pipeline-run>
                 `
           )}
@@ -186,6 +197,14 @@ export class AssistPipelineRunDebug extends LitElement {
     `;
   }
 
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+    if (this._chatLogSubscription) {
+      this._chatLogSubscription.unsub.then((unsub) => unsub());
+      this._chatLogSubscription = null;
+    }
+  }
+
   private get conversationId(): string | null {
     return this._pipelineRuns.length === 0
       ? null
@@ -408,6 +427,32 @@ export class AssistPipelineRunDebug extends LitElement {
             added = true;
           }
           callback(updatedRun);
+
+          const conversationId = this.conversationId;
+          if (
+            !this._chatLog &&
+            conversationId &&
+            (!this._chatLogSubscription ||
+              this._chatLogSubscription.conversationId !== conversationId)
+          ) {
+            if (this._chatLogSubscription) {
+              this._chatLogSubscription.unsub.then((unsub) => unsub());
+            }
+            this._chatLogSubscription = {
+              conversationId,
+              unsub: subscribeChatLog(this.hass, conversationId, (chatLog) => {
+                if (chatLog) {
+                  this._chatLog = chatLog;
+                } else {
+                  this._chatLogSubscription?.unsub.then((unsub) => unsub());
+                  this._chatLogSubscription = null;
+                }
+              }),
+            };
+            this._chatLogSubscription.unsub.catch(() => {
+              this._chatLogSubscription = null;
+            });
+          }
         },
         {
           ...options,

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

@@ -9,6 +9,7 @@ import type {
 import { processEvent } from "../../../../data/assist_pipeline";
 import type { HomeAssistant } from "../../../../types";
 import "./assist-render-pipeline-run";
+import type { ChatLog } from "../../../../data/chat_log";
 
 @customElement("assist-render-pipeline-events")
 export class AssistPipelineEvents extends LitElement {
@@ -16,6 +17,8 @@ export class AssistPipelineEvents extends LitElement {
 
   @property({ attribute: false }) public events!: PipelineRunEvent[];
 
+  @property({ attribute: false }) public chatLog?: ChatLog;
+
   private _processEvents = memoizeOne(
     (events: PipelineRunEvent[]): PipelineRun | undefined => {
       let run: PipelineRun | undefined;
@@ -46,6 +49,7 @@ export class AssistPipelineEvents extends LitElement {
       <assist-render-pipeline-run
         .hass=${this.hass}
         .pipelineRun=${run}
+        .chatLog=${this.chatLog}
       ></assist-render-pipeline-run>
     `;
   }

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

@@ -1,5 +1,5 @@
 import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../../components/ha-card";
 import "../../../../components/ha-alert";
@@ -11,6 +11,12 @@ import type { HomeAssistant } from "../../../../types";
 import { formatNumber } from "../../../../common/number/format_number";
 import "../../../../components/ha-yaml-editor";
 import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
+import type {
+  ChatLogAssistantContent,
+  ChatLog,
+  ChatLogContent,
+  ChatLogUserContent,
+} from "../../../../data/chat_log";
 
 const RUN_DATA = {
   pipeline: "Pipeline",
@@ -126,7 +132,7 @@ const dataMinusKeysRender = (
     result[key] = data[key];
   }
   return render
-    ? html`<ha-expansion-panel>
+    ? html`<ha-expansion-panel class="yaml-expansion">
         <span slot="header">Raw</span>
         <ha-yaml-editor readOnly autoUpdate .value=${result}></ha-yaml-editor>
       </ha-expansion-panel>`
@@ -139,6 +145,8 @@ export class AssistPipelineDebug extends LitElement {
 
   @property({ attribute: false }) public pipelineRun!: PipelineRun;
 
+  @property({ attribute: false }) public chatLog?: ChatLog;
+
   protected render(): TemplateResult {
     const lastRunStage: string = this.pipelineRun
       ? ["tts", "intent", "stt", "wake_word"].find(
@@ -146,31 +154,47 @@ export class AssistPipelineDebug extends LitElement {
         ) || "ready"
       : "ready";
 
-    const messages: { from: string; text: string }[] = [];
+    let messages: ChatLogContent[];
 
-    const userMessage =
+    if (this.chatLog) {
-      (this.pipelineRun.init_options &&
+      messages = this.chatLog.content.filter(
-      "text" in this.pipelineRun.init_options.input
+        this.pipelineRun.finished
-        ? this.pipelineRun.init_options.input.text
+          ? (content: ChatLogContent) =>
-        : undefined) ||
+              content.role === "system" ||
-      this.pipelineRun?.stt?.stt_output?.text ||
+              (content.created >= this.pipelineRun.started &&
-      this.pipelineRun?.intent?.intent_input;
+                content.created <= this.pipelineRun.finished!)
+          : (content: ChatLogContent) =>
+              content.role === "system" ||
+              content.created >= this.pipelineRun.started
+      );
+    } else {
+      messages = [];
 
-    if (userMessage) {
+      // We don't have the chat log everywhere yet, just fallback for now.
-      messages.push({
+      const userMessage =
-        from: "user",
+        (this.pipelineRun.init_options &&
-        text: userMessage,
+        "text" in this.pipelineRun.init_options.input
-      });
+          ? this.pipelineRun.init_options.input.text
-    }
+          : undefined) ||
+        this.pipelineRun?.stt?.stt_output?.text ||
+        this.pipelineRun?.intent?.intent_input;
 
-    if (
+      if (userMessage) {
-      this.pipelineRun?.intent?.intent_output?.response?.speech?.plain?.speech
+        messages.push({
-    ) {
+          role: "user",
-      messages.push({
+          content: userMessage,
-        from: "hass",
+        } as ChatLogUserContent);
-        text: this.pipelineRun.intent.intent_output.response.speech.plain
+      }
-          .speech,
+
-      });
+      if (
+        this.pipelineRun?.intent?.intent_output?.response?.speech?.plain?.speech
+      ) {
+        messages.push({
+          role: "assistant",
+          content:
+            this.pipelineRun.intent.intent_output.response.speech.plain.speech,
+        } as ChatLogAssistantContent);
+      }
     }
 
     return html`
@@ -185,10 +209,58 @@ export class AssistPipelineDebug extends LitElement {
           ${messages.length > 0
             ? html`
                 <div class="messages">
-                  ${messages.map(
+                  ${messages.map((content) =>
-                    ({ from, text }) => html`
+                    content.role === "system" || content.role === "tool_result"
-                      <div class=${`message ${from}`}>${text}</div>
+                      ? html`
-                    `
+                          <ha-expansion-panel
+                            class="content-expansion ${content.role}"
+                          >
+                            <div slot="header">
+                              ${content.role === "system"
+                                ? "System"
+                                : `Result for ${content.tool_name}`}
+                            </div>
+                            ${content.role === "system"
+                              ? html`<pre>${content.content}</pre>`
+                              : html`
+                                  <ha-yaml-editor
+                                    read-only
+                                    auto-update
+                                    .value=${content}
+                                  ></ha-yaml-editor>
+                                `}
+                          </ha-expansion-panel>
+                        `
+                      : html`
+                          ${content.content
+                            ? html`
+                                <div class=${`message ${content.role}`}>
+                                  ${content.content}
+                                </div>
+                              `
+                            : nothing}
+                          ${content.role === "assistant" &&
+                          content.tool_calls?.length
+                            ? html`
+                                <ha-expansion-panel
+                                  class="content-expansion assistant"
+                                >
+                                  <span slot="header">
+                                    Call
+                                    ${content.tool_calls.length === 1
+                                      ? content.tool_calls[0].tool_name
+                                      : `${content.tool_calls.length} tools`}
+                                  </span>
+
+                                  <ha-yaml-editor
+                                    read-only
+                                    auto-update
+                                    .value=${content.tool_calls}
+                                  ></ha-yaml-editor>
+                                </ha-expansion-panel>
+                              `
+                            : nothing}
+                        `
                   )}
                 </div>
                 <div style="clear:both"></div>
@@ -360,7 +432,7 @@ export class AssistPipelineDebug extends LitElement {
         : ""}
       ${maybeRenderError(this.pipelineRun, "tts", lastRunStage)}
       <ha-card>
-        <ha-expansion-panel>
+        <ha-expansion-panel class="yaml-expansion">
           <span slot="header">Raw</span>
           <ha-yaml-editor
             read-only
@@ -399,12 +471,12 @@ export class AssistPipelineDebug extends LitElement {
     .row > div:last-child {
       text-align: right;
     }
-    ha-expansion-panel {
+    .yaml-expansion {
       padding-left: 8px;
       padding-inline-start: 8px;
       padding-inline-end: initial;
     }
-    .card-content ha-expansion-panel {
+    .card-content .yaml-expansion {
       padding-left: 0px;
       padding-inline-start: 0px;
       padding-inline-end: initial;
@@ -420,27 +492,59 @@ export class AssistPipelineDebug extends LitElement {
       margin-top: 8px;
     }
 
+    .content-expansion {
+      margin: 8px 0;
+      border-radius: var(--ha-border-radius-xl);
+      clear: both;
+      padding: 0 8px;
+      --input-fill-color: none;
+      max-width: calc(100% - 24px);
+      --expansion-panel-summary-padding: 0px;
+      --expansion-panel-content-padding: 0px;
+    }
+
+    .content-expansion *[slot="header"] {
+      font-weight: var(--ha-font-weight-normal);
+    }
+
+    .system {
+      background-color: var(--success-color);
+    }
+
     .message {
+      padding: 8px;
+    }
+
+    .message,
+    .content-expansion {
       font-size: var(--ha-font-size-l);
       margin: 8px 0;
-      padding: 8px;
       border-radius: var(--ha-border-radius-xl);
       clear: both;
     }
 
-    .message.user {
+    .messages pre {
+      white-space: pre-wrap;
+    }
+
+    .user,
+    .tool_result {
       margin-left: 24px;
       margin-inline-start: 24px;
       margin-inline-end: initial;
       float: var(--float-end);
-      text-align: right;
       border-bottom-right-radius: 0px;
       background-color: var(--light-primary-color);
       color: var(--text-light-primary-color, var(--primary-text-color));
       direction: var(--direction);
     }
 
-    .message.hass {
+    .message.user,
+    .content-expansion div[slot="header"] {
+      text-align: right;
+    }
+
+    .assistant {
       margin-right: 24px;
       margin-inline-end: 24px;
       margin-inline-start: initial;

src/panels/lovelace/cards/hui-weather-forecast-card.ts

@@ -563,7 +563,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
         .name,
         .attribute {
           font-size: var(--ha-font-size-m);
-          line-height: var(--ha-line-height-condensed);
+          line-height: 1;
         }
 
         .name-state {
@@ -729,7 +729,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
         .short .state,
         .short .temp-attribute .temp {
           font-size: 24px;
-          line-height: var(--ha-line-height-condensed);
+          line-height: 1.25;
         }
 
         .short .content + .forecast {

src/panels/lovelace/editor/view-editor/hui-view-background-editor.ts

@@ -1,18 +1,11 @@
 import memoizeOne from "memoize-one";
 import { LitElement, css, html, nothing } from "lit";
-import type { PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
 import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../../types";
-import type { LocalizeFunc } from "../../../../common/translations/localize";
-
-import {
-  isMediaSourceContentId,
-  resolveMediaSource,
-} from "../../../../data/media_source";
 
 @customElement("hui-view-background-editor")
 export class HuiViewBackgroundEditor extends LitElement {
@@ -20,8 +13,6 @@ export class HuiViewBackgroundEditor extends LitElement {
 
   @state() private _config!: LovelaceViewConfig;
 
-  @state({ attribute: false }) private _resolvedImage?: string;
-
   set config(config: LovelaceViewConfig) {
     this._config = config;
   }
@@ -29,195 +20,133 @@ export class HuiViewBackgroundEditor extends LitElement {
   private _localizeValueCallback = (key: string) =>
     this.hass.localize(key as any);
 
-  private _schema = memoizeOne(
+  private _schema = memoizeOne((showSettings: boolean) => [
-    (localize: LocalizeFunc, showSettings: boolean) =>
+    {
-      [
+      name: "image",
-        {
+      selector: { background: { original: true } },
-          name: "image",
+    },
-          selector: {
+    ...(showSettings
-            media: {
+      ? ([
-              accept: ["image/*"] as string[],
+          {
-              clearable: true,
+            name: "settings",
-              image_upload: true,
+            flatten: true,
-              hide_content_type: true,
+            expanded: true,
-              content_id_helper: localize(
+            type: "expandable" as const,
-                "ui.panel.lovelace.editor.card.picture.content_id_helper"
+            schema: [
-              ),
-            },
-          },
-        },
-        ...(showSettings
-          ? ([
               {
-                name: "settings",
+                name: "opacity",
-                flatten: true,
+                selector: {
-                expanded: true,
+                  number: { min: 0, max: 100, mode: "slider", step: 10 },
-                type: "expandable" as const,
+                },
-                schema: [
-                  {
-                    name: "opacity",
-                    selector: {
-                      number: { min: 0, max: 100, mode: "slider", step: 10 },
-                    },
-                  },
-                  {
-                    name: "attachment",
-                    selector: {
-                      button_toggle: {
-                        translation_key:
-                          "ui.panel.lovelace.editor.edit_view.background.attachment",
-                        options: ["scroll", "fixed"],
-                      },
-                    },
-                  },
-                  {
-                    name: "size",
-                    required: true,
-                    selector: {
-                      select: {
-                        translation_key:
-                          "ui.panel.lovelace.editor.edit_view.background.size",
-                        options: ["auto", "cover", "contain"],
-                        mode: "dropdown",
-                      },
-                    },
-                  },
-                  {
-                    name: "alignment",
-                    required: true,
-                    selector: {
-                      select: {
-                        translation_key:
-                          "ui.panel.lovelace.editor.edit_view.background.alignment",
-                        options: [
-                          "top left",
-                          "top center",
-                          "top right",
-                          "center left",
-                          "center",
-                          "center right",
-                          "bottom left",
-                          "bottom center",
-                          "bottom right",
-                        ],
-                        mode: "dropdown",
-                      },
-                    },
-                  },
-                  {
-                    name: "repeat",
-                    required: true,
-                    selector: {
-                      select: {
-                        translation_key:
-                          "ui.panel.lovelace.editor.edit_view.background.repeat",
-                        options: ["repeat", "no-repeat"],
-                        mode: "dropdown",
-                      },
-                    },
-                  },
-                ],
               },
-            ] as const)
+              {
-          : []),
+                name: "attachment",
-      ] as const
+                selector: {
-  );
+                  button_toggle: {
-
+                    translation_key:
-  protected updated(changedProps: PropertyValues) {
+                      "ui.panel.lovelace.editor.edit_view.background.attachment",
-    if (
+                    options: ["scroll", "fixed"],
-      this._config &&
+                  },
-      this.hass &&
+                },
-      (changedProps.has("_config") ||
+              },
-        (changedProps.has("hass") && !changedProps.get("hass")))
+              {
-    ) {
+                name: "size",
-      const background = this._backgroundData(this._config);
+                required: true,
-      this.style.setProperty(
+                selector: {
-        "--picture-opacity",
+                  select: {
-        `${(background.opacity ?? 100) / 100}`
+                    translation_key:
-      );
+                      "ui.panel.lovelace.editor.edit_view.background.size",
-
+                    options: ["auto", "cover", "contain"],
-      const backgroundImage =
+                    mode: "dropdown",
-        typeof background.image === "object"
+                  },
-          ? background.image.media_content_id
+                },
-          : background.image;
+              },
-
+              {
-      if (backgroundImage && isMediaSourceContentId(backgroundImage)) {
+                name: "alignment",
-        resolveMediaSource(this.hass, backgroundImage).then((result) => {
+                required: true,
-          this._resolvedImage = result.url;
+                selector: {
-        });
+                  select: {
-      } else {
+                    translation_key:
-        this._resolvedImage = backgroundImage;
+                      "ui.panel.lovelace.editor.edit_view.background.alignment",
-      }
+                    options: [
-    }
+                      "top left",
-  }
+                      "top center",
+                      "top right",
+                      "center left",
+                      "center",
+                      "center right",
+                      "bottom left",
+                      "bottom center",
+                      "bottom right",
+                    ],
+                    mode: "dropdown",
+                  },
+                },
+              },
+              {
+                name: "repeat",
+                required: true,
+                selector: {
+                  select: {
+                    translation_key:
+                      "ui.panel.lovelace.editor.edit_view.background.repeat",
+                    options: ["repeat", "no-repeat"],
+                    mode: "dropdown",
+                  },
+                },
+              },
+            ],
+          },
+        ] as const)
+      : []),
+  ]);
 
   protected render() {
     if (!this.hass) {
       return nothing;
     }
 
-    const background = this._backgroundData(this._config);
+    let background = this._config?.background;
+    if (typeof background === "string") {
+      const backgroundUrl = background.match(/url\(['"]?([^'"]+)['"]?\)/)?.[1];
+
+      background = {
+        image: backgroundUrl,
+      };
+    }
+
+    if (!background) {
+      background = {
+        opacity: 33,
+        alignment: "center",
+        size: "cover",
+        repeat: "repeat",
+        attachment: "fixed",
+      };
+    } else {
+      background = {
+        opacity: 100,
+        alignment: "center",
+        size: "cover",
+        repeat: "no-repeat",
+        attachment: "scroll",
+        ...background,
+      };
+    }
 
     return html`
-      ${this._resolvedImage
-        ? html`<div class="previewContainer">
-            <img
-              src=${this._resolvedImage}
-              alt=${this.hass.localize(
-                "ui.components.picture-upload.current_image_alt"
-              )}
-            />
-          </div>`
-        : nothing}
       <ha-form
         .hass=${this.hass}
         .data=${background}
-        .schema=${this._schema(this.hass.localize, true)}
+        .schema=${this._schema(true)}
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
         .localizeValue=${this._localizeValueCallback}
+        style=${`--picture-opacity: ${(background.opacity ?? 100) / 100};`}
       ></ha-form>
     `;
   }
 
-  private _backgroundData = memoizeOne(
-    (backgroundConfig?: LovelaceViewConfig) => {
-      let background = backgroundConfig?.background;
-      if (typeof background === "string") {
-        const backgroundUrl = background.match(
-          /url\(['"]?([^'"]+)['"]?\)/
-        )?.[1];
-
-        background = {
-          image: backgroundUrl,
-        };
-      }
-
-      if (!background) {
-        background = {
-          opacity: 33,
-          alignment: "center",
-          size: "cover",
-          repeat: "repeat",
-          attachment: "fixed",
-        };
-      } else {
-        background = {
-          opacity: 100,
-          alignment: "center",
-          size: "cover",
-          repeat: "no-repeat",
-          attachment: "scroll",
-          ...background,
-          ...(typeof background.image === "string"
-            ? { image: { media_content_id: background.image } }
-            : {}),
-        };
-      }
-      return background;
-    }
-  );
-
   private _valueChanged(ev: CustomEvent): void {
     const config = {
       ...this._config,
@@ -266,23 +195,6 @@ export class HuiViewBackgroundEditor extends LitElement {
       display: block;
       --file-upload-image-border-radius: var(--ha-border-radius-sm);
     }
-    .previewContainer {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-    img {
-      max-width: 100%;
-      max-height: 200px;
-      margin-bottom: 4px;
-      border-radius: var(--file-upload-image-border-radius);
-      transition: opacity 0.3s;
-      opacity: var(--picture-opacity, 1);
-    }
-    img:hover {
-      opacity: 1;
-    }
   `;
 }
 

src/panels/lovelace/views/hui-view-background.ts

@@ -27,9 +27,7 @@ export class HUIViewBackground extends LitElement {
     const backgroundImage =
       typeof this.background === "string"
         ? this.background
-        : typeof this.background?.image === "object"
+        : this.background?.image;
-          ? this.background.image.media_content_id
-          : this.background?.image;
 
     if (backgroundImage && isMediaSourceContentId(backgroundImage)) {
       resolveMediaSource(this.hass, backgroundImage).then((result) => {
@@ -75,17 +73,13 @@ export class HUIViewBackground extends LitElement {
     background?: string | LovelaceViewBackgroundConfig
   ) {
     if (typeof background === "object" && background.image) {
-      const image =
+      if (isMediaSourceContentId(background.image) && !this.resolvedImage) {
-        typeof background.image === "object"
-          ? background.image.media_content_id || ""
-          : background.image;
-      if (isMediaSourceContentId(image) && !this.resolvedImage) {
         return null;
       }
       const alignment = background.alignment ?? "center";
       const size = background.size ?? "cover";
       const repeat = background.repeat ?? "no-repeat";
-      return `${alignment} / ${size} ${repeat} url('${this.hass.hassUrl(this.resolvedImage || image)}')`;
+      return `${alignment} / ${size} ${repeat} url('${this.hass.hassUrl(this.resolvedImage || background.image)}')`;
     }
     if (typeof background === "string") {
       if (isMediaSourceContentId(background) && !this.resolvedImage) {

src/translations/en.json

@@ -758,7 +758,6 @@
       },
       "language-picker": {
         "language": "Language",
-        "no_match": "No matching languages found",
         "no_languages": "No languages available"
       },
       "tts-picker": {

yarn.lock

@@ -73,46 +73,46 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/compat-data@npm:^7.27.2, @babel/compat-data@npm:^7.27.7, @babel/compat-data@npm:^7.28.5":
+"@babel/compat-data@npm:^7.27.2, @babel/compat-data@npm:^7.27.7, @babel/compat-data@npm:^7.28.0":
-  version: 7.28.5
+  version: 7.28.4
-  resolution: "@babel/compat-data@npm:7.28.5"
+  resolution: "@babel/compat-data@npm:7.28.4"
-  checksum: 10/5a5ff00b187049e847f04bd02e21fbd8094544e5016195c2b45e56fa2e311eeb925b158f52a85624c9e6bacc1ce0323e26c303513723d918a8034e347e22610d
+  checksum: 10/95b7864e6b210c84c069743966da448c0cb50015a4de5e18dd755776a0b5e53c4653e74f26700aed8de922eaa3b8844fc5fc5b29bc64830249d2abe914aec832
   languageName: node
   linkType: hard
 
-"@babel/core@npm:7.28.5, @babel/core@npm:^7.24.4":
+"@babel/core@npm:7.28.4, @babel/core@npm:^7.24.4":
-  version: 7.28.5
+  version: 7.28.4
-  resolution: "@babel/core@npm:7.28.5"
+  resolution: "@babel/core@npm:7.28.4"
   dependencies:
     "@babel/code-frame": "npm:^7.27.1"
-    "@babel/generator": "npm:^7.28.5"
+    "@babel/generator": "npm:^7.28.3"
     "@babel/helper-compilation-targets": "npm:^7.27.2"
     "@babel/helper-module-transforms": "npm:^7.28.3"
     "@babel/helpers": "npm:^7.28.4"
-    "@babel/parser": "npm:^7.28.5"
+    "@babel/parser": "npm:^7.28.4"
     "@babel/template": "npm:^7.27.2"
-    "@babel/traverse": "npm:^7.28.5"
+    "@babel/traverse": "npm:^7.28.4"
-    "@babel/types": "npm:^7.28.5"
+    "@babel/types": "npm:^7.28.4"
     "@jridgewell/remapping": "npm:^2.3.5"
     convert-source-map: "npm:^2.0.0"
     debug: "npm:^4.1.0"
     gensync: "npm:^1.0.0-beta.2"
     json5: "npm:^2.2.3"
     semver: "npm:^6.3.1"
-  checksum: 10/2f1e224125179f423f4300d605a0c5a3ef315003281a63b1744405b2605ee2a2ffc5b1a8349aa4f262c72eca31c7e1802377ee04ad2b852a2c88f8ace6cac324
+  checksum: 10/0593295241fac9be567145ef16f3858d34fc91390a9438c6d47476be9823af4cc0488c851c59702dd46b968e9fd46d17ddf0105ea30195ca85f5a66b4044c519
   languageName: node
   linkType: hard
 
-"@babel/generator@npm:^7.28.5":
+"@babel/generator@npm:^7.28.3":
-  version: 7.28.5
+  version: 7.28.3
-  resolution: "@babel/generator@npm:7.28.5"
+  resolution: "@babel/generator@npm:7.28.3"
   dependencies:
-    "@babel/parser": "npm:^7.28.5"
+    "@babel/parser": "npm:^7.28.3"
-    "@babel/types": "npm:^7.28.5"
+    "@babel/types": "npm:^7.28.2"
     "@jridgewell/gen-mapping": "npm:^0.3.12"
     "@jridgewell/trace-mapping": "npm:^0.3.28"
     jsesc: "npm:^3.0.2"
-  checksum: 10/ae618f0a17a6d76c3983e1fd5d9c2f5fdc07703a119efdb813a7d9b8ad4be0a07d4c6f0d718440d2de01a68e321f64e2d63c77fc5d43ae47ae143746ef28ac1f
+  checksum: 10/d00d1e6b51059e47594aab7920b88ec6fcef6489954a9172235ab57ad2e91b39c95376963a6e2e4cc7e8b88fa4f931018f71f9ab32bbc9c0bc0de35a0231f26c
   languageName: node
   linkType: hard
 
@@ -282,10 +282,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-validator-identifier@npm:^7.25.9, @babel/helper-validator-identifier@npm:^7.27.1, @babel/helper-validator-identifier@npm:^7.28.5":
+"@babel/helper-validator-identifier@npm:^7.25.9, @babel/helper-validator-identifier@npm:^7.27.1":
-  version: 7.28.5
+  version: 7.27.1
-  resolution: "@babel/helper-validator-identifier@npm:7.28.5"
+  resolution: "@babel/helper-validator-identifier@npm:7.27.1"
-  checksum: 10/8e5d9b0133702cfacc7f368bf792f0f8ac0483794877c6dca5fcb73810ee138e27527701826fb58a40a004f3a5ec0a2f3c3dd5e326d262530b119918f3132ba7
+  checksum: 10/75041904d21bdc0cd3b07a8ac90b11d64cd3c881e89cb936fa80edd734bf23c35e6bd1312611e8574c4eab1f3af0f63e8a5894f4699e9cfdf70c06fcf4252320
   languageName: node
   linkType: hard
 
@@ -317,26 +317,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.23.5, @babel/parser@npm:^7.25.4, @babel/parser@npm:^7.27.2, @babel/parser@npm:^7.28.5":
+"@babel/parser@npm:^7.23.5, @babel/parser@npm:^7.25.4, @babel/parser@npm:^7.27.2, @babel/parser@npm:^7.28.3, @babel/parser@npm:^7.28.4":
-  version: 7.28.5
+  version: 7.28.4
-  resolution: "@babel/parser@npm:7.28.5"
+  resolution: "@babel/parser@npm:7.28.4"
   dependencies:
-    "@babel/types": "npm:^7.28.5"
+    "@babel/types": "npm:^7.28.4"
   bin:
     parser: ./bin/babel-parser.js
-  checksum: 10/8d9bfb437af6c97a7f6351840b9ac06b4529ba79d6d3def24d6c2996ab38ff7f1f9d301e868ca84a93a3050fadb3d09dbc5105b24634cd281671ac11eebe8df7
+  checksum: 10/f54c46213ef180b149f6a17ea765bf40acc1aebe2009f594e2a283aec69a190c6dda1fdf24c61a258dbeb903abb8ffb7a28f1a378f8ab5d333846ce7b7e23bf1
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.28.5":
+"@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.27.1":
-  version: 7.28.5
+  version: 7.27.1
-  resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.28.5"
+  resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.27.1"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.27.1"
-    "@babel/traverse": "npm:^7.28.5"
+    "@babel/traverse": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10/750de98b34e6d09b545ded6e635b43cbab02fe319622964175259b98f41b16052e5931c4fbd45bad8cd0a37ebdd381233edecec9ee395b8ec51f47f47d1dbcd4
+  checksum: 10/fe65257d5b82558bc6bc0f3a5a7a35b4166f71bed3747714dafb6360fadb15f036d568bc1fbeedae819165008c8feb646633ab91c0e3a95284963972f4fa9751
   languageName: node
   linkType: hard
 
@@ -478,14 +478,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-block-scoping@npm:^7.28.5":
+"@babel/plugin-transform-block-scoping@npm:^7.28.0":
-  version: 7.28.5
+  version: 7.28.4
-  resolution: "@babel/plugin-transform-block-scoping@npm:7.28.5"
+  resolution: "@babel/plugin-transform-block-scoping@npm:7.28.4"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/4b695360ede8472262111efb9d5c35b515767e1ead9e272c3e9799235e3f5feeb21d99a66bb23acbba9424465d13e7695a22a22a680c4aa558702ef8aad461d6
+  checksum: 10/0848c681b0229ebb98da8a1fab53a29a94f79c4b80e536cb00dcedc08ca29341a48ebdf34d846f4d738376aa8e36830fa7f444bae3e85c8761cab96e9ad72a0f
   languageName: node
   linkType: hard
 
@@ -513,7 +513,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-classes@npm:^7.28.4":
+"@babel/plugin-transform-classes@npm:^7.28.3":
   version: 7.28.4
   resolution: "@babel/plugin-transform-classes@npm:7.28.4"
   dependencies:
@@ -541,15 +541,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-destructuring@npm:^7.28.0, @babel/plugin-transform-destructuring@npm:^7.28.5":
+"@babel/plugin-transform-destructuring@npm:^7.28.0":
-  version: 7.28.5
+  version: 7.28.0
-  resolution: "@babel/plugin-transform-destructuring@npm:7.28.5"
+  resolution: "@babel/plugin-transform-destructuring@npm:7.28.0"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.27.1"
-    "@babel/traverse": "npm:^7.28.5"
+    "@babel/traverse": "npm:^7.28.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/9cc67d3377bc5d8063599f2eb4588f5f9a8ab3abc9b64a40c24501fb3c1f91f4d5cf281ea9f208fd6b2ef8d9d8b018dacf1bed9493334577c966cd32370a7036
+  checksum: 10/cddab2520ff32d18005670fc6646396a253d3811d1ccc49f6f858469f05985ee896c346a0cb34d1cf25155c9be76d1068ff878cf8e8459bd3fa27513ec5a6802
   languageName: node
   linkType: hard
 
@@ -611,14 +611,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-exponentiation-operator@npm:^7.28.5":
+"@babel/plugin-transform-exponentiation-operator@npm:^7.27.1":
-  version: 7.28.5
+  version: 7.27.1
-  resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.28.5"
+  resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.27.1"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/da9bb5acd35c9fba92b802641f9462b82334158a149c78a739a04576a1e62be41057a201a41c022dda263bb73ac1a26521bbc997c7fc067f54d487af297995f4
+  checksum: 10/dbbedd24724c2d590ef59d32cb1fef34e99daba41c5b621f9f4c4da23e15c2bb4b1e3d954c314645016391404cf00f1e4ddec8f1f7891438bcde9aaf16e16ee0
   languageName: node
   linkType: hard
 
@@ -680,14 +680,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-logical-assignment-operators@npm:^7.28.5":
+"@babel/plugin-transform-logical-assignment-operators@npm:^7.27.1":
-  version: 7.28.5
+  version: 7.27.1
-  resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.28.5"
+  resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.27.1"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/c76778f4b186cc4f0b7e3658d91c690678bdb2b9d032f189213016d6177f2564709b79b386523b022b7d52e52331fd91f280f7c7bf85d835e0758b4b0d371447
+  checksum: 10/2757955d81d65cc4701c17b83720745f6858f7a1d1d58117e379c204f47adbeb066b778596b6168bdbf4a22c229aab595d79a9abc261d0c6bfd62d4419466e73
   languageName: node
   linkType: hard
 
@@ -726,17 +726,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-systemjs@npm:^7.28.5":
+"@babel/plugin-transform-modules-systemjs@npm:^7.27.1":
-  version: 7.28.5
+  version: 7.27.1
-  resolution: "@babel/plugin-transform-modules-systemjs@npm:7.28.5"
+  resolution: "@babel/plugin-transform-modules-systemjs@npm:7.27.1"
   dependencies:
-    "@babel/helper-module-transforms": "npm:^7.28.3"
+    "@babel/helper-module-transforms": "npm:^7.27.1"
     "@babel/helper-plugin-utils": "npm:^7.27.1"
-    "@babel/helper-validator-identifier": "npm:^7.28.5"
+    "@babel/helper-validator-identifier": "npm:^7.27.1"
-    "@babel/traverse": "npm:^7.28.5"
+    "@babel/traverse": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/1b91b4848845eaf6e21663d97a2a6c896553b127deaf3c2e9a2a4f041249277d13ebf71fd42d0ecbc4385e9f76093eff592fe0da0dcf1401b3f38c1615d8c539
+  checksum: 10/06d7bf76ac4688a36ae8e8d2dde1c3b8bab4594362132b74a00d5a32e6716944d68911b9bc53df60e59f4f9c7f1796525503ce3e3eed42f842d7775ccdfd836e
   languageName: node
   linkType: hard
 
@@ -797,7 +797,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-object-rest-spread@npm:^7.28.4":
+"@babel/plugin-transform-object-rest-spread@npm:^7.28.0":
   version: 7.28.4
   resolution: "@babel/plugin-transform-object-rest-spread@npm:7.28.4"
   dependencies:
@@ -835,15 +835,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-optional-chaining@npm:^7.27.1, @babel/plugin-transform-optional-chaining@npm:^7.28.5":
+"@babel/plugin-transform-optional-chaining@npm:^7.27.1":
-  version: 7.28.5
+  version: 7.27.1
-  resolution: "@babel/plugin-transform-optional-chaining@npm:7.28.5"
+  resolution: "@babel/plugin-transform-optional-chaining@npm:7.27.1"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.27.1"
     "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/0bc900bff66d5acc13b057107eaeb6084b4cb0b124654d35b103f71f292d33dba5beac444ab4f92528583585b6e0cf34d64ce9cbb473b15d22375a4a6ed3cbac
+  checksum: 10/34b0f96400c259a2722740d17a001fe45f78d8ff052c40e29db2e79173be72c1cfe8d9681067e3f5da3989e4a557402df5c982c024c18257587a41e022f95640
   languageName: node
   linkType: hard
 
@@ -894,7 +894,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-regenerator@npm:^7.28.4":
+"@babel/plugin-transform-regenerator@npm:^7.28.3":
   version: 7.28.4
   resolution: "@babel/plugin-transform-regenerator@npm:7.28.4"
   dependencies:
@@ -928,9 +928,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-runtime@npm:7.28.5":
+"@babel/plugin-transform-runtime@npm:7.28.3":
-  version: 7.28.5
+  version: 7.28.3
-  resolution: "@babel/plugin-transform-runtime@npm:7.28.5"
+  resolution: "@babel/plugin-transform-runtime@npm:7.28.3"
   dependencies:
     "@babel/helper-module-imports": "npm:^7.27.1"
     "@babel/helper-plugin-utils": "npm:^7.27.1"
@@ -940,7 +940,7 @@ __metadata:
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/0d16c90d40dd34f1a981e742ad656ceef619b92d3662ec9ac8d7c8ba79f22bb425c3f9e097333659a4938f03868a53077b1a3aadb7f37504157a0c7af64ec2be
+  checksum: 10/5e8d45f3d243ff15cf4ebe59c2bf52e33bb5864092365dd332330256c96eaa7a16e3cecb1c9e826d5ced7e3cc0b0925c2ca29df674d97252c8eb90ecddab1d78
   languageName: node
   linkType: hard
 
@@ -1047,15 +1047,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-env@npm:7.28.5, @babel/preset-env@npm:^7.11.0":
+"@babel/preset-env@npm:7.28.3, @babel/preset-env@npm:^7.11.0":
-  version: 7.28.5
+  version: 7.28.3
-  resolution: "@babel/preset-env@npm:7.28.5"
+  resolution: "@babel/preset-env@npm:7.28.3"
   dependencies:
-    "@babel/compat-data": "npm:^7.28.5"
+    "@babel/compat-data": "npm:^7.28.0"
     "@babel/helper-compilation-targets": "npm:^7.27.2"
     "@babel/helper-plugin-utils": "npm:^7.27.1"
     "@babel/helper-validator-option": "npm:^7.27.1"
-    "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "npm:^7.28.5"
+    "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "npm:^7.27.1"
     "@babel/plugin-bugfix-safari-class-field-initializer-scope": "npm:^7.27.1"
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "npm:^7.27.1"
     "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "npm:^7.27.1"
@@ -1068,42 +1068,42 @@ __metadata:
     "@babel/plugin-transform-async-generator-functions": "npm:^7.28.0"
     "@babel/plugin-transform-async-to-generator": "npm:^7.27.1"
     "@babel/plugin-transform-block-scoped-functions": "npm:^7.27.1"
-    "@babel/plugin-transform-block-scoping": "npm:^7.28.5"
+    "@babel/plugin-transform-block-scoping": "npm:^7.28.0"
     "@babel/plugin-transform-class-properties": "npm:^7.27.1"
     "@babel/plugin-transform-class-static-block": "npm:^7.28.3"
-    "@babel/plugin-transform-classes": "npm:^7.28.4"
+    "@babel/plugin-transform-classes": "npm:^7.28.3"
     "@babel/plugin-transform-computed-properties": "npm:^7.27.1"
-    "@babel/plugin-transform-destructuring": "npm:^7.28.5"
+    "@babel/plugin-transform-destructuring": "npm:^7.28.0"
     "@babel/plugin-transform-dotall-regex": "npm:^7.27.1"
     "@babel/plugin-transform-duplicate-keys": "npm:^7.27.1"
     "@babel/plugin-transform-duplicate-named-capturing-groups-regex": "npm:^7.27.1"
     "@babel/plugin-transform-dynamic-import": "npm:^7.27.1"
     "@babel/plugin-transform-explicit-resource-management": "npm:^7.28.0"
-    "@babel/plugin-transform-exponentiation-operator": "npm:^7.28.5"
+    "@babel/plugin-transform-exponentiation-operator": "npm:^7.27.1"
     "@babel/plugin-transform-export-namespace-from": "npm:^7.27.1"
     "@babel/plugin-transform-for-of": "npm:^7.27.1"
     "@babel/plugin-transform-function-name": "npm:^7.27.1"
     "@babel/plugin-transform-json-strings": "npm:^7.27.1"
     "@babel/plugin-transform-literals": "npm:^7.27.1"
-    "@babel/plugin-transform-logical-assignment-operators": "npm:^7.28.5"
+    "@babel/plugin-transform-logical-assignment-operators": "npm:^7.27.1"
     "@babel/plugin-transform-member-expression-literals": "npm:^7.27.1"
     "@babel/plugin-transform-modules-amd": "npm:^7.27.1"
     "@babel/plugin-transform-modules-commonjs": "npm:^7.27.1"
-    "@babel/plugin-transform-modules-systemjs": "npm:^7.28.5"
+    "@babel/plugin-transform-modules-systemjs": "npm:^7.27.1"
     "@babel/plugin-transform-modules-umd": "npm:^7.27.1"
     "@babel/plugin-transform-named-capturing-groups-regex": "npm:^7.27.1"
     "@babel/plugin-transform-new-target": "npm:^7.27.1"
     "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.27.1"
     "@babel/plugin-transform-numeric-separator": "npm:^7.27.1"
-    "@babel/plugin-transform-object-rest-spread": "npm:^7.28.4"
+    "@babel/plugin-transform-object-rest-spread": "npm:^7.28.0"
     "@babel/plugin-transform-object-super": "npm:^7.27.1"
     "@babel/plugin-transform-optional-catch-binding": "npm:^7.27.1"
-    "@babel/plugin-transform-optional-chaining": "npm:^7.28.5"
+    "@babel/plugin-transform-optional-chaining": "npm:^7.27.1"
     "@babel/plugin-transform-parameters": "npm:^7.27.7"
     "@babel/plugin-transform-private-methods": "npm:^7.27.1"
     "@babel/plugin-transform-private-property-in-object": "npm:^7.27.1"
     "@babel/plugin-transform-property-literals": "npm:^7.27.1"
-    "@babel/plugin-transform-regenerator": "npm:^7.28.4"
+    "@babel/plugin-transform-regenerator": "npm:^7.28.3"
     "@babel/plugin-transform-regexp-modifiers": "npm:^7.27.1"
     "@babel/plugin-transform-reserved-words": "npm:^7.27.1"
     "@babel/plugin-transform-shorthand-properties": "npm:^7.27.1"
@@ -1123,7 +1123,7 @@ __metadata:
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/e9a5136a7e34553cc70dd6594716144678a2e9ecc971caf6885c380c38fcbed8b387f3af418c9aa4b2d2765964bb4e8a2e14b709c2f165eec6ed13bda32587ea
+  checksum: 10/b09991276a5ea4f2f95077bb451420f683e19d59405bc1fbbb392bb3571592edc922daac4eaa50b2b407c0b24c4e1e9df0f76738c3c573dac4e6bcf028daa8c5
   languageName: node
   linkType: hard
 
@@ -1158,28 +1158,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.27.1, @babel/traverse@npm:^7.28.0, @babel/traverse@npm:^7.28.3, @babel/traverse@npm:^7.28.4, @babel/traverse@npm:^7.28.5":
+"@babel/traverse@npm:^7.27.1, @babel/traverse@npm:^7.28.0, @babel/traverse@npm:^7.28.3, @babel/traverse@npm:^7.28.4":
-  version: 7.28.5
+  version: 7.28.4
-  resolution: "@babel/traverse@npm:7.28.5"
+  resolution: "@babel/traverse@npm:7.28.4"
   dependencies:
     "@babel/code-frame": "npm:^7.27.1"
-    "@babel/generator": "npm:^7.28.5"
+    "@babel/generator": "npm:^7.28.3"
     "@babel/helper-globals": "npm:^7.28.0"
-    "@babel/parser": "npm:^7.28.5"
+    "@babel/parser": "npm:^7.28.4"
     "@babel/template": "npm:^7.27.2"
-    "@babel/types": "npm:^7.28.5"
+    "@babel/types": "npm:^7.28.4"
     debug: "npm:^4.3.1"
-  checksum: 10/1fce426f5ea494913c40f33298ce219708e703f71cac7ac045ebde64b5a7b17b9275dfa4e05fb92c3f123136913dff62c8113172f4a5de66dab566123dbe7437
+  checksum: 10/c3099364b7b1c36bcd111099195d4abeef16499e5defb1e56766b754e8b768c252e856ed9041665158aa1b31215fc6682632756803c8fa53405381ec08c4752b
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.25.4, @babel/types@npm:^7.27.1, @babel/types@npm:^7.27.3, @babel/types@npm:^7.28.2, @babel/types@npm:^7.28.4, @babel/types@npm:^7.28.5, @babel/types@npm:^7.4.4":
+"@babel/types@npm:^7.25.4, @babel/types@npm:^7.27.1, @babel/types@npm:^7.27.3, @babel/types@npm:^7.28.2, @babel/types@npm:^7.28.4, @babel/types@npm:^7.4.4":
-  version: 7.28.5
+  version: 7.28.4
-  resolution: "@babel/types@npm:7.28.5"
+  resolution: "@babel/types@npm:7.28.4"
   dependencies:
     "@babel/helper-string-parser": "npm:^7.27.1"
-    "@babel/helper-validator-identifier": "npm:^7.28.5"
+    "@babel/helper-validator-identifier": "npm:^7.27.1"
-  checksum: 10/4256bb9fb2298c4f9b320bde56e625b7091ea8d2433d98dcf524d4086150da0b6555aabd7d0725162670614a9ac5bf036d1134ca13dedc9707f988670f1362d7
+  checksum: 10/db50bf257aafa5d845ad16dae0587f57d596e4be4cbb233ea539976a4c461f9fbcc0bf3d37adae3f8ce5dcb4001462aa608f3558161258b585f6ce6ce21a2e45
   languageName: node
   linkType: hard
 
@@ -4821,12 +4821,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/qrcode@npm:1.5.6":
+"@types/qrcode@npm:1.5.5":
-  version: 1.5.6
+  version: 1.5.5
-  resolution: "@types/qrcode@npm:1.5.6"
+  resolution: "@types/qrcode@npm:1.5.5"
   dependencies:
     "@types/node": "npm:*"
-  checksum: 10/61aa00ba56a874a71a82006a55715d2ff2dc65689b582314c6f955c72c830938c93d0ee1e3376d370a1dcd6bac61b05afe75ad8d1f4a47ebcdd6344d39f70847
+  checksum: 10/a25686339bd2718e6a93943e7807ed68dd9c74a9da28aa77212086ee0ce9a173c0a232af9e3f6835acd09938dfc8a0f98c6bccf1a6c6a905fb003ab07f9e08f2
   languageName: node
   linkType: hard
 
@@ -4897,10 +4897,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/sortablejs@npm:1.15.9":
+"@types/sortablejs@npm:1.15.8":
-  version: 1.15.9
+  version: 1.15.8
-  resolution: "@types/sortablejs@npm:1.15.9"
+  resolution: "@types/sortablejs@npm:1.15.8"
-  checksum: 10/9e0d6ef1cdcd30acab7af74cab5cbf56685e2de47c6f254357f7dde2626e9b49b8668c43f92761202cf4e10f2e3fd3d7baa6a83a39c3d342fc45ce66e87bd5aa
+  checksum: 10/aea58b08cf45f5e9633707a8df0df1212595c731bbdfd29805487138fdd0d8c51fa5c741999738a645c1e801d43a92ba0d3fb5b45625b52e247c56588aef6c55
   languageName: node
   linkType: hard
 
@@ -5376,12 +5376,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitest/coverage-v8@npm:4.0.3":
+"@vitest/coverage-v8@npm:4.0.1":
-  version: 4.0.3
+  version: 4.0.1
-  resolution: "@vitest/coverage-v8@npm:4.0.3"
+  resolution: "@vitest/coverage-v8@npm:4.0.1"
   dependencies:
     "@bcoe/v8-coverage": "npm:^1.0.2"
-    "@vitest/utils": "npm:4.0.3"
+    "@vitest/utils": "npm:4.0.1"
     ast-v8-to-istanbul: "npm:^0.3.5"
     debug: "npm:^4.4.3"
     istanbul-lib-coverage: "npm:^3.2.2"
@@ -5392,34 +5392,34 @@ __metadata:
     std-env: "npm:^3.9.0"
     tinyrainbow: "npm:^3.0.3"
   peerDependencies:
-    "@vitest/browser": 4.0.3
+    "@vitest/browser": 4.0.1
-    vitest: 4.0.3
+    vitest: 4.0.1
   peerDependenciesMeta:
     "@vitest/browser":
       optional: true
-  checksum: 10/8051dc457f74f9dbd912be9805fc3c6c1a965e3c86d88a6f4b2d4b7e38511dcce689447adb92235c33bec8fddcd0ede8e81f6bdf33eedc9ff00070b28a474093
+  checksum: 10/6052deb51ba5be8bb1ad471f8678e7763823abd143cb8178503b5fefb260dd29b537c1ca44f6dfcb387b46e1e8c9613b4011d6604b010e29d5f229431244833a
   languageName: node
   linkType: hard
 
-"@vitest/expect@npm:4.0.3":
+"@vitest/expect@npm:4.0.1":
-  version: 4.0.3
+  version: 4.0.1
-  resolution: "@vitest/expect@npm:4.0.3"
+  resolution: "@vitest/expect@npm:4.0.1"
   dependencies:
     "@standard-schema/spec": "npm:^1.0.0"
     "@types/chai": "npm:^5.2.2"
-    "@vitest/spy": "npm:4.0.3"
+    "@vitest/spy": "npm:4.0.1"
-    "@vitest/utils": "npm:4.0.3"
+    "@vitest/utils": "npm:4.0.1"
     chai: "npm:^6.0.1"
     tinyrainbow: "npm:^3.0.3"
-  checksum: 10/663936d8f3abd91cb9725196ec542d109d7c64ddcdb6a483d89c9d67aa78a8ddd4468348c54b69f9c801fc3add9a8ae35dd0491c9f2bd19ec17b9b7a9ebf0d82
+  checksum: 10/32b11776b15c044399c6d14f75efe3773d09f9af2f5f4df1a8c32cef6d4929ccb663183f800b79404a2b36b282ae54066641daf7fa84effb51dc0e6e7d922818
   languageName: node
   linkType: hard
 
-"@vitest/mocker@npm:4.0.3":
+"@vitest/mocker@npm:4.0.1":
-  version: 4.0.3
+  version: 4.0.1
-  resolution: "@vitest/mocker@npm:4.0.3"
+  resolution: "@vitest/mocker@npm:4.0.1"
   dependencies:
-    "@vitest/spy": "npm:4.0.3"
+    "@vitest/spy": "npm:4.0.1"
     estree-walker: "npm:^3.0.3"
     magic-string: "npm:^0.30.19"
   peerDependencies:
@@ -5430,54 +5430,54 @@ __metadata:
       optional: true
     vite:
       optional: true
-  checksum: 10/933cab25563f68335a9871a6deba8f886f6be155c4a2146ee2b3b625578a0b4e068a4a26cf1a8d4ba3b5eb34771276f0365e51320fd06ad3f3f19163c5521d77
+  checksum: 10/519e3f66f9823ba024926fa818308fae091b0974e51e4b20026fa7b853dd8f6db9b50f78846f59cdca8141913425946e1dbf3ffc78ede5e021365a809ea49093
   languageName: node
   linkType: hard
 
-"@vitest/pretty-format@npm:4.0.3":
+"@vitest/pretty-format@npm:4.0.1":
-  version: 4.0.3
+  version: 4.0.1
-  resolution: "@vitest/pretty-format@npm:4.0.3"
+  resolution: "@vitest/pretty-format@npm:4.0.1"
   dependencies:
     tinyrainbow: "npm:^3.0.3"
-  checksum: 10/1b1197e53e5bcf9f77c842005ff11068f754b87286c6a7669b78c08a05bdbaa5cf4c7326c3b13347b02341b084bf97992c3fe89ea98fb77019e28fd96bc4c5b4
+  checksum: 10/f2813708b46a36053106b22801764e3f7173e677228531677eb20dfdf43ce340b282a9e0ed388b9ac5a1a3289b0f91b4b8a8a37723be39deddbffc74a467a374
   languageName: node
   linkType: hard
 
-"@vitest/runner@npm:4.0.3":
+"@vitest/runner@npm:4.0.1":
-  version: 4.0.3
+  version: 4.0.1
-  resolution: "@vitest/runner@npm:4.0.3"
+  resolution: "@vitest/runner@npm:4.0.1"
   dependencies:
-    "@vitest/utils": "npm:4.0.3"
+    "@vitest/utils": "npm:4.0.1"
     pathe: "npm:^2.0.3"
-  checksum: 10/a028898045cedac1939cc1adeff8fe36cbba2714d08e8524c8028b6fef7d617440bf0dfd72f1e264e8bff876979c49923bf268cb5920305a0ca9562a8318a80c
+  checksum: 10/a3a91897a283a3a1dd39bfb81ef356eb3a6f6b5d712e6da9e49d31bee46092884aaf8832a135f7f13d6350dc4238a38ddfea18da1d628efda73132fc4d01d6cd
   languageName: node
   linkType: hard
 
-"@vitest/snapshot@npm:4.0.3":
+"@vitest/snapshot@npm:4.0.1":
-  version: 4.0.3
+  version: 4.0.1
-  resolution: "@vitest/snapshot@npm:4.0.3"
+  resolution: "@vitest/snapshot@npm:4.0.1"
   dependencies:
-    "@vitest/pretty-format": "npm:4.0.3"
+    "@vitest/pretty-format": "npm:4.0.1"
     magic-string: "npm:^0.30.19"
     pathe: "npm:^2.0.3"
-  checksum: 10/38d0707ad66b33987c4066ee713f22d4535712ca016cece007c84736fa543d3ad3a314e759632b63e369e6a5454b03b142f66f5d661ac81ce7c4f1d6f6d325f4
+  checksum: 10/f90db2bbd0b20d53cded64464809ea9abdc6bb7abe2e1d12bf81e13895b14b15b9a052d964f0ba4b7312cc8af25c8e943a70dcb3ad9b5e8b27d88adacdde15d2
   languageName: node
   linkType: hard
 
-"@vitest/spy@npm:4.0.3":
+"@vitest/spy@npm:4.0.1":
-  version: 4.0.3
+  version: 4.0.1
-  resolution: "@vitest/spy@npm:4.0.3"
+  resolution: "@vitest/spy@npm:4.0.1"
-  checksum: 10/4fc8e3aae425fdbbe96126291079f67f1e6be9545ffbaab7a31de8d6e6825b115eb3fafbf24167eab91dbbb4ed6fcd120c387116f181de1e3369e8d5fdd75f17
+  checksum: 10/9efda95edb29b2c06859af98ef1b1497cbf7ee43fd95649a835139e61e77a3f6bdad9dec48b53b954a311f824656978fb2eafb4dd8b416b354e15ad430a60772
   languageName: node
   linkType: hard
 
-"@vitest/utils@npm:4.0.3":
+"@vitest/utils@npm:4.0.1":
-  version: 4.0.3
+  version: 4.0.1
-  resolution: "@vitest/utils@npm:4.0.3"
+  resolution: "@vitest/utils@npm:4.0.1"
   dependencies:
-    "@vitest/pretty-format": "npm:4.0.3"
+    "@vitest/pretty-format": "npm:4.0.1"
     tinyrainbow: "npm:^3.0.3"
-  checksum: 10/d4ddb293e908d43b954c5e41f351a61f719e30e9ea058e47af5b18389d74cb073ea1638ab28dbbd5b365ed31a21577bb090b8a3594292c59df18798fd292f002
+  checksum: 10/21d7460135327abcc827de640cfa1f049321ad28f59b69538251cf9c50f7731734ded5e55fed36dd95db840c6a4275308b3e2f08c3cbd02289b0268abf4c441b
   languageName: node
   linkType: hard
 
@@ -9203,10 +9203,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "home-assistant-frontend@workspace:."
   dependencies:
-    "@babel/core": "npm:7.28.5"
+    "@babel/core": "npm:7.28.4"
     "@babel/helper-define-polyfill-provider": "npm:0.6.5"
-    "@babel/plugin-transform-runtime": "npm:7.28.5"
+    "@babel/plugin-transform-runtime": "npm:7.28.3"
-    "@babel/preset-env": "npm:7.28.5"
+    "@babel/preset-env": "npm:7.28.3"
     "@babel/runtime": "npm:7.28.4"
     "@braintree/sanitize-url": "npm:7.1.1"
     "@bundle-stats/plugin-webpack-filter": "npm:4.21.5"
@@ -9291,15 +9291,15 @@ __metadata:
     "@types/lodash.merge": "npm:4.6.9"
     "@types/luxon": "npm:3.7.1"
     "@types/mocha": "npm:10.0.10"
-    "@types/qrcode": "npm:1.5.6"
+    "@types/qrcode": "npm:1.5.5"
-    "@types/sortablejs": "npm:1.15.9"
+    "@types/sortablejs": "npm:1.15.8"
     "@types/tar": "npm:6.1.13"
     "@types/ua-parser-js": "npm:0.7.39"
     "@types/webspeechapi": "npm:0.0.29"
     "@vaadin/combo-box": "npm:24.9.2"
     "@vaadin/vaadin-themable-mixin": "npm:24.9.2"
     "@vibrant/color": "npm:4.0.0"
-    "@vitest/coverage-v8": "npm:4.0.3"
+    "@vitest/coverage-v8": "npm:4.0.1"
     "@vue/web-component-wrapper": "npm:1.3.0"
     "@webcomponents/scoped-custom-element-registry": "npm:0.0.10"
     "@webcomponents/webcomponentsjs": "npm:2.8.0"
@@ -9384,7 +9384,7 @@ __metadata:
     typescript-eslint: "npm:8.46.2"
     ua-parser-js: "npm:2.0.6"
     vite-tsconfig-paths: "npm:5.1.4"
-    vitest: "npm:4.0.3"
+    vitest: "npm:4.0.1"
     vue: "npm:2.7.16"
     vue2-daterange-picker: "npm:0.6.8"
     webpack-stats-plugin: "npm:1.1.3"
@@ -14766,17 +14766,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vitest@npm:4.0.3":
+"vitest@npm:4.0.1":
-  version: 4.0.3
+  version: 4.0.1
-  resolution: "vitest@npm:4.0.3"
+  resolution: "vitest@npm:4.0.1"
   dependencies:
-    "@vitest/expect": "npm:4.0.3"
+    "@vitest/expect": "npm:4.0.1"
-    "@vitest/mocker": "npm:4.0.3"
+    "@vitest/mocker": "npm:4.0.1"
-    "@vitest/pretty-format": "npm:4.0.3"
+    "@vitest/pretty-format": "npm:4.0.1"
-    "@vitest/runner": "npm:4.0.3"
+    "@vitest/runner": "npm:4.0.1"
-    "@vitest/snapshot": "npm:4.0.3"
+    "@vitest/snapshot": "npm:4.0.1"
-    "@vitest/spy": "npm:4.0.3"
+    "@vitest/spy": "npm:4.0.1"
-    "@vitest/utils": "npm:4.0.3"
+    "@vitest/utils": "npm:4.0.1"
     debug: "npm:^4.4.3"
     es-module-lexer: "npm:^1.7.0"
     expect-type: "npm:^1.2.2"
@@ -14794,10 +14794,10 @@ __metadata:
     "@edge-runtime/vm": "*"
     "@types/debug": ^4.1.12
     "@types/node": ^20.0.0 || ^22.0.0 || >=24.0.0
-    "@vitest/browser-playwright": 4.0.3
+    "@vitest/browser-playwright": 4.0.1
-    "@vitest/browser-preview": 4.0.3
+    "@vitest/browser-preview": 4.0.1
-    "@vitest/browser-webdriverio": 4.0.3
+    "@vitest/browser-webdriverio": 4.0.1
-    "@vitest/ui": 4.0.3
+    "@vitest/ui": 4.0.1
     happy-dom: "*"
     jsdom: "*"
   peerDependenciesMeta:
@@ -14821,7 +14821,7 @@ __metadata:
       optional: true
   bin:
     vitest: vitest.mjs
-  checksum: 10/535ef75a39d5d3233eeb1050a09cd9b3c9353daad610a442aec16ef657887c16d4a6264d37a4181d487cd07cbb4b2e763ce74b1df037b2850a184983545f3db6
+  checksum: 10/5f9aecae9c3d8446b581d26a1dc228e7bbf8af0b4fa760ed32ad9ebe7220b815ba6f04cc4e3177e0ead5059a8fecac94455e23852cf601f75ae952fc444f7e1f
   languageName: node
   linkType: hard