Bumped version to 20260729.4

Fix lazy loading of entity rows in device page

demo/src/html/index.html.template

@@ -34,16 +34,8 @@
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
     <meta name="theme-color" content="#03a9f4" />
-    <link rel="preload" href="/static/fonts/roboto/Roboto-Regular.woff2" as="font" type="font/woff2" crossorigin>
     <%= renderTemplate("_social_meta.html.template") %>
     <style>
-      @font-face {
-        font-family: "Roboto Launch Screen";
-        font-display: block;
-        src: url("/static/fonts/roboto/Roboto-Regular.woff2") format("woff2");
-        font-weight: 400;
-        font-style: normal;
-      }
       html {
         background-color: var(--primary-background-color, #fafafa);
         color: var(--primary-text-color, #212121);
@@ -64,12 +56,14 @@
         padding: 0;
       }
       #ha-launch-screen {
-        font-family: "Roboto Launch Screen", sans-serif;
+        font-family: ui-sans-serif, system-ui, sans-serif;
         height: 100%;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
+        user-select: none;
+        -webkit-user-select: none;
         transition: opacity var(--ha-animation-duration-normal, 250ms) ease-out;
       }
       #ha-launch-screen.removing {
@@ -104,7 +98,7 @@
       }
       #ha-launch-screen .ha-launch-screen-spacer-bottom {
         flex: 1;
