Fix TS cast and formatting in dialog-energy-grid-settings

Co-authored-by: timmo001 <28114703+timmo001@users.noreply.github.com>

.agents/skills/ha-frontend-components/SKILL.md

@@ -7,6 +7,8 @@ description: Home Assistant frontend component patterns. Use when implementing o
 
 Use this skill when creating or reviewing Home Assistant UI components and common interaction patterns.
 
+Cross-load `ha-frontend-events` when component work includes event listener typing, custom event dispatch, or event-map declarations.
+
 ## Dialogs
 
 Open dialogs through the fire-event pattern:

.agents/skills/ha-frontend-events/SKILL.md

@@ -0,0 +1,105 @@
+---
+name: ha-frontend-events
+description: Home Assistant frontend event patterns. Use when typing event handlers, using HASSDomEvent types, dispatching with fireEvent, or declaring HASSDomEvents and event maps.
+---
+
+# HA Frontend Events
+
+Use this skill when implementing or reviewing event listeners and custom event contracts. Cross-load `ha-frontend-components` when the work also involves dialogs, forms, alerts, shortcuts, tooltips, panels, Lovelace cards, or buttons.
+
+## Event Handling
+
+Use the event types from `src/common/dom/fire_event.ts` instead of plain `Event`, generic `CustomEvent`, or element casts when they express the handler contract:
+
+- Use `HASSDomCurrentTargetEvent<T>` to read the element on which the listener was registered through `ev.currentTarget`.
+- Use `HASSDomTargetEvent<T>` only to read the element that originated the event through `ev.target`.
+- Use `HASSDomEvent<T>` to read a custom event payload through `ev.detail`.
+- Use `ValueChangedEvent<T>` from `src/types.ts` for the standard `value-changed` event.
+- Prefer an event type exported by the component being listened to, such as `HaSelectSelectEvent<T, Clearable>` or `HaDropdownSelectEvent<TValue, TData>`, over reconstructing its detail type.
+- Use `ActionHandlerEvent` from `src/data/lovelace/action_handler.ts` for Lovelace tap, hold, and double-tap handlers.
+
+Import event and element types with `import type`:
+
+```ts
+import type {
+  HASSDomCurrentTargetEvent,
+  HASSDomEvent,
+  HASSDomTargetEvent,
+} from "../common/dom/fire_event";
+import type { HaCheckbox } from "../components/ha-checkbox";
+import type { HaEntityPicker } from "../components/entity/ha-entity-picker";
+import type { HaRadioGroup } from "../components/radio/ha-radio-group";
+import type { ValueChangedEvent } from "../types";
+```
+
+Type the handler so the selected property can be read directly. Do not cast `ev.currentTarget` or assign it to a single-use variable:
+
+```ts
+private _scopeChanged(ev: HASSDomCurrentTargetEvent<HaRadioGroup>): void {
+  this._scope = ev.currentTarget.value;
+}
+
+private _checkedChanged(ev: HASSDomTargetEvent<HaCheckbox>): void {
+  this._checked = ev.target.checked;
+}
+
+private _valueChanged(ev: ValueChangedEvent<string>): void {
+  this._value = ev.detail.value;
+}
+
+private _itemSelected(ev: HASSDomEvent<{ id: string }>): void {
+  this._selectedId = ev.detail.id;
+}
+```
+
+Use intersections when a handler needs more than one facet of an event. Keep the native event type when the handler reads native fields such as `key`, modifier keys, `dataTransfer`, or focus relationships:
+
+```ts
+private _entityChanged(
+  ev: ValueChangedEvent<string> & HASSDomCurrentTargetEvent<HaEntityPicker>
+): void {
+  ev.currentTarget.value = ev.detail.value;
+}
+
+private _keyDown(
+  ev: KeyboardEvent & HASSDomCurrentTargetEvent<HTMLInputElement>
+): void {
+  if (ev.key === "Enter") {
+    this._submit(ev.currentTarget.value);
+  }
+}
+```
+
+Dispatch Home Assistant component events with `fireEvent()` instead of constructing `Event` or `CustomEvent` directly. Register the event name and detail type by augmenting `HASSDomEvents`; use `undefined` when an event has no detail. `fireEvent()` constrains event names and supplied detail, and events bubble and cross shadow boundaries by default:
+
+```ts
+fireEvent(this, "item-selected", { id: item.id });
+fireEvent(this, "refresh-requested");
+```
+
+When an event is already registered, derive handler and listener types from its registration rather than repeating the payload shape:
+
+```ts
+private _itemSelected(
+  ev: HASSDomEvent<HASSDomEvents["item-selected"]>
+): void {
+  this._selectedId = ev.detail.id;
+}
+```
+
+`HASSDomEvents` types `fireEvent()` calls. Augment `HTMLElementEventMap` for typed listeners on HTML elements, or `GlobalEventHandlersEventMap` when the event is handled on global event targets.
+
+In component files, prefer placing global event declarations after the class at the bottom of the file. Preserve the existing placement when editing established files; foundational type, helper, and mixin files commonly keep declarations near the top before their consumers.
+
+```ts
+declare global {
+  interface HASSDomEvents {
+    "item-selected": { id: string };
+    "refresh-requested": undefined;
+  }
+
+  interface HTMLElementEventMap {
+    "item-selected": HASSDomEvent<HASSDomEvents["item-selected"]>;
+  }
+}
+```

.agents/skills/ha-frontend-review/SKILL.md

@@ -70,4 +70,4 @@ Configuration and props:
 - Identify behavioral regressions, bugs, accessibility issues, and missing tests first.
 - Keep style-only comments secondary unless they affect maintainability or user experience.
 - Prefer small, direct fixes over large refactors during review follow-up.
-- Cross-load `ha-frontend-contexts`, `ha-frontend-components`, `ha-frontend-styling`, `ha-frontend-testing`, or `ha-frontend-user-facing-text` when a finding falls in that area.
+- Cross-load `ha-frontend-contexts`, `ha-frontend-components`, `ha-frontend-events`, `ha-frontend-styling`, `ha-frontend-testing`, or `ha-frontend-user-facing-text` when a finding falls in that area.

.agents/skills/ha-frontend-testing/SKILL.md

@@ -20,6 +20,7 @@ yarn lint          # ESLint + Prettier + TypeScript + Lit
 yarn format        # Auto-fix ESLint + Prettier
 yarn lint:types    # TypeScript compiler, run without file arguments
 yarn test          # Vitest
+yarn build         # Full production build
 yarn dev           # App dev server
 yarn dev:serve     # Local serving dev server
 ```
@@ -28,6 +29,26 @@ Never run `tsc` or `yarn lint:types` with file arguments. File arguments make `t
 
 For focused type feedback on one file, use editor diagnostics instead of a file-scoped `tsc` command.
 
+## Production Builds
+
+Production builds support foreground and managed background execution:
+
+```bash
+yarn build                         # Full foreground build
+yarn build --background            # Full managed background build
+yarn build --modern                # Modern frontend_latest bundle only
+yarn build --modern --background   # Modern managed background build
+yarn build --status
+yarn build --logs [--follow]
+yarn build --stop
+```
+
+Use `yarn build --modern --background` for production bundle-size or browser performance comparisons that only need modern browser output. It runs the normal metadata and static preparation, minifies and compresses the modern `frontend_latest` bundle and shared static assets, and generates modern-only entry pages and service workers. It deliberately skips the legacy bundle and its service worker.
+
+Do not pass `--help`, `--background`, or `--modern` to `script/build_frontend`; that raw script does not parse arguments and always starts the full foreground build. Use `yarn build` for managed builds. App builds and development servers keep exclusive ownership of `hass_frontend/` for their lifetime.
+
+Managed app, demo, gallery, and E2E app workflows share one lifetime lock, so only one build or development server can run at a time.
+
 ## Unit And Utility Tests
 
 - Add or update Vitest tests for data processing, utility code, and behavior that can be tested without a browser.
@@ -41,7 +62,7 @@ For focused type feedback on one file, use editor diagnostics instead of a file-
 
 `yarn dev:serve` also serves locally and supports `-c` for the core URL and `-p` for the port. The default is 8124, or 8123 in a devcontainer.
 
-Dev server commands support `--background`, `--status`, `--stop`, and `--logs [--follow]`. Prefer managed background mode while iterating so the watcher stays available across test runs without occupying the terminal.
+Dev server commands support `--background`, `--status`, `--stop`, and `--logs [--follow]`. `yarn dev`, `yarn dev:serve`, `yarn dev:demo`, and `yarn dev:gallery` also support `--fetch-translations`; this runs translation fetching, including first-time GitHub device authentication, under the workflow lock before starting the watcher. It works in foreground and background modes. Prefer managed background mode while iterating so the watcher stays available across test runs without occupying the terminal. `yarn dev` and `yarn dev:serve` share one managed process slot because both write the app output.
 
 ## Playwright E2E
 
@@ -59,7 +80,7 @@ The custom development wrappers use `/__ha_dev_status` to identify and manage th
 
 Local runs against a watched development server do not always match CI's clean build artifacts, environment, sharding, or worker configuration. Use background servers for the fast iteration loop, but confirm the relevant CI jobs complete successfully before considering E2E changes verified.
 
-Use `-g "<title>" --project=chromium` to narrow a run. `yarn test:e2e` runs all three suites in parallel when every managed server is available, otherwise it runs them sequentially to prevent cold builds racing over shared generated assets. Run suites directly; piping through output truncation hides progress and failures.
+Use `-g "<title>" --project=chromium` to narrow a run. `yarn test:e2e` runs suites sequentially when managed servers are unavailable to prevent cold builds racing over shared generated assets. Run suites directly; piping through output truncation hides progress and failures.
 
 The app suite uses a stripped-down harness for e2e. Demo and gallery use their normal dev servers.
 

.github/workflows/codeql-analysis.yaml

@@ -32,12 +32,12 @@ jobs:
           persist-credentials: false
 
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@7188fc363630916deb702c7fdcf4e481b751f97a # v4.37.1
+        uses: github/codeql-action/init@e4fba868fa4b1b91e1fdab776edc8cfbe6e9fb81 # v4.37.3
         with:
           languages: javascript-typescript
           build-mode: none
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@7188fc363630916deb702c7fdcf4e481b751f97a # v4.37.1
+        uses: github/codeql-action/analyze@e4fba868fa4b1b91e1fdab776edc8cfbe6e9fb81 # v4.37.3
         with:
           category: "/language:javascript-typescript"

.github/workflows/e2e.yaml

@@ -38,7 +38,7 @@ jobs:
     name: Prepare container dependencies
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.62.0-noble
+      image: mcr.microsoft.com/playwright:v1.62.1-noble
       options: --user 1001
     defaults:
       run:
@@ -154,7 +154,7 @@ jobs:
       - prepare-container-dependencies
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.62.0-noble
+      image: mcr.microsoft.com/playwright:v1.62.1-noble
       options: --user 1001 --ipc=host
     defaults:
       run:
@@ -206,7 +206,7 @@ jobs:
       - prepare-container-dependencies
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.62.0-noble
+      image: mcr.microsoft.com/playwright:v1.62.1-noble
       options: --user 1001 --ipc=host
     defaults:
       run:
@@ -260,7 +260,7 @@ jobs:
       - prepare-container-dependencies
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.62.0-noble
+      image: mcr.microsoft.com/playwright:v1.62.1-noble
       options: --user 1001 --ipc=host
     defaults:
       run:

.github/workflows/release.yaml

@@ -36,7 +36,7 @@ jobs:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Verify version
-        uses: home-assistant/actions/helpers/verify-version@e3fb68ebda13d88a0d695082f471ba2c83d025fb # master
+        uses: home-assistant/actions/helpers/verify-version@ab22029681aa532bfe7de5774a9972d67bfbd2c0 # master
 
       - name: Setup Node and install
         uses: ./.github/actions/setup

.nvmrc

@@ -1 +1 @@
-24.18.0
+24.18.1

.yarnrc.yml

@@ -13,4 +13,4 @@ nodeLinker: node-modules
 
 npmMinimalAgeGate: 3d
 
-yarnPath: .yarn/releases/yarn-4.17.1.cjs
+yarnPath: .yarn/releases/yarn-4.18.0.cjs

AGENTS.md

@@ -40,6 +40,7 @@ Detailed guidance lives in project skills under `.agents/skills/`. Load the matc
 
 - `ha-frontend-contexts`: Lit contexts, `hass` migration, and rerender-sensitive state access.
 - `ha-frontend-components`: dialogs, forms, alerts, shortcuts, tooltips, panels, and Lovelace cards.
+- `ha-frontend-events`: event handler typing, custom event dispatch, and event-map declarations.
 - `ha-frontend-styling`: theme variables, spacing tokens, responsive layout, RTL, and view transitions.
 - `ha-frontend-testing`: lint, typecheck, Vitest, Playwright e2e dev servers, and benchmarks.
 - `ha-frontend-user-facing-text`: localization, terminology, sentence case, and Home Assistant text style.

README.md

