Cache resolved media source URLs for view backgrounds

* Animate the selected toggle circle in ha-icon-button-group

* Round the light color wheels to fit the selected ring

* Use lit motion

.github/workflows/nightly.yaml

@@ -38,6 +38,11 @@ jobs:
         run: ./script/translations_download
         env:
           LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
+          # The wheel only builds the app (build-app), which does not merge
+          # backend translations. Skipping the whole-project backend export (as
+          # the release does) keeps this off the build's critical path; the full
+          # translations artifact is produced in parallel by the job below.
+          SKIP_BACKEND_TRANSLATIONS: "1"
 
       - name: Bump version
         run: script/version_bump.js nightly
@@ -74,9 +79,6 @@ jobs:
           path: .compress-cache
           key: compress-cache-${{ runner.os }}-${{ github.run_id }}-${{ github.run_attempt }}
 
-      - name: Archive translations
-        run: tar -czvf translations.tar.gz translations
-
       - name: Upload build artifacts
         uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:
@@ -84,6 +86,31 @@ jobs:
           path: dist/home_assistant_frontend*.whl
           if-no-files-found: error
 
+  # The full translations (including the slow backend/core export) are only
+  # needed for the uploaded artifact, not the wheel, so they are downloaded in
+  # parallel here instead of blocking the build above.
+  translations:
+    name: Translations
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        with:
+          persist-credentials: false
+
+      - name: Setup Node and install
+        uses: ./.github/actions/setup
+        with:
+          immutable: false
+
+      - name: Download translations
+        run: ./script/translations_download
+        env:
+          LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
+
+      - name: Archive translations
+        run: tar -czvf translations.tar.gz translations
+
       - name: Upload translations
         uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:

gallery/src/pages/components/ha-button.markdown

@@ -37,6 +37,16 @@ title: Button
 <ha-button size="s"> small </ha-button>
 ```
 
+### Icons in the `xs` size
+
+Avoid icons in `xs` buttons. At 24px the label carries the meaning on its own, and a
+16px glyph next to it adds visual noise without adding information.
+
+Use an icon only when the button needs to be recognized at a glance in a dense layout,
+and only when the glyph is a common one users can identify from its silhouette alone,
+such as close, add, or settings. A detailed or unfamiliar glyph is unreadable at this
+size and should be replaced by the label alone.
+
 ### API
 
 This component is based on the webawesome button component.

gallery/src/pages/components/ha-button.ts

@@ -56,6 +56,19 @@ export class DemoHaButton extends LitElement {
                         `
                       )}
                     </div>
+                    <div>
+                      ${appearances.map(
+                        (appearance) => html`
+                          <ha-button
+                            .appearance=${appearance}
+                            .variant=${variant}
+                            size="xs"
+                          >
+                            ${titleCase(`${variant} ${appearance}`)}
+                          </ha-button>
+                        `
+                      )}
+                    </div>
                     <div>
                       ${appearances.map(
                         (appearance) => html`

src/components/ha-button.ts

@@ -65,6 +65,21 @@ export class HaButton extends Button {
           box-shadow: var(--ha-button-box-shadow);
         }
 
+        :host([size="xs"]) .button {
+          --wa-form-control-height: var(
+            --ha-button-height,
+            var(--button-height, 24px)
+          );
+          font-size: var(--ha-font-size-m);
+          --wa-form-control-padding-inline: var(--ha-space-2);
+        }
+
+        /* A default 24px icon would fill the whole xs button. */
+        :host([size="xs"]) slot[name="start"]::slotted(*),
+        :host([size="xs"]) slot[name="end"]::slotted(*) {
+          --mdc-icon-size: 16px;
+        }
+
         :host([size="s"]) .button {
           --wa-form-control-height: var(
             --ha-button-height,

src/components/ha-icon-button-group.ts

@@ -1,11 +1,89 @@
-import type { TemplateResult } from "lit";
+import { animate } from "@lit-labs/motion";
 import { css, html, LitElement } from "lit";
-import { customElement } from "lit/decorators";
+import { customElement, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { styleMap } from "lit/directives/style-map";
+
+const THUMB_SIZE = 40;
 
 @customElement("ha-icon-button-group")
 export class HaIconButtonGroup extends LitElement {
-  protected render(): TemplateResult {
-    return html`<slot></slot>`;
+  @state() private _thumbX = 0;
+
+  @state() private _thumbVisible = false;
+
+  @state() private _thumbBorderOnly = false;
+
+  // When the thumb appears, only fade it in at its new position instead of
+  // also sliding it from wherever it was last visible.
+  private _thumbAppearing = false;
+
+  private _observer = new MutationObserver(() => this._updateThumb());
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._observer.disconnect();
+  }
+
+  protected render() {
+    return html`
+      <div
+        class="thumb ${classMap({
+          visible: this._thumbVisible,
+          "border-only": this._thumbBorderOnly,
+        })}"
+        style=${styleMap({ left: `${this._thumbX}px` })}
+        ${animate(() => ({
+          properties: this._thumbAppearing ? ["opacity"] : ["left", "opacity"],
+          keyframeOptions: {
+            duration: this._animationDuration(),
+            easing: "ease-in-out",
+          },
+          skipInitial: true,
+        }))}
+      ></div>
+      <slot @slotchange=${this._handleSlotchange}></slot>
+    `;
+  }
+
+  protected updated() {
+    this._thumbAppearing = false;
+  }
+
+  private _animationDuration(): number {
+    return (
+      parseFloat(
+        getComputedStyle(this).getPropertyValue("--ha-animation-duration-fast")
+      ) || 150
+    );
+  }
+
+  private _handleSlotchange(ev: Event) {
+    this._observer.disconnect();
+    const slot = ev.target as HTMLSlotElement;
+    for (const el of slot.assignedElements()) {
+      this._observer.observe(el, {
+        attributes: true,
+        attributeFilter: ["selected", "disabled"],
+      });
+    }
+    // Positions are only valid once the slotted buttons are laid out.
+    requestAnimationFrame(() => this._updateThumb());
+  }
+
+  private _updateThumb() {
+    const selected = this.querySelector<HTMLElement>(
+      "ha-icon-button-toggle[selected]:not([disabled])"
+    );
+    if (!selected) {
+      this._thumbVisible = false;
+      return;
+    }
+    this._thumbAppearing = !this._thumbVisible;
+    this._thumbBorderOnly = selected.hasAttribute("border-only");
+    this._thumbX =
+      selected.offsetLeft + (selected.offsetWidth - THUMB_SIZE) / 2;
+    this._thumbVisible = true;
   }
 
   static styles = css`