-        padding-top: 48px;
+        padding-top: 16px;
       }
       .ohf-logo {
         margin: max(var(--safe-area-inset-bottom, 0px), 48px) 0;

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

@@ -23,7 +23,7 @@ export class DemoHaProgressButton extends LitElement {
                 <ha-progress-button @click=${this._clickedFail}>
                   Fail
                 </ha-progress-button>
-                <ha-progress-button size="small" @click=${this._clickedSuccess}>
+                <ha-progress-button size="s" @click=${this._clickedSuccess}>
                   small
                 </ha-progress-button>
                 <ha-progress-button

pyproject.toml

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

src/common/entity/compute_entity_id_format_example.ts

@@ -1,15 +0,0 @@
-import type { EntityIdPart } from "../../data/entity_id_format";
-import { slugify } from "../string/slugify";
-
-export const computeEntityIdFormatExample = (
-  format: EntityIdPart[],
-  examples: Record<EntityIdPart, string>
-): string => {
-  const parts = format
-    .map((item) => examples[item])
-    .filter(Boolean)
-    .map((part) => slugify(part, "_"))
-    .filter(Boolean);
-
-  return parts.join("_") || "unknown";
-};

src/common/url/sanitize-http-url.ts

@@ -0,0 +1,52 @@
+import { sanitizeNavigationPath } from "./sanitize-navigation-path";
+
+const HOME_ASSISTANT_SCHEME = "homeassistant://";
+
+/**
+ * Returns the URL if it is safe to use as a link target, `undefined` otherwise.
+ * Only absolute `http:` and `https:` URLs pass, the same check
+ * `ha-attribute-value` already applies to attribute links.
+ *
+ * Use for every URL that reaches the frontend as data — from an integration
+ * manifest, an add-on, a config flow or an entity attribute — so that a
+ * `javascript:` URI can never become a clickable link.
+ */
+export const sanitizeHttpUrl = (
+  url: string | null | undefined
+): string | undefined => {
+  if (!url) {
+    return undefined;
+  }
+  try {
+    const { protocol } = new URL(url);
+    return protocol === "http:" || protocol === "https:" ? url : undefined;
+  } catch (_err) {
+    return undefined;
+  }
+};
+
+/** Whether the URL is a `homeassistant://` deep link into the frontend. */
+export const isHomeAssistantUrl = (url: string | null | undefined): boolean =>
+  !!url?.startsWith(HOME_ASSISTANT_SCHEME);
+
+/**
+ * Turns a `homeassistant://` deep link into an in-app path, or returns
+ * `undefined` when it does not point inside the frontend. Rewriting the scheme
+ * on its own is not enough: `homeassistant:///example.com` would become
+ * `//example.com`, which resolves to another origin.
+ */
+export const homeAssistantUrlToPath = (
+  url: string | null | undefined
+): string | undefined =>
+  isHomeAssistantUrl(url)
+    ? sanitizeNavigationPath(`/${url!.slice(HOME_ASSISTANT_SCHEME.length)}`)
+    : undefined;
+
+/**
+ * Sanitizes a URL that may be either an external link or a `homeassistant://`
+ * deep link, returning something safe to bind to an `href`.
+ */
+export const sanitizeLinkUrl = (
+  url: string | null | undefined
+): string | undefined =>
+  isHomeAssistantUrl(url) ? homeAssistantUrlToPath(url) : sanitizeHttpUrl(url);

src/components/buttons/ha-progress-button.ts

@@ -18,6 +18,8 @@ export class HaProgressButton extends LitElement {
 
   @property() appearance: Appearance = "accent";
 
+  @property() size: "xs" | "s" | "m" | "l" | "xl" = "m";
+
   @property({ attribute: false }) public iconPath?: string;
 
   @property() variant: "brand" | "danger" | "neutral" | "warning" | "success" =
@@ -32,6 +34,7 @@ export class HaProgressButton extends LitElement {
     return html`
       <ha-button
         .appearance=${appearance}
+        .size=${this.size}
         .disabled=${this.disabled}
         .loading=${this.progress}
         .variant=${
@@ -118,6 +121,12 @@ export class HaProgressButton extends LitElement {
       width: 100%;
     }
 
+    /* The icon lives in this shadow root, so callers cannot size it themselves. */
+    ha-button[size="xs"] ha-svg-icon[slot="start"],
+    ha-button[size="s"] ha-svg-icon[slot="start"] {
+      --mdc-icon-size: 16px;
+    }
+
     ha-button.result::part(start),
     ha-button.result::part(end),
     ha-button.result::part(label),

src/components/device/dialog-device-replaced.ts

@@ -6,8 +6,11 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { computeAreaName } from "../../common/entity/compute_area_name";
 import { computeDeviceName } from "../../common/entity/compute_device_name";
 import { getDeviceArea } from "../../common/entity/context/get_device_context";
+import { getConfigEntries, type ConfigEntry } from "../../data/config_entries";
+import { domainToName } from "../../data/integration";
 import type { HomeAssistant } from "../../types";
 import type { HassDialog } from "../../dialogs/make-dialog-manager";
+import { brandsUrl } from "../../util/brands-url";
 import "../ha-dialog";
 import "../ha-svg-icon";
 import "../item/ha-list-item-button";
@@ -23,11 +26,21 @@ export class DialogDeviceReplaced
 
   @state() private _open = false;
 
+  @state() private _configEntryLookup?: Record<string, ConfigEntry>;
+
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   public async showDialog(params: DeviceReplacedDialogParams): Promise<void> {
     this._params = params;
     this._open = true;
+    this._loadConfigEntries();
+  }
+
+  private async _loadConfigEntries(): Promise<void> {
+    const configEntries = await getConfigEntries(this.hass);
+    this._configEntryLookup = Object.fromEntries(
+      configEntries.map((entry) => [entry.entry_id, entry])
+    );
   }
 
   public closeDialog(): boolean {
@@ -55,15 +68,23 @@ export class DialogDeviceReplaced
       candidates: string[],
       primaryId: string | null,
       devices: HomeAssistant["devices"],
-      areas: HomeAssistant["areas"]
+      areas: HomeAssistant["areas"],
+      configEntryLookup: Record<string, ConfigEntry> | undefined
     ) =>
       candidates.map((deviceId) => {
         const device = devices[deviceId];
         const area = device ? getDeviceArea(device, areas) : undefined;
+        const configEntry = device?.primary_config_entry
+          ? configEntryLookup?.[device.primary_config_entry]
+          : undefined;
         return {
           deviceId,
           name: device ? computeDeviceName(device) : deviceId,
-          secondary: area ? computeAreaName(area) : undefined,
+          area: area ? computeAreaName(area) : undefined,
+          domain: configEntry?.domain,
+          domainName: configEntry
+            ? domainToName(this.hass.localize, configEntry.domain)
+            : undefined,
           isPrimary: deviceId === primaryId,
         };
       })
@@ -92,31 +113,54 @@ export class DialogDeviceReplaced
             this._params.candidates,
             this._params.primaryId,
             this.hass.devices,
-            this.hass.areas
-          ).map(
-            (item) => html`
+            this.hass.areas,
+            this._configEntryLookup
+          ).map((item) => {
+            const supportingText = [
+              item.area,
+              item.domainName,
+              item.isPrimary
+                ? this.hass.localize(
+                    "ui.components.device-picker.replaced_dialog.recommended"
+                  )
+                : undefined,
+            ]
+              .filter(Boolean)
+              .join(" • ");
+            return html`
               <ha-list-item-button .deviceId=${item.deviceId}>
-                <ha-svg-icon slot="start" .path=${mdiDevices}></ha-svg-icon>
+                ${
+                  item.domain
+                    ? html`<img
+                        slot="start"
+                        alt=""
+                        crossorigin="anonymous"
+                        referrerpolicy="no-referrer"
+                        src=${brandsUrl(
+                          {
+                            domain: item.domain,
+                            type: "icon",
+                            darkOptimized: this.hass.themes?.darkMode,
+                          },
+                          this.hass.auth.data.hassUrl
+                        )}
+                      />`
+                    : html`<ha-svg-icon
+                        slot="start"
+                        .path=${mdiDevices}
+                      ></ha-svg-icon>`
+                }
                 <span slot="headline">${item.name}</span>
                 ${
-                  item.secondary || item.isPrimary
-                    ? html`<span slot="supporting-text">
-                        ${[
-                          item.secondary,
-                          item.isPrimary
-                            ? this.hass.localize(
-                                "ui.components.device-picker.replaced_dialog.recommended"
-                              )
-                            : undefined,
-                        ]
-                          .filter(Boolean)
-                          .join(" • ")}
-                      </span>`
+                  supportingText
+                    ? html`<span slot="supporting-text"
+                        >${supportingText}</span
+                      >`
                     : nothing
                 }
               </ha-list-item-button>
-            `
-          )}
+            `;
+          })}
         </ha-list-base>
       </ha-dialog>
     `;
@@ -132,6 +176,10 @@ export class DialogDeviceReplaced
       padding: 0 var(--ha-space-6) var(--ha-space-4);
       color: var(--secondary-text-color);
     }
+    img[slot="start"] {
+      width: 24px;
+      height: 24px;
+    }
   `;
 }
 

src/components/entity/ha-statistic-picker.ts

@@ -85,6 +85,10 @@ export class HaStatisticPicker extends LitElement {
 
   @property() public helper?: string;
 
+  @property({ attribute: "error-message" }) public errorMessage?: string;
+
+  @property({ type: Boolean }) public invalid = false;
+
   @property() public placeholder?: string;
 
   @property({ attribute: "statistic-types" })
@@ -526,6 +530,9 @@ export class HaStatisticPicker extends LitElement {
         .autofocus=${this.autofocus}
         .allowCustomValue=${this.allowCustomEntity}
         .disabled=${this.disabled}
+        .required=${this.required}
+        .invalid=${this.invalid}
+        .errorMessage=${this.errorMessage}
         .label=${this.label}
         use-top-label
         .placeholder=${placeholder}

src/components/ha-code-editor.ts

@@ -57,7 +57,10 @@ import "./ha-code-editor-completion-items";
 import type { CompletionItem } from "./ha-code-editor-completion-items";
 import "./ha-icon";
 import "./ha-icon-button-toolbar";
-import type { HaIconButtonToolbar } from "./ha-icon-button-toolbar";
+import type {
+  HaIconButtonToolbar,
+  HaIconButtonToolbarItem,
+} from "./ha-icon-button-toolbar";
 
 declare global {
   interface HASSDomEvents {
@@ -115,6 +118,9 @@ export class HaCodeEditor extends ReactiveElement {
   @property({ type: Boolean, attribute: "has-test" })
   public hasTest = false;
 
+  @property({ attribute: false })
+  public toolbarItems?: (HaIconButtonToolbarItem | string)[];
+
   @property({ attribute: false }) public testing = false;
 
   @property({ type: String }) public placeholder?: string;
@@ -351,7 +357,8 @@ export class HaCodeEditor extends ReactiveElement {
       changedProps.has("_canCopy") ||
       changedProps.has("_canUndo") ||
       changedProps.has("_canRedo") ||
-      changedProps.has("testing")
+      changedProps.has("testing") ||
+      changedProps.has("toolbarItems")
     ) {
       this._updateToolbarButtons();
     }
@@ -529,6 +536,7 @@ export class HaCodeEditor extends ReactiveElement {
     }
 
     this._editorToolbar.items = [
+      ...(this.toolbarItems ?? []),
       ...(this.hasTest && !this._isFullscreen
         ? [
             {

src/components/ha-generic-picker.ts

@@ -304,14 +304,21 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
 
   private _renderHelper() {
     const showError = this.invalid && this.errorMessage;
-    const showHelper = !showError && this.helper;
 
-    if (!showError && !showHelper) {
+    if (!showError && !this.helper) {
       return nothing;
     }
 
     return html`<ha-input-helper-text .disabled=${this.disabled}>
-      ${showError ? this.errorMessage : this.helper}
+      ${
+        showError
+          ? html`<span class="error">${this.errorMessage}</span> ${
+                this.helper
+                  ? html`<span class="helper">${this.helper}</span>`
+                  : nothing
+              }`
+          : this.helper
+      }
     </ha-input-helper-text>`;
   }
 
@@ -448,6 +455,13 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
         :host([invalid]) ha-input-helper-text {
           color: var(--mdc-theme-error, var(--error-color, #b00020));
         }
+        ha-input-helper-text .error,
+        ha-input-helper-text .helper {
+          display: block;
+        }
+        ha-input-helper-text .helper {
+          color: var(--secondary-text-color);
+        }
 
         wa-popover {
           --wa-space-l: 0;

src/components/ha-service-control.ts

@@ -488,6 +488,11 @@ export class HaServiceControl extends LitElement {
         )) ||
       serviceData?.description;
 
+    const documentationLink =
+      this._manifest?.is_built_in && this._value?.action
+        ? documentationUrl(this.hass, `/actions/${this._value.action}`)
+        : this._manifest?.documentation;
+
     const targetSelector =
       serviceData && "target" in serviceData
         ? this._targetSelector(
@@ -514,16 +519,9 @@ export class HaServiceControl extends LitElement {
             <div class="description">
               ${description ? html`<p>${description}</p>` : ""}
               ${
-                this._manifest
+                documentationLink
                   ? html` <a
-                      href=${
-                        this._manifest.is_built_in && this._value?.action
-                          ? documentationUrl(
-                              this.hass,
-                              `/actions/${this._value.action}`
-                            )
-                          : this._manifest.documentation
-                      }
+                      href=${documentationLink}
                       title=${this.hass.localize(
                         "ui.components.service-control.integration_doc"
                       )}

src/components/ha-split-panel.ts

@@ -0,0 +1,68 @@
+import SplitPanel from "@home-assistant/webawesome/dist/components/split-panel/split-panel";
+import type { CSSResultGroup } from "lit";
+import { css } from "lit";
+import { customElement } from "lit/decorators";
+
+@customElement("ha-split-panel")
+export class HaSplitPanel extends SplitPanel {
+  static get styles(): CSSResultGroup {
+    return [
+      SplitPanel.styles,
+      css`
+        :host {
+          --divider-width: var(--ha-split-panel-divider-width, 2px);
+          --divider-hit-area: var(--ha-split-panel-divider-hit-area, 12px);
+          --min: var(--ha-split-panel-min, 0);
+          --max: var(--ha-split-panel-max, 100%);
+        }
+
+        .divider {
+          background-color: var(--divider-color);
+          transition: background-color var(--ha-animation-duration-fast)
+            ease-out;
+        }
+
+        /* Grip affordance so the divider reads as draggable. The divider
+           already centers its children via flexbox, so keep this in flow.
+           Consumers slotting their own divider handle can hide it with
+           --ha-split-panel-grip-display: none. */
+        .divider::before {
+          content: "";
+          width: 2px;
+          height: var(--ha-space-8);
+          display: var(--ha-split-panel-grip-display, block);
+          border-radius: var(--ha-border-radius-pill, 9999px);
+          background-color: var(--secondary-text-color);
+          opacity: 0.5;
+          transition: opacity var(--ha-animation-duration-fast) ease-out;
+        }
+
+        /* In vertical orientation the divider is horizontal, so the grip pill
+           lies flat instead of standing upright. */
+        :host([orientation="vertical"]) .divider::before {
+          width: var(--ha-space-8);
+          height: 2px;
+        }
+
+        @media (hover: hover) {
+          :host(:not([disabled])) .divider:hover {
+            background-color: var(--primary-color);
+          }
+          :host(:not([disabled])) .divider:hover::before {
+            opacity: 1;
+          }
+        }
+
+        :host(:not([disabled])) .divider:focus-visible {
+          background-color: var(--primary-color);
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-split-panel": HaSplitPanel;
+  }
+}

src/components/ha-theme-settings.ts

@@ -228,6 +228,9 @@ export class HaThemeSettings extends LitElement {
   }
 
   static styles = css`
+    a {
+      color: var(--primary-color);
+    }
     .inputs {
       display: flex;
       flex-wrap: wrap;

src/components/media-player/ha-media-player-browse.ts

@@ -34,10 +34,12 @@ import {
   browseMediaPlayer,
   BROWSER_PLAYER,
   MediaClassBrowserSettings,
+  searchMediaPlayer,
 } from "../../data/media-player";
 import {
   browseLocalMediaPlayer,
   isManualMediaSourceContentId,
+  isMediaSourceContentId,
   MANUAL_MEDIA_SOURCE_PREFIX,
   searchMedia,
 } from "../../data/media_source";
@@ -869,13 +871,31 @@ export class HaMediaPlayerBrowse extends LitElement {
     const mediaFilterClasses = this._mediaClassFilter.length
       ? this._mediaClassFilter
       : undefined;
+    // A player's tree can embed media sources, which resolve their own searches;
+    // everything else in it uses integration specific ids only the entity knows.
+    const searchEntityId =
+      this.entityId &&
+      this.entityId !== BROWSER_PLAYER &&
+      !isMediaSourceContentId(navigateId.media_content_id ?? "")
+        ? this.entityId
+        : undefined;
+
     try {
-      const { result } = await searchMedia(
-        this.hass,
-        navigateId.media_content_id,
-        searchQuery,
-        mediaFilterClasses
-      );
+      const { result } = searchEntityId
+        ? await searchMediaPlayer(
+            this.hass,
+            searchEntityId,
+            searchQuery,
+            navigateId.media_content_id,
+            navigateId.media_content_type,
+            mediaFilterClasses
+          )
+        : await searchMedia(
+            this.hass,
+            navigateId.media_content_id,
+            searchQuery,
+            mediaFilterClasses
+          );
       // Ignore the response if a newer search started or we navigated away
       if (requestId !== this._searchRequestId) {
         return;

src/components/tile/ha-tile-container.ts

@@ -15,6 +15,10 @@ export class HaTileContainer extends LitElement {
   @property({ type: Boolean })
   public vertical = false;
 
+  /* reserve a consistent height for the info block instead of sizing to content, so sibling tiles stay aligned */
+  @property({ type: Boolean, attribute: "fixed-info-height" })
+  public fixedInfoHeight = false;
+
   @property({ attribute: false })
   public interactive = false;
 
@@ -34,7 +38,10 @@ export class HaTileContainer extends LitElement {
   protected render() {
     const containerOrientationClass =
       this.featurePosition === "inline" ? "horizontal" : "";
-    const contentClasses = { vertical: this.vertical };
+    const contentClasses = {
+      vertical: this.vertical,
+      "fixed-info-height": this.fixedInfoHeight,
+    };
 
     return html`
       <div
@@ -112,7 +119,15 @@ export class HaTileContainer extends LitElement {
       flex-direction: column;
       text-align: center;
       justify-content: center;
-      padding: 10px;
+      padding: 10px var(--ha-space-2);
+    }
+    .vertical.fixed-info-height {
+      /* pin sizing so every tile in a grid reserves the same height, wrapping or not, secondary or not */
+      gap: 2px;
+      --ha-tile-info-gap: 2px;
+      --ha-tile-info-primary-line-height: var(--ha-space-4);
+      --ha-tile-info-primary-min-height: var(--ha-space-8);
+      --ha-tile-info-min-height: var(--ha-space-12);
     }
     .vertical ::slotted([slot="info"]) {
       width: 100%;

src/components/tile/ha-tile-info.ts

@@ -15,6 +15,11 @@ import { customElement, property } from "lit/decorators";
  *
  * @property {boolean} secondaryLoading - Whether the secondary text is loading. Shows a skeleton placeholder.
  *
+ * @csspart primary - The primary text. Style it to opt into another truncation, such as a multi line clamp.
+ *
+ * @cssprop --ha-tile-info-gap - The vertical gap between the primary and secondary text. defaults to `0`.
+ * @cssprop --ha-tile-info-min-height - Minimum height of the primary/secondary block. Set this to reserve space for a missing secondary so it doesn't shift surrounding content. defaults to `auto`.
+ * @cssprop --ha-tile-info-primary-min-height - Minimum height of the primary text block, independent of the number of rendered lines. Lets tiles that never wrap still match the height of tiles that do. defaults to `auto` (sizes to the actual rendered lines).
  * @cssprop --ha-tile-info-primary-font-size - The font size of the primary text. defaults to `var(--ha-font-size-m)`.
  * @cssprop --ha-tile-info-primary-font-weight - The font weight of the primary text. defaults to `var(--ha-font-weight-medium)`.
  * @cssprop --ha-tile-info-primary-line-height - The line height of the primary text. defaults to `var(--ha-line-height-normal)`.
@@ -39,7 +44,7 @@ export class HaTileInfo extends LitElement {
     return html`
       <div class="info">
         <slot name="primary" class="primary">
-          <span>${this.primary}</span>
+          <span part="primary">${this.primary}</span>
         </slot>
         ${
           this.secondaryLoading
@@ -59,6 +64,8 @@ export class HaTileInfo extends LitElement {
       display: block;
       width: 100%;
       min-width: 0;
+      --tile-info-gap: var(--ha-tile-info-gap, 0);
+      --tile-info-min-height: var(--ha-tile-info-min-height, auto);
       --tile-info-primary-font-size: var(
         --ha-tile-info-primary-font-size,
         var(--ha-font-size-m)
@@ -71,6 +78,10 @@ export class HaTileInfo extends LitElement {
         --ha-tile-info-primary-line-height,
         var(--ha-line-height-normal)
       );
+      --tile-info-primary-min-height: var(
+        --ha-tile-info-primary-min-height,
+        auto
+      );
       --tile-info-primary-letter-spacing: var(
         --ha-tile-info-primary-letter-spacing,
         0.1px
@@ -106,28 +117,38 @@ export class HaTileInfo extends LitElement {
       flex-direction: column;
       align-items: flex-start;
       justify-content: center;
+      gap: var(--tile-info-gap);
+      min-height: var(--tile-info-min-height);
     }
-    span,
-    ::slotted(*) {
+    .primary span,
+    ::slotted([slot="primary"]),
+    .secondary span,
+    ::slotted([slot="secondary"]) {
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
       width: 100%;
     }
     .primary {
+      display: flex;
+      align-items: center;
+      width: 100%;
       font-size: var(--tile-info-primary-font-size);
       font-weight: var(--tile-info-primary-font-weight);
       line-height: var(--tile-info-primary-line-height);
       letter-spacing: var(--tile-info-primary-letter-spacing);
       color: var(--tile-info-primary-color);
+      min-height: var(--tile-info-primary-min-height);
     }
     .secondary {
+      display: flex;
+      align-items: center;
+      width: 100%;
       font-size: var(--tile-info-secondary-font-size);
       font-weight: var(--tile-info-secondary-font-weight);
       line-height: var(--tile-info-secondary-line-height);
       letter-spacing: var(--tile-info-secondary-letter-spacing);
       color: var(--tile-info-secondary-color);
-      width: 100%;
     }
     .placeholder {
       width: 140px;

src/data/energy.ts

@@ -793,6 +793,17 @@ const findEnergyDataCollection = (
   return (hass.connection as any)[key];
 };
 
+// The last-picked preset is remembered per energy collection, so each dashboard
+// reopens on its own default period. Derived from the connection key so the read
+// and write sides cannot drift apart.
+export const getEnergyDefaultPeriodStorageKey = (
+  hass: HomeAssistant,
+  collectionKey?: string
+): string => {
+  const [key] = convertCollectionKeyToConnection(hass, collectionKey);
+  return `energy-default-period-${key}`;
+};
+
 // When does the collection's day period need to roll over to the next day?
 // With `midnightRollover` (the real-time "Now" view) it rolls over right at
 // midnight. Otherwise it waits an hour, until the new day's first hourly
@@ -892,8 +903,9 @@ export const getEnergyDataCollection = (
   // The real-time "Now" view always tracks today; it shows live data even
   // before today's first statistic exists, so it never falls back to yesterday.
   const preferredPeriod =
-    (localStorage.getItem(`energy-default-period-${key}`) as DateRange) ||
-    "today";
+    (localStorage.getItem(
+      getEnergyDefaultPeriodStorageKey(hass, options.key)
+    ) as DateRange) || "today";
   const period =
     preferredPeriod === "today" && hour === "0" && !midnightRollover
       ? "yesterday"

src/data/integration.ts

@@ -1,6 +1,7 @@
 import type { Connection } from "home-assistant-js-websocket";
 import { createCollection } from "home-assistant-js-websocket";
 import type { LocalizeFunc } from "../common/translations/localize";
+import { sanitizeHttpUrl } from "../common/url/sanitize-http-url";
 import { debounce } from "../common/util/debounce";
 import type { HomeAssistant } from "../types";
 
@@ -28,7 +29,7 @@ export interface IntegrationManifest {
   domain: string;
   name: string;
   config_flow: boolean;
-  documentation: string;
+  documentation?: string;
   issue_tracker?: string;
   dependencies?: string[];
   after_dependencies?: string[];
@@ -78,11 +79,27 @@ export enum LogSeverity {
 
 export type IntegrationLogPersistance = "none" | "once" | "permanent";
 
+/**
+ * A custom integration supplies its own manifest, so its URLs are untrusted
+ * input. Strip them here, where manifests enter the frontend, so no consumer can
+ * turn one into a link that runs script.
+ */
+const sanitizeManifest = <T extends IntegrationManifest | undefined>(
+  manifest: T
+): T =>
+  manifest
+    ? ({
+        ...manifest,
+        documentation: sanitizeHttpUrl(manifest.documentation),
+        issue_tracker: sanitizeHttpUrl(manifest.issue_tracker),
+      } as T)
+    : manifest;
+
 export const integrationIssuesUrl = (
   domain: string,
   manifest: IntegrationManifest
 ) =>
-  manifest.issue_tracker ||
+  sanitizeHttpUrl(manifest.issue_tracker) ||
   `https://github.com/home-assistant/core/issues?q=is%3Aissue+is%3Aopen+label%3A%22integration%3A+${domain}%22`;
 
 export const domainToName = (
@@ -101,7 +118,9 @@ export const fetchIntegrationManifests = (
   if (integrations) {
     params.integrations = integrations;
   }
-  return hass.callWS<IntegrationManifest[]>(params);
+  return hass
+    .callWS<IntegrationManifest[]>(params)
+    .then((manifests) => manifests.map(sanitizeManifest));
 };
 
 export const fetchIntegrationManifestsCollection = async (
@@ -113,7 +132,7 @@ export const fetchIntegrationManifestsCollection = async (
   });
   const manifests: DomainManifestLookup = {};
   for (const manifest of fetched) {
-    manifests[manifest.domain] = manifest;
+    manifests[manifest.domain] = sanitizeManifest(manifest);
   }
   setValue(manifests);
   // One-time fetch — nothing to unsubscribe from
@@ -125,7 +144,10 @@ export const fetchIntegrationManifestsCollection = async (
 export const fetchIntegrationManifest = (
   hass: HomeAssistant,
   integration: string
-) => hass.callWS<IntegrationManifest>({ type: "manifest/get", integration });
+) =>
+  hass
+    .callWS<IntegrationManifest>({ type: "manifest/get", integration })
+    .then(sanitizeManifest);
 
 export const fetchIntegrationSetups = (hass: HomeAssistant) =>
   hass.callWS<IntegrationSetup[]>({ type: "integration/setup_info" });

src/data/media-player.ts

@@ -208,6 +208,29 @@ export const browseMediaPlayer = (
     media_content_type: mediaContentType,
   });
 
+export interface SearchMediaResult {
+  result: MediaPlayerItem[];
+}
+
+export const searchMediaPlayer = (
+  hass: HomeAssistant,
+  entityId: string,
+  searchQuery: string,
+  mediaContentId?: string,
+  mediaContentType?: string,
+  mediaFilterClasses?: string[]
+): Promise<SearchMediaResult> =>
+  hass.callWS<SearchMediaResult>({
+    type: "media_player/search_media",
+    entity_id: entityId,
+    search_query: searchQuery,
+    // the backend requires these two to be passed together, and JSON
+    // serialization drops them both when the current item is the root
+    media_content_id: mediaContentId,
+    media_content_type: mediaContentType,
+    media_filter_classes: mediaFilterClasses,
+  });
+
 export const getCurrentProgress = (stateObj: MediaPlayerEntity): number => {
   let progress = stateObj.attributes.media_position!;
 

src/data/media_source.ts

@@ -1,5 +1,5 @@
 import type { HomeAssistant } from "../types";
-import type { MediaPlayerItem } from "./media-player";
+import type { MediaPlayerItem, SearchMediaResult } from "./media-player";
 
 export interface ResolvedMediaSource {
   url: string;
@@ -24,10 +24,6 @@ export const browseLocalMediaPlayer = (
     media_content_id: mediaContentId,
   });
 
-export interface SearchMediaResult {
-  result: MediaPlayerItem[];
-}
-
 export const searchMedia = (
   hass: HomeAssistant,
   mediaContentId: string | undefined,

src/data/ws-slugify.ts

@@ -0,0 +1,10 @@
+import type { HomeAssistantApi } from "../types";
+
+export const fetchSlug = (
+  api: HomeAssistantApi,
+  text: string
+): Promise<{ slug: string }> =>
+  api.callWS<{ slug: string }>({
+    type: "slugify",
+    text,
+  });

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

@@ -7,6 +7,7 @@ import { createRef, ref } from "lit/directives/ref";
 import memoizeOne from "memoize-one";
 import type { HASSDomEvent } from "../../common/dom/fire_event";
 import { fireEvent } from "../../common/dom/fire_event";
+import { sanitizeHttpUrl } from "../../common/url/sanitize-http-url";
 import "../../components/ha-button";
 import "../../components/ha-dialog";
 import "../../components/ha-dialog-footer";
@@ -337,6 +338,13 @@ class DataEntryFlowDialog extends DirtyStateProviderMixin<
         this._params.manifest?.is_built_in) ||
       !!this._params.manifest?.documentation;
 
+    const documentationLink = this._params.manifest?.is_built_in
+      ? documentationUrl(
+          this.hass,
+          `/integrations/${this._params.manifest.domain}`
+        )
+      : this._params.manifest?.documentation;
+
     const dialogTitle = this._getDialogTitle();
     const dialogSubtitle = this._getDialogSubtitle();
 
@@ -368,19 +376,15 @@ class DataEntryFlowDialog extends DirtyStateProviderMixin<
             : nothing
         }
         ${
-          showDocumentationLink && !this._loading && this._step
+          showDocumentationLink &&
+          documentationLink &&
+          !this._loading &&
+          this._step
             ? html`
                 <a
                   slot="headerActionItems"
                   class="help"
-                  href=${
-                    this._params.manifest!.is_built_in
-                      ? documentationUrl(
-                          this.hass,
-                          `/integrations/${this._params.manifest!.domain}`
-                        )
-                      : this._params.manifest!.documentation
-                  }
+                  href=${documentationLink}
                   target="_blank"
                   rel="noreferrer noopener"
                 >
@@ -542,21 +546,29 @@ class DataEntryFlowDialog extends DirtyStateProviderMixin<
                 </ha-button>
               </ha-dialog-footer>
             `;
-      case "external":
+      case "external": {
+        const externalUrl = sanitizeHttpUrl(this._step.url);
         return html`
           <ha-dialog-footer slot="footer">
-            <ha-button
-              slot="primaryAction"
-              href=${this._step.url}
-              target="_blank"
-              rel="noreferrer"
-            >
-              ${this.hass.localize(
-                "ui.panel.config.integrations.config_flow.external_step.open_site"
-              )}
-            </ha-button>
+            ${
+              externalUrl
+                ? html`
+                    <ha-button
+                      slot="primaryAction"
+                      href=${externalUrl}
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      ${this.hass.localize(
+                        "ui.panel.config.integrations.config_flow.external_step.open_site"
+                      )}
+                    </ha-button>
+                  `
+                : nothing
+            }
           </ha-dialog-footer>
         `;
+      }
       case "create_entry": {
         const devices = this._devices(
           this._params!.flowConfig.showDevices,

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

@@ -1,6 +1,7 @@
 import type { CSSResultGroup, TemplateResult, PropertyValues } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import { sanitizeHttpUrl } from "../../common/url/sanitize-http-url";
 import type { DataEntryFlowStepExternal } from "../../data/data_entry_flow";
 import type { HomeAssistant } from "../../types";
 import type { FlowConfig } from "./show-dialog-data-entry-flow";
@@ -24,7 +25,11 @@ class StepFlowExternal extends LitElement {
 
   protected firstUpdated(changedProps: PropertyValues<this>) {
     super.firstUpdated(changedProps);
-    window.open(this.step.url);
+    // Opened without user interaction, so only ever follow an http(s) URL
+    const url = sanitizeHttpUrl(this.step.url);
+    if (url) {
+      window.open(url);
+    }
   }
 
   static get styles(): CSSResultGroup {

src/dialogs/http-pending-config/dialog-http-pending-config.ts

@@ -43,12 +43,19 @@ export class DialogHttpPendingConfig
 
   private _interval?: number;
 
+  // This dialog must only be dismissed through its own footer buttons
+  // (confirm / revert / close). This flag is flipped right before such a
+  // button closes the dialog, so `closeDialog()` can refuse every other
+  // close request (navigation, back button, `closeAllDialogs`, …).
+  private _resolved = false;
+
   public showDialog(params: HttpPendingConfigDialogParams): void {
     this._params = params;
     this._open = true;
     this._busy = undefined;
     this._error = undefined;
     this._reverted = false;
+    this._resolved = false;
     this._startCountdown();
     // The field labels live in the config panel fragment, which is not loaded
     // yet when this dialog pops up on startup. Load it so the changed-field
@@ -57,6 +64,12 @@ export class DialogHttpPendingConfig
   }
 
   public closeDialog(): boolean {
+    // Refuse programmatic close requests (navigation, back button,
+    // `closeAllDialogs`) so a pending HTTP config is never left silently
+    // unresolved. The dialog only closes once the user picks a footer action.
+    if (!this._resolved) {
+      return false;
+    }
     this._open = false;
     this._stopCountdown();
     return true;
@@ -337,6 +350,9 @@ export class DialogHttpPendingConfig
   }
 
   private _notifyResolved(): void {
+    // Mark the dialog as user-resolved so `closeDialog()` is allowed to close
+    // it; every footer action calls this before setting `_open = false`.
+    this._resolved = true;
     this._params?.onResolved?.();
     // The form on Settings > System > Network may be mounted and showing
     // stale state; let it know to refetch.

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

@@ -9,6 +9,7 @@ import { consumeLocalize } from "../../../common/decorators/consume-context-entr
 import { transform } from "../../../common/decorators/transform";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import type { LocalizeFunc } from "../../../common/translations/localize";
+import { sanitizeHttpUrl } from "../../../common/url/sanitize-http-url";
 import "../../../components/buttons/ha-progress-button";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
@@ -232,6 +233,7 @@ class MoreInfoUpdate extends LitElement {
     }
 
     const createBackupTexts = this._computeCreateBackupTexts();
+    const releaseUrl = sanitizeHttpUrl(this.stateObj.attributes.release_url);
 
     return html`
       <div class="content">
@@ -283,14 +285,10 @@ class MoreInfoUpdate extends LitElement {
           </div>
 
           ${
-            this.stateObj.attributes.release_url
+            releaseUrl
               ? html`<div class="row">
                   <div class="key">
-                    <a
-                      href=${this.stateObj.attributes.release_url}
-                      target="_blank"
-                      rel="noreferrer"
-                    >
+                    <a href=${releaseUrl} target="_blank" rel="noreferrer">
                       ${this._localize(
                         "ui.dialogs.more_info_control.update.release_announcement"
                       )}

src/entrypoints/custom-panel.ts

@@ -1,3 +1,4 @@
+import type { Connection } from "home-assistant-js-websocket";
 import type { CSSResult } from "lit";
 import { fireEvent } from "../common/dom/fire_event";
 import { isNavigationClick } from "../common/dom/is-navigation-click";
@@ -7,6 +8,7 @@ import { navigate } from "../common/navigate";
 import type { CustomPanelInfo } from "../data/panel_custom";
 import { baseEntrypointStyles } from "../resources/styles";
 import { createCustomPanelElement } from "../util/custom-panel/create-custom-panel-element";
+import { dropRealmCollections } from "../util/custom-panel/drop-realm-collections";
 import { loadCustomPanel } from "../util/custom-panel/load-custom-panel";
 import { setCustomPanelProperties } from "../util/custom-panel/set-custom-panel-properties";
 
@@ -29,8 +31,14 @@ window.loadES5Adapter = () => {
 
 let panelEl: HTMLElement | undefined;
 let initialized = false;
+// Kept so we can clean up after ourselves on pagehide without depending on
+// `window.parent.customPanel`, which `_cleanupPanel()` may already have deleted.
+let connection: Connection | undefined;
 
 function setProperties(properties) {
+  if (properties.hass?.connection) {
+    connection = properties.hass.connection;
+  }
   if (!panelEl) {
     return;
   }
@@ -150,4 +158,9 @@ window.addEventListener("pagehide", () => {
   while (document.body.lastChild) {
     document.body.removeChild(document.body.lastChild);
   }
+  // The connection is owned by the main window and outlives this realm, so any
+  // collection we created on it has to go with us.
+  if (connection) {
+    dropRealmCollections(connection);
+  }
 });

src/html/index.html.template

@@ -18,38 +18,15 @@
     <meta name="referrer" content="same-origin" />
     <meta name="theme-color" content="{{ theme_color }}" />
     <meta name="color-scheme" content="dark light" />
-    <link rel="preload" href="/static/fonts/roboto/Roboto-Regular.woff2" as="font" type="font/woff2" crossorigin>
     <%= renderTemplate("_style_base.html.template") %>
     <style>
-      @font-face {
-        font-family: "Roboto Launch Screen";
-        font-display: block;
-        src: url("/static/fonts/roboto/Roboto-Regular.woff2") format("woff2");
-        font-weight: 400;
-        font-style: normal;
-      }
-      @keyframes fade-out {
-        from {
-          opacity: 1;
-        }
-        to {
-          opacity: 0;
-        }
-      }
-      ::view-transition-group(launch-screen) {
-        animation-duration: var(--ha-animation-duration-normal, 250ms);
-        animation-timing-function: ease-out;
-      }
-      ::view-transition-old(launch-screen) {
-        animation: fade-out var(--ha-animation-duration-normal, 250ms) ease-out;
-      }
       html {
         background-color: var(--primary-background-color, #fafafa);
         color: var(--primary-text-color, #212121);
         height: 100vh;
       }
       #ha-launch-screen {
-        font-family: "Roboto Launch Screen", sans-serif;
+        font-family: ui-sans-serif, system-ui, sans-serif;
         position: fixed;
         top: 0;
         left: 0;
@@ -61,7 +38,8 @@
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        view-transition-name: launch-screen;
+        user-select: none;
+        -webkit-user-select: none;
         background-color: var(--primary-background-color, #fafafa);
         z-index: 100;
         transition: opacity var(--ha-animation-duration-normal, 250ms) ease-out;
@@ -98,7 +76,7 @@
       }
       #ha-launch-screen .ha-launch-screen-spacer-bottom {
         flex: 1;
-        padding-top: 48px;
+        padding-top: 16px;
       }
       .ohf-logo {
         margin: max(var(--safe-area-inset-bottom, 0px), 48px) 0;

src/layouts/ha-init-page.ts

@@ -1,5 +1,6 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-button";
 
@@ -59,7 +60,7 @@ export class HaInitPage extends LitElement {
               : nothing
           }
         `
-      : html`<p>
+      : html`<p class=${classMap({ "loading-text": !this.migration })}>
           ${
             this.migration
               ? html`<span class="migration-text"
@@ -68,7 +69,7 @@ export class HaInitPage extends LitElement {
                     "Database upgrade is in progress, Home Assistant will not start until the upgrade is completed.\n\nThe upgrade may need a long time to complete, please be patient."
                   }</span
                 >`
-              : this.localize?.("ui.init.loading") || "Loading data"
+              : this.localize?.("ui.init.loading") || "Loading..."
           }
         </p>`;
   }
@@ -120,6 +121,9 @@ export class HaInitPage extends LitElement {
     .migration-text {
       white-space: pre-line;
     }
+    .loading-text {
+      opacity: 0.66;
+    }
   `;
 }
 

src/panels/config/application_credentials/dialog-add-application-credential.ts

@@ -107,6 +107,9 @@ export class DialogAddApplicationCredential extends DirtyStateProviderMixin<Cred
     const selectedDomainName = this._params.selectedDomain
       ? domainToName(this.hass.localize, this._domain!)
       : "";
+    const documentationLink = this._manifest?.is_built_in
+      ? documentationUrl(this.hass, `/integrations/${this._domain}`)
+      : this._manifest?.documentation;
     return html`
       <ha-dialog
         .open=${this._open}
@@ -139,17 +142,9 @@ export class DialogAddApplicationCredential extends DirtyStateProviderMixin<Cred
                             }
                           )}
                           ${
-                            this._manifest?.is_built_in ||
-                            this._manifest?.documentation
+                            documentationLink
                               ? html`<a
-                                  href=${
-                                    this._manifest.is_built_in
-                                      ? documentationUrl(
-                                          this.hass,
-                                          `/integrations/${this._domain}`
-                                        )
-                                      : this._manifest.documentation
-                                  }
+                                  href=${documentationLink}
                                   target="_blank"
                                   rel="noreferrer"
                                 >

src/panels/config/apps/app-view/info/supervisor-app-info.ts

@@ -42,6 +42,7 @@ import { computeDomain } from "../../../../../common/entity/compute_domain";
 import { navigate } from "../../../../../common/navigate";
 import { capitalizeFirstLetter } from "../../../../../common/string/capitalize-first-letter";
 import type { LocalizeKeys } from "../../../../../common/translations/localize";
+import { sanitizeHttpUrl } from "../../../../../common/url/sanitize-http-url";
 import "../../../../../components/buttons/ha-progress-button";
 import "../../../../../components/chips/ha-assist-chip";
 import "../../../../../components/chips/ha-chip-set";
@@ -549,7 +550,7 @@ class SupervisorAppInfo extends MobileAwareMixin(LitElement) {
             "ui.panel.config.apps.dashboard.visit_app_page",
             {
               name: html`<a
-                href=${this._currentAddon.url!}
+                href=${ifDefined(sanitizeHttpUrl(this._currentAddon.url))}
                 target="_blank"
                 rel="noreferrer"
                 >${getAppDisplayName(
@@ -1107,7 +1108,11 @@ class SupervisorAppInfo extends MobileAwareMixin(LitElement) {
 
   private get _pathWebui(): string | null {
     const addon = this._currentAddon as HassioAddonDetails;
-    return addon.webui!.replace("[HOST]", document.location.hostname);
+    return (
+      sanitizeHttpUrl(
+        addon.webui!.replace("[HOST]", document.location.hostname)
+      ) ?? null
+    );
   }
 
   private get _computeShowWebUI(): boolean | "" | null {

src/panels/config/automation/condition/types/ha-automation-condition-platform.ts

@@ -185,20 +185,17 @@ export class HaPlatformCondition extends LitElement {
       )
     );
 
+    const documentationLink = this._manifest?.is_built_in
+      ? documentationUrl(this.hass, `/conditions/${this.condition.condition}`)
+      : this._manifest?.documentation;
+
     return html`
       <div class="description">
         ${description ? html`<p>${description}</p>` : nothing}
         ${
-          this._manifest
+          documentationLink
             ? html`<a
-                href=${
-                  this._manifest.is_built_in
-                    ? documentationUrl(
-                        this.hass,
-                        `/conditions/${this.condition.condition}`
-                      )
-                    : this._manifest.documentation
-                }
+                href=${documentationLink}
                 title=${this.hass.localize(
                   "ui.components.service-control.integration_doc"
                 )}

src/panels/config/automation/trigger/types/ha-automation-trigger-platform.ts

@@ -180,20 +180,17 @@ export class HaPlatformTrigger extends LitElement {
       )
     );
 
+    const documentationLink = this._manifest?.is_built_in
+      ? documentationUrl(this.hass, `/triggers/${this.trigger.trigger}`)
+      : this._manifest?.documentation;
+
     return html`
       <div class="description">
         ${description ? html`<p>${description}</p>` : nothing}
         ${
-          this._manifest
+          documentationLink
             ? html`<a
-                href=${
-                  this._manifest.is_built_in
-                    ? documentationUrl(
-                        this.hass,
-                        `/triggers/${this.trigger.trigger}`
-                      )
-                    : this._manifest.documentation
-                }
+                href=${documentationLink}
                 title=${this.hass.localize(
                   "ui.components.service-control.integration_doc"
                 )}

src/panels/config/core/ha-config-entity-id-format.ts

@@ -3,9 +3,10 @@ import { mdiRestore } from "@mdi/js";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { consumeLocalize } from "../../../common/decorators/consume-context-entry";
-import { computeEntityIdFormatExample } from "../../../common/entity/compute_entity_id_format_example";
 import type { LocalizeFunc } from "../../../common/translations/localize";
+import { debounce } from "../../../common/util/debounce";
 import type { HaProgressButton } from "../../../components/buttons/ha-progress-button";
 import "../../../components/buttons/ha-progress-button";
 import "../../../components/ha-alert";
@@ -23,11 +24,13 @@ import {
   type EntityIdFormat,
   type EntityIdPart,
 } from "../../../data/entity_id_format";
+import { fetchSlug } from "../../../data/ws-slugify";
 import { haStyle } from "../../../resources/styles";
 import { documentationUrl } from "../../../util/documentation-url";
 import "./ha-entity-id-format-editor";
 
 const EXAMPLE_DOMAIN = "sensor";
+const PREVIEW_DEBOUNCE_MS = 200;
 
 @customElement("ha-config-entity-id-format")
 export class HaConfigEntityIdFormat extends LitElement {
@@ -47,6 +50,10 @@ export class HaConfigEntityIdFormat extends LitElement {
 
   @state() private _error?: string;
 
+  @state() private _preview?: string;
+
+  @state() private _previewError = false;
+
   protected async firstUpdated(changedProps: PropertyValues<this>) {
     super.firstUpdated(changedProps);
     try {
@@ -57,12 +64,47 @@ export class HaConfigEntityIdFormat extends LitElement {
     }
   }
 
-  private _examples: Record<EntityIdPart, string> = {
-    area: "Living room",
-    device: "Thermostat",
-    entity: "Temperature",
-    floor: "Ground floor",
-  };
+  protected updated(changedProps: PropertyValues) {
+    super.updated(changedProps);
+    if (
+      (changedProps.has("_format") || changedProps.has("_localize")) &&
+      this._format
+    ) {
+      if (changedProps.get("_format") === undefined) {
+        this._updatePreview();
+      } else {
+        this._debouncedUpdatePreview();
+      }
+    }
+  }
+
+  private _examples = memoizeOne(
+    (localize: LocalizeFunc): Record<EntityIdPart, string> => ({
+      area: localize("ui.panel.config.entity_id_format.card.examples.area"),
+      device: localize("ui.panel.config.entity_id_format.card.examples.device"),
+      entity: localize("ui.panel.config.entity_id_format.card.examples.entity"),
+      floor: localize("ui.panel.config.entity_id_format.card.examples.floor"),
+    })
+  );
+
+  private _debouncedUpdatePreview = debounce(
+    () => this._updatePreview(),
+    PREVIEW_DEBOUNCE_MS
+  );
+
+  private async _updatePreview() {
+    const examples = this._examples(this._localize);
+    const fullName = this._format!.map((part) => examples[part])
+      .filter(Boolean)
+      .join(" ");
+    try {
+      const { slug } = await fetchSlug(this._api, fullName);
+      this._preview = slug;
+      this._previewError = false;
+    } catch (_err: any) {
+      this._previewError = true;
+    }
+  }
 
   protected render() {
     return html`
@@ -131,13 +173,20 @@ export class HaConfigEntityIdFormat extends LitElement {
   }
 
   private _renderPreview() {
-    const example = computeEntityIdFormatExample(this._format!, this._examples);
     return html`
       <div class="preview">
         <span class="preview-label">
           ${this._localize("ui.panel.config.entity_id_format.card.preview")}
         </span>
-        <code>${EXAMPLE_DOMAIN}.${example}</code>
+        ${
+          this._previewError
+            ? html`<ha-alert alert-type="error">
+                ${this._localize(
+                  "ui.panel.config.entity_id_format.card.preview_error"
+                )}
+              </ha-alert>`
+            : html`<code>${EXAMPLE_DOMAIN}.${this._preview ?? "…"}</code>`
+        }
       </div>
     `;
   }

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

@@ -96,6 +96,10 @@ import "../../../layouts/hass-subpage";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import { isHelperDomain } from "../helpers/const";
+import {
+  isHomeAssistantUrl,
+  sanitizeLinkUrl,
+} from "../../../common/url/sanitize-http-url";
 import { createSearchParam } from "../../../common/url/search-params";
 import { brandsUrl } from "../../../util/brands-url";
 import { fileDownload } from "../../../util/file_download";
@@ -1263,12 +1267,11 @@ export class HaConfigDevicePage extends LitElement {
 
     const deviceActions: DeviceAction[] = [];
 
-    const configurationUrlIsHomeAssistant =
-      device.configuration_url?.startsWith("homeassistant://") || false;
+    const configurationUrlIsHomeAssistant = isHomeAssistantUrl(
+      device.configuration_url
+    );
 
-    const configurationUrl = configurationUrlIsHomeAssistant
-      ? device.configuration_url?.replace("homeassistant://", "/")
-      : device.configuration_url;
+    const configurationUrl = sanitizeLinkUrl(device.configuration_url);
 
     if (configurationUrl) {
       deviceActions.push({

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

@@ -61,6 +61,10 @@ export class HaEnergyPowerConfig extends LitElement {
     }
   }
 
+  private get _requiredError(): string {
+    return this.hass.localize("ui.common.error_required");
+  }
+
   protected render(): TemplateResult {
     return html`
       <p class="power-section-label">
@@ -119,6 +123,9 @@ export class HaEnergyPowerConfig extends LitElement {
                   `${this.localizeBaseKey}.power_helper` as LocalizeKeys,
                   { unit: this._powerUnits?.join(", ") || "" }
                 )}
+                required
+                .invalid=${!this.powerConfig.stat_rate}
+                .errorMessage=${this._requiredError}
               ></ha-statistic-picker>
             `
           : nothing
@@ -138,11 +145,16 @@ export class HaEnergyPowerConfig extends LitElement {
                 .helper=${this.hass.localize(
                   `${this.localizeBaseKey}.type_inverted_description` as LocalizeKeys
                 )}
+                required
+                .invalid=${!this.powerConfig.stat_rate_inverted}
+                .errorMessage=${this._requiredError}
               ></ha-statistic-picker>
             `
           : nothing
       }
       ${
+        // These two exclude each other, so they keep their clear button
+        // (and therefore no required marker) to stay swappable.
         this.powerType === "two_sensors"
           ? html`
               <ha-statistic-picker
@@ -157,6 +169,8 @@ export class HaEnergyPowerConfig extends LitElement {
                   this.powerConfig.stat_rate_to,
                 ].filter((id): id is string => Boolean(id))}
                 @value-changed=${this._fromPowerChanged}
+                .invalid=${!this.powerConfig.stat_rate_from}
+                .errorMessage=${this._requiredError}
               ></ha-statistic-picker>
               <ha-statistic-picker
                 .hass=${this.hass}
@@ -170,6 +184,8 @@ export class HaEnergyPowerConfig extends LitElement {
                   this.powerConfig.stat_rate_from,
                 ].filter((id): id is string => Boolean(id))}
                 @value-changed=${this._toPowerChanged}
+                .invalid=${!this.powerConfig.stat_rate_to}
+                .errorMessage=${this._requiredError}
               ></ha-statistic-picker>
             `
           : nothing

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

@@ -8,6 +8,7 @@ import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { round } from "../../../common/number/round";
 import { blankBeforePercent } from "../../../common/translations/blank_before_percent";
+import { sanitizeHttpUrl } from "../../../common/url/sanitize-http-url";
 import "../../../components/chart/ha-chart-base";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
@@ -228,7 +229,7 @@ class HaConfigHardwareOverview extends SubscribeMixin(LitElement) {
         ) as ConfigEntry[];
       boardId = boardData.board!.hassio_board_id;
       boardName = boardData.name;
-      documentationURL = boardData.url;
+      documentationURL = sanitizeHttpUrl(boardData.url);
       imageURL = hardwareBrandsUrl(
         {
           category: "boards",

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

@@ -300,6 +300,7 @@ class HaScheduleForm extends LitElement {
     const newValue = { ...this._item };
 
     const endFormatted = formatTime24h(end, this.hass.locale, this.hass.config);
+    newValue[day] = [...newValue[day]];
     newValue[day][index] = {
       ...newValue[day][index],
       from: value.from,
@@ -337,6 +338,7 @@ class HaScheduleForm extends LitElement {
     };
 
     if (newDay === day) {
+      newValue[day] = [...newValue[day]];
       newValue[day][index] = event;
     } else {
       newValue[day].splice(index, 1);

src/panels/config/integrations/ha-config-flow-card.ts

@@ -10,6 +10,10 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../../common/dom/fire_event";
+import {
+  isHomeAssistantUrl,
+  sanitizeLinkUrl,
+} from "../../../common/url/sanitize-http-url";
 import "../../../components/ha-button";
 import "../../../components/ha-dropdown";
 import "../../../components/ha-dropdown-item";
@@ -46,6 +50,15 @@ export class HaConfigFlowCard extends LitElement {
 
   protected render(): TemplateResult {
     const attention = ATTENTION_SOURCES.includes(this.flow.context.source);
+    const configurationUrlIsHomeAssistant = isHomeAssistantUrl(
+      this.flow.context.configuration_url
+    );
+    const configurationUrl = sanitizeLinkUrl(
+      this.flow.context.configuration_url
+    );
+    const documentationLink = this.manifest?.is_built_in
+      ? documentationUrl(this.hass, `/integrations/${this.manifest.domain}`)
+      : this.manifest?.documentation;
     return html`
       <ha-integration-action-card
         class=${classMap({
@@ -78,7 +91,7 @@ export class HaConfigFlowCard extends LitElement {
           )}
         </ha-button>
         ${
-          this.flow.context.configuration_url || this.manifest || attention
+          configurationUrl || documentationLink || attention
             ? html`<ha-dropdown
                 slot="header-button"
                 placement="bottom-end"
@@ -90,19 +103,12 @@ export class HaConfigFlowCard extends LitElement {
                   .path=${mdiDotsVertical}
                 ></ha-icon-button>
                 ${
-                  this.flow.context.configuration_url
+                  configurationUrl
                     ? html`<a
-                        href=${this.flow.context.configuration_url.replace(
-                          /^homeassistant:\/\//,
-                          "/"
-                        )}
+                        href=${configurationUrl}
                         rel="noreferrer"
                         target=${
-                          this.flow.context.configuration_url.startsWith(
-                            "homeassistant://"
-                          )
-                            ? "_self"
-                            : "_blank"
+                          configurationUrlIsHomeAssistant ? "_self" : "_blank"
                         }
                       >
                         <ha-dropdown-item>
@@ -122,16 +128,9 @@ export class HaConfigFlowCard extends LitElement {
                     : nothing
                 }
                 ${
-                  this.manifest
+                  documentationLink
                     ? html`<a
-                        href=${
-                          this.manifest.is_built_in
-                            ? documentationUrl(
-                                this.hass,
-                                `/integrations/${this.manifest.domain}`
-                              )
-                            : this.manifest.documentation
-                        }
+                        href=${documentationLink}
                         rel="noreferrer"
                         target="_blank"
                       >

src/panels/config/integrations/ha-config-integration-page.ts

@@ -368,21 +368,18 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
       this.domain
     );
 
+    const documentationLink = this._manifest?.is_built_in
+      ? documentationUrl(this.hass, `/integrations/${this._manifest.domain}`)
+      : this._manifest?.documentation;
+
     return html`
       <hass-subpage .hass=${this.hass} .narrow=${this.narrow}>
         ${
-          this._manifest
+          documentationLink
             ? html`
                 <a
                   slot="toolbar-icon"
-                  href=${
-                    this._manifest.is_built_in
-                      ? documentationUrl(
-                          this.hass,
-                          `/integrations/${this._manifest.domain}`
-                        )
-                      : this._manifest.documentation
-                  }
+                  href=${documentationLink}
                   rel="noreferrer"
                   target="_blank"
                 >

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

@@ -14,11 +14,14 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../../../common/config/is_component_loaded";
+import type { HASSDomCurrentTargetEvent } from "../../../../../common/dom/fire_event";
 import { navigate } from "../../../../../common/navigate";
 import { animationStyles } from "../../../../../resources/theme/animations.globals";
 import "../../../../../components/ha-alert";
 import "../../../../../components/ha-button";
 import "../../../../../components/ha-card";
+import "../../../../../components/buttons/ha-progress-button";
+import type { HaProgressButton } from "../../../../../components/buttons/ha-progress-button";
 
 import "../../../../../components/ha-icon-next";
 import "../../../../../components/ha-md-list";
@@ -67,6 +70,8 @@ class ZHAConfigDashboard extends LitElement {
 
   @state() private _error?: string;
 
+  @state() private _generatingBackup = false;
+
   protected firstUpdated(changedProperties: PropertyValues<this>) {
     super.firstUpdated(changedProperties);
     if (!this.hass) {
@@ -355,17 +360,18 @@ class ZHAConfigDashboard extends LitElement {
                   "ui.panel.config.zha.configuration_page.download_backup_description"
                 )}
               </span>
-              <ha-button
+              <ha-progress-button
                 appearance="plain"
                 slot="end"
                 size="s"
+                .iconPath=${mdiDownload}
+                .progress=${this._generatingBackup}
                 @click=${this._createAndDownloadBackup}
               >
-                <ha-svg-icon .path=${mdiDownload} slot="start"></ha-svg-icon>
                 ${this.hass.localize(
                   "ui.panel.config.zha.configuration_page.download_backup_action"
                 )}
-              </ha-button>
+              </ha-progress-button>
             </ha-md-list-item>
             <ha-md-list-item>
               <span slot="headline">
@@ -408,30 +414,32 @@ class ZHAConfigDashboard extends LitElement {
     this._configuration = await fetchZHAConfiguration(this.hass!);
   }
 
-  private async _createAndDownloadBackup(): Promise<void> {
+  private async _createAndDownloadBackup(
+    ev: HASSDomCurrentTargetEvent<HaProgressButton>
+  ): Promise<void> {
+    // Captured up front: currentTarget is null once the first await resolves.
+    const button = ev.currentTarget;
     let backup_and_metadata: ZHANetworkBackupAndMetadata;
 
+    // Reading the backup from the coordinator can take 5-30 seconds.
+    this._generatingBackup = true;
+
     try {
       backup_and_metadata = await createZHANetworkBackup(this.hass!);
     } catch (err: any) {
+      button.actionError();
       showAlertDialog(this, {
-        title: "Failed to create backup",
+        title: this.hass.localize(
+          "ui.panel.config.zha.configuration_page.backup_failed"
+        ),
         text: err.message,
         warning: true,
       });
       return;
+    } finally {
+      this._generatingBackup = false;
     }
 
-    if (!backup_and_metadata.is_complete) {
-      await showAlertDialog(this, {
-        title: "Backup is incomplete",
-        text: "A backup has been created but it is incomplete and cannot be restored. This is a coordinator firmware limitation.",
-      });
-    }
-
-    const backupJSON: string =
-      "data:text/plain;charset=utf-8," +
-      encodeURIComponent(JSON.stringify(backup_and_metadata.backup, null, 4));
     const backupTime: Date = new Date(
       Date.parse(backup_and_metadata.backup.backup_time)
     );
@@ -441,7 +449,23 @@ class ZHAConfigDashboard extends LitElement {
       basename = `Incomplete ${basename}`;
     }
 
-    fileDownload(backupJSON, `${basename}.json`);
+    const blob = new Blob(
+      [JSON.stringify(backup_and_metadata.backup, null, 4)],
+      { type: "application/json" }
+    );
+    fileDownload(URL.createObjectURL(blob), `${basename}.json`);
+    button.actionSuccess();
+
+    if (!backup_and_metadata.is_complete) {
+      showAlertDialog(this, {
+        title: this.hass.localize(
+          "ui.panel.config.zha.configuration_page.backup_incomplete_title"
+        ),
+        text: this.hass.localize(
+          "ui.panel.config.zha.configuration_page.backup_incomplete_text"
+        ),
+      });
+    }
   }
 
   private _openOptionFlow() {
@@ -517,10 +541,6 @@ class ZHAConfigDashboard extends LitElement {
           --md-item-overflow: visible;
         }
 
-        ha-button[size="s"] ha-svg-icon {
-          --mdc-icon-size: 16px;
-        }
-
         .network-status div.heading {
           display: flex;
           align-items: center;

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts

@@ -11,6 +11,7 @@ import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { computeDeviceNameDisplay } from "../../../../../common/entity/compute_device_name";
+import { sanitizeHttpUrl } from "../../../../../common/url/sanitize-http-url";
 import { groupBy } from "../../../../../common/util/group-by";
 import "../../../../../components/buttons/ha-progress-button";
 import type { HaProgressButton } from "../../../../../components/buttons/ha-progress-button";
@@ -154,8 +155,9 @@ class ZWaveJSNodeConfig extends LitElement {
                     device_database: html`<a
                       rel="noreferrer noopener"
                       href=${
-                        this._nodeMetadata?.device_database_url ||
-                        "https://devices.zwave-js.io"
+                        sanitizeHttpUrl(
+                          this._nodeMetadata?.device_database_url
+                        ) || "https://devices.zwave-js.io"
                       }
                       target="_blank"
                       >${this.hass.localize(

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

@@ -4,6 +4,7 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import type { LocalizeFunc } from "../../../common/translations/localize";
+import { sanitizeHttpUrl } from "../../../common/url/sanitize-http-url";
 import { extractSearchParam } from "../../../common/url/search-params";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
@@ -199,6 +200,9 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
 
     const isHighlighted = this._highlightedPreviewFeature === previewFeatureId;
 
+    const feedbackUrl = sanitizeHttpUrl(preview_feature.feedback_url);
+    const reportIssueUrl = sanitizeHttpUrl(preview_feature.report_issue_url);
+
     // Build description with learn more link if available
     const descriptionWithLink = preview_feature.learn_more_url
       ? `${description}\n\n[${this.hass.localize("ui.panel.config.labs.learn_more")}](${preview_feature.learn_more_url})`
@@ -237,11 +241,11 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
         <div class="card-actions">
           <div>
             ${
-              preview_feature.feedback_url
+              feedbackUrl
                 ? html`
                     <ha-button
                       appearance="plain"
-                      href=${preview_feature.feedback_url}
+                      href=${feedbackUrl}
                       target="_blank"
                       rel="noopener noreferrer"
                     >
@@ -253,11 +257,11 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
                 : nothing
             }
             ${
-              preview_feature.report_issue_url
+              reportIssueUrl
                 ? html`
                     <ha-button
                       appearance="plain"
-                      href=${preview_feature.report_issue_url}
+                      href=${reportIssueUrl}
                       target="_blank"
                       rel="noopener noreferrer"
                     >

src/panels/config/logs/dialog-system-log-detail.ts

@@ -25,6 +25,15 @@ import { showToast } from "../../../util/toast";
 import type { SystemLogDetailDialogParams } from "./show-dialog-system-log-detail";
 import { formatSystemLogTime } from "./util";
 
+/** Compares the host, so a URL that merely contains ours does not pass. */
+const isOfficialDocumentationUrl = (url: string): boolean => {
+  try {
+    return new URL(url).hostname === "www.home-assistant.io";
+  } catch (_err) {
+    return false;
+  }
+};
+
 @customElement("dialog-system-log-detail")
 class DialogSystemLogDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -76,7 +85,12 @@ class DialogSystemLogDetail extends LitElement {
       this._manifest &&
       (this._manifest.is_built_in ||
         // Custom components with our official docs should not link to our docs
-        !this._manifest.documentation.includes("://www.home-assistant.io"));
+        (!!this._manifest.documentation &&
+          !isOfficialDocumentationUrl(this._manifest.documentation)));
+
+    const documentationLink = this._manifest?.is_built_in
+      ? documentationUrl(this.hass, `/integrations/${this._manifest.domain}`)
+      : this._manifest?.documentation;
 
     const title = this.hass.localize("ui.panel.config.logs.details", {
       level: html`<span class=${item.level}
@@ -124,18 +138,12 @@ class DialogSystemLogDetail extends LitElement {
                     ${
                       !this._manifest ||
                       // Can happen with custom integrations
-                      !showDocumentation
+                      !showDocumentation ||
+                      !documentationLink
                         ? ""
                         : html`
                             (<a
-                              href=${
-                                this._manifest.is_built_in
-                                  ? documentationUrl(
-                                      this.hass,
-                                      `/integrations/${this._manifest.domain}`
-                                    )
-                                  : this._manifest.documentation
-                              }
+                              href=${documentationLink}
                               target="_blank"
                               rel="noreferrer"
                               >${this.hass.localize(

src/panels/config/network/ha-config-http-form.ts

@@ -3,6 +3,7 @@ import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { mainWindow } from "../../../common/dom/get_main_window";
 import {
   IP_ADDRESS_OR_NETWORK_PATTERN,
   IP_ADDRESS_PATTERN,
@@ -24,7 +25,10 @@ import type {
   HttpConfig,
   HttpConfigWithMeta,
 } from "../../../data/http";
-import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 
@@ -167,6 +171,10 @@ class HaConfigHttpForm extends LitElement {
 
   @state() private _activeConfigType?: ActiveConfigType;
 
+  // The built-in default config as reported by core; used to show the default
+  // port in the helper text instead of a hard-coded value.
+  @state() private _default?: HttpConfigWithMeta;
+
   // A pending config that was reverted/failed and kept only for display.
   @state() private _revertedPending?: HttpConfigWithMeta;
 
@@ -201,6 +209,8 @@ class HaConfigHttpForm extends LitElement {
     const portChanged =
       !!this._stable && this._config?.server_port !== this._stable.server_port;
 
+    const hasListenAddresses = !!this._config?.server_host?.some(Boolean);
+
     return html`
       <ha-card
         outlined
@@ -255,6 +265,17 @@ class HaConfigHttpForm extends LitElement {
                 `
               : nothing
           }
+          ${
+            hasListenAddresses
+              ? html`
+                  <ha-alert alert-type="warning">
+                    ${this.hass.localize(
+                      "ui.panel.config.network.http.server_host_warning"
+                    )}
+                  </ha-alert>
+                `
+              : nothing
+          }
           ${
             this._error
               ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
@@ -309,12 +330,16 @@ class HaConfigHttpForm extends LitElement {
 
   private async _fetchConfig(): Promise<void> {
     try {
-      const { stable, pending, active_config_type } = await fetchHttpConfig(
-        this.hass
-      );
+      const {
+        stable,
+        pending,
+        active_config_type,
+        default: defaultConfig,
+      } = await fetchHttpConfig(this.hass);
       this._stable = stable;
       this._config = { ...stable };
       this._activeConfigType = active_config_type;
+      this._default = defaultConfig;
       // An active trial pending (no error) is handled by the global
       // confirm/revert dialog. A pending carrying an error was reverted or
       // failed to apply and is kept only so we can surface it here.
@@ -351,6 +376,12 @@ class HaConfigHttpForm extends LitElement {
     if ("type" in schema && schema.type === "expandable") {
       return "";
     }
+    if (schema.name === "server_port") {
+      return this.hass.localize(
+        "ui.panel.config.network.http.helpers.server_port",
+        { port: this._default?.server_port ?? 8123 }
+      );
+    }
     return (
       this.hass.localize(
         `ui.panel.config.network.http.helpers.${schema.name}` as any
@@ -365,6 +396,63 @@ class HaConfigHttpForm extends LitElement {
     this._showNoChanges = false;
   }
 
+  // Build a link to the new address for an address-changing restart, so the
+  // user (still on the old address) can jump to it once Home Assistant is back.
+  // Best-effort: skip Home Assistant Cloud remote UI (Nabu Casa), and skip when
+  // the current page is not on the old port — that usually means a reverse
+  // proxy, where swapping the port would point at the wrong place. Even when
+  // shown, the new address may not be reachable (e.g. a firewall).
+  private _newAddressUrl(): string | undefined {
+    if (!this._stable || !this._config) {
+      return undefined;
+    }
+    const loc = mainWindow.location;
+    if (loc.hostname.endsWith("nabu.casa")) {
+      return undefined;
+    }
+    const oldHttps = !!this._stable.ssl_certificate;
+    const newHttps = !!this._config.ssl_certificate;
+    const oldPort = this._stable.server_port ?? (oldHttps ? 443 : 80);
+    const newPort = this._config.server_port ?? (newHttps ? 443 : 80);
+    // The reachable address only changes when the scheme or the port changes.
+    if (oldHttps === newHttps && oldPort === newPort) {
+      return undefined;
+    }
+    const currentPort = loc.port
+      ? Number(loc.port)
+      : loc.protocol === "https:"
+        ? 443
+        : 80;
+    if (currentPort !== oldPort) {
+      return undefined;
+    }
+    const url = new URL(loc.origin);
+    url.protocol = newHttps ? "https:" : "http:";
+    url.port = String(newPort);
+    return url.toString();
+  }
+
+  private _showNewAddress(url: string): void {
+    showAlertDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.network.http.restart_address.title"
+      ),
+      text: html`
+        <p>
+          ${this.hass.localize(
+            "ui.panel.config.network.http.restart_address.text"
+          )}
+        </p>
+        <a href=${url} rel="noreferrer noopener">${url}</a>
+        <p class="dialog-note">
+          ${this.hass.localize(
+            "ui.panel.config.network.http.restart_address.note"
+          )}
+        </p>
+      `,
+    });
+  }
+
   private async _save(): Promise<void> {
     if (!this._config || !this._stable) {
       return;
@@ -393,24 +481,44 @@ class HaConfigHttpForm extends LitElement {
       return;
     }
 
+    // Capture the new address before the restart drops the connection.
+    const newAddressUrl = this._newAddressUrl();
+
     this._saving = true;
     this._error = undefined;
     this._fieldErrors = {};
     this._showNoChanges = false;
+    // Drop empty entries from multi-value fields, and omit the field entirely
+    // once it is empty so the backend applies its default. Otherwise a cleared
+    // "IP address to bind to" would submit [""] / [], which binds to nothing.
+    const config = Object.fromEntries(
+      Object.entries(this._config).map(([key, value]) => {
+        if (Array.isArray(value)) {
+          const filtered = value.filter(Boolean);
+          return [key, filtered.length ? filtered : undefined];
+        }
+        return [key, value];
+      })
+    ) as HttpConfig;
     try {
-      const result = await saveHttpConfig(this.hass, this._config);
+      const result = await saveHttpConfig(this.hass, config);
       if (!result.restart) {
         this._showNoChanges = true;
+      } else if (newAddressUrl) {
+        // restart === true: a restart is in flight. The reply usually races
+        // with the connection drop; if we do reach this branch, offer the new
+        // address so the user can follow along.
+        this._showNewAddress(newAddressUrl);
       }
-      // restart === true: a restart is in flight. The reply usually races with
-      // the connection drop; if we do reach this branch, the disconnected
-      // overlay will appear in moments. Leave the form as is.
     } catch (err: any) {
       // The restart kills the WS connection before the ack — that's expected.
       if (
         err?.error?.code === ERR_CONNECTION_LOST ||
         err === ERR_CONNECTION_LOST
       ) {
+        if (newAddressUrl) {
+          this._showNewAddress(newAddressUrl);
+        }
         return;
       }
       this._handleSaveError(err);

src/panels/config/network/ha-config-url-form.ts

@@ -15,6 +15,8 @@ import type { HaInputCopy } from "../../../components/input/ha-input-copy";
 import type { CloudStatus } from "../../../data/cloud";
 import { fetchCloudStatus } from "../../../data/cloud";
 import { saveCoreConfig } from "../../../data/core";
+import type { HttpConfigWithMeta } from "../../../data/http";
+import { fetchHttpConfig } from "../../../data/http";
 import { getNetworkUrls, type NetworkUrls } from "../../../data/network";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import type { HomeAssistant } from "../../../types";
@@ -34,6 +36,12 @@ class ConfigUrlForm extends SubscribeMixin(LitElement) {
 
   @state() private _internal_url = "";
 
+  // Stable HTTP config from core; used to build a realistic internal URL
+  // placeholder (scheme from SSL, port from the configured/default port).
+  @state() private _httpConfig?: HttpConfigWithMeta;
+
+  @state() private _httpDefault?: HttpConfigWithMeta;
+
   @state() private _cloudStatus?: CloudStatus | null;
 
   @state() private _showCustomExternalUrl = false;
@@ -97,6 +105,28 @@ class ConfigUrlForm extends SubscribeMixin(LitElement) {
       }
     }
 
+    // Build realistic URL placeholders: use https when an SSL certificate is
+    // configured, and only show the port when it differs from the scheme
+    // default (80 for http, 443 for https).
+    const useHttps = this._httpConfig?.ssl_certificate ? true : httpUseHttps;
+    const placeholderPort =
+      this._httpConfig?.server_port ?? this._httpDefault?.server_port;
+    const placeholderParts = {
+      protocol: useHttps ? "https" : "http",
+      port:
+        placeholderPort && placeholderPort !== (useHttps ? 443 : 80)
+          ? `:${placeholderPort}`
+          : "",
+    };
+    const internalUrlPlaceholder = this.hass.localize(
+      "ui.panel.config.url.internal_url_placeholder",
+      placeholderParts
+    );
+    const externalUrlPlaceholder = this.hass.localize(
+      "ui.panel.config.url.external_url_placeholder",
+      placeholderParts
+    );
+
     return html`
       <ha-card
         outlined
@@ -157,7 +187,7 @@ class ConfigUrlForm extends SubscribeMixin(LitElement) {
               data-name="external_url"
               type="url"
               .maskedToggle=${!(this._showCustomExternalUrl && canEdit)}
-              placeholder="https://example.duckdns.org:8123"
+              .placeholder=${externalUrlPlaceholder}
               .value=${externalUrl}
               .maskedValue=${
                 this._showCustomExternalUrl && canEdit
@@ -260,9 +290,7 @@ class ConfigUrlForm extends SubscribeMixin(LitElement) {
               data-name="internal_url"
               .maskedToggle=${!(this._showCustomInternalUrl && canEdit)}
               type="url"
-              placeholder=${this.hass.localize(
-                "ui.panel.config.url.internal_url_placeholder"
-              )}
+              .placeholder=${internalUrlPlaceholder}
               .value=${internalUrl}
               .maskedValue=${
                 this._showCustomInternalUrl && canEdit
@@ -325,6 +353,14 @@ class ConfigUrlForm extends SubscribeMixin(LitElement) {
       this._cloudStatus = null;
     }
     this._fetchUrls();
+    // Best-effort: the placeholder still works without it, just without a port.
+    fetchHttpConfig(this.hass).then(
+      ({ stable, default: defaultConfig }) => {
+        this._httpConfig = stable;
+        this._httpDefault = defaultConfig;
+      },
+      () => undefined
+    );
   }
 
   private _toggleCloud(ev: Event) {

src/panels/config/repairs/dialog-repairs-issue.ts

@@ -4,6 +4,10 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { isNavigationClick } from "../../../common/dom/is-navigation-click";
+import {
+  isHomeAssistantUrl,
+  sanitizeLinkUrl,
+} from "../../../common/url/sanitize-http-url";
 import "../../../components/ha-alert";
 import "../../../components/ha-dialog";
 import "../../../components/ha-button";
@@ -52,8 +56,10 @@ class DialogRepairsIssue extends LitElement {
       return nothing;
     }
 
-    const learnMoreUrlIsHomeAssistant =
-      this._issue.learn_more_url?.startsWith("homeassistant://") || false;
+    const learnMoreUrlIsHomeAssistant = isHomeAssistantUrl(
+      this._issue.learn_more_url
+    );
+    const learnMoreUrl = sanitizeLinkUrl(this._issue.learn_more_url);
 
     const dialogTitle =
       this.hass.localize(
@@ -127,20 +133,13 @@ class DialogRepairsIssue extends LitElement {
             }
           </ha-button>
           ${
-            this._issue.learn_more_url
+            learnMoreUrl
               ? html`
                   <ha-button
                     slot="primaryAction"
                     appearance="filled"
                     rel="noopener noreferrer"
-                    href=${
-                      learnMoreUrlIsHomeAssistant
-                        ? this._issue.learn_more_url.replace(
-                            "homeassistant://",
-                            "/"
-                          )
-                        : this._issue.learn_more_url
-                    }
+                    href=${learnMoreUrl}
                     .target=${learnMoreUrlIsHomeAssistant ? "" : "_blank"}
                     @click=${
                       learnMoreUrlIsHomeAssistant ? this.closeDialog : undefined

src/panels/config/repairs/dialog-system-information.ts

@@ -5,6 +5,8 @@ import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { formatDateTime } from "../../../common/datetime/format_date_time";
 import { fireEvent } from "../../../common/dom/fire_event";
+import { sanitizeHttpUrl } from "../../../common/url/sanitize-http-url";
+import { sanitizeNavigationPath } from "../../../common/url/sanitize-navigation-path";
 import { copyToClipboard } from "../../../common/util/copy-clipboard";
 import { subscribePollingCollection } from "../../../common/util/subscribe-polling";
 import "../../../components/ha-alert";
@@ -335,14 +337,15 @@ class DialogSystemInformation extends LitElement {
             if (info.type === "pending") {
               value = html` <ha-spinner size="small"></ha-spinner> `;
             } else if (info.type === "failed") {
+              const moreInfoUrl = sanitizeHttpUrl(info.more_info);
               value = html`
                 <span class="error">${info.error}</span>${
-                  !info.more_info
+                  !moreInfoUrl
                     ? ""
                     : html`
                         –
                         <a
-                          href=${info.more_info}
+                          href=${moreInfoUrl}
                           target="_blank"
                           rel="noreferrer noopener"
                         >
@@ -378,18 +381,22 @@ class DialogSystemInformation extends LitElement {
           `);
         }
         if (domain !== "homeassistant") {
+          // No target, so an in-app path is also a valid destination here
+          const manageUrl =
+            sanitizeHttpUrl(domainInfo.manage_url) ??
+            sanitizeNavigationPath(domainInfo.manage_url);
           sections.push(html`
             <div class="card-header">
               <h3>${domainToName(this.hass.localize, domain)}</h3>
               ${
-                !domainInfo.manage_url
+                !manageUrl
                   ? ""
                   : html`
                       <ha-button
                         appearance="plain"
                         size="s"
                         class="manage"
-                        href=${domainInfo.manage_url}
+                        href=${manageUrl}
                       >
                         ${this.hass.localize(
                           "ui.panel.config.info.system_health.manage"

src/panels/config/repairs/integrations-startup-time.ts

@@ -43,11 +43,15 @@ class IntegrationsStartupTime extends LitElement {
       <ha-md-list>
         ${this._setups?.map((setup) => {
           const manifest = this._manifests && this._manifests[setup.domain];
-          const docLink = manifest
-            ? manifest.is_built_in
-              ? documentationUrl(this.hass, `/integrations/${manifest.domain}`)
-              : manifest.documentation
-            : "";
+          const docLink =
+            (manifest
+              ? manifest.is_built_in
+                ? documentationUrl(
+                    this.hass,
+                    `/integrations/${manifest.domain}`
+                  )
+                : manifest.documentation
+              : "") || "";
 
           const setupSeconds = setup.seconds?.toFixed(2);
           return html`

src/panels/config/tools/action/tools-action.ts

@@ -5,6 +5,7 @@ import { dump, JSON_SCHEMA, load } from "js-yaml";
 import type { CSSResultGroup, TemplateResult, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import { until } from "lit/directives/until";
 import memoizeOne from "memoize-one";
@@ -17,6 +18,8 @@ import {
   isTemplate,
 } from "../../../../common/string/has-template";
 import type { LocalizeFunc } from "../../../../common/translations/localize";
+import { sanitizeHttpUrl } from "../../../../common/url/sanitize-http-url";
+import { sanitizeNavigationPath } from "../../../../common/url/sanitize-navigation-path";
 import { extractSearchParam } from "../../../../common/url/search-params";
 import { copyToClipboard } from "../../../../common/util/copy-clipboard";
 import type { HaProgressButton } from "../../../../components/buttons/ha-progress-button";
@@ -562,7 +565,10 @@ class HaPanelDevAction extends MatchMinHeightMixin(LitElement) {
                           `
                         : html`
                             <a
-                              href=${resolved.url}
+                              href=${ifDefined(
+                                sanitizeHttpUrl(resolved.url) ??
+                                  sanitizeNavigationPath(resolved.url)
+                              )}
                               target="_blank"
                               rel="noreferrer"
                               ><ha-button>

src/panels/config/tools/template/tools-template.ts

@@ -1,17 +1,27 @@
+import {
+  mdiRestore,
+  mdiTrashCanOutline,
+  mdiViewSplitHorizontal,
+  mdiViewSplitVertical,
+} from "@mdi/js";
+import memoizeOne from "memoize-one";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
-import type { HASSDomEvent } from "../../../../common/dom/fire_event";
+import { customElement, property, state } from "lit/decorators";
+import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import type { LocalizeKeys } from "../../../../common/translations/localize";
 import { debounce } from "../../../../common/util/debounce";
 import "../../../../components/ha-alert";
-import "../../../../components/ha-button";
 import "../../../../components/ha-card";
 import "../../../../components/ha-code-editor";
 import "../../../../components/ha-expansion-panel";
+import type { HaIconButtonToolbarItem } from "../../../../components/ha-icon-button-toolbar";
+import "../../../../components/ha-label";
 import "../../../../components/ha-spinner";
+import "../../../../components/ha-split-panel";
+import type { HaSplitPanel } from "../../../../components/ha-split-panel";
+import "../../../../components/ha-svg-icon";
 import "../../../../components/ha-tip";
 import type { RenderTemplateResult } from "../../../../data/ws-templates";
 import { subscribeRenderTemplate } from "../../../../data/ws-templates";
@@ -50,11 +60,18 @@ const TEMPLATE_DOCS_LINKS: { key: string; path: string }[] = [
   { key: "docs_functions", path: "/template-functions/" },
 ];
 
+const STORAGE_KEY_TEMPLATE = "panel-dev-template-template";
+const STORAGE_KEY_SPLIT_POSITION = "panel-dev-template-split-position";
+const STORAGE_KEY_SPLIT_ORIENTATION = "panel-dev-template-split-orientation";
+const DEFAULT_SPLIT_POSITION = 50;
+
+type SplitOrientation = "horizontal" | "vertical";
+
 @customElement("tools-template")
 class HaPanelDevTemplate extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ type: Boolean }) public narrow = false;
+  @property({ type: Boolean, reflect: true }) public narrow = false;
 
   @state() private _error?: string;
 
@@ -66,9 +83,9 @@ class HaPanelDevTemplate extends LitElement {
 
   @state() private _unsubRenderTemplate?: Promise<UnsubscribeFunc>;
 
-  @state() private _descriptionExpanded = false;
+  @state() private _splitPosition = DEFAULT_SPLIT_POSITION;
 
-  @query("ha-tip") private _editorTip?: HTMLElement;
+  @state() private _splitOrientation: SplitOrientation = "horizontal";
 
   private _template = "";
 
@@ -78,8 +95,6 @@ class HaPanelDevTemplate extends LitElement {
   // its late-arriving results discarded.
   private _subscribeRequestId = 0;
 
-  private _tipResizeObserver?: ResizeObserver;
-
   public connectedCallback() {
     super.connectedCallback();
     if (this._template && !this._unsubRenderTemplate) {
@@ -90,18 +105,25 @@ class HaPanelDevTemplate extends LitElement {
   public disconnectedCallback() {
     super.disconnectedCallback();
     this._unsubscribeTemplate();
-    this._tipResizeObserver?.disconnect();
-    this._tipResizeObserver = undefined;
   }
 
   protected firstUpdated() {
-    if (localStorage && localStorage["panel-dev-template-template"]) {
-      this._template = localStorage["panel-dev-template-template"];
+    if (localStorage && localStorage[STORAGE_KEY_TEMPLATE]) {
+      this._template = localStorage[STORAGE_KEY_TEMPLATE];
     } else {
       this._template = DEMO_TEMPLATE;
     }
+    const storedPosition = localStorage?.[STORAGE_KEY_SPLIT_POSITION];
+    if (storedPosition) {
+      const parsed = parseFloat(storedPosition);
+      if (!isNaN(parsed) && parsed >= 0 && parsed <= 100) {
+        this._splitPosition = parsed;
+      }
+    }
+    if (localStorage?.[STORAGE_KEY_SPLIT_ORIENTATION] === "vertical") {
+      this._splitOrientation = "vertical";
+    }
     this._subscribeTemplate();
-    this._observeTipHeight();
     this._inited = true;
   }
 
@@ -114,15 +136,20 @@ class HaPanelDevTemplate extends LitElement {
           : "dict"
         : type;
 
+    const editorCard = this._renderEditorCard();
+    const resultCard = this._renderResultCard(type, resultType);
+
+    // On narrow viewports side-by-side is too cramped, so force the (still
+    // resizable) stacked layout and hide the orientation toggle.
+    const orientation = this.narrow ? "vertical" : this._splitOrientation;
+
     return html`
-      <div class="content">
+      <div class="about">
         <ha-expansion-panel
           .header=${this.hass.localize(
             "ui.panel.config.tools.tabs.templates.about"
           )}
           outlined
-          .expanded=${this._descriptionExpanded}
-          @expanded-changed=${this._expandedChanged}
         >
           <div class="description">
             <p>
@@ -164,92 +191,159 @@ class HaPanelDevTemplate extends LitElement {
           </div>
         </ha-expansion-panel>
       </div>
-      <div
-        class="content ${classMap({
-          layout: !this.narrow,
-          horizontal: !this.narrow,
-        })}"
-        style="--description-expanded: ${this._descriptionExpanded ? 1 : 0}"
-      >
-        <ha-card
-          class="edit-pane"
-          header=${this.hass.localize(
-            "ui.panel.config.tools.tabs.templates.editor"
-          )}
-        >
-          <div class="card-content">
-            <ha-code-editor
-              mode="jinja2"
-              .value=${this._template}
-              .error=${this._error}
-              autofocus
-              autocomplete-entities
-              autocomplete-icons
-              @value-changed=${this._templateChanged}
-              dir="ltr"
-            ></ha-code-editor>
-          </div>
-          <div class="card-actions">
-            <ha-button appearance="plain" @click=${this._restoreDemo}>
-              ${this.hass.localize(
-                "ui.panel.config.tools.tabs.templates.reset"
-              )}
-            </ha-button>
-            <ha-button appearance="plain" @click=${this._clear}>
-              ${this.hass.localize("ui.common.clear")}
-            </ha-button>
-          </div>
-          <ha-tip>
-            ${this.hass.localize(
-              "ui.panel.config.tools.tabs.templates.keyboard_tip",
-              {
-                autocomplete: html`<kbd>Ctrl</kbd>+<kbd>Space</kbd>`,
-              }
-            )}
-          </ha-tip>
-        </ha-card>
 
-        <ha-card
-          class="render-pane"
-          header=${this.hass.localize(
-            "ui.panel.config.tools.tabs.templates.result"
-          )}
-        >
-          <div class="card-content ha-scrollbar">
-            ${
-              this._rendering
-                ? html`<ha-spinner
-                    class="render-spinner"
-                    size="small"
-                  ></ha-spinner>`
-                : ""
-            }
-            ${
-              this._error
-                ? html`<ha-alert
-                    alert-type=${this._errorLevel?.toLowerCase() || "error"}
-                    >${this._error}</ha-alert
-                  >`
-                : nothing
-            }
-            ${
-              this._templateResult
-                ? html`<pre
-                      class="rendered ${classMap({
-                        [resultType]: resultType,
-                      })}"
-                    >
+      <ha-split-panel
+        class="panes ${orientation === "vertical" ? "vertical" : ""}"
+        .position=${this._splitPosition}
+        .orientation=${orientation}
+        snap="50%"
+        @wa-reposition=${this._splitRepositioned}
+      >
+        <div slot="start" class="pane">${editorCard}</div>
+        <div slot="end" class="pane">${resultCard}</div>
+        ${this.narrow ? nothing : this._renderOrientationToggle()}
+      </ha-split-panel>
+    `;
+  }
+
+  private _renderOrientationToggle() {
+    const label = this.hass.localize(
+      this._splitOrientation === "vertical"
+        ? "ui.panel.config.tools.tabs.templates.layout_side_by_side"
+        : "ui.panel.config.tools.tabs.templates.layout_stacked"
+    );
+    return html`
+      <button
+        type="button"
+        slot="divider"
+        class="divider-toggle"
+        .title=${label}
+        aria-label=${label}
+        @mousedown=${stopPropagation}
+        @touchstart=${stopPropagation}
+        @click=${this._toggleOrientation}
+      >
+        <ha-svg-icon
+          .path=${
+            this._splitOrientation === "vertical"
+              ? mdiViewSplitVertical
+              : mdiViewSplitHorizontal
+          }
+        ></ha-svg-icon>
+      </button>
+    `;
+  }
+
+  // Reset/clear live in the editor toolbar next to the built-in undo/redo,
+  // copy, search and fullscreen buttons; the trailing divider separates them.
+  private _editorToolbarItems = memoizeOne(
+    (
+      localize: HomeAssistant["localize"]
+    ): (HaIconButtonToolbarItem | string)[] => [
+      {
+        id: "restore-demo",
+        label: localize("ui.panel.config.tools.tabs.templates.reset"),
+        path: mdiRestore,
+        action: () => this._restoreDemo(),
+      },
+      {
+        id: "clear",
+        label: localize("ui.common.clear"),
+        path: mdiTrashCanOutline,
+        action: () => this._clear(),
+      },
+      "divider",
+    ]
+  );
+
+  private _renderEditorCard() {
+    return html`
+      <ha-card
+        class="edit-pane"
+        header=${this.hass.localize(
+          "ui.panel.config.tools.tabs.templates.editor"
+        )}
+      >
+        <div class="card-content">
+          <ha-code-editor
+            mode="jinja2"
+            .value=${this._template}
+            .error=${this._error}
+            .toolbarItems=${this._editorToolbarItems(this.hass.localize)}
+            autofocus
+            autocomplete-entities
+            autocomplete-icons
+            @value-changed=${this._templateChanged}
+            dir="ltr"
+          ></ha-code-editor>
+        </div>
+        ${
+          this.narrow
+            ? nothing
+            : html`
+                <ha-tip>
+                  ${this.hass.localize(
+                    "ui.panel.config.tools.tabs.templates.keyboard_tip",
+                    {
+                      autocomplete: html`<kbd>Ctrl</kbd>+<kbd>Space</kbd>`,
+                    }
+                  )}
+                </ha-tip>
+              `
+        }
+      </ha-card>
+    `;
+  }
+
+  private _renderResultCard(type: string, resultType: string) {
+    const showEmptyState =
+      !this._error && !this._rendering && !this._template?.trim();
+
+    return html`
+      <ha-card
+        class="render-pane"
+        header=${this.hass.localize(
+          "ui.panel.config.tools.tabs.templates.result"
+        )}
+      >
+        <div class="card-content ha-scrollbar">
+          ${
+            this._rendering
+              ? html`<ha-spinner
+                  class="render-spinner"
+                  size="small"
+                ></ha-spinner>`
+              : ""
+          }
+          ${
+            this._error
+              ? html`<ha-alert
+                  alert-type=${this._errorLevel?.toLowerCase() || "error"}
+                  >${this._error}</ha-alert
+                >`
+              : nothing
+          }
+          ${
+            showEmptyState
+              ? html`<div class="empty">
+                  ${this.hass.localize(
+                    "ui.panel.config.tools.tabs.templates.result_placeholder"
+                  )}
+                </div>`
+              : this._templateResult
+                ? html`
+                    <ha-label dense>
+                      ${this.hass.localize(
+                        "ui.panel.config.tools.tabs.templates.result_type"
+                      )}:
+                      ${resultType}
+                    </ha-label>
+                    <pre class="rendered">
 ${
   type === "object"
     ? JSON.stringify(this._templateResult.result, null, 2)
     : this._templateResult.result
 }</pre>
-                    <p>
-                      ${this.hass.localize(
-                        "ui.panel.config.tools.tabs.templates.result_type"
-                      )}:
-                      ${resultType}
-                    </p>
                     ${
                       this._templateResult.listeners.time
                         ? html`
@@ -316,109 +410,179 @@ ${
                                   )}
                                 </span>`
                               : nothing
-                    }`
+                    }
+                  `
                 : nothing
-            }
-          </div>
-        </ha-card>
-      </div>
+          }
+        </div>
+      </ha-card>
     `;
   }
 
-  private _observeTipHeight() {
-    if (!this._editorTip || this._tipResizeObserver) {
-      return;
-    }
-    this._tipResizeObserver = new ResizeObserver((entries) => {
-      const height =
-        entries[0]?.borderBoxSize?.[0]?.blockSize ??
-        entries[0]?.contentRect.height;
-      if (height) {
-        this.style.setProperty("--tip-height", `${height}px`);
-      }
-    });
-    this._tipResizeObserver.observe(this._editorTip);
+  private _splitRepositioned(ev: Event) {
+    this._splitPosition = (ev.target as HaSplitPanel).position;
+    this._storeSplitPosition();
   }
 
-  private _expandedChanged(
-    ev: HASSDomEvent<HASSDomEvents["expanded-changed"]>
-  ) {
-    this._descriptionExpanded = ev.detail.expanded;
+  private _toggleOrientation() {
+    this._splitOrientation =
+      this._splitOrientation === "vertical" ? "horizontal" : "vertical";
+    if (this._inited) {
+      localStorage[STORAGE_KEY_SPLIT_ORIENTATION] = this._splitOrientation;
+    }
   }
 
+  private _storeSplitPosition = debounce(
+    () => {
+      if (!this._inited) {
+        return;
+      }
+      localStorage[STORAGE_KEY_SPLIT_POSITION] = String(this._splitPosition);
+    },
+    500,
+    false
+  );
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,
       haStyleScrollbar,
       css`
         :host {
-          user-select: none;
+          display: flex;
+          flex-direction: column;
+          height: 100%;
         }
 
-        .content {
-          gap: var(--ha-space-4);
+        .about {
+          flex: none;
           padding: var(--ha-space-4);
-        }
-
-        .content:has(ha-expansion-panel) {
           padding-bottom: 0;
         }
 
-        .content.horizontal {
-          --panel-header-height: calc(
-            var(--header-height) + 1em * 2 + var(--ha-line-height-normal) *
-              var(--ha-font-size-m) + 1px + 2px
-          );
-          --description-pane-height: calc(
-            var(--ha-space-4) + 48px +
-              (
-                var(--ha-line-height-normal) * var(--ha-font-size-m) * 3 +
-                  var(--ha-space-1) * 2
-              ) *
-              var(--description-expanded) + var(--ha-card-border-width, 1px) * 2
-          );
-          --card-header-height: calc(
-            var(--ha-space-3) + var(--ha-space-4) +
-              var(--ha-line-height-expanded) *
-              var(--ha-card-header-font-size, var(--ha-font-size-2xl))
-          );
-          --card-actions-height: calc(1px + var(--ha-space-2) * 2 + 40px);
-          --tip-height-minimal: calc(
-            var(--mdc-icon-size, 24px) + var(--ha-space-4)
-          );
-          --edit-pane-height: calc(
-            100vh - var(--panel-header-height) - var(
-                --description-pane-height
-              ) - var(--ha-space-4) *
-              2
-          );
-          --code-mirror-max-height: calc(
-            var(--edit-pane-height) - var(--card-header-height) +
-              var(--ha-space-2) - var(--card-actions-height) - var(
-                --tip-height,
-                var(--tip-height-minimal)
-              ) - var(--ha-space-4) - var(--ha-card-border-width, 1px) *
-              2
-          );
+        .about a {
+          color: var(--primary-color);
+        }
+
+        .panes {
+          flex: 1;
+          min-height: 0;
+          box-sizing: border-box;
+          padding: var(--ha-space-4);
+          --ha-split-panel-min: 20%;
+          --ha-split-panel-max: 80%;
+          --ha-split-panel-divider-hit-area: var(--ha-space-4);
+        }
+
+        /* On wide viewports we slot our own handle (the orientation toggle)
+           into the divider, so hide the default grip. On narrow there is no
+           toggle, so keep the default grip as the resize affordance. */
+        :host(:not([narrow])) .panes {
+          --ha-split-panel-grip-display: none;
+        }
+
+        /* Orientation toggle that lives on the divider. Clicking it toggles
+           orientation; resizing is done by dragging the divider elsewhere. */
+        .divider-toggle {
+          position: relative;
+          z-index: 1;
+          flex: none;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          box-sizing: border-box;
+          width: 24px;
+          height: 24px;
+          margin: 0;
+          padding: 0;
+          border: 1px solid var(--divider-color);
+          border-radius: 50%;
+          background-color: var(--card-background-color);
+          color: var(--secondary-text-color);
+          cursor: pointer;
+          --mdc-icon-size: 16px;
+          transition:
+            color var(--ha-animation-duration-fast) ease-out,
+            border-color var(--ha-animation-duration-fast) ease-out;
+        }
+
+        @media (hover: hover) {
+          .divider-toggle:hover {
+            color: var(--primary-color);
+            border-color: var(--primary-color);
+          }
+        }
+
+        .divider-toggle:focus-visible {
+          outline: none;
+          color: var(--primary-color);
+          border-color: var(--primary-color);
+        }
+
+        .pane {
+          display: flex;
+          min-width: 0;
+          height: 100%;
+          box-sizing: border-box;
+          contain: size;
+        }
+
+        .pane[slot="start"] {
+          padding-inline-end: var(--ha-space-4);
+        }
+
+        .pane[slot="end"] {
+          padding-inline-start: var(--ha-space-4);
+        }
+
+        .panes.vertical .pane[slot="start"] {
+          padding-inline-end: 0;
+          padding-block-end: var(--ha-space-4);
+        }
+
+        .panes.vertical .pane[slot="end"] {
+          padding-inline-start: 0;
+          padding-block-start: var(--ha-space-4);
+        }
+
+        .pane ha-card {
+          flex: 1;
+          min-width: 0;
         }
 
         ha-card {
-          margin-bottom: var(--ha-space-4);
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          margin: 0;
+        }
+
+        .edit-pane .card-content {
+          flex: 1;
+          min-height: 0;
+          display: flex;
+        }
+
+        .edit-pane ha-code-editor {
+          flex: 1;
+          min-height: 0;
+          width: 100%;
+          --code-mirror-height: 100%;
+        }
+
+        .render-pane .card-content {
+          flex: 1;
+          min-height: 0;
+          overflow: auto;
+          display: flex;
+          flex-direction: column;
+          gap: var(--ha-space-2);
         }
 
         .edit-pane {
           direction: var(--direction);
         }
 
-        .edit-pane a {
-          color: var(--primary-color);
-        }
-
-        .content.horizontal > * {
-          width: 50%;
-          margin-bottom: 0px;
-        }
-
         .render-spinner {
           position: absolute;
           top: var(--ha-space-2);
@@ -428,10 +592,24 @@ ${
         }
 
         ha-alert {
-          margin-bottom: var(--ha-space-2);
           display: block;
         }
 
+        .render-pane ha-label {
+          align-self: flex-start;
+        }
+
+        .empty {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 100%;
+          min-height: 120px;
+          padding: var(--ha-space-4);
+          text-align: center;
+          color: var(--secondary-text-color);
+        }
+
         .rendered {
           font-family: var(--ha-font-family-code);
           -webkit-font-smoothing: var(--ha-font-smoothing);
@@ -439,6 +617,7 @@ ${
           clear: both;
           white-space: pre-wrap;
           background-color: var(--secondary-background-color);
+          border-radius: var(--ha-border-radius-md);
           padding: var(--ha-space-2);
           margin-top: 0;
           margin-bottom: 0;
@@ -447,7 +626,7 @@ ${
 
         p,
         ul {
-          margin-block-end: 0;
+          margin-block: 0;
         }
         .description > p {
           margin-block-start: 0;
@@ -468,26 +647,6 @@ ${
           color: var(--secondary-text-color);
         }
 
-        .render-pane .card-content {
-          user-select: text;
-        }
-
-        .content.horizontal .render-pane .card-content {
-          overflow: auto;
-          max-height: calc(
-            var(--code-mirror-max-height) +
-              47px - var(--ha-card-border-radius, var(--ha-border-radius-lg))
-          );
-        }
-
-        .content.horizontal .render-pane {
-          overflow: hidden;
-          padding-bottom: var(
-            --ha-card-border-radius,
-            var(--ha-border-radius-lg)
-          );
-        }
-
         .all_listeners {
           color: var(--warning-color);
         }
@@ -507,19 +666,6 @@ ${
           background-color: var(--secondary-background-color);
           white-space: nowrap;
         }
-
-        @media all and (max-width: 870px) {
-          .content ha-card {
-            max-width: 100%;
-          }
-        }
-
-        .card-actions {
-          display: flex;
-        }
-        .card-actions > ha-button:last-child {
-          margin-inline-start: auto;
-        }
       `,
     ];
   }
@@ -615,7 +761,7 @@ ${
     if (!this._inited) {
       return;
     }
-    localStorage["panel-dev-template-template"] = this._template;
+    localStorage[STORAGE_KEY_TEMPLATE] = this._template;
   }
 
   private async _restoreDemo() {
@@ -631,7 +777,7 @@ ${
     }
     this._template = DEMO_TEMPLATE;
     this._subscribeTemplate();
-    delete localStorage["panel-dev-template-template"];
+    delete localStorage[STORAGE_KEY_TEMPLATE];
   }
 
   private async _clear() {
@@ -647,12 +793,8 @@ ${
     }
     this._unsubscribeTemplate();
     this._template = "";
-    // Reset to empty result. Setting to 'undefined' results in a different visual
-    // behaviour compared to manually emptying the template input box.
-    this._templateResult = {
-      result: "",
-      listeners: { all: false, entities: [], domains: [], time: false },
-    };
+    // An empty template shows the placeholder empty state.
+    this._templateResult = undefined;
   }
 }
 

src/panels/iframe/ha-panel-iframe.ts

@@ -1,3 +1,4 @@
+import { sanitizeUrl } from "@braintree/sanitize-url";
 import { html, css, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
@@ -15,6 +16,19 @@ class HaPanelIframe extends LitElement {
   @property({ attribute: false }) panel!: PanelInfo<{ url: string }>;
 
   render() {
+    // The sandbox keeps allow-same-origin, so a javascript: URL would run in
+    // the frontend's own origin
+    if (sanitizeUrl(this.panel.config.url) === "about:blank") {
+      return html`
+        <hass-error-screen
+          .hass=${this.hass}
+          .narrow=${this.narrow}
+          error="Unable to load iframes with this URL."
+          rootnav
+        ></hass-error-screen>
+      `;
+    }
+
     if (
       location.protocol === "https:" &&
       new URL(this.panel.config.url, location.toString()).protocol !== "https:"

src/panels/logbook/ha-panel-logbook.ts

@@ -321,6 +321,9 @@ export class HaPanelLogbook extends LitElement {
       "entity_id",
       "state",
       "event_type",
+      "name",
+      "message",
+      "source",
       "context_id",
       "context_user_id",
       "context_event_type",
@@ -339,6 +342,9 @@ export class HaPanelLogbook extends LitElement {
         d.entity_id || "",
         csvSafeString(d.state),
         csvSafeString(d.attributes?.event_type),
+        csvSafeString(d.name),
+        csvSafeString(d.message),
+        csvSafeString(d.source),
         d.context_id || "",
         d.context_user_id || "",
         csvSafeString(d.context_event_type),

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

@@ -620,6 +620,9 @@ export class HuiAreaCard extends LitElement implements LovelaceCard {
       "--tile-color": color,
     };
 
+    const fixedInfoHeight =
+      this.layout === "grid" && this._config.grid_options?.rows !== "auto";
+
     return html`
       <ha-card style=${styleMap(style)}>
         ${
@@ -683,6 +686,7 @@ export class HuiAreaCard extends LitElement implements LovelaceCard {
         <ha-tile-container
           .featurePosition=${featurePosition}
           .vertical=${Boolean(this._config.vertical)}
+          .fixedInfoHeight=${fixedInfoHeight}
           .interactive=${Boolean(this._hasCardAction)}
           @action=${this._handleAction}
         >
@@ -699,6 +703,9 @@ export class HuiAreaCard extends LitElement implements LovelaceCard {
           </ha-tile-icon>
           <ha-tile-info
             slot="info"
+            class=${ifDefined(
+              this._config.vertical && fixedInfoHeight ? "twoline" : undefined
+            )}
             .primary=${primary}
             .secondary=${secondary}
           ></ha-tile-info>
@@ -818,6 +825,13 @@ export class HuiAreaCard extends LitElement implements LovelaceCard {
         justify-content: center;
         color: white;
       }
+      ha-tile-info.twoline::part(primary) {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        white-space: normal;
+        overflow-wrap: anywhere;
+      }
     `,
   ];
 }

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

@@ -1,3 +1,4 @@
+import { sanitizeUrl } from "@braintree/sanitize-url";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -52,6 +53,12 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
       throw new Error("URL required");
     }
 
+    // The sandbox keeps allow-same-origin, so a javascript: URL would run in
+    // the frontend's own origin
+    if (sanitizeUrl(config.url) === "about:blank") {
+      throw new Error("Invalid URL");
+    }
+
     this._config = config;
   }
 

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

@@ -40,6 +40,8 @@ export class HuiShortcutCard extends LitElement implements LovelaceCard {
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ attribute: false }) public layout?: string;
+
   @state() private _config?: ShortcutCardConfig;
 
   private _navInfo = new NavigationPathInfoController(this);
@@ -128,10 +130,14 @@ export class HuiShortcutCard extends LitElement implements LovelaceCard {
 
     const style = color ? { "--tile-color": color } : {};
 
+    const fixedInfoHeight =
+      this.layout === "grid" && this._config.grid_options?.rows !== "auto";
+
     return html`
       <ha-card style=${styleMap(style)}>
         <ha-tile-container
           .vertical=${Boolean(this._config.vertical)}
+          .fixedInfoHeight=${fixedInfoHeight}
           .interactive=${this._hasCardAction}
           .actionHandlerOptions=${{
             hasHold: hasAction(this._config.hold_action),

src/panels/lovelace/cards/hui-statistics-graph-card.ts

@@ -296,6 +296,10 @@ export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard {
       await this._getStatisticsMetaData(this._entityIds);
     }
     await this._getStatistics();
+    if (!this.isConnected) {
+      this._interval = undefined;
+      return;
+    }
     // statistics are created every hour
     if (!this._config?.energy_date_selection) {
       this._interval = window.setInterval(

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

@@ -81,6 +81,8 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ attribute: false }) public layout?: string;
+
   @state() private _config?: TileCardConfig;
 
   @state() private _featureContext: LovelaceCardFeatureContext = {};
@@ -288,11 +290,15 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
 
     const hasImage = Boolean(imageUrl);
 
+    const fixedInfoHeight =
+      this.layout === "grid" && this._config.grid_options?.rows !== "auto";
+
     return html`
       <ha-card style=${styleMap(style)} class=${classMap({ active })}>
         <ha-tile-container
           .featurePosition=${featurePosition}
           .vertical=${Boolean(this._config.vertical)}
+          .fixedInfoHeight=${fixedInfoHeight}
           .interactive=${this._hasCardAction}
           .actionHandlerOptions=${{
             hasHold: hasAction(this._config!.hold_action),

src/panels/lovelace/common/handle-action.ts

@@ -1,3 +1,4 @@
+import { sanitizeUrl } from "@braintree/sanitize-url";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { navigate } from "../../../common/navigate";
 import { forwardHaptic } from "../../../data/haptics";
@@ -133,7 +134,7 @@ export const handleAction = async (
       break;
     case "url": {
       if (actionConfig.url_path) {
-        window.open(actionConfig.url_path);
+        window.open(sanitizeUrl(actionConfig.url_path));
       } else {
         showToast(node, {
           message: hass.localize("ui.panel.lovelace.cards.actions.no_url"),

src/panels/lovelace/components/hui-energy-period-selector.ts

@@ -64,6 +64,7 @@ import {
   CompareMode,
   downloadEnergyData,
   getEnergyDataCollection,
+  getEnergyDefaultPeriodStorageKey,
 } from "../../../data/energy";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import type { HomeAssistant } from "../../../types";
@@ -544,7 +545,7 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
 
   private _presetSelected(ev) {
     localStorage.setItem(
-      `energy-default-period-_${this.collectionKey || "energy"}`,
+      getEnergyDefaultPeriodStorageKey(this.hass, this.collectionKey),
       RANGE_KEYS[ev.detail.index]
     );
   }

src/panels/lovelace/editor/card-editor/hui-card-picker.ts

@@ -123,8 +123,9 @@ export class HuiCardPicker extends LitElement {
       };
       const fuse = new Fuse(cards, options);
       cards = fuse.search(filter).map((result) => result.item);
-      return cardElements.filter((cardElement: CardElement) =>
-        cards.includes(cardElement.card)
+      return cardElements.filter(
+        (cardElement: CardElement) =>
+          cards.includes(cardElement.card) && cardElement.card.type !== "manual"
       );
     }
   );
@@ -140,7 +141,9 @@ export class HuiCardPicker extends LitElement {
     (cardElements: CardElement[]): CardElement[] =>
       cardElements.filter(
         (cardElement: CardElement) =>
-          !cardElement.card.isCustom && !cardElement.card.isEnergy
+          !cardElement.card.isCustom &&
+          !cardElement.card.isEnergy &&
+          !(cardElement.card.type === "manual")
       )
   );
 
@@ -151,6 +154,12 @@ export class HuiCardPicker extends LitElement {
       )
   );
 
+  private _manualCard = memoizeOne((cardElements: CardElement[]): CardElement =>
+    cardElements.find(
+      (cardElement: CardElement) => cardElement.card.type === "manual"
+    )!
+  );
+
   private _favoriteCards(): CardElement[] {
     return this._favorites
       .map((key) => this._favoriteElement(key))
@@ -160,9 +169,10 @@ export class HuiCardPicker extends LitElement {
   // A preview is a live DOM node, so every section a card shows up in needs
   // its own element.
   private _toCardElement(card: Card): CardElement {
+    const config = card.type === "manual" ? { type: "" } : undefined;
     return {
       card,
-      element: html`${until(this._renderCardElement(card), SPINNER)}`,
+      element: html`${until(this._renderCardElement(card, config), SPINNER)}`,
     };
   }
 
@@ -194,6 +204,7 @@ export class HuiCardPicker extends LitElement {
     const othersCards = this._otherCards(this._cards);
     const energyCardsItems = this._energyCards(this._cards);
     const customCardsItems = this._customCards(this._cards);
+    const manualCard = this._manualCard(this._cards);
 
     return html`
       <ha-input-search
@@ -334,25 +345,7 @@ export class HuiCardPicker extends LitElement {
                 }
               `
         }
-        <div class="cards-container">
-          <div
-            class="card manual"
-            @click=${this._cardPicked}
-            .config=${{ type: "" }}
-          >
-            <div class="card-header">
-              ${this.hass!.localize(
-                `ui.panel.lovelace.editor.card.generic.manual`
-              )}
-            </div>
-            <div class="preview description">
-              ${this.hass!.localize(
-                `ui.panel.lovelace.editor.card.generic.manual_description`
-              )}
-            </div>
-            <ha-ripple></ha-ripple>
-          </div>
-        </div>
+        <div class="cards-container">${this._renderCard(manualCard, true)}</div>
       </div>
     `;
   }
@@ -443,6 +436,13 @@ export class HuiCardPicker extends LitElement {
           )
       );
     }
+    cards = cards.concat({
+      type: "manual",
+      name: this.hass!.localize("ui.panel.lovelace.editor.card.generic.manual"),
+      description: this.hass!.localize(
+        "ui.panel.lovelace.editor.card.generic.manual_description"
+      ),
+    });
     this._cards = cards.map((card: Card) => this._toCardElement(card));
     this._suggestedCards = cards
       .filter((card: Card) => card.isSuggested)
@@ -481,12 +481,12 @@ export class HuiCardPicker extends LitElement {
     }
   );
 
-  private _renderCard(cardElement: CardElement): TemplateResult {
+  private _renderCard(cardElement: CardElement, wide = false): TemplateResult {
     const key = cardKey(cardElement.card);
     const favorite = this._favorites.includes(key);
 
     return html`
-      <div class="card" tabindex="0">
+      <div class="card ${classMap({ "full-width": wide })}" tabindex="0">
         ${cardElement.element}
         <ha-icon-button
           class="favorite ${classMap({ selected: favorite })}"
@@ -832,7 +832,7 @@ export class HuiCardPicker extends LitElement {
           );
         }
 
-        .manual {
+        .full-width {
           max-width: none;
           grid-column: 1 / -1;
         }

src/panels/lovelace/editor/config-elements/hui-numeric-input-card-feature-editor.ts

@@ -54,7 +54,7 @@ export class HuiNumericInputCardFeatureEditor
     }
 
     const data: NumericInputCardFeatureConfig = {
-      style: "buttons",
+      style: "slider",
       ...this._config,
     };
 

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

@@ -500,13 +500,20 @@ export class HuiStatisticsGraphCardEditor
 
     // update card config with updated entity config
     const index = this._subElementEditorConfig!.index!;
+    const oldEntityConfig = this._config!.entities[index];
+    const oldEntityId =
+      typeof oldEntityConfig === "string"
+        ? oldEntityConfig
+        : oldEntityConfig?.entity;
     const newEntities = [...this._config!.entities];
     newEntities[index] = newEntityConfig;
     let config = this._config!;
     config = { ...config, entities: newEntities };
 
-    // remove inappropriate stat options dependently on entities
-    config = await this._cleanConfig(config);
+    // only a different statistic can invalidate the stat options
+    if (newEntityConfig.entity !== oldEntityId) {
+      config = await this._cleanConfig(config);
+    }
     // normalize a generated yaml code
     config = this._orderProperties(config);
     this._config = config;

src/panels/lovelace/editor/get-dashboard-documentation-url.ts

@@ -1,3 +1,4 @@
+import { sanitizeHttpUrl } from "../../../common/url/sanitize-http-url";
 import {
   getCustomBadgeEntry,
   getCustomCardEntry,
@@ -38,7 +39,9 @@ export const getCardDocumentationURL = (
   type: string
 ): string | undefined => {
   if (isCustomType(type)) {
-    return getCustomCardEntry(stripCustomPrefix(type))?.documentationURL;
+    return sanitizeHttpUrl(
+      getCustomCardEntry(stripCustomPrefix(type))?.documentationURL
+    );
   }
 
   return `${documentationUrl(hass, "/dashboards/")}${NON_STANDARD_CARD_URLS[type] || type}`;
@@ -49,7 +52,9 @@ export const getBadgeDocumentationURL = (
   type: string
 ): string | undefined => {
   if (isCustomType(type)) {
-    return getCustomBadgeEntry(stripCustomPrefix(type))?.documentationURL;
+    return sanitizeHttpUrl(
+      getCustomBadgeEntry(stripCustomPrefix(type))?.documentationURL
+    );
   }
 
   return `${documentationUrl(hass, "/dashboards/")}${NON_STANDARD_BADGE_URLS[type] || "badges"}`;

src/panels/lovelace/entity-rows/entity-row-element-directive.ts

@@ -12,7 +12,10 @@ class EntityRowDirective extends Directive {
 
   private _name?: string;
 
+  private _lastHass?: HomeAssistant;
+
   render(entityId: string, name: string, hass: HomeAssistant) {
+    this._lastHass = hass;
     if (
       !this._element ||
       (this._entityId !== entityId &&
@@ -22,6 +25,15 @@ class EntityRowDirective extends Directive {
         entity: entityId,
         name,
       } as LovelaceRowConfig);
+      this._element.addEventListener(
+        "ll-upgrade",
+        () => {
+          if ("hass" in this._element!) {
+            this._element!.hass = this._lastHass;
+          }
+        },
+        { once: true }
+      );
     } else if (this._entityId !== entityId || this._name !== name) {
       (this._element as LovelaceRow).setConfig?.({
         entity: entityId,

src/panels/lovelace/special-rows/hui-weblink-row.ts

@@ -1,3 +1,4 @@
+import { sanitizeUrl } from "@braintree/sanitize-url";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
@@ -16,6 +17,11 @@ class HuiWeblinkRow extends LitElement implements LovelaceRow {
       throw new Error("URL required");
     }
 
+    // Reject schemes that would run script in the frontend's origin
+    if (sanitizeUrl(config.url) === "about:blank") {
+      throw new Error("Invalid URL");
+    }
+
     this._config = {
       icon: "mdi:link",
       name: config.url,

src/panels/profile/ha-pick-theme-row.ts

@@ -1,5 +1,5 @@
 import type { TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent, type HASSDomEvent } from "../../common/dom/fire_event";
 import "../../components/ha-button";
@@ -148,12 +148,6 @@ export class HaPickThemeRow extends SubscribeMixin(LitElement) {
       this._migrating = false;
     }
   }
-
-  static styles = css`
-    a {
-      color: var(--primary-color);
-    }
-  `;
 }
 
 declare global {

src/state/themes-mixin.ts

@@ -8,6 +8,7 @@ import type { HASSDomEvent } from "../common/dom/fire_event";
 import { subscribeThemePreferences, saveThemePreferences } from "../data/theme";
 import { subscribeThemes } from "../data/ws-themes";
 import type { Constructor, HomeAssistant } from "../types";
+import { updateLaunchScreenLogo } from "../util/launch-screen";
 import { storeState } from "../util/ha-pref-storage";
 import type { HassBaseEl } from "./hass-base-mixin";
 
@@ -145,6 +146,8 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
         true
       );
 
+      updateLaunchScreenLogo(darkMode);
+
       if (darkMode !== this.hass.themes.darkMode) {
         this._updateHass({
           themes: { ...this.hass.themes!, darkMode },

src/translations/en.json

@@ -75,7 +75,7 @@
   },
   "ui": {
     "init": {
-      "loading": "Loading data",
+      "loading": "Loading...",
       "migration": "Database upgrade is in progress, Home Assistant will not start until the upgrade is completed.\n\nThe upgrade may need a long time to complete, please be patient.",
       "project_from": "A project from the",
       "error": {
@@ -2396,7 +2396,7 @@
           "header": "Copy pairing code",
           "step_1": "[%key:ui::dialogs::matter-add-device::google_home::step_1%]",
           "step_2": "[%key:ui::dialogs::matter-add-device::google_home::step_2%]",
-          "step_3": "Tap {link_apps_services} and choose {use_pairing_code} form the list",
+          "step_3": "Tap {link_apps_services} and choose {use_pairing_code} from the list",
           "linked_matter_apps_services": "[%key:ui::dialogs::matter-add-device::google_home::linked_matter_apps_services%]",
           "link_apps_services": "[%key:ui::dialogs::matter-add-device::google_home::link_apps_services%]",
           "use_pairing_code": "Use Pairing Code",
@@ -3955,6 +3955,9 @@
               "about": "About templates",
               "editor": "Template editor",
               "result": "Result",
+              "result_placeholder": "Your template result will appear here.",
+              "layout_stacked": "Drag to resize, click for stacked view",
+              "layout_side_by_side": "Drag to resize, click for side-by-side view",
               "reset": "Reset to demo template",
               "confirm_reset": "Do you want to reset your current template back to the demo template?",
               "confirm_clear": "Do you want to clear your current template?",
@@ -4476,7 +4479,8 @@
           "internal_url_https_error_title": "Invalid local network URL",
           "internal_url_https_error_description": "You have configured an HTTPS certificate in Home Assistant. This means that your internal URL needs to be set to a domain covered by the certificate.",
           "internal_url_automatic_description": "Use the configured network settings",
-          "internal_url_placeholder": "http://<some IP address>:8123",
+          "internal_url_placeholder": "{protocol}://192.168.1.100{port}",
+          "external_url_placeholder": "{protocol}://example.duckdns.org{port}",
           "invalid_url": "Invalid URL"
         },
         "hardware": {
@@ -7550,6 +7554,9 @@
             "download_backup": "Download backup",
             "download_backup_description": "Save your Zigbee network configuration to a file",
             "download_backup_action": "Download",
+            "backup_failed": "Failed to create backup",
+            "backup_incomplete_title": "Backup is incomplete",
+            "backup_incomplete_text": "A backup has been created but it is incomplete and cannot be restored. This is a limitation of your adapter's firmware.",
             "migrate_radio": "Migrate adapter",
             "migrate_radio_description": "Move your Zigbee network to a different adapter",
             "migrate_radio_action": "Migrate",
@@ -8648,7 +8655,14 @@
             "description": "Entity IDs are used to reference entities in automations, scripts, and dashboards. This format only applies when a new entity is created. Using it is optional, and you can still rename each entity ID afterwards in its settings",
             "learn_more": "Learn more",
             "preview": "Preview",
+            "preview_error": "Failed to generate preview",
             "reset": "Reset to default",
+            "examples": {
+              "area": "Living room",
+              "device": "Thermostat",
+              "entity": "Temperature",
+              "floor": "Ground floor"
+            },
             "editor": {
               "label": "Format",
               "add": "Add",
@@ -8748,6 +8762,7 @@
             "save_no_changes": "Nothing changed — no restart needed.",
             "save_error": "Could not save the HTTP configuration.",
             "port_warning": "Clients such as the Home Assistant mobile apps will lose their connection until you update the URL in their settings. If Home Assistant is not confirmed reachable on the new port, the change is rolled back automatically after 5 minutes.",
+            "server_host_warning": "Leave this empty to listen on all interfaces. If you set specific addresses, Home Assistant is only reachable through those — binding it only to an address that other devices can't reach (for example localhost) will make it unreachable from those devices.",
             "invalid_host": "Enter a valid IP address.",
             "invalid_network": "Enter a valid IP address or network.",
             "running_default": "Your saved HTTP configuration could not be applied, so Home Assistant is running on the built-in default configuration.",
@@ -8759,6 +8774,11 @@
               "text": "Saving will restart Home Assistant to apply the new HTTP settings.",
               "confirm": "Save and restart"
             },
+            "restart_address": {
+              "title": "Home Assistant is restarting",
+              "text": "The address changed. Once Home Assistant has restarted, you can reach it at:",
+              "note": "Depending on your network setup, this address may not be reachable from this device."
+            },
             "ssl_profile_modern": "Modern",
             "ssl_profile_intermediate": "Intermediate",
             "sections": {
@@ -8782,7 +8802,7 @@
               "login_attempts_threshold": "Login attempts before ban"
             },
             "helpers": {
-              "server_port": "The port Home Assistant listens on. Default is 8123.",
+              "server_port": "The port Home Assistant listens on. Default is {port}.",
               "server_host": "IP addresses to bind to. Leave empty to listen on all interfaces.",
               "ssl_certificate": "Absolute path to your TLS certificate (for example, /ssl/fullchain.pem).",
               "ssl_key": "Absolute path to your TLS private key (for example, /ssl/privkey.pem).",

src/util/custom-panel/drop-realm-collections.ts

@@ -0,0 +1,40 @@
+import type { Connection } from "home-assistant-js-websocket";
+
+/** Duck-typed shape of a `getCollection()` result cached on a `Connection`. */
+interface CachedCollection {
+  refresh: () => Promise<unknown>;
+  subscribe: (subscriber: (state: unknown) => void) => () => void;
+}
+
+const isCachedCollection = (value: unknown): value is CachedCollection =>
+  typeof value === "object" &&
+  value !== null &&
+  typeof (value as CachedCollection).subscribe === "function" &&
+  typeof (value as CachedCollection).refresh === "function";
+
+/**
+ * Drop the websocket collections that were created by this window from the
+ * shared connection cache.
+ *
+ * `getCollection()` caches collections (entity registry, label registry, ...) on
+ * the `Connection` object. A custom panel embedded in an iframe shares the
+ * connection with the main window, so a collection the panel is the first to
+ * request is created inside the iframe's realm. When the iframe is removed, that
+ * realm is destroyed while the collection stays cached on the connection - its
+ * store, and the timer that hands the cached state to new subscribers, are gone.
+ * Every later subscriber (the main frontend or the next instance of the panel)
+ * then waits forever for a callback that can never fire.
+ *
+ * Must be called from the realm that is going away - `instanceof Function` is
+ * realm-specific and only matches collections created by this window.
+ */
+export const dropRealmCollections = (connection: Connection): void => {
+  // `getCollection()` stores collections on the connection under keys that are
+  // not part of its type, so treat it as the bag of properties it is.
+  const cache = connection as unknown as Record<string, unknown>;
+  for (const [key, value] of Object.entries(cache)) {
+    if (isCachedCollection(value) && value.subscribe instanceof Function) {
+      delete cache[key];
+    }
+  }
+};

src/util/launch-screen.ts

@@ -1,12 +1,11 @@
 import type { TemplateResult } from "lit";
 import { render } from "lit";
 import { parseAnimationDuration } from "../common/util/parse-animation-duration";
-import { withViewTransition } from "../common/util/view-transition";
 
 let removalInitiated = false;
 
 /**
- * Removes the launch screen with a fade-out view transition.
+ * Removes the launch screen with a CSS fade-out transition.
  *
  * @param instant - Removes the launch screen without animation. Used when the
  * external app covers the frontend with its own splash screen until the
@@ -26,23 +25,16 @@ export const removeLaunchScreen = (instant = false): boolean => {
     return true;
   }
 
-  withViewTransition((viewTransitionAvailable) => {
-    if (viewTransitionAvailable) {
+  launchScreenElement.classList.add("removing");
+  const durationFromCss = getComputedStyle(document.documentElement)
+    .getPropertyValue("--ha-animation-duration-normal")
+    .trim();
+  setTimeout(
+    () => {
       launchScreenElement.parentElement?.removeChild(launchScreenElement);
-      return;
-    }
-
-    launchScreenElement.classList.add("removing");
-    const durationFromCss = getComputedStyle(document.documentElement)
-      .getPropertyValue("--ha-animation-duration-normal")
-      .trim();
-    setTimeout(
-      () => {
-        launchScreenElement.parentElement?.removeChild(launchScreenElement);
-      },
-      parseAnimationDuration(durationFromCss || "250ms")
-    );
-  });
+    },
+    parseAnimationDuration(durationFromCss || "250ms")
+  );
   return true;
 };
 
@@ -57,6 +49,20 @@ export const renderLaunchScreenContent = (
   updateLaunchScreenAttribution(attribution);
 };
 
+/**
+ * Switches the launch screen OHF logo to the variant matching the applied
+ * theme. The `<picture>` element initially picks a variant based on the system
+ * color scheme, which can differ from the theme the frontend ends up applying.
+ */
+export const updateLaunchScreenLogo = (darkMode: boolean) => {
+  const logoSourceElement = document.querySelector<HTMLSourceElement>(
+    "#ha-launch-screen .ohf-logo source"
+  );
+  if (logoSourceElement) {
+    logoSourceElement.media = darkMode ? "all" : "not all";
+  }
+};
+
 export const updateLaunchScreenAttribution = (attribution: string) => {
   const attributionElement = document.getElementById(
     "ha-launch-screen-attribution"

test/common/url/sanitize-http-url.test.ts

@@ -0,0 +1,94 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  homeAssistantUrlToPath,
+  isHomeAssistantUrl,
+  sanitizeLinkUrl,
+  sanitizeHttpUrl,
+} from "../../../src/common/url/sanitize-http-url";
+
+describe("sanitizeHttpUrl", () => {
+  it("keeps http and https URLs", () => {
+    expect(
+      sanitizeHttpUrl("https://www.home-assistant.io/integrations/hue")
+    ).toEqual("https://www.home-assistant.io/integrations/hue");
+    expect(sanitizeHttpUrl("http://192.168.1.5:8080/setup")).toEqual(
+      "http://192.168.1.5:8080/setup"
+    );
+  });
+
+  /* eslint-disable no-script-url */
+  it("rejects URIs that can execute script", () => {
+    expect(sanitizeHttpUrl("javascript:alert(1)")).toBeUndefined();
+    expect(sanitizeHttpUrl("JavaScript:alert(1)")).toBeUndefined();
+    expect(sanitizeHttpUrl("java\tscript:alert(1)")).toBeUndefined();
+    expect(sanitizeHttpUrl(" javascript:alert(1)")).toBeUndefined();
+    expect(
+      sanitizeHttpUrl("data:text/html,<script>alert(1)</script>")
+    ).toBeUndefined();
+    expect(sanitizeHttpUrl("vbscript:msgbox(1)")).toBeUndefined();
+  });
+  /* eslint-enable no-script-url */
+
+  it("rejects other schemes and unparseable values", () => {
+    expect(sanitizeHttpUrl("homeassistant://config/system")).toBeUndefined();
+    expect(sanitizeHttpUrl("file:///etc/passwd")).toBeUndefined();
+    expect(sanitizeHttpUrl("about:blank")).toBeUndefined();
+    expect(sanitizeHttpUrl("/config/system")).toBeUndefined();
+    expect(sanitizeHttpUrl("not a url")).toBeUndefined();
+  });
+
+  it("rejects missing values", () => {
+    expect(sanitizeHttpUrl(undefined)).toBeUndefined();
+    expect(sanitizeHttpUrl(null)).toBeUndefined();
+    expect(sanitizeHttpUrl("")).toBeUndefined();
+  });
+});
+
+describe("isHomeAssistantUrl", () => {
+  it("detects the Home Assistant scheme", () => {
+    expect(isHomeAssistantUrl("homeassistant://config/system")).toBe(true);
+    expect(isHomeAssistantUrl("https://www.home-assistant.io/")).toBe(false);
+    expect(isHomeAssistantUrl(undefined)).toBe(false);
+  });
+});
+
+describe("homeAssistantUrlToPath", () => {
+  it("rewrites a deep link to an in-app path", () => {
+    expect(homeAssistantUrlToPath("homeassistant://config/system")).toEqual(
+      "/config/system"
+    );
+    expect(homeAssistantUrlToPath("homeassistant://config/network")).toEqual(
+      "/config/network"
+    );
+  });
+
+  it("rejects a deep link that leaves the frontend", () => {
+    // A plain scheme rewrite would turn this into "//example.com".
+    expect(
+      homeAssistantUrlToPath("homeassistant:///example.com")
+    ).toBeUndefined();
+    expect(
+      homeAssistantUrlToPath("homeassistant:///\\example.com")
+    ).toBeUndefined();
+  });
+
+  it("rejects anything that is not a deep link", () => {
+    expect(homeAssistantUrlToPath("https://example.com/")).toBeUndefined();
+    expect(homeAssistantUrlToPath(undefined)).toBeUndefined();
+  });
+});
+
+describe("sanitizeLinkUrl", () => {
+  it("handles both external links and deep links", () => {
+    expect(sanitizeLinkUrl("https://example.com/docs")).toEqual(
+      "https://example.com/docs"
+    );
+    expect(sanitizeLinkUrl("homeassistant://config/system")).toEqual(
+      "/config/system"
+    );
+    // eslint-disable-next-line no-script-url
+    expect(sanitizeLinkUrl("javascript:alert(1)")).toBeUndefined();
+    expect(sanitizeLinkUrl("homeassistant:///example.com")).toBeUndefined();
+  });
+});

test/data/energy.test.ts

@@ -17,6 +17,7 @@ import {
   calculateSolarConsumedGauge,
   formatPowerShort,
   getNextEnergyPeriodStart,
+  getEnergyDefaultPeriodStorageKey,
 } from "../../src/data/energy";
 import type { HomeAssistant } from "../../src/types";
 
@@ -909,3 +910,37 @@ describe("getNextEnergyPeriodStart", () => {
     );
   });
 });
+
+describe("getEnergyDefaultPeriodStorageKey", () => {
+  it("uses an explicit collection key", () => {
+    assert.equal(
+      getEnergyDefaultPeriodStorageKey(
+        { panelUrl: "energy" } as HomeAssistant,
+        "energy_dashboard"
+      ),
+      "energy-default-period-_energy_dashboard"
+    );
+  });
+
+  it("scopes to the panel when no collection key is given", () => {
+    assert.equal(
+      getEnergyDefaultPeriodStorageKey({
+        panelUrl: "my-dashboard",
+      } as HomeAssistant),
+      "energy-default-period-_energy_my-dashboard"
+    );
+  });
+
+  it("falls back to the global key without a panel url", () => {
+    assert.equal(
+      getEnergyDefaultPeriodStorageKey({} as HomeAssistant),
+      "energy-default-period-_energy"
+    );
+  });
+
+  it("rejects a collection key with the wrong prefix", () => {
+    assert.throws(() =>
+      getEnergyDefaultPeriodStorageKey({} as HomeAssistant, "dashboard")
+    );
+  });
+});

test/data/integration.test.ts

@@ -0,0 +1,80 @@
+import { describe, expect, it, vi } from "vitest";
+
+import type { IntegrationManifest } from "../../src/data/integration";
+import {
+  fetchIntegrationManifest,
+  fetchIntegrationManifests,
+  integrationIssuesUrl,
+} from "../../src/data/integration";
+import type { HomeAssistant } from "../../src/types";
+
+const manifest = (
+  overrides: Partial<IntegrationManifest> = {}
+): IntegrationManifest =>
+  ({
+    domain: "evil",
+    name: "Evil",
+    is_built_in: false,
+    config_flow: false,
+    iot_class: "local_polling",
+    documentation: "https://example.com/docs",
+    ...overrides,
+  }) as IntegrationManifest;
+
+const hassWith = (result: unknown) =>
+  ({ callWS: vi.fn().mockResolvedValue(result) }) as unknown as HomeAssistant;
+
+// A custom integration ships its own manifest, so these URLs are untrusted.
+/* eslint-disable no-script-url */
+const UNSAFE_URL = "javascript:alert(1)";
+
+describe("integration manifests", () => {
+  it("strips unsafe URLs from a fetched list", async () => {
+    const hass = hassWith([
+      manifest({ documentation: UNSAFE_URL, issue_tracker: UNSAFE_URL }),
+    ]);
+
+    const [fetched] = await fetchIntegrationManifests(hass);
+
+    expect(fetched.documentation).toBeUndefined();
+    expect(fetched.issue_tracker).toBeUndefined();
+  });
+
+  it("strips unsafe URLs from a single fetched manifest", async () => {
+    const hass = hassWith(manifest({ documentation: UNSAFE_URL }));
+
+    expect((await fetchIntegrationManifest(hass, "evil"))!.documentation).toBe(
+      undefined
+    );
+  });
+
+  it("keeps http and https URLs", async () => {
+    const hass = hassWith([
+      manifest({
+        documentation: "https://example.com/docs",
+        issue_tracker: "http://example.com/issues",
+      }),
+    ]);
+
+    const [fetched] = await fetchIntegrationManifests(hass);
+
+    expect(fetched.documentation).toEqual("https://example.com/docs");
+    expect(fetched.issue_tracker).toEqual("http://example.com/issues");
+  });
+
+  it("does not mutate the received manifest", async () => {
+    const received = manifest({ documentation: UNSAFE_URL });
+    const hass = hassWith([received]);
+
+    await fetchIntegrationManifests(hass);
+
+    expect(received.documentation).toEqual(UNSAFE_URL);
+  });
+
+  it("falls back to the core issue tracker for an unsafe issue_tracker", () => {
+    expect(
+      integrationIssuesUrl("evil", manifest({ issue_tracker: UNSAFE_URL }))
+    ).toContain("https://github.com/home-assistant/core/issues");
+  });
+});
+/* eslint-enable no-script-url */

test/panels/config/energy/ha-energy-power-config.test.ts

@@ -1,5 +1,12 @@
+import { render } from "lit";
 import { assert, describe, it } from "vitest";
-import { getPowerHelperEntityId } from "../../../../src/panels/config/energy/dialogs/power-config";
+import "../../../../src/panels/config/energy/dialogs/ha-energy-power-config";
+import type { HaEnergyPowerConfig } from "../../../../src/panels/config/energy/dialogs/ha-energy-power-config";
+import type { PowerConfig } from "../../../../src/data/energy";
+import {
+  getPowerHelperEntityId,
+  type PowerType,
+} from "../../../../src/panels/config/energy/dialogs/power-config";
 
 describe("getPowerHelperEntityId", () => {
   it("returns the helper for an inverted config", () => {
@@ -69,3 +76,100 @@ describe("getPowerHelperEntityId", () => {
     );
   });
 });
+
+// Renders the template directly so the async unit lookup in willUpdate is
+// skipped. localize echoes the key back.
+const renderPickers = (powerType: PowerType, powerConfig: PowerConfig) => {
+  const el = document.createElement(
+    "ha-energy-power-config"
+  ) as HaEnergyPowerConfig;
+  el.hass = { localize: (key: string) => key } as any;
+  el.powerType = powerType;
+  el.powerConfig = powerConfig;
+
+  const container = document.createElement("div");
+  render((el as any).render(), container);
+
+  return [...container.querySelectorAll("ha-statistic-picker")].map(
+    (picker: any) => ({
+      required: picker.required,
+      invalid: picker.invalid,
+      errorMessage: picker.errorMessage,
+    })
+  );
+};
+
+describe("ha-energy-power-config required power statistic", () => {
+  it("renders no picker when no power sensor is configured", () => {
+    assert.lengthOf(renderPickers("none", {}), 0);
+  });
+
+  it("marks an empty standard statistic as required and invalid", () => {
+    assert.deepEqual(renderPickers("standard", {}), [
+      {
+        required: true,
+        invalid: true,
+        errorMessage: "ui.common.error_required",
+      },
+    ]);
+  });
+
+  it("keeps the statistic required but valid once it is set", () => {
+    const [picker] = renderPickers("standard", { stat_rate: "sensor.power" });
+    assert.isTrue(picker.required);
+    assert.isFalse(picker.invalid);
+  });
+
+  it("marks an empty inverted statistic as required and invalid", () => {
+    const [picker] = renderPickers("inverted", {});
+    assert.isTrue(picker.required);
+    assert.isTrue(picker.invalid);
+  });
+
+  it("does not flag the inverted statistic when it is set", () => {
+    const [picker] = renderPickers("inverted", {
+      stat_rate_inverted: "sensor.power",
+    });
+    assert.isFalse(picker.invalid);
+  });
+
+  it("flags both two sensor statistics while they are empty", () => {
+    const pickers = renderPickers("two_sensors", {});
+    assert.lengthOf(pickers, 2);
+    assert.deepEqual(
+      pickers.map((p) => p.invalid),
+      [true, true]
+    );
+  });
+
+  // The two sensor statistics exclude each other, so they keep their clear
+  // button — and therefore no required marker — to stay swappable.
+  it("does not mark the two sensor statistics as required", () => {
+    const pickers = renderPickers("two_sensors", {});
+    assert.deepEqual(
+      pickers.map((p) => p.required),
+      [false, false]
+    );
+  });
+
+  it("flags only the statistic that is still missing", () => {
+    const pickers = renderPickers("two_sensors", {
+      stat_rate_from: "sensor.power_from",
+    });
+    assert.deepEqual(
+      pickers.map((p) => p.invalid),
+      [false, true]
+    );
+  });
+
+  it("clears both flags once the two sensor pair is complete", () => {
+    const pickers = renderPickers("two_sensors", {
+      stat_rate_from: "sensor.power_from",
+      stat_rate_to: "sensor.power_to",
+    });
+    assert.deepEqual(
+      pickers.map((p) => p.invalid),
+      [false, false]
+    );
+  });
+});

test/panels/lovelace/handle-action.test.ts

@@ -0,0 +1,43 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { handleAction } from "../../../src/panels/lovelace/common/handle-action";
+import type { HomeAssistant } from "../../../src/types";
+
+const hass = { localize: (key: string) => key } as unknown as HomeAssistant;
+
+const openUrl = (url: string) => {
+  const open = vi.spyOn(window, "open").mockImplementation(() => null);
+  open.mockClear();
+  handleAction(
+    document.createElement("div"),
+    hass,
+    { tap_action: { action: "url", url_path: url } },
+    "tap"
+  );
+  return open.mock.calls[0]?.[0];
+};
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe("handleAction url", () => {
+  it("opens a configured URL", () => {
+    expect(openUrl("https://example.com/page")).toEqual(
+      "https://example.com/page"
+    );
+    expect(openUrl("mailto:someone@example.com")).toEqual(
+      "mailto:someone@example.com"
+    );
+  });
+
+  /* eslint-disable no-script-url */
+  it("does not open a URL that runs script", () => {
+    expect(openUrl("javascript:alert(1)")).toEqual("about:blank");
+    expect(openUrl("JaVaScRiPt:alert(1)")).toEqual("about:blank");
+    expect(openUrl("data:text/html,<script>alert(1)</script>")).toEqual(
+      "about:blank"
+    );
+  });
+  /* eslint-enable no-script-url */
+});

test/panels/lovelace/url-config.test.ts

@@ -0,0 +1,51 @@
+import { describe, expect, it } from "vitest";
+
+import "../../../src/panels/lovelace/cards/hui-iframe-card";
+import "../../../src/panels/lovelace/special-rows/hui-weblink-row";
+
+/* eslint-disable no-script-url */
+const UNSAFE_URLS = [
+  "javascript:alert(1)",
+  "JaVaScRiPt:alert(1)",
+  "java\tscript:alert(1)",
+  "data:text/html,<script>alert(1)</script>",
+  "vbscript:msgbox(1)",
+];
+/* eslint-enable no-script-url */
+
+const SAFE_URLS = [
+  "https://example.com/page",
+  "http://192.168.1.5:8080/",
+  "mailto:someone@example.com",
+  "/local/page.html",
+  // Forms that sanitizing rewrites, so they must not be compared to the input
+  "http://example.com",
+  "https://example.com/foo bar",
+  "https://Example.com/Path",
+];
+
+describe("hui-weblink-row config", () => {
+  const row = () => document.createElement("hui-weblink-row") as any;
+
+  it.each(SAFE_URLS)("accepts %s", (url) => {
+    expect(() => row().setConfig({ url })).not.toThrow();
+  });
+
+  it.each(UNSAFE_URLS)("rejects %s", (url) => {
+    expect(() => row().setConfig({ url })).toThrow("Invalid URL");
+  });
+});
+
+describe("hui-iframe-card config", () => {
+  const card = () => document.createElement("hui-iframe-card") as any;
+
+  it.each(SAFE_URLS)("accepts %s", (url) => {
+    expect(() => card().setConfig({ type: "iframe", url })).not.toThrow();
+  });
+
+  it.each(UNSAFE_URLS)("rejects %s", (url) => {
+    expect(() => card().setConfig({ type: "iframe", url })).toThrow(
+      "Invalid URL"
+    );
+  });
+});