@@ -12,7 +12,7 @@ This is the repository for the official [Home Assistant](https://home-assistant.
 
 - Initial setup: `script/setup`
 - Development: [Instructions](https://developers.home-assistant.io/docs/frontend/development/)
-- Production build: `script/build_frontend`
+- Production build: `yarn build`
 - Gallery: `cd gallery && script/develop_gallery`
 
 ## Frontend development

build-scripts/build-manager.mjs

@@ -0,0 +1,311 @@
+// Manage a Home Assistant frontend production build with an agent-friendly
+// interface, matching build-scripts/dev-server.mjs.
+//
+//   node build-scripts/build-manager.mjs [--modern] [mode]
+//
+//   (no mode)          Run in the foreground.
+//   --background       Start detached, print the pid, then exit and leave it
+//                      running.
+//   --status           Report whether a managed build is running.
+//   --stop             Stop a managed build.
+//   --logs [--follow]  Print (or follow) the background build log.
+//
+//   --modern           Build only the modern frontend_latest bundle.
+
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import {
+  LIFECYCLE_MODE_FLAGS,
+  acquireProcessRecord,
+  isProcessRecordAlive,
+  outputLog,
+  offerToStopProcessRecord,
+  processStartTime,
+  readProcessRecord,
+  releaseProcessRecord,
+  runCli,
+  spawnDetachedToLog,
+  spawnForeground,
+  terminateDetachedProcess,
+  terminateProcess,
+  waitFor,
+  writeProcessRecord,
+} from "./managed-process.mjs";
+import {
+  buildCacheDir,
+  describeOutputOwner,
+  workflowLockEnv,
+  workflowLockFile,
+} from "./output-lock.mjs";
+
+const repoRoot = path.resolve(
+  path.dirname(fileURLToPath(import.meta.url)),
+  ".."
+);
+const gulpBin = path.join(repoRoot, "node_modules", ".bin", "gulp");
+const stateDir = path.join(buildCacheDir, "ha-build");
+const logFile = path.join(stateDir, "build.log");
+const lockFile = workflowLockFile;
+
+const usage = () => {
+  process.stderr.write(
+    "Usage: node build-scripts/build-manager.mjs [--modern] " +
+      "[--background | --status | --stop | --logs [--follow]]\n"
+  );
+};
+
+const parseArgs = (argv) => {
+  const args = {
+    mode: "foreground",
+    modes: [],
+    follow: false,
+    modern: false,
+    unknown: [],
+  };
+  for (const arg of argv) {
+    if (LIFECYCLE_MODE_FLAGS.has(arg)) {
+      args.mode = LIFECYCLE_MODE_FLAGS.get(arg);
+      args.modes.push(arg);
+    } else if (arg === "--modern") {
+      args.modern = true;
+    } else if (arg === "--follow") {
+      args.follow = true;
+    } else {
+      args.unknown.push(arg);
+    }
+  }
+  return args;
+};
+
+const hints = () =>
+  "  Stop:   yarn build --stop\n" +
+  "  Status: yarn build --status\n" +
+  "  Logs:   yarn build --logs\n";
+
+const devCommand = (suite) => {
+  switch (suite) {
+    case "app-serve":
+      return "dev:serve";
+    case "demo":
+      return "dev:demo";
+    case "gallery":
+      return "dev:gallery";
+    case "e2e-app":
+      return "test:e2e:app:dev";
+    default:
+      return "dev";
+  }
+};
+
+const readBuild = () => readProcessRecord(lockFile);
+
+const releaseBuild = (token) => releaseProcessRecord(lockFile, token);
+
+const stopCommandFor = (owner) =>
+  owner?.kind === "build"
+    ? "yarn build --stop"
+    : owner?.kind === "dev"
+      ? `yarn ${devCommand(owner.suite)} --stop`
+      : undefined;
+
+const acquireBuild = async (modern, foreground) => {
+  const token = `${process.pid}-${Date.now()}-${Math.random()}`;
+  const record = {
+    pid: process.pid,
+    startTime: processStartTime(process.pid),
+    processGroup: false,
+    foreground,
+    kind: "build",
+    modern,
+    starting: true,
+    token,
+  };
+  const result = acquireProcessRecord(lockFile, record);
+  if (result.acquired) {
+    return { token };
+  }
+  reportExisting(result.existing);
+  return (await offerToStopProcessRecord({
+    file: lockFile,
+    owner: result.existing,
+    ownerDescription: describeOutputOwner(result.existing),
+    stopCommand: stopCommandFor(result.existing),
+  }))
+    ? acquireBuild(modern, foreground)
+    : { existing: result.existing };
+};
+
+const updateBuild = (token, child, processGroup) => {
+  const existing = readBuild();
+  if (existing?.token !== token) {
+    throw Error("Frontend build lock ownership was lost during startup.");
+  }
+  writeProcessRecord(lockFile, {
+    ...existing,
+    pid: child.pid,
+    startTime: processStartTime(child.pid),
+    processGroup,
+    starting: false,
+  });
+};
+
+const taskFor = (modern) => (modern ? "build-app-modern" : "build-app");
+
+const reportExisting = (existing) => {
+  if (existing?.kind === "output") {
+    process.stdout.write(
+      `${describeOutputOwner(existing)} already owns the build and development workflow` +
+        `${existing.pid ? ` (pid ${existing.pid})` : ""}.\n`
+    );
+    return;
+  }
+  if (existing?.kind === "dev") {
+    const command = devCommand(existing.suite);
+    process.stdout.write(
+      `Dev server (${existing.suite}) already running` +
+        `${existing.pid ? ` (pid ${existing.pid})` : ""}.\n` +
+        `  Stop:   yarn ${command} --stop\n` +
+        `  Status: yarn ${command} --status\n` +
+        `  Logs:   yarn ${command} --logs\n`
+    );
+    return;
+  }
+  process.stdout.write(
+    `Frontend ${existing?.modern ? "modern " : ""}build already running` +
+      `${existing?.pid ? ` (pid ${existing.pid})` : ""}.\n${hints()}`
+  );
+};
+
+const runForeground = async (modern) => {
+  const lock = await acquireBuild(modern, true);
+  if (!lock.token) {
+    return 1;
+  }
+  try {
+    return await spawnForeground({
+      cmd: gulpBin,
+      args: [taskFor(modern)],
+      cwd: repoRoot,
+      env: workflowLockEnv(lock.token),
+      processGroup: true,
+      onSpawn: (child) => updateBuild(lock.token, child, true),
+    });
+  } finally {
+    releaseBuild(lock.token);
+  }
+};
+
+const runBackground = async (modern) => {
+  const lock = await acquireBuild(modern, false);
+  if (!lock.token) {
+    return 1;
+  }
+  let child;
+  try {
+    child = await spawnDetachedToLog({
+      cmd: gulpBin,
+      args: [taskFor(modern)],
+      cwd: repoRoot,
+      env: workflowLockEnv(lock.token),
+      logFile,
+    });
+    updateBuild(lock.token, child, true);
+    process.stdout.write(
+      `Started ${modern ? "modern " : ""}frontend build (pid ${child.pid})\n` +
+        hints()
+    );
+    return 0;
+  } catch (err) {
+    if (child) {
+      await terminateDetachedProcess(child);
+    }
+    releaseBuild(lock.token);
+    throw err;
+  }
+};
+
+const runStatus = () => {
+  const existing = readBuild();
+  if (existing?.kind === "build" && isProcessRecordAlive(existing)) {
+    process.stdout.write(
+      `Frontend ${existing.modern ? "modern " : ""}build running (pid ${existing.pid}).\n`
+    );
+  } else {
+    if (existing?.kind === "build") {
+      releaseBuild(existing.token);
+    }
+    process.stdout.write("Frontend build not running.\n");
+  }
+  return 0;
+};
+
+const runStop = async () => {
+  let existing = readBuild();
+  if (existing?.kind !== "build") {
+    process.stdout.write("Frontend build not running.\n");
+    return 0;
+  }
+  if (existing?.starting) {
+    const token = existing.token;
+    await waitFor(
+      () => {
+        const current = readBuild();
+        return !current?.starting || current.token !== token;
+      },
+      100,
+      5000
+    );
+    existing = readBuild();
+  }
+  if (
+    !existing ||
+    existing.kind !== "build" ||
+    !isProcessRecordAlive(existing)
+  ) {
+    if (existing) releaseBuild(existing.token);
+    process.stdout.write("Frontend build not running.\n");
+    return 0;
+  }
+  if (
+    !(await terminateProcess({
+      pid: existing.pid,
+      processGroup: existing.processGroup,
+      isStopped: () => !isProcessRecordAlive(existing),
+    }))
+  ) {
+    process.stderr.write(
+      `Failed to stop frontend build (pid ${existing.pid}). Stop it manually.\n`
+    );
+    return 1;
+  }
+  releaseBuild(existing.token);
+  process.stdout.write(`Stopped frontend build (pid ${existing.pid}).\n`);
+  return 0;
+};
+
+const runLogs = (follow) =>
+  outputLog(logFile, follow, `No frontend build log yet (${logFile}).\n`);
+
+const main = async () => {
+  const args = parseArgs(process.argv.slice(2));
+  if (args.unknown.length) {
+    process.stderr.write(`Unknown arguments: ${args.unknown.join(" ")}\n`);
+    usage();
+    return 1;
+  }
+  if (args.modes.length > 1 || (args.follow && args.mode !== "logs")) {
+    process.stderr.write("Invalid combination of build arguments.\n");
+    usage();
+    return 1;
+  }
+  const handlers = {
+    foreground: () => runForeground(args.modern),
+    background: () => runBackground(args.modern),
+    status: runStatus,
+    stop: runStop,
+    logs: () => runLogs(args.follow),
+  };
+  return handlers[args.mode]();
+};
+
+runCli(main);

build-scripts/gulp/app.js

@@ -1,5 +1,6 @@
 import gulp from "gulp";
 import env from "../env.cjs";
+import { createWorkflowLockTask } from "../output-lock.mjs";
 import "./clean.js";
 import "./compress.js";
 import "./entry-html.js";
@@ -17,6 +18,7 @@ gulp.task(
     async function setEnv() {
       process.env.NODE_ENV = "development";
     },
+    createWorkflowLockTask("develop-app"),
     "clean",
     gulp.parallel(
       "gen-service-worker-app-dev",
@@ -36,6 +38,7 @@ gulp.task(
     async function setEnv() {
       process.env.NODE_ENV = "production";
     },
+    createWorkflowLockTask("build-app"),
     "clean",
     gulp.parallel(
       "gen-icons-json",
@@ -51,6 +54,30 @@ gulp.task(
   )
 );
 
+gulp.task(
+  "build-app-modern",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    createWorkflowLockTask("build-app-modern"),
+    "clean",
+    gulp.parallel(
+      "gen-icons-json",
+      "build-translations",
+      "build-locale-data",
+      "gen-licenses"
+    ),
+    "copy-static-app",
+    "rspack-prod-app-modern",
+    gulp.parallel(
+      "gen-pages-app-prod-modern",
+      "gen-service-worker-app-prod-modern"
+    ),
+    ...(env.isTestBuild() || env.isStatsBuild() ? [] : ["compress-app"])
+  )
+);
+
 gulp.task(
   "analyze-app",
   gulp.series(

build-scripts/gulp/demo.js

@@ -1,4 +1,5 @@
 import gulp from "gulp";
+import { createWorkflowLockTask } from "../output-lock.mjs";
 import "./clean.js";
 import "./entry-html.js";
 import "./gather-static.js";
@@ -13,6 +14,7 @@ gulp.task(
     async function setEnv() {
       process.env.NODE_ENV = "development";
     },
+    createWorkflowLockTask("develop-demo"),
     "clean-demo",
     "translations-enable-merge-backend",
     gulp.parallel(
@@ -32,6 +34,7 @@ gulp.task(
     async function setEnv() {
       process.env.NODE_ENV = "production";
     },
+    createWorkflowLockTask("build-demo"),
     "clean-demo",
     // Cast needs to be backwards compatible and older HA has no translations
     "translations-enable-merge-backend",

build-scripts/gulp/e2e-test-app.js

@@ -1,4 +1,5 @@
 import gulp from "gulp";
+import { createWorkflowLockTask } from "../output-lock.mjs";
 import "./clean.js";
 import "./entry-html.js";
 import "./gather-static.js";
@@ -12,6 +13,7 @@ gulp.task(
     async function setEnv() {
       process.env.NODE_ENV = "development";
     },
+    createWorkflowLockTask("develop-e2e-test-app"),
     "clean-e2e-test-app",
     "translations-enable-merge-backend",
     gulp.parallel(
@@ -31,6 +33,7 @@ gulp.task(
     async function setEnv() {
       process.env.NODE_ENV = "production";
     },
+    createWorkflowLockTask("build-e2e-test-app"),
     "clean-e2e-test-app",
     "translations-enable-merge-backend",
     gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),

build-scripts/gulp/entry-html.js

@@ -58,6 +58,12 @@ const getCommonTemplateVars = () => {
   return {
     modernRegex: compileRegex(browserRegexes.concat(haMacOSRegex)).toString(),
     hassUrl: process.env.HASS_URL || "",
+    // Single source for the stale-build recovery patterns, shared with the
+    // bundled src/util/recover-stale-build.ts and injected into the inline
+    // boot guard (_bootstrap_recovery.html.template).
+    staleBuildPatterns: fs.readJsonSync(
+      resolve(paths.root_dir, "src/util/stale-build-patterns.json")
+    ),
   };
 };
 
@@ -107,6 +113,9 @@ const genPagesDevTask =
         resolve(inputRoot, inputSub, `${page}.template`),
         {
           ...commonVars,
+          // Dev entries are unhashed, so the stale-index recovery guard has
+          // nothing to key off and rebuild churn could cause spurious reloads.
+          useCacheRecovery: false,
           latestEntryJS: entries.map(
             (entry) => `${publicRoot}/frontend_latest/${entry}.js`
           ),
@@ -146,10 +155,15 @@ const genPagesProdTask =
         resolve(inputRoot, inputSub, `${page}.template`),
         {
           ...commonVars,
+          // Recover from a stale index.html that pins deleted hashed entry
+          // bundles (see _bootstrap_recovery.html.template).
+          useCacheRecovery: true,
           latestEntryJS: entries.map((entry) => latestManifest[`${entry}.js`]),
-          es5EntryJS: entries.map((entry) => es5Manifest[`${entry}.js`]),
+          es5EntryJS: outputES5
+            ? entries.map((entry) => es5Manifest[`${entry}.js`])
+            : [],
           latestCustomPanelJS: latestManifest["custom-panel.js"],
-          es5CustomPanelJS: es5Manifest["custom-panel.js"],
+          es5CustomPanelJS: outputES5 ? es5Manifest["custom-panel.js"] : "",
         }
       );
       minifiedHTML.push(
@@ -184,6 +198,17 @@ gulp.task(
   )
 );
 
+gulp.task(
+  "gen-pages-app-prod-modern",
+  genPagesProdTask(
+    APP_PAGE_ENTRIES,
+    paths.root_dir,
+    paths.app_output_root,
+    paths.app_output_latest,
+    undefined
+  )
+);
+
 const CAST_PAGE_ENTRIES = {
   "faq.html": ["launcher"],
   "index.html": ["launcher"],

build-scripts/gulp/gallery.js

@@ -4,6 +4,7 @@ import gulp from "gulp";
 import { load as loadYaml } from "js-yaml";
 import { marked } from "marked";
 import path from "path";
+import { createWorkflowLockTask } from "../output-lock.mjs";
 import paths from "../paths.cjs";
 import "./clean.js";
 import "./entry-html.js";
@@ -164,6 +165,7 @@ gulp.task(
     async function setEnv() {
       process.env.NODE_ENV = "development";
     },
+    createWorkflowLockTask("develop-gallery"),
     "clean-gallery",
     "translations-enable-merge-backend",
     gulp.parallel(
@@ -195,6 +197,7 @@ gulp.task(
     async function setEnv() {
       process.env.NODE_ENV = "production";
     },
+    createWorkflowLockTask("build-gallery"),
     "clean-gallery",
     "translations-enable-merge-backend",
     gulp.parallel(

build-scripts/gulp/rspack.js

@@ -108,7 +108,7 @@ const runDevServer = async ({
   }
 };
 
-const doneHandler = (done) => (err, stats) => {
+const doneHandler = () => (err, stats) => {
   if (err) {
     log.error(err.stack || err);
     if (err.details) {
@@ -122,18 +122,26 @@ const doneHandler = (done) => (err, stats) => {
   }
 
   log(`Build done @ ${new Date().toLocaleTimeString()}`);
-
-  if (done) {
-    done();
-  }
 };
 
 const prodBuild = (conf) =>
-  new Promise((resolve) => {
+  new Promise((resolve, reject) => {
     rspack(
       conf,
       // Resolve promise when done. Because we pass a callback, rspack closes itself
-      doneHandler(resolve)
+      (err, stats) => {
+        if (err) {
+          reject(err);
+        } else if (stats.hasErrors()) {
+          reject(Error(stats.toString("errors-only")));
+        } else {
+          if (stats.hasWarnings()) {
+            console.log(stats.toString("minimal"));
+          }
+          log(`Build done @ ${new Date().toLocaleTimeString()}`);
+          resolve();
+        }
+      }
     );
   });
 
@@ -160,6 +168,17 @@ gulp.task("rspack-prod-app", () =>
   )
 );
 
+gulp.task("rspack-prod-app-modern", () =>
+  prodBuild(
+    createAppConfig({
+      isProdBuild: true,
+      isStatsBuild: env.isStatsBuild(),
+      isTestBuild: env.isTestBuild(),
+      latestBuild: true,
+    })
+  )
+);
+
 gulp.task("rspack-dev-server-demo", () =>
   runDevServer({
     compiler: rspack(

build-scripts/gulp/service-worker.js

@@ -34,9 +34,9 @@ gulp.task("gen-service-worker-app-dev", async () => {
   );
 });
 
-gulp.task("gen-service-worker-app-prod", () =>
+const genServiceWorker = (builds) =>
   Promise.all(
-    Object.entries(SW_MAP).map(async ([outPath, build]) => {
+    builds.map(async ([outPath, build]) => {
       const manifest = JSON.parse(
         await readFile(join(outPath, "manifest.json"), "utf-8")
       );
@@ -83,5 +83,12 @@ gulp.task("gen-service-worker-app-prod", () =>
         await symlink(basename(swDest), swOld);
       }
     })
-  )
+  );
+
+gulp.task("gen-service-worker-app-prod", () =>
+  genServiceWorker(Object.entries(SW_MAP))
+);
+
+gulp.task("gen-service-worker-app-prod-modern", () =>
+  genServiceWorker([[paths.app_output_latest, "modern"]])
 );

build-scripts/gulp/translations.js

@@ -1,5 +1,3 @@
-/* eslint-disable max-classes-per-file */
-
 import { deleteAsync } from "del";
 import { glob } from "glob";
 import gulp from "gulp";

build-scripts/managed-process.mjs

@@ -0,0 +1,552 @@
+import { spawn, execFileSync } from "node:child_process";
+import fs from "node:fs";
+import path from "node:path";
+import { createInterface } from "node:readline/promises";
+
+export const LIFECYCLE_MODE_FLAGS = new Map([
+  ["--background", "background"],
+  ["--status", "status"],
+  ["--stop", "stop"],
+  ["--logs", "logs"],
+]);
+
+const AGENT_PROVIDERS = [
+  {
+    id: "opencode",
+    env: [
+      "OPENCODE",
+      "OPENCODE_BIN_PATH",
+      "OPENCODE_SERVER",
+      "OPENCODE_APP_INFO",
+      "OPENCODE_MODES",
+    ],
+    processes: ["opencode"],
+  },
+  {
+    id: "claude-code",
+    env: ["CLAUDECODE"],
+    processes: ["claude"],
+  },
+  {
+    id: "cursor",
+    env: ["CURSOR_TRACE_ID"],
+    processes: [],
+  },
+  {
+    id: "github-copilot",
+    matchesEnv: (env) =>
+      env.TERM_PROGRAM === "vscode" && env.GIT_PAGER === "cat",
+    processes: [],
+  },
+  {
+    id: "generic",
+    env: ["AGENT", "AI_AGENT"],
+    processes: [],
+  },
+];
+const MAX_ANCESTRY_HOPS = 24;
+
+const readProcessParent = (pid) => {
+  try {
+    const stat = fs.readFileSync(`/proc/${pid}/stat`, "utf8");
+    const commandEnd = stat.lastIndexOf(")");
+    const commandStart = stat.indexOf("(");
+    if (commandStart === -1 || commandEnd === -1) {
+      return undefined;
+    }
+    const parentPid = Number.parseInt(
+      stat.slice(commandEnd + 2).split(" ")[1] ?? "",
+      10
+    );
+    return Number.isFinite(parentPid)
+      ? {
+          command: stat.slice(commandStart + 1, commandEnd).toLowerCase(),
+          parentPid,
+        }
+      : undefined;
+  } catch {
+    return undefined;
+  }
+};
+
+export const detectCodingAgent = (env = process.env, pid = process.pid) => {
+  if (env.HA_CODING_AGENT === "0") {
+    return undefined;
+  }
+  const envMatch = AGENT_PROVIDERS.find(
+    (provider) =>
+      provider.matchesEnv?.(env) || provider.env?.some((name) => env[name])
+  );
+  if (envMatch) {
+    return envMatch.id;
+  }
+  if (env.HA_CODING_AGENT === "1") {
+    return "unknown";
+  }
+  let currentPid = pid;
+  for (let hop = 0; hop < MAX_ANCESTRY_HOPS; hop++) {
+    const processInfo = readProcessParent(currentPid);
+    if (!processInfo) {
+      return undefined;
+    }
+    const processMatch = AGENT_PROVIDERS.find((provider) =>
+      provider.processes.some((name) => processInfo.command.includes(name))
+    );
+    if (processMatch) {
+      return processMatch.id;
+    }
+    if (processInfo.parentPid <= 1) {
+      return undefined;
+    }
+    currentPid = processInfo.parentPid;
+  }
+  return undefined;
+};
+
+const canPromptForConflict = () =>
+  Boolean(process.stdin.isTTY && process.stderr.isTTY && !detectCodingAgent());
+
+const formatCommand = (command) =>
+  !("NO_COLOR" in process.env)
+    ? `\u001b[1;36m${command}\u001b[0m`
+    : `\`${command}\``;
+
+const confirmStopConflict = async (ownerDescription, stopCommand) => {
+  const readline = createInterface({
+    input: process.stdin,
+    output: process.stderr,
+  });
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), 30_000);
+  try {
+    process.stderr.write(
+      `${ownerDescription} can be stopped with ${formatCommand(stopCommand)}.\n`
+    );
+    const answer = await readline.question("Stop it and continue? [y/N] ", {
+      signal: controller.signal,
+    });
+    return ["y", "yes"].includes(answer.trim().toLowerCase());
+  } catch (err) {
+    if (err?.name !== "AbortError") {
+      throw err;
+    }
+    process.stderr.write("\n");
+    return false;
+  } finally {
+    clearTimeout(timeout);
+    readline.close();
+  }
+};
+
+export const sleep = (ms) =>
+  new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+
+export const waitFor = async (predicate, intervalMs, timeoutMs) => {
+  const deadline = Date.now() + timeoutMs;
+  const poll = async () => {
+    if (await predicate()) {
+      return true;
+    }
+    if (Date.now() >= deadline) {
+      return false;
+    }
+    await sleep(intervalMs);
+    return poll();
+  };
+  return poll();
+};
+
+export const isProcessAlive = (pid) => {
+  if (!Number.isInteger(pid) || pid <= 0) {
+    return false;
+  }
+  try {
+    process.kill(pid, 0);
+    return true;
+  } catch (err) {
+    // EPERM means the process exists but is owned by someone else.
+    return err.code === "EPERM";
+  }
+};
+
+export const processStartTime = (pid) => {
+  if (!isProcessAlive(pid)) {
+    return undefined;
+  }
+  try {
+    const stat = fs.readFileSync(`/proc/${pid}/stat`, "utf8");
+    return stat.slice(stat.lastIndexOf(")") + 2).split(" ")[19];
+  } catch {
+    try {
+      return execFileSync("ps", ["-o", "lstart=", "-p", String(pid)], {
+        encoding: "utf8",
+        stdio: ["ignore", "pipe", "ignore"],
+      }).trim();
+    } catch {
+      return undefined;
+    }
+  }
+};
+
+export const isProcessRecordAlive = ({ pid, startTime }) =>
+  Boolean(startTime) && processStartTime(pid) === startTime;
+
+export const readProcessRecord = (file) => {
+  try {
+    const data = JSON.parse(fs.readFileSync(file, "utf8"));
+    return data && Number.isInteger(data.pid) ? data : undefined;
+  } catch (err) {
+    if (err.code === "ENOENT" || err instanceof SyntaxError) {
+      return undefined;
+    }
+    throw err;
+  }
+};
+
+export const writeProcessRecord = (file, data) => {
+  fs.mkdirSync(path.dirname(file), { recursive: true });
+  const temporary = `${file}.${process.pid}.${Date.now()}.tmp`;
+  try {
+    fs.writeFileSync(temporary, JSON.stringify(data));
+    fs.renameSync(temporary, file);
+  } finally {
+    removeFileIfExists(temporary);
+  }
+};
+
+export const removeProcessRecord = (file) => {
+  removeFileIfExists(file);
+};
+
+export const acquireProcessRecord = (file, data) => {
+  fs.mkdirSync(path.dirname(file), { recursive: true });
+  for (let attempt = 0; attempt < 2; attempt++) {
+    try {
+      const fd = fs.openSync(file, "wx");
+      try {
+        fs.writeFileSync(fd, JSON.stringify(data));
+      } finally {
+        fs.closeSync(fd);
+      }
+      return { acquired: true };
+    } catch (err) {
+      if (err.code !== "EEXIST") {
+        throw err;
+      }
+      const existing = readProcessRecord(file);
+      if (existing && isProcessRecordAlive(existing)) {
+        return { acquired: false, existing };
+      }
+      if (!existing && isRecentFile(file)) {
+        return { acquired: false };
+      }
+      const removed = withExclusiveFileLockSync(`${file}.cleanup`, () => {
+        const current = readProcessRecord(file);
+        if (
+          current &&
+          (current.token !== existing?.token || isProcessRecordAlive(current))
+        ) {
+          return false;
+        }
+        removeProcessRecord(file);
+        return true;
+      });
+      if (!removed.acquired || !removed.value) {
+        return { acquired: false, existing: readProcessRecord(file) };
+      }
+    }
+  }
+  return { acquired: false, existing: readProcessRecord(file) };
+};
+
+export const releaseProcessRecord = (file, token, onRelease) => {
+  if (!token) {
+    return;
+  }
+  withExclusiveFileLockSync(`${file}.cleanup`, () => {
+    const existing = readProcessRecord(file);
+    if (!existing || existing.token === token) {
+      onRelease?.();
+      if (existing) {
+        removeProcessRecord(file);
+      }
+    }
+  });
+};
+
+const removeFileIfExists = (file) => {
+  try {
+    fs.rmSync(file);
+  } catch (err) {
+    if (err.code !== "ENOENT") {
+      throw err;
+    }
+  }
+};
+
+const isRecentFile = (file) => {
+  try {
+    return Date.now() - fs.statSync(file).mtimeMs < 5000;
+  } catch (err) {
+    if (err.code === "ENOENT") {
+      return false;
+    }
+    throw err;
+  }
+};
+
+export const withExclusiveFileLockSync = (file, operation) => {
+  fs.mkdirSync(path.dirname(file), { recursive: true });
+  for (let attempt = 0; attempt < 2; attempt++) {
+    let fd;
+    try {
+      fd = fs.openSync(file, "wx");
+    } catch (err) {
+      if (err.code !== "EEXIST") {
+        throw err;
+      }
+      const owner = readProcessRecord(file);
+      if (owner && isProcessRecordAlive(owner)) {
+        return { acquired: false };
+      }
+      if (!owner && isRecentFile(file)) {
+        return { acquired: false };
+      }
+      removeFileIfExists(file);
+      continue;
+    }
+    try {
+      fs.writeFileSync(
+        fd,
+        JSON.stringify({
+          pid: process.pid,
+          startTime: processStartTime(process.pid),
+        })
+      );
+      return { acquired: true, value: operation() };
+    } finally {
+      try {
+        fs.closeSync(fd);
+      } finally {
+        removeFileIfExists(file);
+      }
+    }
+  }
+  return { acquired: false };
+};
+
+export const spawnForeground = ({
+  cmd,
+  args,
+  cwd,
+  env,
+  processGroup = false,
+  onSpawn,
+}) =>
+  new Promise((resolve, reject) => {
+    const child = spawn(cmd, args, {
+      cwd,
+      detached: processGroup,
+      env,
+      stdio: "inherit",
+    });
+    let settled = false;
+    const forwardSigint = () =>
+      signalProcess(child.pid, "SIGINT", processGroup);
+    const forwardSigterm = () =>
+      signalProcess(child.pid, "SIGTERM", processGroup);
+    const forwardSighup = () =>
+      signalProcess(child.pid, "SIGHUP", processGroup);
+    const removeSignalHandlers = () => {
+      process.off("SIGINT", forwardSigint);
+      process.off("SIGTERM", forwardSigterm);
+      process.off("SIGHUP", forwardSighup);
+    };
+    if (processGroup) {
+      process.on("SIGINT", forwardSigint);
+      process.on("SIGTERM", forwardSigterm);
+      process.on("SIGHUP", forwardSighup);
+    }
+    child.once("spawn", () => {
+      try {
+        onSpawn?.(child);
+      } catch (err) {
+        settled = true;
+        signalProcess(child.pid, "SIGTERM", processGroup);
+        removeSignalHandlers();
+        reject(err);
+      }
+    });
+    child.once("error", (err) => {
+      if (!settled) {
+        settled = true;
+        removeSignalHandlers();
+        process.stderr.write(`Failed to start ${cmd}: ${err.message}\n`);
+        resolve(1);
+      }
+    });
+    child.once("exit", (code) => {
+      if (!settled) {
+        settled = true;
+        removeSignalHandlers();
+        resolve(code ?? 1);
+      }
+    });
+  });
+
+export const spawnDetachedToLog = ({ cmd, args, cwd, env, logFile }) =>
+  new Promise((resolve, reject) => {
+    fs.mkdirSync(path.dirname(logFile), { recursive: true });
+    const fd = fs.openSync(logFile, "w");
+    let child;
+    try {
+      child = spawn(cmd, args, {
+        cwd,
+        detached: true,
+        env,
+        stdio: ["ignore", fd, fd],
+      });
+    } finally {
+      fs.closeSync(fd);
+    }
+    child.once("spawn", () => {
+      child.unref();
+      resolve(child);
+    });
+    child.once("error", reject);
+  });
+
+const signalProcess = (pid, signal, processGroup) => {
+  if (processGroup) {
+    try {
+      process.kill(-pid, signal);
+      return;
+    } catch {
+      // Fall back to the process itself.
+    }
+  }
+  try {
+    process.kill(pid, signal);
+  } catch {
+    // Already gone.
+  }
+};
+
+export const terminateProcess = async ({
+  pid,
+  isStopped,
+  processGroup = true,
+  graceMs = 10_000,
+}) => {
+  signalProcess(pid, "SIGTERM", processGroup);
+  if (await waitFor(isStopped, 300, graceMs)) {
+    return true;
+  }
+  signalProcess(pid, "SIGKILL", processGroup);
+  await sleep(300);
+  return await isStopped();
+};
+
+const sameProcessRecord = (current, expected) =>
+  Boolean(expected?.token) && current?.token === expected.token;
+
+const stopProcessRecord = async (file, owner) => {
+  let current = readProcessRecord(file);
+  if (!current) {
+    return true;
+  }
+  if (!sameProcessRecord(current, owner)) {
+    return false;
+  }
+  if (!isProcessRecordAlive(current)) {
+    releaseProcessRecord(file, current.token);
+    return true;
+  }
+  const stopped = await terminateProcess({
+    pid: current.pid,
+    processGroup: current.processGroup ?? false,
+    isStopped: () => {
+      const latest = readProcessRecord(file);
+      return (
+        !sameProcessRecord(latest, owner) ||
+        !latest ||
+        !isProcessRecordAlive(latest)
+      );
+    },
+  });
+  current = readProcessRecord(file);
+  if (current && !sameProcessRecord(current, owner)) {
+    return false;
+  }
+  if (!stopped && current) {
+    return false;
+  }
+  releaseProcessRecord(file, owner.token);
+  return true;
+};
+
+export const offerToStopProcessRecord = async ({
+  file,
+  owner,
+  ownerDescription,
+  stopCommand,
+}) => {
+  if (
+    !owner ||
+    !stopCommand ||
+    !canPromptForConflict() ||
+    !(await confirmStopConflict(ownerDescription, stopCommand))
+  ) {
+    return false;
+  }
+  return stopProcessRecord(file, owner);
+};
+
+export const terminateDetachedProcess = (child) =>
+  terminateProcess({
+    pid: child.pid,
+    processGroup: true,
+    isStopped: () => !isProcessAlive(child.pid),
+  });
+
+export const outputLog = (logFile, follow, missingMessage) => {
+  if (!fs.existsSync(logFile)) {
+    process.stdout.write(missingMessage);
+    return Promise.resolve(0);
+  }
+  if (!follow) {
+    process.stdout.write(fs.readFileSync(logFile, "utf8"));
+    return Promise.resolve(0);
+  }
+  return new Promise((resolve) => {
+    const tail = spawn("tail", ["-f", logFile], { stdio: "inherit" });
+    let settled = false;
+    tail.once("error", () => {
+      if (!settled) {
+        settled = true;
+        process.stdout.write(fs.readFileSync(logFile, "utf8"));
+        resolve(0);
+      }
+    });
+    tail.once("exit", (code) => {
+      if (!settled) {
+        settled = true;
+        resolve(code ?? 1);
+      }
+    });
+  });
+};
+
+export const runCli = (main) => {
+  main().then(
+    (code) => {
+      process.exitCode = code;
+    },
+    (err) => {
+      process.stderr.write(`${err?.stack || err}\n`);
+      process.exitCode = 1;
+    }
+  );
+};

build-scripts/output-lock.mjs

@@ -0,0 +1,127 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import {
+  acquireProcessRecord,
+  processStartTime,
+  readProcessRecord,
+  releaseProcessRecord,
+} from "./managed-process.mjs";
+
+const repoRoot = path.resolve(
+  path.dirname(fileURLToPath(import.meta.url)),
+  ".."
+);
+export const buildCacheDir =
+  process.env.HA_BUILD_CACHE_DIR ??
+  path.join(repoRoot, "node_modules", ".cache");
+
+const WORKFLOW_LOCK_TOKEN_ENV = "HA_WORKFLOW_LOCK_TOKEN";
+const signalCleanups = new Set();
+const cleanupSignals = ["SIGINT", "SIGTERM", "SIGHUP"];
+
+const handleSignal = (signal) => {
+  for (const cleanup of signalCleanups) {
+    cleanup();
+  }
+  for (const cleanupSignal of cleanupSignals) {
+    process.off(cleanupSignal, handleSignal);
+  }
+  process.kill(process.pid, signal);
+};
+
+const registerSignalCleanup = (cleanup) => {
+  if (signalCleanups.size === 0) {
+    for (const signal of cleanupSignals) {
+      process.on(signal, handleSignal);
+    }
+  }
+  signalCleanups.add(cleanup);
+};
+
+const unregisterSignalCleanup = (cleanup) => {
+  signalCleanups.delete(cleanup);
+  if (signalCleanups.size === 0) {
+    for (const signal of cleanupSignals) {
+      process.off(signal, handleSignal);
+    }
+  }
+};
+
+export const workflowLockFile = path.join(buildCacheDir, "ha-workflow.lock");
+
+export const workflowLockEnv = (token) => ({
+  ...process.env,
+  [WORKFLOW_LOCK_TOKEN_ENV]: token,
+});
+
+export const describeOutputOwner = (owner) => {
+  if (owner?.kind === "build") {
+    return `frontend ${owner.modern ? "modern " : ""}build`;
+  }
+  if (owner?.kind === "dev") {
+    return `dev server (${owner.suite ?? "app"})`;
+  }
+  return owner?.target ? `Gulp task ${owner.target}` : "another process";
+};
+
+const createLockTask = ({ file, inheritedTokenEnv, kind, label, target }) => {
+  let exitToken;
+
+  const cleanup = () => {
+    if (!exitToken) {
+      return;
+    }
+    releaseProcessRecord(file, exitToken);
+    exitToken = undefined;
+    process.off("exit", cleanup);
+    unregisterSignalCleanup(cleanup);
+  };
+  const acquire = async () => {
+    const inheritedToken = process.env[inheritedTokenEnv];
+    if (inheritedToken) {
+      if (readProcessRecord(file)?.token !== inheritedToken) {
+        throw Error(
+          `${label} lock ownership was lost before ${target} started.`
+        );
+      }
+      exitToken = inheritedToken;
+      process.once("exit", cleanup);
+      registerSignalCleanup(cleanup);
+      return;
+    }
+
+    const token = `${process.pid}-${Date.now()}-${Math.random()}`;
+    const record = {
+      pid: process.pid,
+      startTime: processStartTime(process.pid),
+      processGroup: false,
+      kind,
+      target,
+      token,
+    };
+    const result = acquireProcessRecord(file, record);
+    if (!result.acquired) {
+      const pid = result.existing?.pid;
+      throw Error(
+        `Cannot run ${target}: ${describeOutputOwner(result.existing)} ` +
+          `already owns ${label}${pid ? ` (pid ${pid})` : ""}.`
+      );
+    }
+
+    exitToken = token;
+    process.once("exit", cleanup);
+    registerSignalCleanup(cleanup);
+  };
+
+  acquire.displayName = `lock-${label}:${target}`;
+  return acquire;
+};
+
+export const createWorkflowLockTask = (target) =>
+  createLockTask({
+    file: workflowLockFile,
+    inheritedTokenEnv: WORKFLOW_LOCK_TOKEN_ENV,
+    kind: "output",
+    label: "build and development workflow",
+    target,
+  });

package.json

@@ -7,7 +7,7 @@
   "name": "home-assistant-frontend",
   "version": "1.0.0",
   "scripts": {
-    "build": "script/build_frontend",
+    "build": "node build-scripts/build-manager.mjs",
     "lint:eslint": "eslint \"**/src/**/*.{js,ts,html}\" --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --ignore-pattern=.gitignore --max-warnings=0",
     "format:eslint": "eslint \"**/src/**/*.{js,ts,html}\" --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --ignore-pattern=.gitignore --fix",
     "lint:prettier": "prettier . --cache --check",
@@ -49,16 +49,16 @@
     "@codemirror/lint": "6.9.7",
     "@codemirror/search": "6.7.1",
     "@codemirror/state": "6.7.1",
-    "@codemirror/view": "6.43.6",
+    "@codemirror/view": "6.43.7",
     "@date-fns/tz": "1.5.0",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "7.5.2",
+    "@formatjs/intl-datetimeformat": "7.6.0",
     "@formatjs/intl-displaynames": "7.3.13",
     "@formatjs/intl-durationformat": "0.10.18",
     "@formatjs/intl-getcanonicallocales": "3.2.11",
     "@formatjs/intl-listformat": "8.3.13",
     "@formatjs/intl-locale": "5.3.10",
-    "@formatjs/intl-numberformat": "9.3.14",
+    "@formatjs/intl-numberformat": "9.4.0",
     "@formatjs/intl-pluralrules": "6.3.13",
     "@formatjs/intl-relativetimeformat": "12.3.13",
     "@fullcalendar/core": "6.1.21",
@@ -107,7 +107,7 @@
     "hls.js": "1.6.16",
     "home-assistant-js-websocket": "9.6.0",
     "idb-keyval": "6.3.0",
-    "intl-messageformat": "11.2.12",
+    "intl-messageformat": "11.2.13",
     "js-yaml": "5.2.2",
     "leaflet": "1.9.4",
     "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
@@ -150,9 +150,9 @@
     "@octokit/auth-oauth-device": "8.0.3",
     "@octokit/plugin-retry": "8.1.0",
     "@octokit/rest": "22.0.1",
-    "@playwright/test": "1.62.0",
+    "@playwright/test": "1.62.1",
     "@rsdoctor/rspack-plugin": "1.6.1",
-    "@rspack/core": "2.1.5",
+    "@rspack/core": "2.1.7",
     "@rspack/dev-server": "2.1.0",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.26",
@@ -186,14 +186,14 @@
     "fs-extra": "11.4.0",
     "generate-license-file": "4.2.1",
     "glob": "13.0.6",
-    "globals": "17.7.0",
+    "globals": "17.8.0",
     "gulp": "5.0.1",
     "gulp-brotli": "3.0.0",
     "gulp-json-transform": "0.5.0",
     "gulp-rename": "2.1.0",
     "html-minifier-terser": "7.2.0",
     "husky": "9.1.7",
-    "jsdom": "29.1.1",
+    "jsdom": "30.0.1",
     "jszip": "3.10.1",
     "license-checker-rseidelsohn": "5.0.1",
     "lint-staged": "17.2.0",
@@ -224,12 +224,12 @@
     "clean-css": "5.3.3",
     "@lit/reactive-element": "2.1.2",
     "@fullcalendar/daygrid": "6.1.21",
-    "globals": "17.7.0",
+    "globals": "17.8.0",
     "tslib": "2.8.1",
     "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"
   },
-  "packageManager": "yarn@4.17.1",
+  "packageManager": "yarn@4.18.0",
   "volta": {
-    "node": "24.18.0"
+    "node": "24.18.1"
   }
 }

pyproject.toml

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

script/develop_and_serve

@@ -61,10 +61,44 @@ fi
 echo Core is used from ${coreUrl}
 
 # build the frontend so it connects to the passed core
-HASS_URL="$coreUrl" ./script/develop &
+HASS_URL="$coreUrl" ./node_modules/.bin/gulp develop-app &
+develop_pid=$!
 
 # serve the frontend
 ./node_modules/.bin/serve -p $frontendPort --single --no-port-switching --config ../script/serve-config.json ./hass_frontend &
+serve_pid=$!
 
-# keep the script running while serving
-wait
+stop_children() {
+    trap - EXIT INT TERM HUP
+    kill "$develop_pid" "$serve_pid" 2>/dev/null || true
+    wait "$develop_pid" 2>/dev/null || true
+    wait "$serve_pid" 2>/dev/null || true
+}
+
+trap stop_children EXIT
+trap 'stop_children; exit 130' INT
+trap 'stop_children; exit 143' TERM
+trap 'stop_children; exit 129' HUP
+
+while kill -0 "$develop_pid" 2>/dev/null && kill -0 "$serve_pid" 2>/dev/null; do
+    sleep 1
+done
+
+develop_status=
+serve_status=
+if ! kill -0 "$develop_pid" 2>/dev/null; then
+    if wait "$develop_pid"; then develop_status=0; else develop_status=$?; fi
+fi
+if ! kill -0 "$serve_pid" 2>/dev/null; then
+    if wait "$serve_pid"; then serve_status=0; else serve_status=$?; fi
+fi
+
+if [ -n "$develop_status" ] && [ "$develop_status" -ne 0 ]; then
+    status=$develop_status
+elif [ -n "$serve_status" ]; then
+    status=$serve_status
+else
+    status=$develop_status
+fi
+
+exit "$status"

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/components/buttons/ha-progress-button.ts

@@ -118,10 +118,15 @@ export class HaProgressButton extends LitElement {
       width: 100%;
     }
 
+    /* Fade the content out rather than hiding it, so the button keeps its
+       accessible name while the result icon covers it. */
     ha-button.result::part(start),
     ha-button.result::part(end),
     ha-button.result::part(label),
-    ha-button.result::part(caret),
+    ha-button.result::part(caret) {
+      opacity: 0;
+    }
+
     ha-button.result::part(spinner) {
       visibility: hidden;
     }

src/components/data-table/ha-data-table.ts

@@ -12,6 +12,7 @@ import {
 } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
+import { join } from "lit/directives/join";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { STRINGS_SEPARATOR_DOT } from "../../common/const";
@@ -483,13 +484,7 @@ export class HaDataTable extends LitElement {
                   : ""
               }
               ${Object.entries(columns).map(([key, column]) => {
-                if (
-                  column.hidden ||
-                  (this.columnOrder && this.columnOrder.includes(key)
-                    ? (this.hiddenColumns?.includes(key) ??
-                      column.defaultHidden)
-                    : column.defaultHidden)
-                ) {
+                if (!this._isColumnVisible(key, column)) {
                   return nothing;
                 }
                 const sorted = key === this.sortColumn;
@@ -657,10 +652,7 @@ export class HaDataTable extends LitElement {
         ${Object.entries(columns).map(([key, column]) => {
           if (
             (narrow && !column.main && !column.showNarrow) ||
-            column.hidden ||
-            (this.columnOrder && this.columnOrder.includes(key)
-              ? (this.hiddenColumns?.includes(key) ?? column.defaultHidden)
-              : column.defaultHidden)
+            !this._isColumnVisible(key, column)
           ) {
             return nothing;
           }
@@ -692,28 +684,19 @@ export class HaDataTable extends LitElement {
                   : narrow && column.main
                     ? html`<div class="primary">${row[key]}</div>
                         <div class="secondary">
-                          ${Object.entries(columns)
-                            .filter(
-                              ([key2, column2]) =>
-                                !column2.hidden &&
-                                !column2.main &&
-                                !column2.showNarrow &&
-                                !(this.columnOrder &&
-                                this.columnOrder.includes(key2)
-                                  ? (this.hiddenColumns?.includes(key2) ??
-                                    column2.defaultHidden)
-                                  : column2.defaultHidden)
-                            )
-                            .map(
-                              ([key2, column2], i) =>
-                                html`${
-                                  i !== 0 ? STRINGS_SEPARATOR_DOT : nothing
-                                }${
-                                  column2.template
-                                    ? column2.template(row)
-                                    : row[key2]
-                                }`
-                            )}
+                          ${join(
+                            Object.entries(columns)
+                              .filter(([key2, column2]) =>
+                                this._isSecondaryColumnVisible(key2, column2)
+                              )
+                              .map(([key2, column2]) =>
+                                column2.template
+                                  ? column2.template(row)
+                                  : row[key2]
+                              )
+                              .filter(this._hasCellValue),
+                            STRINGS_SEPARATOR_DOT
+                          )}
                         </div>
                         ${
                           column.extraTemplate
@@ -733,6 +716,29 @@ export class HaDataTable extends LitElement {
     `;
   };
 
+  private _isColumnVisible(key: string, column: DataTableColumnData): boolean {
+    if (column.hidden) {
+      return false;
+    }
+    if (!this.columnOrder?.includes(key)) {
+      return !column.defaultHidden;
+    }
+    return !(this.hiddenColumns?.includes(key) ?? column.defaultHidden);
+  }
+
+  private _isSecondaryColumnVisible(
+    key: string,
+    column: DataTableColumnData
+  ): boolean {
+    if (column.main || column.showNarrow) {
+      return false;
+    }
+    return this._isColumnVisible(key, column);
+  }
+
+  private _hasCellValue = (value: unknown): boolean =>
+    value !== undefined && value !== null && value !== "" && value !== nothing;
+
   private async _sortFilterData() {
     const startTime = new Date().getTime();
     const timeBetweenUpdate = startTime - this._lastUpdate;

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

@@ -45,6 +45,7 @@ import {
 } from "../../data/media_source";
 import { isTTSMediaSource } from "../../data/tts";
 import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
+import { panelIsReady } from "../../layouts/panel-ready";
 import { haStyle, haStyleScrollbar } from "../../resources/styles";
 import { loadVirtualizer } from "../../resources/virtualizer";
 import type { HomeAssistant } from "../../types";
@@ -161,6 +162,8 @@ export class HaMediaPlayerBrowse extends LitElement {
 
   private _resizeObserver?: ResizeObserver;
 
+  private _initialReady = false;
+
   public connectedCallback(): void {
     super.connectedCallback();
     this.updateComplete.then(() => this._attachResizeObserver());
@@ -274,6 +277,7 @@ export class HaMediaPlayerBrowse extends LitElement {
         ids: navigateIds,
         current: this._currentItem,
       });
+      this._signalInitialReady();
     } else {
       if (!currentProm) {
         currentProm = this._fetchData(
@@ -289,6 +293,7 @@ export class HaMediaPlayerBrowse extends LitElement {
             ids: navigateIds,
             current: item,
           });
+          this._signalInitialReady();
         },
         (err) => {
           // When we change entity ID, we will first try to see if the new entity is
@@ -322,8 +327,10 @@ export class HaMediaPlayerBrowse extends LitElement {
               ),
               code: "entity_not_found",
             });
+            this._signalInitialReady();
           } else {
             this._setError(err);
+            this._signalInitialReady();
           }
         }
       );
@@ -1145,6 +1152,21 @@ export class HaMediaPlayerBrowse extends LitElement {
     fireEvent(this, "close-dialog");
   }
 
+  private _signalInitialReady(): void {
+    if (this._initialReady) {
+      return;
+    }
+    this._initialReady = true;
+    const root = this.getRootNode();
+    panelIsReady(
+      root instanceof ShadowRoot &&
+        root.host instanceof HTMLElement &&
+        root.host.tagName.startsWith("HA-PANEL-")
+        ? root.host
+        : this
+    );
+  }
+
   private _setError(error: any) {
     if (!this.dialog) {
       this._error = error;
@@ -1209,8 +1231,8 @@ export class HaMediaPlayerBrowse extends LitElement {
   }
 
   private _animateHeaderHeight() {
-    let start;
-    const animate = (time) => {
+    let start: number | undefined;
+    const animate = (time: number) => {
       if (start === undefined) {
         start = time;
       }

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

@@ -15,13 +15,14 @@ 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 `--ha-tile-info-primary-line-clamp`. 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-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)`.
- * @cssprop --ha-tile-info-primary-line-clamp - The maximum number of lines for the primary text before truncating with an ellipsis. defaults to `1`.
  * @cssprop --ha-tile-info-primary-letter-spacing - The letter spacing of the primary text. defaults to `0.1px`.
  * @cssprop --ha-tile-info-primary-color - The color of the primary text. defaults to `var(--primary-text-color)`.
  * @cssprop --ha-tile-info-secondary-font-size - The font size of the secondary text. defaults to `var(--ha-font-size-s)`.
@@ -43,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
@@ -77,7 +78,6 @@ export class HaTileInfo extends LitElement {
         --ha-tile-info-primary-line-height,
         var(--ha-line-height-normal)
       );
-      --tile-info-primary-line-clamp: var(--ha-tile-info-primary-line-clamp, 1);
       --tile-info-primary-min-height: var(
         --ha-tile-info-primary-min-height,
         auto
@@ -120,6 +120,8 @@ export class HaTileInfo extends LitElement {
       gap: var(--tile-info-gap);
       min-height: var(--tile-info-min-height);
     }
+    .primary span,
+    ::slotted([slot="primary"]),
     .secondary span,
     ::slotted([slot="secondary"]) {
       text-overflow: ellipsis;
@@ -127,15 +129,6 @@ export class HaTileInfo extends LitElement {
       white-space: nowrap;
       width: 100%;
     }
-    .primary span,
-    ::slotted([slot="primary"]) {
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: var(--tile-info-primary-line-clamp);
-      overflow: hidden;
-      overflow-wrap: anywhere;
-      width: 100%;
-    }
     .primary {
       display: flex;
       align-items: center;

src/data/lovelace.ts

@@ -23,6 +23,7 @@ export interface LovelaceViewElement extends HTMLElement {
   badges?: HuiBadge[];
   sections?: HuiSection[];
   isStrategy: boolean;
+  initialRenderComplete?: Promise<void>;
   setConfig(config: LovelaceViewConfig): void;
 }
 

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/data/zwave_js.ts

@@ -314,6 +314,11 @@ export interface ZWaveJSSetConfigParamResult {
   error?: string;
 }
 
+export interface ZwaveJSNodeConfigParameterUpdate {
+  id: string;
+  value: number | null;
+}
+
 export interface ZWaveJSDataCollectionStatus {
   enabled: boolean;
   opted_in: boolean;
@@ -732,6 +737,16 @@ export const fetchZwaveNodeConfigParameters = (
     device_id,
   });
 
+export const subscribeZwaveNodeConfigParameterUpdates = (
+  hass: HomeAssistant,
+  device_id: string,
+  callback: (update: ZwaveJSNodeConfigParameterUpdate) => void
+): Promise<UnsubscribeFunc> =>
+  hass.connection.subscribeMessage(callback, {
+    type: "zwave_js/subscribe_config_parameter_updates",
+    device_id,
+  });
+
 export const setZwaveNodeConfigParameter = (
   hass: HomeAssistant,
   device_id: string,

src/dialogs/form/dialog-form.ts

@@ -1,5 +1,5 @@
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import deepClone from "deep-clone-simple";
 import type { HASSDomEvent } from "../../common/dom/fire_event";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -12,11 +12,13 @@ import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import type { HassDialog, ShowDialogParams } from "../make-dialog-manager";
 import type { FormDialogData, FormDialogParams } from "./show-form-dialog";
+import type { HaForm } from "../../components/ha-form/ha-form";
 
 interface StackEntry {
   params: FormDialogParams;
   data: FormDialogData;
   nestedField?: string;
+  error?: Record<string, string>;
 }
 
 @customElement("dialog-form")
@@ -36,10 +38,15 @@ export class DialogForm
 
   @state() private _stack: StackEntry[] = [];
 
+  @state() private _error?: Record<string, string>;
+
+  @query("ha-form") private _form?: HaForm;
+
   public async showDialog(params: FormDialogParams): Promise<void> {
     this._params = params;
     this._data = params.data || {};
     this._open = true;
+    this._error = undefined;
     this._initDirtyTracking({ type: "deep" }, this._data);
   }
 
@@ -59,11 +66,17 @@ export class DialogForm
     const origin = ev.composedPath()[0] as HTMLElement & { name?: string };
     this._stack = [
       ...this._stack,
-      { params: this._params!, data: this._data, nestedField: origin?.name },
+      {
+        params: this._params!,
+        data: this._data,
+        nestedField: origin?.name,
+        error: this._error,
+      },
     ];
     const nested = ev.detail.dialogParams as FormDialogParams;
     this._params = nested;
     this._data = nested?.data || {};
+    this._error = undefined;
     this._initDirtyTracking({ type: "deep" }, this._data);
   };
 
@@ -75,6 +88,7 @@ export class DialogForm
     this._stack = this._stack.slice(0, -1);
     this._params = prev.params;
     this._data = prev.data;
+    this._error = prev.error;
     this._initDirtyTracking({ type: "deep" }, this._data);
     return prev.nestedField;
   }
@@ -88,10 +102,18 @@ export class DialogForm
     this._params = undefined;
     this._data = {};
     this._open = false;
+    this._error = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
   private _submit(): void {
+    if (this._form && !this._form.reportValidity()) {
+      this._error = {
+        base: this.hass!.localize("ui.components.form.validation_failed"),
+      };
+      return;
+    }
+
     this._closeState = "submitted";
     const submit = this._params?.submit;
     const data = this._data;
@@ -119,6 +141,7 @@ export class DialogForm
       : data;
 
     this._data = deepClone({ ...this._data, [nestedField]: newValue });
+    this._error = undefined;
     this._updateDirtyState(this._data);
   }
 
@@ -136,6 +159,7 @@ export class DialogForm
 
   private _valueChanged(ev: CustomEvent): void {
     this._data = ev.detail.value;
+    this._error = undefined;
     this._updateDirtyState(this._data);
   }
 
@@ -158,6 +182,7 @@ export class DialogForm
           .computeHelper=${this._params.computeHelper}
           .data=${this._data}
           .schema=${this._params.schema}
+          .error=${this._error}
           @value-changed=${this._valueChanged}
           @show-dialog=${this._handleNestedShowDialog}
         >

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/entrypoints/core.ts

@@ -37,15 +37,26 @@ declare global {
 }
 
 const clearUrlParams = () => {
+  const searchParams = new URLSearchParams(location.search);
+  let changed = false;
   // Clear auth data from url if we have been able to establish a connection
   if (location.search.includes("auth_callback=1")) {
-    const searchParams = new URLSearchParams(location.search);
     // https://github.com/home-assistant/home-assistant-js-websocket/blob/master/lib/auth.ts
     // Remove all data from QueryCallbackData type
     searchParams.delete("auth_callback");
     searchParams.delete("code");
     searchParams.delete("state");
     searchParams.delete("storeToken");
+    changed = true;
+  }
+  // Remove the cache-busting param added by the stale-index recovery guard in
+  // index.html once we have booted successfully, so it doesn't linger in the
+  // URL (and stops acting as the guard's one-shot loop marker).
+  if (searchParams.has("ha_cache_bust")) {
+    searchParams.delete("ha_cache_bust");
+    changed = true;
+  }
+  if (changed) {
     const search = searchParams.toString();
     history.replaceState(
       null,

src/html/_bootstrap_recovery.html.template

@@ -0,0 +1,130 @@
+<script>
+  /*
+   * Boot-time recovery from a stale index.html.
+   *
+   * index.html pins the content-hashed entry bundles (core.<hash>.js /
+   * app.<hash>.js). After a frontend release those files are deleted from
+   * disk, so a cached (stale) index.html imports URLs that now 404 and the
+   * app never boots - the launch screen stays up forever. No bundled JS can
+   * recover this, because the bundle itself failed to load, so this guard has
+   * to live inline in the HTML document.
+   *
+   * On a failed entry load we navigate once to the same URL with a
+   * cache-busting query param (and, on https, after dropping the service
+   * worker + its caches) so the browser fetches a fresh index.html that points
+   * at the current hashes. The param doubles as a one-shot loop guard: if the
+   * freshly fetched index still fails we stop and show a message instead of
+   * reloading forever. core.ts strips the param again after a successful boot.
+   */
+  (function () {
+    var BUST_PARAM = "ha_cache_bust";
+    // Only production entry bundles carry a content hash. Requiring the hash
+    // keeps the guard inert in development (unhashed core.js / app.js) and
+    // scoped to the entry chunks whose 404 is fatal to boot - not translations
+    // or lazily loaded panels, which fail non-fatally and are handled elsewhere.
+    // Injected from stale-build-patterns.json (the single source shared with
+    // the bundled util/recover-stale-build.ts) so the two never drift.
+    var HASHED_ENTRY = new RegExp(<%= JSON.stringify(staleBuildPatterns.hashedEntry) %>, "i");
+    var MODULE_ERROR = new RegExp(<%= JSON.stringify(staleBuildPatterns.moduleError) %>, "i");
+
+    function booted() {
+      // The launch screen is only removed once the app has taken over the
+      // page. If it is gone, any later chunk failure is post-boot (a lazy
+      // panel/dialog) and is not the stale-index boot failure this guard
+      // targets, so we leave it alone.
+      return !document.getElementById("ha-launch-screen");
+    }
+
+    function showFatal() {
+      var box = document.getElementById("ha-launch-screen-info-box");
+      if (box) {
+        box.textContent =
+          "Could not load Home Assistant. Please refresh the page, and clear your browser cache if the problem persists.";
+      }
+    }
+
+    function recover() {
+      if (location.search.indexOf(BUST_PARAM + "=") !== -1) {
+        // We already reloaded once with a fresh index and it still failed;
+        // stop to avoid a reload loop.
+        showFatal();
+        return;
+      }
+      var target =
+        location.pathname +
+        location.search +
+        (location.search ? "&" : "?") +
+        BUST_PARAM +
+        "=" +
+        Date.now() +
+        location.hash;
+      // On https the service worker "/" route ignores the query string
+      // (ignoreSearch), so a bust param alone would still be answered with the
+      // stale cached index. Drop the worker and its caches first so the reload
+      // is served fresh from the network.
+      if ("serviceWorker" in navigator && navigator.serviceWorker.controller) {
+        var go = function () {
+          location.replace(target);
+        };
+        Promise.all([
+          navigator.serviceWorker
+            .getRegistrations()
+            .then(function (regs) {
+              return Promise.all(
+                regs.map(function (r) {
+                  return r.unregister();
+                })
+              );
+            })
+            .catch(function () {}),
+          self.caches
+            ? caches
+                .keys()
+                .then(function (keys) {
+                  return Promise.all(
+                    keys.map(function (k) {
+                      return caches.delete(k);
+                    })
+                  );
+                })
+                .catch(function () {})
+            : null,
+        ]).then(go, go);
+      } else {
+        location.replace(target);
+      }
+    }
+
+    function maybeRecover(url, message) {
+      if (booted()) {
+        return;
+      }
+      if (
+        (url && HASHED_ENTRY.test(url)) ||
+        (message && (HASHED_ENTRY.test(message) || MODULE_ERROR.test(message)))
+      ) {
+        recover();
+      }
+    }
+
+    // Resource-load errors (<script>, modulepreload <link>) do not bubble, so
+    // they are only observable in the capture phase at the window.
+    window.addEventListener(
+      "error",
+      function (ev) {
+        var el = ev.target;
+        if (el && (el.tagName === "SCRIPT" || el.tagName === "LINK")) {
+          maybeRecover(el.href || el.src, null);
+        }
+      },
+      true
+    );
+
+    // A failed dynamic import() rejects; the inline entry imports do not catch
+    // it, so the rejection surfaces here.
+    window.addEventListener("unhandledrejection", function (ev) {
+      var reason = ev && ev.reason;
+      maybeRecover(null, reason && (reason.message || String(reason)));
+    });
+  })();
+</script>

src/html/index.html.template

@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Home Assistant</title>
+    <% if (useCacheRecovery) { %><%= renderTemplate("_bootstrap_recovery.html.template") %><% } %>
     <%= renderTemplate("_header.html.template") %>
     <link rel="mask-icon" href="/static/icons/mask-icon.svg" color="#18bcf2" />
     <link

src/layouts/hass-loading-screen.ts

@@ -1,6 +1,7 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
+import "../components/animation/ha-fade-in";
 import "../components/ha-top-app-bar-fixed";
 import "../components/ha-spinner";
 import type { HomeAssistant } from "../types";
@@ -36,7 +37,9 @@ class HassLoadingScreen extends LitElement {
   private _renderContent(): TemplateResult {
     return html`
       <div class="content">
-        <ha-spinner></ha-spinner>
+        <ha-fade-in .delay=${500}>
+          <ha-spinner></ha-spinner>
+        </ha-fade-in>
         ${
           this.message
             ? html`<div id="loading-text">${this.message}</div>`

src/layouts/panel-ready.ts

@@ -1,3 +1,5 @@
+import { ContextProvider, createContext } from "@lit/context";
+import type { ReactiveController, ReactiveControllerHost } from "lit";
 import { ReactiveElement } from "lit";
 import { fireEvent } from "../common/dom/fire_event";
 
@@ -15,6 +17,61 @@ export const panelIsReady = async (element: HTMLElement) => {
   fireEvent(element, "hass-panel-ready");
 };
 
+export type RegisterChildPanelReady = (ready: Promise<void>) => void;
+
+export const childPanelReadyContext =
+  createContext<RegisterChildPanelReady>("child-panel-ready");
+
+export class ChildPanelReady implements ReactiveController {
+  private _promises: Promise<void>[] = [];
+
+  private _host: ReactiveControllerHost & HTMLElement;
+
+  private _resolveReady?: () => void;
+
+  private _completing = false;
+
+  public ready = new Promise<void>((resolve) => {
+    this._resolveReady = resolve;
+  });
+
+  public constructor(host: ReactiveControllerHost & HTMLElement) {
+    this._host = host;
+    host.addController(this);
+    new ContextProvider(host, {
+      context: childPanelReadyContext,
+      initialValue: (ready) => this._promises.push(ready),
+    });
+  }
+
+  public hostUpdated() {
+    if (this._completing) {
+      return;
+    }
+    this._completing = true;
+    this._host.removeController(this);
+    void this._complete();
+  }
+
+  private async _complete() {
+    // Children created/updated during this render register after the host's
+    // update commits. Wait for that before snapshotting readiness promises.
+    await this._host.updateComplete;
+
+    await this._waitForPromises();
+
+    this._resolveReady?.();
+    await panelIsReady(this._host);
+  }
+
+  private _waitForPromises(): Promise<void> {
+    const count = this._promises.length;
+    return Promise.allSettled(this._promises).then(() =>
+      this._promises.length > count ? this._waitForPromises() : undefined
+    );
+  }
+}
+
 export class PanelReady {
   public ready?: Promise<void>;
 

src/layouts/partial-panel-resolver.ts

@@ -19,29 +19,66 @@ import { HassRouterPage } from "./hass-router-page";
 
 const CACHE_URL_PATHS = ["lovelace", "home", "config"];
 const PANEL_READY_TIMEOUT = 2000;
+const DASHBOARD_READY_TIMEOUT = 5000;
 const COMPONENTS = {
-  app: () => import("../panels/app/ha-panel-app"),
-  energy: () => import("../panels/energy/ha-panel-energy"),
-  calendar: () => import("../panels/calendar/ha-panel-calendar"),
-  config: () => import("../panels/config/ha-panel-config"),
-  custom: () => import("../panels/custom/ha-panel-custom"),
-  lovelace: () => import("../panels/lovelace/ha-panel-lovelace"),
-  history: () => import("../panels/history/ha-panel-history"),
-  iframe: () => import("../panels/iframe/ha-panel-iframe"),
-  logbook: () => import("../panels/logbook/ha-panel-logbook"),
-  map: () => import("../panels/map/ha-panel-map"),
-  my: () => import("../panels/my/ha-panel-my"),
-  profile: () => import("../panels/profile/ha-panel-profile"),
-  todo: () => import("../panels/todo/ha-panel-todo"),
-  "media-browser": () =>
-    import("../panels/media-browser/ha-panel-media-browser"),
-  light: () => import("../panels/light/ha-panel-light"),
-  security: () => import("../panels/security/ha-panel-security"),
-  climate: () => import("../panels/climate/ha-panel-climate"),
-  maintenance: () => import("../panels/maintenance/ha-panel-maintenance"),
-  home: () => import("../panels/home/ha-panel-home"),
-  notfound: () => import("../panels/notfound/ha-panel-notfound"),
-};
+  app: { load: () => import("../panels/app/ha-panel-app") },
+  energy: {
+    load: () => import("../panels/energy/ha-panel-energy"),
+    waitForReady: true,
+    readyTimeout: DASHBOARD_READY_TIMEOUT,
+  },
+  calendar: {
+    load: () => import("../panels/calendar/ha-panel-calendar"),
+    waitForReady: true,
+  },
+  config: { load: () => import("../panels/config/ha-panel-config") },
+  custom: { load: () => import("../panels/custom/ha-panel-custom") },
+  lovelace: {
+    load: () => import("../panels/lovelace/ha-panel-lovelace"),
+    waitForReady: true,
+    readyTimeout: DASHBOARD_READY_TIMEOUT,
+  },
+  history: { load: () => import("../panels/history/ha-panel-history") },
+  iframe: { load: () => import("../panels/iframe/ha-panel-iframe") },
+  logbook: { load: () => import("../panels/logbook/ha-panel-logbook") },
+  map: { load: () => import("../panels/map/ha-panel-map") },
+  my: { load: () => import("../panels/my/ha-panel-my") },
+  profile: { load: () => import("../panels/profile/ha-panel-profile") },
+  todo: { load: () => import("../panels/todo/ha-panel-todo") },
+  "media-browser": {
+    load: () => import("../panels/media-browser/ha-panel-media-browser"),
+    waitForReady: true,
+  },
+  light: {
+    load: () => import("../panels/light/ha-panel-light"),
+    waitForReady: true,
+    readyTimeout: DASHBOARD_READY_TIMEOUT,
+  },
+  security: {
+    load: () => import("../panels/security/ha-panel-security"),
+    waitForReady: true,
+    readyTimeout: DASHBOARD_READY_TIMEOUT,
+  },
+  climate: {
+    load: () => import("../panels/climate/ha-panel-climate"),
+    waitForReady: true,
+    readyTimeout: DASHBOARD_READY_TIMEOUT,
+  },
+  maintenance: {
+    load: () => import("../panels/maintenance/ha-panel-maintenance"),
+    waitForReady: true,
+    readyTimeout: DASHBOARD_READY_TIMEOUT,
+  },
+  home: {
+    load: () => import("../panels/home/ha-panel-home"),
+    waitForReady: true,
+    readyTimeout: DASHBOARD_READY_TIMEOUT,
+  },
+  notfound: { load: () => import("../panels/notfound/ha-panel-notfound") },
+} satisfies Record<
+  string,
+  Pick<RouteOptions, "load" | "waitForReady"> & { readyTimeout?: number }
+>;
 
 @customElement("partial-panel-resolver")
 class PartialPanelResolver extends HassRouterPage {
@@ -126,13 +163,12 @@ class PartialPanelResolver extends HassRouterPage {
   private _getRoutes(panels: Panels): RouterOptions {
     const routes: RouterOptions["routes"] = {};
     Object.values(panels).forEach((panel) => {
+      const component = COMPONENTS[panel.component_name];
       const data: RouteOptions = {
         tag: `ha-panel-${panel.component_name}`,
         cache: CACHE_URL_PATHS.includes(panel.url_path),
+        ...(component ?? {}),
       };
-      if (panel.component_name in COMPONENTS) {
-        data.load = COMPONENTS[panel.component_name];
-      }
       routes[panel.url_path] = data;
     });
 
@@ -221,9 +257,12 @@ class PartialPanelResolver extends HassRouterPage {
       )
     ) {
       await this.rebuild();
-      await promiseTimeout(PANEL_READY_TIMEOUT, this.pageRendered).catch(
-        () => undefined
-      );
+      const component =
+        COMPONENTS[this.hass.panels[this._currentPage].component_name];
+      await promiseTimeout(
+        component?.readyTimeout ?? PANEL_READY_TIMEOUT,
+        this.pageRendered
+      ).catch(() => undefined);
       // Only fire frontend/loaded when this call actually removed the launch
       // screen, so later panel updates do not fire it again. Native apps remove
       // it instantly because their own splash screen is still visible.

src/panels/calendar/confirm-event-dialog-box.ts

@@ -1,14 +1,23 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { fireEvent } from "../../common/dom/fire_event";
-import "../../components/ha-dialog-footer";
-import "../../components/ha-svg-icon";
-import "../../components/ha-switch";
+import {
+  fireEvent,
+  type HASSDomCurrentTargetEvent,
+} from "../../common/dom/fire_event";
+import "../../components/ha-button";
 import "../../components/ha-dialog";
+import "../../components/ha-dialog-footer";
+import "../../components/radio/ha-radio-group";
+import type { HaRadioGroup } from "../../components/radio/ha-radio-group";
+import "../../components/radio/ha-radio-option";
 import { RecurrenceRange } from "../../data/calendar";
 import type { HomeAssistant } from "../../types";
 import type { ConfirmEventDialogBoxParams } from "./show-confirm-event-dialog-box";
-import "../../components/ha-button";
+
+// `RecurrenceRange.THISEVENT` is "", which the radio group treats as unselected
+// on its value-attribute and form-reset paths, so keep the options on their own
+// literals and map them when confirming.
+type RecurrenceScope = "this" | "future";
 
 @customElement("confirm-event-dialog-box")
 class ConfirmEventDialogBox extends LitElement {
@@ -18,11 +27,14 @@ class ConfirmEventDialogBox extends LitElement {
 
   @state() private _open = false;
 
-  @state()
-  private _closeState?: "canceled" | "confirmed" | "confirmedFuture";
+  @state() private _closeState?: "canceled" | "confirmed";
+
+  @state() private _scope: RecurrenceScope = "this";
 
   public async showDialog(params: ConfirmEventDialogBoxParams): Promise<void> {
     this._params = params;
+    this._scope = "this";
+    this._closeState = undefined;
     this._open = true;
   }
 
@@ -39,20 +51,27 @@ class ConfirmEventDialogBox extends LitElement {
       return nothing;
     }
 
+    const { destructive, recurring } = this._params;
+
     return html`
       <ha-dialog
         .open=${this._open}
         header-title=${this._params.title}
         width="small"
+        type="alert"
+        aria-describedby=${recurring ? nothing : "description"}
         @closed=${this._dialogClosed}
       >
-        <div>
-          <p>${this._params.text}</p>
-        </div>
+        ${
+          recurring
+            ? this._renderRecurrenceRange()
+            : html`<p id="description">${this._params.text}</p>`
+        }
         <ha-dialog-footer slot="footer">
           <ha-button
             appearance="plain"
             @click=${this._dismiss}
+            ?autofocus=${!recurring && destructive}
             slot="secondaryAction"
           >
             ${this.hass.localize("ui.common.cancel")}
@@ -60,29 +79,41 @@ class ConfirmEventDialogBox extends LitElement {
           <ha-button
             slot="primaryAction"
             @click=${this._confirm}
-            autofocus
-            variant="danger"
+            ?autofocus=${!recurring && !destructive}
+            variant=${destructive ? "danger" : "brand"}
           >
             ${this._params.confirmText}
           </ha-button>
-          ${
-            this._params.confirmFutureText
-              ? html`
-                  <ha-button
-                    @click=${this._confirmFuture}
-                    slot="primaryAction"
-                    variant="danger"
-                  >
-                    ${this._params.confirmFutureText}
-                  </ha-button>
-                `
-              : ""
-          }
         </ha-dialog-footer>
       </ha-dialog>
     `;
   }
 
+  private _renderRecurrenceRange() {
+    const thisEvent = this.hass.localize(
+      "ui.components.calendar.event.recurrence_range.this_event"
+    );
+    const thisAndFuture = this.hass.localize(
+      "ui.components.calendar.event.recurrence_range.this_and_future"
+    );
+
+    return html`
+      <ha-radio-group
+        name="recurrence_range"
+        .label=${this._params!.text ?? this._params!.title}
+        .value=${this._scope}
+        @change=${this._scopeChanged}
+      >
+        <ha-radio-option value="this" autofocus>${thisEvent}</ha-radio-option>
+        <ha-radio-option value="future">${thisAndFuture}</ha-radio-option>
+      </ha-radio-group>
+    `;
+  }
+
+  private _scopeChanged(ev: HASSDomCurrentTargetEvent<HaRadioGroup>): void {
+    this._scope = ev.currentTarget.value as RecurrenceScope;
+  }
+
   private _dismiss(): void {
     this._closeState = "canceled";
     this.closeDialog();
@@ -90,17 +121,11 @@ class ConfirmEventDialogBox extends LitElement {
 
   private _confirm(): void {
     this._closeState = "confirmed";
-    if (this._params!.confirm) {
-      this._params!.confirm(RecurrenceRange.THISEVENT);
-    }
-    this.closeDialog();
-  }
-
-  private _confirmFuture(): void {
-    this._closeState = "confirmedFuture";
-    if (this._params!.confirm) {
-      this._params!.confirm(RecurrenceRange.THISANDFUTURE);
-    }
+    this._params!.confirm?.(
+      this._scope === "future"
+        ? RecurrenceRange.THISANDFUTURE
+        : RecurrenceRange.THISEVENT
+    );
     this.closeDialog();
   }
 
@@ -108,10 +133,7 @@ class ConfirmEventDialogBox extends LitElement {
     if (!this._params) {
       return;
     }
-    if (
-      this._closeState !== "confirmed" &&
-      this._closeState !== "confirmedFuture"
-    ) {
+    if (this._closeState !== "confirmed") {
       this._params.cancel?.();
     }
     this._params = undefined;
@@ -125,18 +147,12 @@ class ConfirmEventDialogBox extends LitElement {
       pointer-events: initial !important;
       cursor: initial !important;
     }
-    a {
-      color: var(--primary-color);
-    }
     p {
       margin: 0;
       color: var(--primary-text-color);
     }
-    .no-bottom-padding {
-      padding-bottom: 0;
-    }
-    .secondary {
-      color: var(--secondary-text-color);
+    ha-radio-group::part(form-control-label) {
+      font-weight: var(--ha-font-weight-medium);
     }
     ha-dialog {
       /* Place above other dialogs */

src/panels/calendar/dialog-calendar-event-detail.ts

@@ -224,18 +224,9 @@ class DialogCalendarEventDetail extends LitElement {
         : this.hass.localize(
             "ui.components.calendar.event.confirm_delete.prompt"
           ),
-      confirmText: entry.recurrence_id
-        ? this.hass.localize(
-            "ui.components.calendar.event.confirm_delete.delete_this"
-          )
-        : this.hass.localize(
-            "ui.components.calendar.event.confirm_delete.delete"
-          ),
-      confirmFutureText: entry.recurrence_id
-        ? this.hass.localize(
-            "ui.components.calendar.event.confirm_delete.delete_future"
-          )
-        : undefined,
+      confirmText: this.hass.localize("ui.common.delete"),
+      recurring: !!entry.recurrence_id,
+      destructive: true,
     });
     if (range === undefined) {
       // Cancel

src/panels/calendar/dialog-calendar-event-editor.ts

@@ -569,12 +569,8 @@ class DialogCalendarEventEditor extends DirtyStateProviderMixin<CalendarEventFor
         text: this.hass.localize(
           "ui.components.calendar.event.confirm_update.recurring_prompt"
         ),
-        confirmText: this.hass.localize(
-          "ui.components.calendar.event.confirm_update.update_this"
-        ),
-        confirmFutureText: this.hass.localize(
-          "ui.components.calendar.event.confirm_update.update_future"
-        ),
+        confirmText: this.hass.localize("ui.common.update"),
+        recurring: true,
       });
     }
     if (range === undefined) {
@@ -625,18 +621,9 @@ class DialogCalendarEventEditor extends DirtyStateProviderMixin<CalendarEventFor
         : this.hass.localize(
             "ui.components.calendar.event.confirm_delete.prompt"
           ),
-      confirmText: entry.recurrence_id
-        ? this.hass.localize(
-            "ui.components.calendar.event.confirm_delete.delete_this"
-          )
-        : this.hass.localize(
-            "ui.components.calendar.event.confirm_delete.delete"
-          ),
-      confirmFutureText: entry.recurrence_id
-        ? this.hass.localize(
-            "ui.components.calendar.event.confirm_delete.delete_future"
-          )
-        : undefined,
+      confirmText: this.hass.localize("ui.common.delete"),
+      recurring: !!entry.recurrence_id,
+      destructive: true,
     });
     if (range === undefined) {
       // Cancel

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

@@ -35,6 +35,7 @@ import type { EntityRegistryEntry } from "../../data/entity/entity_registry";
 import { subscribeEntityRegistry } from "../../data/entity/entity_registry";
 import { fetchIntegrationManifest } from "../../data/integration";
 import { showConfigFlowDialog } from "../../dialogs/config-flow/show-dialog-config-flow";
+import { panelIsReady } from "../../layouts/panel-ready";
 import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import { haStyle } from "../../resources/styles";
 import type { CalendarViewChanged, HomeAssistant } from "../../types";
@@ -77,6 +78,8 @@ class PanelCalendar extends SubscribeMixin(LitElement) {
 
   private _mql?: MediaQueryList;
 
+  private _initialReady = false;
+
   public connectedCallback() {
     super.connectedCallback();
     this._mql = window.matchMedia(
@@ -103,6 +106,10 @@ class PanelCalendar extends SubscribeMixin(LitElement) {
         this._entityRegistry = entities;
         // Refresh calendars when entity registry updates (includes color changes)
         this._calendars = getCalendars(this.hass, this, this._entityRegistry);
+        if (!this._initialReady) {
+          this._initialReady = true;
+          panelIsReady(this);
+        }
         // Resubscribe events if view dates are available (handles both initial load and color updates)
         if (this._start && this._end) {
           this._unsubscribeAll().then(() => {

src/panels/calendar/show-confirm-event-dialog-box.ts

@@ -1,14 +1,16 @@
-import type { TemplateResult } from "lit";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { RecurrenceRange } from "../../data/calendar";
 
 export interface ConfirmEventDialogBoxParams {
+  title: string;
+  // Labels the recurrence range options when `recurring` is set
+  text?: string;
   confirmText?: string;
-  confirmFutureText?: string; // Prompt for future recurring events
+  // Let the user pick which occurrences of a recurring event are affected
+  recurring?: boolean;
+  destructive?: boolean;
   confirm?: (recurrenceRange: RecurrenceRange) => void;
   cancel?: () => void;
-  text?: string | TemplateResult;
-  title: string;
 }
 
 export const loadGenericDialog = () => import("./confirm-event-dialog-box");

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

@@ -4,6 +4,7 @@ import { customElement, property, state } from "lit/decorators";
 import { debounce } from "../../common/util/debounce";
 import { deepEqual } from "../../common/util/deep-equal";
 import type { LovelaceStrategyViewConfig } from "../../data/lovelace/config/view";
+import { ChildPanelReady } from "../../layouts/panel-ready";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { generateLovelaceViewStrategy } from "../lovelace/strategies/get-strategy";
@@ -31,6 +32,8 @@ class PanelClimate extends LitElement {
 
   @state() private _searchParams = new URLSearchParams(window.location.search);
 
+  private _childPanelReady?: ChildPanelReady;
+
   public willUpdate(changedProps: PropertyValues<this>) {
     super.willUpdate(changedProps);
     // Initial setup
@@ -127,6 +130,7 @@ class PanelClimate extends LitElement {
       return;
     }
 
+    this._childPanelReady ??= new ChildPanelReady(this);
     this._lovelace = {
       config: config,
       rawConfig: rawConfig,

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

@@ -3,6 +3,7 @@ import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
+import type { HASSDomTargetEvent } from "../../../common/dom/fire_event";
 import { DirtyStateProviderMixin } from "../../../mixins/dirty-state-provider-mixin";
 import "../../../components/entity/ha-entity-picker";
 import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker";
@@ -455,7 +456,7 @@ class DialogAreaDetail
     return deviceReg && deviceReg.area_id === areaId;
   };
 
-  private _nameChanged(ev: InputEvent) {
+  private _nameChanged(ev: InputEvent & HASSDomTargetEvent<HaInput>) {
     this._error = undefined;
     this._name = (ev.target as HaInput).value ?? "";
     this._updateDirtyState(this._currentState());
@@ -479,7 +480,9 @@ class DialogAreaDetail
     this._updateDirtyState(this._currentState());
   }
 
-  private _pictureChanged(ev: ValueChangedEvent<string | null>) {
+  private _pictureChanged(
+    ev: ValueChangedEvent<string | null> & HASSDomTargetEvent<HaPictureUpload>
+  ) {
     this._error = undefined;
     this._picture = (ev.target as HaPictureUpload).value;
     this._updateDirtyState(this._currentState());
@@ -490,7 +493,9 @@ class DialogAreaDetail
     this._updateDirtyState(this._currentState());
   }
 
-  private _sensorChanged(ev: CustomEvent): void {
+  private _sensorChanged(
+    ev: ValueChangedEvent<string> & HASSDomTargetEvent<HaEntityPicker>
+  ): void {
     const deviceClass = (ev.target as HaEntityPicker).includeDeviceClasses![0];
     const key = `_${deviceClass}Entity`;
     this[key] = ev.detail.value || null;

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

@@ -5,6 +5,7 @@ import { customElement, property, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
+import type { HASSDomTargetEvent } from "../../../common/dom/fire_event";
 import "../../../components/chips/ha-chip-set";
 import "../../../components/chips/ha-input-chip";
 import "../../../components/ha-alert";
@@ -336,13 +337,13 @@ class DialogFloorDetail extends DirtyStateProviderMixin<FloorFormState>()(
     this._updateDirtyState(this._currentState());
   }
 
-  private _nameChanged(ev: InputEvent) {
+  private _nameChanged(ev: InputEvent & HASSDomTargetEvent<HaInput>) {
     this._error = undefined;
     this._name = (ev.target as HaInput).value ?? "";
     this._updateDirtyState(this._currentState());
   }
 
-  private _levelChanged(ev: InputEvent) {
+  private _levelChanged(ev: InputEvent & HASSDomTargetEvent<HaInput>) {
     this._error = undefined;
     this._level =
       (ev.target as HaInput).value === ""

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

@@ -346,17 +346,19 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           maxWidth: "82px",
           sortable: true,
           groupable: true,
-          hidden: narrow,
           type: "overflow",
           title: this.hass.localize("ui.panel.config.automation.picker.state"),
-          template: (automation) => html`
-            <ha-switch
-              @click=${stopPropagation}
-              @change=${this._handleSwitchToggle}
-              .automation=${automation}
-              .checked=${automation.state === "on"}
-            ></ha-switch>
-          `,
+          template: (automation) =>
+            narrow
+              ? automation.formatted_state
+              : html`
+                  <ha-switch
+                    @click=${stopPropagation}
+                    @change=${this._handleSwitchToggle}
+                    .automation=${automation}
+                    .checked=${automation.state === "on"}
+                  ></ha-switch>
+                `,
         },
         actions: {
           lastFixed: true,

src/panels/config/blueprint/dialog-import-blueprint.ts

@@ -2,6 +2,7 @@ import { mdiClose, mdiOpenInNew } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
+import type { HASSDomTargetEvent } from "../../../common/dom/fire_event";
 import { withViewTransition } from "../../../common/util/view-transition";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
@@ -279,7 +280,7 @@ class DialogImportBlueprint extends DirtyStateProviderMixin<BlueprintImportState
     });
   }
 
-  private _inputChanged(ev: Event) {
+  private _inputChanged(ev: HASSDomTargetEvent<HaInput>) {
     this._updateDirtyState({
       value: (ev.target as HaInput).value ?? "",
       hasResult: !!this._result,

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

@@ -13,7 +13,10 @@ import { LitElement, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { storage } from "../../../common/decorators/storage";
-import type { HASSDomEvent } from "../../../common/dom/fire_event";
+import type {
+  HASSDomCurrentTargetEvent,
+  HASSDomEvent,
+} from "../../../common/dom/fire_event";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { navigate } from "../../../common/navigate";
@@ -483,7 +486,7 @@ class HaBlueprintOverview extends LitElement {
     this._createNew(blueprint);
   }
 
-  private _handleUsageClick = (ev: Event) => {
+  private _handleUsageClick = (ev: HASSDomCurrentTargetEvent<HTMLElement>) => {
     ev.stopPropagation();
     ev.preventDefault();
     const target = ev.currentTarget as HTMLElement | null;

src/panels/config/common/data-table-columns.ts

@@ -203,12 +203,10 @@ export function getModifiedAtTableColumn<T>(
 }
 
 const renderDateTimeColumn = (valueDateTime: number, hass: HomeAssistant) =>
-  html`${
-    valueDateTime
-      ? formatShortDateTimeWithConditionalYear(
-          new Date(valueDateTime * 1000),
-          hass.locale,
-          hass.config
-        )
-      : nothing
-  }`;
+  valueDateTime
+    ? formatShortDateTimeWithConditionalYear(
+        new Date(valueDateTime * 1000),
+        hass.locale,
+        hass.config
+      )
+    : nothing;

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/dashboard/ha-config-dashboard.ts

@@ -36,6 +36,7 @@ import { showQuickBar } from "../../../dialogs/quick-bar/show-dialog-quick-bar";
 import { showRestartDialog } from "../../../dialogs/restart/show-dialog-restart";
 import { showShortcutsDialog } from "../../../dialogs/shortcuts/show-shortcuts-dialog";
 import type { PageNavigation } from "../../../layouts/hass-tabs-subpage";
+import { ChildPanelReady } from "../../../layouts/panel-ready";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
@@ -157,6 +158,11 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
     total: 0,
   };
 
+  public constructor() {
+    super();
+    new ChildPanelReady(this);
+  }
+
   private _pages = memoizeOne(
     (
       cloudStatus,

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

@@ -1,12 +1,18 @@
-import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
+import { consume } from "@lit/context";
+import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { filterNavigationPages } from "../../../common/config/filter_navigation_pages";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-next";
 import type { CloudStatus } from "../../../data/cloud";
 import { getConfigEntries } from "../../../data/config_entries";
 import type { PageNavigation } from "../../../layouts/hass-tabs-subpage";
+import {
+  childPanelReadyContext,
+  type RegisterChildPanelReady,
+} from "../../../layouts/panel-ready";
 import type { HomeAssistant } from "../../../types";
 import "../components/ha-config-navigation-list";
 
@@ -18,21 +24,53 @@ class HaConfigNavigation extends LitElement {
 
   @property({ attribute: false }) public pages!: PageNavigation[];
 
-  @state() private _hasBluetoothConfigEntries = false;
+  @state() private _visiblePages?: PageNavigation[];
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
-    super.firstUpdated(changedProps);
-    getConfigEntries(this.hass, {
-      domain: "bluetooth",
-    }).then((bluetoothEntries) => {
-      this._hasBluetoothConfigEntries = bluetoothEntries.length > 0;
-    });
+  private _hasBluetoothConfigEntries = false;
+
+  private _bluetoothEntriesLoaded?: Promise<void>;
+
+  private _childReadyRegistered = false;
+
+  private _filterNavigationPages = memoizeOne(
+    (
+      hass: HomeAssistant,
+      pages: PageNavigation[],
+      hasBluetoothConfigEntries: boolean
+    ) => filterNavigationPages(hass, pages, { hasBluetoothConfigEntries })
+  );
+
+  @consume({ context: childPanelReadyContext, subscribe: true })
+  private _registerChildPanelReady?: RegisterChildPanelReady;
+
+  protected override updated(changedProps: Map<PropertyKey, unknown>) {
+    super.updated(changedProps);
+
+    const pagesOrHassChanged =
+      changedProps.has("pages") || changedProps.has("hass");
+
+    if (pagesOrHassChanged) {
+      const ready = this._resolveVisiblePages();
+      if (!this._childReadyRegistered && this._registerChildPanelReady) {
+        this._registerChildPanelReady(ready);
+        this._childReadyRegistered = true;
+      }
+      return;
+    }
+
+    if (
+      !this._childReadyRegistered &&
+      this._registerChildPanelReady &&
+      this.pages &&
+      this.hass
+    ) {
+      this._registerChildPanelReady(this._resolveVisiblePages());
+      this._childReadyRegistered = true;
+    }
   }
 
   protected render(): TemplateResult {
-    const pages = filterNavigationPages(this.hass, this.pages, {
-      hasBluetoothConfigEntries: this._hasBluetoothConfigEntries,
-    }).map((page) => ({
+    const pages = (this._visiblePages ?? []).map((page) => ({
       ...page,
       name:
         page.name ||
@@ -75,6 +113,42 @@ class HaConfigNavigation extends LitElement {
     `;
   }
 
+  private _loadBluetoothEntries(): Promise<void> {
+    if (!this._bluetoothEntriesLoaded) {
+      this._bluetoothEntriesLoaded = getConfigEntries(this.hass, {
+        domain: "bluetooth",
+      })
+        .then((entries) => {
+          this._hasBluetoothConfigEntries = entries.length > 0;
+        })
+        .catch(() => {
+          this._hasBluetoothConfigEntries = false;
+        });
+    }
+    return this._bluetoothEntriesLoaded;
+  }
+
+  private async _resolveVisiblePages(): Promise<void> {
+    if (this.pages.some((page) => page.component === "bluetooth")) {
+      await this._loadBluetoothEntries();
+    }
+
+    const visiblePages = this._filterNavigationPages(
+      this.hass,
+      this.pages,
+      this._hasBluetoothConfigEntries
+    );
+    const currentVisiblePages = this._visiblePages;
+    if (
+      !currentVisiblePages ||
+      visiblePages.length !== currentVisiblePages.length ||
+      visiblePages.some((page, index) => page !== currentVisiblePages[index])
+    ) {
+      this._visiblePages = visiblePages;
+    }
+    await this.updateComplete;
+  }
+
   static styles: CSSResultGroup = css`
     /* Accessibility */
     .visually-hidden {

src/panels/config/energy/dialogs/dialog-energy-battery-settings.ts

@@ -2,6 +2,7 @@ import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import type { HASSDomEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-statistic-picker";
 import "../../../../components/ha-button";
 import "../../../../components/ha-dialog";
@@ -340,7 +341,7 @@ export class DialogEnergyBatterySettings
   }
 
   private _handlePowerConfigChanged(
-    ev: CustomEvent<{ powerType: PowerType; powerConfig: PowerConfig }>
+    ev: HASSDomEvent<HASSDomEvents["power-config-changed"]>
   ) {
     this._powerType = ev.detail.powerType;
     this._powerConfig = ev.detail.powerConfig;

src/panels/config/energy/dialogs/dialog-energy-customise.ts

@@ -3,6 +3,7 @@ import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import type { HASSDomCurrentTargetEvent } from "../../../../common/dom/fire_event";
 import type { LocalizeKeys } from "../../../../common/translations/localize";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-button";
@@ -214,7 +215,7 @@ export class DialogEnergyCustomise
     `;
   }
 
-  private _toggleCard = (ev: Event): void => {
+  private _toggleCard = (ev: HASSDomCurrentTargetEvent<HaSwitch>): void => {
     const target = ev.currentTarget as HaSwitch;
     const cardKey = target.dataset.cardKey;
     if (!cardKey) {

src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts

@@ -2,6 +2,7 @@ import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import type { HASSDomCurrentTargetEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/entity/ha-statistic-picker";
 import "../../../../components/ha-button";
@@ -353,7 +354,7 @@ export class DialogEnergyGasSettings
     `;
   }
 
-  private _handleCostChanged(ev: Event) {
+  private _handleCostChanged(ev: HASSDomCurrentTargetEvent<HaRadioGroup>) {
     this._costs = (ev.currentTarget as HaRadioGroup).value as CostType;
     this._updateFormDirtyState();
   }

src/panels/config/energy/dialogs/dialog-energy-grid-settings.ts

@@ -2,6 +2,10 @@ import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import type {
+  HASSDomCurrentTargetEvent,
+  HASSDomEvent,
+} from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/entity/ha-statistic-picker";
 import "../../../../components/ha-button";
@@ -593,7 +597,9 @@ export class DialogEnergyGridSettings
     this._updateFormDirtyState();
   }
 
-  private _handleImportCostTypeChanged(ev: Event) {
+  private _handleImportCostTypeChanged(
+    ev: HASSDomCurrentTargetEvent<HaRadioGroup>
+  ) {
     this._importCostType = (ev.currentTarget as HaRadioGroup).value as CostType;
     // Clear other cost fields when switching types
     this._source = {
@@ -605,7 +611,9 @@ export class DialogEnergyGridSettings
     this._updateFormDirtyState();
   }
 
-  private _handleExportCostTypeChanged(ev: Event) {
+  private _handleExportCostTypeChanged(
+    ev: HASSDomCurrentTargetEvent<HaRadioGroup>
+  ) {
     this._exportCostType = (ev.currentTarget as HaRadioGroup).value as CostType;
     // Clear other cost fields when switching types
     this._source = {
@@ -630,9 +638,10 @@ export class DialogEnergyGridSettings
     this._updateFormDirtyState();
   }
 
-  private _numberCostChanged(ev: Event) {
-    const input = ev.currentTarget as HTMLInputElement;
-    const value = input.value ? parseFloat(input.value) : null;
+  private _numberCostChanged(ev: HASSDomCurrentTargetEvent<HaInput>) {
+    const value = ev.currentTarget.value
+      ? parseFloat(ev.currentTarget.value)
+      : null;
     this._source = { ...this._source!, number_energy_price: value };
     this._updateFormDirtyState();
   }
@@ -653,15 +662,16 @@ export class DialogEnergyGridSettings
     this._updateFormDirtyState();
   }
 
-  private _numberCompensationChanged(ev: Event) {
-    const input = ev.currentTarget as HTMLInputElement;
-    const value = input.value ? parseFloat(input.value) : null;
+  private _numberCompensationChanged(ev: HASSDomCurrentTargetEvent<HaInput>) {
+    const value = ev.currentTarget.value
+      ? parseFloat(ev.currentTarget.value)
+      : null;
     this._source = { ...this._source!, number_energy_price_export: value };
     this._updateFormDirtyState();
   }
 
   private _handlePowerConfigChanged(
-    ev: CustomEvent<{ powerType: PowerType; powerConfig: PowerConfig }>
+    ev: HASSDomEvent<HASSDomEvents["power-config-changed"]>
   ) {
     this._powerType = ev.detail.powerType;
     this._powerConfig = ev.detail.powerConfig;

src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts

@@ -3,6 +3,7 @@ import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import type { HASSDomCurrentTargetEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-statistic-picker";
 import "../../../../components/ha-button";
 import "../../../../components/ha-checkbox";
@@ -290,7 +291,7 @@ export class DialogEnergySolarSettings
             );
   }
 
-  private _handleForecastChanged(ev: Event) {
+  private _handleForecastChanged(ev: HASSDomCurrentTargetEvent<HaRadioGroup>) {
     this._forecast = (ev.currentTarget as HaRadioGroup).value === "true";
     this._updateFormDirtyState();
   }

src/panels/config/energy/dialogs/dialog-energy-water-settings.ts

@@ -2,6 +2,7 @@ import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import type { HASSDomCurrentTargetEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/entity/ha-statistic-picker";
 import "../../../../components/ha-button";
@@ -289,7 +290,7 @@ export class DialogEnergyWaterSettings
     `;
   }
 
-  private _handleCostChanged(ev: Event) {
+  private _handleCostChanged(ev: HASSDomCurrentTargetEvent<HaRadioGroup>) {
     this._costs = (ev.currentTarget as HaRadioGroup).value as CostType;
     this._updateFormDirtyState();
   }

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

@@ -3,6 +3,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import type { HASSDomCurrentTargetEvent } from "../../../../common/dom/fire_event";
 import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import type { LocalizeKeys } from "../../../../common/translations/localize";
 import "../../../../components/entity/ha-statistic-picker";
@@ -234,7 +235,7 @@ export class HaEnergyPowerConfig extends LitElement {
     fireEvent(this, "hass-more-info", { entityId: this.helperEntityId! });
   }
 
-  private _handlePowerTypeChanged(ev: Event) {
+  private _handlePowerTypeChanged(ev: HASSDomCurrentTargetEvent<HaRadioGroup>) {
     const newPowerType = (ev.currentTarget as HaRadioGroup).value as PowerType;
     // Clear power config when switching types
     fireEvent(this, "power-config-changed", {

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

@@ -89,6 +89,7 @@ class HaPanelConfig extends HassRouterPage {
       dashboard: {
         tag: "ha-config-dashboard",
         load: () => import("./dashboard/ha-config-dashboard"),
+        waitForReady: true,
       },
       entities: {
         tag: "ha-config-entities",

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

@@ -1395,7 +1395,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
           font-size: 32px;
           font-weight: 700;
           line-height: 40px;
-          text-align: left;
+          text-align: start;
           text-underline-position: from-font;
           text-decoration-skip-ink: none;
           margin: 0;

src/panels/config/integrations/integration-panels/bluetooth/bluetooth-adapter-info-page.ts

@@ -3,6 +3,7 @@ import type { CSSResultGroup, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import type { HASSDomCurrentTargetEvent } from "../../../../../common/dom/fire_event";
 import { computeDeviceName } from "../../../../../common/entity/compute_device_name";
 import "../../../../../components/ha-alert";
 import "../../../../../components/ha-button";
@@ -451,7 +452,9 @@ export class BluetoothAdapterInfoPage extends LitElement {
     return this._formatModeLabel(scannerState.current_mode);
   }
 
-  private async _handleEnable(ev: Event) {
+  private async _handleEnable(
+    ev: HASSDomCurrentTargetEvent<HTMLElement & { entry: ConfigEntry }>
+  ) {
     const button = ev.currentTarget as HTMLElement & { entry: ConfigEntry };
     const entryId = button.entry.entry_id;
     try {
@@ -474,7 +477,9 @@ export class BluetoothAdapterInfoPage extends LitElement {
     }
   }
 
-  private _openOptionFlow(ev: Event) {
+  private _openOptionFlow(
+    ev: HASSDomCurrentTargetEvent<HTMLElement & { entry: ConfigEntry }>
+  ) {
     ev.preventDefault();
     ev.stopPropagation();
     const button = ev.currentTarget as HTMLElement & { entry: ConfigEntry };

src/panels/config/integrations/integration-panels/matter/dialog-matter-lock-manage.ts

@@ -3,6 +3,7 @@ import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
+import type { HASSDomCurrentTargetEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-alert";
 import "../../../../../components/ha-button";
 import "../../../../../components/ha-dialog-footer";
@@ -211,7 +212,9 @@ class DialogMatterLockManage extends LitElement {
     `;
   }
 
-  private _handleUserClick(ev: Event): void {
+  private _handleUserClick(
+    ev: HASSDomCurrentTargetEvent<HTMLElement & { user: MatterLockUser }>
+  ): void {
     // Ignore clicks that originated from the delete button
     const path = ev.composedPath();
     if (path.some((el) => (el as HTMLElement).tagName === "HA-ICON-BUTTON")) {
@@ -221,7 +224,9 @@ class DialogMatterLockManage extends LitElement {
     this._editUser(user);
   }
 
-  private _handleDeleteUserClick(ev: Event): void {
+  private _handleDeleteUserClick(
+    ev: HASSDomCurrentTargetEvent<HTMLElement & { user: MatterLockUser }>
+  ): void {
     ev.preventDefault();
     ev.stopPropagation();
     const user = (ev.currentTarget as any).user as MatterLockUser;

src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts

@@ -11,10 +11,7 @@ import { addGroup, fetchGroupableDevices } from "../../../../../data/zha";
 import "../../../../../layouts/hass-subpage";
 import type { HomeAssistant } from "../../../../../types";
 import "./zha-device-endpoint-list";
-import type {
-  DeviceEndpointSelectionChangedEvent,
-  ZHADeviceEndpointList,
-} from "./zha-device-endpoint-list";
+import type { ZHADeviceEndpointList } from "./zha-device-endpoint-list";
 
 @customElement("zha-add-group-page")
 export class ZHAAddGroupPage extends LitElement {
@@ -131,7 +128,7 @@ export class ZHAAddGroupPage extends LitElement {
   }
 
   private _handleAddSelectionChanged(
-    ev: HASSDomEvent<DeviceEndpointSelectionChangedEvent>
+    ev: HASSDomEvent<HASSDomEvents["selection-changed"]>
   ): void {
     this._selectedDevicesToAdd = ev.detail.value;
   }

src/panels/config/integrations/integration-panels/zha/zha-device-endpoint-list.ts

@@ -4,10 +4,15 @@ import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
+import type {
+  HASSDomCurrentTargetEvent,
+  HASSDomEvent,
+} from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-icon-button";
 import "../../../../../components/ha-list";
 import "../../../../../components/input/ha-input-search";
+import type { HaInputSearch } from "../../../../../components/input/ha-input-search";
 import "../../../../../components/item/ha-list-item-base";
 import "../../../../../components/item/ha-list-item-option";
 import type { HaListItemOption } from "../../../../../components/item/ha-list-item-option";
@@ -269,11 +274,16 @@ export class ZHADeviceEndpointList extends LitElement {
       .join(" · ");
   }
 
-  private _handleFilterChanged(ev: Event): void {
-    this._filter = (ev.currentTarget as HTMLInputElement).value;
+  private _handleFilterChanged(
+    ev: HASSDomCurrentTargetEvent<HaInputSearch>
+  ): void {
+    this._filter = ev.currentTarget.value ?? "";
   }
 
-  private _handleItemSelected(ev: CustomEvent<number>): void {
+  private _handleItemSelected(
+    ev: HASSDomEvent<HASSDomEvents["ha-list-item-selected"]> &
+      HASSDomCurrentTargetEvent<HaListSelectable>
+  ): void {
     const list = ev.currentTarget as HaListSelectable;
     let selectedDeviceIds = this._selectedDeviceIds;
 
@@ -290,7 +300,10 @@ export class ZHADeviceEndpointList extends LitElement {
     }
   }
 
-  private _handleItemDeselected(ev: CustomEvent<number>): void {
+  private _handleItemDeselected(
+    ev: HASSDomEvent<HASSDomEvents["ha-list-item-deselected"]> &
+      HASSDomCurrentTargetEvent<HaListSelectable>
+  ): void {
     const list = ev.currentTarget as HaListSelectable;
     let selectedDeviceIds = this._selectedDeviceIds;
 

src/panels/config/integrations/integration-panels/zha/zha-group-page.ts

@@ -19,10 +19,7 @@ import "../../../../../layouts/hass-subpage";
 import type { HomeAssistant } from "../../../../../types";
 import { formatAsPaddedHex } from "./functions";
 import "./zha-device-endpoint-list";
-import type {
-  DeviceEndpointSelectionChangedEvent,
-  ZHADeviceEndpointList,
-} from "./zha-device-endpoint-list";
+import type { ZHADeviceEndpointList } from "./zha-device-endpoint-list";
 import { showZHAAddGroupMembersDialog } from "./show-dialog-zha-add-group-members";
 
 @customElement("zha-group-page")
@@ -202,7 +199,7 @@ export class ZHAGroupPage extends LitElement {
   }
 
   private _handleRemoveSelectionChanged(
-    ev: HASSDomEvent<DeviceEndpointSelectionChangedEvent>
+    ev: HASSDomEvent<HASSDomEvents["selection-changed"]>
   ): void {
     this._selectedDevicesToRemove = ev.detail.value;
   }

src/panels/config/integrations/integration-panels/zha/zha-options-page.ts

@@ -1,13 +1,16 @@
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import type { HASSDomCurrentTargetEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/buttons/ha-progress-button";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-md-list";
 import "../../../../../components/ha-md-list-item";
 import "../../../../../components/ha-select";
 import "../../../../../components/input/ha-input";
+import type { HaInput } from "../../../../../components/input/ha-input";
 import "../../../../../components/ha-switch";
+import type { HaSwitch } from "../../../../../components/ha-switch";
 import type { ZHAConfiguration } from "../../../../../data/zha";
 import {
   fetchZHAConfiguration,
@@ -18,6 +21,8 @@ import { haStyle } from "../../../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../../../types";
 
 const PREDEFINED_TIMEOUTS = [1800, 3600, 7200, 21600, 43200, 86400];
+type ZHASwitchChangeEvent = HASSDomCurrentTargetEvent<HaSwitch>;
+type ZHAInputChangeEvent = HASSDomCurrentTargetEvent<HaInput>;
 
 @customElement("zha-options-page")
 class ZHAOptionsPage extends LitElement {
@@ -345,53 +350,54 @@ class ZHAOptionsPage extends LitElement {
     `;
   }
 
-  private _enableIdentifyOnJoinChanged(ev: Event): void {
-    const checked = (ev.target as HTMLInputElement).checked;
-    this._configuration!.data.zha_options.enable_identify_on_join = checked;
+  private _enableIdentifyOnJoinChanged(ev: ZHASwitchChangeEvent): void {
+    this._configuration!.data.zha_options.enable_identify_on_join =
+      ev.currentTarget.checked;
     this.requestUpdate();
   }
 
-  private _enhancedLightTransitionChanged(ev: Event): void {
-    const checked = (ev.target as HTMLInputElement).checked;
-    this._configuration!.data.zha_options.enhanced_light_transition = checked;
+  private _enhancedLightTransitionChanged(ev: ZHASwitchChangeEvent): void {
+    this._configuration!.data.zha_options.enhanced_light_transition =
+      ev.currentTarget.checked;
     this.requestUpdate();
   }
 
-  private _lightTransitioningFlagChanged(ev: Event): void {
-    const checked = (ev.target as HTMLInputElement).checked;
-    this._configuration!.data.zha_options.light_transitioning_flag = checked;
+  private _lightTransitioningFlagChanged(ev: ZHASwitchChangeEvent): void {
+    this._configuration!.data.zha_options.light_transitioning_flag =
+      ev.currentTarget.checked;
     this.requestUpdate();
   }
 
-  private _groupMembersAssumeStateChanged(ev: Event): void {
-    const checked = (ev.target as HTMLInputElement).checked;
-    this._configuration!.data.zha_options.group_members_assume_state = checked;
+  private _groupMembersAssumeStateChanged(ev: ZHASwitchChangeEvent): void {
+    this._configuration!.data.zha_options.group_members_assume_state =
+      ev.currentTarget.checked;
     this.requestUpdate();
   }
 
-  private _enableMainsStartupPollingChanged(ev: Event): void {
-    const checked = (ev.target as HTMLInputElement).checked;
+  private _enableMainsStartupPollingChanged(ev: ZHASwitchChangeEvent): void {
     this._configuration!.data.zha_options.enable_mains_startup_polling =
-      checked;
+      ev.currentTarget.checked;
     this.requestUpdate();
   }
 
-  private _defaultLightTransitionChanged(ev: Event): void {
-    const value = Number((ev.target as HTMLInputElement).value);
-    this._configuration!.data.zha_options.default_light_transition = value;
+  private _defaultLightTransitionChanged(ev: ZHAInputChangeEvent): void {
+    this._configuration!.data.zha_options.default_light_transition = Number(
+      ev.currentTarget.value
+    );
     this.requestUpdate();
   }
 
-  private _customMainsSecondsChanged(ev: Event): void {
-    const seconds = Number((ev.target as HTMLInputElement).value);
-    this._configuration!.data.zha_options.consider_unavailable_mains = seconds;
+  private _customMainsSecondsChanged(ev: ZHAInputChangeEvent): void {
+    this._configuration!.data.zha_options.consider_unavailable_mains = Number(
+      ev.currentTarget.value
+    );
     this.requestUpdate();
   }
 
-  private _customBatterySecondsChanged(ev: Event): void {
-    const seconds = Number((ev.target as HTMLInputElement).value);
-    this._configuration!.data.zha_options.consider_unavailable_battery =
-      seconds;
+  private _customBatterySecondsChanged(ev: ZHAInputChangeEvent): void {
+    this._configuration!.data.zha_options.consider_unavailable_battery = Number(
+      ev.currentTarget.value
+    );
     this.requestUpdate();
   }
 
@@ -419,7 +425,15 @@ class ZHAOptionsPage extends LitElement {
     this.requestUpdate();
   }
 
-  private async _updateConfiguration(ev: Event): Promise<void> {
+  private async _updateConfiguration(
+    ev: HASSDomCurrentTargetEvent<
+      HTMLElement & {
+        progress: boolean;
+        actionSuccess: () => void;
+        actionError: () => void;
+      }
+    >
+  ): Promise<void> {
     const button = ev.currentTarget as HTMLElement & {
       progress: boolean;
       actionSuccess: () => void;

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-credential-user-edit.ts

@@ -2,6 +2,7 @@ import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
+import type { HASSDomCurrentTargetEvent } from "../../../../../common/dom/fire_event";
 import type { LocalizeKeys } from "../../../../../common/translations/localize";
 import "../../../../../components/ha-alert";
 import "../../../../../components/ha-button";
@@ -478,7 +479,9 @@ class DialogZwaveCredentialUserEdit extends DirtyStateProviderMixin<CredentialFo
     }
   }
 
-  private _handleCredentialTypeChanged(ev: Event): void {
+  private _handleCredentialTypeChanged(
+    ev: HASSDomCurrentTargetEvent<HaRadioGroup>
+  ): void {
     this._credentialType = (ev.currentTarget as HaRadioGroup)
       .value as ZwaveCredentialType;
     // Switching types invalidates any data tied to the previous type's

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-custom-param.ts

@@ -2,11 +2,13 @@ import { mdiCloseCircle } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
+import type { HASSDomCurrentTargetEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-button";
 import "../../../../../components/ha-select";
 import type { HaSelectSelectEvent } from "../../../../../components/ha-select";
 import "../../../../../components/ha-spinner";
 import "../../../../../components/input/ha-input";
+import type { HaInput } from "../../../../../components/input/ha-input";
 import {
   getZwaveNodeRawConfigParameter,
   setZwaveNodeRawConfigParameter,
@@ -129,9 +131,9 @@ class ZWaveJSCustomParam extends LitElement {
     return parsed;
   }
 
-  private _customParamNumberChanged(ev: Event) {
+  private _customParamNumberChanged(ev: HASSDomCurrentTargetEvent<HaInput>) {
     this._customParamNumber = this._tryParseNumber(
-      (ev.target as HTMLInputElement).value
+      ev.currentTarget.value ?? ""
     );
   }
 
@@ -139,8 +141,8 @@ class ZWaveJSCustomParam extends LitElement {
     this._valueSize = this._tryParseNumber(ev.detail.value) ?? 1;
   }
 
-  private _customValueChanged(ev: Event) {
-    this._value = this._tryParseNumber((ev.target as HTMLInputElement).value);
+  private _customValueChanged(ev: HASSDomCurrentTargetEvent<HaInput>) {
+    this._value = this._tryParseNumber(ev.currentTarget.value ?? "");
   }
 
   private _customValueFormatChanged(ev: HaSelectSelectEvent) {

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

@@ -4,6 +4,7 @@ import {
   mdiCloseCircle,
   mdiProgressClock,
 } from "@mdi/js";
+import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -26,10 +27,10 @@ import "../../../../../components/ha-settings-row";
 import "../../../../../components/ha-svg-icon";
 import "../../../../../components/input/ha-input";
 import type {
-  ZWaveJSNodeCapabilities,
   ZWaveJSNodeConfigParam,
   ZWaveJSNodeConfigParams,
   ZWaveJSSetConfigParamResult,
+  ZwaveJSNodeConfigParameterUpdate,
   ZwaveJSNodeMetadata,
 } from "../../../../../data/zwave_js";
 import {
@@ -38,6 +39,7 @@ import {
   fetchZwaveNodeMetadata,
   invokeZWaveCCApi,
   setZwaveNodeConfigParameter,
+  subscribeZwaveNodeConfigParameterUpdates,
 } from "../../../../../data/zwave_js";
 import { showConfirmationDialog } from "../../../../../dialogs/generic/show-dialog-box";
 import "../../../../../layouts/hass-error-screen";
@@ -60,7 +62,7 @@ const icons = {
 
 @customElement("zwave_js-node-config")
 class ZWaveJSNodeConfig extends LitElement {
-  public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public route!: Route;
 
@@ -84,13 +86,41 @@ class ZWaveJSNodeConfig extends LitElement {
 
   @state() private _resetDialogProgress = false;
 
+  private _unsubConfigParamUpdates?: Promise<UnsubscribeFunc>;
+
+  private _resultTimeouts: Record<string, number> = {};
+
   public connectedCallback(): void {
     super.connectedCallback();
-    this.deviceId = this.route.path.substr(1);
+    this._subscribeConfigParameterUpdates();
+  }
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._unsubscribeConfigParameterUpdates();
+    this._clearAllResultTimeouts();
+  }
+
+  protected willUpdate(changedProps: PropertyValues<this>): void {
+    super.willUpdate(changedProps);
+    if (!changedProps.has("route") || !this.route) {
+      return;
+    }
+    const deviceId = this.route.path.slice(1);
+    if (deviceId !== this.deviceId) {
+      this.deviceId = deviceId;
+      this._config = undefined;
+      this._clearAllResultTimeouts();
+      this._results = {};
+      this._error = undefined;
+    }
   }
 
   protected updated(changedProps: PropertyValues<this>): void {
-    if (!this._config || changedProps.has("deviceId")) {
+    if (changedProps.has("deviceId")) {
+      this._fetchData();
+      this._subscribeConfigParameterUpdates();
+    } else if (!this._config) {
       this._fetchData();
     }
   }
@@ -445,6 +475,58 @@ class ZWaveJSNodeConfig extends LitElement {
       <p>${item.value}</p>`;
   }
 
+  private _subscribeConfigParameterUpdates(): void {
+    this._unsubscribeConfigParameterUpdates();
+    if (!this.isConnected || !this.hass || !this.deviceId) {
+      return;
+    }
+    this._unsubConfigParamUpdates = subscribeZwaveNodeConfigParameterUpdates(
+      this.hass,
+      this.deviceId,
+      this._handleConfigParameterUpdate
+    );
+    this._unsubConfigParamUpdates.catch(() => {
+      // The backend doesn't support the subscription; the page still works,
+      // it just won't receive live updates
+      this._unsubConfigParamUpdates = undefined;
+    });
+  }
+
+  private _unsubscribeConfigParameterUpdates(): void {
+    if (this._unsubConfigParamUpdates) {
+      this._unsubConfigParamUpdates
+        .then((unsub) => unsub())
+        .catch(() => {
+          // The subscription never succeeded, so there is nothing to clean up
+        });
+      this._unsubConfigParamUpdates = undefined;
+    }
+  }
+
+  private _handleConfigParameterUpdate = (
+    update: ZwaveJSNodeConfigParameterUpdate
+  ): void => {
+    const param = this._config?.[update.id];
+    if (!param) {
+      return;
+    }
+    const status = this._results[update.id]?.status;
+    if (status === "queued") {
+      // The device applied the queued change; the accepted result is cleared
+      // after a short delay by _setResult so the success message shows.
+      // The value was already set optimistically when the change was queued,
+      // so this runs even if the reported value matches the stored one.
+      this._setResult(update.id, "accepted");
+    } else if (status === "error" && param.value !== update.value) {
+      // The parameter changed, so the previous error no longer applies
+      this._setResult(update.id, undefined);
+    }
+    if (param.value !== update.value) {
+      param.value = update.value;
+      this._config = { ...this._config };
+    }
+  };
+
   private _isEnumeratedBool(item: ZWaveJSNodeConfigParam): boolean {
     // Some Z-Wave config values use a states list with two options where index 0 = Disabled and 1 = Enabled
     // We want those to be considered boolean and show a toggle switch
@@ -611,16 +693,38 @@ class ZWaveJSNodeConfig extends LitElement {
     }
   }
 
+  private _clearResultTimeout(key: string): void {
+    if (key in this._resultTimeouts) {
+      clearTimeout(this._resultTimeouts[key]);
+      delete this._resultTimeouts[key];
+    }
+  }
+
+  private _clearAllResultTimeouts(): void {
+    Object.values(this._resultTimeouts).forEach((timeout) =>
+      clearTimeout(timeout)
+    );
+    this._resultTimeouts = {};
+  }
+
   private _setResult(key: string, value: string | undefined) {
+    this._clearResultTimeout(key);
     if (value === undefined) {
       delete this._results[key];
       this.requestUpdate();
     } else {
       this._results = { ...this._results, [key]: { status: value } };
+      if (value === "accepted") {
+        // Show the success message briefly, then clear it
+        this._resultTimeouts[key] = window.setTimeout(() => {
+          this._setResult(key, undefined);
+        }, 2000);
+      }
     }
   }
 
   private _setError(key: string, message: string) {
+    this._clearResultTimeout(key);
     const errorParam = { status: "error", error: message };
     this._results = { ...this._results, [key]: errorParam };
   }
@@ -636,12 +740,17 @@ class ZWaveJSNodeConfig extends LitElement {
       return;
     }
 
-    let capabilities: ZWaveJSNodeCapabilities | undefined;
-    [this._nodeMetadata, this._config, capabilities] = await Promise.all([
+    const [nodeMetadata, config, capabilities] = await Promise.all([
       fetchZwaveNodeMetadata(this.hass, device.id),
       fetchZwaveNodeConfigParameters(this.hass, device.id),
       fetchZwaveNodeCapabilities(this.hass, device.id),
     ]);
+    if (device.id !== this.deviceId) {
+      // The user navigated to another node while the data was loading
+      return;
+    }
+    this._nodeMetadata = nodeMetadata;
+    this._config = config;
     this._canResetAll =
       capabilities &&
       Object.values(capabilities).some((endpoint) =>

src/panels/config/logs/system-log-card.ts

@@ -4,6 +4,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
+import type { HASSDomCurrentTargetEvent } from "../../../common/dom/fire_event";
 import type { LocalizeFunc } from "../../../common/translations/localize";
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-alert";
@@ -283,7 +284,9 @@ export class SystemLogCard extends LitElement {
     fileDownload(signedUrl.path, logFileName);
   }
 
-  private _openLog(ev: Event): void {
+  private _openLog(
+    ev: HASSDomCurrentTargetEvent<HTMLElement & { logItem: LoggedError }>
+  ): void {
     const item = (ev.currentTarget as any).logItem;
     showSystemLogDetailDialog(this, { item });
   }

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,6 +481,9 @@ 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 = {};
@@ -413,16 +504,21 @@ class HaConfigHttpForm extends LitElement {
       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

@@ -2,6 +2,7 @@ import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
+import type { HASSDomCurrentTargetEvent } from "../../../common/dom/fire_event";
 import { isIPAddress } from "../../../common/string/is_ip_address";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
@@ -15,6 +16,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 +37,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 +106,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 +188,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 +291,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,14 +354,22 @@ 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) {
+  private _toggleCloud(ev: HASSDomCurrentTargetEvent<HaSwitch>) {
     this._cloudChecked = (ev.currentTarget as HaSwitch).checked;
     this._showCustomExternalUrl = !this._cloudChecked;
   }
 
-  private _toggleInternalAutomatic(ev: Event) {
+  private _toggleInternalAutomatic(ev: HASSDomCurrentTargetEvent<HaSwitch>) {
     this._showCustomInternalUrl = !(ev.currentTarget as HaSwitch).checked;
   }
 

src/panels/config/network/supervisor-network.ts

@@ -2,6 +2,10 @@ import { mdiDeleteOutline, mdiMenuDown, mdiPlus, mdiWifi } from "@mdi/js";
 import { css, type CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { cache } from "lit/directives/cache";
+import type {
+  HASSDomCurrentTargetEvent,
+  HASSDomTargetEvent,
+} from "../../../common/dom/fire_event";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
 import "../../../components/ha-card";
@@ -630,7 +634,9 @@ export class HassioNetwork extends LitElement {
     this._interface = { ...this._interfaces[this._curTabIndex] };
   }
 
-  private _handleRadioValueChanged(ev: Event): void {
+  private _handleRadioValueChanged(
+    ev: HASSDomCurrentTargetEvent<HaRadioGroup & { version: "ipv4" | "ipv6" }>
+  ): void {
     const source = ev.currentTarget as HaRadioGroup;
     const value = source.value as "disabled" | "auto" | "static";
     const version = (source as any).version as "ipv4" | "ipv6";
@@ -645,7 +651,9 @@ export class HassioNetwork extends LitElement {
     this.requestUpdate("_interface");
   }
 
-  private _handleRadioValueChangedAp(ev: Event): void {
+  private _handleRadioValueChangedAp(
+    ev: HASSDomCurrentTargetEvent<HaRadioGroup>
+  ): void {
     const source = ev.currentTarget as HaRadioGroup;
     const value = source.value as "open" | "wep" | "wpa-psk";
     this._wifiConfiguration!.auth = value;
@@ -653,7 +661,11 @@ export class HassioNetwork extends LitElement {
     this.requestUpdate("_wifiConfiguration");
   }
 
-  private _handleInputValueChanged(ev: Event): void {
+  private _handleInputValueChanged(
+    ev: HASSDomTargetEvent<
+      HaInput & { version: "ipv4" | "ipv6"; index: number }
+    >
+  ): void {
     const source = ev.target as HaInput;
     const value = source.value;
     const version = (ev.target as any).version as "ipv4" | "ipv6";
@@ -691,7 +703,7 @@ export class HassioNetwork extends LitElement {
     }
   }
 
-  private _handleInputValueChangedWifi(ev: Event): void {
+  private _handleInputValueChangedWifi(ev: HASSDomTargetEvent<HaInput>): void {
     const source = ev.target as HaInput;
     const value = source.value;
     const id = source.id;
@@ -708,7 +720,9 @@ export class HassioNetwork extends LitElement {
     this._wifiConfiguration![id] = value;
   }
 
-  private _addAddress(ev: Event): void {
+  private _addAddress(
+    ev: HASSDomTargetEvent<HTMLElement & { version: "ipv4" | "ipv6" }>
+  ): void {
     const version = (ev.target as any).version as "ipv4" | "ipv6";
     this._interface![version]!.address!.push(
       version === "ipv4" ? "0.0.0.0/24" : "::/64"
@@ -717,7 +731,11 @@ export class HassioNetwork extends LitElement {
     this.requestUpdate("_interface");
   }
 
-  private _removeAddress(ev: Event): void {
+  private _removeAddress(
+    ev: HASSDomTargetEvent<
+      HTMLElement & { index: number; version: "ipv4" | "ipv6" }
+    >
+  ): void {
     const source = ev.target as any;
     const index = source.index as number;
     const version = source.version as "ipv4" | "ipv6";
@@ -752,7 +770,11 @@ export class HassioNetwork extends LitElement {
     this.requestUpdate("_interface");
   }
 
-  private _removeNameserver(ev: Event): void {
+  private _removeNameserver(
+    ev: HASSDomTargetEvent<
+      HTMLElement & { index: number; version: "ipv4" | "ipv6" }
+    >
+  ): void {
     const source = ev.target as any;
     const index = source.index as number;
     const version = source.version as "ipv4" | "ipv6";

src/panels/config/tools/state/tools-state-renderer.ts

@@ -11,6 +11,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import type { HASSDomCurrentTargetEvent } from "../../../../common/dom/fire_event";
 import { computeAreaName } from "../../../../common/entity/compute_area_name";
 import { computeDeviceName } from "../../../../common/entity/compute_device_name";
 import { computeEntityEntryName } from "../../../../common/entity/compute_entity_name";
@@ -260,7 +261,9 @@ class HaPanelDevStateRenderer extends LitElement {
     return output;
   }
 
-  private _copyEntity = async (ev: Event) => {
+  private _copyEntity = async (
+    ev: HASSDomCurrentTargetEvent<HTMLElement & { entity: HassEntity }>
+  ) => {
     ev.preventDefault();
     const entity = (ev.currentTarget as HTMLElement & { entity: HassEntity })
       .entity;
@@ -270,14 +273,18 @@ class HaPanelDevStateRenderer extends LitElement {
     });
   };
 
-  private _entityMoreInfo(ev: Event) {
+  private _entityMoreInfo(
+    ev: HASSDomCurrentTargetEvent<HTMLElement & { entity: HassEntity }>
+  ) {
     ev.preventDefault();
     const entity = (ev.currentTarget as HTMLElement & { entity: HassEntity })
       .entity;
     fireEvent(this, "hass-more-info", { entityId: entity.entity_id });
   }
 
-  private _entitySelected(ev: Event) {
+  private _entitySelected(
+    ev: HASSDomCurrentTargetEvent<HTMLElement & { entity: HassEntity }>
+  ) {
     ev.preventDefault();
     const entity = (ev.currentTarget as HTMLElement & { entity: HassEntity })
       .entity;

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

@@ -16,7 +16,11 @@ import { consume, type ContextType } from "@lit/context";
 import { css, type CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import type { HASSDomEvent } from "../../../../common/dom/fire_event";
+import type {
+  HASSDomCurrentTargetEvent,
+  HASSDomEvent,
+  HASSDomTargetEvent,
+} from "../../../../common/dom/fire_event";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeAreaName } from "../../../../common/entity/compute_area_name";
 import {
@@ -596,7 +600,9 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
     `;
   }
 
-  private _handleSearchChange(ev: InputEvent) {
+  private _handleSearchChange(
+    ev: InputEvent & HASSDomTargetEvent<HaInputSearch>
+  ) {
     if (this.filter === (ev.target as HaInputSearch).value) {
       return;
     }
@@ -706,7 +712,9 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
     );
   }
 
-  private _showStatisticsAdjustSumDialog(ev: Event) {
+  private _showStatisticsAdjustSumDialog(
+    ev: HASSDomCurrentTargetEvent<HTMLElement & { statistic: StatisticData }>
+  ) {
     ev.stopPropagation();
     showStatisticsAdjustSumDialog(this, {
       statistic: (
@@ -782,7 +790,11 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
     });
   };
 
-  private _fixIssue = async (ev: Event) => {
+  private _fixIssue = async (
+    ev: HASSDomCurrentTargetEvent<
+      HTMLElement & { data: StatisticsValidationResult[] }
+    >
+  ) => {
     const issues = (
       ev.currentTarget as HTMLElement & { data: StatisticsValidationResult[] }
     ).data.sort(

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

@@ -9,6 +9,7 @@ import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import type { HASSDomTargetEvent } from "../../../../common/dom/fire_event";
 import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import type { LocalizeKeys } from "../../../../common/translations/localize";
 import { debounce } from "../../../../common/util/debounce";
@@ -419,7 +420,7 @@ ${
     `;
   }
 
-  private _splitRepositioned(ev: Event) {
+  private _splitRepositioned(ev: HASSDomTargetEvent<HaSplitPanel>) {
     this._splitPosition = (ev.target as HaSplitPanel).position;
     this._storeSplitPosition();
   }

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

@@ -130,6 +130,19 @@ class PanelHome extends LitElement {
   }
 
   private async _setup() {
+    void import("../lovelace/strategies/home/home-dashboard-strategy").catch(
+      () => undefined
+    );
+    void import("../lovelace/strategies/home/home-overview-view-strategy")
+      .then(({ preloadHomeEnergyPreferences }) => {
+        const path = this.route?.path?.split("/")[1];
+        return !path || path === "overview"
+          ? preloadHomeEnergyPreferences(this.hass)
+          : undefined;
+      })
+      .catch(() => undefined);
+    void import("../lovelace/views/hui-sections-view").catch(() => undefined);
+
     this._updateExtraActionItems();
     this._loadConfigPromise = this._loadConfig();
     await this._loadConfigPromise;

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

@@ -4,6 +4,7 @@ import { customElement, property, state } from "lit/decorators";
 import { debounce } from "../../common/util/debounce";
 import { deepEqual } from "../../common/util/deep-equal";
 import type { LovelaceStrategyViewConfig } from "../../data/lovelace/config/view";
+import { ChildPanelReady } from "../../layouts/panel-ready";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { generateLovelaceViewStrategy } from "../lovelace/strategies/get-strategy";
@@ -31,6 +32,8 @@ class PanelLight extends LitElement {
 
   @state() private _searchParms = new URLSearchParams(window.location.search);
 
+  private _childPanelReady?: ChildPanelReady;
+
   public willUpdate(changedProps: PropertyValues<this>) {
     super.willUpdate(changedProps);
     // Initial setup
@@ -127,6 +130,7 @@ class PanelLight extends LitElement {
       return;
     }
 
+    this._childPanelReady ??= new ChildPanelReady(this);
     this._lovelace = {
       config: config,
       rawConfig: rawConfig,

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

@@ -4,6 +4,7 @@ import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { formatNumber } from "../../../../common/number/format_number";
+import { round } from "../../../../common/number/round";
 import "../../../../components/ha-card";
 import "../../../../components/ha-svg-icon";
 import "../../../../components/ha-tooltip";
@@ -91,8 +92,8 @@ class HuiEnergyGridBalanceCard
 
     const { summedData } = getSummedData(this._data);
 
-    const imported = summedData.total.from_grid ?? 0;
-    const exported = summedData.total.to_grid ?? 0;
+    const imported = round(summedData.total.from_grid ?? 0, 3);
+    const exported = round(summedData.total.to_grid ?? 0, 3);
     const net = imported - exported;
 
     const fmt = (value: number) =>

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

@@ -825,9 +825,12 @@ export class HuiAreaCard extends LitElement implements LovelaceCard {
         justify-content: center;
         color: white;
       }
-      ha-tile-info.twoline {
-        --ha-tile-info-primary-line-clamp: 2;
-        --ha-tile-info-primary-line-height: var(--ha-space-4);
+      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-starting-card.ts

@@ -3,6 +3,7 @@ import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
+import "../../../components/animation/ha-fade-in";
 import "../../../components/ha-card";
 import "../../../components/ha-spinner";
 import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
@@ -38,7 +39,9 @@ export class HuiStartingCard extends LitElement implements LovelaceCard {
 
     return html`
       <div class="content">
-        <ha-spinner></ha-spinner>
+        <ha-fade-in .delay=${500}>
+          <ha-spinner></ha-spinner>
+        </ha-fade-in>
         ${this.hass.localize("ui.panel.lovelace.cards.starting.description")}
       </div>
     `;

src/panels/lovelace/cards/migrate-card-config.ts

@@ -1,5 +1,6 @@
 import { migrateStateColorConfig } from "../common/entity-color-config";
 import { migrateTimeFormatConfig } from "../common/entity-time-format-config";
+import { migrateSecondaryInfoConfig } from "../common/entity-secondary-info-config";
 import type {
   ConditionalRowConfig,
   LovelaceRowConfig,
@@ -20,11 +21,13 @@ const migrateEntitiesRowConfig = (
   let newConf: LovelaceRowConfig = rowConf;
   newConf = migrateTimeFormatConfig(newConf as EntitiesCardEntityConfig);
   newConf = migrateStateColorConfig(newConf as EntitiesCardEntityConfig);
+  newConf = migrateSecondaryInfoConfig(newConf as EntitiesCardEntityConfig);
   if (newConf.type === "conditional") {
     const row = (newConf as ConditionalRowConfig).row;
     if (row && typeof row === "object") {
       let newRow = migrateTimeFormatConfig(row as EntitiesCardEntityConfig);
       newRow = migrateStateColorConfig(newRow);
+      newRow = migrateSecondaryInfoConfig(newRow);
       if (newRow !== row) {
         newConf = { ...newConf, row: newRow } as ConditionalRowConfig;
       }

src/panels/lovelace/cards/types.ts

@@ -91,16 +91,7 @@ export interface EntityCardConfig extends LovelaceCardConfig {
 
 export interface EntitiesCardEntityConfig extends EntityConfig {
   type?: string;
-  secondary_info?:
-    | "entity-id"
-    | "last-changed"
-    | "last-triggered"
-    | "last-updated"
-    | "area"
-    | "position"
-    | "state"
-    | "tilt-position"
-    | "brightness";
+  secondary_info?: string | string[];
   action_name?: string;
   action?: string;
   /** @deprecated use "action" instead */

src/panels/lovelace/common/entity-secondary-info-config.ts

@@ -0,0 +1,40 @@
+import { isCustomType } from "../../../data/lovelace_custom_cards";
+
+interface LegacySecondaryInfoConfig {
+  type?: string;
+  secondary_info?: string | string[];
+}
+
+const SUBSTITUTIONS = {
+  "last-changed": "last_changed",
+  "last-updated": "last_updated",
+  "last-triggered": "last_triggered",
+  position: "current_position",
+  "tilt-position": "current_tilt_position",
+  area: "area_name",
+  none: undefined,
+};
+
+export const migrateSecondaryInfoConfig = <T extends LegacySecondaryInfoConfig>(
+  config: T
+): T => {
+  // Custom elements own their config schema and may use the same option with
+  // a different meaning, leave them untouched
+  if (config.type !== undefined && isCustomType(config.type)) {
+    return config;
+  }
+  if (
+    config.secondary_info === undefined ||
+    typeof config.secondary_info !== "string" ||
+    !(config.secondary_info in SUBSTITUTIONS)
+  ) {
+    return config;
+  }
+  const { secondary_info, ...rest } = config;
+  return {
+    ...rest,
+    ...(SUBSTITUTIONS[secondary_info] && {
+      secondary_info: SUBSTITUTIONS[secondary_info],
+    }),
+  } as T;
+};

src/panels/lovelace/components/hui-generic-entity-row.ts

@@ -4,13 +4,9 @@ import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
 import { DOMAINS_INPUT_ROW } from "../../../common/const";
-import { uid } from "../../../common/util/uid";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { toggleAttribute } from "../../../common/dom/toggle_attribute";
 import { computeDomain } from "../../../common/entity/compute_domain";
-import { computeAreaName } from "../../../common/entity/compute_area_name";
-import { getEntityContext } from "../../../common/entity/context/get_entity_context";
-import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time";
 import "../../../components/entity/state-badge";
 import "../../../components/ha-relative-time";
 import "../../../components/ha-tooltip";
@@ -21,6 +17,7 @@ import { actionHandler } from "../common/directives/action-handler-directive";
 import { handleAction } from "../common/handle-action";
 import { hasAction, hasAnyAction } from "../common/has-action";
 import { createEntityNotFoundWarning } from "./hui-warning";
+import "../../../state-display/state-display";
 
 @customElement("hui-generic-entity-row")
 export class HuiGenericEntityRow extends LitElement {
@@ -40,8 +37,6 @@ export class HuiGenericEntityRow extends LitElement {
   @property({ attribute: "catch-interaction", type: Boolean })
   public catchInteraction?;
 
-  private _secondaryInfoElementId = "-" + uid();
-
   protected render() {
     if (!this.hass || !this.config) {
       return nothing;
@@ -101,118 +96,15 @@ export class HuiGenericEntityRow extends LitElement {
                         <div class="secondary">
                           ${
                             this.secondaryText ||
-                            (this.config.secondary_info === "entity-id"
-                              ? stateObj.entity_id
-                              : this.config.secondary_info === "last-changed"
-                                ? html`
-                                    <ha-tooltip
-                                      for="last-changed${
-                                        this._secondaryInfoElementId
-                                      }"
-                                      placement="right"
-                                    >
-                                      ${formatDateTimeWithSeconds(
-                                        new Date(stateObj.last_changed),
-                                        this.hass.locale,
-                                        this.hass.config
-                                      )}
-                                    </ha-tooltip>
-                                    <ha-relative-time
-                                      id="last-changed${this._secondaryInfoElementId}"
-                                      .datetime=${stateObj.last_changed}
-                                      capitalize
-                                    ></ha-relative-time>
-                                  `
-                                : this.config.secondary_info === "last-updated"
-                                  ? html`
-                                      <ha-tooltip
-                                        for="last-updated${
-                                          this._secondaryInfoElementId
-                                        }"
-                                        placement="right"
-                                      >
-                                        ${formatDateTimeWithSeconds(
-                                          new Date(stateObj.last_updated),
-                                          this.hass.locale,
-                                          this.hass.config
-                                        )}
-                                      </ha-tooltip>
-                                      <ha-relative-time
-                                        id="last-updated${
-                                          this._secondaryInfoElementId
-                                        }"
-                                        .datetime=${stateObj.last_updated}
-                                        capitalize
-                                      ></ha-relative-time>
-                                    `
-                                  : this.config.secondary_info ===
-                                      "last-triggered"
-                                    ? stateObj.attributes.last_triggered
-                                      ? html`
-                                          <ha-tooltip
-                                            for="last-triggered${
-                                              this._secondaryInfoElementId
-                                            }"
-                                            placement="right"
-                                          >
-                                            ${formatDateTimeWithSeconds(
-                                              new Date(
-                                                stateObj.attributes
-                                                  .last_triggered
-                                              ),
-                                              this.hass.locale,
-                                              this.hass.config
-                                            )}
-                                          </ha-tooltip>
-                                          <ha-relative-time
-                                            id="last-triggered${
-                                              this._secondaryInfoElementId
-                                            }"
-                                            .datetime=${
-                                              stateObj.attributes.last_triggered
-                                            }
-                                            capitalize
-                                          ></ha-relative-time>
-                                        `
-                                      : this.hass.localize(
-                                          "ui.panel.lovelace.cards.entities.never_triggered"
-                                        )
-                                    : this.config.secondary_info ===
-                                          "position" &&
-                                        stateObj.attributes.current_position !==
-                                          undefined
-                                      ? `${this.hass.localize(
-                                          "ui.card.cover.position"
-                                        )}: ${stateObj.attributes.current_position}`
-                                      : this.config.secondary_info ===
-                                            "tilt-position" &&
-                                          stateObj.attributes
-                                            .current_tilt_position !== undefined
-                                        ? `${this.hass.localize(
-                                            "ui.card.cover.tilt_position"
-                                          )}: ${
-                                            stateObj.attributes
-                                              .current_tilt_position
-                                          }`
-                                        : this.config.secondary_info ===
-                                              "brightness" &&
-                                            stateObj.attributes.brightness
-                                          ? html`${Math.round(
-                                              (stateObj.attributes.brightness /
-                                                255) *
-                                                100
-                                            )}
-                                            %`
-                                          : this.config.secondary_info ===
-                                              "state"
-                                            ? html`${this.hass.formatEntityState(
-                                                stateObj
-                                              )}`
-                                            : this.config.secondary_info ===
-                                                "area"
-                                              ? (this._getArea(stateObj) ??
-                                                nothing)
-                                              : nothing)
+                            html`<state-display
+                              .stateObj=${stateObj}
+                              .hass=${this.hass}
+                              .content=${this.config.secondary_info}
+                              .timeFormat=${this.config.time_format}
+                              .name=${name}
+                              timestamp-tooltip
+                            >
+                            </state-display>`
                           }
                         </div>
                       `
@@ -253,17 +145,6 @@ export class HuiGenericEntityRow extends LitElement {
     handleAction(this, this.hass!, this.config!, ev.detail.action!);
   }
 
-  private _getArea(stateObj) {
-    const context = getEntityContext(
-      stateObj,
-      this.hass!.entities,
-      this.hass!.devices,
-      this.hass!.areas,
-      this.hass!.floors
-    );
-    return context.area ? computeAreaName(context.area) : undefined;
-  }
-
   static styles = css`
     :host {
       display: flex;

src/panels/lovelace/components/hui-timestamp-display.ts

@@ -10,6 +10,7 @@ import {
 import {
   formatDateTime,
   formatDateTimeNumeric,
+  formatDateTimeWithSeconds,
 } from "../../../common/datetime/format_date_time";
 import {
   formatTime,
@@ -29,6 +30,8 @@ import type {
 } from "../../../types";
 import type { LocalizeFunc } from "../../../common/translations/localize";
 import type { TimestampRenderingFormat } from "./types";
+import { uid } from "../../../common/util/uid";
+import "../../../components/ha-tooltip";
 
 const FORMATS: Record<
   string,
@@ -60,6 +63,8 @@ class HuiTimestampDisplay extends LitElement {
 
   @property({ type: Boolean }) public capitalize = false;
 
+  @property({ type: Boolean }) public tooltip = false;
+
   @state() private _relative?: string;
 
   @state()
@@ -87,6 +92,8 @@ class HuiTimestampDisplay extends LitElement {
 
   private _interval?: number;
 
+  private _uid = "timestamp-display-" + uid();
+
   public connectedCallback(): void {
     super.connectedCallback();
     this._connected = true;
@@ -114,6 +121,14 @@ class HuiTimestampDisplay extends LitElement {
     const formatType = this._formatType;
 
     if (INTERVAL_FORMAT.includes(formatType)) {
+      if (this.tooltip) {
+        return html`
+          <ha-tooltip for=${this._uid} placement="right">
+            ${formatDateTimeWithSeconds(this.ts, this._locale, this._config)}
+          </ha-tooltip>
+          <span id=${this._uid}> ${this._relative} </span>
+        `;
+      }
       return html` ${this._relative} `;
     }
     if (formatType in FORMATS) {
@@ -123,9 +138,20 @@ class HuiTimestampDisplay extends LitElement {
           : format.style && format.style in FORMATS[formatType]
             ? format.style
             : "default";
-      return html`
-        ${FORMATS[formatType][style](this.ts, this._locale, this._config)}
-      `;
+      const formatted = FORMATS[formatType][style](
+        this.ts,
+        this._locale,
+        this._config
+      );
+      if (this.tooltip) {
+        return html`
+          <ha-tooltip for=${this._uid} placement="right">
+            ${formatDateTimeWithSeconds(this.ts, this._locale, this._config)}
+          </ha-tooltip>
+          <span id=${this._uid}> ${formatted} </span>
+        `;
+      }
+      return html` ${formatted} `;
     }
     return html`${this._localize(
       "ui.panel.lovelace.components.timestamp-display.invalid_format"

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-generic-entity-row-editor.ts

@@ -4,12 +4,8 @@ import memoizeOne from "memoize-one";
 import { assert } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeDomain } from "../../../../common/entity/compute_domain";
-import type { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/ha-form/ha-form";
-import type {
-  HaFormSchema,
-  SchemaUnion,
-} from "../../../../components/ha-form/types";
+import type { SchemaUnion } from "../../../../components/ha-form/types";
 import type { HomeAssistant } from "../../../../types";
 import { SENSOR_TIMESTAMP_DEVICE_CLASSES } from "../../../../data/sensor";
 import type { EntitiesCardEntityConfig } from "../../cards/types";
@@ -17,19 +13,7 @@ import type { LovelaceRowEditor } from "../../types";
 import { entitiesConfigStruct } from "../structs/entities-struct";
 import { DOMAIN_TO_ELEMENT_TYPE } from "../../create-element/create-row-element";
 import { TIMESTAMP_STATE_DOMAINS } from "../../../../common/const";
-
-const SECONDARY_INFO_VALUES = {
-  none: {},
-  "entity-id": {},
-  "last-changed": {},
-  "last-updated": {},
-  "last-triggered": { domains: ["automation", "script"] },
-  area: {},
-  position: { domains: ["cover"] },
-  state: {},
-  "tilt-position": { domains: ["cover"] },
-  brightness: { domains: ["light"] },
-};
+import { stateContentHasTimestamp } from "../../../../state-display/state-display";
 
 @customElement("hui-generic-entity-row-editor")
 export class HuiGenericEntityRowEditor
@@ -47,96 +31,87 @@ export class HuiGenericEntityRowEditor
     this._config = config;
   }
 
-  private _schema = memoizeOne(
-    (entity: string, localize: LocalizeFunc, showTimeFormat?: boolean) => {
-      const domain = computeDomain(entity);
-
-      return [
-        { name: "entity", required: true, selector: { entity: {} } },
-        {
-          name: "name",
-          selector: { entity_name: {} },
-          context: { entity: "entity" },
-        },
-        {
-          name: "",
-          type: "grid",
-          schema: [
-            {
-              name: "icon",
-              selector: {
-                icon: {},
-              },
-              context: {
-                icon_entity: "entity",
-              },
+  private _schema = memoizeOne((showTimeFormat?: boolean) => {
+    return [
+      { name: "entity", required: true, selector: { entity: {} } },
+      {
+        name: "name",
+        selector: { entity_name: {} },
+        context: { entity: "entity" },
+      },
+      {
+        name: "",
+        type: "grid",
+        schema: [
+          {
+            name: "icon",
+            selector: {
+              icon: {},
             },
-            {
-              name: "color",
-              selector: {
-                ui_color: {
-                  include_state: true,
-                  include_none: true,
-                },
-              },
-            },
-          ],
-        },
-        {
-          name: "secondary_info",
-          selector: {
-            select: {
-              options: (
-                Object.keys(SECONDARY_INFO_VALUES).filter(
-                  (info) =>
-                    !("domains" in SECONDARY_INFO_VALUES[info]) ||
-                    ("domains" in SECONDARY_INFO_VALUES[info] &&
-                      SECONDARY_INFO_VALUES[info].domains!.includes(domain))
-                ) as (keyof typeof SECONDARY_INFO_VALUES)[]
-              ).map((info) => ({
-                value: info,
-                label: localize(
-                  `ui.panel.lovelace.editor.card.entities.secondary_info_values.${info}`
-                ),
-              })),
+            context: {
+              icon_entity: "entity",
             },
           },
-        },
-        ...(showTimeFormat
-          ? ([
-              {
-                name: "time_format",
-                selector: {
-                  ui_time_format: {},
-                },
+          {
+            name: "color",
+            selector: {
+              ui_color: {
+                include_state: true,
+                include_none: true,
               },
-            ] as const satisfies readonly HaFormSchema[])
-          : []),
-      ] as const;
-    }
-  );
+            },
+          },
+        ],
+      },
+      {
+        name: "secondary_info",
+        selector: {
+          ui_state_content: {
+            allow_context: true,
+          },
+        },
+        context: {
+          filter_entity: "entity",
+        },
+      },
+      {
+        name: "time_format",
+        visible: showTimeFormat,
+        selector: {
+          ui_time_format: {},
+        },
+      },
+    ] as const;
+  });
 
   protected render() {
     if (!this.hass || !this._config) {
       return nothing;
     }
 
-    const entity = this._config.entity;
-    const domain = entity ? computeDomain(entity) : "";
-    const simpleEntity =
-      (DOMAIN_TO_ELEMENT_TYPE[domain] ||
-        DOMAIN_TO_ELEMENT_TYPE["_domain_not_found"]) === "simple";
-    const showTimeFormat = simpleEntity
-      ? TIMESTAMP_STATE_DOMAINS.has(domain)
-      : domain === "event" ||
-        (domain === "sensor" &&
-          SENSOR_TIMESTAMP_DEVICE_CLASSES.includes(
-            this.hass.states[entity]?.attributes.device_class
-          ));
-
-    const schema =
-      this.schema ||
-      this._schema(this._config.entity, this.hass.localize, showTimeFormat);
+    let schema = this.schema;
+    if (!schema) {
+      const entity = this._config.entity;
+      const domain = entity ? computeDomain(entity) : "";
+      const simpleEntity =
+        (DOMAIN_TO_ELEMENT_TYPE[domain] ||
+          DOMAIN_TO_ELEMENT_TYPE["_domain_not_found"]) === "simple";
+      const showTimeFormat =
+        (this._config.secondary_info &&
+          stateContentHasTimestamp(
+            entity,
+            this.hass.states[entity],
+            this._config.secondary_info
+          )) ||
+        (simpleEntity
+          ? TIMESTAMP_STATE_DOMAINS.has(domain)
+          : domain === "event" ||
+            (domain === "sensor" &&
+              SENSOR_TIMESTAMP_DEVICE_CLASSES.includes(
+                this.hass.states[entity]?.attributes.device_class
+              )));
+      schema = this._schema(showTimeFormat);
+    }
 
     return html`
       <ha-form

src/panels/lovelace/editor/structs/entities-struct.ts

@@ -1,4 +1,4 @@
-import { union, object, string, optional, boolean } from "superstruct";
+import { array, union, object, string, optional, boolean } from "superstruct";
 import { timeFormatConfigStruct } from "../../components/types";
 import {
   actionConfigStruct,
@@ -12,7 +12,7 @@ export const entitiesConfigStruct = union([
     name: optional(entityNameStruct),
     icon: optional(string()),
     image: optional(string()),
-    secondary_info: optional(string()),
+    secondary_info: optional(union([string(), array(string())])),
     time_format: optional(timeFormatConfigStruct),
     color: optional(string()),
     tap_action: optional(actionConfigStruct),

src/panels/lovelace/entity-rows/hui-weather-entity-row.ts

@@ -23,6 +23,7 @@ import { hasConfigOrEntityChanged } from "../common/has-changed";
 import "../components/hui-generic-entity-row";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import type { LovelaceRow } from "./types";
+import "../../../state-display/state-display";
 
 @customElement("hui-weather-entity-row")
 class HuiWeatherEntityRow extends LitElement implements LovelaceRow {
@@ -162,25 +163,15 @@ class HuiWeatherEntityRow extends LitElement implements LovelaceRow {
           hasSecondary
             ? html`
                 <div class="secondary">
-                  ${
-                    this._config.secondary_info === "entity-id"
-                      ? stateObj.entity_id
-                      : this._config.secondary_info === "last-changed"
-                        ? html`
-                            <ha-relative-time
-                              .datetime=${stateObj.last_changed}
-                              capitalize
-                            ></ha-relative-time>
-                          `
-                        : this._config.secondary_info === "last-updated"
-                          ? html`
-                              <ha-relative-time
-                                .datetime=${stateObj.last_updated}
-                                capitalize
-                              ></ha-relative-time>
-                            `
-                          : ""
-                  }
+                  <state-display
+                    .stateObj=${stateObj}
+                    .hass=${this.hass}
+                    .content=${this._config.secondary_info}
+                    .timeFormat=${this._config.time_format}
+                    .name=${name}
+                    timestamp-tooltip
+                  >
+                  </state-display>
                 </div>
               `
             : ""