@@ -21,6 +99,32 @@ export class HaIconButtonGroup extends LitElement {
       width: auto;
       padding: 0;
     }
+    /* The selected toggle's circle is drawn here so it can slide between
+       toggles; their own circles are suppressed below. */
+    .thumb {
+      position: absolute;
+      top: calc(50% - 20px);
+      opacity: 0;
+      width: 40px;
+      height: 40px;
+      border-radius: var(--ha-border-radius-circle);
+      background-color: var(
+        --ha-icon-button-group-thumb-color,
+        var(--primary-text-color)
+      );
+      box-sizing: border-box;
+    }
+    .thumb.visible {
+      opacity: 1;
+    }
+    .thumb.border-only {
+      background-color: transparent;
+      border: 2px solid
+        var(--ha-icon-button-group-thumb-color, var(--primary-text-color));
+    }
+    ::slotted(ha-icon-button-toggle) {
+      --ha-icon-button-toggle-thumb-opacity: 0;
+    }
     ::slotted(.separator) {
       background-color: rgba(var(--rgb-primary-text-color), 0.15);
       width: 1px;

src/components/ha-icon-button-toggle.ts

@@ -44,8 +44,10 @@ export class HaIconButtonToggle extends HaIconButton {
         color: var(--primary-background-color);
         background-color: unset;
       }
+      /* ha-icon-button-group zeroes this so its sliding thumb draws the
+         circle instead. */
       :host([selected]:not([disabled])) ha-button::part(base)::before {
-        opacity: 1;
+        opacity: var(--ha-icon-button-toggle-thumb-opacity, 1);
       }
       ::slotted(*) {
         display: block;

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

@@ -472,10 +472,9 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
     if (disabled) {
       return;
     }
-    const newValue = value?.trim();
     const newTab = ev.ctrlKey || ev.metaKey;
 
-    this._fireSelectedEvents(newValue, index, newTab);
+    this._fireSelectedEvents(value, index, newTab);
   };
 
   private _fireSelectedEvents(value: string, index: number, newTab = false) {

src/components/target-picker/ha-target-picker-item-row.ts

@@ -52,7 +52,6 @@ import {
   type TargetType,
 } from "../../data/target";
 import { showMoreInfoDialog } from "../../dialogs/more-info/show-ha-more-info-dialog";
-import { buttonLinkStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { brandsUrl } from "../../util/brands-url";
 import type { HaDevicePickerDeviceFilterFunc } from "../device/ha-device-picker";
@@ -221,30 +220,28 @@ export class HaTargetPickerItemRow extends LitElement {
           ? html`
               <div slot="end" class="summary">
                 ${
-                  showEntities &&
-                  !this.expand &&
-                  entries?.referenced_entities.length
-                    ? html`<button
-                        class="main link"
+                  this.expand || !entries.referenced_entities.length
+                    ? html`<span class="main">
+                        ${this.hass.localize(
+                          "ui.components.target-picker.entities_count",
+                          {
+                            count: entries.referenced_entities.length,
+                          }
+                        )}
+                      </span>`
+                    : html`<ha-button
+                        appearance="filled"
+                        variant="brand"
+                        size="xs"
                         @click=${this._openDetails}
                       >
                         ${this.hass.localize(
                           "ui.components.target-picker.entities_count",
                           {
-                            count: entries?.referenced_entities.length,
+                            count: entries.referenced_entities.length,
                           }
                         )}
-                      </button>`
-                    : showEntities
-                      ? html`<span class="main">
-                          ${this.hass.localize(
-                            "ui.components.target-picker.entities_count",
-                            {
-                              count: entries?.referenced_entities.length,
-                            }
-                          )}
-                        </span>`
-                      : nothing
+                      </ha-button>`
                 }
               </div>
             `
@@ -812,7 +809,6 @@ export class HaTargetPickerItemRow extends LitElement {
   };
 
   static styles = [
-    buttonLinkStyle,
     css`
       :host {
         --md-list-item-top-space: 0;
@@ -883,16 +879,6 @@ export class HaTargetPickerItemRow extends LitElement {
         color: var(--secondary-text-color);
       }
 
-      button.link {
-        text-decoration: none;
-        color: var(--primary-color);
-      }
-
-      button.link:hover,
-      button.link:focus {
-        text-decoration: underline;
-      }
-
       .state {
         width: fit-content;
         font-size: var(--ha-font-size-s);

src/data/automation_i18n.ts

@@ -94,6 +94,29 @@ const localizeTimeString = (
   }
 };
 
+// Seconds since midnight for a literal `HH:MM(:SS)` time, undefined for
+// anything else (entity ids contain a dot, and malformed input is ignored).
+const literalTimeToSeconds = (value: unknown): number | undefined => {
+  if (typeof value !== "string" || value.includes(".")) {
+    return undefined;
+  }
+  const chunks = value.split(":");
+  if (chunks.length < 2 || chunks.length > 3) {
+    return undefined;
+  }
+  const hours = Number(chunks[0]);
+  const minutes = Number(chunks[1]);
+  const seconds = chunks.length > 2 ? Number(chunks[2]) : 0;
+  if (
+    !Number.isFinite(hours) ||
+    !Number.isFinite(minutes) ||
+    !Number.isFinite(seconds)
+  ) {
+    return undefined;
+  }
+  return hours * 3600 + minutes * 60 + seconds;
+};
+
 const formatNumericLimitValue = (
   hass: HomeAssistant,
   value?: number | string
@@ -1232,12 +1255,16 @@ const describeLegacyCondition = (
 
       let hasTime = "";
       if (after !== undefined && before !== undefined) {
-        if (
-          typeof condition.after === "string" &&
-          !condition.after.includes(".") &&
-          typeof condition.before === "string" &&
-          !condition.before.includes(".") &&
-          condition.after > condition.before
+        const afterSeconds = literalTimeToSeconds(condition.after);
+        const beforeSeconds = literalTimeToSeconds(condition.before);
+        if (beforeSeconds === 0) {
+          // A window ending at midnight runs to the end of the day, so the
+          // "before" boundary adds nothing to the summary.
+          hasTime = "after";
+        } else if (
+          afterSeconds !== undefined &&
+          beforeSeconds !== undefined &&
+          afterSeconds > beforeSeconds
         ) {
           hasTime = "after_before_or";
         } else {

src/data/media_source.ts

@@ -1,3 +1,4 @@
+import { timeCacheEntityPromiseFunc } from "../common/util/time-cache-entity-promise-func";
 import type { HomeAssistant } from "../types";
 import type { MediaPlayerItem, SearchMediaResult } from "./media-player";
 
@@ -7,7 +8,7 @@ export interface ResolvedMediaSource {
 }
 
 export const resolveMediaSource = (
-  hass: HomeAssistant,
+  hass: Pick<HomeAssistant, "callWS">,
   media_content_id: string
 ) =>
   hass.callWS<ResolvedMediaSource>({
@@ -15,6 +16,23 @@ export const resolveMediaSource = (
     media_content_id,
   });
 
+// Resolved URLs are signed and valid for 24 hours (CONTENT_AUTH_EXPIRY_TIME in
+// core). Resolving again returns a different signature, which would defeat the
+// browser cache, so reuse the resolved URL for just under its validity.
+export const RESOLVE_CACHE_TIME = 23 * 60 * 60 * 1000; // 23 hours
+
+export const resolveMediaSourceWithCache = (
+  hass: Pick<HomeAssistant, "callWS" | "hassUrl">,
+  media_content_id: string
+): Promise<ResolvedMediaSource> =>
+  timeCacheEntityPromiseFunc(
+    "_resolvedMediaSource",
+    RESOLVE_CACHE_TIME,
+    resolveMediaSource,
+    hass,
+    media_content_id
+  );
+
 export const browseLocalMediaPlayer = (
   hass: HomeAssistant,
   mediaContentId?: string

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

@@ -367,10 +367,10 @@ class MoreInfoLight extends LitElement {
           width: auto;
         }
         .wheel {
-          width: 30px;
-          height: 30px;
+          width: 28px;
+          height: 28px;
           flex: none;
-          border-radius: var(--ha-border-radius-xl);
+          border-radius: var(--ha-border-radius-circle);
         }
         .wheel.color {
           background-image: url("/static/images/color_wheel.png");

src/panels/config/automation/target/ha-automation-row-targets.ts

@@ -622,6 +622,8 @@ export class HaAutomationRowTargets extends LitElement {
         var(--ha-color-border-neutral-quiet);
       overflow: hidden;
       height: 32px;
+      box-sizing: border-box;
+      font: inherit;
     }
     .target.warning {
       background: var(--ha-color-fill-warning-normal-resting);

src/panels/config/blueprint/ha-blueprint-overview.ts

@@ -622,8 +622,7 @@ class HaBlueprintOverview extends LitElement {
           }
         ),
         confirmText: this.hass!.localize(
-          "ui.panel.config.blueprint.overview.blueprint_in_use_view",
-          { type }
+          `ui.panel.config.blueprint.overview.blueprint_in_use_view_${blueprint.domain}`
         ),
       });
       if (result) {

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

@@ -16,6 +16,7 @@ import {
   mdiRobot,
   mdiScriptText,
   mdiShapeOutline,
+  mdiTextureBox,
   mdiTools,
 } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
@@ -44,6 +45,7 @@ import "../../../components/ha-button";
 import "../../../components/ha-dropdown";
 import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 import "../../../components/ha-dropdown-item";
+import "../../../components/ha-icon";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-next";
 import "../../../components/item/ha-list-item-base";
@@ -1036,12 +1038,27 @@ export class HaConfigDevicePage extends LitElement {
           ${
             area
               ? html`<div class="header-name">
-                  <a href="/config/areas/area/${area.area_id}"
-                    >${this.hass.localize(
+                  <ha-button
+                    href="/config/areas/area/${area.area_id}"
+                    size="s"
+                    appearance="plain"
+                  >
+                    ${
+                      area.icon
+                        ? html`<ha-icon
+                            slot="start"
+                            .icon=${area.icon}
+                          ></ha-icon>`
+                        : html`<ha-svg-icon
+                            slot="start"
+                            .path=${mdiTextureBox}
+                          ></ha-svg-icon>`
+                    }
+                    ${this.hass.localize(
                       "ui.panel.config.integrations.config_entry.area",
                       { area: area.name || "Unnamed Area" }
-                    )}</a
-                  >
+                    )}
+                  </ha-button>
                 </div>`
               : ""
           }
@@ -1744,12 +1761,14 @@ export class HaConfigDevicePage extends LitElement {
         .header-name {
           display: flex;
           align-items: center;
-          padding-left: var(--ha-space-2);
-          padding-inline-start: var(--ha-space-2);
-          padding-inline-end: initial;
           direction: var(--direction);
         }
 
+        .header-name ha-icon,
+        .header-name ha-svg-icon {
+          --mdc-icon-size: 18px;
+        }
+
         .column,
         .fullwidth {
           box-sizing: border-box;

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

@@ -19,6 +19,7 @@ import {
   subscribeLabFeatures,
 } from "../../../data/labs";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
+import "../../../layouts/hass-loading-screen";
 import "../../../layouts/hass-subpage";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
@@ -38,7 +39,7 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @state() private _preview_features: LabPreviewFeature[] = [];
+  @state() private _preview_features?: LabPreviewFeature[];
 
   @state() private _highlightedPreviewFeature?: string;
 
@@ -98,6 +99,10 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
   }
 
   protected render() {
+    if (this._preview_features === undefined) {
+      return html`<hass-loading-screen></hass-loading-screen>`;
+    }
+
     const sortedFeatures = this._sortedPreviewFeatures(
       this.hass.localize,
       this._preview_features

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

@@ -51,6 +51,8 @@ export class HaConfigLovelaceResources extends LitElement {
 
   @state() private _resources: LovelaceResource[] = [];
 
+  @state() private _loaded = false;
+
   @state() private _lovelaceInfo?: LovelaceInfo;
 
   @state()
@@ -134,7 +136,7 @@ export class HaConfigLovelaceResources extends LitElement {
   );
 
   protected render(): TemplateResult {
-    if (!this.hass || this._resources === undefined) {
+    if (!this.hass || !this._loaded) {
       return html` <hass-loading-screen></hass-loading-screen> `;
     }
 
@@ -229,6 +231,7 @@ export class HaConfigLovelaceResources extends LitElement {
     ]);
     this._resources = resources;
     this._lovelaceInfo = lovelaceInfo;
+    this._loaded = true;
   }
 
   private _editResource(ev: CustomEvent) {

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

@@ -17,6 +17,7 @@ import {
   subscribeRepairsIssueRegistry,
 } from "../../../data/repairs";
 import "../../../layouts/hass-subpage";
+import "../../../layouts/hass-loading-screen";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import type { HomeAssistant } from "../../../types";
 import "./ha-config-repairs";
@@ -32,6 +33,8 @@ class HaConfigRepairsDashboard extends SubscribeMixin(LitElement) {
 
   @state() private _repairsIssues: RepairsIssue[] = [];
 
+  @state() private _loaded = false;
+
   @state() private _showIgnored = false;
 
   private _getFilteredIssues = memoizeOne(
@@ -58,6 +61,7 @@ class HaConfigRepairsDashboard extends SubscribeMixin(LitElement) {
         this._repairsIssues = repairs.issues.sort(
           (a, b) => severitySort[a.severity] - severitySort[b.severity]
         );
+        this._loaded = true;
         const integrations = new Set<string>();
         for (const issue of this._repairsIssues) {
           integrations.add(issue.domain);
@@ -68,6 +72,10 @@ class HaConfigRepairsDashboard extends SubscribeMixin(LitElement) {
   }
 
   protected render(): TemplateResult {
+    if (!this._loaded) {
+      return html`<hass-loading-screen></hass-loading-screen>`;
+    }
+
     const issues = this._getFilteredIssues(
       this._showIgnored,
       this._repairsIssues

src/panels/config/voice-assistants/assist/ha-config-voice-assistants-assist-devices.ts

@@ -16,6 +16,7 @@ import {
   listAssistPipelines,
 } from "../../../../data/assist_pipeline";
 import "../../../../layouts/hass-subpage";
+import "../../../../layouts/hass-loading-screen";
 import type { HomeAssistant } from "../../../../types";
 
 interface AssistDeviceExtra extends AssistDevice {
@@ -124,6 +125,10 @@ class AssistDevicesPage extends LitElement {
   }
 
   render() {
+    if (!this._devices) {
+      return html`<hass-loading-screen></hass-loading-screen>`;
+    }
+
     return html`
       <hass-subpage
         .hass=${this.hass}
@@ -144,7 +149,7 @@ class AssistDevicesPage extends LitElement {
             this.hass.states,
             this._pipelines,
             this._preferred,
-            this._devices || []
+            this._devices
           )}
           auto-height
           @row-click=${this._handleRowClicked}

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

@@ -11,7 +11,7 @@ import type { LocalizeFunc } from "../../../../common/translations/localize";
 
 import {
   isMediaSourceContentId,
-  resolveMediaSource,
+  resolveMediaSourceWithCache,
 } from "../../../../data/media_source";
 
 @customElement("hui-view-background-editor")
@@ -136,21 +136,35 @@ export class HuiViewBackgroundEditor extends LitElement {
         `${(background.opacity ?? 100) / 100}`
       );
 
-      const backgroundImage =
-        typeof background.image === "object"
-          ? background.image.media_content_id
-          : background.image;
+      const backgroundImage = this._currentBackgroundImage();
 
       if (backgroundImage && isMediaSourceContentId(backgroundImage)) {
-        resolveMediaSource(this.hass, backgroundImage).then((result) => {
-          this._resolvedImage = result.url;
-        });
+        resolveMediaSourceWithCache(this.hass, backgroundImage).then(
+          (result) => {
+            // Discard if the image changed while resolving
+            if (this._currentBackgroundImage() === backgroundImage) {
+              this._resolvedImage = result.url;
+            }
+          },
+          () => {
+            if (this._currentBackgroundImage() === backgroundImage) {
+              this._resolvedImage = undefined;
+            }
+          }
+        );
       } else {
         this._resolvedImage = backgroundImage;
       }
     }
   }
 
+  private _currentBackgroundImage(): string | undefined {
+    const background = this._backgroundData(this._config);
+    return typeof background.image === "object"
+      ? background.image.media_content_id
+      : background.image;
+  }
+
   protected render() {
     if (!this.hass) {
       return nothing;

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

@@ -5,7 +5,7 @@ import type { HomeAssistant } from "../../../types";
 import type { LovelaceViewBackgroundConfig } from "../../../data/lovelace/config/view";
 import {
   isMediaSourceContentId,
-  resolveMediaSource,
+  resolveMediaSourceWithCache,
 } from "../../../data/media_source";
 
 @customElement("hui-view-background")
@@ -21,20 +21,37 @@ export class HUIViewBackground extends LitElement {
     return nothing;
   }
 
-  private _fetchMedia() {
-    const backgroundImage =
-      typeof this.background === "string"
-        ? this.background
-        : typeof this.background?.image === "object"
-          ? this.background.image.media_content_id
-          : this.background?.image;
+  private _getBackgroundImage(
+    background?: string | LovelaceViewBackgroundConfig
+  ): string | undefined {
+    if (typeof background === "string") {
+      return background;
+    }
+    if (typeof background?.image === "object") {
+      return background.image.media_content_id;
+    }
+    return background?.image;
+  }
 
-    if (backgroundImage && isMediaSourceContentId(backgroundImage)) {
-      resolveMediaSource(this.hass, backgroundImage).then((result) => {
-        this.resolvedImage = result.url;
-      });
-    } else {
+  private async _fetchMedia() {
+    const backgroundImage = this._getBackgroundImage(this.background);
+
+    if (!backgroundImage || !isMediaSourceContentId(backgroundImage)) {
       this.resolvedImage = undefined;
+      return;
+    }
+
+    let resolvedUrl: string | undefined;
+    try {
+      resolvedUrl = (
+        await resolveMediaSourceWithCache(this.hass, backgroundImage)
+      ).url;
+    } catch {
+      resolvedUrl = undefined;
+    }
+    // Discard if the background changed while resolving
+    if (this._getBackgroundImage(this.background) === backgroundImage) {
+      this.resolvedImage = resolvedUrl;
     }
   }
 
@@ -73,10 +90,7 @@ export class HUIViewBackground extends LitElement {
     background?: string | LovelaceViewBackgroundConfig
   ) {
     if (typeof background === "object" && background.image) {
-      const image =
-        typeof background.image === "object"
-          ? background.image.media_content_id || ""
-          : background.image;
+      const image = this._getBackgroundImage(background) || "";
       if (isMediaSourceContentId(image) && !this.resolvedImage) {
         return null;
       }

src/panels/profile/ha-refresh-tokens-card.ts

@@ -209,7 +209,6 @@ class HaRefreshTokens extends LitElement {
           <ha-button
             variant="danger"
             appearance="filled"
-            size="s"
             @click=${this._deleteAllTokens}
           >
             ${this.hass.localize(
@@ -352,6 +351,10 @@ class HaRefreshTokens extends LitElement {
           border-radius: var(--ha-border-radius-circle);
           margin-right: 6px;
         }
+        .card-actions {
+          display: flex;
+          justify-content: flex-end;
+        }
       `,
     ];
   }

src/translations/en.json

@@ -6131,7 +6131,8 @@
             "error": "{path} could not be loaded",
             "blueprint_in_use_title": "This blueprint is in use and cannot be deleted",
             "blueprint_in_use_text": "Please remove all below {type} that use this blueprint before deleting it. {list}",
-            "blueprint_in_use_view": "view {type}",
+            "blueprint_in_use_view_automation": "View automations",
+            "blueprint_in_use_view_script": "View scripts",
             "confirm_delete_title": "Delete blueprint?",
             "confirm_delete_text": "{name} will be permanently deleted.",
             "add_blueprint": "Import blueprint",

test/data/media_source.test.ts

@@ -0,0 +1,111 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import {
+  RESOLVE_CACHE_TIME,
+  resolveMediaSourceWithCache,
+} from "../../src/data/media_source";
+import type { HomeAssistant } from "../../src/types";
+
+const CONTENT_ID = "media-source://image_upload/background";
+const OTHER_CONTENT_ID = "media-source://image_upload/other";
+
+// Core signs every resolution with a fresh timestamp, so an uncached resolve of
+// the same id yields a different url each time. The mock reproduces that: the
+// urls only stay equal if the resolution itself was reused.
+const mockHass = () => {
+  let signature = 0;
+  return {
+    callWS: vi.fn(({ media_content_id }: { media_content_id: string }) => {
+      signature += 1;
+      return Promise.resolve({
+        url: `/api/image/serve/${media_content_id.split("/").pop()}/original?authSig=sig${signature}`,
+        mime_type: "image/jpeg",
+      });
+    }),
+  } as unknown as HomeAssistant;
+};
+
+describe("resolveMediaSourceWithCache", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  it("returns the same url when the same content id is resolved again", async () => {
+    const hass = mockHass();
+
+    const first = await resolveMediaSourceWithCache(hass, CONTENT_ID);
+    const second = await resolveMediaSourceWithCache(hass, CONTENT_ID);
+
+    expect(second.url).toBe(first.url);
+    expect(hass.callWS).toHaveBeenCalledTimes(1);
+  });
+
+  it("shares a single request between concurrent callers", async () => {
+    const hass = mockHass();
+
+    const [first, second] = await Promise.all([
+      resolveMediaSourceWithCache(hass, CONTENT_ID),
+      resolveMediaSourceWithCache(hass, CONTENT_ID),
+    ]);
+
+    expect(second.url).toBe(first.url);
+    expect(hass.callWS).toHaveBeenCalledTimes(1);
+  });
+
+  it("resolves each content id to its own url", async () => {
+    const hass = mockHass();
+
+    const first = await resolveMediaSourceWithCache(hass, CONTENT_ID);
+    const other = await resolveMediaSourceWithCache(hass, OTHER_CONTENT_ID);
+
+    expect(first.url).toContain("/background/");
+    expect(other.url).toContain("/other/");
+    expect(hass.callWS).toHaveBeenCalledTimes(2);
+  });
+
+  it("keeps returning the same url when hass is updated", async () => {
+    const hass = mockHass();
+
+    const first = await resolveMediaSourceWithCache(hass, CONTENT_ID);
+    // State updates replace hass with a shallow copy
+    const second = await resolveMediaSourceWithCache(
+      { ...hass } as HomeAssistant,
+      CONTENT_ID
+    );
+
+    expect(second.url).toBe(first.url);
+    expect(hass.callWS).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not cache failures", async () => {
+    const hass = mockHass();
+    vi.mocked(hass.callWS).mockRejectedValueOnce(new Error("unresolvable"));
+
+    await expect(
+      resolveMediaSourceWithCache(hass, CONTENT_ID)
+    ).rejects.toThrowError("unresolvable");
+    const retried = await resolveMediaSourceWithCache(hass, CONTENT_ID);
+
+    expect(retried.url).toContain("authSig=");
+    expect(hass.callWS).toHaveBeenCalledTimes(2);
+  });
+
+  it("resolves a fresh url once the cached one is about to expire", async () => {
+    const hass = mockHass();
+
+    const first = await resolveMediaSourceWithCache(hass, CONTENT_ID);
+    vi.advanceTimersByTime(RESOLVE_CACHE_TIME);
+    const second = await resolveMediaSourceWithCache(hass, CONTENT_ID);
+
+    expect(second.url).not.toBe(first.url);
+    expect(hass.callWS).toHaveBeenCalledTimes(2);
+  });
+
+  it("caches for less than the 24 hour signature validity", () => {
+    expect(RESOLVE_CACHE_TIME).toBeLessThan(24 * 60 * 60 * 1000);
+  });
+});

test/data/time-condition-description.test.ts

@@ -0,0 +1,76 @@
+import { IntlMessageFormat } from "intl-messageformat";
+import { describe, expect, it } from "vitest";
+import { describeCondition } from "../../src/data/automation_i18n";
+import {
+  DateFormat,
+  FirstWeekday,
+  NumberFormat,
+  TimeFormat,
+  TimeZone,
+} from "../../src/data/translation";
+import en from "../../src/translations/en.json";
+import type { HomeAssistant } from "../../src/types";
+
+type TranslationNode = string | { [key: string]: TranslationNode };
+
+const localize = (key: string, values?: Record<string, unknown>) => {
+  const message = key
+    .split(".")
+    .reduce<TranslationNode | undefined>(
+      (translations, part) =>
+        typeof translations === "object" ? translations[part] : undefined,
+      en as TranslationNode
+    );
+  return typeof message === "string"
+    ? (new IntlMessageFormat(message, "en").format(values) as string)
+    : "";
+};
+
+const hass = {
+  localize,
+  locale: {
+    language: "en",
+    number_format: NumberFormat.language,
+    time_format: TimeFormat.twenty_four,
+    date_format: DateFormat.language,
+    first_weekday: FirstWeekday.language,
+    time_zone: TimeZone.local,
+  },
+  config: { time_zone: "Etc/UTC" },
+  states: {},
+} as unknown as HomeAssistant;
+
+const describeTimeCondition = (after?: string, before?: string) =>
+  describeCondition({ condition: "time", after, before }, hass, []);
+
+describe("time condition description", () => {
+  it("joins a window within one day with 'and'", () => {
+    expect(describeTimeCondition("09:00:00", "17:00:00")).toBe(
+      "If the time is after 09:00 and before 17:00"
+    );
+  });
+
+  it("joins a window crossing midnight with 'or'", () => {
+    expect(describeTimeCondition("22:00:00", "06:00:00")).toBe(
+      "If the time is after 22:00 or before 06:00"
+    );
+  });
+
+  it("omits a 'before' boundary of midnight, which ends the window at the end of the day", () => {
+    expect(describeTimeCondition("10:00:00", "00:00:00")).toBe(
+      "If the time is after 10:00"
+    );
+  });
+
+  it("compares times numerically, not lexicographically", () => {
+    expect(describeTimeCondition("9:00:00", "10:00:00")).toBe(
+      "If the time is after 09:00 and before 10:00"
+    );
+  });
+
+  it("does not compare entity references", () => {
+    expect(describeTimeCondition("input_datetime.wake_up", "10:00:00")).toBe(
+      "If the time is after entity input_datetime.wake_up and before 10:00"
+    );
+  });
+});

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

@@ -0,0 +1,129 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import "../../../../src/panels/lovelace/views/hui-view-background";
+import type { HUIViewBackground } from "../../../../src/panels/lovelace/views/hui-view-background";
+import type { LovelaceViewBackgroundConfig } from "../../../../src/data/lovelace/config/view";
+import type { HomeAssistant } from "../../../../src/types";
+
+const IMAGE_A = "media-source://image_upload/a";
+const IMAGE_B = "media-source://image_upload/b";
+
+// Resolutions are answered by hand so a slow one can land after a later,
+// already-resolved one — the ordering a cache hit makes easy to hit.
+const deferredHass = () => {
+  const pending = new Map<string, (url: string) => void>();
+  const hass = {
+    callWS: vi.fn(
+      ({ media_content_id }: { media_content_id: string }) =>
+        new Promise((resolve) => {
+          pending.set(media_content_id, (url: string) =>
+            resolve({ url, mime_type: "image/jpeg" })
+          );
+        })
+    ),
+    hassUrl: (path?: string) => path ?? "",
+  } as unknown as HomeAssistant;
+  return { hass, pending };
+};
+
+let elements: HUIViewBackground[] = [];
+
+const mount = async (
+  hass: HomeAssistant,
+  background: string | LovelaceViewBackgroundConfig
+) => {
+  const el = document.createElement("hui-view-background") as HUIViewBackground;
+  el.hass = hass;
+  el.background = background;
+  document.body.appendChild(el);
+  elements.push(el);
+  await el.updateComplete;
+  return el;
+};
+
+const setBackground = async (
+  el: HUIViewBackground,
+  background: string | LovelaceViewBackgroundConfig
+) => {
+  el.background = background;
+  await el.updateComplete;
+};
+
+// Let the resolve chain drain before checking what was applied
+const settle = async (el: HUIViewBackground) => {
+  await new Promise((resolve) => {
+    setTimeout(resolve, 0);
+  });
+  await el.updateComplete;
+};
+
+const imageBackground = (
+  mediaContentId: string
+): LovelaceViewBackgroundConfig => ({
+  image: { media_content_id: mediaContentId },
+});
+
+const backgroundUrl = (el: HUIViewBackground) =>
+  el.style.getPropertyValue("--view-background");
+
+afterEach(() => {
+  elements.forEach((el) => el.remove());
+  elements = [];
+  vi.restoreAllMocks();
+});
+
+describe("hui-view-background", () => {
+  it("applies the resolved url of a media source background", async () => {
+    const { hass, pending } = deferredHass();
+    const el = await mount(hass, imageBackground(IMAGE_A));
+
+    pending.get(IMAGE_A)!("/a.jpg?authSig=a");
+    await settle(el);
+
+    expect(backgroundUrl(el)).toContain("/a.jpg?authSig=a");
+  });
+
+  it("ignores a resolution that arrives after the background changed", async () => {
+    const { hass, pending } = deferredHass();
+    const el = await mount(hass, imageBackground(IMAGE_A));
+    await setBackground(el, imageBackground(IMAGE_B));
+
+    // B resolves first, then the stale A resolution lands
+    pending.get(IMAGE_B)!("/b.jpg?authSig=b");
+    await settle(el);
+    pending.get(IMAGE_A)!("/a.jpg?authSig=a");
+    await settle(el);
+
+    expect(backgroundUrl(el)).toContain("/b.jpg?authSig=b");
+    expect(backgroundUrl(el)).not.toContain("/a.jpg");
+  });
+
+  it("keeps a plain css background untouched", async () => {
+    const { hass } = deferredHass();
+    const el = await mount(hass, "#3f51b5");
+
+    expect(hass.callWS).not.toHaveBeenCalled();
+    expect(backgroundUrl(el)).toBe("#3f51b5");
+  });
+
+  it("clears the resolved image when the background is replaced by a color", async () => {
+    const { hass, pending } = deferredHass();
+    const el = await mount(hass, imageBackground(IMAGE_A));
+    pending.get(IMAGE_A)!("/a.jpg?authSig=a");
+    await settle(el);
+
+    await setBackground(el, "#3f51b5");
+
+    expect(backgroundUrl(el)).toBe("#3f51b5");
+  });
+
+  it("falls back to the theme background when resolving fails", async () => {
+    const hass = {
+      callWS: vi.fn().mockRejectedValue(new Error("unresolvable")),
+      hassUrl: (path?: string) => path ?? "",
+    } as unknown as HomeAssistant;
+    const el = await mount(hass, imageBackground(IMAGE_A));
+    await settle(el);
+
+    expect(backgroundUrl(el)).toBe("");
+  });
+});